feat:账号管理权限管理开发

src/api/base/user.js

@@ -18,9 +18,9 @@ export function getVerifyCode() {
 /** 登录接口 */
 export function login(data) {
   return request({
-    url: `${routes.auth}/api/user/admin/login`,
+    url: `/user/login`,
     method: 'post',
-    params: data
+    data
   })
 }
 
@@ -43,10 +43,11 @@ export function changeSelfInfo(data) {
 }
 
 /** 登录后获取登录用户信息 */
-export function getUserInfo() {
+export function getUserInfo(data) {
   return request({
-    url: `${routes.auth}/api/user/admin/info`,
-    method: 'post'
+    url: `/user/getCurrentUser`,
+    method: 'get',
+    params: data
   })
 }
 /** 获取权限菜单 */

src/api/system/user.js

@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+import routes from '../gateway-routes'
+
+/** 查看用户信息列表 */
+export function getUserList(params) {
+  return request({
+    url: `/user/list`,
+    method: 'get',
+    params
+  })
+}
+
+/** 创建账号*/
+export function saveUserInfo(data) {
+  return request({
+    url: `/user/saveUserInfo`,
+    method: 'post',
+    data
+  })
+}
+/** 修改账号*/
+export function updateUserInfo(data) {
+  return request({
+    url: `/user/update`,
+    method: 'post',
+    data
+  })
+}
+/** 删除账号*/
+export function deleteUserInfo(data) {
+  return request({
+    url: `/user/delete`,
+    method: 'delete',
+    params: data
+  })
+}
+/** 修改用户状态*/
+export function updateUserStatus(data) {
+  return request({
+    url: `/user/updateUserStatus`,
+    method: 'post',
+    data
+  })
+}
+/** 查看角色列表 */
+export function getRoleList(params) {
+  return request({
+    url: `/role/list`,
+    method: 'get',
+    params
+  })
+}
+
+/** 创建角色*/
+export function saveRole(data) {
+  return request({
+    url: `/role/save`,
+    method: 'post',
+    data
+  })
+}
+/** 修改角色*/
+export function updateRole(data) {
+  return request({
+    url: `/role/update`,
+    method: 'post',
+    data
+  })
+}
+/** 删除角色*/
+export function deleteRole(data) {
+  return request({
+    url: `/role/delete`,
+    method: 'delete',
+    params: data
+  })
+}
+/** 查看菜单列表 */
+export function getMenuList(params) {
+  return request({
+    url: `/menu/listMenu`,
+    method: 'get',
+    params
+  })
+}

src/config/net.config.js

@@ -5,7 +5,7 @@ const network = {
   // 默认的接口地址 如果是开发环境和生产环境走vab-mock-server，当然你也可以选择自己配置成需要的接口地址
   baseURL:
     process.env.NODE_ENV === 'development'
-      ? 'http://192.168.10.27:8097/fu-hsi-server'
+      ? 'http://192.168.10.25:8097/fu-hsi-server'
       : '/fuHsiApi',
   // 配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
   contentType: 'application/json;charset=UTF-8',

src/config/permission.js

@@ -48,6 +48,7 @@ router.beforeResolve(async(to, from, next) => {
           let accessRoutes = []
           if (authentication === 'intelligence') {
             accessRoutes = await store.dispatch('routes/setRoutes', permissions)
+           
           } else if (authentication === 'all') {
             accessRoutes = await store.dispatch('routes/setAllRoutes')
           }

src/config/setting.config.js

@@ -46,7 +46,7 @@ const setting = {
   // 加载时显示文字
   loadingText: '正在加载中...',
   // token名称
-  tokenName: 'Auth-Token',
+  tokenName: 'token',
   // token在localStorage、sessionStorage存储的key的名称
   tokenTableName: 'MyToken',
   // token存储位置localStorage sessionStorage
@@ -58,7 +58,7 @@ const setting = {
   // 是否显示在页面高亮错误
   errorLog: ['development', 'production'],
   // 是否开启登录拦截
-  loginInterception: false,
+  loginInterception: true,
   // 是否开启登录RSA加密
   loginRSA: false,
   // intelligence和all两种方式，前者后端权限只控制permissions不控制view文件的import（前后端配合，减轻后端工作量），all方式完全交给后端前端只负责加载

src/data/appInit.js

@@ -12,7 +12,7 @@ import { queryDictionary } from '@/api/system'
 export default {
   init(options) {
     router.beforeEach(async(to, from, next) => {
-      if (options.enable && (from.path === '/login' || sessionStorage.getItem('gender') === null)) {
+      if (options.enable && (from.path === '/login')) {
         // 保存字典
         queryDictionary({ list: [] }).then(res => {
           for (const dataKey in res.data) {

src/layouts/components/Avatar/index.vue

@@ -8,11 +8,11 @@
       <span class="avatar-dropdown">
         <img
           class="user-avatar"
-          :src="avatar || manIcon"
+          :src="imgUrl || manIcon"
           alt=""
         >
         <div class="user-name">
-          {{ name }}
+          {{ username }}
           <i class="el-icon-arrow-down el-icon--right" />
         </div>
       </span>
@@ -82,7 +82,9 @@
 import { mapGetters } from 'vuex'
 import { changePassword } from '@/api/base/user'
 import Man from '@/assets/avatar/man.png'
-
+import { baseURL } from '@/config'
+import { commonDownloadFile } from '@/api/config/uploadApi'
+import { queryDictionary } from '@/api/system'
 export default {
   name: 'CsAvatar',
   filters: {
@@ -141,11 +143,26 @@ export default {
   computed: {
     ...mapGetters({
       avatar: 'user/avatar',
-      name: 'user/name'
-    })
+      username: 'user/username'
+    }),
+    imgUrl() {
+      if (this.avatar) {
+        return `${baseURL}${commonDownloadFile}${this.avatar}`
+      } else {
+        return ''
+      }
+    }
   },
   mounted() {
-    // console.log(this.avatar, 666)
+    queryDictionary({ list: [] }).then(res => {
+      for (const dataKey in res.data) {
+        const dic = res.data[dataKey]
+            dic?.forEach(item => {
+              sessionStorage.setItem(dataKey, JSON.stringify(item.child))
+            })
+      }
+      // console.log('res-data', res.data,)
+    })
   },
   methods: {
     handleCommand(command) {

src/router/index.js

@@ -144,7 +144,7 @@ export const asyncRoutes = [
   {
     path: '/prompt',
     name: 'Prompt',
-    permission: 'p_prompt',
+    permission: 'p_promptProject',
     component: Layout,
     meta: { title: '提示工程' },
     children: [

src/store/modules/routes.js

@@ -33,6 +33,7 @@ const actions = {
       [...asyncRoutes],
       permissions
     )
+    console.log(finallyAsyncRoutes, permissions, '2222222222222')
     commit('setRoutes', finallyAsyncRoutes)
     return finallyAsyncRoutes
   },

src/store/modules/user.js

@@ -7,7 +7,6 @@ import {
 } from '@/utils/accessToken'
 // import { resetRouter } from '@/router'
 import { title, tokenName } from '@/config'
-import md5 from 'js-md5'
 import { resetRouter } from '@/router'
 const state = () => ({
   accessToken: getAccessToken(),
@@ -71,12 +70,13 @@ const actions = {
   },
 
   async login({ commit }, userInfo) {
-    const { account, password } = userInfo
+    const { userAccount, password } = userInfo
     const { data } = await login({
-      account,
-      password: md5(password)
+      userAccount,
+      password: password
     })
-    const accessToken = data
+    const { userName } = data
+    const accessToken = data.token
     if (accessToken) {
       commit('setAccessToken', accessToken)
       const hour = new Date().getHours()
@@ -90,7 +90,7 @@ const actions = {
               : hour < 18
                 ? '下午好'
                 : '晚上好'
-      Vue.prototype.$baseNotify(`欢迎登录${title}`, `${thisTime}！`)
+      Vue.prototype.$baseNotify(`欢迎登录${userName}`, `${thisTime}！`)
     } else {
       Vue.prototype.$baseMessage(
         `登录接口异常，未正确返回${tokenName}...`,
@@ -106,23 +106,14 @@ const actions = {
       return false
     }
     console.log(data, 'userData')
-    const { autoid, cardId, roleId, userName, unitId, gender, name, phone, endTime } = data
+
+    const { permission, userName, headPicId } = data
 
     if (userName) {
-      commit('setUserId', autoid)
-      commit('setCardId', cardId)
-      commit('setUnitId', unitId)
       commit('setUsername', userName)
-      commit('setName', name)
-      commit('setPhone', phone)
-      commit('setEndTime', endTime)
-      commit('setPermissions', [Number(roleId)])
-      if (gender && gender === '2') {
-        commit('setAvatar', require('@/assets/avatar/woman.png'))
-      } else {
-        commit('setAvatar', require('@/assets/avatar/man.png'))
-      }
-      return [Number(roleId)]
+      commit('setAvatar', headPicId)
+      commit('setPermissions', permission.length > 0 ? permission : ['p_home'])
+      return permission
     } else {
       Vue.prototype.$baseMessage('用户信息接口异常', 'error')
       return false

src/utils/handleRoutes.js

@@ -60,8 +60,8 @@ export function convertPermission(asyncRoutes, that) {
  * @returns {boolean|*}
  */
 function hasPermission(permissions, route) {
-  if (route.meta && route.meta.permissions) {
-    return permissions.some((role) => route.permissions.includes(role))
+  if (route && route.permission) {
+    return permissions.some((role) => route.permission.includes(role))
   } else {
     return true
   }

src/utils/request.js

@@ -18,7 +18,6 @@ import router from '@/router'
 import { isArray } from '@/utils/validate'
 // import { Encrypt, Decrypt } from '@/utils/decrypt'
 // import whiteList from '@/utils/whiteList'
-
 let loadingInstance
 const handleCode = (code, msg) => {
   switch (code) {
@@ -46,7 +45,8 @@ const instance = axios.create({
   timeout: requestTimeout,
   headers: {
     'Content-Type': contentType,
-    'X-Frame-Options': 'SAMEORIGIN'
+    'X-Frame-Options': 'SAMEORIGIN',
+    'X-Requested-With': 'XMLHttpRequest'
   }
 })
 instance.interceptors.request.use(

src/views/login/index.vue

@@ -11,10 +11,10 @@
         <span>Welcome to login</span>
       </div>
       <el-form ref="form" :model="loginForm" :rules="rules">
-        <el-form-item prop="username">
+        <el-form-item prop="userAccount">
           <div class="flex-row login-item">
             <img src="~@/assets/login/dianhua@2x(1).png">
-            <el-input v-model="loginForm['username']" autofocus placeholder="请输入用户名" />
+            <el-input v-model="loginForm['userAccount']" autofocus placeholder="请输入用户名" />
           </div>
         </el-form-item>
         <el-form-item prop="password">
@@ -63,7 +63,7 @@ export default {
       title,
       loginForm: {},
       rules: {
-        username: [{ required: true, message: '用户名不能为空!' }],
+        userAccount: [{ required: true, message: '用户名不能为空!' }],
         password: [{ required: true, message: '密码不能为空!' }]
       },
       checked: false,
@@ -95,20 +95,9 @@ export default {
         if (valid) {
           this.loading = true
           this.$store
-            .dispatch('user/login', this.form)
+            .dispatch('user/login', this.loginForm)
             .then(() => {
-              if (this.checked === true) {
-                // 传入账号名，密码，和保存天数3个参数
-                this.setCookie(this.form.account, this.form.password, 7)
-              } else {
-                // 清空Cookie
-                this.clearCookie()
-              }
-              const routerPath =
-                this.redirect === '/404' || this.redirect === '/401'
-                  ? '/'
-                  : this.redirect
-              this.$router.push(routerPath).catch(() => {})
+              this.$router.push('/index')
               this.loading = false
             })
             .catch(() => {

src/views/system/accountManagement/components/AccountManagement.vue

@@ -13,20 +13,37 @@
       <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button>
       <vxe-grid v-bind="gridOptions" style="margin-top: 20px">
         <template #operate="{row}">
-          <el-button type="text" @click="handleDetails(row)">详情</el-button>
+          <!-- <el-button type="text" @click="handleDetails(row)">详情</el-button> -->
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" style="color: red" @click="handleDel(row)">删除</el-button>
         </template>
+        <template #status="{row}">
+          <el-switch
+            v-model="row.status"
+            :active-value="0"
+            :inactive-value="1"
+            @change="((val)=>{changeStatus(row, val)})"
+          />
+        </template>
       </vxe-grid>
+      <div style="text-align: center">
+        <cs-page
+          :page.sync="queryForm.page"
+          :limit.sync="queryForm.size"
+          :total="queryForm.total"
+          @pagination="fetchData"
+        />
+      </div>
     </div>
     <!--编辑用户-->
-    <edit-account ref="edit" />
+    <edit-account ref="edit" @reloadData="fetchData" />
   </div>
 </template>
 
 <script>
 import mixin from '@/views/mixin'
 import EditAccount from '@/views/system/accountManagement/components/EditAccount.vue'
+import { getUserList, deleteUserInfo, updateUserStatus } from '@/api/system/user.js'
 export default {
   name: 'AccountManagement',
   components: { EditAccount },
@@ -35,43 +52,39 @@ export default {
     return {
       searchData: [
         { label: '用户名', model: 'userName', type: 'input' },
-        { label: '角色', model: 'role', type: 'input' },
-        { label: '所在部门', model: 'department', type: 'input' }
+        { label: '角色', model: 'roleName', type: 'input' }
       ],
       gridOptions: {
         ...mixin.data().gridOptions,
         columns: [
-          { title: '序号', type: 'seq' },
-          { title: '用户名', field: 'indexId' },
-          { title: '角色', field: 'indexName' },
-          { title: '所在部门', field: 'indexType' },
-          { title: '手机号', field: 'indexScore' },
-          { title: '状态', field: 'necessaryEvidence' },
-          { title: '注册时间', field: 'latestTime', sortable: true },
+          { title: '序号', type: 'seq', width: 80 },
+          { title: '用户名', field: 'userName' },
+          { title: '角色', field: 'roleName' },
+          { title: '手机号', field: 'phoneNum' },
+          { title: '状态', slots: { default: 'status' }, field: 'status' },
+          { title: '注册时间', field: 'registerTime', sortable: true },
           { title: '操作', slots: { default: 'operate' }, fixed: 'right', width: '150px' }
         ],
         data: [
-          { indexId: 255, indexName: '是否有受害人对行为人的辨认笔录', indexType: '共性指标', indexScore: 4, necessaryEvidence: 2, latestTime: '2023-12-09 10:30', indexExplain: '组织的对特定场所、物品、个人等进行的辨别和确认活动的记录', indexAbbreviation: '共性]受害人辨认笔录', necessaryEvidenceContent: '辨认笔录，辨认人照片', caseType: '工程合同诈骗案', indexRules: [
-            { label: '证据判断', value: 1 },
-            { label: '笔录判断', value: 1 },
-            { label: '外部数据', value: 0 }
-          ] },
-          { indexId: 255, indexName: '是否有行为人到案方式、:违法犯罪证明、前科情况说明前科情况说明......', indexType: '共性指标', indexScore: 4, necessaryEvidence: 2, latestTime: '2023-12-09 10:30', indexExplain: '组织的对特定场所、物品、个人等进行的辨别和确认活动的记录', indexAbbreviation: '共性]受害人辨认笔录', necessaryEvidenceContent: '辨认笔录，辨认人照片', caseType: '工程合同诈骗案', indexRules: [
-            { label: '证据判断', value: 1 },
-            { label: '笔录判断', value: 1 },
-            { label: '外部数据', value: 0 }
-          ] }
+
         ]
       }
     }
   },
   mounted() {
-    this.tableHeight(390)
+    this.tableHeight(400)
   },
   methods: {
     // 获取数据
     fetchData() {
-
+      getUserList({
+        userName: this.searchFormData.userName,
+        pageNumber: this.queryForm.page,
+        pageSize: this.queryForm.size
+      }).then(res => {
+        this.gridOptions.data = res.data.records
+        this.queryForm.total = res.data.total
+      })
     },
     // 新增
     handleAdd() {
@@ -85,14 +98,31 @@ export default {
     handleEdit(row) {
       this.$refs.edit.show(row, true)
     },
+    // 改版状态
+    changeStatus(row, val) {
+      updateUserStatus({
+        id: row.id,
+        status: val
+      }).then(res => {
+        if (res.code === 200) {
+          this.$baseMessage.success('修改成功!')
+          this.fetchData()
+        }
+      })
+    },
     // 删除
     handleDel(row) {
       this.$baseConfirm('确定要删除吗?', null, async() => {
-
+        const { code, msg } = await deleteUserInfo({ id: row.id })
+        code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
+        this.fetchData()
       })
     },
     // 搜索
     onSearch(data, callback) {
+      this.searchFormData = Object.assign({}, data)
+      this.queryForm.page = 1
+      this.fetchData()
       if (callback) callback(true)
     }
   }

src/views/system/accountManagement/components/AuthorityManagement.vue

@@ -13,14 +13,22 @@
       <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button>
       <vxe-grid v-bind="gridOptions" style="margin-top: 20px">
         <template #operate="{row}">
-          <el-button type="text" @click="handleDetails(row)">详情</el-button>
+          <!-- <el-button type="text" @click="handleDetails(row)">详情</el-button> -->
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" style="color: red" @click="handleDel(row)">删除</el-button>
         </template>
       </vxe-grid>
+      <div style="text-align: center">
+        <cs-page
+          :page.sync="queryForm.page"
+          :limit.sync="queryForm.size"
+          :total="queryForm.total"
+          @pagination="fetchData"
+        />
+      </div>
     </div>
     <!--角色编辑-->
-    <edit-authority ref="edit" />
+    <edit-authority ref="edit" @reloadData="fetchData" />
   </div>
 </template>
 
@@ -28,7 +36,7 @@
 
 import mixin from '@/views/mixin'
 import EditAuthority from '@/views/system/accountManagement/components/EditAuthority.vue'
-
+import { getRoleList, deleteRole } from '@/api/system/user.js'
 export default {
   name: 'AuthorityManagement',
   components: { EditAuthority },
@@ -36,31 +44,38 @@ export default {
   data() {
     return {
       searchData: [
-        { label: '角色', model: 'role', type: 'input' }
+        { label: '角色', model: 'roleName', type: 'input' }
       ],
       gridOptions: {
         ...mixin.data().gridOptions,
         columns: [
           { title: '序号', type: 'seq', width: 80 },
           { title: '角色', field: 'roleName' },
-          { title: '关联用户数', field: 'correlationUser' },
+          { title: '关联用户数', field: 'userCount' },
           { title: '说明', field: 'remark' },
-          { title: '注册时间', field: 'registerTime', sortable: true },
+          { title: '注册时间', field: 'updateTime', sortable: true },
           { title: '操作', slots: { default: 'operate' }, fixed: 'right', width: '150px' }
         ],
         data: [
-          { roleName: 'xxx', correlationUser: 10, remark: '测试', registerTime: '2023-12-12' }
+
         ]
       }
     }
   },
   mounted() {
-    this.tableHeight(390)
+    this.tableHeight(400)
   },
   methods: {
     // 获取数据
     fetchData() {
-
+      getRoleList({
+        roleName: this.searchFormData.roleName,
+        pageNumber: this.queryForm.page,
+        pageSize: this.queryForm.size
+      }).then(res => {
+        this.gridOptions.data = res.data.records
+        this.queryForm.total = res.data.total
+      })
     },
     // 新增
     handleAdd() {
@@ -77,11 +92,16 @@ export default {
     // 删除
     handleDel(row) {
       this.$baseConfirm('确定要删除吗?', null, async() => {
-
+        const { code, msg } = await deleteRole({ id: row.id })
+        code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
+        this.fetchData()
       })
     },
     // 搜索
     onSearch(data, callback) {
+      this.searchFormData = Object.assign({}, data)
+      this.queryForm.page = 1
+      this.fetchData()
       if (callback) callback(true)
     }
   }

src/views/system/accountManagement/components/EditAccount.vue

@@ -14,36 +14,37 @@
   >
     <template slot="content">
       <el-form ref="form" :model="userForm" :rules="rules" label-width="80px">
-        <el-form-item label="头像" prop="avatar">
+        <el-form-item label="头像" prop="headPicId">
           <el-upload
             class="avatar-uploader"
             :action="uploadCofig.action"
             :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
             :disabled="isView"
           >
-            <img v-if="userForm['avatar']" :src="userForm['avatar']" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <img v-if="userForm['headPicId']" :src="downLoadUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
         </el-form-item>
         <el-form-item label="用户名" prop="userName">
           <el-input v-model="userForm['userName']" :disabled="isView" placeholder="请输入用户名" />
         </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="userForm['password']" :disabled="isView" placeholder="请输入密码" />
+        <el-form-item label="账号" prop="account">
+          <el-input v-model="userForm['account']" :disabled="isView || isEdit" placeholder="请输入账号名称" />
         </el-form-item>
-        <el-form-item label="手机号" prop="mobile">
-          <el-input v-model="userForm['mobile']" :disabled="isView" placeholder="请输入手机号" />
+        <el-form-item v-if="!isEdit" label="密码" prop="password">
+          <el-input v-model="userForm['password']" :disabled="isView" placeholder="请输入密码" />
         </el-form-item>
-        <el-form-item label="角色" prop="role">
-          <el-select v-model="userForm['role']" :disabled="isView" placeholder="请选择角色" multiple>
-            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
+        <el-form-item label="手机号" prop="phoneNum">
+          <el-input v-model="userForm['phoneNum']" :disabled="isView" placeholder="请输入手机号" />
         </el-form-item>
-        <el-form-item label="所属部门" prop="department">
-          <el-select v-model="userForm['department']" :disabled="isView" placeholder="请选择所属部门" multiple>
-            <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-form-item label="角色" prop="roleId">
+          <el-select v-model="userForm['roleId']" :disabled="isView" placeholder="请选择角色">
+            <el-option v-for="item in roleOptions" :key="item.id" :label="item.roleName" :value="item.id" />
           </el-select>
         </el-form-item>
+
       </el-form>
     </template>
   </cs-drawer>
@@ -51,6 +52,9 @@
 
 <script>
 import { validPhone } from '@/utils/validate'
+import { baseURL } from '@/config'
+import { commonDownloadFile } from '@/api/config/uploadApi'
+import { getRoleList, saveUserInfo, updateUserInfo } from '@/api/system/user'
 export default {
   name: 'EditAccount',
   data() {
@@ -64,19 +68,28 @@ export default {
       // 所属部门数据
       departmentOptions: [],
       // 用户表单
-      userForm: {},
+      userForm: {
+        headPicId: '',
+        account: '',
+        userName: '',
+        password: '',
+        phoneNum: '',
+        roleId: '',
+        status:0
+      },
       // 规则校验
       rules: {
-        avatar: [{ required: true, message: '头像不能为空!', trigger: 'blur' }],
+        headPicId: [{ required: true, message: '头像不能为空!', trigger: 'blur' }],
         userName: [{ required: true, message: '用户名不能为空!', trigger: 'blur' }],
         password: [{ required: true, message: '密码不能为空!', trigger: 'blur' }],
-        mobile: [{ required: false, validate: validPhone, trigger: 'blur' }],
-        role: [{ required: true, message: '角色不能为空!', trigger: 'blur' }],
-        department: [{ required: true, message: '所属部门不能为空!', trigger: 'blur' }]
+        phoneNum: [{ required: false, validate: validPhone, trigger: 'blur' }],
+        account: [{ required: true, message: '账户不能为空!', trigger: 'blur' }],
+        roleId: [{ required: true, message: '角色不能为空!', trigger: 'blur' }]
       },
       // 上传文件配置
       uploadCofig: {
-        action: ''
+        action: `${baseURL}/minio/uploadFile`,
+        accept: '.jpg,.png'
       },
       // 是否编辑
       isEdit: false,
@@ -84,24 +97,78 @@ export default {
       isView: false
     }
   },
+  computed: {
+    downLoadUrl() {
+      if (this.userForm.headPicId) {
+        return `${baseURL}${commonDownloadFile}${this.userForm.headPicId}`
+      } else {
+        return ''
+      }
+    }
+  },
   methods: {
     // 显示弹窗
     show(data, isEdit) {
+      this.queryRole()
       this.isEdit = isEdit
       this.isView = !!data && !isEdit
       this.drawerOption.title = this.isEdit ? '编辑用户' : (this.isView ? '查看用户' : '新增用户')
       this.userForm = !isEdit && !this.isView ? {} : data
       this.drawerOption.show = true
     },
+    // 查询角色
+    queryRole() {
+      getRoleList({
+        pageNumber: 1,
+        pageSize: 999999
+      }).then(res => {
+        this.roleOptions = res.data.records
+      })
+    },
     // 重置
     handleReset() {
       this.$refs.form.resetFields()
       this.$refs.form.clearValidate()
     },
+    handleAvatarSuccess(res, file) {
+      this.$set(this.userForm, 'headPicId', res.data)
+    },
+    beforeAvatarUpload(file) {
+      const isLt5M = file.size / 1024 / 1024 < 5
+      const filename = file.name
+      const postfix = filename.substring(filename.lastIndexOf('.'))
+      if (!['.jpg', '.png'].includes(postfix)) {
+        this.$message.error('上传头像图片只能是 JPG,PNG 格式!')
+        return false
+      }
+      if (!isLt5M) {
+        this.$message.error('上传头像图片大小不能超过 5MB!')
+        return false
+      }
+      return true
+    },
     // 确定
     handleSubmit() {
       this.$refs.form.validate(valid => {
-        if (valid) { }
+        if (valid) {
+          if (this.isEdit) {
+            updateUserInfo(this.userForm).then(res => {
+              if (res.code === 200) {
+                this.drawerOption.show = false
+                this.$baseMessage.success('编辑成功!')
+                this.$emit('reloadData')
+              }
+            })
+          } else {
+            saveUserInfo(this.userForm).then(res => {
+              if (res.code === 200) {
+                this.drawerOption.show = false
+                this.$baseMessage.success('新增成功!')
+                this.$emit('reloadData')
+              }
+            })
+          }
+        }
       })
     }
   }

src/views/system/accountManagement/components/EditAuthority.vue

@@ -17,15 +17,19 @@
         <el-form-item label="角色" prop="roleName">
           <el-input v-model="roleForm['roleName']" :disabled="isView" placeholder="请输入角色" />
         </el-form-item>
-        <el-form-item label="说明" prop="explain">
-          <el-input v-model="roleForm['explain']" :disabled="isView" placeholder="请输入说明" />
+        <el-form-item label="说明" prop="remark">
+          <el-input v-model="roleForm['remark']" :disabled="isView" placeholder="请输入说明" />
         </el-form-item>
-        <el-form-item label="功能权限" prop="auth">
+        <el-form-item label="功能权限" prop="menuIdList">
           <el-tree
+            ref="treeRef"
             :data="menuList"
             default-expand-all
             show-checkbox
+            :default-checked-keys="roleForm.menuIdList"
+            node-key="id"
             class="menu-list"
+            @check-change="changeSelect"
           />
         </el-form-item>
       </el-form>
@@ -35,6 +39,7 @@
 
 <script>
 // import { mapGetters } from 'vuex'
+import { getMenuList, saveRole, updateRole } from '@/api/system/user'
 export default {
   name: 'EditAuthority',
   data() {
@@ -44,7 +49,11 @@ export default {
         title: '新增角色'
       },
       // 角色表单
-      roleForm: {},
+      roleForm: {
+        menuIdList: [],
+        roleName: '',
+        remark: ''
+      },
       // 规则校验
       rules: {
         roleName: [{ required: true, message: '角色不能为空!', trigger: 'blur' }],
@@ -56,57 +65,21 @@ export default {
       // 是否是查看
       isView: false,
       menuList: [
-        { label: '首页', id: '0' },
-        { label: '案件信息', id: '1', children: [
-          { label: '案件列表', id: '1-0' },
-          { label: '案件详情', id: '1-1' }
-        ] },
-        { label: '规则引擎', id: '2', children: [
-          { label: '指标规则', id: '2-0' },
-          { label: '模型规则', id: '2-1' },
-          { label: '原子指标', id: '2-1' }
-        ] },
-        { label: '系统管理', id: '3', children: [
-          { label: '账号管理', id: '3-0', children: [] },
-          { label: '配置管理', id: '3-1', children: [] }
-        ] },
-        { label: '提示工程', id: '3', children: [
-          { label: '提示词模版', id: '3-0', children: [] },
-          { label: '提示词调试', id: '3-1', children: [] }
-        ] }
       ]
     }
   },
-  // computed: {
-  //   ...mapGetters({
-  //     routes: 'routes/routes'
-  //   }),
-  //   // 处理后的菜单列表
-  //   menuList() {
-  //     const menu = []
-  //     this.routes.map(item => {
-  //       if (!item.hidden && item.children) {
-  //         if (item.children.length === 1) {
-  //           menu.push({ label: item.meta['title'] })
-  //         } else {
-  //           const children = []
-  //           item.children.map(subItem => {
-  //             children.push({ label: subItem.meta['title'] })
-  //           })
-  //           menu.push({ label: item.meta['title'], children: children })
-  //         }
-  //       }
-  //     })
-  //     return menu
-  //   }
-  // },
+  mounted() {
+    this.queryMeun()
+  },
   methods: {
     // 显示弹窗
     show(data, isEdit) {
       this.isEdit = isEdit
       this.isView = !!data && !isEdit
       this.drawerOption.title = this.isEdit ? '编辑角色' : (this.isView ? '查看角色' : '新增角色')
-      this.roleForm = !isEdit && !this.isView ? {} : data
+      this.roleForm = !isEdit && !this.isView ? { menuIdList: [],
+        roleName: '',
+        remark: '' } : JSON.parse(JSON.stringify(data))
       this.drawerOption.show = true
     },
     // 重置
@@ -117,8 +90,37 @@ export default {
     // 确定
     handleSubmit() {
       this.$refs.form.validate(valid => {
-        if (valid) { }
+        if (valid) {
+          if (this.isEdit) {
+            updateRole(this.roleForm).then(res => {
+              if (res.code === 200) {
+                this.drawerOption.show = false
+                this.$baseMessage.success('编辑成功!')
+                this.$emit('reloadData')
+              }
+            })
+          } else {
+            saveRole(this.roleForm).then(res => {
+              if (res.code === 200) {
+                this.drawerOption.show = false
+                this.$baseMessage.success('新增成功!')
+                this.$emit('reloadData')
+              }
+            })
+          }
+        }
       })
+    },
+    queryMeun() {
+      getMenuList().then(res => {
+        if (res.code === 200) {
+          this.menuList = res.data
+        }
+      })
+    },
+    changeSelect() {
+      const list = this.$refs['treeRef'].getCheckedKeys()
+      this.$set(this.roleForm, 'menuIdList', list)
     }
   }
 }