修改

src/components/msgTree/index.vue

@@ -0,0 +1,183 @@
+<!--
+ * @Author: zk
+ * @Date: 2022-02-09 15:47:09
+ * @LastEditTime: 2022-03-10 17:25:18
+ * @LastEditors: your name
+ * @Description: 用户组树
+ * @FilePath: \Foshan4A4.0\src\components\usergrouptree\index.vue
+-->
+<template>
+  <div class="userGroupTree">
+    <div class="head">
+      <p>{{ title }}</p>
+    </div>
+    <div :class="type ? 'radioBg':''" class="content">
+      <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
+        <el-tree ref="tree" :data="data" show-checkbox :default-props="defaultProps" default-expand-all node-key="GroupId" highlight-current @check="currentChange">
+          <span slot-scope="{ data }" class="custom-tree-node">
+            {{ data.GroupName }}
+          </span>
+        </el-tree>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetGroupTree } from '@/api/AccountGroup'
+import { translateDataToTreeAll } from '@/utils/validate'
+export default {
+  name: 'UserGroupTree',
+  props: {
+    title: {
+      // 标题
+      type: String,
+      default: ''
+    },
+    checkedKeys: {
+      // 已选中
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: Boolean,
+      default: false
+    },
+    defaultProps: {
+      type: Object,
+      default: () => ({
+        children: 'children',
+        label: 'GroupName'
+      })
+    },
+    checkDisabled: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      data: [], // tree数据
+      checkedList: [], // 已选中数据
+      pageIndex: 1,
+      pageSize: 20
+    }
+  },
+  watch: {
+    checkedKeys: {
+      handler (val) {
+        this.checkedList = val
+        this.$refs.tree.setCheckedKeys(val)
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.getGroupTree()
+  },
+  methods: {
+    // 复选框选中
+    currentChange (data, isChecked) {
+      if (this.type) {
+        const { GroupId } = data
+        this.$emit('getTreeData', this.$refs.tree.getCheckedNodes())
+        if (isChecked) {
+          const checked = [GroupId]
+          this.$refs.tree.setCheckedKeys(checked)
+        }
+      } else {
+        const arr = this.$refs.tree.getCheckedNodes()
+        this.$emit('getTreeData', arr)
+      }
+    },
+    async getGroupTree () {
+      const result = await GetGroupTree({
+        QueryName: '',
+        PageIndex: this.pageIndex,
+        PageSize: this.pageSize
+      })
+      const datas = result.returnData
+      const tree = translateDataToTreeAll(datas, 'GroupUpid', 'GroupId')
+      const setDisabled = (tree, key) => {
+        if (key) {
+          tree.find(node => {
+            if (node.GroupId === key) {
+              node.disabled = true
+              node.children?.length && setDisabled(node.children)
+              return true
+            } else if (node.children?.length) {
+              setDisabled(node.children, key)
+            }
+          })
+        } else {
+          tree.forEach(node => {
+            node.disabled = true
+            node.children?.length && setDisabled(node.children)
+          })
+        }
+      }
+      this.checkDisabled && setDisabled(tree, this.checkDisabled)
+      const obj = {
+        AuthCount: 0,
+        GroupId: -1,
+        GroupName: '岗位',
+        GroupUpid: 0,
+        QueryTarget: 0,
+        Status: 0,
+        UserCount: 0,
+        disabled: true,
+        children: tree
+      }
+      this.data = [obj]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.userGroupTree {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+  box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+  border-radius: 16px;
+  padding: 0 32px 0 32px;
+  .head {
+    width: 100%;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    p {
+      margin: 0;
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+    }
+  }
+  ::v-deep .content {
+    width: 100%;
+    height: calc(100% - 112px);
+    box-sizing: border-box;
+
+    .custom-tree-node {
+      margin-left: 10px;
+      font-size: 14px;
+    }
+  }
+  ::v-deep .radioBg {
+    .el-checkbox__inner {
+      border-radius: 50%;
+      &::after {
+        width: 5px;
+        height: 5px;
+        background: #ffffff;
+        border-radius: 50%;
+        top: 3px;
+        left: 3px;
+      }
+    }
+  }
+}
+</style>

src/components/permissionlist/permissionlist.scss

@@ -240,7 +240,7 @@
 .hucPower {
   .right {
     .paren_content {
-      height: 40%;
+      height: 35%;
     }
   }
 }

src/components/rolelist/index.vue

@@ -2,43 +2,17 @@
   <div class="bf-rolelist">
     <!-- 角色列表 -->
     <div class="cont">
-      <div
-        v-if="title"
-        class="paren_header"
-      >
+      <div v-if="title" class="paren_header">
         <p>{{ title }}</p>
       </div>
       <template v-if="dataList.length">
-        <div
-          :class="active ? 'bgActive' : 'bgActivecheckbox'"
-          class="paren_content"
-        >
+        <div :class="active ? 'bgActive' : 'bgActivecheckbox'" class="paren_content">
           <template v-if="!type">
-            <el-scrollbar
-              class="scrollBar"
-              style="height: 100%"
-            >
-              <el-row
-                v-infinite-scroll="load"
-                :infinite-scroll-distance="20"
-                infinite-scroll-disabled="disabled"
-                class="scCont scrollbar"
-                :gutter="16"
-              >
-                <el-checkbox-group
-                  @change="checkChange"
-                  v-model="checkList"
-                >
-                  <el-col
-                    :span="number"
-                    v-for="(item, index) in dataList"
-                    :key="index"
-                  >
-                    <div
-                      @click="handleBg(item, index)"
-                      :class="active && msg === index ? 'bgColor' : ''"
-                      class="cide"
-                    >
+            <el-scrollbar class="scrollBar" style="height: 100%">
+              <el-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="scCont scrollbar" :gutter="16">
+                <el-checkbox-group @change="checkChange" v-model="checkList">
+                  <el-col :span="number" v-for="(item, index) in dataList" :key="index">
+                    <div @click="handleBg(item, index)" :class="active && msg === index ? 'bgColor' : ''" class="cide">
                       <div class="cide_header">
                         <p :title="item.name">{{ item.name }}</p>
                         <el-checkbox :label="index"></el-checkbox>
@@ -50,43 +24,19 @@
             </el-scrollbar>
           </template>
           <template v-if="total > 1">
-            <p
-              class="center"
-              v-if="loading"
-            >加载中...</p>
-            <p
-              class="center"
-              v-if="noMore"
-            >没有更多数据了~</p>
+            <p class="center" v-if="loading">加载中...</p>
+            <p class="center" v-if="noMore">没有更多数据了~</p>
           </template>
         </div>
       </template>
       <template v-else-if="mainData.length">
-        <div
-          :class="active ? 'bgActive' : 'bgActivecheckbox'"
-          class="paren_content"
-        >
+        <div :class="active ? 'bgActive' : 'bgActivecheckbox'" class="paren_content">
           <template v-if="type">
-            <el-scrollbar
-              class="scrollBar"
-              style="height: 100%"
-            >
+            <el-scrollbar class="scrollBar" style="height: 100%">
               <el-row :gutter="16">
-                <el-radio-group
-                  style="display: block"
-                  @change="radioChange"
-                  v-model="radio"
-                >
-                  <el-col
-                    :span="number"
-                    v-for="(item, index) in mainData"
-                    :key="index"
-                  >
-                    <div
-                      @click.stop="handleBg(index)"
-                      :class="active && msg === index ? 'bgColor' : ''"
-                      class="cide"
-                    >
+                <el-radio-group style="display: block" @change="radioChange" v-model="radio">
+                  <el-col :span="number" v-for="(item, index) in mainData" :key="index">
+                    <div @click.stop="handleBg(index)" :class="active && msg === index ? 'bgColor' : ''" class="cide">
                       <div class="cide_header">
                         <p>{{ item.name }}</p>
                         <el-radio :label="index"></el-radio>
@@ -100,10 +50,7 @@
         </div>
       </template>
       <template v-else>
-        <el-empty
-          :imageSize="imageSize"
-          description="暂无数据"
-        ></el-empty>
+        <el-empty :imageSize="imageSize" description="暂无数据"></el-empty>
       </template>
     </div>
   </div>
@@ -168,7 +115,7 @@ export default {
       default: 0
     }
   },
-  data() {
+  data () {
     return {
       radio: null,
       checkList: [],
@@ -186,13 +133,13 @@ export default {
   },
   watch: {
     radioCheck: {
-      handler(num) {
+      handler (num) {
         this.radio = num
       },
       deep: true
     },
     roleType: {
-      handler(msg) {
+      handler (msg) {
         const obj = {}
         obj[msg] = msg
         this.msgDatas.push(obj)
@@ -200,7 +147,7 @@ export default {
       deep: true
     },
     dataList: {
-      handler(arr) {
+      handler (arr) {
         if (arr && arr.length) {
           this.asyncData.push(true)
         }
@@ -208,7 +155,7 @@ export default {
       deep: true
     },
     checkBoxList: {
-      handler(arr) {
+      handler (arr) {
         if (arr && arr.length) {
           this.asyncData.push(true)
         }
@@ -216,7 +163,7 @@ export default {
       deep: true
     },
     asyncData: {
-      handler(arr) {
+      handler (arr) {
         if (arr && arr.length >= 2) {
           if (this.roleType == 'account') {
             this.checkBoxs('UserId')
@@ -229,15 +176,18 @@ export default {
       deep: true
     },
     GroupIds: {
-      handler() {
+      handler () {
         const obj = {}
         obj['GroupIds'] = 'GroupIds'
         this.msgDatas.push(obj)
+        // if (this.roleType == 'q') {
+        //   this.checkList = []
+        // }
       },
       deep: true
     },
     msgDatas: {
-      handler(arr) {
+      handler (arr) {
         if (arr && arr.length >= 2) {
           if (this.queryAll) {
             this.getRoleData('RoleId', 'RoleName')
@@ -261,7 +211,7 @@ export default {
       deep: true
     },
     selectedRoleId: {
-      handler(val) {
+      handler (val) {
         if (val === -1) {
           this.msg = -1
         }
@@ -269,26 +219,26 @@ export default {
     }
   },
   computed: {
-    noMore() {
+    noMore () {
       return this.pageNum >= this.total
     },
-    disabled() {
+    disabled () {
       return this.loading || this.noMore
     }
   },
-  created() {
+  created () {
     const obj = this.$store.state.app.systemSet
     const { OpenGroup } = typeof obj === 'string' ? JSON.parse(obj) : obj
     this.OpenGroup = OpenGroup
   },
   methods: {
     // 选中
-    handleBg(item, i) {
+    handleBg (item, i) {
       this.msg = i
       this.$emit('checkClick', item)
     },
     //多选框
-    checkChange(arr) {
+    checkChange (arr) {
       const datas = this.formatChecks(arr)
       // if (this.roleType == 'account') {
       //   datas = this.formatChecks(arr, 'UserId');
@@ -296,11 +246,11 @@ export default {
       this.$emit('checkChange', datas)
     },
     //单选框
-    radioChange(val) {
+    radioChange (val) {
       this.$emit('radioChange', val)
     },
     //格式化选中回调
-    formatChecks(arr, key) {
+    formatChecks (arr, key) {
       const datas = []
       // const ids = []
       this.dataList.forEach((item, index) => {
@@ -316,7 +266,7 @@ export default {
       return datas
     },
     //多选框默认选中
-    checkBoxs(ids) {
+    checkBoxs (ids) {
       const datas = []
       const type = typeof this.checkBoxList[0]
       if (type == 'object') {
@@ -338,7 +288,7 @@ export default {
       }
       this.checkList = datas
     },
-    checkRole() {
+    checkRole () {
       const datas = []
       this.dataList.forEach((item, index) => {
         this.checkBoxList.forEach(p => {
@@ -350,7 +300,7 @@ export default {
       this.checkList = datas
     },
     //获取列表
-    async getRoleData(ids, names) {
+    async getRoleData (ids, names) {
       try {
         this.loading = true
         const obj = {
@@ -394,7 +344,7 @@ export default {
     },
 
     //获取列表2
-    async getRoleDataByUpId() {
+    async getRoleDataByUpId () {
       try {
         this.loading = true
         const obj = {
@@ -429,7 +379,7 @@ export default {
     },
 
     //滚动加载数据
-    load() {
+    load () {
       this.pageNum += 1
       if (this.roleType == 'account') {
         this.getRoleData('UserId', 'UserName')
@@ -443,7 +393,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './rolelist.scss';
+@import "./rolelist.scss";
 .paren_content {
   ::v-deep .el-radio__label {
     display: none;

src/views/organizationManagement/components/organizationEdit.vue

@@ -136,9 +136,9 @@ export default {
     dataList: {
       handler (val) {
         const arr = [val];
+        // this.data = arr;
+        this.decompose(arr, this.AppId);
         this.data = arr;
-        // this.decompose(arr, this.OrganUpid);
-        // this.data = [this.dataObj];
         this.checkedKeys = [this.OrganUpid];
       },
       deep: true,
@@ -179,7 +179,9 @@ export default {
       for (let i = 0; i < data.length; i++) {
         if (data[i].OrganId == id) {
           if (data[i].children && data[i].children.length) {
-            delete data[i].children;
+            data.splice(i, 1);
+          } else {
+            data.splice(i, 1);
           }
           this.dataObj = data[i];
         } else if (data[i].children && data[i].children.length > 0) {

src/views/staffManagement/compontents/staffAdd.vue

@@ -67,7 +67,7 @@
         <!--有角色 无岗位-->
         <template v-if="openRole && !OpenGroup">
           <div class="r24 flex1 part">
-            <Rolelist @checkChange="checkChange" :imageSize="120" @checkClick="checkClick" :roleType="roleType" :checkBoxList="roleCheckBoxs" :active="true" class="hucRole" :number="8" title="角色列表" />
+            <Rolelist @checkChange="checkChange" :imageSize="120" @checkClick="checkClick" :roleType="roleType" :active="true" class="hucRole" :number="8" title="角色列表" />
           </div>
           <div class="flex1 part">
             <Permissionlist style="height: 376px" :imageSize="120" :RoleList="RoleList" :check="true" class="hucPower" title="权限列表" />
@@ -80,7 +80,7 @@
             <Usergroup @getTreeData="getUserGroup" :checkedKeys="userGroupKeys" title="岗位树" />
           </div>
           <div class="r24 flex1 part">
-            <Rolelist @checkChange="checkChange" :imageSize="120" :GroupIds="GroupIds" @checkClick="checkClick" :roleType="roleType" :checkBoxList="roleCheckBoxs" :active="true" class="hucRole" :number="8" title="角色列表" />
+            <Rolelist @checkChange="checkChange" @role-list-change="roleChange" :imageSize="120" needType="1" :GroupIds="GroupIds" @checkClick="checkClick" :roleType="roleType" :active="true" class="hucRole" :number="8" title="角色列表" />
           </div>
           <div class="flex1 part">
             <Permissionlist style="height: 376px" :imageSize="120" :RoleList="RoleList" :check="true" class="hucPower" title="权限列表" />
@@ -109,7 +109,7 @@ import Organization from "@/components/organization";
 import Permissionlist from "@/components/permissionlist";
 import Rolelist from "@/components/rolelist";
 import Loginpolicy from "@/components/loginpolicy";
-import Usergroup from "@/components/usergrouptree";
+import Usergroup from "@/components/msgTree";
 import treeData from "../minixs/treeData";
 import { mapGetters } from "vuex";
 import { RoleAuths } from "@/api/apiAuthority";
@@ -253,12 +253,14 @@ export default {
     }
   },
   mounted () {
-    if (this.openRole && !this.OpenGroup) {
-      this.roleType = 'onlyRole';
-    }
     if (this.OpenAuthData) {
       this.roleType = 'account';
     }
+    if (this.openRole && !this.OpenGroup) {
+      this.roleType = 'onlyRole';
+    } else {
+      this.roleType = 'q';
+    }
   },
   methods: {
     //获取选中的树数据
@@ -329,6 +331,9 @@ export default {
     checkGroup (item) {
       this.groupAuths(item.GroupId)
     },
+    roleChange () {
+      this.checkRoles = []
+    },
     //根据角色查看权限列表
     async roleAuths (id) {
       try {
@@ -503,12 +508,12 @@ export default {
   min-height: 68vh;
   .part {
     height: 750px;
-    ::v-deep .paren_content {
-      height: 85%;
-      .cont > .paren_content {
-        height: 100% !important;
-      } 
-    }
+    // ::v-deep .paren_content {
+    //   height: 85%;
+    //   .cont > .paren_content {
+    //     height: 100% !important;
+    //   }
+    // }
   }
 }
 </style>

src/views/staffManagement/compontents/staffEdit.vue

@@ -80,7 +80,7 @@
             <Usergroup @getTreeData="getUserGroup" :checkedKeys="userGroupKeys" title="岗位树" />
           </div>
           <div class="r24 flex1 part">
-            <Rolelist @checkChange="checkChange" :imageSize="120" @checkClick="checkClick" :GroupIds="GroupIds" :roleType="roleType" :checkBoxList="roleCheckBoxs" :active="true" class="hucRole" :number="8" title="角色列表" />
+            <Rolelist @checkChange="checkChange" :imageSize="120" @checkClick="checkClick" :GroupIds="GroupIds" :roleType="roleType" :checkBoxList="roleCheckBoxs" @role-list-change="roleChange" :active="true" class="hucRole" :number="8" title="角色列表" />
           </div>
           <div class="flex1 part">
             <Permissionlist style="height: 376px" :imageSize="120" :RoleList="RoleList" :check="true" class="hucPower" title="权限列表" />
@@ -109,7 +109,7 @@ import Organization from "@/components/organization";
 import Permissionlist from "@/components/permissionlist";
 import Rolelist from "@/components/rolelist";
 import Loginpolicy from "@/components/loginpolicy";
-import Usergroup from "@/components/usergrouptree";
+import Usergroup from "@/components/msgTree";
 import treeData from "../minixs/treeData";
 import { mapGetters } from "vuex";
 import { RoleAuths } from "@/api/apiAuthority";
@@ -334,6 +334,17 @@ export default {
     getTreeData (arr) {
       this.checkTrees = arr;
     },
+    roleChange (arr) {
+      const datas = [];
+      arr.forEach(item => {
+        this.roleCheckBoxs.forEach((p) => {
+          if (item.RoleId == p.RoleId) {
+            datas.push(p)
+          }
+        })
+      })
+      this.roleCheckBoxs = datas;
+    },
     // 默认选中
     defaultChecked (arr, id) {
       const datas = []
@@ -629,12 +640,12 @@ export default {
   min-height: 68vh;
   .part {
     height: 750px;
-    ::v-deep .paren_content {
-      height: 85%;
-      .cont > .paren_content {
-        height: 100% !important;
-      } 
-    }
+    // ::v-deep .paren_content {
+    //   height: 85%;
+    //   .cont > .paren_content {
+    //     height: 100% !important;
+    //   }
+    // }
   }
 }
 </style>