添加用户组树

public/config.js

@@ -1,2 +1,2 @@
 var PLATFROM_CONFIG = {};
-PLATFROM_CONFIG.baseUrl ="http://106.14.243.117:9002" // http请求地址
+PLATFROM_CONFIG.baseUrl = "http://106.14.243.117:8999" // http请求地址

src/components/usergrouptree/index.vue

@@ -0,0 +1,128 @@
+<!--
+ * @Author: zk
+ * @Date: 2022-02-09 15:47:09
+ * @LastEditTime: 2022-02-09 16:51:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 用户组树
+ * @FilePath: \Foshan4A4.0\src\components\usergrouptree\index.vue
+-->
+<template>
+  <div class="userGroupTree">
+    <div class="head">
+      <p>{{ title }}</p>
+    </div>
+    <div class="content">
+      <el-scrollbar style="height: 100%">
+        <el-tree :data="data" show-checkbox :check-strictly="true" @check-change="currentChange" @node-click="handleNodeClick" :defaultProps="defaultProps" :expand-on-click-node="false" node-key="GroupId" default-expand-all ref="tree" highlight-current>
+          <span class="custom-tree-node" slot-scope="{ data }">
+            {{ data.GroupName }}
+          </span>
+        </el-tree>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetGroupTree } from '@/api/AccountGroup'
+import { translateDataToTreeAll } from "@/utils/validate"
+export default {
+  name: 'UserGroupTree',
+  props: {
+    title: { //标题
+      type: String,
+      default: "",
+    },
+    checkedKeys: {
+      //已选中
+      type: Array,
+      default: () => [],
+    },
+  },
+  data () {
+    return {
+      data: [], //tree数据
+      checkedList: [], //已选中数据
+      defaultProps: {
+        children: "children",
+        label: "GroupName",
+      },
+      pageIndex: 1,
+      pageSize: 20
+    }
+  },
+  watch: {
+    checkedKeys: {
+      handler (val) {
+        this.checkedList = val;
+        this.$refs.tree.setCheckedKeys(val);
+      },
+      deep: true,
+    },
+  },
+  created () {
+    this.getGroupTree()
+  },
+  methods: {
+    //复选框选中
+    currentChange () {
+      const arr = this.$refs.tree.getCheckedNodes()
+      this.$emit("getTreeData", arr)
+    },
+    handleNodeClick (data) {
+      console.log(data)
+    },
+    async getGroupTree () {
+      const result = await GetGroupTree({
+        QueryName: '',
+        PageIndex: this.pageIndex,
+        PageSize: this.pageSize
+      })
+      const datas = result.returnData
+      const tree = translateDataToTreeAll(datas, 'GroupUpid', 'GroupId')
+      const obj = {
+        AuthCount: 0,
+        GroupId: 0,
+        GroupName: "系统用户组",
+        GroupUpid: 0,
+        QueryTarget: 0,
+        Status: 0,
+        UserCount: 0,
+        disabled: true,
+        children: tree
+      }
+      this.data = [obj]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.userGroupTree {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+  box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+  border-radius: 16px;
+  padding: 0 32px 0 32px;
+  .head {
+    width: 100%;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    p {
+      margin: 0;
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+    }
+  }
+  ::v-deep .content {
+    .custom-tree-node {
+      margin-left: 10px;
+    }
+  }
+}
+</style>

src/views/staffManagement/compontents/staffEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2021-11-29 11:26:07
- * @LastEditTime: 2022-01-18 13:59:57
+ * @LastEditTime: 2022-02-09 16:15:26
  * @LastEditors: Please set LastEditors
  * @Description:编辑职员
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityPower.vue
@@ -40,6 +40,9 @@
       <div class="r24 flex1 part">
         <Organization ref="Organization" :defaultProps="defaultProps" :lessData="lessData" :mainData="mainData" :vice="true" :data="data" @getTreeData="getOrgan" @getTreeindex="getTreeindex" @radioChange="radioChange" :checkedKeys="orgCheckedKeys" :checkBoxList="checkBoxList" :radioCheck="radioNum" @checkChange="lessChecks" nodekey="OrganId" title="所属组织及所属岗位" />
       </div>
+      <div class="r24 flex1 part">
+        <Usergroup title="用户组树" />
+      </div>
       <!--有角色-->
       <template v-if="openRole">
         <div class="r24 flex1 part">
@@ -81,6 +84,7 @@ import Organization from "@/components/organization";
 import Permissionlist from "@/components/permissionlist";
 import Rolelist from "@/components/rolelist";
 import Loginpolicy from "@/components/loginpolicy";
+import Usergroup from "@/components/usergrouptree";
 import treeData from "../minixs/treeData";
 import { mapGetters } from "vuex";
 import { RoleAuths } from "@/api/apiAuthority";
@@ -102,6 +106,7 @@ export default {
     Permissionlist,
     Rolelist,
     Loginpolicy,
+    Usergroup
   },
   data () {
     return {