pqs-9100_client/frontend/src/views/home/components/tree.vue

<template>
  <div class='plan_tree'>
    <div class='search_view'>
      <el-input
        placeholder='请输入计划名称'
        clearable
        v-model='searchForm.planName'
        show-word-limit
        maxlength="32"
      ></el-input>
      <el-tooltip content="检测计划列表" placement="top">
      <Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
            @click.stop='detail()' />
      </el-tooltip>
    </div>
    <div class='tree_container'>
      <el-tree
        :data='data'
        ref='treeRef'
        :filter-node-method='filterNode'
        :props='defaultProps'
        node-key='id'
        class="filter-tree"
        :highlight-current="true"
        default-expand-all
        :default-checked-keys='defaultChecked'
        @node-click='handleNodeClick'
      >
        <template #default='{ node, data }'>
          <span class='custom-tree-node' style='display: flex;align-items: center;'>
            <Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
                      :style="{color:node.label=='未检'?'#fac858':node.label=='检测中'?'#ee6666':'#91cc75'}" />
            <span>{{ node.label }}</span>
            <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { type Plan } from '@/api/plan/interface';
import { Menu, Platform, CircleCheck,Loading } from '@element-plus/icons-vue'
import { nextTick, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router'
import {useCheckStore} from "@/stores/modules/check";
import { ElTooltip } from 'element-plus';

const router = useRouter()
const checkStore = useCheckStore()
const filterText = ref('')
const treeRef = ref()
const data: any = ref([])
const defaultProps = {
  children: 'children',
  label: 'name',
  pid: 'pid',
}
const searchForm = ref({
  planName: '',
})
const defaultChecked = ref<string[]>([])  // 明确类型为 number[]
const tree = ref(false)//确保左侧树高凉只执行一次
const getTreeData = (val: any) => {
  defaultChecked.value = [];
  data.value = val;

  for (let item of data.value) {
    if (item.children.length > 0) {
      let node = item.children[0];
      defaultChecked.value.push(node.id);
      checkStore.setPlan(node);
      // 高亮显示第一个节点
      // 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
      nextTick(() => {
        treeRef.value?.setCurrentKey(node.id);
        idd.value = node.id;
      });
      // 找到第一个符合条件的 children 后跳出循环
      break;
    }
  }
}

//点击表格后左侧树刷新，高亮显示对应节点
const  clickTableToTree = (val: any,id:any) => {

  defaultChecked.value = []
  data.value = val
  let node = ref('')
  if (data.value.length > 0) {
    for (let i = 0; i < data.value.length; i++){
        for (let j = 0; j < data.value[i].children.length; j++) {
            if (data.value[i].children[j].id == id) {
              node.value = data.value[i].children[j].id
              break;
            }
        }
    }
    
    // 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
    nextTick(() => {
      treeRef.value?.setCurrentKey(node.value);
      idd.value = node.value
    });
   
  }
}

const {updateSelectedTreeNode}  = defineProps<{
    updateSelectedTreeNode:Function;
  }>();
watch(
  () => searchForm.value.planName,
  (val) => {
    treeRef.value!.filter(val)
  },
  {
    deep: true,
  },
)

const idd = ref('')
const handleNodeClick = (data: Plan.ResPlan) => {

    if (data.name === '未检' || data.name === '检测中' || data.name === '检测完成') {
      // 如果是父节点，不执行任何操作
      //console.log('父节点不执行任何操作');
      // 设置当前高亮节点
    nextTick(() => {
      treeRef.value?.setCurrentKey(idd.value);
    });
    return;
  }
 
  idd.value = data.id

  checkStore.setPlan(data);
  updateSelectedTreeNode(data.id)
}
const filterNode = (value: string, data: any) => {
  if (!value) return true
   return data.name.includes(value)
}


// 点击详情
const detail = () => {
  router.push('/plan/planList')
}
onMounted(() => {
 // console.log()
})
defineExpose({ getTreeData ,clickTableToTree})


</script>
<style lang='scss' scoped>
.plan_tree {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .search_view {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;
    align-items: center;

    .el-input {
      margin-top: 6px;
    }
  }

  .el-input {
    width: 100%;
    margin: 0 10px 10px 0;
  }

  .tree_container {
    height: 100%;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;

    .el-tree {
      // height: 100%;
      width: auto;
    }
  }
}


.filter-tree {
//  border: 1px solid #dcdfe6;
  min-width: 100%;
  height: 97%;
  display: inline-block;
  overflow: auto;
  margin-top: 12px;

}

//.filter-tree span {
//  font-size: 16px;
//  display:block;
//  overflow:hidden;
  // word-break:keep-all;
  // white-space:nowrap;
  //  text-overflow:ellipsis;
//   padding-right: 12px;
//}
.leftBox {
  // float: left;
  // width: 20%;
  height: 100%;
  width: 100%;
}
.left {
  height: calc(100% - 45px);
  overflow: auto;
}
/* 设置滚动条宽度 */
:deep(.bodyTwo ::-webkit-scrollbar) {
    width: 3px !important; 
    height: 6px !important;   
  } 
</style>