ShutongInterconnectedChemicalCloudPlatform/src/widget/lowcodetransfer/lowcodeTransfer.vue

<template>
    <div  v-if="dataFinished" class="transfer"><!-- {{props.selectedValue}} -->
        <div class="leftArea"><!-- {{ selectedValueCompu }}{{checkedIdList}} -->
            <div class="transferName">{{ transferConfig.transferName }}</div>
            <div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;">
                <ElInput v-model="keyword" placeholder="搜索">
                    <template #prefix>
                        <ElIcon class="el-input__icon">
                            <Search />
                        </ElIcon>
                    </template>
                </ElInput>
            </div>
            <div class="leftScroll">
                <ElScrollbar height="100%">
                    <ElTree
                        ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps" show-checkbox
                        highlight-current :default-expand-all="isExpandAll" :filter-node-method="filterNode"
                        @check="handleCheckList" @check-change="getCheckedList" />
                </ElScrollbar>
            </div>
        </div>
        
        <div class="rigthArea">
            <div style="margin-bottom: 8px;">
                <div class="transferName"><span>已选: {{ checkList.length }}</span><ElButton link  style="float: right;margin-right: 5px;" @click="clearCheckList" >清空</ElButton></div>
                
                
                
            </div>
            <ElScrollbar height="calc(100% - 50px)">
                <ElTag  v-for="user in checkList" :key="user.id" style="display: block; font-size: 13px; letter-spacing: 1.5px;text-align: center;margin-top: 8px;height: 30px;width: 75%;margin-left:40px;padding-top: 6px;" closable @close="handleCloseTag(user)">
                {{
                    user.label
                }}[{{
                        user.parent.data.label
                    }}]
                </ElTag>
                
            </ElScrollbar>
        </div>
    </div>
</template>

<script setup name="MultiTreeSelector">
import { ref, watch, onMounted } from 'vue'

import request from '@/utils/request';

const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
    data: {
		type: Object,
		default() {
			return {};
		},
	},
    selectedValue: {
		type: Array,
		default() {
			return [];
		},
	},
})


const emits = defineEmits(['checkedIdListChanged','updateModel']);
const fixedOptions = props.data?.control.fixedOptions
const transferConfig = props.data?.config
const treeProps = {
    value: 'id',
    label: 'label',
    disabled: 'disabled',
    children: 'children'
}
let dataFinished = false
const treeRef = ref()
const isExpandAll = ref(false) // 是否全展开
const keyword = ref('') // 搜索关键字
const checkList = ref([]) // 选中的list
const userList = ref([])
let checkedIdList = ref([]);
let count = 0
function waitAndReGet(){
    /* console.log("waitAndReGet")
    console.log(props.selectedValue)
    console.log(props.selectedValue.value) */
    setTimeout(()=>{
        let values = props.selectedValue.map(item => {
                // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
                return item;
            });
        if(props.selectedValue&&values){

            /* console.log("有值")
            console.log(props.selectedValue)
            console.log(values) */
			//return props.selectedValue.value
            checkedIdList.value = values
		}else{
            if(count<3){
                count++
                waitAndReGet()
            }
            
            /* console.log("waitAndReGet---else") */
                
        }
    },2000)
}

const selectedValueCompu = computed({
    get() {
        //console.log("get")
        //nextTick(()=>{
            let values = props.selectedValue.map(item => {
                // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
                return item;
            });
			if(props.selectedValue&&values){
                /* console.log(props.selectedValue.value)
                console.log("computed---if") */
				return values
			}else{
                waitAndReGet()
                /* console.log("computed---else") */
                return []
                
            }
            
		//})
        
    },
    set(){}
})
/* console.log(props.selectedValue) */




const url = transferConfig.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */



