scd_tools_ui/src/pages/mission/modalComp/ModelTree.vue

<template>
    <div>
        <div class="bigBox">
            <el-dialog v-loading="loading" v-model="dialogVisible" title="选择模型" width="30%" @close="sureclose" :close-on-click-modal="false">
                <el-tree ref="treeRef" :data="treeData" style="height: calc(100vh - 500px);overflow-y: auto;" show-checkbox
                    node-key="id" @check-change="handleCheckChange" :check-strictly="true" default-expand-all
                    :expand-on-click-node="false" :props="defaultProps" />
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cleanBox">取消</el-button>
                        <el-button type="primary" @click="sureArr">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <div id="lord" v-loading="loading" element-loading-text="加载数据中"
            style="width: 100vw;height: 100vh;position: fixed;top: 0px;left: 0px;z-index: 3000;">

        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue';
import litLine from '@/api/litLine';
import systemRow from '@/api/systemRow';
import { ElLoading } from 'element-plus';
export default {
    props: {
        treeMool: {
            type: Boolean,
            required: true
        },
        treeNeed: {
            type: Array,
            required: true,
        }
    },
    setup(props, { emit }) {
        let loading = ref(true)
        let treeData = ref([
        ])
        let defaultProps = ref({
            label: "model_name",
            children: "children",
            id: "id"
        })
        let result = props.treeMool
        let mdId = ref([])//模型id
        let mdName = ref([])
        let { cleanBox, sureArr } = toRefs(props)
        let dialogVisible = ref(false)
        let checkKey = ref([])//默认选中的key
        let treeRef = ref(null)
        watch(() => props.treeNeed, (newVal) => {
            checkKey.value = newVal
        })
        function reload() {
            if (props.treeNeed&&treeRef.value) {
                checkKey.value = props.treeNeed
            }
        }
        function getLine() {
            let lord = document.getElementById("lord")
            loading.value = true
            let level = [] // 电压等级
            let line = [] // 接线方式
            let mine = [] // 所有模型
            dialogVisible.value = result
            // 用 Promise.all 等待所有异步操作完成
            Promise.all([
                litLine.getAllLine({ pageno: 1, pagesize: 30 }),
                litLine.getAllm({ pageno: 1, pagesize: 100 }),
                systemRow.getChildren({ code: "voltage_level" })
            ]).then(([lineRes, mineRes, levelRes]) => {
                line = lineRes.data
                mine = mineRes.data
                level = levelRes.data
                if (level.length > 0 && line.length > 0 && mine.length > 0) {
                    let a = level.map(item => {
                        let filteredLine = line.filter(param => item.name === param.vol_level_name);
                        if (filteredLine.length > 0) {
                            let children = filteredLine.map(filteredItem => {
                                let filteredMine = mine.filter(mineItem => mineItem.line_link_style_name === filteredItem.name);
                                return {
                                    model_name: filteredItem.name,
                                    children: filteredMine
                                };
                            });
                            return {
                                model_name: item.name,
                                children
                            };
                        }
                        return null;
                    }).filter(item => item !== null);
                    treeData.value = a
                    loading.value = false
                    lord.style.display = 'none'
                }
            }).catch(error => {
                // 处理错误
                console.error("Error:", error);
            });

        }

        function handleCheckChange(e) {
            const id = e.id;
            const model_name = e.model_name;

            if (!mdId.value.includes(id)) {
                mdId.value.push(id);
                mdName.value.push(model_name);
            } else {
                const idIndex = mdId.value.indexOf(id);
                mdId.value.splice(idIndex, 1);
                mdName.value.splice(idIndex, 1);
            }
            emit("treeNum", mdId.value, mdName.value);
        }
        function getBack() {
            dialogVisible.value = false
            emit("treeBack", dialogVisible.value)
        }
        function nowBack() {
            dialogVisible.value = false
            emit("treeBack", dialogVisible.value)
        }
        function sureclose() {
            dialogVisible.value = false
            emit("treeBack", dialogVisible.value)
        }
        onMounted(() => {
            getLine()
            reload()
        })
        return {
            treeData,
            dialogVisible,
            cleanBox: getBack,
            sureArr: nowBack,
            sureclose,
            getLine,
            result,
            defaultProps,
            handleCheckChange,
            mdName,
            loading,
            checkKey,
            treeRef,
        }
    }
}
</script>

<style scoped>
.is-penultimate>.el-tree-node__content {
    color: #626aef;
}

.el-tree-node.is-expanded.is-penultimate>.el-tree-node__children {
    display: flex;
    flex-direction: row;
}

.is-penultimate>.el-tree-node__children>div {
    width: 25%;
}

/* :deep(.el-tree-node.is-expanded>.el-tree-node__children) {
    display: flex;
    flex-wrap: wrap;
} */
</style>