12

src/components/rolelist/index.vue

@@ -6,12 +6,29 @@
         <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-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="scCont scrollbar" :gutter="16">
+            <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-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>
@@ -26,12 +43,27 @@
         </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-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>
@@ -87,12 +119,12 @@ export default {
       type: String,
       default: "",
     },
-    GroupIds:{
+    GroupIds: {
       type: Array,
       default: () => [],
     },
   },
-  data () {
+  data() {
     return {
       radio: null,
       checkList: [],
@@ -101,103 +133,119 @@ export default {
       msg: null,
       pageSize: 100,
       pageNum: 1,
-      total: '',
-      loading: false
+      total: "",
+      loading: false,
     };
   },
   watch: {
     radioCheck: {
-      handler (num) {
+      handler(num) {
         this.radio = num;
       },
       deep: true,
     },
     roleType: {
-      handler (msg) {
-        if (msg == 'account') {
-          this.getRoleData('UserId');
+      handler(msg) {
+        if (msg == "account") {
+          this.getRoleData("UserId");
         }
-        if (msg == 'roleByUpId') {
-
-          this.getRoleDataByUpId('roleId');
+        if (msg == "roleByUpId") {
+          this.getRoleDataByUpId("roleId");
         }
       },
       deep: true,
     },
     dataList: {
-      handler (arr) {
-        if (this.roleType == 'account') {
-          this.checkBoxs(arr, 'UserId');
+      handler(arr) {
+        if (this.roleType == "account") {
+          this.checkBoxs(arr, "UserId");
         }
       },
       deep: true,
-    }
+    },
+    checkBoxList: {
+      handler(arr) {
+        if (this.roleType == "roleByUpId") {
+          const datas = [];
+          console.log(arr);
+          this.dataList.forEach((item, index) => {
+            arr.forEach((p) => {
+              if (item.RoleId == p.RoleId) {
+                datas.push(index);
+              }
+            });
+          });
+          this.checkList = datas;
+        }
+      },
+      deep: true,
+    },
   },
   computed: {
-    noMore () {
+    noMore() {
       return this.pageNum >= this.total;
     },
-    disabled () {
+    disabled() {
       return this.loading || this.noMore;
-    }
+    },
   },
   methods: {
     // 选中
-    handleBg (item, i) {
+    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);
     },
     //单选框
-    radioChange (val) {
+    radioChange(val) {
       this.$emit("radioChange", val);
     },
     //格式化选中回调
-    formatChecks (arr, key) {
+    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.forEach(item => {
       //   ids.push(item[key])
       // })
       return datas;
     },
     //多选框默认选中
-    checkBoxs (arr, ids) {
-      const datas = []
+    checkBoxs(arr, ids) {
+      const datas = [];
       arr.forEach((item, index) => {
-        this.checkBoxList.forEach(p => {
+        this.checkBoxList.forEach((p) => {
           if (item[ids] == p) {
             datas.push(index);
           }
-        })
-      })
+        });
+      });
       this.checkList = datas;
     },
     //获取列表
-    async getRoleData (ids) {
+    async getRoleData(ids) {
       try {
         this.loading = true;
         const obj = {
-          QueryName: '',
+          QueryName: "",
           PageIndex: this.pageNum,
           PageSize: this.pageSize,
         };
         let result = null;
-        if (this.roleType == 'account') {
+        if (this.roleType == "account") {
           result = await GetAccountList(obj);
         }
         if (result.code === 0) {
@@ -206,8 +254,8 @@ export default {
           this.arrsList.push(datas);
           const arrs = this.arrsList.flat();
           const msgs = _.unionBy(arrs, ids);
-          msgs.forEach(item => {
-            item.name = item.UserName
+          msgs.forEach((item) => {
+            item.name = item.UserName;
           });
           this.dataList = msgs;
           this.total = num;
@@ -223,22 +271,23 @@ export default {
     },
 
     //获取列表2
-    async getRoleDataByUpId (ids) {
+    async getRoleDataByUpId(ids) {
       try {
         this.loading = true;
         const obj = {
-          GroupIds:this.GroupIds
+          GroupIds: this.GroupIds,
         };
         let result = null;
-        if(this.roleType == 'roleByUpId'){
+        if (this.roleType == "roleByUpId") {
           result = await GetRoleByGroup(obj);
         }
         if (result.code === 0) {
           const datas = result.returnData;
-          this.dataList=datas;
-          this.dataList.forEach(item => {
-            item.name = item.RoleName
+          this.dataList = datas;
+          this.dataList.forEach((item) => {
+            item.name = item.RoleName;
           });
+          this.checkBoxs(this.dataList, "RoleId");
           this.loading = false;
         } else {
           this.$message.error(result.message);
@@ -251,12 +300,12 @@ export default {
     },
 
     //滚动加载数据
-    load () {
+    load() {
       this.pageNum += 1;
-      if (this.roleType == 'account') {
-        this.getRoleData('UserId');
+      if (this.roleType == "account") {
+        this.getRoleData("UserId");
       }
-    }
+    },
   },
 };
 </script>

src/views/accountGroupManagement/components/accountGroupEdit.vue

@@ -3,16 +3,7 @@
     <div class="postmanagementadd_header">
       <div class="postmanagementadd_top">
         <div class="tltleLeft">编辑账号组</div>
-        <!-- <div class="isUsed">
-          是否启用
-          <el-radio v-model="addFrom.isUsed" :label="1">是</el-radio>
-          <el-radio v-model="addFrom.isUsed" :label="0">否</el-radio>
-        </div> -->
-
         <div class="btn" style="margin-top: 20px">
-          <!-- <el-button @click="deleteAuth" class="r24" type="danger"
-            >删除</el-button
-          > -->
           <el-button @click="editAuth" type="primary">保存</el-button>
         </div>
       </div>
@@ -49,8 +40,9 @@
           <div class="part">
             <Organization
               title="所属账号组"
-              :data="dataObj"
+              :data="data"
               :defaultProps="defaultProps"
+              :checkedKeys="[GroupUpid]"
               :nodekey="'GroupId'"
               :checkedIdList="checkedIdList"
               @getCheckedData="getTreeData"
@@ -62,9 +54,11 @@
             <rolelists
               title="角色列表"
               @checkChange="checkChange"
-              @radioChanges="radioChanges"
+              @checkClick="radioChanges"
               :checkBoxList="checkRole"
               :dataList="roleList"
+              :roleType="roleType"
+              :GroupIds="GroupIds"
               :number="8"
             />
           </div>
@@ -90,6 +84,7 @@
               :data="dataObj"
               :defaultProps="defaultProps"
               :nodekey="'GroupId'"
+              :checkedKeys="[GroupUpid]"
               :checkedIdList="checkedIdList"
               @getCheckedData="getTreeData"
             />
@@ -135,7 +130,7 @@ import permissionlist from "@/components/permissionlist/index.vue";
 import Dialog from "@/layout/components/Dialog/index.vue";
 import { QueryRole, RoleAuths } from "@/api/apiAuthority";
 import {
-  GetAccTreeDetails,
+  GetGroupDetails,
   EditGroupAcc,
   GetRoleByGroup,
 } from "@/api/AccountGroup.js";
@@ -162,6 +157,7 @@ export default {
   },
   data() {
     return {
+      roleType:"",
       checkedAuthList: [],
       GroupId: this.$route.query.GroupId,
       GroupUpid: this.$route.query.GroupUpid,
@@ -201,6 +197,7 @@ export default {
       queryId: "",
       queryType: "group",
       objID: "",
+      GroupIds:[],
     };
   },
 
@@ -215,12 +212,14 @@ export default {
     this.openRole = OpenRole;
     this.OpenGroup = OpenGroup;
     this.getDeaitls();
+    this.getGroupTree();
     const { GroupUpid } = this.$route.query;
     this.UpId = GroupUpid;
     this.queryId = GroupUpid;
     this.objID = GroupUpid;
     if (OpenRole) {
       this.title = "角色";
+      this.GroupIds = [GroupUpid];
       // this.RoleBox();
     }
     // if (this.UpId == -1) {
@@ -235,7 +234,7 @@ export default {
     dataList: {
       handler(val) {
         const arr = [val];
-        this.decompose(arr, this.GroupUpid);
+        // this.decompose(arr, this.GroupUpid);
         if (Array.isArray(val)) {
           this.data = val;
         } else {
@@ -293,7 +292,7 @@ export default {
     //账号组详情
     async getDeaitls() {
       try {
-        const res = await GetAccTreeDetails({
+        const res = await GetGroupDetails({
           GroupId: this.GroupId,
         });
         if (res.code === 0) {
@@ -322,7 +321,7 @@ export default {
     async radioChanges(data) {
       try {
         let params = {
-          RoleId: data,
+          RoleIds: [data.RoleId],
         };
         const res = await RoleAuths(params);
         if (res.code === 0) {
@@ -469,6 +468,9 @@ export default {
       this.checkRoles = arrs;
     },
   },
+  mounted(){
+    this.roleType = "roleByUpId"
+  }
 };
 </script>
 <style lang="scss">