fix: 升级form使用

src/utils/index.ts

@@ -294,7 +294,7 @@ export function filterEnum(callValue: any, enumData?: any, fieldNames?: FieldNam
 
   // 判断是否输出的结果为 tag 类型
   if (type == 'tag') {
-    return filterData?.listClass ? filterData.listClass : 'primary'
+    return filterData?.tagType ? filterData.tagType : ''
   } else {
     return filterData ? filterData[label] : '--'
   }

src/views/system/dict/data.vue

@@ -39,10 +39,10 @@ import { useDownload } from '@/hooks/useDownload'
 import { ElMessageBox } from 'element-plus'
 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, Download, View } from '@element-plus/icons-vue'
-import { listDataApi, delDataApi, addDataApi, updateDataApi, getDataApi, exportApi, getDictsApi } from '@/api/modules/system/dictData'
+import { listDataApi, delDataApi, addDataApi, updateDataApi, getDataApi, exportApi } from '@/api/modules/system/dictData'
 import { getDictApi } from '@/api/modules/system/dict'
 
 import { useRoute } from 'vue-router'
@@ -96,12 +96,13 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.dictCode) {
     res = await getDataApi(row?.dictCode || null)
   }
+  setItemsOptions()
   const params = {
     title,
     width: 500,
     isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? { dictType: defaultDictType.value } : res.data,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? { dictType: defaultDictType.value, version: 0 } : { ...res.data, version: 0 },
     api: type == 1 ? addDataApi : updateDataApi,
     getTableList: proTable.value?.getTableList
   }
@@ -144,16 +145,6 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 120
   },
-  {
-    prop: 'status',
-    label: '状态',
-    tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
-    search: {
-      el: 'tree-select'
-    },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' }
-  },
   {
     prop: 'createTime',
     label: '创建时间',
@@ -166,66 +157,70 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
-const fieldList: Form.FieldItem[] = [
-  {
-    label: '标签类型',
-    field: 'dictType',
-    disabled: true
-  },
-  {
-    label: '数据标签',
-    field: 'dictLabel',
-    rules: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
-    placeholder: '请输入数据标签'
-  },
-  {
-    label: '数据键值',
-    field: 'dictValue',
-    rules: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
-    placeholder: '请输入数据键值'
-  },
-  {
-    label: '显示排序',
-    field: 'dictSort',
-    rules: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
-    type: 'input-number',
-    options: {
-      min: 0
+
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '标签类型',
+      prop: 'dictType',
+      compOptions: {
+        disabled: true
+      }
     },
-    placeholder: '请输入显示排序'
-  },
-  {
-    label: '样式属性',
-    field: 'cssClass',
-    placeholder: '请输入样式属性'
-  },
-  {
-    label: '回显样式',
-    field: 'listClass',
-    type: 'select',
-    enum: listClassOptions,
-    options: {
-      valueKey: 'value',
-      labelKey: 'label'
+    {
+      label: '数据标签',
+      prop: 'dictLabel',
+      rules: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入数据标签'
+      }
     },
-    placeholder: '请输入回显样式'
-  },
-  {
-    label: '状态',
-    field: 'status',
-    enum: () => getDictsApi('sys_normal_disable'),
-    type: 'radio',
-    options: {
-      labelKey: 'dictLabel',
-      valueKey: 'dictValue'
+    {
+      label: '数据键值',
+      prop: 'dictValue',
+      rules: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入数据键值'
+      }
     },
-    placeholder: '请选择状态'
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    type: 'textarea',
-    placeholder: '请输入备注'
-  }
-]
+    {
+      label: '显示排序',
+      prop: 'dictSort',
+      rules: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
+      compOptions: {
+        elTagName: 'input-number',
+        min: 0,
+        placeholder: '请输入显示排序'
+      }
+    },
+    {
+      label: '样式属性',
+      prop: 'cssClass',
+      compOptions: {
+        placeholder: '请输入样式属性'
+      }
+    },
+    {
+      label: '回显样式',
+      prop: 'listClass',
+      compOptions: {
+        elTagName: 'select',
+        enum: listClassOptions,
+        valueKey: 'value',
+        labelKey: 'label',
+        placeholder: '请输入回显样式'
+      }
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      compOptions: {
+        type: 'textarea',
+        placeholder: '请输入备注'
+      }
+    }
+  ]
+}
 </script>

src/views/system/dict/index.vue

@@ -37,11 +37,10 @@ import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 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, Download } from '@element-plus/icons-vue'
 import { listDictApi, delDictApi, addDictApi, updateDictApi, exportApi, getDictApi } from '@/api/modules/system/dict'
-import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -73,12 +72,13 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.dictId) {
     res = await getDictApi(row?.dictId || null)
   }
+  setItemsOptions()
   const params = {
     title,
     width: 500,
     isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? { version: 0 } : { ...res.data, version: 0 },
     api: type == 1 ? addDictApi : updateDictApi,
     getTableList: proTable.value?.getTableList
   }
@@ -117,17 +117,6 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 150
   },
-  {
-    prop: 'status',
-    label: '状态',
-    tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
-    search: {
-      el: 'tree-select'
-    },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
-    width: 80
-  },
   {
     prop: 'createTime',
     label: '创建时间'
@@ -141,35 +130,35 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作', width: 230 }
 ])
-const fieldList: Form.FieldItem[] = [
-  {
-    label: '字典名称',
-    field: 'dictName',
-    rules: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
-    placeholder: '请输入字典名称'
-  },
-  {
-    label: '字典类型',
-    field: 'dictType',
-    rules: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
-    placeholder: '请输入字典类型'
-  },
-  {
-    label: '状态',
-    field: 'status',
-    enum: () => getDictsApi('sys_normal_disable'),
-    type: 'radio',
-    options: {
-      labelKey: 'dictLabel',
-      valueKey: 'dictValue'
+
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '字典名称',
+      prop: 'dictName',
+      rules: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入字典名称'
+      }
     },
-    placeholder: '请选择状态'
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    type: 'textarea',
-    placeholder: '请输入备注'
-  }
-]
+    {
+      label: '字典类型',
+      prop: 'dictType',
+      rules: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入字典类型'
+      }
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      compOptions: {
+        type: 'textarea',
+        placeholder: '请输入备注'
+      }
+    }
+  ]
+}
 </script>

src/views/system/menu/index.vue

@@ -174,6 +174,7 @@ const setFieldList = () => {
       span: 12,
       compOptions: {
         elTagName: 'radio-button',
+        value: '0',
         enum: () => getDictsApi('sys_normal_disable'),
         labelKey: 'dictLabel',
         valueKey: 'dictValue'
@@ -247,6 +248,7 @@ const setFieldList = () => {
       },
       compOptions: {
         elTagName: 'radio-button',
+        value: '0',
         enum: () => getDictsApi('sys_show_hide'),
         labelKey: 'dictLabel',
         valueKey: 'dictValue'

src/views/system/role/index.vue

@@ -469,6 +469,7 @@ const setItemsOptions = () => {
       rules: [{ required: true, message: '角色状态不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'radio-group',
+        value: '0',
         enum: () => getDictsApi('sys_normal_disable'),
         labelKey: 'dictLabel',
         valueKey: 'dictValue'

src/views/system/user/index.vue

@@ -309,6 +309,7 @@ const setItemsOptions = () => {
       prop: 'status',
       compOptions: {
         elTagName: 'radio-group',
+        value: '0',
         enum: () => getDictsApi('sys_normal_disable'),
         labelKey: 'dictLabel',
         valueKey: 'dictValue'