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

<template>
    <ElTree ref="ElTreeRef" :check-strictly="isStrictly" :data="ElTreeData" :expand-on-click-node="false"
            :indent="0" :node-key="nodeKey" :props="ElTreeProps" accordion
            class="hc-tree-node-box hc-tree-node tree-line" highlight-current show-checkbox @check="ElTreeCheckChange">
        <template #default="{ node, data }">
            <div class="custom-tree-node">
                <div class="label" @dblclick="ElTreeDblClick(data)">
                    <el-input v-if="data.isInputName" v-model="data.title" size="small" @blur="ElTreeBtnClick(data)"
                              @keyup="keyUpEvent($event,data)">
                        <template #append>
                            <el-button plain size="small" type="primary" @click="ElTreeBtnClick(data)">
                                <HcIcon name="check"/>
                            </el-button>
                        </template>
                    </el-input>
                    <span v-else>{{ data.title }}</span>
                </div>
            </div>
        </template>
    </ElTree>
</template>

<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {getArrValue} from "js-fast-way"
import wbsApi from '~api/data-fill/wbs';

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: ''
    },
    nodeKey: {
        type: String,
        default: 'primaryKeyId'
    },
    nodeId: {
        type: [String, Number],
        default: ''
    },
    oldId: {
        type: [String, Number],
        default: ''
    },
    strictly: {
        type: Boolean,
        default: false
    },
})

//变量
const ElTreeRef = ref(null)
const projectId = ref(props.projectId)
const isStrictly = ref(props.strictly)
const ElTreeProps = ref({label: 'title', children: 'children', isLeaf: 'notExsitChild'})

//监听
watch(() => [
    props.projectId,
    props.strictly,
], ([pid, strictly]) => {
    projectId.value = pid
    isStrictly.value = strictly
})

//渲染完成
onMounted(() => {
    ElTreeLoadNode()
})

//事件
const emit = defineEmits(['check-change'])

//树形结构异步加载数据
const ElTreeData = ref([])
const ElTreeLoadNode = async () => {
    let nodeId = props.oldId || props.nodeId || ''
    const {error, code, data} = await wbsApi.queryWbsTreePrivateByProjectIdAndId({
        id: nodeId,
        projectId: projectId.value
    })
    if (!error && code === 200) {
        ElTreeData.value = getArrValue(data)
        await nextTick(() => {
            ElTreeCheckedKeys()
        })
    }
}

//被选择的
const ElTreeCheckChange = (_, nodes) => {
    emit('check-change', nodes)
}

//处理节点
const ElTreeCheckedKeys = () => {
    const Nodes = ElTreeRef.value.getCheckedNodes() || []
    const HalfNodes = ElTreeRef.value.getHalfCheckedNodes() || []
    emit('check-change', {
        checkedNodes: Nodes,
        halfCheckedNodes: HalfNodes
    })
}

//更改节点名称
const ElTreeDblClick = (item) => {
    item.isInputName = true;
}
//回车
const keyUpEvent = (e, item) => {
    if (e.key === "Enter") {
        ElTreeBtnClick(item)
    }
}
//更改节点名称完成
const ElTreeBtnClick = (item) => {
    if (!item?.title) {
        window?.$message?.warning('节点名称不能为空')
    } else {
        item.isInputName = false;
        ElTreeCheckedKeys()
    }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/app/tree.scss";
.custom-tree-node {
    position: relative;
    width: 100%;
}
</style>

<style lang="scss">
.hc-tree-node-box .el-tree-node__content {
    height: 32px !important;
}
</style>