修改

mock/controller/dict.ts

+import type { MockMethod } from 'vite-plugin-mock'
+
+const dictData: any = {
+  sys_normal_disable: [
+    {
+      createBy: 'admin',
+      createTime: '2024-12-03 02:42:56',
+      updateBy: null,
+      updateTime: null,
+      remark: '正常状态',
+      params: {
+        '@type': 'java.util.HashMap',
+      },
+      dictCode: 6,
+      dictSort: 1,
+      dictLabel: '正常',
+      dictValue: '0',
+      dictType: 'sys_normal_disable',
+      cssClass: null,
+      listClass: 'primary',
+      isDefault: 'Y',
+      status: '0',
+      default: true,
+    },
+    {
+      createBy: 'admin',
+      createTime: '2024-12-03 02:42:56',
+      updateBy: null,
+      updateTime: null,
+      remark: '停用状态',
+      params: {
+        '@type': 'java.util.HashMap',
+      },
+      dictCode: 7,
+      dictSort: 2,
+      dictLabel: '停用',
+      dictValue: '1',
+      dictType: 'sys_normal_disable',
+      cssClass: null,
+      listClass: 'danger',
+      isDefault: 'N',
+      status: '0',
+      default: false,
+    },
+  ],
+  sys_user_sex: [
+    {
+      createBy: 'admin',
+      createTime: '2024-12-03 02:42:55',
+      updateBy: null,
+      updateTime: null,
+      remark: '性别男',
+      params: {
+        '@type': 'java.util.HashMap',
+      },
+      dictCode: 1,
+      dictSort: 1,
+      dictLabel: '男',
+      dictValue: '0',
+      dictType: 'sys_user_sex',
+      cssClass: null,
+      listClass: null,
+      isDefault: 'Y',
+      status: '0',
+      default: true,
+    },
+    {
+      createBy: 'admin',
+      createTime: '2024-12-03 02:42:55',
+      updateBy: null,
+      updateTime: null,
+      remark: '性别女',
+      params: {
+        '@type': 'java.util.HashMap',
+      },
+      dictCode: 2,
+      dictSort: 2,
+      dictLabel: '女',
+      dictValue: '1',
+      dictType: 'sys_user_sex',
+      cssClass: null,
+      listClass: null,
+      isDefault: 'N',
+      status: '0',
+      default: false,
+    },
+    {
+      createBy: 'admin',
+      createTime: '2024-12-03 02:42:55',
+      updateBy: null,
+      updateTime: null,
+      remark: '性别未知',
+      params: {
+        '@type': 'java.util.HashMap',
+      },
+      dictCode: 3,
+      dictSort: 3,
+      dictLabel: '未知',
+      dictValue: '2',
+      dictType: 'sys_user_sex',
+      cssClass: null,
+      listClass: null,
+      isDefault: 'N',
+      status: '0',
+      default: false,
+    },
+  ],
+}
+
+export default [
+  {
+    url: '/system/dict/data/type/:dictType',
+    method: 'get',
+    response({ query }) {
+      return {
+        code: 200,
+        msg: 'success',
+        data: dictData[query.dictType],
+      }
+    },
+  },
+] as MockMethod[]

mock/controller/router.ts

@@ -1218,7 +1218,7 @@ const list: VabRouteRecord[] = [
         name: 'UserManagement',
         component: '/@/views/setting/userManagement/index.vue',
         meta: {
-          title: '用户管理',
+          title: '用户管理1',
           icon: 'user-3-line',
         },
       },

mock/controller/userManagement.ts