function getDetail() {
    //console.log(11111)
    if(transferConfig.transferDataSource==="数据源"){
        return request({
            url: url,
            method: transferConfig.method,
        });
    }
}
if(transferConfig.transferDataSource==="数据源"){
    getDetail().then(({ data }) => {   
        //console.log(`获取穿梭框接口数据`);
        let resData = ref(data.children)
        // 全选方法2:插入 全选node
        userList.value = [{
            id: '全选',
            label: '全选',
            children: [...resData.value]
        }]
        treeRef.value.setCheckedKeys(checkedIdList.value,true)
        setTimeout(() => {
            checkedIdList.value.forEach(element => {
            const _node = treeRef?.value?.getNode(element)
            if (!_node) return
            const _checkList = checkList.value
            if (_node.checked) { // 勾选时
                if (_node.checked && _node.childNodes.length === 0) {   
                    _checkList.push(_node)
                }
                // 通过new Set() 实现数据去重
                checkList.value = Array.from(new Set(_checkList))
                // 遍历子级,递归,直到获取最后一级的人员
                if (_node.childNodes.length > 0) {
                    _node.childNodes.map(item => handleCheckList(item.data))
                }
            } else if (!_node.checked) { // 取消勾选
                checkList.value = checkList.value.filter(item => item.checked)
            }   
            });
        }, 50);
        

    });
}
const getCheckedList = () => {
    checkedIdList.value = treeRef.value.getCheckedKeys(true)
}



    

let resData1 = ref([
    {
        id: '3',
        label: '营销部',
        children: [
            {
                id: '3-1',
                label: '威震天'
            },
            {
                id: '3-2',
                label: '嫦娥'
            }
        ]
    },
    {
        id: '2',
        label: '业务部',
        children: [
            {
                id: '2-1-1',
                label: '业务部子部1',
                children: [
                    {
                        id: '2-1-0001',
                        label: '李白'
                    },
                    {
                        id: '2-1-0002',
                        label: '萧峰'
                    }
                ]
            },
            {
                id: '2-2-1',
                label: '业务部子部2',
                children: [
                    {
                        id: '2-2-00006',
                        label: '武则天'
                    },
                    {
                        id: '2-2-00005',
                        label: '拿破仑'
                    }
                ]
            }
        ]
    },
    {
        id: '4',
        label: '软件开发部',
        children: [
            {
                id: '5-3',
                label: '张辽'
            },
            {
                id: '5-9',
                label: '吕布'
            },
            {
                id: '5-0',
                label: '许褚'
            },
        ]
    }
]) 


// 勾选或者取消勾选
const handleCheckList = (val) => {
    const valId = val.id;
    
    const _node = treeRef?.value?.getNode(valId)
    
    if (!_node) return
    const _checkList = checkList.value
    if (_node.checked) { // 勾选时
        if (_node.checked && _node.childNodes.length === 0) {
            _checkList.push(_node)
        }
        // 通过new Set() 实现数据去重
        checkList.value = Array.from(new Set(_checkList))
        // 遍历子级,递归,直到获取最后一级的人员
        if (_node.childNodes.length > 0) {
            _node.childNodes.map(item => handleCheckList(item.data))
        }
    } else if (!_node.checked) { // 取消勾选
        checkList.value = checkList.value.filter(item => item.checked)
    }
}

/* 人员树 父级过滤的递归
* @node 当前节点
* @result 存结果的数组
* @key
* */
const getParentNode = (node, result, key) => {
    let isPass = node?.data?.label?.indexOf(key) !== -1
    isPass ? result.push(isPass) : ''
    if (!isPass && node.level !== 1 && node.parent) {
        return getParentNode(node.parent, result, key)
    }
}
/*人员树过滤
* @value 过滤的关键字
* @data 被过滤的tree
* @node
* */
const filterNode = (value, data, node) => {
    if (!value) {
        data.disabled = false
        return true
    } else {
        //带过滤条件时,所有父级都禁止勾选
        // array.map(k => (!k.disabled) && (_childArr.push(k)))
        (data.children) && (data.disabled = true)
    }
    let _arr = []
    getParentNode(node, _arr, value)
    let result = false
    _arr.forEach(item => {
        result = result || item
    })
    return result
}
// 通过tag 取消勾选
const handleCloseTag = (tag) => {
    
    if (!treeRef?.value) return
    checkList.value = checkList.value.filter(item => {
        treeRef.value.setChecked(tag, false)
        if (!item?.data) return
        return item.data.id !== tag.data.id
    })
}

// 清空CheckList
const clearCheckList = () => {
    if (!treeRef?.value) return
    treeRef.value.setCheckedKeys([])
    while (checkList.value.length > 0) {
        checkList.value.pop()
    }
}

