fix: 升级form

src/views/system/post/index.vue

@@ -40,7 +40,7 @@ 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, Upload, View, CirclePlus } from '@element-plus/icons-vue'
 import {
@@ -53,6 +53,7 @@ import {
   exportApi,
   getPostApi
 } from '@/api/modules/system/post'
+import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -97,12 +98,12 @@ const openDialog = async (type: number, title: string, row?: any) => {
     res = await getPostApi(row?.postId || null)
   }
   // 重置表单
-  setFieldList()
+  setItemsOptions()
   const params = {
     title,
     width: 580,
     isEdit: type !== 3,
-    fieldList: fieldList,
+    itemsOptions: itemsOptions,
     model: type == 1 ? {} : res.data,
     api: type == 1 ? addPostApi : updatePostApi,
     getTableList: proTable.value?.getTableList
@@ -190,38 +191,54 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
+
 // 表单配置项
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
     {
       label: '岗位编码',
-      field: 'postCode',
+      prop: 'postCode',
       rules: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
-      placeholder: '请输入岗位编码'
+      compOptions: {
+        placeholder: '请输入岗位编码'
+      }
     },
     {
       label: '岗位名称',
-      field: 'postName',
+      prop: 'postName',
       rules: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
-      placeholder: '请输入岗位名称'
+      compOptions: {
+        placeholder: '请输入岗位名称'
+      }
     },
     {
       label: '显示顺序',
-      field: 'postSort',
+      prop: 'postSort',
       rules: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
-      placeholder: '请输入显示顺序'
+      compOptions: {
+        elTagName: 'input-number',
+        min: 0
+      }
     },
     {
       label: '状态',
-      field: 'status',
+      prop: 'status',
       rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
-      placeholder: '请输入状态'
+      compOptions: {
+        elTagName: 'radio-group',
+        value: '0',
+        enum: () => getDictsApi('sys_normal_disable'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue'
+      }
     },
     {
       label: '备注',
-      field: 'remark',
-      placeholder: '请输入备注'
+      prop: 'remark',
+      compOptions: {
+        placeholder: '请输入备注'
+      }
     }
   ]
 }

src/views/system/role/index.vue

@@ -312,7 +312,11 @@ function handleAuthUser(row: any) {
 
 // 切换绝俗状态
 const changeStatus = async (row: any) => {
-  await useHandleData(changeStatusApi, { roleId: row.roleId, status: row.status == '1' ? 0 : 1 }, `切换【${row.roleName}】角色状态`)
+  await useHandleData(
+    changeStatusApi,
+    { roleId: row.roleId, version: row.version, status: row.status == '1' ? 0 : 1 },
+    `切换【${row.roleName}】角色状态`
+  )
   proTable.value?.getTableList()
 }
 

src/views/system/user/index.vue

@@ -50,7 +50,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import TreeFilter from '@/components/TreeFilter/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
 import { CirclePlus, Download, Upload, View, Delete, EditPen } from '@element-plus/icons-vue'
 import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
 import {
@@ -154,123 +154,40 @@ const roleOptions = ref<any[]>([])
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
   let res = await getUserApi(row?.userId || null)
-
+  debugger
   postOptions.value = res.data.posts
   roleOptions.value = res.data.roles
   // 表单项配置
-  const fieldList: Form.FieldItem[] = [
-    {
-      label: '用户昵称',
-      placeholder: '请输入用户昵称',
-      span: 12,
-      field: 'nickName',
-      rules: [{ required: true, message: '用户昵称不能为空' }]
-    },
-    {
-      label: '归属部门',
-      span: 12,
-      field: 'deptId',
-      placeholder: '请选择归属部门',
-      enum: () => deptTreeSelectApi(),
-      type: 'select-tree',
-      options: {
-        valueKey: 'id',
-        labelKey: 'label',
-        children: 'children'
-      }
-    },
-    {
-      label: '手机号码',
-      placeholder: '请输入手机号码',
-      span: 12,
-      field: 'phonenumber',
-      rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
-    },
-    {
-      label: '邮箱',
-      placeholder: '请输入邮箱',
-      span: 12,
-      field: 'email',
-      rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
-    },
-    {
-      label: '性别',
-      span: 12,
-      field: 'sex',
-      enum: () => getDictsApi('sys_user_gender'),
-      type: 'select',
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      }
-    },
-    {
-      label: '状态',
-      span: 12,
-      field: 'status',
-      type: 'radio',
-      enum: () => getDictsApi('sys_normal_disable'),
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      }
-    },
-    {
-      label: '岗位',
-      span: 12,
-      field: 'postIds',
-      enum: postOptions.value,
-      type: 'select',
-      options: {
-        valueKey: 'postId',
-        labelKey: 'postName',
-        multiple: true
-      }
-    },
-    {
-      label: '角色',
-      span: 12,
-      field: 'roleIds',
-      enum: roleOptions.value,
-      type: 'select',
-      options: {
-        valueKey: 'roleId',
-        labelKey: 'roleName',
-        multiple: true
-      }
-    },
-    {
-      label: '备注',
-      placeholder: '请输入内容',
-      field: 'remark',
-      type: 'textarea'
-    }
-  ]
+  setItemsOptions()
   if (type == 1) {
-    fieldList.splice(
+    itemsOptions.splice(
       4,
       0,
       {
         label: '用户名称',
-        placeholder: '请输入用户名称',
-        field: 'userName',
+        prop: 'userName',
         span: 12,
         rules: [
           { required: true, message: '用户名称不能为空' },
           { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ]
+        ],
+        compOptions: {
+          placeholder: '请输入用户名称'
+        }
       },
       {
         label: '用户密码',
-        placeholder: '请输入密码',
-        field: 'password',
-        type: 'password',
-        showPassword: true,
+        prop: 'password',
         span: 12,
         rules: [
           { required: true, message: '密码不能为空' },
           { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ]
+        ],
+        compOptions: {
+          showPassword: true,
+          type: 'password',
+          placeholder: '请输入密码'
+        }
       }
     )
   }
@@ -283,7 +200,7 @@ const openDialog = async (type: number, title: string, row?: any) => {
     title,
     width: 680,
     isEdit: type !== 3,
-    fieldList: fieldList,
+    itemsOptions: itemsOptions,
     model: type == 1 ? {} : res.data.user,
     api: type == 1 ? addUserApi : updateUserApi,
     getTableList: proTable.value?.getTableList
@@ -331,4 +248,105 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   { prop: 'createTime', label: '创建时间', width: 180 },
   { prop: 'operation', label: '操作', width: 240, fixed: 'right' }
 ])
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '用户昵称',
+      span: 12,
+      prop: 'nickName',
+      rules: [{ required: true, message: '用户昵称不能为空' }],
+      compOptions: {
+        placeholder: '请输入用户昵称'
+      }
+    },
+    {
+      label: '归属部门',
+      span: 12,
+      prop: 'deptId',
+      compOptions: {
+        elTagName: 'tree-select',
+        enum: () => deptTreeSelectApi(),
+        valueKey: 'id',
+        labelKey: 'label',
+        checkStrictly: true,
+        placeholder: '请选择归属部门'
+      }
+    },
+    {
+      label: '手机号码',
+      span: 12,
+      prop: 'phonenumber',
+      rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入手机号码'
+      }
+    },
+    {
+      label: '邮箱',
+      span: 12,
+      prop: 'email',
+      rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
+      compOptions: {
+        placeholder: '请输入邮箱'
+      }
+    },
+    {
+      label: '性别',
+      span: 12,
+      prop: 'sex',
+      compOptions: {
+        enum: () => getDictsApi('sys_user_gender'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue',
+        placeholder: '请输入邮箱'
+      }
+    },
+    {
+      label: '状态',
+      span: 12,
+      prop: 'status',
+      compOptions: {
+        elTagName: 'radio-group',
+        enum: () => getDictsApi('sys_normal_disable'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue'
+      }
+    },
+    {
+      label: '岗位',
+      span: 12,
+      prop: 'postIds',
+      compOptions: {
+        elTagName: 'select',
+        valueKey: 'postId',
+        labelKey: 'postName',
+        multiple: true,
+        enum: postOptions.value,
+        placeholder: '请选择岗位'
+      }
+    },
+    {
+      label: '角色',
+      span: 12,
+      prop: 'roleIds',
+      compOptions: {
+        elTagName: 'select',
+        enum: roleOptions.value,
+        valueKey: 'roleId',
+        labelKey: 'roleName',
+        multiple: true
+      }
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      compOptions: {
+        type: 'textarea',
+        placeholder: '请输入内容'
+      }
+    }
+  ]
+}
 </script>