@@ -97,7 +97,7 @@ export default [
     method: 'get',
     response({ query }: any) {
       const { username, pageNo = 1, pageSize = 20 } = query
-      const mockList = List.filter((item) => !(username && !item.username.includes(username)))
+      const mockList = List.filter((item) => !(username && !item.userName.includes(username)))
       const list = mockList.filter((item, index) => index < pageSize * pageNo && index >= pageSize * (pageNo - 1))
       return {
         code: 200,
@@ -109,7 +109,7 @@ export default [
     },
   },
   {
-    url: '/userManagement/doEdit',
+    url: '/system/user',
     method: 'post',
     response() {
       return {
@@ -119,6 +119,16 @@ export default [
     },
   },
   {
+    url: '/system/user',
+    method: 'put',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟修改成功',
+      }
+    },
+  },
+  {
     url: '/userManagement/doDelete',
     method: 'post',
     response() {
@@ -215,4 +225,92 @@ export default [
       }
     },
   },
+  {
+    url: '/system/user/:userId',
+    method: 'get',
+    response(res) {
+      console.log(res)
+      return {
+        msg: '操作成功',
+        code: 200,
+        roles: [
+          {
+            createBy: null,
+            createTime: '2024-12-03 02:42:52',
+            updateBy: null,
+            updateTime: null,
+            remark: '普通角色',
+            roleId: 2,
+            roleName: '普通角色',
+            roleKey: 'common',
+            roleSort: 2,
+            dataScope: '2',
+            menuCheckStrictly: true,
+            deptCheckStrictly: true,
+            status: '0',
+            delFlag: '0',
+            flag: false,
+            menuIds: null,
+            deptIds: null,
+            permissions: null,
+            admin: false,
+          },
+        ],
+        posts: [
+          {
+            createBy: 'admin',
+            createTime: '2024-12-03 02:42:52',
+            updateBy: null,
+            updateTime: null,
+            remark: '',
+            postId: 1,
+            postCode: 'ceo',
+            postName: '董事长',
+            postSort: 1,
+            status: '0',
+            flag: false,
+          },
+          {
+            createBy: 'admin',
+            createTime: '2024-12-03 02:42:52',
+            updateBy: null,
+            updateTime: null,
+            remark: '',
+            postId: 2,
+            postCode: 'se',
+            postName: '项目经理',
+            postSort: 2,
+            status: '0',
+            flag: false,
+          },
+          {
+            createBy: 'admin',
+            createTime: '2024-12-03 02:42:52',
+            updateBy: null,
+            updateTime: null,
+            remark: '',
+            postId: 3,
+            postCode: 'hr',
+            postName: '人力资源',
+            postSort: 3,
+            status: '0',
+            flag: false,
+          },
+          {
+            createBy: 'admin',
+            createTime: '2024-12-03 02:42:52',
+            updateBy: null,
+            updateTime: null,
+            remark: '',
+            postId: 4,
+            postCode: 'user',
+            postName: '普通员工',
+            postSort: 4,
+            status: '0',
+            flag: false,
+          },
+        ],
+      }
+    },
+  },
 ] as MockMethod[]

src/api/dict.ts

+import request from '/@/utils/request'
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType: string) {
+  return request({
+    url: `/system/dict/data/type/${dictType}`,
+    method: 'get',
+  })
+}

src/api/userManagement.ts

@@ -9,14 +9,22 @@ export function getList(params?: any) {
   })
 }
 
