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",