配置修改

.env.development

@@ -5,5 +5,5 @@
 NODE_ENV=development
 
 # api接口地址
-VITE_APP_BASE_URL='http://139.196.169.103:9003'
-# VITE_APP_BASE_URL=''
+# VITE_APP_BASE_URL='http://139.196.169.103:9003'
+VITE_APP_BASE_URL=''

.env.local

+VITE_APP_SECRET_KEY=VkQo3+ADe3lTpoSUyyEbaVyME6mOq8Q+6JIEteEleaea7kmQTgnk68JuPAtWTgAsGoCU2uQMo4rmREvsTw/DN1E+OLY2UWUXz2WgJ3MapTEgDGrjEfKHn9Hr+C8zHbZxXrWnHWGuf73MUtkvxsdKhrouAeHTCI6cSTmiH5mt1zIxP63hb5ojP9cudqjGSiG/q4oZFcYoUuPilQz9OIv0xIpgLPaJvRAF7Vw45wRfHp3hIRbIksLlwxZlgecVpq69pYb3nyQ0dscV6DsTXz5walkN29Cf2wG/8WzKcMBI4fO6bFHwbqsP33+l+xefkkTC0a+124Pi8xcAZiiF/VQOrQ==

.gitignore

@@ -5,8 +5,8 @@ node_modules
 /dev-dist
 
 # local env files
-.env.local
-.env.*.local
+# .env.local
+# .env.*.local
 
 # Log files
 logs

library/components/VabNotice/index.vue

@@ -74,7 +74,7 @@ const handleClearNotice = () => {
 }
 
 onBeforeMount(() => {
-  if (theme.value.showNotice) fetchData()
+  // if (theme.value.showNotice) fetchData()
 })
 </script>
 

library/components/VabQueryForm/index.vue

