feat:具体选择某一个摄像头

src/components/Select/SelectDeviceTree.vue

@@ -0,0 +1,162 @@
+<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>