修改账号组新增/编辑页面

src/components/usergrouptree/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-02-09 15:47:09
- * @LastEditTime: 2022-02-18 19:59:34
+ * @LastEditTime: 2022-02-21 07:38:53
  * @LastEditors: your name
  * @Description: 用户组树
  * @FilePath: \Foshan4A4.0\src\components\usergrouptree\index.vue
@@ -11,10 +11,31 @@
     <div class="head">
       <p>{{ title }}</p>
     </div>
-    <div :class="type ? 'radioBg':''" class="content">
-      <el-scrollbar style="height: 100%">
-        <el-tree ref="tree" :data="data" show-checkbox :check-strictly="true" :default-props="defaultProps" :expand-on-click-node="false" node-key="GroupId" default-expand-all highlight-current @check-change="currentChange">
-          <span slot-scope="{ data }" class="custom-tree-node">
+    <div
+      :class="type ? 'radioBg':''"
+      class="content"
+    >
+      <el-scrollbar
+        style="height: 100%"
+        wrap-style="overflow-x:hidden;"
+      >
+        <el-tree
+          ref="tree"
+          :data="data"
+          show-checkbox
+          :check-strictly="true"
+          :default-props="defaultProps"
+          :expand-on-click-node="false"
+          node-key="GroupId"
+          default-expand-all
+          highlight-current
+          @check-change="currentChange"
+        >
+          <span
+            slot-scope="{ data }"
+            class="custom-tree-node"
+            :class="{ 'single-checked': data.GroupId === singleCheckedNodeKey }"
+          >
             {{ data.GroupName }}
           </span>
         </el-tree>
@@ -51,7 +72,7 @@ export default {
       })
     }
   },
