feat: 升级form修改部门

src/components/ProForm/index.vue

@@ -86,7 +86,7 @@ const _formOptions: ComputedRef<ProForm.FormOptions> = computed(() => {
     labelWidth: 120,
     disabled: false,
     hasFooter: true,
-    labelSuffix: ': ',
+    labelSuffix: ':',
     submitButtonText: '提交',
     resetButtonText: '重置',
     cancelButtonText: '取消'
@@ -134,8 +134,8 @@ watch(
   () => {
     props.itemsOptions.map((item: ProForm.ItemsOptions) => {
       // 如果类型为checkbox，默认值需要设置一个空数组
-      const value = ['checkbox', 'transfer'].includes(item.compOptions.elTagName!) ? [] : ''
-      props.model ? (formModel.value = props.model) : (formModel.value[item.prop] = item.value || value)
+      let value = ['checkbox', 'transfer'].includes(item.compOptions.elTagName!) ? [] : null
+      props.model[item.prop] ? (formModel.value = props.model) : (formModel.value[item.prop] = item.compOptions.value || value)
     })
   },
   { immediate: true }

src/typings/ProForm.d.ts

@@ -53,7 +53,6 @@ declare namespace ProForm {
     label?: string
     labelWidth?: string | number // 标签宽度，例如 '50px'。 可以使用 auto。
     prop: string // prop
-    value?: any // 默认值
     tooltip?: string // 问号，tooltip提示
     required?: boolean
     hideLabelSuffix?: boolean // label后缀是否隐藏
@@ -85,7 +84,7 @@ declare namespace ProForm {
     clearable?: boolean // 是否可清空
     showPassword?: boolean // 是否显示切换密码图标
     enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>) // 枚举字典
-    onChange?: (value: any) => void
+    value?: string | number | boolean | any[] // 选项框值
     enumKey?: string
     labelKey?: string
     valueKey?: string

src/views/system/dept/index.vue

@@ -34,7 +34,7 @@ import { ref, reactive } from 'vue'
 import { useHandleData } from '@/hooks/useHandleData'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, CirclePlus } from '@element-plus/icons-vue'
 import { handleTree } from '@/utils/common'
@@ -51,7 +51,7 @@ const deptOptions = ref<any[]>([])
 const dataCallback = (res: any) => {
   const data = handleTree(res, 'deptId')
   deptOptions.value = data
-  setFieldList()
+  setItemsOptions()
   return data
 }
 
@@ -70,9 +70,9 @@ const openDialog = async (type: number, title: string, row?: any) => {
   }
 
   // 重置表单项
-  setFieldList()
+  setItemsOptions()
   if (row?.parentId == 0 && type == 2) {
-    fieldList.splice(0, 1)
+    itemsOptions.splice(0, 1)
   }
   // 增加子节点
   if (type == 4 && row?.parentId) {
@@ -82,9 +82,9 @@ const openDialog = async (type: number, title: string, row?: any) => {
   }
   const params = {
     title,
-    width: 500,
+    width: 700,
     isEdit: type !== 3,
-    fieldList: fieldList,
+    itemsOptions: itemsOptions,
     model: type == 1 ? {} : res.data,
     api: type == 1 || type == 4 ? addDeptApi : updateDeptApi,
     getTableList: proTable.value?.getTableList
@@ -127,71 +127,80 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作' }
 ])
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
+
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
     {
       label: '上级部门',
-      field: 'parentId',
-      enum: deptOptions.value,
-      type: 'select-tree',
-      rules: [{ required: true, message: '请选择上级部门', trigger: 'change' }],
-      options: {
+      prop: 'parentId',
+      compOptions: {
+        enum: deptOptions.value,
+        elTagName: 'tree-select',
         valueKey: 'deptId',
         labelKey: 'deptName',
-        children: 'children'
-      },
-      placeholder: '请输入上级部门'
+        placeholder: '请输入上级部门'
+      }
     },
     {
       label: '部门名称',
-      field: 'deptName',
+      prop: 'deptName',
       rules: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
       span: 12,
-      placeholder: '请输入部门名称'
+      compOptions: {
+        placeholder: '请输入部门名称'
+      }
     },
     {
       label: '显示顺序',
-      field: 'orderNum',
-      type: 'input-number',
+      prop: 'orderNum',
       rules: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
-      options: {
-        min: 0
-      },
       span: 12,
-      placeholder: '请输入显示顺序'
+      compOptions: {
+        value: 0,
+        elTagName: 'input-number',
+        min: 0
+      }
     },
     {
       label: '负责人',
-      field: 'leader',
+      prop: 'leader',
       span: 12,
-      placeholder: '请输入负责人'
+      compOptions: {
+        placeholder: '请输入负责人'
+      }
     },
     {
       label: '联系电话',
-      field: 'phone',
+      prop: 'phone',
       span: 12,
       rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
-      placeholder: '请输入联系电话'
+      compOptions: {
+        placeholder: '请输入联系电话'
+      }
     },
     {
       label: '邮箱',
-      field: 'email',
+      prop: 'email',
       span: 12,
       rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
-      placeholder: '请输入邮箱'
+      compOptions: {
+        placeholder: '请输入邮箱'
+      }
     },
     {
       label: '部门状态',
-      field: 'status',
-      enum: () => getDictsApi('sys_normal_disable'),
-      type: 'radio',
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      },
+      prop: 'status',
       span: 12,
-      placeholder: '请选择部门状态'
+      compOptions: {
+        value: '0',
+        elTagName: 'radio-group',
+        enum: () => getDictsApi('sys_normal_disable'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue',
+        placeholder: '请选择部门状态'
+      }
     }
   ]
 }