Merge branch 'master' of http://120.26.64.82:3000/BFFE/Foshan4A4.0

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

@@ -15,25 +15,32 @@ const accountGroupRoutes = {
   children: [{
     path: 'accountGroup',
     component: () => import('@/views/accountGroupManagement/index'),
-    meta: { title: '权限组管理' },
-    children: [
-      {
+    meta: {
+      title: '账号组管理'
+    },
+    children: [{
         path: '/',
         name: 'accountGroupHome',
         component: () => import('@/views/accountGroupManagement/components/accountGroupHome'),
-        meta: { title: '权限组管理' }
+        meta: {
+          title: '账号组管理'
+        }
       },
       {
         path: 'Add',
         name: 'accountGroupAdd',
         component: () => import('@/views/accountGroupManagement/components/accountGroupAdd'),
-        meta: { title: '新增权限组' }
+        meta: {
+          title: '新增账号组'
+        }
       },
       {
         path: 'Edit',
         name: 'accountGroupEdit',
         component: () => import('@/views/accountGroupManagement/components/accountGroupEdit'),
-        meta: { title: '编辑权限组' }
+        meta: {
+          title: '编辑账号组'
+        }
       }
     ]
   }]
@@ -44,31 +51,31 @@ const accountRoutes = {
   component: Layout,
   redirect: '/dashboard',
   children: [{
-    path: 'account',
-    name:"account",
-    component: () => import('@/views/accountManagement/index'),
-    meta: { title: '账号管理' },
-    children: [
-      {
-        path: '/',
-        name: 'accountHome',
-        component: () => import('@/views/accountManagement/components/accountsHome'),
-        meta: { title: '账号管理' }
-      },
-      {
-        path: 'accountAdd',
-        name: 'accountAdd',
-        component: () => import('@/views/accountManagement/components/accountsAdd'),
-        meta: { title: '新增账号' }
-      },
-      {
-        path: 'accountEdit',
-        name: 'accountEdit',
-        component: () => import('@/views/accountManagement/components/accountsEdit'),
-        meta: { title: '编辑账号' }
+      path: 'account',
+      name: "account",
+      component: () => import('@/views/accountManagement/index'),
+      meta: {
+        title: '账号管理'
       }
-    ]
-  }]
+    },
+    {
+      path: 'accountAdd',
+      name: 'accountAdd',
+      component: () => import('@/views/accountManagement/add'),
+      meta: {
+        title: '新增账号'
+      }
+    },
+    {
+      path: 'accountEdit',
+      name: 'accountEdit',
+      component: () => import('@/views/accountManagement/edit'),
+      meta: {
+        title: '编辑账号'
+      }
+    }
+
+  ]
 }
 
 export default [

src/views/accountGroupManagement/components/accountGroupAdd.vue

@@ -1,83 +1,102 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-29 11:26:07
- * @LastEditTime: 2022-01-17 13:46:35
- * @LastEditors: Please set LastEditors
- * @Description:编辑权限组
- * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityPower.vue
--->
- <template>
-  <div class="pageBody">
-    <div class="topPart">
-      <div class="title">
-        <div class="tltleLeft">新增权限组</div>
-        <!-- <div class="isUsed">
-          是否启用
-          <el-radio
-            v-model="FormData.isUsed"
-            v-if="FormData.isUsed == 1 || form.isUsed == 3"
-            :label="1"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" v-if="FormData.isUsed == 2" :label="2"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" :label="3">否</el-radio>
-        </div> -->
-        <div>
-          <!-- <button type="submmit" class="delBtn" @click="delate">删除</button> -->
-          <button type="submmit" class="saveBtn" @click="saveGroup()">
-            保存
-          </button>
+<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="titleContent">
-        <el-form ref="form" :model="FormData" label-width="90px">
-          <el-row :gutter="40">
-            <el-col :span="5">
-              <el-form-item label="权限组名称" prop="name">
-                <el-input v-model="FormData.GroupName" maxlength="32" placeholder="请输入权限组名称" size="small"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="10">
-              <el-form-item label="描述" prop="diesc">
-                <el-input v-model="FormData.GroupDesc" maxlength="128" placeholder="描述内容" size="small"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+      <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="25">
-        <el-col :span="24" v-if="systemSet.UserOfficerMulti != 0">
+      <!-- 开启角色 -->
+      <el-row :gutter="24" v-if="this.openRole != 0">
+        <el-col :span="8">
           <div class="part">
-            <Organization title="上级权限组" :data="dataList" :defaultProps="defaultProps" :nodekey="'GroupId'" @getCheckedData="getOrganTreeData" :checkedKeys="checkedIdList" />
+            <Organization
+              title="上级账号组"
+              :data="dataObj"
+              :defaultProps="defaultProps"
+              nodekey="GroupId"
+              @getTreeData="getTreeData"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <Organization title="上级权限组" :data="GroupData" :defaultProps="defaultProps" :nodekey="'GroupId'" :checkedKeys="checkedIdList" />
+            <rolelist
+              title="角色列表"
+              @checkChange="checkChange"
+              @radioChanges="radioChanges"
+              :dataList="roleList"
+              :number="8"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <Permissiontree @getTreeData="getAuthTreeData" :checkedKeys="checkedAuthKeys" :queryType="queryType" :queryId="GroupUpid" title="权限树" />
+            <permissionlist
+              title="权限列表"
+              :RoleList="powerList"
+              :check="true"
+              class="hucPower"
+              @Competen="Competen"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0">
+      </el-row>
+      <!-- 无角色 -->
+      <el-row :gutter="24" v-else>
+        <el-col :span="8">
           <div class="part">
-            <Rulesofcompetency title="权限规则" />
+            <Organization
+              title="上级账号组"
+              :data="dataObj"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              @getTreeData="getTreeData"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <rolelist title="角色列表" @checkChange="checkRoleChange" :dataList="groupRoleList" :checkBoxList="checkedRoleKeys" @checkClick="roleClick" :number="8" />
+            <Permissiontree
+              @nodeClick="nodeClick"
+              @getTreeData="getTreeDatas"
+              :queryType="queryType"
+              :queryId="queryId"
+              title="权限树"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <permissionlist title="权限列表" :RoleList="powerList" :check="true" class="hucPower" @Competen="Competen" />
+            <Rulesofcompetency title="权限规则" />
           </div>
         </el-col>
       </el-row>
@@ -85,274 +104,346 @@
   </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 Organization from "@/components/organization/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 { AddAccGroup, getUserOne } from "@/api/AccountGroup.js";
+import { mapGetters } from "vuex";
 import treeData from "../minixs/treeData";
-import roleData from "../minixs/roleData";
-
-import { GetGroupDetails, SaveGroup } from "@/api/AccountGroup";
-import { RoleAuths } from "@/api/apiAuthority";
-
 export default {
-  data () {
+  mixins: [treeData],
+  props: {
+    postList: {
+      type: String,
+    },
+    roleData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    loginpolicy,
+    rolelist,
+    permissionlist,
+  },
+  data() {
     return {
-      queryType: "group",
-      systemSet: null, //系统设置
-      FormData: {
-        GroupName: "",
-        AuthList: [],
-        GroupDesc: "",
-        GroupUpid: 0,
-        RoleList: [],
+      checkedAuthList: [],
+      GroupId: this.$route.query.GroupId,
+      butPreser: "保存",
+      openRole: 0,
+      OpenGroup: 0,
+      data: [], //账号组
+      TacList: [], //登录策略
+      AuthList: [], //授权信息
+      roleList: [], //角色
+      checkRoles: [], //选中的角色
+      treeData1: [], //权限树数据
+      powerList: [], //权限列表
+      addFrom: {
+        name: "",
+        textarea2: "",
       },
       rules: {
-        GroupName: [
-          { required: true, message: "请输入上级权限组名称", trigger: "blur" },
-          {
-            min: 1,
-            max: 16,
-            message: "长度在 1 到 16 个字符",
-            trigger: "blur",
-          },
+        //表单验证
+        name: [
+          { required: true, message: "请输入账号组名称", trigger: "blur" },
         ],
       },
       defaultProps: {
         children: "children",
         label: "GroupName",
       },
-      listData: [], //上级权限组树
-      GroupUpid: "-1", //所属权限组ID
-      GroupData: [], //所属权限组详情
-      checkedIdList: [], //选中权限组树
-      AuthList: [], //选中权限（包含规则组）
-      RoleList: [], //选中角色组
-      checkedAuthKeys: [],
-      checkedRoleKeys: [],
-      groupRoleList: [], //所属权限组角色列表
-      powerList: [], //角色权限列表
+      AppId: 0,
+      UpId: 0,
+      dataObj: null,
+      queryId: "",
+      queryType: "group",
+      objID: "",
     };
   },
-  mixins: [treeData, roleData],
-  watch: {
-    arrs: {
-      handler (arr) {
-        arr.forEach((item) => {
-          item.name = item.RoleName;
-          if (this.GroupUpid == -1) {
-            if (
-              item.IsSelected == 0 &&
-              _.indexOf(this.groupRoleList, item) == -1
-            ) {
-              this.groupRoleList.push(item);
-            }
-          } else {
-            if (
-              item.IsSelected == 1 &&
-              _.indexOf(this.groupRoleList, item) == -1
-            ) {
-              this.groupRoleList.push(item);
-            }
-          }
-        });
-        this.checkedRoleKeys = [];
-        this.RoleList.forEach((item) => {
-          this.groupRoleList.forEach((value, index) => {
-            if (item.RoleId == value.RoleId) {
-              this.checkedRoleKeys.push(index);
-            }
-          });
-        });
-      },
-      deep: true,
-    },
+  computed: {
+    ...mapGetters(["systemSet"]),
   },
-  created: function () {
-    const systemData = this.$store.state.app.systemSet;
-    if (typeof systemData == "string") {
-      this.systemSet = JSON.parse(systemData);
+  created() {
+    const { GroupUpid, GroupId } = this.$route.query;
+    this.AppId = GroupId;
+    this.UpId = GroupUpid;
+    this.queryId = GroupUpid;
+    let obj;
+    if (typeof this.$store.state.app.systemSet == "string") {
+      obj = JSON.parse(this.$store.state.app.systemSet);
     } else {
-      this.systemSet = systemData;
+      obj = this.$store.state.app.systemSet;
+    }
+    const { OpenRole, OpenGroup } = obj;
+    this.openRole = OpenRole;
+    this.OpenGroup = OpenGroup;
+    if (OpenRole) {
+      this.title = "角色";
+      // this.RoleBox();
     }
-    this.GroupUpid = this.$route.query.GroupId + "";
-    if (this.GroupUpid == -1) {
+    if (this.UpId == -1) {
+      this.queryId = "";
       this.queryType = "all";
     }
-    this.checkedIdList.push(this.GroupUpid);
-    this.getGroupUpDetails();
-    this.getRoleByGroup(this.GroupUpid);
   },
-  components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    rolelist,
-    permissionlist,
+  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: {
-    //获取所属权限组详情
-    getGroupUpDetails () {
+    //获取选中的树数据
+    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 {
-        if (this.GroupUpid == -1) {
-          this.GroupData = [];
-          this.GroupData.push(this.dataList);
+        let params = {
+          RoleId: data,
+        };
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.powerList = res.returnData;
         } else {
-          let data = {
-            GroupId: this.GroupUpid,
-          };
-          GetGroupDetails(data).then((result) => {
-            if (result.code == 0) {
-              this.GroupData = [];
-              this.GroupData.push(result.returnData);
-            }
-          });
+          this.$message.error(res.message);
         }
       } catch (error) {
-        console.log("GetGroupDetails");
-        console.log(error);
+        console.log("出错了", error);
       }
     },
-    //获取当权选中权限树
-    getAuthTreeData (data) {
-      this.checkedAuthTreeList = _.cloneDeep(data);
+    //权限树点击
+    nodeClick(obj) {
+      const arr = this.$store.getters.authArrs;
+      arr.push(obj);
+      this.$store.dispatch("auth/changeAuthArrs", arr);
     },
-    //获取权限组树点击
-    getOrganTreeData (data) {
-      console.log(data);
+    //获取权限树回调
+    getTreeDatas(arr) {
+      this.checkedAuthList = arr;
     },
-    //角色选中后
-    checkRoleChange (data) {
-      this.RoleList = [];
-      data.forEach((item) => {
-        this.groupRoleList[item].IsSelected = 1;
-        this.RoleList.push(this.groupRoleList[item]);
-      });
+    //获取指定数据
+    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);
+        }
+      }
     },
-    //点击角色后
-    roleClick (data) {
+    //角色列表
+    async queryRole() {
       try {
-        let params = {
-          RoleId: data.RoleId,
-        };
-        RoleAuths(params).then((result) => {
-          this.powerList = result.returnData;
+        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("RoleAuths");
-        console.log(error);
+        console.log("出错了", error);
       }
     },
-    //保存
-    saveGroup () {
+    //所有角色列表
+    async RoleBox() {
       try {
-        let arr = _.cloneDeep(this.checkedAuthTreeList);
-        let authArrs = _.cloneDeep(this.$store.state.auth.authArrs);
-        if (arr) {
-          this.AuthList = [];
+        const res = await QueryRole({
+          QueryName: "",
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
           arr.forEach((item) => {
-            this.AuthList.push(item.AuthList);
-          });
-          this.AuthList.forEach((item, index) => {
-            authArrs.forEach((item2) => {
-              if (item.AuthId == item2.AuthId) {
-                this.AuthList[index] = item2.AuthList;
-              }
-            });
+            item.name = item.RoleName;
           });
+          this.roleList = arr;
+        } else {
+          this.$message.error(res.message);
         }
-        this.FormData.AuthList = this.AuthList;
-        this.FormData.RoleList = this.RoleList;
-        this.FormData.GroupUpid = this.GroupUpid;
-        let data = _.cloneDeep(this.FormData);
-        SaveGroup(data).then((result) => {
-          if (result.code == 0) {
-            this.$message.success(result.message);
-            this.$store.dispatch('tagsView/delView', this.$route)
-            this.$router.push("/accountGroup");
-          }
-        });
       } catch (error) {
-        console.log("SaveGroup");
-        console.log(error);
+        console.log("出错了", error);
       }
     },
-    //查看权限列表明细
-    Competen (data) {
+    Competen(data) {
       this.$emit("Competen", data);
     },
-    //获取指定数据
-    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);
+    //角色选取
+    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;
+    },
+    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 AddAccGroup({
+          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);
       }
     },
   },
 };
 </script>
-<style lang="scss" scoped>
-.pageBody {
+<style lang="scss">
+.bf-postmanagementadd {
   width: 100%;
-  height: calc(100vh - 178px);
-  padding: 32px 64px 0 64px;
-  .topPart {
-    box-sizing: border-box;
+  padding: 30px 64px;
+  > .postmanagementadd_header {
     width: 100%;
     height: 184px;
-    padding: 32px;
     background: #ffffff;
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
     border-radius: 16px;
-    .title {
+    padding: 0 32px 0 32px;
+    margin-bottom: 24px;
+    > .postmanagementadd_top {
+      width: 100%;
+      height: 88px;
       display: flex;
+      align-items: center;
       justify-content: space-between;
-      flex-direction: row;
-      position: relative;
-      .isUsed {
-        position: absolute;
-        left: 194px;
-        top: 6px;
-      }
-      .tltleLeft {
+      margin-bottom: 16px;
+      > p {
         font-size: 24px;
+        font-family: Microsoft YaHei;
         font-weight: bold;
         color: #303133;
+        margin-top: 0;
+        margin-bottom: 0;
       }
-      .saveBtn {
-        width: 80px;
+      > .but {
         height: 40px;
-        background: linear-gradient(0deg, #777dba, #6983be);
-        border-radius: 6px;
-        color: #fff;
-        border: none;
-      }
-      .delBtn {
-        width: 80px;
-        height: 40px;
-        background: #f56c6c;
-        border-radius: 6px;
-        color: #fff;
-        border: none;
-        margin-right: 24px;
       }
     }
-    .titleContent {
-      width: 100%;
-      padding-top: 35px;
-      box-sizing: border-box;
-      .resetPass {
-        background: #6e81bc;
-        color: #fff;
-        margin-top: 4px;
-        margin-left: -25px;
+    > .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;
+          }
+        }
       }
     }
   }
@@ -361,12 +452,39 @@ export default {
     height: calc(100% - 184px);
     padding-top: 24px;
     box-sizing: border-box;
+    // .el-row {
+    //   height: 100%;
+    //   .el-col {
+    //     height: 100%;
+    //   }
+    // }
     .part {
       width: 100%;
-      height: 720px;
+      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;
     }
   }
 }

src/views/accountGroupManagement/components/accountGroupEdit.vue

@@ -1,394 +1,556 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-29 11:26:07
- * @LastEditTime: 2022-01-17 13:48:42
- * @LastEditors: Please set LastEditors
- * @Description:编辑权限组
- * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityPower.vue
--->
- <template>
-  <div class="pageBody">
-    <div class="topPart">
-      <div class="title">
-        <div class="tltleLeft">编辑权限组</div>
+<template>
+  <div class="bf-postmanagementadd">
+    <div class="postmanagementadd_header">
+      <div class="postmanagementadd_top">
+        <div class="tltleLeft">编辑账号组</div>
         <!-- <div class="isUsed">
           是否启用
-          <el-radio
-            v-model="FormData.isUsed"
-            v-if="FormData.isUsed == 1 || form.isUsed == 3"
-            :label="1"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" v-if="FormData.isUsed == 2" :label="2"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" :label="3">否</el-radio>
+          <el-radio v-model="addFrom.isUsed" :label="1">是</el-radio>
+          <el-radio v-model="addFrom.isUsed" :label="0">否</el-radio>
         </div> -->
-        <div>
-          <!-- <button type="submmit" class="delBtn" @click="delate">删除</button> -->
-          <button type="submmit" class="saveBtn" @click="saveGroup()">
-            保存
-          </button>
+
+        <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>
-      <div class="titleContent">
-        <el-form ref="form" :model="FormData" label-width="90px">
-          <el-row :gutter="40">
-            <el-col :span="5">
-              <el-form-item label="权限组名称" prop="name">
-                <el-input v-model="FormData.GroupName" maxlength="32" placeholder="请输入权限组名称" size="small"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="10">
-              <el-form-item label="描述" prop="diesc">
-                <el-input v-model="FormData.GroupDesc" maxlength="128" placeholder="描述内容" size="small"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+      <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="25">
-        <el-col :span="24" v-if="systemSet.UserOfficerMulti != 0">
+      <!-- 开启角色 -->
+      <el-row :gutter="24" v-if="this.openRole != 0">
+        <el-col :span="8">
           <div class="part">
-            <Organization title="上级权限组" :data="dataList" :defaultProps="defaultProps" :nodekey="'GroupId'" @getCheckedData="getOrganTreeData" :checkedKeys="checkedIdList" />
+            <Organization
+              title="所属账号组"
+              :data="dataObj"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              :checkedIdList="checkedIdList"
+              @getCheckedData="getTreeData"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <Organization title="上级权限组" :data="GroupData" :defaultProps="defaultProps" :nodekey="'GroupId'" :checkedKeys="checkedIdList" />
+            <rolelists
+              title="角色列表"
+              @checkChange="checkChange"
+              @radioChanges="radioChanges"
+              :checkBoxList="checkRole"
+              :dataList="roleList"
+              :number="8"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <Permissiontree @getTreeData="getAuthTreeData" :checkedKeys="checkedAuthKeys" :queryType="queryType" :queryId="GroupUpid" title="权限树" />
+            <permissionlist
+              title="权限列表"
+              :RoleList="powerList"
+              :check="true"
+              class="hucPower"
+              @Competen="Competen"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0">
+      </el-row>
+      <!-- 无角色 -->
+      <el-row :gutter="24" v-else>
+        <el-col :span="8">
           <div class="part">
-            <Rulesofcompetency title="权限规则" />
+            <Organization
+              title="所属账号组"
+              :data="dataObj"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              :checkedIdList="checkedIdList"
+              @getCheckedData="getTreeData"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <rolelist title="角色列表" @checkChange="checkRoleChange" :dataList="groupRoleList" :checkBoxList="checkedRoleKeys" @checkClick="roleClick" :number="8" />
+            <Permissiontree
+              @nodeClick="nodeClick"
+              :checkedKeys="powerT"
+              @getTreeData="getTreeDatas"
+              :queryType="queryType"
+              :queryId="queryId"
+              title="权限树"
+            />
           </div>
         </el-col>
-        <el-col :span="8" v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0">
+        <el-col :span="8">
           <div class="part">
-            <permissionlist title="权限列表" :RoleList="powerList" :check="true" class="hucPower" @Competen="Competen" />
+            <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/organization/index.vue";
 import Permissiontree from "@/components/permissiontree/index.vue";
 import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
-import Organization from "@/components/organization/index.vue";
-import rolelist from "@/components/rolelist/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 {
+  GetAccTreeDetails,
+  EditGroupAcc,
+  GetRoleByGroup,
+} from "@/api/AccountGroup.js";
 import treeData from "../minixs/treeData";
-import roleData from "../minixs/roleData";
-
-import { GetGroupDetails, EditGroup } from "@/api/AccountGroup";
-import { RoleAuths } from "@/api/apiAuthority";
 
 export default {
-  data () {
+  mixins: [treeData],
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    rolelists,
+    permissionlist,
+    Dialog,
+  },
+  props: {
+    postList: {
+      type: String,
+    },
+    roleData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
     return {
-      queryType: "group",
-      GroupId: 0, //当前权限组ID
-      systemSet: null, //系统设置
-      FormData: {
-        GroupName: "",
-        AuthList: [],
-        GroupDesc: "",
-        GroupId: 0,
-        GroupUpid: 0,
-        RoleList: [],
+      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: {
-        GroupName: [
-          { required: true, message: "请输入上级权限组名称", trigger: "blur" },
-          {
-            min: 1,
-            max: 16,
-            message: "长度在 1 到 16 个字符",
-            trigger: "blur",
-          },
+        //表单验证
+        name: [
+          { required: true, message: "请输入账号组名称", trigger: "blur" },
         ],
       },
       defaultProps: {
         children: "children",
         label: "GroupName",
       },
-      listData: [], //上级权限组树
-      GroupUpid: "-1", //所属权限组ID
-      GroupData: [], //所属权限组详情
-      checkedIdList: [], //选中权限组树
-      AuthList: [], //选中权限（包含规则组）
-      RoleList: [], //选中角色组
-      checkedAuthKeys: [],
-      checkedRoleKeys: [],
-      groupRoleList: [], //所属权限组角色列表
-      powerList: [], //角色权限列表
+      treeData1: [],
+      AppId: 0,
+      UpId: 0,
+      dataObj: null,
+      queryId: "",
+      queryType: "group",
+      objID: "",
     };
   },
-  mixins: [treeData, roleData],
-  watch: {
-    arrs: {
-      handler (arr) {
-        arr.forEach((item) => {
-          item.name = item.RoleName;
-          if (this.GroupUpid == -1) {
-            if (
-              item.IsSelected == 0 &&
-              _.indexOf(this.groupRoleList, item) == -1
-            ) {
-              this.groupRoleList.push(item);
-            }
-          } else {
-            if (
-              item.IsSelected == 1 &&
-              _.indexOf(this.groupRoleList, item) == -1
-            ) {
-              this.groupRoleList.push(item);
-            }
-          }
-        });
-        this.checkedRoleKeys = [];
-        this.RoleList.forEach((item) => {
-          this.groupRoleList.forEach((value, index) => {
-            if (item.RoleId == value.RoleId) {
-              this.checkedRoleKeys.push(index);
-            }
-          });
-        });
-      },
-      deep: true,
-    },
-  },
-  created: function () {
-    const systemData = this.$store.state.app.systemSet;
-    if (typeof systemData == "string") {
-      this.systemSet = JSON.parse(systemData);
+
+  created() {
+    let obj;
+    if (typeof this.$store.state.app.systemSet == "string") {
+      obj = JSON.parse(this.$store.state.app.systemSet);
     } else {
-      this.systemSet = systemData;
+      obj = this.$store.state.app.systemSet;
     }
-    this.GroupId = this.$route.query.GroupId;
-    this.GroupUpid = this.$route.query.GroupUpid + "";
-    if (this.GroupUpid == -1) {
-      this.queryType = "all";
+    const { OpenRole, OpenGroup } = obj;
+    this.openRole = OpenRole;
+    this.OpenGroup = OpenGroup;
+    this.getDeaitls();
+    const { GroupUpid } = this.$route.query;
+    this.UpId = GroupUpid;
+    this.queryId = GroupUpid;
+    this.objID = GroupUpid;
+    if (OpenRole) {
+      this.title = "角色";
+      // this.RoleBox();
     }
-    this.checkedIdList.push(this.GroupUpid);
-    this.getGroupDetails();
-    this.getGroupUpDetails();
+    // if (this.UpId == -1) {
+    //   this.queryId = "";
+    //   this.queryType = "all";
+    //   this.RoleBox();
+    // } else {
+    // this.queryRole();
+    // }
   },
-  components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    rolelist,
-    permissionlist,
+  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: {
-    //获取权限组详情
-    getGroupDetails () {
-      try {
-        let data = {
-          GroupId: this.GroupId,
-        };
-        GetGroupDetails(data).then((result) => {
-          if (result.code === 0) {
-            this.FormData = _.cloneDeep(result.returnData);
-            this.AuthList = _.cloneDeep(result.returnData.AuthList);
-            this.$store.state.auth.authList = _.cloneDeep(
-              result.returnData.AuthList
-            );
-            let list = _.cloneDeep(result.returnData.RoleList);
-            if (list) {
-              list.forEach((item, index) => {
-                if (item.IsSelected == 1) {
-                  this.RoleList.push(item);
-                }
-              });
-            }
-            if (this.AuthList) {
-              this.AuthList.forEach((item) => {
-                this.checkedAuthKeys.push(item.AuthId);
-              });
-            }
-            this.getRoleByGroup(this.GroupUpid);
-          }
-        });
-      } catch (error) {
-        console.log("GetGroupDetails");
-        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;
+    },
+    //获取选中的树数据
+    getTreeData(arr) {
+      this.checkTrees = arr;
+      this.checkTrees.forEach((item) => {
+        if (item[0]) {
+          item.disabled = true;
+        }
+      });
+      let objArr = arr[arr.length - 1];
+      if (objArr.GroupId != -1) {
+        this.objID = objArr.GroupId + "";
+        this.queryRole();
+      } else {
+        this.RoleBox();
       }
     },
-    //获取所属权限组详情
-    getGroupUpDetails () {
+
+    //获取权限规则
+    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 {
-        if (this.GroupUpid == -1) {
-          this.GroupData = [];
-          this.GroupData.push(this.dataList);
-        } else {
-          let data = {
-            GroupId: this.GroupUpid,
-          };
-          GetGroupDetails(data).then((result) => {
-            if (result.code == 0) {
-              this.GroupData = [];
-              this.GroupData.push(result.returnData);
+        const res = await GetAccTreeDetails({
+          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("GetGroupDetails");
-        console.log(error);
+        console.log("出错了", error);
       }
     },
-    //获取当权选中权限树
-    getAuthTreeData (data) {
-      this.checkedAuthTreeList = _.cloneDeep(data);
-    },
-    //获取权限组树点击
-    getOrganTreeData (data) {
-      console.log(data);
-    },
-    //角色选中后
-    checkRoleChange (data) {
-      this.RoleList = [];
-      data.forEach((item) => {
-        this.groupRoleList[item].IsSelected = 1;
-        this.RoleList.push(this.groupRoleList[item]);
-      });
-    },
-    //点击角色后
-    roleClick (data) {
+    async radioChanges(data) {
       try {
         let params = {
-          RoleId: data.RoleId,
+          RoleId: data,
         };
-        RoleAuths(params).then((result) => {
-          this.powerList = result.returnData;
-        });
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.powerList = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
       } catch (error) {
-        console.log("RoleAuths");
-        console.log(error);
+        console.log("出错了", error);
       }
     },
-    //保存
-    saveGroup () {
+    //角色列表
+    async queryRole() {
       try {
-        let arr = _.cloneDeep(this.checkedAuthTreeList);
-        let authArrs = _.cloneDeep(this.$store.state.auth.authArrs);
-        if (arr) {
-          this.AuthList = [];
+        const res = await GetRoleByGroup({
+          GroupId: this.objID,
+        });
+        if (res.code === 0) {
+          const arr = res.returnData.records;
+          const userArr = [];
           arr.forEach((item) => {
-            this.AuthList.push(item.AuthList);
-          });
-          this.AuthList.forEach((item, index) => {
-            authArrs.forEach((item2) => {
-              if (item.AuthId == item2.AuthId) {
-                this.AuthList[index] = item2.AuthList;
-              }
-            });
+            item.name = item.RoleName;
+            if (item.IsSelected == 1) {
+              userArr.push(item);
+            }
           });
+          // this.roleList = userArr;
+        } else {
+          this.$message.error(res.message);
         }
-        this.FormData.AuthList = this.AuthList;
-        this.FormData.RoleList = this.RoleList;
-        let data = _.cloneDeep(this.FormData);
-        EditGroup(data).then((result) => {
-          if (result.code == 0) {
-            this.$message.success(result.message);
-            this.$store.dispatch('tagsView/delView', this.$route)
-            this.$router.push("/accountGroup");
-          }
+      } 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("EditGroup");
-        console.log(error);
+        console.log("出错了", error);
       }
     },
-    //查看权限列表明细
-    Competen (data) {
+    Competen(data) {
       this.$emit("Competen", data);
     },
-    //获取指定数据
-    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 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;
     },
   },
 };
 </script>
-<style lang="scss" scoped>
-.pageBody {
+<style lang="scss">
+.bf-postmanagementadd {
   width: 100%;
-  height: calc(100vh - 178px);
-  padding: 32px 64px 0 64px;
-  .topPart {
-    box-sizing: border-box;
+  padding: 30px 64px;
+  > .postmanagementadd_header {
     width: 100%;
     height: 184px;
-    padding: 32px;
     background: #ffffff;
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
     border-radius: 16px;
-    .title {
+    padding: 0 32px 0 32px;
+    margin-bottom: 24px;
+    > .postmanagementadd_top {
+      width: 100%;
+      height: 88px;
       display: flex;
-      justify-content: space-between;
-      flex-direction: row;
       position: relative;
-      .isUsed {
-        position: absolute;
-        left: 194px;
-        top: 6px;
-      }
+      justify-content: space-between;
+      margin-bottom: 16px;
+
       .tltleLeft {
         font-size: 24px;
         font-weight: bold;
         color: #303133;
+        margin-top: 20px;
       }
-      .saveBtn {
-        width: 80px;
-        height: 40px;
-        background: linear-gradient(0deg, #777dba, #6983be);
-        border-radius: 6px;
-        color: #fff;
-        border: none;
+      .isUsed {
+        margin-top: 20px;
+        position: absolute;
+        left: 194px;
+        top: 6px;
       }
-      .delBtn {
-        width: 80px;
+      > .but {
         height: 40px;
-        background: #f56c6c;
-        border-radius: 6px;
-        color: #fff;
-        border: none;
-        margin-right: 24px;
       }
     }
-    .titleContent {
+    > .postmanagementadd_list {
       width: 100%;
-      padding-top: 35px;
-      box-sizing: border-box;
-      .resetPass {
-        background: #6e81bc;
-        color: #fff;
-        margin-top: 4px;
-        margin-left: -25px;
+      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;
+          }
+        }
       }
     }
   }
@@ -397,12 +559,39 @@ export default {
     height: calc(100% - 184px);
     padding-top: 24px;
     box-sizing: border-box;
+    // .el-row {
+    //   height: 100%;
+    //   .el-col {
+    //     height: 100%;
+    //   }
+    // }
     .part {
       width: 100%;
-      height: 720px;
+      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;
     }
   }
 }

src/views/accountGroupManagement/components/accountGroupHome.vue

@@ -10,20 +10,19 @@
   <div class="accountGroup-home">
     <!--状态和搜索-->
     <div class="accountGroup-head flex">
-      <div class="status flex-wrap">
-      </div>
+      <div class="status flex-wrap"></div>
       <Search
         @getSearchData="getSearchData"
         @clearSearchData="clearSearchData"
       />
     </div>
-    <!--权限树-->
+    <!--账号树-->
     <div class="accountGroup-content">
       <!-- <OrgTree :dataList="dataList" :renderContent="renderContent" /> -->
       <el-row :gutter="24" class="bodyContent">
         <el-col :span="6" class="bodyPart"
           ><div class="grid-content">
-            <div class="title">权限组树</div>
+            <div class="title">账号组树</div>
             <div class="contentTree">
               <el-tree
                 ref="tree"
@@ -41,9 +40,13 @@
         </el-col>
         <el-col :span="18" class="bodyPart">
           <div class="grid-contentTop">
-            <div class="title">当前权限组</div>
+            <div class="title" style="margin-bottom: 15px">当前账号组</div>
             <div class="content">
-              <el-empty :image-size="100" style="padding:0" v-if="currDataArr.length<1"></el-empty>
+              <el-empty
+                :image-size="100"
+                style="padding: 0"
+                v-if="currDataArr.length < 1"
+              ></el-empty>
               <el-row>
                 <el-col
                   :span="8"
@@ -60,11 +63,11 @@
                           <div class="icon">
                             <el-tooltip
                               effect="dark"
-                              content="编辑权限组"
+                              content="编辑账号组"
                               placement="bottom"
                             >
                               <span
-                                title="编辑权限组"
+                                title="编辑账号组"
                                 class="cap cap-edit"
                                 @click="renderEdit(data)"
                                 v-if="data.GroupId != -1"
@@ -73,11 +76,11 @@
 
                             <el-tooltip
                               effect="dark"
-                              content="新增权限组"
+                              content="新增账号组"
                               placement="bottom"
                             >
                               <span
-                                title="新增权限组"
+                                title="新增账号组"
                                 class="cap cap-sub"
                                 @click="renderAdd(data)"
                               ></span
@@ -94,7 +97,11 @@
                         <span>{{ data.OfficerCount }}</span>
                       </el-col> -->
                       <el-col :span="24" v-if="data.GroupId != -1">
-                        <span class="msg">权限项数：</span>
+                        <span class="msg">账号项数：</span>
+                        <span style="margin-right: 90px">{{
+                          data.UserCount
+                        }}</span>
+                        <span class="msg">权限：</span>
                         <span>{{ data.AuthCount }}</span>
                       </el-col>
                       <el-col :span="12" v-if="data.GroupId != -1">
@@ -118,16 +125,19 @@
             </div>
           </div>
           <div class="grid-contentBottom">
-            <div class="title">下级权限组</div>
+            <div class="title">下级账号组</div>
             <div class="content">
-              <el-empty :image-size="150"  v-if="childrenData.length<1"></el-empty>
+              <el-empty
+                :image-size="150"
+                v-if="childrenData.length < 1"
+              ></el-empty>
               <el-row :gutter="24">
                 <el-col
-                  :span="8"
+                  :span="6"
                   v-for="(data, index) in childrenData"
                   :key="data.GroupId"
                 >
-                  <div class="info-close" @click="onNodeClick(data,index)">
+                  <div class="info-close" @click="onNodeClick(data, index)">
                     <i class="el-icon-close"></i>
                   </div>
                   <div class="itemBox" @click.stop="childrenClick(data)">
@@ -168,11 +178,11 @@
 
                             <el-tooltip
                               effect="dark"
-                              content="编辑权限组"
+                              content="编辑账号组"
                               placement="bottom"
                             >
                               <span
-                                title="编辑权限组"
+                                title="编辑账号组"
                                 class="cap cap-edit"
                                 @click.stop="renderEdit(data)"
                                 v-if="data.GroupId != -1"
@@ -181,11 +191,11 @@
 
                             <el-tooltip
                               effect="dark"
-                              content="新增权限组"
+                              content="新增账号组"
                               placement="bottom"
                             >
                               <span
-                                title="新增权限组"
+                                title="新增账号组"
                                 class="cap cap-sub"
                                 @click.stop="renderAdd(data)"
                               ></span
@@ -203,7 +213,11 @@
                       </el-col> -->
                       <el-col :span="24" v-if="data.GroupId != -1">
                         <span class="msg">权限：</span>
-                        <span>{{ data.AuthCount }}</span>
+                        <span style="margin-right: 120px">{{
+                          data.AuthCount
+                        }}</span>
+                        <span class="msg">账号：</span>
+                        <span>{{ data.UserCount }}</span>
                       </el-col>
                       <el-col :span="12" v-if="data.GroupId != -1">
                         <span class="msg">状态：</span>
@@ -273,7 +287,7 @@ export default {
       childrenData: [],
       dataListTree: [],
       currentKey: -1,
-      delIndex:0
+      delIndex: 0,
     };
   },
   created: function () {
@@ -364,8 +378,8 @@ export default {
       this.getGroupTree();
     },
     //节点关闭按钮点击
-    onNodeClick(data,index) {
-       this.delIndex = index
+    onNodeClick(data, index) {
+      this.delIndex = index;
       this.flag = true;
       this.dataId = data.GroupId;
       this.title = data.GroupName;
@@ -410,7 +424,7 @@ export default {
           this.$message.success(res.message);
           this.flag = false;
           this.getGroupTree();
-          this.childrenData.splice(this.delIndex,1);
+          this.childrenData.splice(this.delIndex, 1);
           this.$refs.tree.setCurrentKey(this.currDataArr[0].GroupId);
           this.currentKey = this.currDataArr[0].GroupId;
         } else {
@@ -592,7 +606,7 @@ export default {
         background: #000000;
         border-radius: 50%;
         top: -10px;
-        right: 0;
+        right: 23px;
         z-index: 15;
         color: #fff;
         cursor: pointer;
@@ -603,7 +617,7 @@ export default {
       }
     }
     .itemBox {
-      width: 100%;
+      width: 292px;
       padding: 24px;
       position: relative;
       background: #f5f7fa;
@@ -611,7 +625,7 @@ export default {
       border-radius: 16px;
       padding: 10px 20px;
       overflow: hidden;
-      min-height: 100px;
+      min-height: 130px;
       margin-bottom: 24px;
       .status {
         width: 100%;

src/views/accountGroupManagement/css/role.scss

@@ -1,6 +1,6 @@
 .authorityPower {
-  padding: 0 64px;
-  height: calc(100% - 64px);
+  padding: 0 146px;
+  height: calc(100% - 146px);
 }
 .addApp-form {
   background: #ffffff;

src/views/accountManagement/add.vue

@@ -0,0 +1,618 @@
+<template>
+  <div class="pageBody">
+    <div class="topPart">
+      <div class="title">
+        <div class="tltleLeft">新增账号</div>
+        <div>
+          <button type="submmit" class="saveBtn" @click="addAcc">保存</button>
+        </div>
+      </div>
+      <div class="titleContent">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row :gutter="40">
+            <el-col :span="5">
+              <el-form-item label="账号名称" prop="name">
+                <el-input
+                  maxlength="32"
+                  v-model="form.UserName"
+                  placeholder="请输入名称"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="登录密码" prop="UserPwd">
+                <el-input
+                  v-model="form.UserPwd"
+                  placeholder="fLqec84dU3"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="描述" prop="UserDesc">
+                <el-input
+                  maxlength="128"
+                  v-model="form.UserDesc"
+                  placeholder="描述内容描述内容描述内容描述内容描述内容描述内容"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <div class="content">
+      <!-- 用户组和角色未开启 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenRole === 0 &&
+          this.systemSetuser.OpenGroup === 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <Permissiontree
+              @getTreeData="getTreeDatas"
+              :checkedKeys="checkedKeys"
+              :queryType="group"
+              :queryId="objID"
+              title="权限树"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Rulesofcompetency @getData="getData" title="权限规则" />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 只开启用户组 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenRole === 0 && this.systemSetuser.OpenGroup != 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <Organization
+              title="所属账号组"
+              :data="data"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              :checkedIdList="checkedIdList"
+              @getCheckedData="getTreeData"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Permissiontree
+              @getTreeData="getTreeDatas"
+              :checkedKeys="checkedKeys"
+              :queryType="group"
+              :queryId="objID"
+              title="权限树"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part2">
+            <Rulesofcompetency @getData="getData" title="权限规则" />
+          </div>
+
+          <div class="part3">
+            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 只开启角色 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenRole != 0 && this.systemSetuser.OpenGroup === 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <Rolelists
+              title="角色列表"
+              @checkChange="checkChange"
+              :dataList="roleList"
+              @checkClick="roleClick"
+              :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-col :span="8">
+          <div class="part">
+            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 角色和用户组都开启 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenRole != 0 && this.systemSetuser.OpenGroup != 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <Organization
+              title="所属账号组"
+              :data="data"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              @getCheckedData="getTreeData"
+              :checkedIdList="checkedIdList"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Rolelists
+              title="角色列表"
+              @checkChange="checkChange"
+              :dataList="roleList"
+              @checkClick="roleClick"
+              :number="8"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part2">
+            <permissionlist
+              title="权限列表"
+              :RoleList="powerList"
+              :check="true"
+              class="hucPower"
+              @Competen="Competen"
+            />
+          </div>
+          <div class="part3">
+            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </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 loginpolicy from "@/components/loginpolicy/index.vue";
+import Rolelists from "@/components/rolelist/index.vue";
+import permissionlist from "@/components/permissionlist/index.vue";
+import { addAccount, GetRoleByGroup } from "@/api/Account";
+import { RoleAuths } from "@/api/apiAuthority";
+import { getUserOne } from "@/api/AccountGroup.js";
+import treeData from "./minixs/treeData";
+import { mapGetters } from "vuex";
+export default {
+  mixins: [treeData],
+  data() {
+    return {
+      checkedAuthList: [],
+      GroupId: this.$route.query.GroupId,
+      dialogVisible: false,
+      marginB: "20px",
+      GroupId: null,
+      OpenRole: 1,
+      OpenGroup: 0,
+      data: [], //账号组
+      TacList: [], //登录策略
+      AuthList: [], //授权信息
+      roleList: [], //角色
+      PageIndex: 1,
+      PageSize: 100,
+      checkRoles: [], //选中的角色
+      treeData: [], //权限树数据
+      treeData1: [], //权限树数据
+      powerList: [], //权限列表
+      loginList: [], //选中展示登录策略
+      objID: "1",
+      group: "group",
+      orgId: "", //账号组点击id
+      checkedIdList: [],
+      CheckedList: [],
+      checkedKeys: [],
+      powerT: [],
+      PwdLengthBegin: null,
+      PwdLengthEnd: null,
+      PwdStruc: null,
+      pwd: null,
+      form: {
+        UserName: null, //账号名字
+        UserPwd: null, //密码
+        UserDesc: null, //描述
+        GroupId: "", //账号组Id
+      },
+      rules: {
+        UserName: [
+          { required: true, message: "请输入账号名称", trigger: "blur" },
+          { min: 1, max: 32, message: "长度在 1到 32 个字符", trigger: "blur" },
+        ],
+        UserPwd: [
+          { required: true, message: "请输入账号密码", trigger: "blur" },
+          { min: 8, message: "长度最少8个字符", trigger: "blur" },
+        ],
+        UserDesc: [
+          { min: 1, max: 128, message: "长度最多128个字符", trigger: "blur" },
+        ],
+      },
+      defaultProps: {
+        children: "children",
+        label: "GroupName",
+      },
+      systemSetuser: null,
+      AppId: "",
+    };
+  },
+
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    Rolelists,
+    permissionlist,
+    loginpolicy,
+  },
+  methods: {
+    //账号新增
+    async addAcc() {
+      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 addAccount({
+          UserName: this.form.UserName,
+          UserPwd: this.form.UserPwd,
+          UserDesc: this.form.UserDesc,
+          GroupList: this.checkTrees,
+          RoleList: this.checkRoles,
+          UserId: this.userId,
+          AuthTo: this.treeData1,
+          TacList: this.CheckedList ? this.CheckedList : [],
+          AuthList: this.treeData1,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          setTimeout(() => {
+            this.$router.push("/account");
+          }, 2000);
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+
+    delate: function (index) {
+      this.dialogVisible = true;
+    },
+
+    //获取权限树回调
+    getTreeDatas(arr) {
+      // this.treeData = arr;
+      this.checkedAuthList = arr;
+    },
+    getCheckedList(data) {
+      this.CheckedList = data;
+    },
+    //获取选中的树数据
+    getTreeData(arr) {
+      this.checkTrees = arr;
+
+      this.checkTrees.forEach((item) => {
+        this.orgId = item.GroupId;
+      });
+      // let objArr = arr[arr.length - 1];
+      // if (objArr) {
+      //   this.objID = objArr.GroupId + "";
+      //   this.RoleBox();
+      // } else {
+      //   this.queryRole();
+      // }
+      if (this.checkTrees != "") {
+        this.queryRole();
+      } else {
+        this.roleList = [];
+      }
+    },
+
+    //获取权限规则
+    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];
+        } else if (data[i].children && data[i].children.length > 0) {
+          this.decompose(data[i].children, id);
+        }
+      }
+    },
+
+    //点击角色后
+    roleClick(data) {
+      try {
+        let params = {
+          RoleId: data.RoleId,
+        };
+        RoleAuths(params).then((result) => {
+          this.powerList = result.returnData;
+        });
+      } catch (error) {
+        console.log("RoleAuths");
+        console.log(error);
+      }
+    },
+    Competen(data) {
+      this.$emit("Competen", data);
+    },
+    //角色列表
+    async queryRole() {
+      try {
+        const res = await GetRoleByGroup({
+          GroupId: this.orgId,
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          const userArr = [];
+          arr.forEach((item) => {
+            item.name = item.RoleName;
+            if (item.IsSelected) {
+              userArr.push(item);
+            }
+          });
+          this.roleList = userArr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    generatePassword(rules, minNum, maxNum) {
+      var rulesArr = rules.split("");
+      var rulesArrLnArr = [];
+      var pwd = "";
+      var numbers = "0123456789";
+      var lower = "abcdefghijklmnopqrstuvwxyz";
+      var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      var others = "~!@#$%^&*()_";
+
+      function rand(min, max) {
+        return Math.random() * (max - min) + min;
+      }
+      var pwdLen = parseInt(rand(minNum, maxNum)); //随机生成密码长度10-12位。 // alert("密码长度：" + pwdLen);
+      var item = new Array(pwdLen); //存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
+      for (let i = 0; i < rulesArr.length; i++) {
+        if (rulesArr[i] == "1") {
+          rulesArrLnArr.push(i + 1 + "");
+        }
+      }
+      for (let i = 0; i < rulesArrLnArr.length; i++) {
+        item[rulesArrLnArr[i]] = rulesArrLnArr[i] + "";
+      }
+      for (let i = 0; i < pwdLen; i++) {
+        if (rulesArrLnArr.indexOf(i + "") == -1) {
+          item[i] = "";
+          item[i] +=
+            rulesArrLnArr[
+              parseInt(Math.random() * (rulesArrLnArr.length - 0) + 0)
+            ]; //其余部分随机生成1-4的数字。
+        }
+      } //打乱次序，重新排序，否则密码第四位永远是特殊符号。
+      item.sort(function () {
+        return 0.5 - Math.random();
+      }); //返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置
+
+      for (let j = 0; j < pwdLen; j++) {
+        if (item[j] == "4") {
+          pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1);
+        } else if (item[j] == "2") {
+          pwd += lower.charAt(Math.random() * (lower.length - 1) + 1);
+        } else if (item[j] == "1") {
+          pwd += upper.charAt(Math.random() * (upper.length - 1) + 1);
+        } else if (item[j] == "3") {
+          pwd += others.charAt(Math.random() * (others.length - 1) + 1);
+        }
+      }
+      return pwd;
+    },
+
+    //角色选取
+    checkChange(arr) {
+      const datas = [];
+      for (let i = 0; i < arr.length; i++) {
+        datas.push(this.roleList[arr[i]]);
+      }
+      this.checkRoles = datas;
+    },
+  },
+  mounted() {
+    this.form.UserPwd = this.generatePassword(
+      this.PwdStruc,
+      this.PwdLengthBegin,
+      this.PwdLengthEnd
+    );
+  },
+  created() {
+    const { GroupId } = this.$route.query;
+    this.AppId = GroupId;
+    this.objID = GroupId;
+    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;
+    }
+    this.systemSetuser = obj;
+    const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj;
+    this.openRole = OpenRole;
+    this.OpenGroup = OpenGroup;
+    this.PwdStruc = PwdStruc;
+    this.PwdLengthBegin = PwdLengthBegin;
+    this.PwdLengthEnd = PwdLengthEnd;
+    if (OpenRole) {
+      this.title = "角色";
+    }
+  },
+  watch: {
+    dataList: {
+      handler(val) {
+        const arr = val.children;
+        this.decompose(arr, this.AppId);
+        if (Array.isArray(this.dataObj)) {
+          this.data = this.dataObj;
+        } else {
+          this.data = [this.dataObj];
+        }
+        this.RoleList.forEach((item) => {
+          this.groupRoleList.forEach((value, index) => {
+            if (item.RoleId == value.RoleId) {
+              this.checkedRoleKeys.push(index);
+            }
+          });
+        });
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pageBody {
+  width: 100%;
+  height: calc(100vh - 178px);
+  padding: 30px 64px;
+  .topPart {
+    box-sizing: border-box;
+    width: 100%;
+    height: 184px;
+    padding: 32px;
+    background: #ffffff;
+    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 16px;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      position: relative;
+      .isUsed {
+        position: absolute;
+        left: 194px;
+        top: 6px;
+      }
+      .tltleLeft {
+        font-size: 24px;
+        font-weight: bold;
+        color: #303133;
+      }
+      .saveBtn {
+        width: 80px;
+        height: 40px;
+        background: linear-gradient(0deg, #777dba, #6983be);
+        border-radius: 6px;
+        color: #fff;
+        border: none;
+      }
+      .delBtn {
+        width: 80px;
+        height: 40px;
+        background: #f56c6c;
+        border-radius: 6px;
+        color: #fff;
+        border: none;
+        margin-right: 24px;
+      }
+    }
+    .titleContent {
+      width: 100%;
+      padding-top: 35px;
+      box-sizing: border-box;
+      .resetPass {
+        background: #6e81bc;
+        color: #fff;
+        margin-top: 4px;
+        margin-left: -25px;
+      }
+    }
+  }
+  .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/accountManagement/components/accountsAdd.vue

@@ -1,406 +0,0 @@
- <template>
-  <div class="pageBody">
-    <div class="topPart">
-      <div class="title">
-        <div class="tltleLeft">新增岗位</div>
-        <!-- <div class="isUsed">
-          是否启用
-          <el-radio
-            v-model="FormData.isUsed"
-            v-if="FormData.isUsed == 1 || form.isUsed == 3"
-            :label="1"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" v-if="FormData.isUsed == 2" :label="2"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" :label="3">否</el-radio>
-        </div> -->
-        <div>
-          <!-- <button type="submmit" class="delBtn" @click="delate">删除</button> -->
-          <button type="submmit" class="saveBtn" @click="saveJob()">
-            保存
-          </button>
-        </div>
-      </div>
-      <div class="titleContent">
-        <el-form ref="form" :model="FormData" label-width="80px">
-          <el-row :gutter="40">
-            <el-col :span="5">
-              <el-form-item label="岗位名称" prop="name">
-                <el-input
-                  v-model="FormData.JobName"
-                  maxlength="32"
-                  placeholder="请输入岗位名称"
-                  size="small"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="10">
-              <el-form-item label="描述" prop="diesc">
-                <el-input
-                  v-model="FormData.JobDesc"
-                  maxlength="128"
-                  placeholder="描述内容"
-                  size="small"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <div class="content">
-      <el-row :gutter="25">
-        <el-col :span="24" v-if="systemSet.UserOfficerMulti != 0">
-          <div class="part">
-            <Organization
-              title="所属组织"
-              :data="dataList"
-              :defaultProps="defaultProps"
-              :nodekey="'Organid'"
-              @getCheckedData="getOrganTreeData"
-              :checkedKeys="checkedIdList"
-            />
-          </div>
-        </el-col>
-        <el-col :span="8" v-if="systemSet.UserOfficerMulti === 0">
-          <div class="part">
-            <Organization
-              title="所属组织"
-              :data="originData"
-              :defaultProps="defaultProps"
-              :nodekey="'Organid'"
-              :checkedKeys="checkedIdList"
-            />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <Permissiontree
-              @getTreeData="getAuthTreeData"
-              :checkedKeys="checkedAuthKeys"
-              :queryType="queryType"
-              :queryId="originId"
-              title="权限树"
-            />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <Rulesofcompetency title="权限规则" />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <rolelist
-              title="角色列表"
-              @checkChange="checkRoleChange"
-              :dataList="originRoleList"
-              :checkBoxList="checkedRoleKeys"
-              @checkClick="roleClick"
-              :number="8"
-            />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <permissionlist
-              title="权限列表"
-              :RoleList="powerList"
-              :check="true"
-              class="hucPower"
-              @Competen="Competen"
-            />
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-  </div>
-</template>
-<script>
-import Permissiontree from "@/components/permissiontree/index.vue";
-import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
-import Organization from "@/components/organization/index.vue";
-import rolelist from "@/components/rolelist/index.vue";
-import permissionlist from "@/components/permissionlist/index.vue";
-
-import treeData from "../minixs/treeData";
-import roleData from "../minixs/roleData";
-
-import { SaveJob } from "@/api/jobApi";
-import { newOrganall } from "@/api/postInterface";
-import { RoleAuths } from "@/api/apiAuthority";
-
-export default {
-  data() {
-    return {
-      queryType: "origin",
-      JobId: 0, //当前岗位ID
-      systemSet: null, //系统设置
-      FormData: {
-        JobName: "",
-        AuthList: [],
-        JobDesc: "",
-        JobId: 0,
-        JobName: "",
-        OrganId: 0,
-        RoleList: [],
-      },
-      rules: {
-        JobName: [
-          { required: true, message: "请输入岗位名称", trigger: "blur" },
-          {
-            min: 1,
-            max: 16,
-            message: "长度在 1 到 16 个字符",
-            trigger: "blur",
-          },
-        ],
-      },
-      defaultProps: {
-        children: "children",
-        label: "OrganName",
-      },
-      listData: [], //上级组织树
-      originId: "-1", //所属组织ID
-      originData: [], //所属组织详情
-      checkedIdList: [], //选中组织树
-      AuthList: [], //选中权限（包含规则组）
-      RoleList: [], //选中角色组
-      checkedAuthKeys: [],
-      checkedRoleKeys: [],
-      originRoleList: [], //所属组织角色列表
-      powerList:[],//角色权限列表
-    };
-  },
-  mixins: [treeData, roleData],
-  watch: {
-    arrs: {
-      handler(arr) {
-        arr.forEach((item) => {
-          item.name = item.RoleName;
-          if (
-            item.IsSelected == 1 &&
-            _.indexOf(this.originRoleList, item) == -1
-          ) {
-            this.originRoleList.push(item);
-          }
-        });
-        this.checkedRoleKeys = [];
-        this.RoleList.forEach((item) => {
-          this.originRoleList.forEach((value, index) => {
-            if (item.RoleId == value.RoleId) {
-              this.checkedRoleKeys.push(index);
-            }
-          });
-        });
-      },
-      deep: true,
-    },
-  },
-  created: function () {
-    const systemData = this.$store.state.app.systemSet;
-    if (typeof systemData == "string") {
-      this.systemSet = JSON.parse(systemData);
-    } else {
-      this.systemSet = systemData;
-    }
-    this.originId = this.$route.query.OrganId;
-    this.checkedIdList.push(this.originId);
-    this.getOrganDetails();
-    this.getRoleByOrgan(this.originId);
-  },
-  components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    rolelist,
-    permissionlist,
-  },
-  methods: {
-    //获取所属组织详情
-    getOrganDetails() {
-      try {
-        let data = {
-          OrganId: this.originId,
-        };
-        newOrganall(data).then((result) => {
-          if (result.code == 0) {
-            this.originData = [];
-            this.originData.push(result.returnData);
-          }
-        });
-      } catch (error) {
-        console.log("newOrganall");
-        console.log(error);
-      }
-    },
-    //获取当权选中权限树
-    getAuthTreeData(data) {
-      this.checkedAuthTreeList = _.cloneDeep(data);
-    },
-    //获取组织树点击
-    getOrganTreeData(data) {
-      console.log(data);
-    },
-    //角色选中后
-    checkRoleChange(data) {
-      this.RoleList = [];
-      data.forEach((item) => {
-        this.originRoleList[item].IsSelected = 1;
-        this.RoleList.push(this.originRoleList[item]);
-      });
-    },
-    //点击角色后
-    roleClick(data) {
-      try {
-        let params = {
-          RoleId: data.RoleId,
-        };
-        RoleAuths(params).then((result) => {
-          this.powerList = result.returnData;
-        });
-      } catch (error) {
-        console.log("RoleAuths");
-        console.log(error);
-      }
-    },
-    //保存
-    saveJob() {
-      try {
-        let arr = _.cloneDeep(this.checkedAuthTreeList);
-        let authArrs = _.cloneDeep(this.$store.state.auth.authArrs);
-        if (arr) {
-          this.AuthList = [];
-          arr.forEach((item) => {
-            this.AuthList.push(item.AuthList);
-          });
-          this.AuthList.forEach((item, index) => {
-            authArrs.forEach((item2) => {
-              if (item.AuthId == item2.AuthId) {
-                this.AuthList[index] = item2.AuthList;
-              }
-            });
-          });
-        }
-        this.FormData.AuthList = this.AuthList;
-        this.FormData.RoleList = this.RoleList;
-        this.FormData.OrganId = this.originId;
-        let data = _.cloneDeep(this.FormData);
-        SaveJob(data).then((result) => {
-          if (result.code == 0) {
-            this.$message.success(result.message);
-            this.$router.push("/jobs");
-          }
-        });
-      } catch (error) {
-        console.log("EditJob");
-        console.log(error);
-      }
-    },
-    //查看权限列表明细
-    Competen(data) {
-      this.$emit("Competen", data);
-    },
-    //获取指定数据
-    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);
-        }
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  height: calc(100vh - 178px);
-  padding: 0 64px;
-  padding-top: 32px;
-  .topPart {
-    box-sizing: border-box;
-    width: 100%;
-    height: 184px;
-    padding: 32px;
-    background: #ffffff;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-    border-radius: 16px;
-    .title {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: row;
-      position: relative;
-      .isUsed {
-        position: absolute;
-        left: 194px;
-        top: 6px;
-      }
-      .tltleLeft {
-        font-size: 24px;
-        font-weight: bold;
-        color: #303133;
-      }
-      .saveBtn {
-        width: 80px;
-        height: 40px;
-        background: linear-gradient(0deg, #777dba, #6983be);
-        border-radius: 6px;
-        color: #fff;
-        border: none;
-      }
-      .delBtn {
-        width: 80px;
-        height: 40px;
-        background: #f56c6c;
-        border-radius: 6px;
-        color: #fff;
-        border: none;
-        margin-right: 24px;
-      }
-    }
-    .titleContent {
-      width: 100%;
-      padding-top: 35px;
-      box-sizing: border-box;
-      .resetPass {
-        background: #6e81bc;
-        color: #fff;
-        margin-top: 4px;
-        margin-left: -25px;
-      }
-    }
-  }
-  .content {
-    width: 100%;
-    height: calc(100% - 184px);
-    padding-top: 24px;
-    box-sizing: border-box;
-    .part {
-      width: 100%;
-      height: 720px;
-      background: #ffffff;
-      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-      border-radius: 16px;
-    }
-  }
-}
-</style>

src/views/accountManagement/components/accountsEdit.vue

@@ -1,440 +0,0 @@
- <template>
-  <div class="pageBody">
-    <div class="topPart">
-      <div class="title">
-        <div class="tltleLeft">编辑岗位</div>
-        <!-- <div class="isUsed">
-          是否启用
-          <el-radio
-            v-model="FormData.isUsed"
-            v-if="FormData.isUsed == 1 || form.isUsed == 3"
-            :label="1"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" v-if="FormData.isUsed == 2" :label="2"
-            >是</el-radio
-          >
-          <el-radio v-model="FormData.isUsed" :label="3">否</el-radio>
-        </div> -->
-        <div>
-          <!-- <button type="submmit" class="delBtn" @click="delate">删除</button> -->
-          <button type="submmit" class="saveBtn" @click="saveJob()">
-            保存
-          </button>
-        </div>
-      </div>
-      <div class="titleContent">
-        <el-form ref="form" :model="FormData" label-width="80px">
-          <el-row :gutter="40">
-            <el-col :span="5">
-              <el-form-item label="岗位名称" prop="name">
-                <el-input
-                  v-model="FormData.JobName"
-                  maxlength="32"
-                  placeholder="请输入岗位名称"
-                  size="small"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="10">
-              <el-form-item label="描述" prop="diesc">
-                <el-input
-                  v-model="FormData.JobDesc"
-                  maxlength="128"
-                  placeholder="描述内容"
-                  size="small"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <div class="content">
-      <el-row :gutter="25">
-        <el-col :span="24" v-if="systemSet.UserOfficerMulti != 0">
-          <div class="part">
-            <Organization
-              title="所属组织"
-              :data="dataList"
-              :defaultProps="defaultProps"
-              :nodekey="'Organid'"
-              @getCheckedData="getOrganTreeData"
-              :checkedKeys="checkedIdList"
-            />
-          </div>
-        </el-col>
-        <el-col :span="8" v-if="systemSet.UserOfficerMulti === 0">
-          <div class="part">
-            <Organization
-              title="所属组织"
-              :data="originData"
-              :defaultProps="defaultProps"
-              :nodekey="'Organid'"
-              :checkedKeys="checkedIdList"
-            />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <Permissiontree
-              @getTreeData="getAuthTreeData"
-              :checkedKeys="checkedAuthKeys"
-              :queryType="queryType"
-              :queryId="originId"
-              title="权限树"
-            />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole === 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <Rulesofcompetency title="权限规则" />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <rolelist
-              title="角色列表"
-              @checkChange="checkRoleChange"
-              :dataList="originRoleList"
-              :checkBoxList="checkedRoleKeys"
-              @checkClick="roleClick"
-              :number="8"
-            />
-          </div>
-        </el-col>
-        <el-col
-          :span="8"
-          v-if="systemSet.OpenRole != 0 && systemSet.UserOfficerMulti === 0"
-        >
-          <div class="part">
-            <permissionlist
-              title="权限列表"
-              :RoleList="powerList"
-              :check="true"
-              class="hucPower"
-              @Competen="Competen"
-            />
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-  </div>
-</template>
-<script>
-import Permissiontree from "@/components/permissiontree/index.vue";
-import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
-import Organization from "@/components/organization/index.vue";
-import rolelist from "@/components/rolelist/index.vue";
-import permissionlist from "@/components/permissionlist/index.vue";
-
-import treeData from "../minixs/treeData";
-import roleData from "../minixs/roleData";
-
-import { GetJobDetails, EditJob } from "@/api/jobApi";
-import { newOrganall } from "@/api/postInterface";
-import { RoleAuths } from "@/api/apiAuthority";
-
-export default {
-  data() {
-    return {
-      queryType: "origin",
-      JobId: 0, //当前岗位ID
-      systemSet: null, //系统设置
-      FormData: {
-        JobName: "",
-        AuthList: [],
-        JobDesc: "",
-        JobId: 0,
-        JobName: "",
-        OrganId: 0,
-        RoleList: [],
-      },
-      rules: {
-        JobName: [
-          { required: true, message: "请输入岗位名称", trigger: "blur" },
-          {
-            min: 1,
-            max: 16,
-            message: "长度在 1 到 16 个字符",
-            trigger: "blur",
-          },
-        ],
-      },
-      defaultProps: {
-        children: "children",
-        label: "OrganName",
-      },
-      listData: [], //上级组织树
-      originId: "-1", //所属组织ID
-      originData: [], //所属组织详情
-      checkedIdList: [], //选中组织树
-      AuthList: [], //选中权限（包含规则组）
-      RoleList: [], //选中角色组
-      checkedAuthKeys: [],
-      checkedRoleKeys: [],
-      originRoleList: [], //所属组织角色列表
-      powerList:[],//角色权限列表
-    };
-  },
-  mixins: [treeData, roleData],
-  watch: {
-    arrs: {
-      handler(arr) {
-        arr.forEach((item) => {
-          item.name = item.RoleName;
-          if (
-            item.IsSelected == 1 &&
-            _.indexOf(this.originRoleList, item) == -1
-          ) {
-            this.originRoleList.push(item);
-          }
-        });
-        this.checkedRoleKeys = [];
-        this.RoleList.forEach((item) => {
-          this.originRoleList.forEach((value, index) => {
-            if (item.RoleId == value.RoleId) {
-              this.checkedRoleKeys.push(index);
-            }
-          });
-        });
-      },
-      deep: true,
-    },
-  },
-  created: function () {
-    const systemData = this.$store.state.app.systemSet;
-    if (typeof systemData == "string") {
-      this.systemSet = JSON.parse(systemData);
-    } else {
-      this.systemSet = systemData;
-    }
-    this.JobId = this.$route.query.JobId;
-    this.getJobDetails();
-  },
-  components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    rolelist,
-    permissionlist,
-  },
-  methods: {
-    //获取岗位详情
-    getJobDetails() {
-      try {
-        let data = {
-          JobId: this.JobId,
-        };
-        GetJobDetails(data).then((result) => {
-          if (result.code === 0) {
-            this.FormData = _.cloneDeep(result.returnData);
-            this.originId = result.returnData.OrganId+"";
-            this.AuthList = _.cloneDeep(result.returnData.AuthList);
-            this.$store.state.auth.authList = _.cloneDeep(
-              result.returnData.AuthList
-            );
-            let list = _.cloneDeep(result.returnData.RoleList);
-            if(list){
-              list.forEach((item, index) => {
-              if (item.IsSelected == 1) {
-                this.RoleList.push(item);
-              }
-            });
-            }
-            if (this.AuthList) {
-              this.AuthList.forEach((item) => {
-                this.checkedAuthKeys.push(item.AuthId);
-              });
-            }
-            this.checkedIdList.push(result.returnData.OrganId);
-            this.getOrganDetails();
-            this.getRoleByOrgan(this.originId);
-          }
-        });
-      } catch (error) {
-        console.log("GetJobDetails");
-        console.log(error);
-      }
-    },
-    //获取所属组织详情
-    getOrganDetails() {
-      try {
-        let data = {
-          OrganId: this.originId,
-        };
-        newOrganall(data).then((result) => {
-          if (result.code == 0) {
-            this.originData = [];
-            this.originData.push(result.returnData);
-          }
-        });
-      } catch (error) {
-        console.log("newOrganall");
-        console.log(error);
-      }
-    },
-    //获取当权选中权限树
-    getAuthTreeData(data) {
-      this.checkedAuthTreeList = _.cloneDeep(data);
-    },
-    //获取组织树点击
-    getOrganTreeData(data) {
-      console.log(data);
-    },
-    //角色选中后
-    checkRoleChange(data) {
-      this.RoleList = [];
-      data.forEach((item) => {
-        this.originRoleList[item].IsSelected = 1;
-        this.RoleList.push(this.originRoleList[item]);
-      });
-    },
-    //点击角色后
-    roleClick(data) {
-      try {
-        let params = {
-          RoleId: data.RoleId,
-        };
-        RoleAuths(params).then((result) => {
-          this.powerList = result.returnData;
-        });
-      } catch (error) {
-        console.log("RoleAuths");
-        console.log(error);
-      }
-    },
-    //保存
-    saveJob() {
-      try {
-        let arr = _.cloneDeep(this.checkedAuthTreeList);
-        let authArrs = _.cloneDeep(this.$store.state.auth.authArrs);
-        if (arr) {
-          this.AuthList = [];
-          arr.forEach((item) => {
-            this.AuthList.push(item.AuthList);
-          });
-          this.AuthList.forEach((item, index) => {
-            authArrs.forEach((item2) => {
-              if (item.AuthId == item2.AuthId) {
-                this.AuthList[index] = item2.AuthList;
-              }
-            });
-          });
-        }
-        this.FormData.AuthList = this.AuthList;
-        this.FormData.RoleList = this.RoleList;
-        let data = _.cloneDeep(this.FormData);
-        EditJob(data).then((result) => {
-          if (result.code == 0) {
-            this.$message.success(result.message);
-            this.$router.push("/jobs");
-          }
-        });
-      } catch (error) {
-        console.log("EditJob");
-        console.log(error);
-      }
-    },
-    //查看权限列表明细
-    Competen(data) {
-      this.$emit("Competen", data);
-    },
-    //获取指定数据
-    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);
-        }
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  height: calc(100vh - 178px);
-  padding: 0 64px;
-  padding-top: 32px;
-  .topPart {
-    box-sizing: border-box;
-    width: 100%;
-    height: 184px;
-    padding: 32px;
-    background: #ffffff;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-    border-radius: 16px;
-    .title {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: row;
-      position: relative;
-      .isUsed {
-        position: absolute;
-        left: 194px;
-        top: 6px;
-      }
-      .tltleLeft {
-        font-size: 24px;
-        font-weight: bold;
-        color: #303133;
-      }
-      .saveBtn {
-        width: 80px;
-        height: 40px;
-        background: linear-gradient(0deg, #777dba, #6983be);
-        border-radius: 6px;
-        color: #fff;
-        border: none;
-      }
-      .delBtn {
-        width: 80px;
-        height: 40px;
-        background: #f56c6c;
-        border-radius: 6px;
-        color: #fff;
-        border: none;
-        margin-right: 24px;
-      }
-    }
-    .titleContent {
-      width: 100%;
-      padding-top: 35px;
-      box-sizing: border-box;
-      .resetPass {
-        background: #6e81bc;
-        color: #fff;
-        margin-top: 4px;
-        margin-left: -25px;
-      }
-    }
-  }
-  .content {
-    width: 100%;
-    height: calc(100% - 184px);
-    padding-top: 24px;
-    box-sizing: border-box;
-    .part {
-      width: 100%;
-      height: 720px;
-      background: #ffffff;
-      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-      border-radius: 16px;
-    }
-  }
-}
-</style>

src/views/accountManagement/components/accountsHome.vue

@@ -1,400 +0,0 @@
-<template>
-  <div class="pageBody">
-    <div class="titleBox">
-      <div class="status flex-wrap">
-        <el-radio
-          v-model="radio"
-          :label="item.id"
-          v-for="(item, index) in option"
-          :key="index"
-          >{{ item.label }}</el-radio
-        >
-      </div>
-      <Search
-        @getSearchData="getSearchData"
-        @clearSearchData="clearSearchData"
-        :isSlot="false"
-      >
-      </Search>
-    </div>
-    <div class="contantBox">
-      <div class="itemBox" v-for="(item, index) in listData" :key="index">
-        <div class="del" @click="delate(item.JobId)">
-          <i class="el-icon-close"></i>
-        </div>
-        <div>
-          <el-row>
-            <el-col :span="24" class="nameBox"
-              ><div class="name">{{ item.JobName }}</div>
-              <div class="loger" @click="toEdit(item.JobId)"></div
-            ></el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="24"></el-col>
-          </el-row>
-
-          <el-row class="conntent" v-if="radio == 1">
-            <el-col :span="12"
-              >上级组织：<span>{{ item.OrganName }}</span></el-col
-            >
-            <el-col :span="12" class="flexLeft"
-              >权限项数：<span>{{ item.AuthCount }}</span></el-col
-            >
-          </el-row>
-          <el-row class="conntent" v-if="radio == 1">
-            <el-col :span="24"
-              >拥有职员：<span>{{ item.OfficerCount }}</span></el-col
-            >
-          </el-row>
-          <el-row class="conntent2" v-if="radio == 2">
-            <el-col :span="24"
-              ><span>{{ item.UpLink }}</span></el-col
-            >
-          </el-row>
-          <el-row class="conntent">
-            <el-col :span="12">
-              状态：<span class="used" v-if="item.Status == 1">启用</span>
-              <span class="unUsed" v-else-if="item.Status == 0">停用</span>
-            </el-col>
-            <el-col :span="12" class="flexLeft">
-              <el-switch
-                @change="isUsedChange(item, index)"
-                v-model="item.Flag"
-                :active-value="true"
-                :inactive-value="false"
-                active-color="#6F81BC"
-                inactive-color="#CFD6E2"
-              >
-              </el-switch>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-      <Dialog :flag="dialogVisible">
-        <div class="closeDialog">
-          <div class="title">删除岗位</div>
-          <div class="content">是否确定要删除该岗位？</div>
-          <div class="foot right t30">
-            <el-button size="medium" type="danger" class="r24" @click="del()"
-              >删除</el-button
-            >
-
-            <el-button size="medium" @click="dialogVisible = false"
-              >取消</el-button
-            >
-          </div>
-        </div>
-      </Dialog>
-    </div>
-  </div>
-</template>
-
-<script>
-import Search from "@/layout/components/Search";
-import Dialog from "@/layout/components/Dialog";
-import { GetJobList, ChangeJobStatus ,DeleteJob} from "@/api/jobApi";
-export default {
-  data() {
-    return {
-      dialogVisible: false,
-      GroupUpid: "",
-      serachinfo: "", //搜索内容
-      delId: "",//删除项ID
-      listData: [], //列表数据
-      radio: 1,
-      option: [
-        {
-          label: "信息概览",
-          id: 1,
-        },
-        {
-          label: "组织路径",
-          id: 2,
-        },
-      ],
-    };
-  },
-  components: { Search, Dialog },
-  created() {
-    if(this.$route.query.keyWords){
-      this.serachinfo = this.$route.query.keyWords;
-    }
-    this.AccountList(this.serachinfo);
-  },
-  methods: {
-    //查询
-    getSearchData(val) {
-      this.serachinfo = val;
-      this.AccountList(val);
-    },
-
-    //清除查询
-    clearSearchData() {
-      this.AccountList();
-    },
-    //修改状态
-    async isUsedChange(value, index) {
-      let item = _.cloneDeep(value);
-      try {
-        let data = null;
-        let str = "";
-        if (item.Flag == false) {
-          data = {
-            JobId: item.JobId,
-            Status: 0,
-          };
-          str = "停用" + item.JobName + "成功";
-        } else {
-          data = {
-            JobId: item.JobId,
-            Status: 1,
-          };
-          str = "启用" + item.JobName + "成功";
-        }
-        ChangeJobStatus(data).then((result) => {
-          if (result.code == 0) {
-            this.$message.success(str);
-            this.AccountList();
-          }
-        });
-      } catch (error) {
-        this.$message.error("操作" + item.JobName + "失败");
-        item.Flag = !item.Flag;
-        this.listData[index] = _.cloneDeep(item);
-        console.log("出错了", error);
-      }
-    },
-
-    delate: function (id) {
-      this.dialogVisible = true;
-      this.delId = id;
-    },
-
-    toEdit(id) {
-      this.$router.push({
-        path: "jobs/edit",
-        query: { JobId: id },
-      });
-    },
-    //获取列表
-    async AccountList() {
-      try {
-        const result = await GetJobList({
-          QueryName: this.serachinfo,
-        });
-        if (result.code === 0) {
-          const { returnData } = result;
-          returnData.forEach((element, index) => {
-            if (element.Status == 1) {
-              element["Flag"] = true;
-            } else {
-              element["Flag"] = false;
-            }
-            returnData[index] = element;
-          });
-          this.listData = result.returnData;
-        } else {
-          this.$message.error(result.message);
-        }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    },
-
-    //删除接口
-    async del() {
-      try {
-        const result = await DeleteJob({
-        JobId: this.delId,
-      });
-      if (result.code === 0) {
-        this.dialogVisible = false;
-        this.$message.success(result.message);
-        this.AccountList();
-      }
-      } catch (error) {
-         this.dialogVisible = false;
-        // this.$message.error("删除失败");
-        console.log("出错了", error);
-      }
-
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  padding: 0 64px;
-  position: relative;
-  .titleBox {
-    position: fixed;
-    width: 100%;
-    padding: 30px 64px;
-    padding-left: 156px;
-    left: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    background: #f5f7fa;
-    z-index: 100;
-    .addBtn {
-      width: 120px;
-      height: 48px;
-      background: #f5f7fa;
-      border: 1px solid #b4b7cb;
-      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: bold;
-      color: #6f81bc;
-    }
-    .status {
-      align-items: center;
-
-      & > div {
-        margin-right: 28px;
-        .icon {
-          width: 16px;
-          height: 16px;
-          background: #6f81bc;
-          border-radius: 2px;
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: 10px;
-          position: relative;
-          top: -2px;
-        }
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-      .status2 {
-        .icon {
-          background: #f25555;
-        }
-      }
-      .status3 {
-        .icon {
-          background: #cfd6e2;
-        }
-      }
-    }
-  }
-  .contantBox {
-    padding-top: 110px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    width: calc(100% + 10px);
-    .itemBox {
-      width: calc(25% - 20px);
-      margin: 10px;
-      position: relative;
-      padding: 23px 32px;
-      background: #ffffff;
-      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-      border-radius: 16px;
-      overflow: hidden;
-      .headLine {
-        width: 100%;
-        height: 4px;
-        background: #f25555;
-        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-        border-radius: 16px;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      .onlneHead {
-        background: #6f81bc;
-        width: 100%;
-        height: 4px;
-        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-        border-radius: 16px;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      .onlneHead2 {
-        background: #cfd6e2;
-        width: 100%;
-        height: 4px;
-        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-        border-radius: 16px;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      .el-row {
-        margin: 8px 0;
-      }
-      .flexLeft {
-        display: flex;
-        justify-content: flex-end;
-        flex-direction: row;
-      }
-
-      .del {
-        position: absolute;
-        right: 24px;
-        top: 32px;
-        cursor: pointer;
-      }
-      .nameBox {
-        display: flex;
-        .name {
-          font-size: 18px;
-          font-weight: bold;
-          color: #303133;
-          width: 150px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .loger {
-          width: 24px;
-          height: 24px;
-          background: url("../../../assets/status/ic_edit.png") no-repeat;
-          background-size: 100% 100%;
-          border: 1px solid #e4e7ec;
-          border-radius: 50%;
-          margin-left: 24px;
-          cursor: pointer;
-        }
-        .loger:hover {
-          background: url("../../../assets/status/ic_edit_hovar.png") no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-
-      .conntent {
-        margin-top: 14px;
-      }
-      .conntent2 {
-        margin-top: 14px;
-        height: 40px;
-        word-break: break-all;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-      }
-      .used {
-        font-size: 16px;
-        font-weight: 400;
-        color: #6f81bc;
-      }
-      span {
-        font-size: 16px;
-        font-weight: 400;
-        color: #909399;
-      }
-    }
-  }
-}
-</style>

src/views/accountManagement/css/role.scss

@@ -1,58 +0,0 @@
-.authorityPower {
-  padding: 0 64px;
-  height: calc(100% - 64px);
-}
-.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;
-      }
-    }
-  }
-  .addApp-form-content {
-    margin-top: 40px;
-    ::v-deep .form {
-      .el-form-item {
-        margin-bottom: 0;
-        margin-right: 40px;
-      }
-      .el-input__inner {
-        height: 32px;
-        line-height: 32px;
-        min-width: 184px;
-      }
-      .content {
-        .el-form-item__content {
-          flex: 1;
-        }
-        .el-form-item__label {
-          margin-left: 27px;
-        }
-      }
-    }
-  }
-}
-.power-content {
-  margin-top: 24px;
-  height: calc(100% - 192px);
-  ::v-deep .hucRole {
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-  }
-  ::v-deep .hucPower {
-    height: calc(100% - 60vh - 24px);
-    .paren_list {
-      margin-bottom: 23px;
-    }
-  }
-}

src/views/accountManagement/edit.vue

@@ -0,0 +1,698 @@
+<template>
+  <div class="pageBody">
+    <div class="topPart">
+      <div class="title">
+        <div class="tltleLeft">编辑账号</div>
+        <!-- <div class="isUsed">
+          是否启用
+          <el-radio
+            v-model="form.isUsed"
+            v-if="form.isUsed == 1 || form.isUsed == 3"
+            :label="1"
+            >是</el-radio
+          >
+          <el-radio v-model="form.isUsed" v-if="form.isUsed == 2" :label="2"
+            >是</el-radio
+          >
+          <el-radio v-model="form.isUsed" :label="3">否</el-radio>
+        </div> -->
+        <div>
+          <!-- <button type="submmit" class="delBtn" @click="delate">删除</button> -->
+          <button type="submmit" class="saveBtn" @click="editAcc">保存</button>
+        </div>
+      </div>
+      <div class="titleContent">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row :gutter="40">
+            <el-col :span="5">
+              <el-form-item label="账号名称" prop="name">
+                <el-input
+                  v-model="form.name"
+                  maxlength="32"
+                  placeholder="请输入名称"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="登录密码" prop="passward">
+                <el-input
+                  v-model="form.passward"
+                  placeholder="*******"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2">
+              <el-button class="resetPass" size="small" @click="rest"
+                >重置密码</el-button
+              >
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="描述" prop="diesc">
+                <el-input
+                  v-model="form.diesc"
+                  maxlength="128"
+                  placeholder="描述内容描述内容描述内容描述内容描述内容描述内容"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+
+    <div class="content">
+      <!-- 用户组和角色未开启 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenRole === 0 &&
+          this.systemSetuser.OpenGroup === 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <Permissiontree
+              @getTreeData="getTreeDatas"
+              :checkedKeys="powerT"
+              :queryType="group"
+              :queryId="objID"
+              title="权限树"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Rulesofcompetency @getData="getData" title="权限规则" />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <loginpolicy
+              @getCheckedList="getCheckedList"
+              :checkedList="loginList"
+            ></loginpolicy>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 角色和用户组都开启 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenRole != 0 && this.systemSetuser.OpenGroup != 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <Organization
+              title="所属账号组"
+              :data="data"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              @getCheckedData="getTreeData"
+              :checkedIdList="checkedIdList"
+              @click="getId(arrs)"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <rolelists
+              title="角色列表"
+              @checkClick="roleClick"
+              @checkChange="checkChange"
+              :dataList="roleList"
+              :checkBoxList="checkRole"
+              :number="8"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part2">
+            <permissionlist
+              title="权限列表"
+              :RoleList="powerList"
+              :check="true"
+              class="hucPower"
+              @Competen="Competen"
+            />
+          </div>
+          <div class="part3">
+            <loginpolicy
+              @getCheckedList="getCheckedList"
+              :checkedList="loginList"
+            ></loginpolicy>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 只开启用户组 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenGroup != 0 && this.systemSetuser.OpenRole === 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <Organization
+              title="所属账号组"
+              :data="data"
+              :defaultProps="defaultProps"
+              :nodekey="'GroupId'"
+              @getCheckedData="getTreeData"
+              :checkedIdList="checkedIdList"
+              @click="getId(arrs)"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <Permissiontree
+              @getTreeData="getTreeDatas"
+              :checkedKeys="powerT"
+              :queryType="group"
+              :queryId="objID"
+              title="权限树"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part2">
+            <Rulesofcompetency @getData="getData" title="权限规则" />
+          </div>
+
+          <div class="part3">
+            <loginpolicy
+              @getCheckedList="getCheckedList"
+              :checkedList="loginList"
+            ></loginpolicy>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 只开启角色 -->
+      <el-row
+        :gutter="24"
+        v-if="
+          this.systemSetuser.OpenGroup === 0 && this.systemSetuser.OpenRole != 0
+        "
+      >
+        <el-col :span="8">
+          <div class="part">
+            <rolelists
+              title="角色列表"
+              @checkChange="checkChange"
+              @checkClick="roleClick"
+              :dataList="roleList"
+              :checkBoxList="checkRole"
+              :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-col :span="8">
+          <div class="part">
+            <loginpolicy
+              @getCheckedList="getCheckedList"
+              :checkedList="loginList"
+            ></loginpolicy>
+          </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" type="danger" class="r24">删除</el-button>
+          <el-button size="medium">取消</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 loginpolicy from "@/components/loginpolicy/index.vue";
+import rolelists from "@/components/rolelist/index.vue";
+import permissionlist from "@/components/permissionlist/index.vue";
+import Dialog from "@/layout/components/Dialog";
+import { QueryRole, RoleAuths } from "@/api/apiAuthority";
+import { getUserOne } from "@/api/AccountGroup.js";
+import { mapGetters } from "vuex";
+// import Cookies from "js-cookie";
+import { accDeaitls, deitAcc, GetRoleByGroup } from "@/api/Account.js";
+export default {
+  data() {
+    return {
+      group: "group",
+      userId: this.$route.query.userid,
+      GroupId: this.$route.query.GroupId,
+      dialogVisible: false,
+      OpenRole: this.OpenRole,
+      OpenGroup: this.OpenGroup,
+      marginB: "20px",
+      PageIndex: 1,
+      PageSize: 12,
+      PwdLengthBegin: null,
+      PwdLengthEnd: null,
+      PwdStruc: null,
+      pwd: null,
+      data: [], //账号组
+      orgId: "",
+      arrs: [],
+      TacList: [], //登录策略
+      AuthList: [], //授权信息
+      roleList: [], //角色
+      checkRoles: [], //选中的角色
+      treeData: [], //权限树数据
+      powerList: [], //权限列表
+      checkedIdList: [],
+      loginList: [], //选中展示登录策略
+      checkRole: [],
+      CheckedList: [],
+      rulesObj: [],
+      powerT: [],
+      objID: "1",
+      rules: {
+        UserName: [
+          { required: true, message: "请输入账号名称", trigger: "blur" },
+          { min: 1, max: 32, message: "长度在 1到 32 个字符", trigger: "blur" },
+        ],
+        UserPwd: [
+          { required: true, message: "请输入账号密码", trigger: "blur" },
+          { min: 8, message: "长度最少8个字符", trigger: "blur" },
+        ],
+        UserDesc: [
+          { min: 1, max: 128, message: "长度最多12个字符", trigger: "blur" },
+        ],
+      },
+      form: {
+        name: null,
+        passward: null,
+        diesc: null,
+        // isUsed: true,
+      },
+      defaultProps: {
+        children: "children",
+        label: "GroupName",
+      },
+      systemSetuser: null,
+      treeData1: [],
+      checkedAuthList: [],
+    };
+  },
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    loginpolicy,
+    rolelists,
+    permissionlist,
+    Dialog,
+  },
+
+  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, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj;
+    this.openRole = OpenRole;
+    this.OpenGroup = OpenGroup;
+    this.PwdStruc = PwdStruc;
+    this.PwdLengthBegin = PwdLengthBegin;
+    this.PwdLengthEnd = PwdLengthEnd;
+    this.editAccInfo();
+    const { GroupId } = this.$route.query;
+    this.AppId = GroupId;
+    this.systemSetuser = obj;
+    if (OpenRole) {
+      this.title = "角色";
+    }
+  },
+  mounted() {
+    this.form.UserPwd = this.generatePassword(
+      this.PwdStruc,
+      this.PwdLengthBegin,
+      this.PwdLengthEnd
+    );
+  },
+  methods: {
+    // delate: function (index) {
+    //   this.dialogVisible = true;
+    // },
+    getCheckedList(data) {
+      this.CheckedList = data;
+    },
+
+    //获取权限树回调
+    getTreeDatas(arr) {
+      this.checkedAuthList = arr;
+    },
+    rest() {
+      this.form.passward = this.generatePassword(
+        this.PwdStruc,
+        this.PwdLengthBegin,
+        this.PwdLengthEnd
+      );
+    },
+    //获取权限规则
+    getData(obj) {
+      this.rulesObj = obj;
+    },
+    generatePassword(rules, minNum, maxNum) {
+      var rulesArr = rules.split("");
+      var rulesArrLnArr = [];
+      var pwd = "";
+      var numbers = "0123456789";
+      var lower = "abcdefghijklmnopqrstuvwxyz";
+      var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      var others = "~!@#$%^&*()_";
+
+      function rand(min, max) {
+        return Math.random() * (max - min) + min;
+      }
+      var pwdLen = parseInt(rand(minNum, maxNum)); //随机生成密码长度10-12位。 // alert("密码长度：" + pwdLen);
+      var item = new Array(pwdLen); //存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
+      for (let i = 0; i < rulesArr.length; i++) {
+        if (rulesArr[i] == "1") {
+          rulesArrLnArr.push(i + 1 + "");
+        }
+      }
+      for (let i = 0; i < rulesArrLnArr.length; i++) {
+        item[rulesArrLnArr[i]] = rulesArrLnArr[i] + "";
+      }
+      for (let i = 0; i < pwdLen; i++) {
+        if (rulesArrLnArr.indexOf(i + "") == -1) {
+          item[i] = "";
+          item[i] +=
+            rulesArrLnArr[
+              parseInt(Math.random() * (rulesArrLnArr.length - 0) + 0)
+            ]; //其余部分随机生成1-4的数字。
+        }
+      } //打乱次序，重新排序，否则密码第四位永远是特殊符号。
+      item.sort(function () {
+        return 0.5 - Math.random();
+      }); //返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置
+
+      for (let j = 0; j < pwdLen; j++) {
+        if (item[j] == "4") {
+          pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1);
+        } else if (item[j] == "2") {
+          pwd += lower.charAt(Math.random() * (lower.length - 1) + 1);
+        } else if (item[j] == "1") {
+          pwd += upper.charAt(Math.random() * (upper.length - 1) + 1);
+        } else if (item[j] == "3") {
+          pwd += others.charAt(Math.random() * (others.length - 1) + 1);
+        }
+      }
+      return pwd;
+    },
+
+    //账号组树
+    getTreeData(arr) {
+      this.checkTrees = arr;
+      this.checkTrees.forEach((item) => {
+        this.orgId = item.GroupId;
+        if (item[0]) {
+          item.disabled = true;
+        }
+      });
+      this.checkedIdList = arr;
+      // let objArr = arr[arr.length - 1];
+      // if (objArr) {
+      //   this.objID = objArr.GroupId + "";
+      //   this.queryRole();
+      // }
+      if (this.checkTrees != "") {
+        this.queryRole();
+      } else {
+        this.roleList = [];
+      }
+    },
+
+    //点击角色后
+    roleClick(data) {
+      try {
+        let params = {
+          RoleId: data.RoleId,
+        };
+        RoleAuths(params).then((result) => {
+          this.powerList = result.returnData;
+        });
+      } catch (error) {
+        console.log("RoleAuths");
+        console.log(error);
+      }
+    },
+    Competen(data) {
+      this.$emit("Competen", data);
+    },
+
+    //详情查询
+    async editAccInfo() {
+      try {
+        const res = await accDeaitls({
+          UserId: this.userId,
+        });
+        if (res.code === 0) {
+          const { UserDesc, UserName, UserPwd } = res.returnData;
+          this.form.name = UserName;
+          this.form.diesc = UserDesc;
+          this.checkedIdList = res.returnData.GroupList;
+          this.loginList = res.returnData.TacList;
+
+          console.log(this.checkedIdList);
+          this.loginList.forEach((item) => {
+            if (item.IsSelected == 1) {
+              this.CheckedList.push(item);
+            }
+          });
+
+          this.$store.state.auth.authList = res.returnData.AuthList;
+
+          res.returnData.AuthList.forEach((item) => {
+            this.powerT.push(item.AuthId);
+          });
+          this.roleList = res.returnData.RoleList;
+          this.roleList.forEach((item, index) => {
+            if (item.IsSelected == 1) {
+              this.checkRole.push(index);
+              this.checkRoles.push(item);
+            }
+          });
+          this.queryRole();
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+
+    //账号编辑修改
+    async editAcc() {
+      this.treeData1 = [];
+      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 deitAcc({
+          UserDesc: this.form.diesc,
+          UserName: this.form.name,
+          UserPwd: this.form.passward,
+          AuthList: this.treeData1,
+          RoleList: this.checkRoles,
+          GroupId: this.GroupId,
+          UserId: this.userId,
+          AuthTo: this.treeData1,
+          GroupList: this.checkedIdList,
+          TacList: this.CheckedList ? this.CheckedList : [],
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          setTimeout(() => {
+            this.$router.push("/account");
+          });
+        } 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;
+    },
+    //角色列表
+    async queryRole() {
+      try {
+        const res = await GetRoleByGroup({
+          GroupId: this.orgId,
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          const userArr = [];
+          arr.forEach((item) => {
+            item.name = item.RoleName;
+            if (item.IsSelected) {
+              userArr.push(item);
+            }
+          });
+
+          this.roleList = userArr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pageBody {
+  width: 100%;
+  height: calc(100vh - 178px);
+  padding: 0 146px;
+  .topPart {
+    box-sizing: border-box;
+    width: 100%;
+    height: 184px;
+    padding: 32px;
+    background: #ffffff;
+    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 16px;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      position: relative;
+      .isUsed {
+        position: absolute;
+        left: 194px;
+        top: 6px;
+      }
+      .tltleLeft {
+        font-size: 24px;
+        font-weight: bold;
+        color: #303133;
+      }
+      .saveBtn {
+        width: 80px;
+        height: 40px;
+        background: linear-gradient(0deg, #777dba, #6983be);
+        border-radius: 6px;
+        color: #fff;
+        border: none;
+      }
+      .delBtn {
+        width: 80px;
+        height: 40px;
+        background: #f56c6c;
+        border-radius: 6px;
+        color: #fff;
+        border: none;
+        margin-right: 24px;
+      }
+    }
+    .titleContent {
+      width: 100%;
+      padding-top: 35px;
+      box-sizing: border-box;
+      .resetPass {
+        background: #6e81bc;
+        color: #fff;
+        margin-top: 4px;
+        margin-left: -25px;
+      }
+    }
+  }
+  .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;
+    }
+    .img-onlyRead {
+      pointer-events: none;
+    }
+    .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/accountManagement/index.vue

@@ -1,23 +1,416 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-26 09:25:16
- * @LastEditTime: 2022-01-07 11:47:25
- * @LastEditors: Please set LastEditors
- * @Description: 用户组管理
- * @FilePath: \Foshan4A2.0\src\views\accountGroupManagement\index.vue
--->
 <template>
-  <div class="accountGroup">
-    <router-view />
+  <div class="pageBody">
+    <div class="titleBox">
+      <div class="status flex-wrap">
+        <div class="status1"><span class="icon"></span>在线</div>
+        <div class="status2"><span class="icon"></span>离线</div>
+        <div class="status3"><span class="icon"></span>禁用</div>
+      </div>
+      <Search
+        @getSearchData="getSearchData"
+        @clearSearchData="clearSearchData"
+        :isSlot="true"
+      >
+        <el-button class="addBtn" @click="addAccount">新增账号</el-button>
+      </Search>
+    </div>
+    <div class="contantBox">
+      <div class="itemBox" v-for="(item, index) in newData" :key="index">
+        <div
+          :class="
+            item.Status === 1
+              ? 'onlneHead'
+              : item.Status === 2
+              ? 'headLine'
+              : 'onlneHead2'
+          "
+        ></div>
+
+        <div class="del" @click="delate(item.UserId)">
+          <i class="el-icon-close"></i>
+        </div>
+        <div>
+          <el-row>
+            <el-col :span="24" class="nameBox"
+              ><div class="name">{{ item.UserName }}</div>
+              <div
+                class="loger"
+                @click="toEdit(item.UserId, item.GroupId)"
+              ></div
+            ></el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="24">{{ item.group }}</el-col>
+          </el-row>
+
+          <el-row class="conntent">
+            <el-col :span="12"
+              >登录次数：<span>{{ item.LoginCount }}</span></el-col
+            >
+            <el-col :span="12" class="flexLeft"
+              >异常登录：<span>{{ item.ExceptionCount }}</span></el-col
+            >
+          </el-row>
+          <el-row class="conntent">
+            <el-col :span="24"
+              >权限项数：<span>{{ item.AuthCount }}</span></el-col
+            >
+          </el-row>
+          <el-row class="conntent">
+            <el-col :span="12">
+              状态：<span
+                class="used"
+                v-if="item.Status == 1 || item.Status == 2"
+                >启用</span
+              >
+              <span class="unUsed" v-else-if="item.Status == 3">停用</span>
+            </el-col>
+            <el-col :span="12" class="flexLeft">
+              <el-switch
+                @change="isUsedChange(item.Flag, item.UserId)"
+                v-model="item.Flag"
+                :active-value="true"
+                :inactive-value="false"
+                active-color="#6F81BC"
+                inactive-color="#CFD6E2"
+              >
+              </el-switch>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <Dialog :flag="dialogVisible">
+        <div class="closeDialog">
+          <div class="title">删除账号</div>
+          <div class="content">是否确定要删除该账号？</div>
+          <div class="foot right t30">
+            <el-button size="medium" type="danger" class="r24" @click="del()"
+              >删除</el-button
+            >
+
+            <el-button size="medium" @click="dialogVisible = false"
+              >取消</el-button
+            >
+          </div>
+        </div>
+      </Dialog>
+    </div>
+    <template v-if="isAchiveBottom">
+      <div class="nouplist">无可加载数据</div>
+    </template>
   </div>
 </template>
 
+<script>
+import Search from "@/layout/components/Search";
+import Dialog from "@/layout/components/Dialog";
+import { GetAccountList, ChangeUserStatus, delAccount } from "@/api/Account";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      newData: [],
+      newDatas: [],
+      deluserId: "",
+      val: "",
+      UserId: "",
+      GroupId: "",
+      GroupUpid: "",
+      serachinfo: "", //搜索内容
+      value: "",
+      PageIndex: 1,
+      PageSize: 100,
+      isAchiveBottom: false,
+      isAchiveBottoms: false,
+    };
+  },
+  components: { Search, Dialog },
+  created() {
+    if (this.serachinfo == "") {
+      this.AccountList();
+    } else {
+    }
+    window.onscroll = () => {
+      //变量scrollTop是滚动条滚动时，距离顶部的距离
+      var scrollTop =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      //变量windowHeight是可视区的高度
+      var windowHeight =
+        document.documentElement.clientHeight || document.body.clientHeight;
+      //变量scrollHeight是滚动条的总高度
+      var scrollHeight =
+        document.documentElement.scrollHeight || document.body.scrollHeight;
+      //滚动条到底部的条件(距底部20px时触发加载)
+      if (
+        scrollTop + windowHeight >= scrollHeight - 20 &&
+        !this.isAchiveBottoms
+      ) {
+        this.isAchiveBottoms = true;
+        this.pageNum += 1;
+        this.AccountList();
+        //延时触发数据加载
+        setTimeout(() => {
+          this.newData.forEach((element) => {
+            this.newDatas.push(element);
+          });
+          if (this.newData.length == 0) {
+            this.isAchiveBottom = true;
+          }
+          //后端需要进行分页，然后前端从后端拿来实现滚动加载
+          //这里利用数组push来模拟从后端拿到的数据
+          // this.arrs.push("test");
+          this.isAchiveBottoms = false;
+        }, 500);
+      }
+    };
+  },
+  methods: {
+    //查询
+    getSearchData(val) {
+      this.serachinfo = val;
+      this.AccountList(val);
+    },
+
+    //清除查询
+    clearSearchData() {
+      this.AccountList();
+    },
+    //修改状态
+    async isUsedChange(Flag, UserId) {
+      const result = await ChangeUserStatus({
+        Flag: Flag,
+        UserId,
+      });
+      if (result.code === 0) {
+        this.AccountList();
+        this.$message.success(result.message);
+      } else {
+        this.$message.error(result.$message);
+      }
+    },
+
+    delate: function (UserId) {
+      this.dialogVisible = true;
+      this.deluserId = UserId;
+    },
+
+    toEdit(userid, GroupIds) {
+      this.UserId = userid;
+      this.$router.push({
+        path: "accountEdit",
+        query: { userid: this.UserId },
+      });
+    },
+    addAccount: function () {
+      this.$router.push({
+        path: "accountAdd",
+        query: { GroupId: -1 },
+      });
+    },
+    //获取列表
+    async AccountList() {
+      try {
+        const result = await GetAccountList({
+          QueryName: this.serachinfo,
+          PageIndex: this.PageIndex,
+          PageSize: this.PageSize,
+        });
+        if (result.code === 0) {
+          this.newData = result.returnData.records;
+          this.newData.forEach((element, index) => {
+            if (element.Status == 1) {
+              element["Flag"] = true;
+            } else {
+              element["Flag"] = false;
+            }
+            this.newData[index] = element;
+          });
+          result.returnData.records.forEach((element) => {
+            this.newDatas.push(element);
+          });
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+
+    //删除接口
+    async del() {
+      const result = await delAccount({
+        UserId: this.deluserId,
+      });
+      if (result.code === 0) {
+        this.dialogVisible = false;
+        this.$message.success(result.message);
+        this.AccountList();
+      } else if (result.code === -1) {
+        this.$message.error("后端错误，稍后请重试");
+      } else {
+        this.$message.success(result.message);
+      }
+    },
+  },
+};
+</script>
+
 <style lang="scss" scoped>
-.accountGroup {
-  min-height: calc(100vh - 176px);
-  overflow-x: auto;
-  > div {
-    min-height: calc(100vh - 176px);
+.pageBody {
+  width: 100%;
+  padding: 30px 64px;
+  .titleBox {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .addBtn {
+      width: 120px;
+      height: 48px;
+      background: #f5f7fa;
+      border: 1px solid #b4b7cb;
+      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #6f81bc;
+    }
+    .status {
+      align-items: center;
+
+      & > div {
+        margin-right: 28px;
+        .icon {
+          width: 16px;
+          height: 16px;
+          background: #6f81bc;
+          border-radius: 2px;
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: 10px;
+          position: relative;
+          top: -2px;
+        }
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .status2 {
+        .icon {
+          background: #f25555;
+        }
+      }
+      .status3 {
+        .icon {
+          background: #cfd6e2;
+        }
+      }
+    }
+  }
+  .contantBox {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: calc(100% + 10px);
+    .itemBox {
+      width: calc(20% - 20px);
+      margin: 10px;
+      position: relative;
+      padding: 23px 32px;
+      background: #ffffff;
+      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 16px;
+      overflow: hidden;
+      .headLine {
+        width: 100%;
+        height: 4px;
+        background: #f25555;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .onlneHead {
+        background: #6f81bc;
+        width: 100%;
+        height: 4px;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .onlneHead2 {
+        background: #cfd6e2;
+        width: 100%;
+        height: 4px;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .el-row {
+        margin: 8px 0;
+      }
+      .flexLeft {
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: row;
+      }
+
+      .del {
+        position: absolute;
+        right: 24px;
+        top: 32px;
+        cursor: pointer;
+      }
+      .nameBox {
+        display: flex;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+          color: #303133;
+          width: 120px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .loger {
+          width: 24px;
+          height: 24px;
+          background: url("../../assets/status/ic_edit.png") no-repeat;
+          background-size: 100% 100%;
+          border: 1px solid #e4e7ec;
+          border-radius: 50%;
+          margin-left: 94px;
+          margin-top: -2px;
+          cursor: pointer;
+        }
+        .loger:hover {
+          background: url("../../assets/status/ic_edit_hovar.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .conntent {
+        margin-top: 14px;
+      }
+      .used {
+        font-size: 16px;
+        font-weight: 400;
+        color: #6f81bc;
+      }
+      span {
+        font-size: 16px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
   }
 }
 </style>

src/views/accountManagement/minixs/pwdRules.js

@@ -0,0 +1,118 @@
+//16进制（数值+字母）
+function random1(len) {
+  var pwd = "";
+  for (var idx = 0; idx < len; idx++) {
+    pwd = pwd + ((Math.random() * 16) & (0x5 | 0x9)).toString(16);
+  }
+  return pwd;
+}
+
+function random2(formation, len) {
+  //ASCII 33 ~ 126
+  // 33-47，58-64，91-96，123-126 特殊符号
+  // 48-57 数字
+  // 65-90 大写字母
+  // 97-122 小写字母
+  let pwd = "",
+    f_i = 0;
+  for (let i = 0; i < len; i++) {
+    for (;; f_i++) {
+      let _i = f_i % 4;
+      if (formation[_i] == 1) {
+        switch (_i) {
+          case 0: // 大写字母
+            pwd = pwd + String.fromCharCode(parseInt(Math.random() * 26 + 65));
+            break;
+          case 1: // 小写字母
+            pwd = pwd + String.fromCharCode(parseInt(Math.random() * 26 + 97));
+            break;
+          case 2: // 特殊符号
+            pwd = pwd + String.fromCharCode(parseInt(Math.random() * 15 + 33));
+            break;
+          case 3: // 数字
+            pwd = pwd + String.fromCharCode(parseInt(Math.random() * 10 + 48));
+            break;
+        }
+        f_i++;
+        break;
+      }
+    }
+  }
+  console.log(pwd);
+}
+//纯数字
+function random3(len) {
+  var pwd = "";
+  for (var idx = 0; idx < len; idx++) {
+    var seed = parseInt(Math.random() * 9);
+    pwd = pwd + seed;
+  }
+  return pwd;
+}
+
+function create() {
+  var result = document.getElementById("result1");
+  for (var i = 0; i < 10; i++) {
+    result.innerText = result.innerText + random1(6) + "\n";
+  }
+  var result = document.getElementById("result2");
+  for (var i = 0; i < 10; i++) {
+    result.innerText = result.innerText + random2(6) + "\n";
+  }
+  var result = document.getElementById("result3");
+  for (var i = 0; i < 10; i++) {
+    result.innerText = result.innerText + random3(6) + "\n";
+  }
+}
+
+function generatePassword(rules, minNum, maxNum) {
+  var rulesArr = rules.split("");
+  var rulesArrLnArr = [];
+  var pwd = "";
+  var numbers = "0123456789";
+  var lower = "abcdefghijklmnopqrstuvwxyz";
+  var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  var others = "~!@#$%^&*()_";
+
+  function rand(min, max) {
+    return Math.random() * (max - min) + min;
+  }
+  var pwdLen = parseInt(rand(minNum, maxNum)); //随机生成密码长度10-12位。
+  // alert("密码长度：" + pwdLen);
+  var item = new Array(pwdLen); //存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
+  for (let i = 0; i < rulesArr.length; i++) {
+    if (rulesArr[i] == "1") {
+      rulesArrLnArr.push(i + 1 + "");
+    }
+  }
+  for (let i = 0; i < rulesArrLnArr.length; i++) {
+    item[rulesArrLnArr[i]] = rulesArrLnArr[i] + "";
+    console.log(`rulesArrLnArr[i]`, rulesArrLnArr[i]);
+  }
+  for (i = 0; i < pwdLen; i++) {
+    if (rulesArrLnArr.indexOf(i + "") == -1) {
+      item[i] = "";
+      item[i] +=
+        rulesArrLnArr[
+          parseInt(Math.random() * (rulesArrLnArr.length - 0) + 0)
+        ]; //其余部分随机生成1-4的数字。
+    }
+  }
+  //打乱次序，重新排序，否则密码第四位永远是特殊符号。
+  item.sort(function () {
+    return 0.5 - Math.random();
+  }); //返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置
+
+  for (j = 0; j < pwdLen; j++) {
+    if (item[j] == "4") {
+      pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1);
+    } else if (item[j] == "1") {
+      pwd += lower.charAt(Math.random() * (lower.length - 1) + 1);
+    } else if (item[j] == "2") {
+      pwd += upper.charAt(Math.random() * (upper.length - 1) + 1);
+    } else if (item[j] == "3") {
+      pwd += others.charAt(Math.random() * (others.length - 1) + 1);
+    }
+  }
+  return pwd;
+}

src/views/accountManagement/minixs/roleData.js

@@ -1,48 +0,0 @@
-/*
- * @Author: your name
- * @Date: 2021-12-24 11:36:07
- * @LastEditTime: 2022-01-07 11:29:53
- * @LastEditors: Please set LastEditors
- * @Description: 权限公用
- * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\roleData.js
- */
-import { GetRoleByGroup } from '@/api/AccountGroup'
-export default {
-  data () {
-    return {
-      arrs: []
-    }
-  },
-  methods: {
-    // 根据账号组获取角色
-    async getRoleByGroup (id) {
-      try {
-        const res = await GetRoleByGroup({
-          GroupId: id
-        })
-        if (res.code === 0) {
-          const arr = res.returnData
-          if (id == -1) {
-            arr.forEach(item => {
-              item.name = item.RoleName
-            });
-            this.arrs = arr
-          } else {
-            const datas = []
-            arr.forEach(item => {
-              item.name = item.RoleName
-              if (item.IsSelected == 1) {
-                datas.push(item)
-              }
-            });
-            this.arrs = datas
-          }
-        } else {
-          this.$message.error(res.message)
-        }
-      } catch (error) {
-        console.log('出错了', error)
-      }
-    },
-  }
-}

src/views/accountManagement/minixs/treeData.js

@@ -6,26 +6,31 @@
  * @Description: 获取权限树
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\treeData.js
  */
-import { translateDataToTreeAll } from '@/utils/validate'
-import { GetGroupTree } from '@/api/AccountGroup'
+import {
+  translateDataToTreeAll
+} from '@/utils/validate'
+import {
+  GetGroupTree
+} from '@/api/AccountGroup'
 
 export default {
   data() {
     return {
       dataList: {
         GroupId: -1,
-        GroupName: "系统账号组",
+        GroupName: "系统权限组",
         GroupUpid: -2,
         UserCount: 0,
         AuthCount: 0,
         Status: 1,
         QueryTarget: 0,
         children: []
-      }
+      },
+      dataArr: []
     }
   },
   created() {
-    this.getGroupTree()
+    // this.getGroupTree()
   },
   methods: {
     async getGroupTree(name = '') {
@@ -39,7 +44,7 @@ export default {
           })
           const obj = {
             GroupId: -1,
-            GroupName: "系统账号组",
+            GroupName: "系统权限组",
             GroupUpid: -2,
             UserCount: 0,
             AuthCount: 0,
@@ -48,10 +53,20 @@ export default {
             children: translateDataToTreeAll(result.returnData, 'GroupUpid', 'GroupId')
           }
           this.dataList = obj
+          this.dataArr = result.returnData;
+          this.dataArr.push({
+            GroupId: -1,
+            GroupName: "系统权限组",
+            GroupUpid: -2,
+            UserCount: 0,
+            AuthCount: 0,
+            Status: 1,
+            QueryTarget: 0,
+          })
         } else {
           const obj = {
             GroupId: -1,
-            GroupName: "系统账号组",
+            GroupName: "系统权限组",
             GroupUpid: -2,
             UserCount: 0,
             AuthCount: 0,
@@ -60,6 +75,7 @@ export default {
             children: []
           }
           this.dataList = obj
+          this.dataArr.push(obj)
         }
       } catch (error) {
         console.log('出错了', error)

src/views/dashboard/index.vue

@@ -62,46 +62,52 @@ export default {
       inputFlag: false,
       //搜索信息
       selectArr: [
+         {
+          id: 1,
+          name: "账号管理",
+          value: 1,
+        },
         {
           id: 2,
-          name: '权限组管理',
-          value: 2
+          name: "账号组管理",
+          value: 2,
         },
         {
           id: 3,
-          name: '权限项管理',
-          value: 3
+          name: "权限项管理",
+          value: 3,
         },
         {
           id: 4,
-          name: '角色管理',
-          value: 4
+          name: "角色管理",
+          value: 4,
         },
         {
           id: 5,
-          name: '组织管理',
-          value: 5
+          name: "组织管理",
+          value: 5,
         },
         {
           id: 6,
-          name: '岗位管理',
-          value: 6
+          name: "岗位管理",
+          value: 6,
         },
         {
           id: 7,
-          name: '职员管理',
-          value: 7
+          name: "职员管理",
+          value: 7,
         },
+
         {
           id: 8,
-          name: '登录策略',
-          value: 8
+          name: "登录策略",
+          value: 8,
         },
         {
           id: 10,
-          name: '系统设置',
-          value: 10
-        }
+          name: "系统设置",
+          value: 10,
+        },
       ],
       //分类信息
       flList: [],