自动检测/手动检测页面

frontend/src/views/plan/autoTest/components/tree.vue

@@ -0,0 +1,125 @@
+<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
+        show-checkbox
+        :default-checked-keys="defaultChecked"
+        @node-click="handleNodeClick"
+        @check-change="changeSelect"
+      >
+        <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>
+          </span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, defineExpose, watch } from "vue";
+import { Menu, Platform } 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;
+  defaultChecked.value.push(data.value[0].children[0].children[0].id);
+  console.log(defaultChecked.value, "+++++++++++++");
+  console.log(treeList.value);
+  treeRef.value.setCurrentKey(defaultChecked.value);
+};
+const filterText = ref("");
+const treeRef = ref();
+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 });
+</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>