岗位管理修改

src/components/rolelist/index.vue

@@ -2,17 +2,43 @@
   <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>
@@ -24,19 +50,43 @@
             </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>
@@ -50,68 +100,71 @@
         </div>
       </template>
       <template v-else>
-        <el-empty :imageSize="imageSize" description="暂无数据"></el-empty>
+        <el-empty
+          :imageSize="imageSize"
+          description="暂无数据"
+        ></el-empty>
       </template>
     </div>
   </div>
 </template>
 <script>
-import { GetAccountList } from "@/api/Account";
-import { GetRoleByGroup } from "@/api/AccountGroup";
-import { QueryRole } from '@/api/apiAuthority';
+import { GetAccountList } from '@/api/Account'
+import { GetRoleByGroup } from '@/api/AccountGroup'
+import { QueryRole } from '@/api/apiAuthority'
 export default {
   props: {
     title: {
       type: String,
-      default: "",
+      default: ''
     },
     type: {
       type: Boolean,
-      default: false,
+      default: false
     },
     number: {
       type: Number,
-      default: 3,
+      default: 3
     },
     active: {
       type: Boolean,
-      default: false,
+      default: false
     },
     checkBoxList: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     mainData: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     radioCheck: {
       type: Number,
-      default: 0,
+      default: 0
     },
     imageSize: {
       type: Number,
-      default: 200,
+      default: 200
     },
     roleType: {
       type: String,
-      default: "",
+      default: ''
     },
     needType: {
       type: String,
-      default: "",
+      default: ''
     },
     queryAll: {
       type: String,
-      default: "",
+      default: ''
     },
     needId: [String, Number],
     GroupIds: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
-  data () {
+  data() {
     return {
       radio: null,
       checkList: [],
@@ -120,82 +173,83 @@ export default {
       msg: null,
       pageSize: 100,
       pageNum: 1,
-      total: "",
+      total: '',
       loading: false,
       asyncData: [],
       msgDatas: [],
       OpenGroup: null
-    };
+    }
   },
   watch: {
     radioCheck: {
-      handler (num) {
-        this.radio = num;
+      handler(num) {
+        this.radio = num
       },
-      deep: true,
+      deep: true
     },
     roleType: {
-      handler (msg) {
-        const obj = {};
-        obj[msg] = msg;
-        this.msgDatas.push(obj);
+      handler(msg) {
+        const obj = {}
+        obj[msg] = msg
+        this.msgDatas.push(obj)
       },
-      deep: true,
+      deep: true
     },
     dataList: {
-      handler (arr) {
+      handler(arr) {
         if (arr && arr.length) {
-          this.asyncData.push(true);
+          this.asyncData.push(true)
         }
       },
-      deep: true,
+      deep: true
     },
     checkBoxList: {
-      handler (arr) {
+      handler(arr) {
         if (arr && arr.length) {
-          this.asyncData.push(true);
+          this.asyncData.push(true)
         }
       },
-      deep: true,
+      deep: true
     },
     asyncData: {
-      handler (arr) {
+      handler(arr) {
         if (arr && arr.length >= 2) {
-          if (this.roleType == "account") {
-            this.checkBoxs("UserId");
+          if (this.roleType == 'account') {
+            this.checkBoxs('UserId')
           }
-          if (this.roleType == "onlyRole" || this.roleType == 'roleByUpId') {
-            this.checkBoxs("RoleId");
+          if (this.roleType == 'onlyRole' || this.roleType == 'roleByUpId' || this.roleType === 'groups') {
+            this.checkBoxs('RoleId')
           }
         }
       },
       deep: true
     },
     GroupIds: {
-      handler () {
-        const obj = {};
-        obj['GroupIds'] = 'GroupIds';
-        this.msgDatas.push(obj);
+      handler() {
+        const obj = {}
+        obj['GroupIds'] = 'GroupIds'
+        this.msgDatas.push(obj)
       },
       deep: true
     },
     msgDatas: {
-      handler (arr) {
+      handler(arr) {
         if (arr && arr.length >= 2) {
           if (this.queryAll) {
-              this.getRoleData('RoleId', 'RoleName');
+            this.getRoleData('RoleId', 'RoleName')
+          } else {
+            this.getRoleDataByUpId()
           }
-          this.getRoleDataByUpId();
         } else {
           if (this.roleType == 'account') {
-            this.getRoleData('UserId', 'UserName');
+            this.getRoleData('UserId', 'UserName')
           }
           if (!this.OpenGroup || this.needType) {
-            if (this.roleType == "roleByUpId") {
-              this.getRoleDataByUpId("roleId");
+            if (this.roleType == 'roleByUpId') {
+              this.getRoleDataByUpId('roleId')
             }
-            if (this.roleType == "onlyRole") {
-              this.getRoleData('RoleId', 'RoleName');
+            if (this.roleType == 'onlyRole') {
+              this.getRoleData('RoleId', 'RoleName')
             }
           }
         }
@@ -204,180 +258,181 @@ export default {
     }
   },
   computed: {
-    noMore () {
-      return this.pageNum >= this.total;
-    },
-    disabled () {
-      return this.loading || this.noMore;
+    noMore() {
+      return this.pageNum >= this.total
     },
+    disabled() {
+      return this.loading || this.noMore
+    }
   },
-  created () {
-    const obj = this.$store.state.app.systemSet;
-    const { OpenGroup } = typeof obj === 'string' ? JSON.parse(obj) : obj;
-    this.OpenGroup = OpenGroup;
+  created() {
+    const obj = this.$store.state.app.systemSet
+    const { OpenGroup } = typeof obj === 'string' ? JSON.parse(obj) : obj
+    this.OpenGroup = OpenGroup
   },
   methods: {
     // 选中
-    handleBg (item, i) {
-      this.msg = i;
-      this.$emit("checkClick", item);
+    handleBg(item, i) {
+      this.msg = i
+      this.$emit('checkClick', item)
     },
     //多选框
-    checkChange (arr) {
-      const datas = this.formatChecks(arr);
+    checkChange(arr) {
+      const datas = this.formatChecks(arr)
       // if (this.roleType == 'account') {
       //   datas = this.formatChecks(arr, 'UserId');
       // }
-      this.$emit("checkChange", datas);
+      this.$emit('checkChange', datas)
     },
     //单选框
-    radioChange (val) {
-      this.$emit("radioChange", val);
+    radioChange(val) {
+      this.$emit('radioChange', val)
     },
     //格式化选中回调
-    formatChecks (arr, key) {
-      const datas = [];
+    formatChecks(arr, key) {
+      const datas = []
       // const ids = []
       this.dataList.forEach((item, index) => {
-        arr.forEach((p) => {
+        arr.forEach(p => {
           if (index == p) {
-            datas.push(item);
+            datas.push(item)
           }
-        });
-      });
+        })
+      })
       // datas.forEach(item => {
       //   ids.push(item[key])
       // })
-      return datas;
+      return datas
     },
     //多选框默认选中
-    checkBoxs (ids) {
-      const datas = [];
-      const type = typeof this.checkBoxList[0];
+    checkBoxs(ids) {
+      const datas = []
+      const type = typeof this.checkBoxList[0]
       if (type == 'object') {
         this.dataList.forEach((item, index) => {
-          this.checkBoxList.forEach((p) => {
+          this.checkBoxList.forEach(p => {
             if (item[ids] == p[ids]) {
-              datas.push(index);
+              datas.push(index)
             }
-          });
-        });
+          })
+        })
       } else {
         this.dataList.forEach((item, index) => {
-          this.checkBoxList.forEach((p) => {
+          this.checkBoxList.forEach(p => {
             if (item[ids] == p) {
-              datas.push(index);
+              datas.push(index)
             }
-          });
-        });
+          })
+        })
       }
-      this.checkList = datas;
+      this.checkList = datas
     },
-    checkRole () {
-      const datas = [];
+    checkRole() {
+      const datas = []
       this.dataList.forEach((item, index) => {
-        this.checkBoxList.forEach((p) => {
+        this.checkBoxList.forEach(p => {
           if (item.RoleId == p.RoleId) {
-            datas.push(index);
+            datas.push(index)
           }
-        });
-      });
-      this.checkList = datas;
+        })
+      })
+      this.checkList = datas
     },
     //获取列表
-    async getRoleData (ids, names) {
+    async getRoleData(ids, names) {
       try {
-        this.loading = true;
+        this.loading = true
         const obj = {
-          QueryName: "",
+          QueryName: '',
           PageIndex: this.pageNum,
-          PageSize: this.pageSize,
-        };
-        let result = null;
-        if (this.roleType == "account") {
-          result = await GetAccountList(obj);
+          PageSize: this.pageSize
+        }
+        let result = null
+        if (this.roleType == 'account') {
+          result = await GetAccountList(obj)
         }
-        if (this.roleType == "onlyRole") {
-          result = await QueryRole(obj);
+        if (this.roleType == 'onlyRole') {
+          result = await QueryRole(obj)
         }
         if (result.code === 0) {
-          const datas = result.returnData.records;
-          const num = result.returnData.pages;
-          this.arrsList.push(datas);
-          const arrs = this.arrsList.flat();
-          const msgs = _.unionBy(arrs, ids);
+          const datas = result.returnData.records
+          const num = result.returnData.pages
+          this.arrsList.push(datas)
+          const arrs = this.arrsList.flat()
+          const msgs = _.unionBy(arrs, ids)
           msgs.forEach(item => {
             item.name = item[names]
-          });
+          })
           if (this.needId) {
-            const yrts = msgs.filter(item => item.RoleId != this.needId);
-            this.dataList = yrts;
+            const yrts = msgs.filter(item => item.RoleId != this.needId)
+            this.dataList = yrts
           } else {
-            this.dataList = msgs;
+            this.dataList = msgs
           }
-          this.total = num;
-
-          this.loading = false;
+          this.total = num
+          this.loading = false
+          this.$emit('role-list-change', msgs)
         } else {
-          this.$message.error(result.message);
-          this.loading = false;
+          this.$message.error(result.message)
+          this.loading = false
         }
       } catch (error) {
-        console.log("出错了", error);
-        this.loading = false;
+        console.log('出错了', error)
+        this.loading = false
       }
     },
 
     //获取列表2
-    async getRoleDataByUpId () {
+    async getRoleDataByUpId() {
       try {
-        this.loading = true;
+        this.loading = true
         const obj = {
           GroupIds: this.GroupIds
-        };
-        const result = await GetRoleByGroup(obj);
+        }
+        const result = await GetRoleByGroup(obj)
         if (result.code === 0) {
-          const datas = result.returnData;
-          const msgs = [];
+          const datas = result.returnData
+          const msgs = []
           if (datas.length) {
             datas.forEach(item => {
               item.name = item.RoleName
               if (item.IsSelected) {
-                msgs.push(item);
+                msgs.push(item)
               }
             })
-            this.dataList = msgs;
+            this.dataList = msgs
           } else {
-            this.dataList = msgs;
+            this.dataList = msgs
           }
+          this.$emit('role-list-change', msgs)
           // this.checkBoxs(this.dataList, "RoleId");
-          this.loading = false;
+          this.loading = false
         } else {
-          this.$message.error(result.message);
-          this.loading = false;
+          this.$message.error(result.message)
+          this.loading = false
         }
       } catch (error) {
-        console.log("出错了", error);
-        this.loading = false;
+        console.log('出错了', error)
+        this.loading = false
       }
     },
 
     //滚动加载数据
-    load () {
-      this.pageNum += 1;
+    load() {
+      this.pageNum += 1
       if (this.roleType == 'account') {
-        this.getRoleData('UserId', 'UserName');
+        this.getRoleData('UserId', 'UserName')
       }
       if (this.roleType == 'onlyRole') {
-        this.getRoleData('RoleId', 'RoleName');
+        this.getRoleData('RoleId', 'RoleName')
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./rolelist.scss";
+@import './rolelist.scss';
 .paren_content {
   ::v-deep .el-radio__label {
     display: none;

src/views/accountGroupManagement/components/accountGroupEdit.vue

@@ -76,6 +76,7 @@
                 :active="true"
                 @checkChange="getRoleListChecked"
                 @checkClick="selectRole"
+                @role-list-change="roleListCheckedFilter"
               />
             </div>
           </el-col>
@@ -166,7 +167,7 @@ export default {
       accountGroupTreeCheckedList: [], // 岗位树初始勾选项
       accountGroupTreeCheckedTemp: [], // 岗位树当前勾选项
       roleListCheckedList: [], // 角色列表初始勾选项
-      roleListCheckedListCopy: [],
+      roleListCheckedCopy: [],
       roleListCheckedTemp: [], // 角色列表当前勾选项
       permissionTreeChckedKeys: [], // 权限树初始勾选项
       permissionTreeChckedTemp: [], // 权限树当前勾选项
@@ -248,7 +249,7 @@ export default {
             RoleList.forEach(role => {
               role.IsSelected &&
                 (this.roleListCheckedTemp.push(role),
-                this.roleListCheckedListCopy.push(role),
+                this.roleListCheckedCopy.push(role),
                 this.roleListCheckedList.push(role.RoleId))
             })
           AuthList &&
@@ -285,35 +286,41 @@ export default {
     },
     // 获取当前权限树勾选项
     getPermissionTreeChecked(arr) {
-      // console.log(arr)
       this.permissionTreeChckedTemp = arr.map(auth => auth.AuthList)
     },
     // 获取当前勾选的岗位
     getAccountGroupChecked(arr) {
-      console.log(arr)
       if (arr.length === 1 && arr[0] !== -1) {
+        console.log(arr[0])
         const GroupIds = arr.map(item => item.GroupId)
         this.accountGroupTreeCheckedTemp = GroupIds
         this.needType = ''
         this.queryAll = ''
-        this.roleType = ''
+        this.roleType = 'groups'
         this.groupIds = GroupIds
         this.queryType = 'group'
         this.queryIds = GroupIds
       } else if (arr.length === 0) {
-        console.log(1)
         this.accountGroupTreeCheckedTemp = [-1]
+        this.accountGroupTreeCheckedList = [-1]
         this.queryAll = 'yes'
         this.needType = 'yes'
         this.roleType = 'onlyRole'
-        this.roleListCheckedList = this.roleListCheckedListCopy.map(role => role.RoleId)
+        this.roleListCheckedList = this.roleListCheckedCopy.map(role => role.RoleId)
         this.queryType = 'all'
       }
     },
     // 角色选取
     getRoleListChecked(arr) {
       this.roleListCheckedTemp = arr
-      this.roleListCheckedListCopy = arr
+      this.roleListCheckedCopy = arr
+    },
+    roleListCheckedFilter(arr) {
+      this.roleListCheckedTemp = this.roleListCheckedCopy.filter(
+        role => arr.findIndex(item => item.RoleId === role.RoleId) > -1
+      )
+      this.roleListCheckedList = this.roleListCheckedCopy.map(role => role.RoleId)
+      console.log(this.roleListCheckedTemp)
     },
     // 获取当前编辑的权限规则
     getRulesOfCompetency(obj) {