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

<!-- 节点划分 -->
<template>
    <hc-new-dialog v-model="linkModal" is-table title="节点划分" widths="1200px" @close="closeModal">
        <div class="link-data-box">
            <div class="link-data-left">
                <div class="relative h-full flex">
                    <div v-loading="treeLoading" class="hc_tree_card_border relative w-full">
                        <hc-body scrollbar padding="0px">
                            <HcLazyTree
                                ref="leftTree"
                                tree-key="id"
                                show-checkbox 
                                is-type
                                check-strictly
                                :is-color="false"
                                @check="leftTreeNodeCheckChange"
                                @load="treeLoadNode"
                                @node-loading="treeNodeLoading"
                            />
                        </hc-body>
                    </div>
                </div>
            </div>
            <div class="link-data-icon">
                <HcIcon type="primary" name="links" style="font-size: 22px;" />
            </div>
            <div class="link-data-right">
                <div class="relative h-full flex">
                    <div v-loading="treeLoading" class="hc_tree_card_border relative w-full">
                        <hc-body scrollbar padding="0px">
                            <HcLazyTree
                                ref="rightTree"
                                tree-key="id"
                                show-checkbox 
                                is-type
                                :is-color="false"
                                @check="addTreeNodeCheckChange"
                                @load="rightTreeLoadNode"
                                @node-tap="rightElTreeClick"
                            >
                                <template #name="{ 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>
                            </HcLazyTree>
                        </hc-body>
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button hc-btn style="border: 1px solid var(--el-button-border-color);" @click="closeModal">
                    <HcIcon name="close" />
                    <span>取消</span>
                </el-button>
                <el-button hc-btn type="primary" :loading="sureLoading" @click="sureClick(1)">
                    <HcIcon name="check" />
                    <span>关联并退出</span>
                </el-button>
                <el-button hc-btn type="primary" :loading="sureLoading" @click="sureClick(2)">
                    <HcIcon name="check" />
                    <span>关联并继续</span>
                </el-button>
            </div>
        </template>
    </hc-new-dialog>
</template>

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

import samplingApi from '~api/tentative/material/sampling'
import queryApi from '~api/data-fill/query'
import wbsApi from '~api/data-fill/wbs'
import { getStoreValue } from '~uti/storage'
const props = defineProps({
    linkModal: {
        type: Boolean,
        default: false,
    },

 
  
    classifyType:{
        type: String,
        default: 1,
    },
    treeItemInfo:{
        type: Object,
        default: () => ({}),
    },
    firstTree: {
        type: Object,
        default: () => ({}),
    },
})
//事件
const emit = defineEmits(['close', 'save'])
const useAppState = useAppStore()
const contractId = ref(useAppState.getContractId)
const projectId = ref(useAppState.getProjectId)

const treeItemInfo = ref(props.treeItemInfo)
const classifyType = ref(props.classifyType)
const firstTree = ref(props.firstTree)

const linkModal = defineModel('modelValue', {
    default: false,
})
const closeModal = ()=>{
    linkModal.value = false
    leftPid.value = ''
    emit('close')
}
//获取两棵树的数据



const treeLoading = ref(true)
const treeNodeLoading = () => {
    treeLoading.value = false
}








 const meterIds = ref('')

const rightTree = ref(null)

//监听
watch(() => [
props.linkModal,



props.classifyType,
props.treeItemInfo,
props.firstTree,
], ([link, type, treeItemIn, first]) => {
    linkModal.value = link
    classifyType.value = type
    treeItemInfo.value = treeItemIn
    firstTree.value = first
}, { immediate: true })

