完善用户功能，角色数据权限

src/api/system/role.js

@@ -37,16 +37,23 @@ export function updateRole(data) {
   return request({
     url: '/system/role/update/' + businessId,
     method: 'put',
-    data
+    data,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
   })
 }
 
 // 角色数据权限
 export function dataScope(data) {
+  data = Qs.stringify(data)
   return request({
     url: '/system/role/dataScope',
     method: 'put',
-    data
+    data,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
   })
 }
 

src/views/system/role/index.vue

@@ -156,14 +156,19 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
           <el-tree
-            ref="menu"
+            class="tree-border"
             :data="menuOptions"
             show-checkbox
+            ref="menu"
             node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
             empty-text="加载中，请稍后"
             :props="defaultProps"
-          />
+          ></el-tree>
         </el-form-item>
         <el-form-item label="备注">
           <el-input v-model.trim="form.remark" maxlength="200" show-word-limit type="textarea" placeholder="请输入内容" />
@@ -188,9 +193,9 @@
           :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
           max-height="400px"
         >
-        <el-form-item label="权限字符">
-          <el-input v-model.trim="form.roleKey" placeholder="请输入角色名称" show-word-limit :maxlength="30" :disabled="true" />
-        </el-form-item>
+<!--        <el-form-item label="权限字符">-->
+<!--          <el-input v-model.trim="form.roleKey" placeholder="请输入角色名称" show-word-limit :maxlength="30" :disabled="true" />-->
+<!--        </el-form-item>-->
         <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
@@ -204,6 +209,40 @@
         </el-table-column>
         </el-table>
       </el-form>
+      <div class="dividerStyle">
+        <el-divider direction="vertical" />
+      </div>
+      <el-form  :model="form" label-width="80px" style="width:60%">
+        <el-form-item label="菜单名称" prop="roleName">
+          <el-input v-model="form.menuName" placeholder="未选择菜单名称" disabled/>
+        </el-form-item>
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope">
+            <el-option
+              v-for="item in dataScopeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="deptOptions"
+            show-checkbox
+            default-expand-all
+            ref="dept"
+            node-key="id"
+            :check-strictly="!form.deptCheckStrictly"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancelDataScope">取 消</el-button>
         <el-button type="primary" @click="submitDataScope">确 定</el-button>
@@ -216,6 +255,7 @@
 import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from '@/api/system/role'
 import { roleMenuTreeselectMC, treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
 import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
+// import { getRolesByInsId } from '../../../api/businessManage/template'
 export default {
   name: 'Role',
   data() {
@@ -242,15 +282,19 @@ export default {
       // dateRange: [],
       // 菜单表格数据
       menuList: [],
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
       // 状态数据字典
       statusOptions: [
         {
           dictLabel: '启用',
-          dictValue: '0'
+          dictValue: '1'
         },
         {
           dictLabel: '停用',
-          dictValue: '1'
+          dictValue: '0'
         }
       ],
       // 数据范围选项
@@ -371,11 +415,13 @@ export default {
         this.$refs.menu.setCheckedKeys(response.checkedKeys)
       })
     },
-    /** 根据角色ID查询部门树结构 */
-    getRoleDeptTreeselect(roleId) {
-      roleDeptTreeselect(roleId).then(response => {
-        this.deptOptions = response.depts
-        this.$refs.dept.setCheckedKeys(response.checkedKeys)
+    /** 根据角色ID和菜单ID查询部门树结构 */
+    getRoleDeptTreeselect(roleId, menuId) {
+      return roleDeptTreeselect(roleId, menuId).then(response => {
+        this.form.deptCheckStrictly = response.data.deptCheckStrictly
+        this.deptOptions = response.data.depts
+        this.form.dataScope = this.dataScopeOptions[response.data.dataScope - 1].value
+        return response
       })
     },
     // 角色状态修改
@@ -411,14 +457,22 @@ export default {
       if (this.$refs.menu !== undefined) {
         this.$refs.menu.setCheckedKeys([])
       }
+      this.menuExpand = false
+      this.menuNodeAll = false
+      this.deptExpand = true
+      this.deptNodeAll = false
       this.form = {
         roleId: undefined,
+        businessId: undefined,
         roleName: undefined,
         roleKey: undefined,
         roleSort: 0,
         flag: undefined,
         menuIds: [],
+        menuName: undefined,
         deptIds: [],
+        menuCheckStrictly: true,
+        deptCheckStrictly: true,
         remark: undefined
       }
       this.resetForm('form')
@@ -440,6 +494,36 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type === 'menu') {
+        this.form.menuCheckStrictly = value ? true : false
+      } else if (type === 'dept') {
+        this.form.deptCheckStrictly = value ? true : false
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
+      } else if (type === 'dept') {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === 'menu') {
+        const treeList = this.menuOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
+        }
+      } else if (type === 'dept') {
+        const treeList = this.deptOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
+        }
+      }
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
@@ -455,6 +539,7 @@ export default {
       getRole(roleId).then(response => {
         this.form = response.data
         this.open = true
+        this.getMenuTreeselect(roleId)
         this.$nextTick(() => {
           roleMenu.then(res => {
             this.$refs.menu.setCheckedKeys(res.data.checkedKeys)
@@ -513,17 +598,13 @@ export default {
     },
     /** 提交按钮（数据权限） */
     submitDataScope: function() {
-      if (this.form.roleId !== undefined) {
+      console.log(this.form)
+      if (this.form.businessId !== undefined && this.form.menuId !== undefined) {
         this.form.deptIds = this.getDeptAllCheckedKeys()
         dataScope(this.form).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              message: '修改成功',
-              type: 'success'
-            })
-            this.openDataScope = false
-            this.getList()
-          }
+          this.msgSuccess('修改成功')
+          this.openDataScope = false
+          this.getList()
         })
       }
     },
@@ -584,4 +665,16 @@ export default {
       margin-left: 15px;
     }
   }
+  .roleDialog {
+    .el-dialog__body {
+      display: flex;
+    }
+  }
+  .dividerStyle {
+    .el-divider--vertical {
+      height: 100%;
+      margin-left: 20px;
+      width: 2px;
+    }
+  }
 </style>

src/views/system/user/index.vue

@@ -724,7 +724,7 @@ export default {
     /** 重置密码按钮操作 */
     handleResetPwd(row) {
       this.ruleForm.newPassword = ''
-      this.ruleForm.row = row.userId
+      this.ruleForm.row = row.businessId
       this.resetPwdDiaLog = !this.resetPwdDiaLog
     },
     handleResetPwdSure() {