@@ -38,13 +38,15 @@ defineOptions({
 
     .el-form-item:first-child {
       margin: 0 0 calc(var(--el-margin) / 2) 0 !important;
+      margin-right: 12px !important;
     }
 
     .el-form-item + .el-form-item {
       margin: 0 0 calc(var(--el-margin) / 2) 0 !important;
+      margin-right: 12px !important;
 
       .el-button {
-        margin: 0 0 0 10px !important;
+        // margin: 0 0 0 10px !important;
       }
     }
 

library/styles/custom.scss

+.table-operation-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

library/styles/vab.scss

@@ -10,6 +10,7 @@
 @use './technology' as *;
 @use 'vsv-icon/dist/style.css' as *;
 @use './var' as *;
+@use './custom.scss' as *;
 
 @mixin base-scrollbar {
   &::-webkit-scrollbar {
@@ -187,7 +188,7 @@ html {
         &.el-form--inline.el-form--label-right {
           .el-form-item:not(:first-child) {
             .el-form-item__label {
-              margin-left: 10px;
+              // margin-left: 10px;
             }
           }
         }
@@ -609,7 +610,7 @@ html {
           margin-right: 30px;
 
           .el-form-item:last-child {
-            margin-bottom: 0;
+            // margin-bottom: 0;
           }
 
           .el-date-editor,

mock/controller/departmentManagement.ts

@@ -99,4 +99,62 @@ export default [
       }
     },
   },
+  {
+    url: '/system/dept/treeselect',
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        msg: 'success',
+        data: [
+          {
+            id: 100,
+            label: '若依科技',
+            children: [
+              {
+                id: 101,
+                label: '深圳总公司',
+                children: [
+                  {
+                    id: 103,
+                    label: '研发部门',
+                  },
+                  {
+                    id: 104,
+                    label: '市场部门',
+                  },
+                  {
+                    id: 105,
+                    label: '测试部门',
+                  },
+                  {
+                    id: 106,
+                    label: '财务部门',
+                  },
+                  {
+                    id: 107,
+                    label: '运维部门',
+                  },
+                ],
+              },
+              {
+                id: 102,
+                label: '长沙分公司',
+                children: [
+                  {
+                    id: 108,
+                    label: '市场部门',
+                  },
+                  {
+                    id: 109,
+                    label: '财务部门',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }
+    },
+  },
 ] as MockMethod[]

mock/controller/user.ts

@@ -7,12 +7,12 @@ const tokens: { [key: string]: string } = {
   test: `test-token-${Random.guid()}-${Date.now()}`,
 }
 const username2role: { [key: string]: string[] } = {
-  admin: ['Admin'],
+  admin: ['admin'],
   editor: ['Editor'],
-  test: ['Admin', 'Editor'],
+  test: ['admin', 'Editor'],
 }
 const role2permission: { [key: string]: string[] } = {
-  Admin: ['read:system', 'write:system', 'delete:system'],
+  admin: ['read:system', 'write:system', 'delete:system'],
   Editor: ['read:system', 'write:system'],
   Test: ['read:system'],
 }
@@ -35,7 +35,7 @@ export default [
     },
   },
   {
-    url: '/login',
+    url: '/loginNew',
     method: 'post',
     response({ body }: any) {
       const { username } = body
@@ -75,7 +75,7 @@ export default [
     },
   },
   {
-    url: '/userInfo',
+    url: '/getInfoNew',
     method: 'get',
     response(request: any) {
       const authorization = request.headers.authorization || request.headers.Authorization
@@ -103,7 +103,7 @@ export default [
   },
   {
     url: '/logout',
-    method: 'get',
+    method: 'post',
     response() {
       return {
         code: 200,

mock/controller/userManagement.ts

@@ -2,28 +2,92 @@ import type { MockMethod } from 'vite-plugin-mock'
 
 const List = [
   {
-    id: '@id',
-    username: 'admin',
-    password: 'admin',
-    email: '@email',
-    roles: ['admin'],
-    datetime: '@datetime',
-  },
-  {
-    id: '@id',
-    username: 'editor',
-    password: 'editor',
-    email: '@email',
-    roles: ['editor'],
-    datetime: '@datetime',
+    createBy: 'admin',
+    createTime: '2024-12-03 02:42:51',
+    updateBy: null,
+    updateTime: null,
+    remark: '管理员',
+    userId: 1,
+    deptId: 103,
+    userName: 'admin',
+    nickName: '若依',
+    email: 'ry@163.com',
+    phonenumber: '15888888888',
+    sex: '1',
+    avatar: '',
+    password: null,
+    status: '0',
+    delFlag: '0',
+    loginIp: '127.0.0.1',
+    loginDate: '2024-12-12T06:59:14.000+00:00',
+    dept: {
+      createBy: null,
+      createTime: null,
+      updateBy: null,
+      updateTime: null,
+      remark: null,
+      deptId: 103,
+      parentId: null,
+      ancestors: null,
+      deptName: '研发部门',
+      orderNum: null,
+      leader: '若依',
+      phone: null,
+      email: null,
+      status: null,
+      delFlag: null,
+      parentName: null,
+      children: [],
+    },
+    roles: [],
+    roleIds: null,
+    postIds: null,
+    roleId: null,
+    admin: true,
   },
   {
-    id: '@id',
-    username: 'test',
-    password: 'test',
-    email: '@email',
-    roles: ['admin', 'editor'],
-    datetime: '@datetime',
+    createBy: 'admin',
+    createTime: '2024-12-03 02:42:51',
+    updateBy: null,
+    updateTime: null,
+    remark: '测试员',
+    userId: 2,
+    deptId: 105,
+    userName: 'ry',
+    nickName: '若依',
+    email: 'ry@qq.com',
+    phonenumber: '15666666666',
+    sex: '1',
+    avatar: '',
+    password: null,
+    status: '0',
+    delFlag: '0',
+    loginIp: '127.0.0.1',
+    loginDate: '2024-12-03T02:42:51.000+00:00',
+    dept: {
+      createBy: null,
+      createTime: null,
+      updateBy: null,
+      updateTime: null,
+      remark: null,
+      deptId: 105,
+      parentId: null,
+      ancestors: null,
+      deptName: '测试部门',
+      orderNum: null,
+      leader: '若依',
+      phone: null,
+      email: null,
+      status: null,
+      delFlag: null,
+      parentName: null,
+      children: [],
+    },
+    roles: [],
+    roleIds: null,
+    postIds: null,
+    roleId: null,
+    admin: false,
   },
 ]
 
@@ -38,7 +102,9 @@ export default [
       return {
         code: 200,
         msg: 'success',
-        data: { list, total: mockList.length },
+        // data: { list, total: mockList.length },
+        rows: list,
+        total: mockList.length,
       }
     },
   },
@@ -62,4 +128,91 @@ export default [
       }
     },
   },
+  {
+    url: '/system/user/',
+    method: 'get',
+    response() {
+      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/departmentManagement.ts

@@ -23,3 +23,11 @@ export const doDelete = (data: any) => {
     data,
   })
 }
+
+// 查询部门下拉树结构
+export function deptTreeSelect() {
+  return request({
+    url: '/system/dept/treeselect',
+    method: 'get',
+  })
+}

src/api/router.ts

@@ -2,7 +2,7 @@ import request from '/@/utils/request'
 
 export const getList = (params?: any) => {
   return request({
-    url: '/router/getList',
+    url: '/getRoutersNew',
     method: 'get',
     params,
   })

src/api/user.ts

@@ -14,7 +14,7 @@ interface FormType {
 export const login = async (data: any) => {
   if (loginRSA) data = { ...data, password: await encryptedData(data) }
   return request({
-    url: '/login',
+    url: '/loginNew',
     method: 'post',
     data,
   })
@@ -22,7 +22,7 @@ export const login = async (data: any) => {
 
 export const getUserInfo = () => {
   return request({
-    url: '/userInfo',
+    url: '/getInfoNew',
     method: 'get',
   })
 }
@@ -30,7 +30,7 @@ export const getUserInfo = () => {
 export const logout = () => {
   return request({
     url: '/logout',
-    method: 'get',
+    method: 'post',
   })
 }
 

src/api/userManagement.ts

+import { parseStrEmpty } from '/@/utils/index'
 import request from '/@/utils/request'
 
 export function getList(params?: any) {
@@ -23,3 +24,11 @@ export const doDelete = (data: any) => {
     data,
   })
 }
+
+// 查询用户详细
+export function getUser(userId: any) {
+  return request({
+    url: `/system/user/${parseStrEmpty(userId)}`,
+    method: 'get',
+  })
+}

src/config/cli.config.ts

@@ -42,7 +42,7 @@ export const cliConfig: { [key: string]: string | number | boolean | Array<strin
   // 开启打包分析
   report: false,
   // 禁止在生产环境下使用调试
-  disableDebugger: true,
+  disableDebugger: false,
   // 是否关闭路由[Vue Router warn]: No match found for location with path "/*"报黄，
   // 注意事项一旦关闭，路由出错后将无法在控制台检查到原因
   disableRouterWarning: false,

src/config/setting.config.ts

@@ -46,11 +46,11 @@ export const settingConfig: {
   // 是否开启登录RSA加密
   loginRSA: false,
   // intelligence(前端导出路由)和all(后端导出路由)两种方式
-  authentication: 'intelligence',
+  authentication: 'all',
   // 是否支持游客模式，支持情况下，访问白名单，可查看所有asyncRoutes
   supportVisit: false,
   // 是否开启roles字段进行角色权限控制(如果是all模式后端完全处理角色并进行json组装，可设置false不处理路由中的roles字段)
-  rolesControl: true,
+  rolesControl: false,
   // vertical column comprehensive common布局时是否只保持一个子菜单的展开
   uniqueOpened: false,
   // vertical column comprehensive common布局时默认展开的菜单path，使用逗号隔开建议只展开一个

src/config/theme.config.ts

@@ -37,7 +37,7 @@ export const themeConfig: ThemeType = {
   //是否开启主题组件
   showTheme: true,
   //是否开启通知组件
-  showNotice: true,
+  showNotice: false,
   //是否开启全屏组件
   showFullScreen: true,
   //是否开启右侧悬浮窗

src/icon/elementIcon/index.js

+import * as components from '@element-plus/icons-vue'
+
+export default {
+    install: (app) => {
+        for (const key in components) {
+            const componentConfig = components[key];
+            app.component(componentConfig.name, componentConfig);
+        }
+    },
+};

src/main.ts

@@ -4,11 +4,21 @@ import { setupI18n } from '/@/i18n'
 import { setupRouter } from '/@/router'
 import { setupStore } from '/@/store'
 
+// 全局方法
+import { addDateRange, resetForm } from '/@/utils/index'
+// svg图标
+import elementIcons from '/@/icon/elementIcon'
+
 const app = createApp(App)
 
+// 全局方法挂载
+app.config.globalProperties.resetForm = resetForm
+app.config.globalProperties.addDateRange = addDateRange
+
 setupVab(app)
 setupI18n(app)
 setupStore(app)
 setupRouter(app)
+app.use(elementIcons)
 
 app.mount('#app')

src/router/index.ts

@@ -90,7 +90,7 @@ export const asyncRoutes: VabRouteRecord[] = [
     meta: {
       title: '配置',
       icon: 'user-settings-line',
-      guard: ['Admin'],
+      guard: ['admin'],
     },
     children: [
       {
@@ -206,7 +206,7 @@ export const asyncRoutes: VabRouteRecord[] = [
   //   meta: {
   //     title: '单栏',
   //     icon: 'delete-column',
-  //     guard: ['Admin'],
+  //     guard: ['admin'],
   //     levelHidden: true,
   //     breadcrumbHidden: true,
   //   },

src/store/modules/user.ts

@@ -7,7 +7,7 @@ import { useTabsStore } from './tabs'
 import { getUserInfo, login, logout } from '/@/api/user'
 import { tokenName } from '/@/config'
 import { getToken, removeToken, setToken } from '/@/utils/token'
-import { isArray, isString } from '/@/utils/validate'
+import { isArray } from '/@/utils/validate'
 import { gp } from '/@vab/plugins/vab'
 
 export const useUserStore = defineStore('user', {
@@ -30,6 +30,10 @@ export const useUserStore = defineStore('user', {
       this.token = token
       setToken(token)
     },
+    setUser(user: any) {
+      this.username = user.userName
+      this.avatar = user.avatar || './static/svg/avatar.svg'
+    },
     /**
      * @description 设置用户名
      * @param {*} username
@@ -87,30 +91,25 @@ export const useUserStore = defineStore('user', {
      */
     async getUserInfo() {
       const {
-        data: { username, avatar, roles, permissions },
+        data: { user, roles, permissions },
       } = await getUserInfo()
       /**
        * 检验返回数据是否正常，无对应参数，将使用默认用户名,头像,Roles和Permissions
-       * username {String}
-       * avatar {String}
+       * user {Object}
        * roles {List}
        * ability {List}
        */
-      if (
-        (username && !isString(username)) ||
-        (avatar && !isString(avatar)) ||
-        (roles && !isArray(roles)) ||
-        (permissions && !isArray(permissions))
-      ) {
+      if ((user && Object.keys(user).length === 0) || (roles && !isArray(roles)) || (permissions && !isArray(permissions))) {
         const err = 'getUserInfo核心接口异常，请检查返回JSON格式是否正确'
         gp.$baseMessage(err, 'error', 'hey')
         throw err
       } else {
         const aclStore = useAclStore()
         // 如不使用username用户名,可删除以下代码
-        if (username) this.setUsername(username)
+        // if (username) this.setUsername(username)
         // 如不使用avatar头像,可删除以下代码
-        if (avatar) this.setAvatar(avatar)
+        // if (avatar) this.setAvatar(avatar)
+        if (user) this.setUser(user)
         // 如不使用roles权限控制,可删除以下代码
         if (roles) aclStore.setRole(roles)
         // 如不使用permissions权限控制,可删除以下代码

src/utils/index.ts

@@ -210,3 +210,37 @@ export function moveElement(array: any, oldIndex: any, newIndex: any) {
   array.splice(newIndex, 0, element)
   return array
 }
+
+// 添加日期范围
+export function addDateRange(params: any, dateRange: any, propName: string) {
+  let search = params
+  search.params = typeof search.params === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}
+  dateRange = Array.isArray(dateRange) ? dateRange : []
+  if (dateRange.length === 0) {
+    return search
+  }
+  if (propName === undefined) {
+    search.params['beginTime'] = dateRange[0]
+    search.params['endTime'] = dateRange[1]
+  } else {
+    search.params[`begin${propName}`] = dateRange[0]
+    search.params[`end${propName}`] = dateRange[1]
+  }
+
+  return search
+}
+
+// 表单重置
+export function resetForm(refName: string) {
+  if (this.$refs[refName]) {
+    this.$refs[refName].resetFields()
+  }
+}
+
+// 转换字符串，undefined,null等转化为""
+export function parseStrEmpty(str: any) {
+  if (!str || str == 'undefined' || str == 'null') {
+    return ''
+  }
+  return str
+}

src/views/login/Login.vue

@@ -49,7 +49,7 @@
           </el-button>
         </router-link>
 
-        <div v-throttle="handleLogin" class="login-other hidden-xs-only">
+        <!-- <div v-throttle="handleLogin" class="login-other hidden-xs-only">
           <vab-icon icon="wechat-fill" style="color: #08c25f" />
           <vab-icon icon="alipay-fill" style="color: #226bf3" />
           <vab-icon icon="dingding-fill" style="color: #007ef8" />
@@ -57,7 +57,7 @@
           <vab-icon icon="tiktok-fill" style="color: #000000" />
           <vab-icon icon="weibo-fill" style="color: #df1e33" />
           <vab-icon icon="github-fill" style="color: #151515" />
-        </div>
+        </div> -->
       </el-form>
     </div>
   </login-container>

src/views/operate/permission/index.vue

@@ -41,12 +41,12 @@
       </el-form-item>
       <el-form-item label="RBAC 角色控制">
         <el-space wrap>
-          <el-button v-permissions="['Admin']" type="primary">拥有["Admin"]的按钮</el-button>
-          <el-button v-permissions="{ role: ['Admin'], mode: 'except' }" type="danger">未拥有["Admin"]的按钮</el-button>
+          <el-button v-permissions="['admin']" type="primary">拥有["admin"]的按钮</el-button>
+          <el-button v-permissions="{ role: ['admin'], mode: 'except' }" type="danger">未拥有["admin"]的按钮</el-button>
           <el-button v-permissions="['Editor']" type="primary">拥有["Editor"]的按钮</el-button>
           <el-button v-permissions="{ role: ['Editor'], mode: 'except' }" type="danger">未拥有["Editor"]的按钮</el-button>
-          <el-button v-permissions="{ role: ['Admin', 'Editor'], mode: 'allOf' }" type="primary">
-            同时拥有["Admin","Editor"]的按钮
+          <el-button v-permissions="{ role: ['admin', 'Editor'], mode: 'allOf' }" type="primary">
+            同时拥有["admin","Editor"]的按钮
           </el-button>
           <el-button v-permissions="['Test']" type="primary">拥有["Test"]的按钮</el-button>
         </el-space>
@@ -66,8 +66,8 @@
       </el-form-item>
       <el-form-item label="RBAC 角色&权限点控制">
         <el-space wrap>
-          <el-button v-permissions="{ role: ['Admin'], permission: ['delete:system'] }" type="primary">
-            拥有["Admin"]或["delete:system"]的按钮
+          <el-button v-permissions="{ role: ['admin'], permission: ['delete:system'] }" type="primary">
+            拥有["admin"]或["delete:system"]的按钮
           </el-button>
           <el-button
             v-permissions="{
@@ -81,24 +81,24 @@
           </el-button>
           <el-button
             v-permissions="{
-              role: ['Admin'],
+              role: ['admin'],
               permission: ['delete:system'],
               mode: 'except',
             }"
             type="danger"
           >
-            未拥有["Admin"]和["delete:system"]的按钮
+            未拥有["admin"]和["delete:system"]的按钮
           </el-button>
         </el-space>
       </el-form-item>
 
       <el-form-item label="RBAC 自定义按钮&表格列权限控制">
         <!-- hasPermission()是更加底层的方法，它可以使用 v-permissions 自定义指令中的所有格式的参数，非必要不建议使用，表格列隐藏展示可能用到下述代码 -->
-        <el-button v-if="hasPermission(['Admin'])" type="primary">拥有["Admin"]的按钮</el-button>
-        <el-button v-if="hasPermission({ role: ['Admin'], mode: 'except' })" type="danger">未拥有["Admin"]的按钮</el-button>
+        <el-button v-if="hasPermission(['admin'])" type="primary">拥有["admin"]的按钮</el-button>
+        <el-button v-if="hasPermission({ role: ['admin'], mode: 'except' })" type="danger">未拥有["admin"]的按钮</el-button>
         <el-table border :data="tableData" style="display: block; margin-top: var(--el-margin)">
-          <el-table-column v-if="hasPermission(['Admin'])" label="拥有['Admin']的表格列" prop="yes" />
-          <el-table-column v-if="hasPermission({ role: ['Admin'], mode: 'except' })" label="未拥有['Admin']的表格列" prop="no" />
+          <el-table-column v-if="hasPermission(['admin'])" label="拥有['admin']的表格列" prop="yes" />
+          <el-table-column v-if="hasPermission({ role: ['admin'], mode: 'except' })" label="未拥有['admin']的表格列" prop="no" />
         </el-table>
       </el-form-item>
       <el-form-item label="后端code指令强制开启锁屏">

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

 <template>
-  <vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="500px" @close="close">
+  <vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="600px" @close="close">
     <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
-      <el-form-item label="用户名" prop="username">
-        <el-input v-model.trim="form.username" clearable />
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input v-model.trim="form.password" clearable type="password" />
-      </el-form-item>
-      <el-form-item label="邮箱" prop="email">
-        <el-input v-model.trim="form.email" clearable />
-      </el-form-item>
-      <el-form-item label="角色" prop="roles">
-        <el-checkbox-group v-model="form.roles">
-          <el-checkbox label="admin" />
-          <el-checkbox label="editor" />
-        </el-checkbox-group>
-      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="用户昵称" prop="nickName">
+            <el-input v-model="form.nickName" maxlength="30" placeholder="请输入用户昵称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="归属部门" prop="deptId">
+            <el-tree-select
+              v-model="form.deptId"
+              check-strictly
+              :data="deptOptions"
+              placeholder="请选择归属部门"
+              :props="{ value: 'id', label: 'label', children: 'children' }"
+              value-key="id"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="手机号码" prop="phonenumber">
+            <el-input v-model="form.phonenumber" maxlength="11" placeholder="请输入手机号码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="form.email" maxlength="50" placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+            <el-input v-model="form.userName" maxlength="30" placeholder="请输入用户名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+            <el-input v-model="form.password" maxlength="20" placeholder="请输入用户密码" show-password type="password" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="用户性别">
+            <el-select v-model="form.sex" placeholder="请选择">
+              <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <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-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="岗位">
+            <el-select v-model="form.postIds" multiple placeholder="请选择">
+              <el-option
+                v-for="item in postOptions"
+                :key="item.postId"
+                :disabled="item.status == 1"
+                :label="item.postName"
+                :value="item.postId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="角色">
+            <el-select v-model="form.roleIds" multiple placeholder="请选择">
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.roleId"
+                :disabled="item.status == 1"
+                :label="item.roleName"
+                :value="item.roleId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
-      <el-button type="primary" @click="save">保存</el-button>
+      <el-button type="primary" @click="save">确定</el-button>
+      <el-button @click="cancel">取 消</el-button>
     </template>
   </vab-dialog>
 </template>
 
 <script lang="ts" setup>
 import type { FormInstance } from 'element-plus'
-import { doEdit } from '/@/api/userManagement'
+import { doEdit, getUser } from '/@/api/userManagement'
 
 defineOptions({
   name: 'UserManagementEdit',
@@ -33,12 +113,29 @@ defineOptions({
 
 const emit = defineEmits(['fetch-data'])
 
+defineProps({
+  deptOptions: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const postOptions = ref<any>([])
+
 const formRef = ref<FormInstance>()
 const form = reactive<any>({
-  username: '',
-  password: '',
-  email: '',
-  roles: [],
+  userId: undefined,
+  deptId: undefined,
+  userName: undefined,
+  nickName: undefined,
+  password: undefined,
+  phonenumber: undefined,
+  email: undefined,
+  sex: undefined,
+  status: '0',
+  remark: undefined,
+  postIds: [],
+  roleIds: [],
 })
 const rules = reactive<any>({
   username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
@@ -65,6 +162,11 @@ defineExpose({
   showEdit,
 })
 
+onMounted(async () => {
+  const { posts } = (await getUser(form.userId)) as any
+  postOptions.value = posts
+})
+
 const close = () => {
   formRef.value?.clearValidate()
   formRef.value?.resetFields()

tsconfig.json

@@ -13,6 +13,7 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "noImplicitThis": false,
     "noEmit": true,
     "jsx": "preserve",
     "sourceMap": true,