-  data () {
+  data() {
     return {
       data: [], // tree数据
       checkedList: [], // 已选中数据
@@ -59,21 +80,31 @@ export default {
       pageSize: 20
     }
   },
+  computed: {
+    singleCheckedNodeKey() {
+      const checkedKeys = this.$refs.tree.getCheckedNodes()
+      if (this.type && checkedKeys.length === 1) {
+        return checkedKeys[0].GroupId
+      } else {
+        return undefined
+      }
+    }
+  },
   watch: {
     checkedKeys: {
-      handler (val) {
+      handler(val) {
         this.checkedList = val
         this.$refs.tree.setCheckedKeys(val)
       },
       deep: true
     }
   },
-  created () {
+  created() {
     this.getGroupTree()
   },
   methods: {
     // 复选框选中
-    currentChange (data, isChecked) {
+    currentChange(data, isChecked) {
       if (this.type) {
         const { GroupId } = data
         this.$emit('getTreeData', this.$refs.tree.getCheckedNodes())
@@ -86,7 +117,7 @@ export default {
         this.$emit('getTreeData', arr)
       }
     },
-    async getGroupTree () {
+    async getGroupTree() {
       const result = await GetGroupTree({
         QueryName: '',
         PageIndex: this.pageIndex,
@@ -151,6 +182,20 @@ export default {
         left: 3px;
       }
     }
+
+    .custom-tree-node {
+      position: relative;
+      &.single-checked::before {
+        content: '';
+        width: 3px;
+        height: 3px;
+        background: #6e81bc;
+        border-radius: 50%;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
   }
 }
 </style>

src/router/routes/routes-file-five.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2022-01-06 10:05:44
- * @LastEditTime: 2022-02-18 18:16:12
+ * @LastEditTime: 2022-02-21 06:02:05
  * @LastEditors: your name
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \src\router\routes\routes-file-five.js
@@ -31,7 +31,7 @@ const accountGroupRoutes = {
         {
           path: 'Add',
           name: 'accountGroupAdd',
-          component: () => import('@/views/accountGroupManagement/components/accountGroupAdd'),
+          component: () => import('@/views/accountGroupManagement/components/accountGroupEdit'),
           meta: {
             title: '新增账号组'
           }
@@ -41,7 +41,8 @@ const accountGroupRoutes = {
           name: 'accountGroupEdit',
           component: () => import('@/views/accountGroupManagement/components/accountGroupEdit'),
           meta: {
-            title: '编辑账号组'
+            title: '编辑账号组',
+            doesGroupExist: true
           }
         }
       ]

src/views/accountGroupManagement/components/accountGroupAdd.vue

@@ -1,43 +1,97 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-02-21 04:13:18
+ * @LastEditTime: 2022-02-21 04:13:19
+ * @LastEditors: your name
+ * @Description: 
+ * have a nice day!
+-->
 <template>
   <div class="accountGroup">
     <div class="addApp-form">
       <div class="addApp-form-title flex">
         <div class="title">新增账号组</div>
         <div class="btn">
-          <el-button @click="saveBtn('form')" type="primary">保存</el-button>
+          <el-button
+            @click="saveBtn('form')"
+            type="primary"
+          >保存</el-button>
         </div>
       </div>
       <div class="addApp-form-content dialog-public-background">
-        <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
-          <el-form-item prop="name" label="账号组名称">
-            <el-input placeholder="请输入账号组名称" maxlength="32" v-model="form.name"></el-input>
+        <el-form
+          :inline="true"
+          ref="form"
+          :rules="rules"
+          class="form"
+          :model="form"
+        >
+          <el-form-item
+            prop="name"
+            label="账号组名称"
+          >
+            <el-input
+              placeholder="请输入账号组名称"
+              maxlength="32"
+              v-model="form.name"
+            ></el-input>
           </el-form-item>
           <el-form-item label="描述">
-            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+            <el-input
+              style="width: 640px"
+              maxlength="200"
+              placeholder="请输入描述"
+              v-model="form.app"
+            ></el-input>
           </el-form-item>
         </el-form>
       </div>
     </div>
     <div class="power-content flex-wrap">
       <div class="r24 flex1 part">
-        <Organization :defaultProps="defaultProps" :data="data" nodekey="GroupId" :checkedKeys="checkedKeys" title="上级账号组" />
+        <Organization
+          :defaultProps="defaultProps"
+          :data="data"
+          nodekey="GroupId"
+          :checkedKeys="checkedKeys"
+          title="上级账号组"
+        />
       </div>
       <!--有角色-->
       <template v-if="OpenRole">
         <div class="r24 flex1 part">
-          <Rolelist title="角色" @checkClick="checkClick" @checkChange="checkChange" :GroupIds="GroupIds" />
+          <Rolelist
+            title="角色"
+            @checkClick="checkClick"
+            @checkChange="checkChange"
+            :GroupIds="GroupIds"
+          />
         </div>
         <div class="flex1 part">
-          <Permissionlist :RoleList="RoleList" :check="true" class="hucPower" title="权限列表" />
+          <Permissionlist
+            :RoleList="RoleList"
+            :check="true"
+            class="hucPower"
+            title="权限列表"
+          />
         </div>
       </template>
       <!--无角色-->
       <template v-else>
         <div class="r24 flex1 part">
-          <Permissiontree :queryType="queryType" :queryId="queryId" @nodeClick="nodeClick" @getTreeData="getTreeData" title="权限树" />
+          <Permissiontree
+            :queryType="queryType"
+            :queryId="queryId"
+            @nodeClick="nodeClick"
+            @getTreeData="getTreeData"
+            title="权限树"
+          />
         </div>
         <div class="flex1 part">
-          <Rulesofcompetency class="hucPower" title="权限规则" />
+          <Rulesofcompetency
+            class="hucPower"
+            title="权限规则"
+          />
         </div>
       </template>
     </div>
@@ -45,36 +99,42 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import Organization from "@/components/organization";
-import Permissiontree from "@/components/permissiontree";
-import Rulesofcompetency from "@/components/rulesofcompetency";
-import Rolelist from "@/components/rolelist";
-import Permissionlist from "@/components/permissionlist";
-import treeData from "../minixs/treeData";
-import { RoleAuths } from "@/api/apiAuthority";
-import { SaveGroup } from "@/api/AccountGroup";
+import { mapGetters } from 'vuex'
+import Organization from '@/components/organization'
+import Permissiontree from '@/components/permissiontree'
+import Rulesofcompetency from '@/components/rulesofcompetency'
+import Rolelist from '@/components/rolelist'
+import Permissionlist from '@/components/permissionlist'
+import treeData from '../minixs/treeData'
+import { RoleAuths } from '@/api/apiAuthority'
+import { SaveGroup } from '@/api/AccountGroup'
 export default {
   name: 'AddAccountGroup',
-  components: { Organization, Permissiontree, Rulesofcompetency, Rolelist, Permissionlist },
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    Rolelist,
+    Permissionlist
+  },
   mixins: [treeData],
-  data () {
+  data() {
     return {
       form: {
         //账号组表单
-        name: "",
-        app: "",
+        name: '',
+        app: ''
       },
       rules: {
         //表单验证
-        name: [{ required: true, message: "请输入账号组名称", trigger: "blur" }],
+        name: [{ required: true, message: '请输入账号组名称', trigger: 'blur' }]
       },
       OpenRole: null,
       AppId: null,
       data: [], //上级权限
       defaultProps: {
-        children: "children",
-        label: "GroupName",
+        children: 'children',
+        label: 'GroupName'
       },
       queryId: '',
       queryType: '',
@@ -84,122 +144,122 @@ export default {
       checkTrees: [], //权限树选中
       GroupIds: [], //角色列表
       checkedKeys: [], //账号组选中
-      RoleList: [], //权限列表
+      RoleList: [] //权限列表
     }
   },
   computed: {
-    ...mapGetters(["systemSet"]),
+    ...mapGetters(['systemSet'])
   },
   watch: {
     //监听上级组织数据
     dataList: {
-      handler (val) {
-        const arr = [val];
-        this.decompose(arr, this.AppId);
-        this.data = [this.dataObj];
-        this.checkedKeys = [this.AppId];
+      handler(val) {
+        const arr = [val]
+        this.decompose(arr, this.AppId)
+        this.data = [this.dataObj]
+        this.checkedKeys = [this.AppId]
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
-  created () {
-    const { GroupId } = this.$route.query;
-    const { OpenRole } = typeof this.systemSet === "string" ? JSON.parse(this.systemSet) : this.systemSet; //1是请求角色 0是请求用户
-    this.OpenRole = OpenRole;
-    this.AppId = GroupId;
+  created() {
+    const { GroupId } = this.$route.query
+    const { OpenRole } = typeof this.systemSet === 'string' ? JSON.parse(this.systemSet) : this.systemSet //1是请求角色 0是请求用户
+    this.OpenRole = OpenRole
+    this.AppId = GroupId
     if (!OpenRole && GroupId != -1) {
-      this.queryId = GroupId;
-      this.queryType = 'group';
+      this.queryId = String(GroupId)
+      this.queryType = 'group'
     }
     if (!OpenRole && GroupId == -1) {
-      this.queryId = '';
-      this.queryType = 'all';
+      this.queryId = ''
+      this.queryType = 'all'
     }
   },
-  mounted () {
+  mounted() {
     if (this.OpenRole) {
-      this.GroupIds = [this.AppId];
+      this.GroupIds = [this.AppId]
     }
   },
   methods: {
     //保存
-    saveBtn (formName) {
-      this.$refs[formName].validate((valid) => {
+    saveBtn(formName) {
+      this.$refs[formName].validate(valid => {
         if (valid) {
-          this.saveAuth();
+          this.saveAuth()
         } else {
-          console.log("error submit!!");
-          return false;
+          console.log('error submit!!')
+          return false
         }
-      });
+      })
     },
     //获取指定数据
-    decompose (data, id) {
+    decompose(data, id) {
       for (let i = 0; i < data.length; i++) {
         if (data[i].GroupId == id) {
           if (data[i].children && data[i].children.length) {
-            delete data[i].children;
+            delete data[i].children
           }
-          this.dataObj = data[i];
+          this.dataObj = data[i]
         } else if (data[i].children && data[i].children.length > 0) {
-          this.decompose(data[i].children, id);
+          this.decompose(data[i].children, id)
         }
       }
     },
     //根据角色查看权限列表
-    async roleAuths (id) {
+    async roleAuths(id) {
       try {
         let params = {
           RoleId: id
-        };
-        const res = await RoleAuths(params);
+        }
+        const res = await RoleAuths(params)
         if (res.code === 0) {
-          this.RoleList = res.returnData;
+          this.RoleList = res.returnData
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
     //角色点击回调
-    checkClick (item) {
-      this.roleAuths(item.RoleId);
+    checkClick(item) {
+      this.roleAuths(item.RoleId)
     },
     //角色选取
-    checkChange (arr) {
-      const arrs = [];
-      arr.forEach((item) => {
+    checkChange(arr) {
+      const arrs = []
+      arr.forEach(item => {
         const RoleC = {
           IsSelected: 1,
           RoleId: item.RoleId,
-          RoleName: item.RoleName,
-        };
-        arrs.push(RoleC);
-      });
-      this.checkRoles = arrs;
+          RoleName: item.RoleName
+        }
+        arrs.push(RoleC)
+      })
+      this.checkRoles = arrs
     },
     //权限树点击
-    nodeClick (obj) {
-      const arr = this.$store.getters.authArrs;
-      arr.push(obj);
-      this.$store.dispatch("auth/changeAuthArrs", arr);
+    nodeClick(obj) {
+      const arr = this.$store.getters.authArrs
+      arr.push(obj)
+      this.$store.dispatch('auth/changeAuthArrs', arr)
     },
     //获取选中的树数据
-    getTreeData (arr) {
-      this.checkTrees = arr;
+    getTreeData(arr) {
+      this.checkTrees = arr
     },
     //获取权限规则
-    getData (obj) {
-      this.rulesObj = obj;
+    getData(obj) {
+      this.rulesObj = obj
     },
     //新增保存
-    async saveAuth () {
-      const datas = [];
+    async saveAuth() {
+      const datas = []
       if (this.checkTrees.length) {
-        this.checkTrees.forEach((item) => {
-          datas.push(item.AuthList);
-        });
+        this.checkTrees.forEach(item => {
+          datas.push(item.AuthList)
+        })
       }
       try {
         const res = await SaveGroup({
@@ -207,20 +267,20 @@ export default {
           GroupDesc: this.form.app,
           GroupUpid: this.AppId,
           AuthList: datas,
-          RoleList: this.checkRoles,
-        });
+          RoleList: this.checkRoles
+        })
         if (res.code === 0) {
-          this.$message.success(res.message);
+          this.$message.success(res.message)
           setTimeout(() => {
-            this.$router.push("/AccountGroup");
-          }, 2000);
+            this.$router.push('/AccountGroup')
+          }, 2000)
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
-    },
+    }
   }
 }
 </script>

src/views/accountGroupManagement/components/accountGroupEdit copy.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="bf-postmanagementadd">
+    <div class="postmanagementadd_header">
+      <div class="postmanagementadd_top">
+        <div class="tltleLeft">编辑账号组</div>
+        <div class="btn" style="margin-top: 20px">
+          <el-button @click="editAuth" type="primary">保存</el-button>
+        </div>
+      </div>
+      <div class="addApp-form-content dialog-public-background">
+        <el-form
+          :inline="true"
+          ref="addFrom"
+          :rules="rules"
+          class="form"
+          :model="addFrom"
+        >
+          <el-form-item prop="name" label="账号组名称">
+            <el-input
+              maxlength="16"
+              placeholder="账号组名称"
+              v-model="addFrom.name"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="描述" style="margin-left: 40px">
+            <el-input
+              style="width: 640px"
+              placeholder="请输入描述"
+              maxlength="200"
+              v-model="addFrom.textarea2"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="content">
+      <!-- 开启角色 -->
+      <el-row :gutter="24" v-if="this.openRole != 0">
+        <el-col :span="8">
+          <div class="part">
+            <Organization
+              title="所属账号组"
+              :data="data"
+              :defaultProps="defaultProps"
+              :checkedKeys="[GroupUpid]"
+              :nodekey="'GroupId'"
+              :checkedIdList="checkedIdList"
+              @getTreeData="getTreeData"
+              :type="true"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <rolelists
+              title="角色列表"
+              @checkChange="checkChange"
+              @checkClick="radioChanges"
+              :checkBoxList="checkRole"
+              :dataList="roleList"
+              :roleType="roleType"
+              :GroupIds="GroupIds"
+              :number="8"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <permissionlist
+              title="权限列表"
+              :RoleList="powerList"
+              :check="true"
+              class="hucPower"
+              @Competen="Competen"
+            />
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 无角色 -->
+      <el-row :gutter="24" v-else>
+        <el-col :span="8">
+          <div class="part">
+            <Organization
+              title="所属账号组"
+              :data="dataObj"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              :checkedKeys="[GroupUpid]"
+              :checkedIdList="checkedIdList"
+              @getTreeData="getTreeData"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Permissiontree
+              @nodeClick="nodeClick"
+              :checkedKeys="powerT"
+              @getTreeData="getTreeDatas"
+              :queryType="queryType"
+              :queryId="queryId"
+              title="权限树"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Rulesofcompetency title="权限规则" />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <Dialog :flag="dialogVisible">
+      <div class="closeDialog">
+        <div class="title">删除账号</div>
+        <div class="content">是否确定要删除该账号？</div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24">取消</el-button>
+          <el-button size="medium" type="danger">删除</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+<script>
+import Organization from "@/components/usergrouptree/index.vue";
+import Permissiontree from "@/components/permissiontree/index.vue";
+import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
+import rolelists from "@/components/rolelist/index.vue";
+import permissionlist from "@/components/permissionlist/index.vue";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { QueryRole, RoleAuths } from "@/api/apiAuthority";
+import {
+  GetGroupDetails,
+  EditGroupAcc,
+  GetRoleByGroup,
+} from "@/api/AccountGroup.js";
+import treeData from "../minixs/treeData";
+
+export default {
+  mixins: [treeData],
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    rolelists,
+    permissionlist,
+    Dialog,
+  },
+  props: {
+    postList: {
+      type: String,
+    },
+    roleData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      roleType:"",
+      checkedAuthList: [],
+      GroupId: this.$route.query.GroupId,
+      GroupUpid: this.$route.query.GroupUpid,
+      butPreser: "保存",
+      dialogVisible: false,
+      OpenRole: 0,
+      OpenGroup: 0,
+      checkRole: [],
+      powerT: [],
+      data: [], //上级账号组
+      checkedIdList: [],
+      checkTrees: [], //上级权限选中的树数据
+      powerTree: [], //选中的权限树数据
+      rulesObj: {}, //权限规则数据
+      roleList: [], //角色
+      checkRoles: [], //选中的角色
+      powerList: [],
+      addFrom: {
+        name: "",
+        textarea2: "",
+        // isUsed: "",
+      },
+      rules: {
+        //表单验证
+        name: [
+          { required: true, message: "请输入账号组名称", trigger: "blur" },
+        ],
+      },
+      defaultProps: {
+        children: "children",
+        label: "GroupName",
+      },
+      treeData1: [],
+      AppId: 0,
+      UpId: 0,
+      dataObj: null,
+      queryId: "",
+      queryType: "group",
+      objID: "",
+      GroupIds:[],
+    };
+  },
+
+  created() {
+    let obj;
+    if (typeof this.$store.state.app.systemSet == "string") {
+      obj = JSON.parse(this.$store.state.app.systemSet);
+    } else {
+      obj = this.$store.state.app.systemSet;
+    }
+    const { OpenRole, OpenGroup } = obj;
+    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) {
+    //   this.queryId = "";
+    //   this.queryType = "all";
+    //   this.RoleBox();
+    // } else {
+    // this.queryRole();
+    // }
+  },
+  watch: {
+    dataList: {
+      handler(val) {
+        const arr = [val];
+        // this.decompose(arr, this.GroupUpid);
+        if (Array.isArray(val)) {
+          this.data = val;
+        } else {
+          this.data = [val];
+        }
+      },
+      deep: true,
+    },
+  },
+
+  methods: {
+    //权限树点击
+    nodeClick(obj) {
+      const arr = this.$store.getters.authArrs;
+      arr.push(obj);
+      this.$store.dispatch("auth/changeAuthArrs", arr);
+    },
+    //获取权限树回调
+    getTreeDatas(arr) {
+      this.checkedAuthList = arr;
+    },
+    //获取选中的树数据
+    getTreeData(arr) {
+      this.checkTrees = arr;
+      if(this.checkTrees.length==1){
+        let id = arr[0].GroupId
+        console.log(id)
+        this.GroupIds = [id]
+        // this.GroupIds = [arr[0].GroupId]
+      }
+    },
+
+    //获取权限规则
+    getData(obj) {
+      this.rulesObj = obj;
+    },
+    //获取指定数据
+    decompose(data, id) {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].GroupId == id) {
+          this.dataObj = data[i];
+          delete this.dataObj.children;
+          this.dataObj = [this.dataObj];
+        } else if (data[i].children && data[i].children.length > 0) {
+          this.decompose(data[i].children, id);
+        }
+      }
+    },
+    //账号组详情
+    async getDeaitls() {
+      try {
+        const res = await GetGroupDetails({
+          GroupId: this.GroupId,
+        });
+        if (res.code === 0) {
+          const { GroupDesc, GroupName, Status, RoleList } = res.returnData;
+          this.addFrom.name = GroupName;
+          this.addFrom.textarea2 = GroupDesc;
+          this.roleList = RoleList;
+          // this.addFrom.isUsed = Status;
+          this.$store.state.auth.authList = res.returnData.AuthList;
+          res.returnData.AuthList.forEach((item) => {
+            this.powerT.push(item.AuthId);
+          });
+          res.returnData.RoleList.forEach((item, index) => {
+            if (item.IsSelected == 1) {
+              this.checkRole.push(item);
+            }
+          });
+          this.checkRoles = this.checkRole;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    async radioChanges(data) {
+      try {
+        let params = {
+          RoleIds: [data.RoleId],
+        };
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.powerList = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //角色列表
+    async queryRole() {
+      try {
+        const res = await GetRoleByGroup({
+          GroupId: this.objID,
+        });
+        if (res.code === 0) {
+          const arr = res.returnData.records;
+          const userArr = [];
+          arr.forEach((item) => {
+            item.name = item.RoleName;
+            if (item.IsSelected == 1) {
+              userArr.push(item);
+            }
+          });
+          // this.roleList = userArr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch {
+        console.log("出错了", error);
+      }
+    },
+    //所有角色列表
+    async RoleBox() {
+      try {
+        const res = await QueryRole({
+          QueryName: "",
+        });
+        if (res.code === 0) {
+          const arr = res.returnData.records;
+          arr.forEach((item) => {
+            item.name = item.RoleName;
+          });
+          // this.roleList = arr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch {
+        console.log("出错了", error);
+      }
+    },
+    //删除账号组
+    // async deleteAuth() {
+    //   this.dialogVisible = true;
+    // },
+    // async delAcc() {
+    //   try {
+    //     const res = await DelAccGroup({
+    //       GroupId: this.GroupId,
+    //     });
+    //     if (res.code === 0) {
+    //       this.$message.success(res.message);
+    //       setTimeout(() => {
+    //         this.$router.push("/AccountGroup");
+    //       }, 2000);
+    //     } else {
+    //       this.$message.error(res.message);
+    //     }
+    //   } catch (error) {
+    //     console.log("出错了", error);
+    //   }
+    // },
+    //获取权限列表
+    async radioChange(data) {
+      try {
+        let params = {
+          RoleId: data,
+        };
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.RoleList = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    Competen(data) {
+      this.$emit("Competen", data);
+    },
+    //账号组修改保存
+    async editAuth() {
+      this.checkedAuthList.forEach((item) => {
+        this.treeData1.push(item.AuthList);
+      });
+      this.treeData1.forEach((item, index) => {
+        this.$store.getters.authArrs.forEach((item2) => {
+          if (item.AuthId == item2.AuthId) {
+            this.treeData1[index] = item2.AuthList;
+          }
+        });
+      });
+      try {
+        const res = await EditGroupAcc({
+          GroupName: this.addFrom.name,
+          GroupDesc: this.addFrom.textarea2,
+          GroupId: this.GroupId,
+          GroupUpid: this.GroupUpid,
+          RoleList: this.checkRoles,
+          AuthList: this.treeData1,
+          // Status: this.addFrom.isUsed,
+        });
+
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          setTimeout(() => {
+            this.$router.push("/AccountGroup");
+          }, 2000);
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //角色选取
+    checkChange(arr) {
+      const datas = [];
+      const arrs = [];
+      for (let i = 0; i < arr.length; i++) {
+        datas.push(this.roleList[arr[i]]);
+      }
+      datas.forEach((item) => {
+        const RoleC = {
+          IsSelected: 1,
+          RoleId: item.RoleId,
+          RoleName: item.RoleName,
+        };
+        arrs.push(RoleC);
+      });
+      this.checkRoles = arrs;
+    },
+  },
+  mounted(){
+    this.roleType = "roleByUpId"
+  }
+};
+</script>
+<style lang="scss">
+.bf-postmanagementadd {
+  width: 100%;
+  padding: 30px 64px;
+  > .postmanagementadd_header {
+    width: 100%;
+    height: 184px;
+    background: #ffffff;
+    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 16px;
+    padding: 0 32px 0 32px;
+    margin-bottom: 24px;
+    > .postmanagementadd_top {
+      width: 100%;
+      height: 88px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+      margin-bottom: 16px;
+
+      .tltleLeft {
+        font-size: 24px;
+        font-weight: bold;
+        color: #303133;
+        margin-top: 20px;
+      }
+      .isUsed {
+        margin-top: 20px;
+        position: absolute;
+        left: 194px;
+        top: 6px;
+      }
+      > .but {
+        height: 40px;
+      }
+    }
+    > .postmanagementadd_list {
+      width: 100%;
+      display: flex;
+      > .list_up {
+        display: flex;
+        margin-right: 40px;
+        > p {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #303133;
+          margin-top: 0;
+          margin-bottom: 0;
+          display: flex;
+          align-items: center;
+          margin-right: 16px;
+        }
+        > .el-input {
+          width: 184px;
+          height: 32px;
+          background: #f9fbff;
+          border-radius: 6px;
+          > .el-input__inner {
+            width: 100%;
+            height: 100%;
+            background: #f9fbff;
+            border-radius: 6px;
+          }
+        }
+        > .el-textarea {
+          width: 640px;
+          height: 33px;
+          border-radius: 4px;
+          .el-textarea__inner {
+            width: 100%;
+            height: 100%;
+            background: #f9fbff;
+            border: 1px solid #d7dae3;
+            border-radius: 4px;
+            resize: none;
+          }
+        }
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 184px);
+    padding-top: 24px;
+    box-sizing: border-box;
+    // .el-row {
+    //   height: 100%;
+    //   .el-col {
+    //     height: 100%;
+    //   }
+    // }
+    .part {
+      width: 100%;
+      height: 856px;
+      background: #ffffff;
+      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 16px;
+    }
+    .last {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    .part2 {
+      width: 100%;
+      height: 512px;
+      background: #ffffff;
+      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 16px;
+    }
+    .part3 {
+      width: 100%;
+      height: 320px;
+      background: #ffffff;
+      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 16px;
+      margin-top: 25px;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/views/accountGroupManagement/components/accountGroupEdit.vue

@@ -3,374 +3,306 @@
     <div class="postmanagementadd_header">
       <div class="postmanagementadd_top">
         <div class="tltleLeft">编辑账号组</div>
-        <div class="btn" style="margin-top: 20px">
-          <el-button @click="editAuth" type="primary">保存</el-button>
+        <div
+          class="btn"
+          style="margin-top: 20px"
+        >
+          <el-button
+            type="primary"
+            @click="handleClickSave('editForm')"
+          >保存</el-button>
         </div>
       </div>
       <div class="addApp-form-content dialog-public-background">
         <el-form
+          ref="editForm"
           :inline="true"
-          ref="addFrom"
           :rules="rules"
           class="form"
-          :model="addFrom"
+          :model="editForm"
         >
-          <el-form-item prop="name" label="账号组名称">
+          <el-form-item
+            prop="name"
+            label="账号组名称"
+          >
             <el-input
-              maxlength="16"
+              v-model="editForm.name"
+              maxlength="32"
               placeholder="账号组名称"
-              v-model="addFrom.name"
-            ></el-input>
+            />
           </el-form-item>
-          <el-form-item label="描述" style="margin-left: 40px">
+          <el-form-item
+            label="描述"
+            style="margin-left: 40px"
+          >
             <el-input
+              v-model="editForm.desc"
               style="width: 640px"
               placeholder="请输入描述"
               maxlength="200"
-              v-model="addFrom.textarea2"
-            ></el-input>
+            />
           </el-form-item>
         </el-form>
       </div>
     </div>
     <div class="content">
-      <!-- 开启角色 -->
-      <el-row :gutter="24" v-if="this.openRole != 0">
+      <el-row :gutter="24">
         <el-col :span="8">
           <div class="part">
-            <Organization
-              title="所属账号组"
-              :data="data"
-              :defaultProps="defaultProps"
-              :checkedKeys="[GroupUpid]"
-              :nodekey="'GroupId'"
-              :checkedIdList="checkedIdList"
-              @getTreeData="getTreeData"
+            <AccountGroupTree
+              title="上级账号组"
+              nodekey="GroupId"
               :type="true"
-            />
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="part">
-            <rolelists
-              title="角色列表"
-              @checkChange="checkChange"
-              @checkClick="radioChanges"
-              :checkBoxList="checkRole"
-              :dataList="roleList"
-              :roleType="roleType"
-              :GroupIds="GroupIds"
-              :number="8"
-            />
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="part">
-            <permissionlist
-              title="权限列表"
-              :RoleList="powerList"
-              :check="true"
-              class="hucPower"
-              @Competen="Competen"
-            />
-          </div>
-        </el-col>
-      </el-row>
-      <!-- 无角色 -->
-      <el-row :gutter="24" v-else>
-        <el-col :span="8">
-          <div class="part">
-            <Organization
-              title="所属账号组"
-              :data="dataObj"
               :defaultProps="defaultProps"
-              :nodekey="'GroupId'"
-              :checkedKeys="[GroupUpid]"
-              :checkedIdList="checkedIdList"
-              @getTreeData="getTreeData"
-            />
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="part">
-            <Permissiontree
-              @nodeClick="nodeClick"
-              :checkedKeys="powerT"
-              @getTreeData="getTreeDatas"
-              :queryType="queryType"
-              :queryId="queryId"
-              title="权限树"
+              :checkedKeys="[GroupUpId]"
+              @getTreeData="getAccountGroupChecked"
             />
           </div>
         </el-col>
-        <el-col :span="8">
-          <div class="part">
-            <Rulesofcompetency title="权限规则" />
-          </div>
-        </el-col>
+        <!-- 开启角色 -->
+        <template v-if="openRole">
+          <el-col :span="8">
+            <div class="part">
+              <RoleList
+                title="角色列表"
+                :checkBoxList="roleListCheckedList"
+                :roleType="roleType"
+                :GroupIds="GroupIds"
+                :number="8"
+                :active="true"
+                @checkChange="getRoleListChecked"
+                @checkClick="selectRole"
+              />
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="part">
+              <PermissionList
+                title="权限列表"
+                class="hucPower"
+                :RoleList="selectedRoles"
+                :check="true"
+                @Competen="Competen"
+              />
+            </div>
+          </el-col>
+        </template>
+        <!-- 无角色 -->
+        <template v-else>
+          <el-col :span="8">
+            <div class="part">
+              <PermissionTree
+                title="权限树"
+                :checkedKeys="permissionTreeChckedKeys"
+                :queryType="queryType"
+                :queryIds="accountGroupTreeCheckedTemp"
+                @getTreeData="getPermissionTreeChecked"
+              />
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="part">
+              <RulesOfCompetency
+                title="权限规则"
+                margin-b="20px"
+                :auth-list="authList"
+                :auth-to="authTo"
+                @getData="getRulesOfCompetency"
+              />
+            </div>
+          </el-col>
+        </template>
       </el-row>
     </div>
-    <Dialog :flag="dialogVisible">
+    <!-- <Dialog :flag="dialogVisible">
       <div class="closeDialog">
         <div class="title">删除账号</div>
         <div class="content">是否确定要删除该账号？</div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24">取消</el-button>
-          <el-button size="medium" type="danger">删除</el-button>
+          <el-button
+            size="medium"
+            class="r24"
+          >取消</el-button>
+          <el-button
+            size="medium"
+            type="danger"
+          >删除</el-button>
         </div>
       </div>
-    </Dialog>
+    </Dialog> -->
   </div>
 </template>
 <script>
-import Organization from "@/components/usergrouptree/index.vue";
-import Permissiontree from "@/components/permissiontree/index.vue";
-import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
-import rolelists from "@/components/rolelist/index.vue";
-import permissionlist from "@/components/permissionlist/index.vue";
-import Dialog from "@/layout/components/Dialog/index.vue";
-import { QueryRole, RoleAuths } from "@/api/apiAuthority";
-import {
-  GetGroupDetails,
-  EditGroupAcc,
-  GetRoleByGroup,
-} from "@/api/AccountGroup.js";
-import treeData from "../minixs/treeData";
+import AccountGroupTree from '@/components/usergrouptree/index.vue'
+import PermissionTree from '@/components/permissiontree/index.vue'
+import RulesOfCompetency from '@/components/rulesofcompetency/index.vue'
+import RoleList from '@/components/rolelist/index.vue'
+import PermissionList from '@/components/permissionlist/index.vue'
+// import Dialog from '@/layout/components/Dialog/index.vue'
+
+import { RoleAuths } from '@/api/apiAuthority'
+import { GetGroupDetails, EditGroupAcc, SaveGroup } from '@/api/AccountGroup.js'
+// import treeData from '../minixs/treeData'
+import { mapGetters } from 'vuex'
 
 export default {
-  mixins: [treeData],
   components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    rolelists,
-    permissionlist,
-    Dialog,
-  },
-  props: {
-    postList: {
-      type: String,
-    },
-    roleData: {
-      type: Array,
-      default: () => [],
-    },
+    AccountGroupTree,
+    PermissionTree,
+    RulesOfCompetency,
+    RoleList,
+    PermissionList
+    // Dialog
   },
+  // mixins: [treeData],
   data() {
     return {
-      roleType:"",
-      checkedAuthList: [],
-      GroupId: this.$route.query.GroupId,
-      GroupUpid: this.$route.query.GroupUpid,
-      butPreser: "保存",
-      dialogVisible: false,
+      doesGroupExist: this.$route.meta.doesGroupExist, // 控制账号组新增/编辑
+      GroupId: 0,
+      GroupUpId: this.$route.query.GroupUpId,
+      // dialogVisible: false,
       OpenRole: 0,
-      OpenGroup: 0,
-      checkRole: [],
-      powerT: [],
-      data: [], //上级账号组
-      checkedIdList: [],
-      checkTrees: [], //上级权限选中的树数据
-      powerTree: [], //选中的权限树数据
-      rulesObj: {}, //权限规则数据
-      roleList: [], //角色
-      checkRoles: [], //选中的角色
-      powerList: [],
-      addFrom: {
-        name: "",
-        textarea2: "",
-        // isUsed: "",
+      authTo: {},
+      authList: [],
+      accountGroupTreeCheckedTemp: [], // 账号组书当前勾选项
+      roleListCheckedList: [], // 角色列表初始勾选项
+      roleListCheckedTemp: [], // 角色列表当前勾选项
+      permissionTreeChckedKeys: [], // 权限树初始勾选项
+      permissionTreeChckedTemp: [], // 权限树当前勾选项
+      rulesOfCompetency: null, // 当前编辑的权限规则
+      queryType: '',
+      roleType: '',
+      currentSelectedRoleId: 0,
+      selectedRoles: [],
+      editForm: {
+        name: '',
+        desc: '',
+        isUsed: ''
       },
       rules: {
-        //表单验证
-        name: [
-          { required: true, message: "请输入账号组名称", trigger: "blur" },
-        ],
+        // 表单验证
+        name: [{ required: true, message: '请输入账号组名称', trigger: 'blur' }]
       },
       defaultProps: {
-        children: "children",
-        label: "GroupName",
-      },
-      treeData1: [],
-      AppId: 0,
-      UpId: 0,
-      dataObj: null,
-      queryId: "",
-      queryType: "group",
-      objID: "",
-      GroupIds:[],
-    };
+        children: 'children',
+        label: 'GroupName'
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['systemSet', 'authArrs']),
+    pageTitle() {
+      return this.doesGroupExist ? '编辑账号组' : '新增账号组'
+    }
   },
-
   created() {
-    let obj;
-    if (typeof this.$store.state.app.systemSet == "string") {
-      obj = JSON.parse(this.$store.state.app.systemSet);
+    let obj
+    if (typeof this.systemSet === 'string') {
+      obj = JSON.parse(this.systemSet)
     } else {
-      obj = this.$store.state.app.systemSet;
-    }
-    const { OpenRole, OpenGroup } = obj;
-    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();
+      obj = this.systemSet
     }
-    // if (this.UpId == -1) {
-    //   this.queryId = "";
-    //   this.queryType = "all";
-    //   this.RoleBox();
-    // } else {
-    // this.queryRole();
-    // }
+    const { OpenRole } = obj
+    this.openRole = OpenRole
+    this.accountGroupTreeCheckedTemp.push(this.GroupUpId)
+    this.queryType = this.GroupUpId === -1 ? 'all' : 'group'
   },
-  watch: {
-    dataList: {
-      handler(val) {
-        const arr = [val];
-        // this.decompose(arr, this.GroupUpid);
-        if (Array.isArray(val)) {
-          this.data = val;
-        } else {
-          this.data = [val];
-        }
-      },
-      deep: true,
-    },
+  mounted() {
+    this.roleType = 'roleByUpId'
+    if (this.doesGroupExist) {
+      this.GroupId = this.$route.query.GroupId
+      this.getGroupDetails()
+    }
   },
-
   methods: {
-    //权限树点击
-    nodeClick(obj) {
-      const arr = this.$store.getters.authArrs;
-      arr.push(obj);
-      this.$store.dispatch("auth/changeAuthArrs", arr);
-    },
-    //获取权限树回调
-    getTreeDatas(arr) {
-      this.checkedAuthList = arr;
-    },
-    //获取选中的树数据
-    getTreeData(arr) {
-      this.checkTrees = arr;
-      if(this.checkTrees.length==1){
-        let id = arr[0].GroupId
-        console.log(id)
-        this.GroupIds = [id]
-        // this.GroupIds = [arr[0].GroupId]
-      }
-    },
-
-    //获取权限规则
-    getData(obj) {
-      this.rulesObj = obj;
-    },
-    //获取指定数据
-    decompose(data, id) {
-      for (let i = 0; i < data.length; i++) {
-        if (data[i].GroupId == id) {
-          this.dataObj = data[i];
-          delete this.dataObj.children;
-          this.dataObj = [this.dataObj];
-        } else if (data[i].children && data[i].children.length > 0) {
-          this.decompose(data[i].children, id);
-        }
-      }
-    },
-    //账号组详情
-    async getDeaitls() {
+    // 账号组详情
+    async getGroupDetails() {
       try {
         const res = await GetGroupDetails({
-          GroupId: this.GroupId,
-        });
+          GroupId: this.GroupId
+        })
         if (res.code === 0) {
-          const { GroupDesc, GroupName, Status, RoleList } = res.returnData;
-          this.addFrom.name = GroupName;
-          this.addFrom.textarea2 = GroupDesc;
-          this.roleList = RoleList;
-          // this.addFrom.isUsed = Status;
-          this.$store.state.auth.authList = res.returnData.AuthList;
-          res.returnData.AuthList.forEach((item) => {
-            this.powerT.push(item.AuthId);
-          });
-          res.returnData.RoleList.forEach((item, index) => {
-            if (item.IsSelected == 1) {
-              this.checkRole.push(item);
-            }
-          });
-          this.checkRoles = this.checkRole;
+          const { GroupDesc, GroupName, Status, AuthList, RoleList } = res.returnData
+          this.editForm.name = GroupName
+          this.editForm.desc = GroupDesc
+          this.editForm.isUsed = Status
+          this.$store.dispatch('auth/changeAuthList', AuthList)
+
+          RoleList &&
+            RoleList.length &&
+            RoleList.forEach(role => {
+              role.IsSelected && this.roleListCheckedList.push(role.RoleId)
+            })
+          this.roleListCheckedTemp = RoleList
+          AuthList &&
+            AuthList.length &&
+            (AuthList.forEach(auth => {
+              this.permissionTreeChckedKeys.push(auth.AuthId)
+            }),
+            (this.authTo = AuthList[0]),
+            (this.authList = this._.cloneDeep(AuthList)))
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
-    async radioChanges(data) {
-      try {
-        let params = {
-          RoleIds: [data.RoleId],
-        };
-        const res = await RoleAuths(params);
-        if (res.code === 0) {
-          this.powerList = res.returnData;
+    // 保存
+    handleClickSave(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.handleSaveEdit()
         } else {
-          this.$message.error(res.message);
+          console.log('error submit!!')
+          return false
         }
-      } catch (error) {
-        console.log("出错了", error);
-      }
+      })
     },
-    //角色列表
-    async queryRole() {
-      try {
-        const res = await GetRoleByGroup({
-          GroupId: this.objID,
-        });
-        if (res.code === 0) {
-          const arr = res.returnData.records;
-          const userArr = [];
-          arr.forEach((item) => {
-            item.name = item.RoleName;
-            if (item.IsSelected == 1) {
-              userArr.push(item);
-            }
-          });
-          // this.roleList = userArr;
-        } else {
-          this.$message.error(res.message);
-        }
-      } catch {
-        console.log("出错了", error);
+    // 获取当前权限树勾选项
+    getPermissionTreeChecked(arr) {
+      this.permissionTreeChckedTemp = arr
+    },
+    // 获取当前勾选的账号组
+    getAccountGroupChecked(arr) {
+      console.log(arr)
+      this.accountGroupTreeCheckedTemp.length = 0
+      if (arr && arr.length && arr[0] !== -1) {
+        this.queryType = 'group'
+        const GroupUpId = arr[0]
+        this.accountGroupTreeCheckedTemp.push(GroupUpId)
+      } else {
+        this.queryType = 'all'
+        this.accountGroupTreeCheckedTemp.push(-1)
       }
     },
-    //所有角色列表
-    async RoleBox() {
+    // 角色选取
+    getRoleListChecked(arr) {
+      this.roleListCheckedTemp = arr
+    },
+    // 获取当前编辑的权限规则
+    getRulesOfCompetency(obj) {
+      this.rulesOfCompetency = obj
+    },
+    // 点击角色后显示对应权限列表
+    async selectRole(data) {
+      if (this.currentSelectedRoleId === data.RoleId) return
       try {
-        const res = await QueryRole({
-          QueryName: "",
-        });
+        const params = {
+          RoleId: data.RoleId
+        }
+        const res = await RoleAuths(params)
         if (res.code === 0) {
-          const arr = res.returnData.records;
-          arr.forEach((item) => {
-            item.name = item.RoleName;
-          });
-          // this.roleList = arr;
+          this.selectedRoles = res.returnData
+          this.currentSelectedRoleId = data.RoleId
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
-      } catch {
-        console.log("出错了", error);
+      } catch (error) {
+        console.log('出错了', error)
       }
     },
-    //删除账号组
+    // 删除账号组
     // async deleteAuth() {
     //   this.dialogVisible = true;
     // },
@@ -391,82 +323,73 @@ export default {
     //     console.log("出错了", error);
     //   }
     // },
-    //获取权限列表
-    async radioChange(data) {
+    // 修改权限规则
+    Competen(data) {
+      console.log(data)
+    },
+    // 账号组编辑保存
+    async handleSaveEdit() {
+      const AuthList = []
+      this.permissionTreeChckedTemp.forEach(item => {
+        AuthList.push(item.AuthList)
+      })
+      AuthList.forEach((item, index) => {
+        this.authArrs.forEach(item2 => {
+          if (item.AuthId === item2.AuthId) {
+            AuthList[index] = item2.AuthList
+          }
+        })
+      })
+      const params = {
+        AuthList,
+        GroupName: this.editForm.name,
+        GroupDesc: this.editForm.desc,
+        GroupUpId: this.accountGroupTreeCheckedTemp[0],
+        RoleList: this.roleListCheckedTemp
+      }
+
+      if (this.doesGroupExist) {
+        this.saveEditGroup({
+          ...params,
+          GroupId: this.GroupId,
+          Status: this.editForm.isUsed
+        })
+      } else {
+        this.saveAddGroup(params)
+      }
+    },
+    async saveEditGroup(params) {
       try {
-        let params = {
-          RoleId: data,
-        };
-        const res = await RoleAuths(params);
+        const res = await EditGroupAcc(params)
         if (res.code === 0) {
-          this.RoleList = res.returnData;
+          this.$message.success(res.message)
+          setTimeout(() => {
+            this.$router.push('/accountGroup')
+          }, 2000)
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
-    Competen(data) {
-      this.$emit("Competen", data);
-    },
-    //账号组修改保存
-    async editAuth() {
-      this.checkedAuthList.forEach((item) => {
-        this.treeData1.push(item.AuthList);
-      });
-      this.treeData1.forEach((item, index) => {
-        this.$store.getters.authArrs.forEach((item2) => {
-          if (item.AuthId == item2.AuthId) {
-            this.treeData1[index] = item2.AuthList;
-          }
-        });
-      });
+    async saveAddGroup(params) {
       try {
-        const res = await EditGroupAcc({
-          GroupName: this.addFrom.name,
-          GroupDesc: this.addFrom.textarea2,
-          GroupId: this.GroupId,
-          GroupUpid: this.GroupUpid,
-          RoleList: this.checkRoles,
-          AuthList: this.treeData1,
-          // Status: this.addFrom.isUsed,
-        });
-
+        const res = await SaveGroup(params)
         if (res.code === 0) {
-          this.$message.success(res.message);
+          this.$message.success(res.message)
           setTimeout(() => {
-            this.$router.push("/AccountGroup");
-          }, 2000);
+            this.$router.push('/accountGroup')
+          }, 2000)
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
-    },
-    //角色选取
-    checkChange(arr) {
-      const datas = [];
-      const arrs = [];
-      for (let i = 0; i < arr.length; i++) {
-        datas.push(this.roleList[arr[i]]);
-      }
-      datas.forEach((item) => {
-        const RoleC = {
-          IsSelected: 1,
-          RoleId: item.RoleId,
-          RoleName: item.RoleName,
-        };
-        arrs.push(RoleC);
-      });
-      this.checkRoles = arrs;
-    },
-  },
-  mounted(){
-    this.roleType = "roleByUpId"
+    }
   }
-};
+}
 </script>
 <style lang="scss">
 .bf-postmanagementadd {

src/views/accountGroupManagement/components/accountGroupHome.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-08 09:27:43
- * @LastEditTime: 2022-01-08 09:27:43
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-02-21 06:40:55
+ * @LastEditors: your name
  * @Description: 用户组管理
  * @FilePath: \Foshan4A2.0\src\views\accountGroupManagement\components\home.vue
 -->
@@ -307,26 +307,19 @@ export default {
     renderAdd(data) {
       this.$router.push({
         path: "/accountGroup/Add",
-        query: { GroupUpid: data.GroupUpid, GroupId: data.GroupId },
+        query: { GroupUpid: data.GroupId },
       });
     },
-    // 新增职员
-    renderMember(data) {
-      this.$message.warning("功能开发中");
-    },
     // 修改组织
     renderEdit(data) {
       this.$router.push({
         path: "/accountGroup/Edit",
-        query: { GroupUpid: data.GroupUpid, GroupId: data.GroupId },
+        query: { GroupUpId: data.GroupUpid, GroupId: data.GroupId },
       });
     },
-    // 新增组织
-    renderSub(data) {
-      this.$router.push({
-        path: "/accountGroup/Add",
-        query: { GroupUpid: data.GroupUpid, GroupId: data.GroupId },
-      });
+    // 新增职员
+    renderMember(data) {
+      this.$message.warning("功能开发中");
     },
     // 关闭开启
     renderChange(data) {

src/views/accountManagement/components/accountEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Badguy
  * @Date: 2022-02-15 11:37:42
- * @LastEditTime: 2022-02-18 19:54:41
+ * @LastEditTime: 2022-02-21 06:29:19
  * @LastEditors: your name
  * @Description: 编辑账号
  * have a nice day!
@@ -165,7 +165,7 @@
             <PermissionList
               title="权限列表"
               class="permission-list"
-              :role-list="permissionList"
+              :role-list="selectedRoles"
               :check="true"
               @Competen="Competen"
             />
@@ -246,7 +246,7 @@
           <div class="content-card content-card-lg">
             <PermissionList
               title="权限列表"
-              :role-list="permissionList"
+              :role-list="selectedRoles"
               :check="true"
               class="permission-list"
               @Competen="Competen"
@@ -307,7 +307,7 @@ export default {
   data() {
     return {
       doesAccountExist: this.$route.meta.doesAccountExist, // 控制账号新增/编辑
-      userId: this.$route.query.userId,
+      userId: '',
       openRole: 0,
       openGroup: 0,
       pwdStruc: '',
@@ -325,20 +325,20 @@ export default {
       roleListCheckedList: [], // 角色列表初始勾选项
       roleListCheckedTemp: [], // 角色列表当前勾选项
       roleType: '',
-      permissionList: [],
+      selectedRoles: [],
       currentSelectedRoleId: 0,
       queryType: '',
       // dialogVisible: false,
       formRules: {
-        UserName: [
+        name: [
           { required: true, message: '请输入账号名称', trigger: 'blur' },
           { min: 1, max: 32, message: '长度在 1到 32 个字符', trigger: 'blur' }
         ],
-        UserPwd: [
+        pwd: [
           { required: true, message: '请输入账号密码', trigger: 'blur' },
           { min: 8, message: '长度最少8个字符', trigger: 'blur' }
         ],
-        UserDesc: [{ min: 1, max: 128, message: '长度最多12个字符', trigger: 'blur' }]
+        desc: [{ min: 1, max: 128, message: '长度最多12个字符', trigger: 'blur' }]
       },
       accountForm: {
         name: null,
@@ -366,7 +366,7 @@ export default {
     } else {
       obj = this.systemSet
     }
-    console.log(obj)
+    // console.log(obj)
     const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
     this.openRole = OpenRole
     this.openGroup = OpenGroup
@@ -378,6 +378,7 @@ export default {
   mounted() {
     this.openRole && (this.roleType = this.openGroup ? 'roleByUpId' : 'onlyRole')
     if (this.doesAccountExist) {
+      this.userId = this.$route.query.userId
       this.getAccountInfo()
     } else {
       this.resetPwd()
@@ -391,11 +392,11 @@ export default {
           UserId: this.userId
         })
         if (res.code === 0) {
-          console.log(res.returnData)
+          // console.log(res.returnData)
           const { UserDesc, UserName, GroupList, TacList, AuthList, RoleList } = res.returnData
           this.accountForm.name = UserName
           this.accountForm.desc = UserDesc
-          // this.$store.state.auth.authList = AuthList
+          this.$store.state.auth.authList = AuthList
 
           AuthList &&
             AuthList.length &&
@@ -436,7 +437,7 @@ export default {
     },
     // 获取当前权限树勾选项
     getPermissionTreeChecked(arr) {
-      console.log(arr)
+      // console.log(arr)
       this.permissionTreeChckedTemp = arr
     },
     // 获取当前编辑的权限规则
@@ -445,7 +446,7 @@ export default {
     },
     // 获取当前勾选的登录策略
     getLoginPolicyChecked(arr) {
-      console.log(arr)
+      // console.log(arr)
       this.loginPolicyCheckedTemp = arr
     },
     // 获取当前勾选的账号组
@@ -470,12 +471,14 @@ export default {
           RoleId: data.RoleId
         }
         const result = await RoleAuths(params)
-        // console.log(result.returnData)
-        this.permissionList = result.returnData
-        this.currentSelectedRoleId = data.RoleId
+        if (result.code === 0) {
+          this.selectedRoles = result.returnData
+          this.currentSelectedRoleId = data.RoleId
+        } else {
+          this.$message.error(result.message)
+        }
       } catch (error) {
-        console.log('RoleAuths')
-        console.log(error)
+        console.log('出错了', error)
       }
     },
     // 修改权限规则

src/views/accountManagement/components/accountHome.vue

@@ -144,7 +144,7 @@ export default {
       accountArr: [],
       deleteUserId: '',
       deleteUserName: '',
-      UserId: '',
+      userId: '',
       GroupId: '',
       GroupUpid: '',
       searchInfo: this.$route.query.keyWords, // 搜索内容
@@ -194,16 +194,20 @@ export default {
       this.pageInit()
     },
     // 修改状态
-    async userActiveToggle(Flag, UserId) {
-      const result = await ChangeUserStatus({
-        Flag,
-        UserId
-      })
-      if (result.code === 0) {
-        this.pageInit()
-        this.$message.success(result.message)
-      } else {
-        this.$message.error(result.$message)
+    async userActiveToggle(flag, userId) {
+      try {
+        const result = await ChangeUserStatus({
+          flag,
+          userId
+        })
+        if (result.code === 0) {
+          this.pageInit()
+          this.$message.success(result.message)
+        } else {
+          this.$message.error(result.$message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
       }
     },
     deleteUser(user) {
@@ -212,10 +216,10 @@ export default {
       this.deleteUserName = user.UserName
     },
     toEdit(userid) {
-      this.UserId = userid
+      this.userId = userid
       this.$router.push({
         path: '/account/accountEdit',
-        query: { userId: this.UserId }
+        query: { userId: this.userId }
       })
     },
     addAccount() {