sl-sfy-safety/src/views/message/systemNotifications/components/WorkShopTree.vue

<template>
  <div class="select-tree">
    <div class="left">
      <el-form-item>
        <el-input
          v-model="queryStr"
          :style="{ width: '300px', height: '30px' }"
          placeholder="请输入相机名称/设备ID"
          :prefix-icon="Search"
          @change="getCameraData({ queryString: queryStr })"
          clearable
      /></el-form-item>
      <el-tree
        ref="treeRef"
        :data="cameraTreeTemp"
        show-checkbox
        node-key="code"
        :props="defaultProps"
        :render-after-expand="false"
        :filter-node-method="filterNode"
        accordion
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
      />
    </div>
    <div class="right" style="margin-left: 16px">
      <div class="head" style="margin-bottom: 22px">
        <span
          style="font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.88); line-height: 22px"
          >已选择（{{ selected }}</span
        >
        <span
          style="
            margin-left: 4px;
            font-size: 10px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
          "
          >/&nbsp;{{ total }}</span
        >
      </div>
      <div class="selected">
        <el-tag
          v-for="(person, index) in selectedPeople"
          :key="index"
          closable
          @close="handleTagClose(person.code)"
        >
          {{ person.name }}
        </el-tag>
      </div>
      <div class="footer">
        <el-button @click="handleCancle"> 取消 </el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch, computed } from 'vue';
  import { Search } from '@element-plus/icons-vue';
  import { ElTree } from 'element-plus';
  import { ElMessage } from 'element-plus';
  import { countLeafNodes } from '@/views/message/persongroup/utils/index';
  import { getList, getPushRange, updatePushRange } from '@/api/message/system-notifications';
  import useComTree from '@/views/system-config/scene-manage/store/use-com-tree';
  import { storeToRefs } from 'pinia';
  import { cloneDeep } from 'lodash-es';
  import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
  import {
    CameraTree,
    CameraTreeNodeType,
    CameraQueryForm,
    getCameraTree,
  } from '@/api/camera/camera-preview';

  const props = defineProps<{
    selectedUser: treeSelected[];
    reFreshCamera: (arr: treeSelected[]) => unknown;
  }>();

  //相机树信息
  const cameraTreeTemp = ref<CameraTree[]>([]); // 保存修改name之后的树

  // 把树节点中所有 nodeType = camera 的 name 替换成 name + code
  function getCameraNameCode(data) {
    const cameraNameCode = data;
    for (let i = 0; i < data.length; i++) {
      const node = cameraNameCode[i];
      if (node.nodeType === 'camera') {
        node.name = node.name + ` [${node.code}] `;
      }
      if (node.children && node.children.length > 0) {
        getCameraNameCode(node.children);
      }
    }
    return cameraNameCode;
  }

  const getCameraData = async (tempQuery) => {
    await getCameraTree(tempQuery).then((res) => {
      cameraTreeTemp.value = getCameraNameCode(res);
    });
  };

  const comTree = useComTree();
  const { comTreeData } = storeToRefs(comTree);
  const loading = ref(true);
  const queryStr = ref<string>('');
  const defaultProps = { label: 'name' };
  const nodeData = computed(() => {
    const newList: any[] = [];
    if (comTreeData.value && comTreeData.value.length) {
      for (let i = 0; i < comTreeData.value.length; i++) {
        const data = comTreeData.value[i];
        if (data.children && data.children.length) {
          const treeItem = {
            id: data.id,
            code: data.id,
            name: data.name,
            children: data
              .labelList!.map((item) => {
                return {
                  id: item.id,
                  code: item.code,
                  name: item.name,
                  children: data
                    .children!.filter((children) => children.sceneLabelId === item.id)
                    .map((children) => {
                      return {
                        id: children.id,
                        code: children.code,
                        name: children.name,
                        isShop: true,
                      };
                    }),
                };
              })
              .filter((label) => label.children.length),
          };
          newList.push(treeItem);
        }
      }
    }
    return newList;
  });
  const filterNode = (query, nodeData, node) => {
    if (!query) return true;
    nodeData.filter = nodeData.name!.includes(query);
    if (!nodeData.filter && node.level > 1) {
      nodeData.filter = node.parent.data.filter;
    }
    return nodeData.filter!;
  };
  const treeRef = ref<InstanceType<typeof ElTree>>();
  const total = ref<number>(0);
  const selected = ref<number>(0);
  export interface treeSelected {
    code: number | string;
    name: string;
    id: number;
  }
  const selectedPeople = ref<treeSelected[]>([]);
  const handleTagClose = (code) => {
    const index = selectedPeople.value.findIndex((item) => item.code === code);
    if (index !== -1) {
      selectedPeople.value.splice(index, 1);
      selected.value = selectedPeople.value.length;
      treeRef.value!.setChecked(code, false, true);
    }
  };
  const emit = defineEmits(['cancel', 'submit']);
  const handleCancle = () => {
    emit('cancel');
  };
  const handleSubmit = () => {
    const arr = selectedPeople.value.map((selectedPeople) => selectedPeople.id);
    updatePushRange({ cameraIdList: arr })
      .then(() => {
        ElMessage({
          message: '修改成功',
          type: 'success',
          plain: true,
        });
        props.reFreshCamera(selectedPeople.value);
      })
      .catch((error) => {
        console.error(error);
        handleCancle();
      });

    // emit('submit', selectedPeople.value);
  };
  const handleCheckChange = (node, checked) => {
    if (!node.children) {
      if (checked) {
        const exists = selectedPeople.value.some((item) => item.code === node.code);
        if (!exists) {
          selectedPeople.value.push({
            id: node.id,
            code: node.code,
            name: node.name,
          });
        }
      } else {
        const index = selectedPeople.value.findIndex((item) => item.code === node.code);
        if (index !== -1) {
          selectedPeople.value.splice(index, 1);
        }
      }
      selected.value = selectedPeople.value.length;
    }
  };
  const handleNodeClick = (node, checked) => {
    if (!node.children) {
      treeRef.value!.setChecked(node.code, !checked.checked, true);
    }
  };

  onMounted(() => {
    getPushRange().then((res) => {
      selectedPeople.value = res;
    });
    getCameraData({});
    // if (props.selectedUser) {
    //   selectedPeople.value = cloneDeep(props.selectedUser);
    // }
    // selected.value = selectedPeople.value.length;
    // getList().then((res) => {
    //   comTreeData.value = res;
    //   total.value = countLeafNodes(nodeData.value);
    //   const selectedIds: TreeKey[] = selectedPeople.value.map((item) => item.code);
    //   treeRef.value!.setCheckedKeys(selectedIds);
    //   loading.value = false;
    // });
  });
  // watch(queryStr, (query) => {
  //   treeRef.value!.filter(query);
  // });
</script>

<style lang="scss" scoped>
  .select-tree {
    display: flex;
    width: 100%;
    height: 100%;
    .left {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
      border-right: 1px solid rgba(0, 0, 0, 0.06);
      .el-tree {
        width: 100%;
        margin-top: 20px;
        font-weight: 500;
        font-size: 14px;
        color: #303133;
        line-height: 22px;
        overflow-y: auto;
        max-height: calc(100% - 80px);
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      position: relative;
      .head {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.88);
        line-height: 22px;
      }
      .selected {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow-y: auto;
        max-height: calc(100% - 120px);
      }
      .footer {
        display: flex;
        gap: 6px;
        position: absolute;
        right: 24px;
        bottom: 20px;
      }
    }
  }
</style>