PageModal 弹窗表单

配置化生成新增/编辑弹窗，支持 Dialog 和 Drawer 两种展示方式。

Props

参数	说明	类型	默认值
modal-config	弹窗配置	IModalConfig	—

IModalConfig

属性	说明	类型	默认值
formItems	表单项配置（必填）	IFormItem[]	—
formAction	提交接口	(data) => Promise<any>	—
component	弹窗类型	"dialog" | "drawer"	"dialog"
dialog	ElDialog 属性	Partial<DialogProps>	—
drawer	ElDrawer 属性（component: "drawer" 时使用）	Partial<DrawerProps>	—
form	ElForm 属性	Partial<FormProps>	—
pk	主键字段名	string	'id'
permPrefix	权限前缀	string	—
colon	标签后是否显示冒号	boolean	false
beforeSubmit	提交前钩子	(data) => void	—

配置示例

新增

const addModalConfig: IModalConfig<UserForm> = reactive({
  permPrefix: "sys:user",
  dialog: { title: "新增用户", width: 800, draggable: true },
  form: { labelWidth: 100 },
  formAction: UserAPI.create,
  formItems: [
    {
      label: "用户名",
      prop: "username",
      type: "input",
      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
      attrs: { placeholder: "请输入用户名" },
      col: { xs: 24, sm: 12 },
    },
    {
      label: "所属部门",
      prop: "deptId",
      type: "tree-select",
      rules: [{ required: true, message: "所属部门不能为空", trigger: "change" }],
      attrs: {
        data: deptArr,
        filterable: true,
        "check-strictly": true,
        "render-after-expand": false,
      },
    },
    {
      label: "角色",
      prop: "roleIds",
      type: "select",
      attrs: { multiple: true },
      options: roleArr,
      initialValue: [],
    },
    {
      label: "状态",
      prop: "status",
      type: "radio",
      options: [
        { label: "正常", value: 1 },
        { label: "禁用", value: 0 },
      ],
      initialValue: 1,
    },
  ],
});

编辑

编辑配置可切换为抽屉模式，formAction 根据主键调用更新接口：

const editModalConfig: IModalConfig<UserForm> = reactive({
  permPrefix: "sys:user",
  component: "drawer",
  drawer: { title: "修改用户", size: 500 },
  pk: "id",
  formAction: (data) => UserAPI.update(data.id, data),
  formItems: [
    {
      label: "用户名",
      prop: "username",
      type: "input",
      attrs: { readonly: true },
    },
    {
      label: "状态",
      prop: "status",
      type: "switch",
      attrs: {
        inlinePrompt: true,
        activeText: "正常",
        inactiveText: "禁用",
        activeValue: 1,
        inactiveValue: 0,
      },
    },
  ],
});

自定义表单项

type: "custom" 配合插槽实现自定义组件：

<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
  <template #gender="scope">
    <DictSelect v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
  </template>
</page-modal>

Events

事件名	说明	回调参数
submit-click	表单提交成功	(formData: any)

实例方法

方法	说明
setFormData(data)	设置表单数据（编辑/查看时使用）
setModalVisible(visible?)	打开/关闭弹窗
getFormData(key?)	获取表单数据
setFormItemData(key, value)	设置某一字段值
handleDisabled(disable)	设置表单禁用状态（查看模式）