-export const doEdit = (data: any) => {
+export const doAdd = (data: any) => {
   return request({
-    url: '/userManagement/doEdit',
+    url: '/system/user',
     method: 'post',
     data,
   })
 }
 
+export const doEdit = (data: any) => {
+  return request({
+    url: '/system/user',
+    method: 'put',
+    data,
+  })
+}
+
 export const doDelete = (data: any) => {
   return request({
     url: '/userManagement/doDelete',

src/main.ts

@@ -5,13 +5,15 @@ import { setupRouter } from '/@/router'
 import { setupStore } from '/@/store'
 
 // 全局方法
-import { addDateRange, resetForm } from '/@/utils/index'
+import { addDateRange, resetForm, useDict } from '/@/utils/index'
+import { useDict } from './utils/dict'
 // svg图标
 import elementIcons from '/@/icon/elementIcon'
 
 const app = createApp(App)
 
 // 全局方法挂载
+app.config.globalProperties.useDict = useDict
 app.config.globalProperties.resetForm = resetForm
 app.config.globalProperties.addDateRange = addDateRange
 

src/store/modules/dict.ts

+const useDictStore = defineStore('dict', {
+  state: () => ({
+    dict: [],
+  }),
+  actions: {
+    // 获取字典
+    getDict(_key: any) {
+      if (_key == null && _key == '') {
+        return null
+      }
+      try {
+        for (let i = 0; i < this.dict.length; i++) {
+          if (this.dict[i].key == _key) {
+            return this.dict[i].value
+          }
+        }
+      } catch (e) {
+        return null
+      }
+    },
+    // 设置字典
+    setDict(_key: any, value: any) {
+      if (_key !== null && _key !== '') {
+        this.dict.push({
+          key: _key,
+          value,
+        })
+      }
+    },
+    // 删除字典
+    removeDict(_key: any) {
+      let bln = false
+      try {
+        for (let i = 0; i < this.dict.length; i++) {
+          if (this.dict[i].key == _key) {
+            this.dict.splice(i, 1)
+            return true
+          }
+        }
+      } catch (error) {
+        console.log(error)
+        bln = false
+      }
+      return bln
+    },
+    // 清空字典
+    cleanDict() {
+      this.dict = []
+    },
+    // 初始字典
+    initDict() {},
+  },
+})
+
+export default useDictStore

src/utils/dict.ts

+import { getDicts } from '/@/api/dict'
+import useDictStore from '/@/store/modules/dict'
+
+/**
+ * 获取字典数据
+ */
+export function useDict(...args: string[]) {
+  const res = ref<any>({})
+  return (() => {
+    args.forEach((dictType) => {
+      res.value[dictType] = []
+      const dicts = useDictStore().getDict(dictType)
+      if (dicts) {
+        res.value[dictType] = dicts
+      } else {
+        getDicts(dictType).then((resp) => {
+          res.value[dictType] = resp.data.map((p) => ({
+            label: p.dictLabel,
+            value: p.dictValue,
+            elTagType: p.listClass,
+            elTagClass: p.cssClass,
+          }))
+          useDictStore().setDict(dictType, res.value[dictType])
+        })
+      }
+    })
+    return toRefs(res.value)
+  })()
+}

src/utils/request.ts

@@ -180,6 +180,7 @@ instance.interceptors.response.use(
   (response) => handleData(response),
   (error) => {
     const { response } = error
+    console.log(response)
     if (response === undefined) {
       if (loadingInstance) loadingInstance.close()
       gp.$baseMessage(

src/utils/routes.ts

@@ -16,6 +16,7 @@ export const convertRouter = (asyncRoutes: VabRouteRecord[]) => {
       else {
         const index = route.component.indexOf('views')
         const path = index > 0 ? route.component.slice(index) : `${route.component}`
+        console.log(path)
         route.component = routeAllPathToCompMap[`../${path}`]
       }
     if (route.children && route.children.length > 0) route.children = convertRouter(route.children)

src/views/setting/userManagement/index.vue

@@ -178,6 +178,7 @@ defineOptions({
 })
 
 const { proxy } = getCurrentInstance() as any
+const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
 
 const { exit, enter, isFullscreen: _isFullscreen } = useFullscreen()
 

src/views/setting/userManagement/vabAutoComponents/UserManagementEdit.vue

@@ -55,7 +55,7 @@
         <el-col :span="12">
           <el-form-item label="状态">
             <el-radio-group v-model="form.status">
-              <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+              <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
@@ -105,12 +105,15 @@
 
 <script lang="ts" setup>
 import type { FormInstance } from 'element-plus'
-import { doEdit, getUser } from '/@/api/userManagement'
+import { doAdd, doEdit, getUser } from '/@/api/userManagement'
 
 defineOptions({
   name: 'UserManagementEdit',
 })
 
+const { proxy } = getCurrentInstance() as any
+const { sys_normal_disable, sys_user_sex } = proxy.useDict('sys_normal_disable', 'sys_user_sex')
+
 const emit = defineEmits(['fetch-data'])
 
 defineProps({
@@ -121,9 +124,10 @@ defineProps({
 })
 
 const postOptions = ref<any>([])
+const roleOptions = ref<any>([])
 
 const formRef = ref<FormInstance>()
-const form = reactive<any>({
+const form = ref<any>({
   userId: undefined,
   deptId: undefined,
   userName: undefined,
@@ -138,20 +142,34 @@ const form = reactive<any>({
   roleIds: [],
 })
 const rules = reactive<any>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
-  email: [{ required: true, trigger: 'blur', message: '请输入邮箱' }],
-  roles: [{ required: true, trigger: 'blur', message: '请选择角色' }],
+  userName: [
+    { required: true, message: '用户名称不能为空', trigger: 'blur' },
+    { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' },
+  ],
+  nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
+  password: [
+    { required: true, message: '用户密码不能为空', trigger: 'blur' },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' },
+  ],
+  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
+  phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
 })
 const title = ref<string>('')
 const dialogFormVisible = ref<boolean>(false)
 
-const showEdit = (row: any) => {
+const showEdit = async (row: any) => {
+  reset()
+  const { posts, roles, data, postIds, roleIds } = (await getUser(row?.userId)) as any
+  postOptions.value = posts
+  roleOptions.value = roles
   dialogFormVisible.value = true
   nextTick(() => {
     if (row) {
       title.value = '编辑'
-      Object.assign(form, row)
+      form.value = data
+      form.value.postIds = postIds
+      form.value.roleIds = roleIds
     } else {
       title.value = '添加'
     }
@@ -162,10 +180,26 @@ defineExpose({
   showEdit,
 })
 
-onMounted(async () => {
-  const { posts } = (await getUser(form.userId)) as any
-  postOptions.value = posts
-})
+onMounted(async () => {})
+
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: '0',
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  }
+  proxy.resetForm('userRef')
+}
 
 const close = () => {
   formRef.value?.clearValidate()
@@ -173,12 +207,22 @@ const close = () => {
   emit('fetch-data')
 }
 
+const cancel = () => {
+  close()
+  dialogFormVisible.value = false
+}
+
 const save = () => {
   formRef.value?.validate(async (valid: any) => {
     if (valid) {
-      const { msg }: any = await doEdit(form)
-      await $baseMessage(msg, 'success', 'hey')
-      await close()
+      if (form.value.userId) {
+        await doEdit(form.value)
+        await $baseMessage('修改成功', 'success', 'hey')
+      } else {
+        await doAdd(form.value)
+        await $baseMessage('添加成功', 'success', 'hey')
+      }
+      // await close()
       dialogFormVisible.value = false
     }
   })