Real-time-monitoring-frontend/src/views/teacher/teacherStatistics/components/custom-componet/treeSelectModel.vue

<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>