角色修改完成

src/views/classList/classList/index.vue

@@ -197,6 +197,8 @@ export default {
         this.classList();
         this.$message.success('修改成功')
         this.isUpdateDialog = false
+        this.nodeData.className = this.updateForm.name
+
       })
     },
     // 点击修改按钮

src/views/department/api.js

@@ -74,6 +74,17 @@ export function putDeptUser  (data) {
         data
     })
 }
+// 设置角色
+export function putUserRole  (userId, roleId) {
+    return request({
+        url: `/manager/role/user`,
+        method: 'put',
+        data:{
+            userid: userId,
+            roleIds: roleId
+        }
+    })
+}
 
 
 

src/views/department/index.vue

@@ -62,6 +62,15 @@
                   size="small"
                   >转移人员
                 </el-button>
+                <el-button
+                  @click="onClickAddRole(scope.row)"
+                  slot="reference"
+                  style="margin-left: 10px;"
+                  class="el-icon-edit"
+                  type="text"
+                  size="small"
+                  >修改角色
+                </el-button>
                 <el-popconfirm
                   @confirm="onClickDelete(scope.row)"
                   :title="'确定要删除吗？'"
@@ -206,12 +215,39 @@
         <el-button type="primary" @click="onClickAffirmTransferUser">确定转移</el-button>
       </span>
     </el-dialog>
+    <!-- 添加角色模态框 -->
+    <el-dialog  title="角色添加"
+      :visible.sync="isAddRoleDialog"
+      width="30%">
+      <el-form ref="transferForm" :model="deptForm" label-width="80px">
+        <!-- <el-form-item  v-if="roleIds.length" label="角色名称" prop="name">
+          <el-cascader
+            v-model="roleIds"
+            :options="roleArr"
+            :props="{ multiple: true, checkStrictly: true,  label: 'name', value: 'id', children: 'childrenList' }"
+            collapse-tags
+            clearable></el-cascader>
+        </el-form-item> -->
+        <el-form-item   label="角色名称" prop="name">
+          <Treeselect v-model="roleIds" :multiple= "true" :options="roleArr" :normalizer="normalizerRole"  placeholder="选择角色" />
+          <div style="margin-top: 200px;"></div>
+
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isTransferDialog = false">取 消</el-button>
+        <el-button type="primary" @click="onClickAffirmAddRole">添加</el-button>
+      </span>
+    </el-dialog>
+    
   </div>
 </template>
 
 <script>
 import columns from "./columns";
-import { getDept, getDeptUser, postDept, putDept, deleteDept, getallUser, postDeptUser, deleteDeptUser, putDeptUser } from "./api";
+import { getDept, getDeptUser, postDept, putDept, deleteDept, getallUser, postDeptUser, deleteDeptUser, putDeptUser, putUserRole } from "./api";
+import { getRole, postRole, putRole, deleteRole} from "../rolePermissions/api";
+
 import { formatDate } from "@/com/index";
 import CommonHead from './components/CommonHead.vue'
 import Treeselect from "@riophae/vue-treeselect";
@@ -268,6 +304,10 @@ export default {
       transferForm: { 
         newDeptId: null,
       }, // 转移部门的模态框
+      isAddRoleDialog: false, // 添加角色模态框
+      roleArr: [], // 角色列表
+      roleIds: [], // 角色id
+      userId: null, // 设置角色的userid
     };
   },
   components: {
@@ -278,11 +318,49 @@ export default {
   async created() {
     this.deptList()
     this.allUserList()
+    // 获取角色列表
+    getRole().then(res =>{
+      this.roleArr = res
+    })
     
   },
   mounted () {
   },
   methods: {
+    // 添加角色
+    onClickAffirmAddRole() {
+      if(this.roleIds.length === 0){
+        this.$message.error('请选择角色')
+      }else {
+        let arr = []
+        this.roleIds.forEach(it =>{ // 选中为一级 展开所有下级数据
+          let obj = this.roleArr.find( item => {return item.id === it })
+          if(obj){
+            arr =  [ ...arr, ...obj.childrenList]
+          }else {
+            arr.push(it)
+          }
+        })
+        let idsArr = arr.map(item => {
+          let id = ''
+          item.name ? id = item.id :  id = item  
+          return id
+        })
+        putUserRole(this.userId, idsArr).then(res =>{
+          this.deptUserList(this.deptData.deptId)
+          this.$message.success('添加成功')
+          this.isAddRoleDialog = false
+        })
+      }
+      
+    },
+    // 点击添加角色
+    onClickAddRole(item) {
+      this.isAddRoleDialog = true
+      this.roleIds = item.roleIds
+      this.userId = item.userid
+      console.log(item.roleIds)
+    },
     // 点击确定转移用户部门
     onClickAffirmTransferUser() {
       if(this.transferForm.newDeptId){
@@ -357,6 +435,13 @@ export default {
         return { id: node.deptId, label: node.name, children: node.childrenList };
       }
     },
+    normalizerRole(node) {
+      if (node.childrenList && !node.childrenList.length) {
+        return { id: node.id,  label: node.name,  };
+      }else {
+        return { id: node.id, label: node.name, children: node.childrenList };
+      }
+    },
     handleNodeClick(item) {
       this.deptData = item
       // localStorage.setItem('defaultCheckClass', JSON.stringify(item) )
@@ -376,7 +461,16 @@ export default {
     // 获取部门用户列表
     deptUserList(deptId){
       getDeptUser(deptId, this.query).then( res =>{
-        this.deptUserArr = res
+        this.deptUserArr = res.map(item =>{
+          let roleIds = []
+          let arr = item.roleList.map(it =>{
+            roleIds.push(it.id)
+            return it.name
+          })
+          item.roleName = arr.join(', ')
+          item.roleIds = roleIds
+          return item
+        })
       })
     },
     // 获取所有用户列表 用于添加部门人员