// 全选 /全不选
const handleCheckAll = (array) => {
    treeRef.value.setCheckedNodes(array)
    array.map(item => {
        handleCheckList(item)
    })
}

// 折叠/展开
const expandAll = () => {
    const nodesMap = treeRef.value.store.nodesMap
    for (let key in nodesMap) {
        nodesMap[key].expanded = isExpandAll.value
    }
}

// 执行tree数据过滤
watch(keyword, (newVal) => {
    treeRef.value.filter(newVal)
})


//获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){
    setTimeout(() => {
        
         // 全选方法2:插入 全选node
        userList.value = [{
            id: '全选',
            label: '全选',
            children: fixedOptions
        }]
        //console.log(treeRef)
        /* console.log(checkedIdList.value) */
        treeRef.value.setCheckedKeys(checkedIdList.value,true)
        setTimeout(() => {
            checkedIdList.value.forEach(element => {
            const _node = treeRef?.value?.getNode(element)
            if (!_node) return
            const _checkList = checkList.value
            if (_node.checked) { // 勾选时
                if (_node.checked && _node.childNodes.length === 0) {   
                    _checkList.push(_node)
                }
                // 通过new Set() 实现数据去重
                checkList.value = Array.from(new Set(_checkList))
                // 遍历子级,递归,直到获取最后一级的人员
                if (_node.childNodes.length > 0) {
                    _node.childNodes.map(item => handleCheckList(item.data))
                }
            } else if (!_node.checked) { // 取消勾选
                checkList.value = checkList.value.filter(item => item.checked)
            }   
            });
        }, 50);
        }, 50);
        dataFinished = true
    }else{
        getDetail
        dataFinished = true
    }
    

onMounted(() => {
    
})



// 监听 checkedIdList 的变化
watch(checkedIdList, (newValue, oldValue) => {
    //console.log('checkedIdList 发生了变化', newValue);
    emits('checkedIdListChanged',newValue);
},{deep:true});


watch(selectedValueCompu, (newValue, oldValue) => {
    //console.log('selectedValueCompu 发生了变化', newValue);
    checkedIdList.value = selectedValueCompu.value
    //获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){
    setTimeout(() => {
        
         // 全选方法2:插入 全选node
        userList.value = [{
            id: '全选',
            label: '全选',
            children: fixedOptions
        }]
        //console.log(treeRef)
        /* console.log(checkedIdList.value) */
        treeRef.value.setCheckedKeys(checkedIdList.value,true)
        setTimeout(() => {
            checkedIdList.value.forEach(element => {
            const _node = treeRef?.value?.getNode(element)
            if (!_node) return
            const _checkList = checkList.value
            if (_node.checked) { // 勾选时
                if (_node.checked && _node.childNodes.length === 0) {   
                    _checkList.push(_node)
                }
                // 通过new Set() 实现数据去重
                checkList.value = Array.from(new Set(_checkList))
                // 遍历子级,递归,直到获取最后一级的人员
                if (_node.childNodes.length > 0) {
                    _node.childNodes.map(item => handleCheckList(item.data))
                }
            } else if (!_node.checked) { // 取消勾选
                checkList.value = checkList.value.filter(item => item.checked)
            }   
            });
        }, 50);
        }, 50);
        dataFinished = true
    }else{
        getDetail
        dataFinished = true
    }
    //emits('updateModel',newValue);
},{deep:true});

</script>




<style scoped>
.transfer {
    display: flex;


}


.transferName {
    height: 30px;
    padding-top: 8px;
    background-color: #F5F7FA;
    padding-left: 10px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid gainsboro;
    
}

.buttonArea {

    display: flex;
    flex-direction: row;
    align-items: center;
}

.buttonArea2 {
    height: 33px;
}

.leftScroll {
    height: 367px;
}

.leftArea {
    border: 1px solid gainsboro;
    width: 300px;
    border-radius: 5px;
    height: 456px;
    position: relative;
    background-color: white;
}

.rigthArea {
    border: 1px solid gainsboro;
    width: 300px;
    border-radius: 5px;
    height: 456px;
    background-color: white;
    
}</style>