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'
      ></el-input>
      <Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
            @click.stop='detail()' />
    </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=='未检'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" />
            <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";

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 getTreeData = (val: any) => {
  defaultChecked.value = []
  data.value = val
  if (data.value.length > 0 && data.value[0].children.length > 0) {
    let node = data.value[0].children[0]
    defaultChecked.value.push(node.id)
    checkStore.setPlanId(node.id)
    checkStore.setPlanCode(node.code)
    checkStore.setScriptId(node.scriptId)
    checkStore.setErrorSysId(node.errorSysId)
    // 高亮显示第一个节点
    // 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
    nextTick(() => {
      treeRef.value?.setCurrentKey(node.id);
    });
    //console.log(checkStore.planId,checkStore.planCode,checkStore.scriptId,checkStore.errorSysId)
  }

}

const {updateSelectedTreeNode}  = defineProps<{
    updateSelectedTreeNode:Function;
  }>();
watch(
  () => searchForm.value.planName,
  (val) => {
    treeRef.value!.filter(val)
  },
  {
    deep: true,
  },
)
const handleNodeClick = (data: Plan.ResPlan) => {
  checkStore.setPlanId(data.id)
  checkStore.setPlanCode(data.code)
  checkStore.setScriptId(data.scriptId)
  checkStore.setErrorSysId(data.errorSysId)
  updateSelectedTreeNode(data.id)
}
const filterNode = (value: string, data: any) => {
  if (!value) return true
   return data.name.includes(value)
}


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


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