jh-military-admin/src/components/Select/SelectDeviceTree.vue

<template>
    <el-tree-select ref="treeRef" style="width: 100%;"
        :props="{ label: 'name', children: 'children', value: 'id', disabled: 'isLock' }" :data="state.options"
        node-key="id" :expand-on-click-node="false" :default-expanded-keys="state.defaultExpandedKeys" show-checkbox
        v-model="selectId" :placeholder="props.placeholder" :clearable="props.clearable" remote-show-suffix
        :disabled="props.disabled" :remote-method="remoteSearch" :loading="state.loading"
        @visible-change="(e) => e && getOptions()" @check="check" @clear="clear" multiple collapse-tags
        collapse-tags-tooltip>
        <template #default="{ node, data }">
            <div class="center">
                <el-icon v-if="data.deep == 1">
                    <Files />
                </el-icon>
                <el-icon v-if="data.deep == 2">
                    <VideoCamera />
                </el-icon>
                <span class="text-overflow" style="margin-left: 4px;">{{ node.label }}</span>
            </div>
        </template>
    </el-tree-select>
</template>

<script setup name="SelectDeviceTree">
import { ref, defineEmits, reactive, defineModel, watch, onMounted, nextTick } from "vue";
import { Files, VideoCamera } from "@element-plus/icons-vue"

import * as deviceGroupApi from "/@/api/device/deviceGroup.ts"

const emit = defineEmits(["change"])

const props = defineProps({
    placeholder: {
        type: String,
        default: "请选择分组",
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    autoFirst: {
        type: Boolean,
        default: true,
    },
    apiParams: {
        type: Object,
        default: () => { },
    }
});

const selectId = defineModel()

// 树组件ref
const treeRef = ref()

const queryForm = reactive({
    name: "",
    current: 1,
    size: 10,
})

const state = reactive({
    loading: true,
    options: [],
    defaultExpandedKeys: [],
    checkedTreeNodes: []
})

// 仅当接口参数发生变化时刷新选项，避免选择行为触发数据重载
watch(
    () => props.apiParams,
    (newVal, oldVal) => {
        if (JSON.stringify(newVal) === JSON.stringify(oldVal)) return
        getOptions()

    },
    { immediate: false, deep: true },
)

onMounted(() => {
    props.autoFirst && getOptions()
})

// 获取分组树
async function getOptions() {
    try {
        state.loading = true
        const _pa = {
            ...queryForm,
            ...props.apiParams,
        }
        const { data } = await deviceGroupApi.getDeviceGroupTree(_pa)
        state.options = data ?? []
        if ((!selectId.value || !selectId.value.length) && props.autoFirst && state.options.length != 0) {
            selectId.value = [state.options[0].id, ...state.options[0].children.map((item) => item.id)]
            await getDefaultExpandedKeys()
            // 返回两个一个一级节点ids,一个二级节点ids
            const firstLevelIds = state.checkedTreeNodes.filter((item) => item.deep == 1).map((item) => item.id)
            const secondLevelIds = state.checkedTreeNodes.filter((item) => item.deep == 2).map((item) => item.id)
            emit("change", [firstLevelIds, secondLevelIds])
        }
    } catch (error) {
        console.error("|获取分组树|意外的错误:", error);
    }
    finally {
        setTimeout(() => (state.loading = false), 500)
    }
}

function remoteSearch(params) {
    if (params != queryForm.name) {
        queryForm.name = params
        getOptions()
    }
}

function check(data, checkStatus) {
    const { checkedNodes } = checkStatus
    state.checkedTreeNodes = checkedNodes
    // 返回两个一个一级节点ids,一个二级节点ids
    const firstLevelIds = checkedNodes.filter((item) => item.deep == 1).map((item) => item.id)
    const secondLevelIds = checkedNodes.filter((item) => item.deep == 2).map((item) => item.id)
    emit("change", [firstLevelIds, secondLevelIds])
}

function clear() {
    emit("change", [[], []])
}

// 或者获取默认展开的节点
const getDefaultExpandedKeys = () => {
    return new Promise((resolve, reject) => {
        const targetIndex = state.options.findIndex((item) => item.children && item.children.length)
        const targetList = state.options[targetIndex]
        state.defaultExpandedKeys = [targetList.id, ...targetList.children.map((item) => item.id)]
        treeRef.value?.setCheckedKeys(state.defaultExpandedKeys)
        nextTick(() => {
            state.checkedTreeNodes = treeRef.value?.getCheckedNodes()
            resolve()
        })
    })

}
</script>

<style scoped lang="scss">
.flex-center {
    display: flex;
    align-items: center;
}

.text-overflow {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>