for_client/src/views/ledger/components/WbsTree.vue

<template>
    <ElTree
        ref="ElTreeRef" :default-expanded-keys="defaultExpandedCids" :indent="0" :load="ElTreeLoadNode"
        :props="ElTreeProps"
        accordion class="hc-tree-node tree-line" highlight-current
        lazy node-key="primaryKeyId"
        @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu"
    >
        <template #default="{ node, data }">
            <div :id="`${idPrefix}${data.primaryKeyId}`" class="data-custom-tree-node">
                <!-- 树组件，节点名称 -->
                <div :class="node.level === 1 ? 'level-name' : ''" class="label">
                    <span
                        v-if="isColor"
                        :class="data?.colorStatus === 2 ? 'text-blue' : data?.colorStatus === 3 ? 'text-orange' : data?.colorStatus === 4 ? 'text-green' : ''"
                    >{{
                        node.label
                    }}</span>
                    <span v-else>{{ node.label }}</span>
                </div>
                <!-- 树组件，操作菜单 -->
                <div
                    v-if="node.level !== 1 && menusData.length > 0" :class="node.showTreeMenu ? 'show' : ''"
                    class="menu-icon"
                >
                    <div
                        class="cu-tree-node-popover-menu-icon"
                        @click.prevent.stop="ElTreeLabelContextMenu($event, data, node)"
                    >
                        <HcIcon name="menu" ui="text-2xl" />
                    </div>
                </div>
                <!-- 树组件，操作菜单 END -->
            </div>
        </template>
    </ElTree>
    <!-- 右键菜单 -->
    <HcContextMenu v-if="menusData.length > 0" ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect">
        <template #mark="{ item }">
            <HcIcon :fill="treeRefData?.isFirst" :name="item.icon" class="menu-item-icon" />
            <span class="menu-item-name">{{ treeRefData?.isFirst ? '取消标记为首件' : '标记为首件' }}</span>
        </template>
        <template #sort="{ item }">
            <HcIcon :line="false" :name="item.icon" class="menu-item-icon" />
            <span class="menu-item-name">{{ item.label }}</span>
        </template>
    </HcContextMenu>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import dataFillQuery from '~api/data-fill/query'
import { getArrValue, getObjValue, isArrItem } from 'js-fast-way'
import { useAppStore } from '~src/store'

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

//事件
const emit = defineEmits(['menuTap', 'nodeTap'])
//变量
const ElTreeRef = ref(null)
const treeRefNode = ref(null)
const treeRefData = ref(null)
const ElTreeProps = ref({
    label: 'title',
    children: 'children',
    isLeaf: 'notExsitChild',
})
const menusData = ref(props.menus)
const menuMark = ref(props.isMark)
const isAutoKeys = ref(props.isAutoKeys)
const TreeExpandKey = ref(props.autoExpandKeys)
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const idPrefix = ref(props.idPrefix)
const useAppState = useAppStore()
const contractInfo = ref(useAppState.getContractInfo)
const { contractType } = contractInfo.value
const classifyType = ref(contractType === 2 ? '2' : '1')
//监听
watch(() => [
    props.menus,
    props.isMark,
    props.isAutoKeys,
    props.autoExpandKeys,
    props.projectId,
    props.contractId,
    props.idPrefix,
], ([menus, isMark, AutoKeys, expandKeys, UserProjectId, UserContractId, UserIdPrefix]) => {
    menusData.value = menus
    menuMark.value = isMark
    isAutoKeys.value = AutoKeys
    TreeExpandKey.value = expandKeys
    projectId.value = UserProjectId
    contractId.value = UserContractId
    idPrefix.value = UserIdPrefix
})

//树形结构异步加载数据
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,
        classifyType: classifyType.value,
        tableOwner:'1',
    })
    //处理数据
    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 (isArrItem(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
        resolve(resData)
        //最后一个，执行点击
        if (props.isAutoClick && clickKey) {
            await nextTick(() => {
                document.getElementById(`${idPrefix.value}${clickKey}`)?.click()
            })
        }
    } else {
        resolve([])
    }
}

//节点被点击
const ElTreeClick = async (data, node) => {
    if (isAutoKeys.value) {
        let autoKeysArr = []
        await getNodeExpandKeys(node, autoKeysArr)
        const autoKeys = autoKeysArr.reverse()
        emit('nodeTap', { node, data, keys: autoKeys })
    } else {
        emit('nodeTap', { node, data, keys: [] })
    }
}

//处理自动展开的节点KEY
const getNodeExpandKeys = async (node, newKeys) => {
    const parent = node?.parent ?? []
    const primaryKeyId = node?.data?.primaryKeyId ?? ''
    if (primaryKeyId) {
        newKeys.push(primaryKeyId)
        await getNodeExpandKeys(parent, newKeys)
    }
}

//鼠标右键事件
const contextMenuRef = ref(null)
const ElTreeLabelContextMenu = (e, data, node) => {
    const rows = menusData.value || []
    if (node.level !== 1 && rows.length > 0) {
        e.preventDefault()
        treeRefNode.value = node
        treeRefData.value = data
        //展开菜单
        contextMenuRef.value?.showMenu(e)
    }
}

//鼠标右键菜单被点击
const handleMenuSelect = ({ key }) => {
    const node = treeRefNode.value
    const data = treeRefData.value
    //如果为标记菜单
    if (key === 'mark' && menuMark.value) {
        if (data.isFirst === true) {
            emit('menuTap', { key: 'cancel_mark', node, data })
        } else {
            emit('menuTap', { key: 'mark', node, data })
        }
    } else {
        emit('menuTap', { key, node, data })
    }
}

//设置树菜单的标记数据
const setElTreeMenuMark = (keys, isFirst) => {
    keys.forEach(item => {
        //根据 data 或者 key 拿到 Tree 组件中的 node
        let node = ElTreeRef.value.getNode(item)
        if (node) node.data.isFirst = isFirst
    })
}

//设置树菜单的标记数据
const removeElTreeNode = (key) => {
    //根据 data 或者 key 拿到 Tree 组件中的 node
    let node = ElTreeRef.value.getNode(key)
    //删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性
    ElTreeRef.value.remove(node)
}

// 暴露出去
defineExpose({
    setElTreeMenuMark,
    removeElTreeNode,
})
</script>

<style lang="scss" scoped>
@import "../../../styles/app/tree.scss";
.data-custom-tree-node {
    .menu-icon {
        position: relative;
        font-size: 20px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        .cu-tree-node-popover-menu-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    &:hover {
        .menu-icon {
            opacity: 1;
            pointer-events: all;
            cursor: context-menu;
        }
    }
    .menu-icon.show {
        opacity: 1;
        pointer-events: all;
        cursor: context-menu;
    }
}
</style>