|
|
<script setup lang="ts">
|
|
|
import {nextTick, ref} from "vue";
|
|
|
import type {TreeNode} from "@/api/types/monitor/Tree";
|
|
|
import {ElMessage, type TreeData, type TreeKey} from "element-plus";
|
|
|
import {useCameraBindStore} from "@/stores/modules/cameraBind";
|
|
|
const cameraBindStore=useCameraBindStore();
|
|
|
const filteredTreeData = ref<TreeNode[]>([]);
|
|
|
// 用于记录当前选中的节点 ID
|
|
|
const currentCheckedId=ref<number>();
|
|
|
interface Params {
|
|
|
title: string;
|
|
|
rows: any;
|
|
|
getTreeData?: (() => Promise<any>) | undefined;
|
|
|
}
|
|
|
const visible = ref(false);
|
|
|
const treeRef=ref<any>(null);
|
|
|
const paramsProps=ref<Params>({
|
|
|
rows: null,
|
|
|
title:'',
|
|
|
getTreeData: undefined
|
|
|
})
|
|
|
const emit=defineEmits(['bindingCamera']);
|
|
|
// 接收父组件传递过来的参数
|
|
|
const acceptParams=async (params:Params)=> {
|
|
|
paramsProps.value = params;
|
|
|
const res = await paramsProps.value.getTreeData!();
|
|
|
if (res.code == '0000') {
|
|
|
filteredTreeData.value = res.data;
|
|
|
}
|
|
|
currentCheckedId.value=paramsProps.value.rows.val;
|
|
|
console.log('当前被选中的节点的ID为：',currentCheckedId.value);
|
|
|
visible.value = true;
|
|
|
await nextTick();
|
|
|
if(currentCheckedId.value)
|
|
|
{
|
|
|
treeRef.value.setCheckedKeys([currentCheckedId.value]);
|
|
|
}
|
|
|
else {
|
|
|
treeRef.value.setCheckedKeys([]);
|
|
|
}
|
|
|
}
|
|
|
// 提交数据
|
|
|
const handleSubmit = async () => {
|
|
|
const checkedNodes = treeRef.value.getCheckedNodes();
|
|
|
// 顺手帮你加个保护机制，避免触发你上一个问题里提到的 undefined 报错
|
|
|
if (!checkedNodes || checkedNodes.length === 0) {
|
|
|
ElMessage.warning('请先选择一个设备');
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
// 移除pinia中原先绑定的摄像头
|
|
|
if(currentCheckedId.value!=checkedNodes[0])
|
|
|
{
|
|
|
cameraBindStore.unbindCamera(currentCheckedId.value);
|
|
|
}
|
|
|
emit('bindingCamera', checkedNodes[0]);
|
|
|
treeRef.value.setCheckedKeys([]);
|
|
|
currentCheckedId.value = null; // 提交后清空选中状态
|
|
|
visible.value = false;
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
}
|
|
|
const handleCheck=(data: TreeNode, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData})=>{
|
|
|
// 判断当前操作是勾选还是取消勾选
|
|
|
const isChecked = info.checkedKeys.includes(data.id);
|
|
|
if(isChecked)
|
|
|
{
|
|
|
// 如果被勾选
|
|
|
// 判断是否为叶子节点
|
|
|
const isLeaf=!data.children || data.children.length === 0;
|
|
|
if(!isLeaf)
|
|
|
{
|
|
|
// 如果不是叶子节点，强制从已选列表中移除当前节点
|
|
|
const newKeys=info.checkedKeys.filter(key => key !== data.id);
|
|
|
treeRef.value.setCheckedKeys(newKeys);
|
|
|
return;
|
|
|
}else {
|
|
|
treeRef.value.setCheckedKeys([data.id]);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 暴露给父组件
|
|
|
defineExpose({
|
|
|
acceptParams
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
v-model="visible"
|
|
|
class="tree-wrapper"
|
|
|
:title="paramsProps.title"
|
|
|
width="500px"
|
|
|
draggable >
|
|
|
<el-scrollbar height="400px">
|
|
|
<el-empty v-if="filteredTreeData.length === 0" description="暂无设备数据" :image-size="60" />
|
|
|
<el-tree-v2
|
|
|
v-else
|
|
|
ref="treeRef"
|
|
|
:height="400"
|
|
|
:data="filteredTreeData"
|
|
|
show-checkbox
|
|
|
check-strictly
|
|
|
@check="handleCheck"
|
|
|
node-key="id"
|
|
|
default-expand-all
|
|
|
:props="{
|
|
|
label: 'name',
|
|
|
children: 'children',
|
|
|
}"
|
|
|
class="transfer-tree"
|
|
|
/>
|
|
|
</el-scrollbar>
|
|
|
|
|
|
<template #footer>
|
|
|
<el-button @click="visible = false"> 取消</el-button>
|
|
|
<el-button type="primary" @click="handleSubmit"> 确定</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
|
</style> |