for_client/src/views/data-fill/components/DivisionTree1.vue

<template>
    <ElTree class="hc-tree-node tree-line" ref="ElTreeRef" :props="ElTreeProps" :load="ElTreeLoadNode" lazy highlight-current accordion node-key="primaryKeyId"
            show-checkbox :default-expanded-keys="defaultExpandedCids" @node-click="ElTreeClick" :indent="0">
        <template #default="{ node, data }">
            <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
                <div class="label division" :class="node.level === 1?'level-name':node.level">{{ node.label }}</div>
            </div>
        </template>
    </ElTree>
</template>

<script setup>
import {ref,nextTick,watch} from "vue";
import dataFillQuery from '~api/data-fill/query';
import {isItem,getArrValue,getObjValue} from "vue-utils-plus"

//参数
const props = defineProps({
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    autoExpandKeys: {
        type: Array,
        default: () => ([])
    },
    idPrefix: {
        type: String,
        default: 'division-tree-'
    },
    isAutoClick: {
        type: Boolean,
        default: true
    }
})

//变量
const ElTreeRef = ref(null)
const ElTreeProps = ref({
    label: 'title',
    children: 'children',
    isLeaf: 'notExsitChild'
})
const TreeExpandKey = ref(props.autoExpandKeys)
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const idPrefix = ref(props.idPrefix);

//监听
watch(() => [
    props.autoExpandKeys,
    props.projectId,
    props.contractId,
    props.idPrefix,
], ([expandKeys, UserProjectId, UserContractId,UserIdPrefix]) => {
    TreeExpandKey.value = expandKeys
    projectId.value = UserProjectId
    contractId.value = UserContractId
    idPrefix.value = UserIdPrefix
})

//事件
const emit = defineEmits(['nodeTap', 'nodeLoading', 'relationTap'])

//树形结构异步加载数据
const defaultExpandedCids = ref([])
const ElTreeLoadNode = async (node, resolve) => {
    let contractIdRelation = '', parentId = '', primaryKeyId = '';
    if (node.level !== 0) {
        const nodeData = getObjValue(node?.data);
        contractIdRelation = nodeData?.contractIdRelation || ''
        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
        primaryKeyId = nodeData?.id || ''
    }
    //获取数据
    const {error, code, data} = await dataFillQuery.queryWbsTreeData({
        contractId: contractId.value || '',
        contractIdRelation,
        primaryKeyId,
        parentId
    })
    //处理数据
    if (!error && code === 200) {
        let clickKey = '', defaultExpandedArr = [];
        const keys = TreeExpandKey.value || []
        const resData = getArrValue(data)
        if (keys.length > 0) {
            let lastKey = keys[keys.length-1];
            for (const item of resData) {
                //自动展开
                if (isItem(keys,item?.primaryKeyId)) {
                    defaultExpandedArr.push(item?.primaryKeyId)
                }
                //最后一个，选中点击
                if (item?.primaryKeyId === lastKey) {
                    clickKey = item?.primaryKeyId
                }
            }
        } else if (node.level === 0) {
            defaultExpandedArr.push(resData[0]?.primaryKeyId)
        }
        //自动展开
        defaultExpandedCids.value = defaultExpandedArr
        if (node.level === 0) {
            emit('nodeLoading')
        }
        resolve(resData)
        //最后一个，执行点击
        if (props.isAutoClick && clickKey) {
            await nextTick(() => {
                document.getElementById(`${idPrefix.value}${clickKey}`)?.click()
            })
        }
    } else {
        if (node.level === 0) {
            emit('nodeLoading')
        }
        resolve([])
    }
}

//节点被点击
const ElTreeClick = async (data,node) => {
    emit('nodeTap', {node, data})
}

//鼠标右键事件
const ElTreeRelationClick = (e,data,node) => {
    if (node.level !== 1) {
        e.preventDefault();
        emit('relationTap', {node, data})
    }
}

</script>

<style lang="scss" scoped>
@import "../../../styles/app/tree.scss";
</style>
<style lang="scss">
.hc-tree-node .el-tree-node__label {
    flex: 1;
}
</style>