新增账号组

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

@@ -0,0 +1,498 @@
+<template>
+  <div class="bf-postmanagementadd">
+    <div class="postmanagementadd_header">
+      <div class="postmanagementadd_top">
+        <p>新增账号组</p>
+        <div class="btn">
+          <el-button @click="saveAuth" 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
+              maxlength="200"
+              style="width: 640px"
+              placeholder="请输入描述"
+              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="dataObj"
+              :checkedKeys="[GroupId]"
+              :defaultProps="defaultProps"
+              nodekey="GroupId"
+              @getTreeData="getTreeData"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <rolelist
+              title="角色列表"
+              @checkChange="checkChange"
+              @radioChanges="radioChanges"
+              :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'"
+              @getTreeData="getTreeData"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Permissiontree
+              @nodeClick="nodeClick"
+              @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>
+  </div>
+</template>
+<script>
+import Organization from "@/components/organization/index.vue";
+import Permissiontree from "@/components/permissiontree/index.vue";
+import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
+import loginpolicy from "@/components/loginpolicy/index.vue";
+import rolelist from "@/components/rolelist/index.vue";
+import permissionlist from "@/components/permissionlist/index.vue";
+import { QueryRole, RoleAuths } from "@/api/apiAuthority";
+import { SaveGroup, getUserOne } from "@/api/AccountGroup.js";
+import { mapGetters } from "vuex";
+import treeData from "../minixs/treeData";
+export default {
+  mixins: [treeData],
+  props: {
+    postList: {
+      type: String,
+    },
+    arrs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    loginpolicy,
+    rolelist,
+    permissionlist,
+  },
+  data() {
+    return {
+      roleType:"",
+      checkedAuthList: [],
+      GroupId: this.$route.query.GroupId,
+      butPreser: "保存",
+      openRole: 0,
+      OpenGroup: 0,
+      data: [], //账号组
+      TacList: [], //登录策略
+      AuthList: [], //授权信息
+      roleList: [], //角色
+      checkRoles: [], //选中的角色
+      treeData1: [], //权限树数据
+      powerList: [], //权限列表
+      addFrom: {
+        name: "",
+        textarea2: "",
+      },
+      rules: {
+        //表单验证
+        name: [
+          { required: true, message: "请输入账号组名称", trigger: "blur" },
+        ],
+      },
+      defaultProps: {
+        children: "children",
+        label: "GroupName",
+      },
+      AppId: 0,
+      UpId: 0,
+      dataObj: null,
+      queryId: "",
+      queryType: "group",
+      objID: "",
+      GroupIds:[],
+    };
+  },
+  computed: {
+    ...mapGetters(["systemSet"]),
+  },
+  created() {
+    const { GroupId } = this.$route.query;
+    this.AppId = GroupId;
+    this.UpId = GroupId;
+    this.queryId = GroupId;
+    let obj;
+    this.getGroupTree();
+    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;
+    if (OpenRole) {
+      this.title = "角色";
+      this.GroupIds=[GroupId];
+
+    }
+    if (this.UpId == -1) {
+      this.queryId = "";
+      this.queryType = "all";
+    }
+  },
+  watch: {
+    dataList: {
+      handler(val) {
+        const arr = [val];
+        if (arr.length) {
+          this.decompose(arr, this.UpId);
+        }
+        if (Array.isArray(val)) {
+          this.data = val;
+        } else {
+          this.data = [val];
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    //获取选中的树数据
+    getTreeData(arr) {
+      this.checkTrees = arr;
+      this.checkTrees.forEach((item) => {
+        if (item[0]) {
+          item.disabled = true;
+        }
+      });
+      let objArr = arr[arr.length - 1];
+      this.roleList = [];
+      if (objArr.GroupId != -1) {
+        this.objID = objArr.GroupId + "";
+        this.queryRole();
+      } else {
+        this.RoleBox();
+      }
+    },
+    //获取权限规则
+    getData(obj) {
+      this.rulesObj = obj;
+    },
+    async radioChanges(data) {
+      try {
+        let params = {
+          RoleId: data,
+        };
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.powerList = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //权限树点击
+    nodeClick(obj) {
+      const arr = this.$store.getters.authArrs;
+      arr.push(obj);
+      this.$store.dispatch("auth/changeAuthArrs", arr);
+    },
+    //获取权限树回调
+    getTreeDatas(arr) {
+      this.checkedAuthList = arr;
+    },
+    //获取指定数据
+    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 queryRole() {
+      try {
+        const res = await getUserOne({
+          GroupId: this.objID,
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          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 (error) {
+        console.log("出错了", error);
+      }
+    },
+    //所有角色列表
+    async RoleBox() {
+      try {
+        const res = await QueryRole({
+          QueryName: "",
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          arr.forEach((item) => {
+            item.name = item.RoleName;
+          });
+          this.roleList = arr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    Competen(data) {
+      this.$emit("Competen", data);
+    },
+    //角色选取
+    checkChange(arr) {
+      let datas = [];
+      const arrs = [];
+      datas = arr;
+      datas.forEach((item) => {
+        const RoleC = {
+          IsSelected: 1,
+          RoleId: item.RoleId,
+          RoleName: item.RoleName,
+        };
+        arrs.push(RoleC);
+      });
+      this.checkRoles = arrs;
+    },
+    async saveAuth() {
+      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 SaveGroup({
+          GroupName: this.addFrom.name,
+          GroupDesc: this.addFrom.textarea2,
+          GroupUpid: this.UpId,
+          AuthList: this.treeData1,
+          RoleList: this.checkRoles,
+        });
+        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);
+      }
+    },
+  },
+  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;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      > p {
+        font-size: 24px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #303133;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+      > .but {
+        height: 40px;
+      }
+    }
+    > .postmanagementadd_list {
+      width: 60%;
+      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/accountGroupAdd.vue

@@ -1,318 +1,160 @@
 <template>
-  <div class="bf-postmanagementadd">
-    <div class="postmanagementadd_header">
-      <div class="postmanagementadd_top">
-        <p>新增账号组</p>
+  <div class="accountGroup">
+    <div class="addApp-form">
+      <div class="addApp-form-title flex">
+        <div class="title">新增账号组</div>
         <div class="btn">
-          <el-button @click="saveAuth" 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="addFrom"
-          :rules="rules"
-          class="form"
-          :model="addFrom"
-        >
+        <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
           <el-form-item prop="name" label="账号组名称">
-            <el-input
-              maxlength="16"
-              placeholder="账号组名称"
-              v-model="addFrom.name"
-            ></el-input>
+            <el-input placeholder="请输入账号组名称" maxlength="32" v-model="form.name"></el-input>
           </el-form-item>
-          <el-form-item label="描述" style="margin-left: 40px">
-            <el-input
-              maxlength="200"
-              style="width: 640px"
-              placeholder="请输入描述"
-              v-model="addFrom.textarea2"
-            ></el-input>
+          <el-form-item label="描述">
+            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></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="dataObj"
-              :checkedKeys="[GroupId]"
-              :defaultProps="defaultProps"
-              nodekey="GroupId"
-              @getTreeData="getTreeData"
-            />
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="part">
-            <rolelist
-              title="角色列表"
-              @checkChange="checkChange"
-              @radioChanges="radioChanges"
-              :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'"
-              @getTreeData="getTreeData"
-            />
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="part">
-            <Permissiontree
-              @nodeClick="nodeClick"
-              @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 class="power-content flex-wrap">
+      <div class="r24 flex1 part">
+        <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" />
+        </div>
+        <div class="flex1 part">
+          <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="权限树" />
+        </div>
+        <div class="flex1 part">
+          <Rulesofcompetency class="hucPower" title="权限规则" />
+        </div>
+      </template>
     </div>
   </div>
 </template>
+
 <script>
-import Organization from "@/components/organization/index.vue";
-import Permissiontree from "@/components/permissiontree/index.vue";
-import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
-import loginpolicy from "@/components/loginpolicy/index.vue";
-import rolelist from "@/components/rolelist/index.vue";
-import permissionlist from "@/components/permissionlist/index.vue";
-import { QueryRole, RoleAuths } from "@/api/apiAuthority";
-import { SaveGroup, getUserOne } from "@/api/AccountGroup.js";
 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 },
   mixins: [treeData],
-  props: {
-    postList: {
-      type: String,
-    },
-    arrs: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    loginpolicy,
-    rolelist,
-    permissionlist,
-  },
-  data() {
+  data () {
     return {
-      roleType:"",
-      checkedAuthList: [],
-      GroupId: this.$route.query.GroupId,
-      butPreser: "保存",
-      openRole: 0,
-      OpenGroup: 0,
-      data: [], //账号组
-      TacList: [], //登录策略
-      AuthList: [], //授权信息
-      roleList: [], //角色
-      checkRoles: [], //选中的角色
-      treeData1: [], //权限树数据
-      powerList: [], //权限列表
-      addFrom: {
+      form: {
+        //账号组表单
         name: "",
-        textarea2: "",
+        app: "",
       },
       rules: {
         //表单验证
-        name: [
-          { required: true, message: "请输入账号组名称", trigger: "blur" },
-        ],
+        name: [{ required: true, message: "请输入账号组名称", trigger: "blur" }],
       },
+      OpenRole: null,
+      AppId: null,
+      data: [], //上级权限
       defaultProps: {
         children: "children",
         label: "GroupName",
       },
-      AppId: 0,
-      UpId: 0,
-      dataObj: null,
-      queryId: "",
-      queryType: "group",
-      objID: "",
-      GroupIds:[],
-    };
+      queryId: '',
+      queryType: '',
+      authList: [],
+      checkRoles: [], //角色选中
+      rulesObj: {}, //权限规则
+      checkTrees: [], //权限树选中
+      GroupIds: [], //角色列表
+      checkedKeys: [], //账号组选中
+      RoleList: [], //权限列表
+    }
   },
   computed: {
     ...mapGetters(["systemSet"]),
   },
-  created() {
-    const { GroupId } = this.$route.query;
-    this.AppId = GroupId;
-    this.UpId = GroupId;
-    this.queryId = GroupId;
-    let obj;
-    this.getGroupTree();
-    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;
-    if (OpenRole) {
-      this.title = "角色";
-      this.GroupIds=[GroupId];
-
-    }
-    if (this.UpId == -1) {
-      this.queryId = "";
-      this.queryType = "all";
-    }
-  },
   watch: {
+    //监听上级组织数据
     dataList: {
-      handler(val) {
+      handler (val) {
         const arr = [val];
-        if (arr.length) {
-          this.decompose(arr, this.UpId);
-        }
-        if (Array.isArray(val)) {
-          this.data = val;
-        } else {
-          this.data = [val];
-        }
+        this.decompose(arr, this.AppId);
+        this.data = [this.dataObj];
+        this.checkedKeys = [this.AppId];
       },
       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;
+    if (!OpenRole && GroupId != -1) {
+      this.queryId = GroupId;
+      this.queryType = 'group';
+    }
+    if (!OpenRole && GroupId == -1) {
+      this.queryId = '';
+      this.queryType = 'all';
+    }
+  },
+  mounted () {
+    if (this.OpenRole) {
+      this.GroupIds = [this.AppId];
+    }
+  },
   methods: {
-    //获取选中的树数据
-    getTreeData(arr) {
-      this.checkTrees = arr;
-      this.checkTrees.forEach((item) => {
-        if (item[0]) {
-          item.disabled = true;
-        }
-      });
-      let objArr = arr[arr.length - 1];
-      this.roleList = [];
-      if (objArr.GroupId != -1) {
-        this.objID = objArr.GroupId + "";
-        this.queryRole();
-      } else {
-        this.RoleBox();
-      }
-    },
-    //获取权限规则
-    getData(obj) {
-      this.rulesObj = obj;
-    },
-    async radioChanges(data) {
-      try {
-        let params = {
-          RoleId: data,
-        };
-        const res = await RoleAuths(params);
-        if (res.code === 0) {
-          this.powerList = res.returnData;
+    //保存
+    saveBtn (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.saveAuth();
         } else {
-          this.$message.error(res.message);
+          console.log("error submit!!");
+          return false;
         }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    },
-    //权限树点击
-    nodeClick(obj) {
-      const arr = this.$store.getters.authArrs;
-      arr.push(obj);
-      this.$store.dispatch("auth/changeAuthArrs", arr);
-    },
-    //获取权限树回调
-    getTreeDatas(arr) {
-      this.checkedAuthList = arr;
+      });
     },
     //获取指定数据
-    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;
+          }
           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 queryRole() {
-      try {
-        const res = await getUserOne({
-          GroupId: this.objID,
-        });
-        if (res.code === 0) {
-          const arr = res.returnData;
-          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 (error) {
-        console.log("出错了", error);
-      }
-    },
-    //所有角色列表
-    async RoleBox() {
+    //根据角色查看权限列表
+    async roleAuths (id) {
       try {
-        const res = await QueryRole({
-          QueryName: "",
-        });
+        let params = {
+          RoleId: id
+        };
+        const res = await RoleAuths(params);
         if (res.code === 0) {
-          const arr = res.returnData;
-          arr.forEach((item) => {
-            item.name = item.RoleName;
-          });
-          this.roleList = arr;
+          this.RoleList = res.returnData;
         } else {
           this.$message.error(res.message);
         }
@@ -320,15 +162,14 @@ export default {
         console.log("出错了", error);
       }
     },
-    Competen(data) {
-      this.$emit("Competen", data);
+    //角色点击回调
+    checkClick (item) {
+      this.roleAuths(item.RoleId);
     },
     //角色选取
-    checkChange(arr) {
-      let datas = [];
+    checkChange (arr) {
       const arrs = [];
-      datas = arr;
-      datas.forEach((item) => {
+      arr.forEach((item) => {
         const RoleC = {
           IsSelected: 1,
           RoleId: item.RoleId,
@@ -338,23 +179,34 @@ export default {
       });
       this.checkRoles = arrs;
     },
-    async saveAuth() {
-      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;
-          }
+    //权限树点击
+    nodeClick (obj) {
+      const arr = this.$store.getters.authArrs;
+      arr.push(obj);
+      this.$store.dispatch("auth/changeAuthArrs", arr);
+    },
+    //获取选中的树数据
+    getTreeData (arr) {
+      this.checkTrees = arr;
+    },
+    //获取权限规则
+    getData (obj) {
+      this.rulesObj = obj;
+    },
+    //新增保存
+    async saveAuth () {
+      const datas = [];
+      if (this.checkTrees.length) {
+        this.checkTrees.forEach((item) => {
+          datas.push(item.AuthList);
         });
-      });
+      }
       try {
         const res = await SaveGroup({
-          GroupName: this.addFrom.name,
-          GroupDesc: this.addFrom.textarea2,
-          GroupUpid: this.UpId,
-          AuthList: this.treeData1,
+          GroupName: this.form.name,
+          GroupDesc: this.form.app,
+          GroupUpid: this.AppId,
+          AuthList: datas,
           RoleList: this.checkRoles,
         });
         if (res.code === 0) {
@@ -369,130 +221,61 @@ export default {
         console.log("出错了", error);
       }
     },
-  },
-  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;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 16px;
-      > p {
-        font-size: 24px;
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #303133;
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-      > .but {
-        height: 40px;
+
+<style lang="scss" scoped>
+.accountGroup {
+  padding: 0 64px;
+  padding-top: 32px;
+}
+.addApp-form {
+  background: #ffffff;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 16px;
+  padding: 32px 32px 40px 32px;
+  .title {
+    font-size: 24px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+    .isqy {
+      span {
+        font-weight: 400;
+        font-size: 14px;
+        margin: 0 28px 0 42px;
       }
     }
-    > .postmanagementadd_list {
-      width: 60%;
-      display: flex;
-
-      > .list_up {
-        display: flex;
+  }
+  .addApp-form-content {
+    margin-top: 40px;
+    ::v-deep .form {
+      .el-form-item {
+        margin-bottom: 0;
         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-input__inner {
+        height: 32px;
+        line-height: 32px;
+        min-width: 184px;
+      }
+      .content {
+        .el-form-item__content {
+          flex: 1;
         }
-        > .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;
-          }
+        .el-form-item__label {
+          margin-left: 27px;
         }
       }
     }
   }
-  .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;
-    }
+}
+.power-content {
+  margin-top: 24px;
+  // min-height: 58vh;
+  .part {
+    height: 704px;
   }
 }
 </style>

src/views/accountGroupManagement/minixs/treeData.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-22 17:00:22
- * @LastEditTime: 2022-01-06 16:10:10
+ * @LastEditTime: 2022-02-18 10:08:43
  * @LastEditors: Please set LastEditors
  * @Description: 获取权限树
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\treeData.js
@@ -10,7 +10,7 @@ import { translateDataToTreeAll } from '@/utils/validate'
 import { GetGroupTree } from '@/api/AccountGroup'
 
 export default {
-  data() {
+  data () {
     return {
       dataList: {
         GroupId: -1,
@@ -25,11 +25,11 @@ export default {
       dataArr: []
     }
   },
-  created() {
-    // this.getGroupTree()
+  created () {
+    this.getGroupTree()
   },
   methods: {
-    async getGroupTree(name = '') {
+    async getGroupTree (name = '') {
       try {
         const result = await GetGroupTree({
           "QueryName": name