//选中的节点
const allSelectedList = ref([])
const halfSelectedList = ref([])
const addTreeNodeCheckChange = (_, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {
    console.log(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, 'nodes')
    
    let NodesArr = [],
        halfArr = []
    //全选数据
    const keys = checkedNodes || []
    console.log(keys, 'keys')
    for (let i = 0; i < keys.length; i++) {
        NodesArr.push({
            nodeName: keys[i].title,
            primaryKeyId: keys[i].primaryKeyId,
            
        })
    }
    allSelectedList.value = NodesArr
    console.log(allSelectedList.value, ' allSelectedList.value')
    //半选数据
    const halfNodes = halfCheckedNodes || []
    for (let i = 0; i < halfNodes.length; i++) {
        halfArr.push({
            nodeName: halfNodes[i].title,
            primaryKeyId: halfNodes[i].primaryKeyId,
           
        })
    }
    halfSelectedList.value = halfArr
    console.log(halfSelectedList.value, ' halfSelectedList.value')
}
const sureLoading = ref(false)
const sureClick = async (type) => {
    const keys = allSelectedList.value || []
    if (keys.length <= 0 || leftPid.value.length <= 0) {
        window?.$message?.warning('请先选择节点')
    } else {
        //发起请求
        sureLoading.value = true
        
        const { error, code, msg } = await wbsApi.saveContractTreeNode({
            projectId: projectId.value,
            contractId: contractId.value,
            saveType: 2, //仅当前节点
            allSelectedList: allSelectedList.value,
            halfSelectedList: halfSelectedList.value,
            currentNodePrimaryKeyId:  leftPid.value,
            isImportTree: 1,
        })
        //判断状态
        sureLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success(msg)
            
            // type=1时关闭弹窗，type=2时保持打开
            if (type === 1) {
                closeModal()
                emit('save')
            }
        }
    }
}

const leftTree = ref(null)
const treeLoadNode = async ({ node, item, level }, resolve) => {
    let contractIdRelation = '',
        parentId = '',
        primaryKeyId = ''
    if (level !== 0) {
        const nodeData = getObjValue(item)
        contractIdRelation = nodeData?.contractIdRelation || ''
        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
        primaryKeyId = nodeData?.id || ''
    }
    //获取数据
    const { data } = await queryApi.queryWbsTreeData({
        contractId: contractId.value || '',
        contractIdRelation,
        primaryKeyId,
        parentId,
        classifyType: classifyType.value,
        tableOwner: classifyType.value,
        dataTime:new Date(),
    })
    resolve(getArrValue(data))
    treeLoading.value = false
}
const leftPid = ref('')

const leftTreeNodeCheckChange = (_, { checkedNodes }) => {
    if (checkedNodes && checkedNodes.length > 0) {
        const lastCheckedNode = checkedNodes[checkedNodes.length - 1]
        leftPid.value = lastCheckedNode.primaryKeyId 
       
        
        nextTick(() => {
            leftTree.value?.treeRef.setCheckedKeys([lastCheckedNode.id])
        })
    } else {
        leftPid.value = ''
    }
}
//更改节点名称
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()
    }
}


const rightTreeLoadNode = async ({ node, item, level }, resolve) => {
    let parentId = '0'
    if (level !== 0) {
        parentId = item?.id
    }
    //获取数据
    const { data } = await samplingApi.queryLazyTree({
        wbsId:  firstTree.value?.wbsId,
        tenantId: getStoreValue('tenantId') || '',
        projectId: projectId.value,
        parentId,
        wbsType: firstTree.value.wbsType,
    })
    resolve(getArrValue(data))
   
}
const rightObj = ref(null)
const rightElTreeClick = ({ data }) => {
    rightObj.value = data   
}
</script>

<style lang='scss' scoped>
.title-box{
    position: relative;
    display: flex;

    // padding: 40px;
    font-weight: 400;
    font-size: 18px;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
 
    .title-box-left{
       width: 50%;
       text-align: center;
    }
    .title-box-right{
       width: 50%;
       text-align: center;
    }
}
.link-data-box{
    position: relative;
    display: flex;
    height: calc(100% - 45px);
    align-items: center;
    // border: 1px solid rgb(187, 187, 187);
    padding: 0px 40px 0px 40px;
    .link-data-left{
        width: 50%;
        position: relative;
        height: 100%;
        background: #ffffff;
        border: 1px solid #273044;
    }
    .link-data-icon{
        display: inline-block;
        vertical-align: middle;
        padding: 0 16px;
    }
    .link-data-right{
        width: 50%;
        position: relative;
        height: 100%;
        background: #ffffff;
        border: 1px solid #273044;
    }
}
</style>

<style lang="scss">
.link-data-right .el-tree.hc-tree-node-v2 .data-custom-tree-node .label, .hc-tree-node .data-custom-tree-node .label{
    display: flex;
}
</style>