From 6a9321d2a6e0a7b67e2ccbe6c4f53d78286d88be Mon Sep 17 00:00:00 2001 From: cshaptx4869 <994774638@qq.com> Date: Thu, 23 May 2024 16:20:31 +0800 Subject: [PATCH] =?UTF-8?q?feat(PageModal):=20:sparkles:=20=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E9=A1=B9=E5=A2=9E=E5=8A=A0initFn=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PageModal/Form.vue | 4 ++- src/components/PageModal/types.ts | 2 ++ src/views/demo/curd/config/add.ts | 48 ++++++++++-------------------- src/views/demo/curd/config/edit.ts | 48 ++++++++++-------------------- 4 files changed, 35 insertions(+), 67 deletions(-) diff --git a/src/components/PageModal/Form.vue b/src/components/PageModal/Form.vue index 50623ed4..fe3ba1ee 100644 --- a/src/components/PageModal/Form.vue +++ b/src/components/PageModal/Form.vue @@ -103,13 +103,15 @@ const props = withDefaults( ); const formRef = ref(); +const formItems = reactive(props.formItems); const formData = reactive({}); const formRules: FormRules = {}; const watchArr = []; const computedArr = []; const watchEffectArr = []; // 初始化 -for (const item of props.formItems) { +for (const item of formItems) { + item.initFn && item.initFn(item); formData[item.prop] = item.initialValue ?? ""; formRules[item.prop] = item.rules ?? []; if (item.watch !== undefined) { diff --git a/src/components/PageModal/types.ts b/src/components/PageModal/types.ts index dd25fe7b..cddca5fb 100644 --- a/src/components/PageModal/types.ts +++ b/src/components/PageModal/types.ts @@ -59,4 +59,6 @@ export type IFormItems = Array<{ computed?: (data: T) => any; // 监听收集函数 watchEffect?: (data: T) => void; + // 初始化数据函数扩展 + initFn?: (formItem: IObject) => void; }>; diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts index 1400b748..19409669 100644 --- a/src/views/demo/curd/config/add.ts +++ b/src/views/demo/curd/config/add.ts @@ -1,3 +1,6 @@ +import DeptAPI from "@/api/dept"; +import DictAPI from "@/api/dict"; +import RoleAPI from "@/api/role"; import UserAPI from "@/api/user"; import type { UserForm } from "@/api/user/model"; import type { IModalConfig } from "@/components/PageModal/index.vue"; @@ -42,26 +45,14 @@ const modalConfig: IModalConfig = { type: "tree-select", attrs: { placeholder: "请选择所属部门", - data: [ - { - value: 1, - label: "有来技术", - children: [ - { - value: 2, - label: "研发部门", - }, - { - value: 3, - label: "测试部门", - }, - ], - }, - ], + data: [], filterable: true, "check-strictly": true, "render-after-expand": false, }, + async initFn(formItem) { + formItem.attrs.data = await DeptAPI.getOptions(); + }, }, { type: "select", @@ -70,11 +61,10 @@ const modalConfig: IModalConfig = { attrs: { placeholder: "请选择", }, - options: [ - { label: "男", value: 1 }, - { label: "女", value: 2 }, - { label: "未知", value: 0 }, - ], + options: [], + async initFn(formItem) { + formItem.options = await DictAPI.getDictOptions("gender"); + }, }, { label: "角色", @@ -85,18 +75,10 @@ const modalConfig: IModalConfig = { placeholder: "请选择", multiple: true, }, - options: [ - { label: "系统管理员", value: 2 }, - { label: "系统管理员1", value: 4 }, - { label: "系统管理员2", value: 5 }, - { label: "系统管理员3", value: 6 }, - { label: "系统管理员4", value: 7 }, - { label: "系统管理员5", value: 8 }, - { label: "系统管理员6", value: 9 }, - { label: "系统管理员7", value: 10 }, - { label: "系统管理员8", value: 11 }, - { label: "访问游客", value: 3 }, - ], + options: [], + async initFn(formItem) { + this.options = await RoleAPI.getOptions(); + }, }, { type: "input", diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts index 2f7d4cb7..b8cccd2d 100644 --- a/src/views/demo/curd/config/edit.ts +++ b/src/views/demo/curd/config/edit.ts @@ -1,3 +1,6 @@ +import DeptAPI from "@/api/dept"; +import DictAPI from "@/api/dict"; +import RoleAPI from "@/api/role"; import UserAPI from "@/api/user"; import type { UserForm } from "@/api/user/model"; import type { IModalConfig } from "@/components/PageModal/index.vue"; @@ -43,26 +46,14 @@ const modalConfig: IModalConfig = { type: "tree-select", attrs: { placeholder: "请选择所属部门", - data: [ - { - value: 1, - label: "有来技术", - children: [ - { - value: 2, - label: "研发部门", - }, - { - value: 3, - label: "测试部门", - }, - ], - }, - ], + data: [], filterable: true, "check-strictly": true, "render-after-expand": false, }, + async initFn(formItem) { + formItem.attrs.data = await DeptAPI.getOptions(); + }, }, { type: "select", @@ -71,11 +62,10 @@ const modalConfig: IModalConfig = { attrs: { placeholder: "请选择", }, - options: [ - { label: "男", value: 1 }, - { label: "女", value: 2 }, - { label: "未知", value: 0 }, - ], + options: [], + async initFn(formItem) { + formItem.options = await DictAPI.getDictOptions("gender"); + }, }, { label: "角色", @@ -86,18 +76,10 @@ const modalConfig: IModalConfig = { placeholder: "请选择", multiple: true, }, - options: [ - { label: "系统管理员", value: 2 }, - { label: "系统管理员1", value: 4 }, - { label: "系统管理员2", value: 5 }, - { label: "系统管理员3", value: 6 }, - { label: "系统管理员4", value: 7 }, - { label: "系统管理员5", value: 8 }, - { label: "系统管理员6", value: 9 }, - { label: "系统管理员7", value: 10 }, - { label: "系统管理员8", value: 11 }, - { label: "访问游客", value: 3 }, - ], + options: [], + async initFn(formItem) { + this.options = await RoleAPI.getOptions(); + }, }, { type: "input",