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

<template>
  <div class="plan_tree">
    <!-- <div class="search_view">
      <el-input
        placeholder="请输入计划名称"
        v-model="searchForm.planName"
      ></el-input>
    </div> -->
    <div class="tree_container">
      <el-tree
        :data="data"
        ref="treeRef"
        :filter-node-method="filterNode"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :default-checked-keys="defaultChecked"
        @node-click="handleNodeClick"
        @check-change="changeSelect"
      >
      <!-- scriptIdx -->
        <template #default="{ node, data }">
          <span
            class="custom-tree-node"
            style="display: flex; align-items: center"
          >
            <CircleCheck v-if="data.isChildNode && data.scriptIdx < currentIndex" style="width:18px;height: 18px;margin-right:8px;color:#67C23A;"/>
            
			      <svg-icon v-if="data.isChildNode && data.scriptIdx === currentIndex" name="loading" spin ></svg-icon> 
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, watch } from "vue";
import { Menu, Platform, CircleCheck,Loading } from "@element-plus/icons-vue";
const emit = defineEmits(["jump"]);
const data: any = ref([]);
const defaultProps = {
  children: "children",
  label: "name",
  pid: "pid",
};
const searchForm = ref({
  planName: "",
});
const defaultChecked: any = ref([]);
const treeList: any = ref([]);
const getTreeData = (val: any) => {
  defaultChecked.value = [];
  data.value = val;

  if(data.value[0].children[0].hasOwnProperty("children"))
  {
    defaultChecked.value.push(data.value[0].children[0].children[0].id);
  }
  else
  {
    defaultChecked.value.push(data.value[0].children[0].id);
  }

  treeRef.value.setCurrentKey(defaultChecked.value);
};

const getCurrentIndex = (val: number) => {
  currentIndex.value = val;
};
const filterText = ref("");
const treeRef = ref();
const currentIndex = ref(0);

// const timer = setInterval(() => {
//   currentIndex.value++;
//       if (currentIndex.value > 14) 
//       currentIndex.value = 0;
//    // console.log(currentIndex.value);
    
//     }, 2000);


watch(
  () => searchForm.value.planName,
  (val) => {
    treeRef.value!.filter(val);
  },
  {
    deep: true,
  }
);
const changeSelect=()=>{
//console.log(treeRef.value.getCheckedKeys());
}
const handleNodeClick = (data) => {
  console.log(data);
};
const filterNode = (value: string, data) => {
  if (!value) return true;
  return data.name.includes(value);
};
// 点击详情
const detail = (e: any) => {
  emit("jump", e);
};
onMounted(() => {
  console.log();
});
defineExpose({ getTreeData,getCurrentIndex });
</script>
<style lang="scss" scoped>
.plan_tree {
  // width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  // height: calc(100% - 70px);
  background-color: #fff;
  box-sizing: border-box;
  .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 {
    flex: 1;
    height: 100%;
    overflow-y: auto;

    .el-tree {
      height: 100%;
    }
  }
}
</style>