-

zhangwei

3 天以前 89b94f3cc1aa492b3223b97f3312d8eca004032b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
    <div v-loading="state.loading">
        <div style="text-align: right">
            <div style="margin-right: 10px"><el-switch v-model="state.horizontal"></el-switch> 横向/纵向</div>
        </div>
        <div style="height: 500px">
            <vue3-tree-org
                :data="state.orgData"
                :props="{ id: 'id', pid: 'pid', label: 'name', expand: 'expand', children: 'children' }"
                :label-style="state.style"
                :default-expand-level="100"
                :horizontal="state.horizontal"
                :collapsable="state.collapsable"
                :only-one-node="state.onlyOneNode"
                :clone-node-drag="state.cloneNodeDrag"
                :node-draggable="state.nodeDraggable"
                style="background-color: var(--el-bg-color)"
            >
                <template v-slot="{ node }">
                    <div class="tree-org-node__text node-label">
                        <div class="node-title">{{ node.label }}</div>
                        <div class="node-id">编码：{{ node.id }}</div>
                    </div>
                </template>
                <template v-slot:expand="{ node }">
                    <div>{{ node.children.length }}</div>
                </template>
            </vue3-tree-org>
        </div>
    </div>
</template>
 
<script lang="ts" setup name="orgTree">
import { onMounted, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
 
import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi } from '/@/api-services/api';
 
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const currentNodeStyle = { color: '#FFFFFF', background: '#3B3B3B' };
const state = reactive({
    loading: false,
    orgData: [] as any,
    horizontal: false,
    collapsable: true,
    onlyOneNode: false,
    cloneNodeDrag: false,
    nodeDraggable: false,
    style: {
        background: 'var(--el-color-primary)', //'#FF5C00',
        color: '#FFFFFF',
    },
});
 
onMounted(async () => {
    state.loading = true;
    var res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
    var d = res.data.result ?? [];
    state.orgData = d[0] ?? []; // 默认第一个树分支
    if (state.orgData.id == userInfos.value.orgId) state.orgData.style = currentNodeStyle;
    else InitOrg(state.orgData.children, userInfos.value.orgId);
    state.loading = false;
});
 
// 递归遍历
const InitOrg = (orgData: any, id: any) => {
    if (orgData && orgData.length > 0) {
        orgData.forEach(function (u: any) {
            if (u.id == id) {
                u.style = currentNodeStyle;
                return;
            } else {
                InitOrg(u.children, id);
            }
        });
    }
};
</script>
 
<style lang="scss" scoped>
.tree-org-node__text {
    // text-align: left;
    font-size: 14px;
    .node-title {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
    .node-id {
        font-size: 10px;
    }
}
</style>