|
|
@@ -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>
|
