项目微调

frontend/src/views/home/components/tree.vue

@@ -1,26 +1,28 @@
 <template>
-  <div class="plan_tree">
-    <div class="search_view">
+  <div class='plan_tree'>
+    <div class='search_view'>
       <el-input
-        placeholder="请输入计划名称"
-        v-model="searchForm.planName"
+        placeholder='请输入计划名称'
+        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({})" />
+      <Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
+            @click.stop='detail()' />
     </div>
-    <div class="tree_container">
+    <div class='tree_container'>
       <el-tree
-        :data="data"
-        ref="treeRef"
-        :filter-node-method="filterNode"
-        :props="defaultProps"
-        node-key="id"
+        :data='data'
+        ref='treeRef'
+        :filter-node-method='filterNode'
+        :props='defaultProps'
+        node-key='id'
         default-expand-all
-        :default-checked-keys="defaultChecked"
-        @node-click="handleNodeClick"
+        :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'}"/>
+        <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>
@@ -29,52 +31,54 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-import { Menu,Platform} from "@element-plus/icons-vue";
-const emit = defineEmits(["jump"]);
-const data: any = ref([]);
+<script lang='ts' setup>
+import { Menu, Platform } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const data: any = ref([])
 const defaultProps = {
-  children: "children",
-  label: "name",
-  pid: "pid",
-};
+  children: 'children',
+  label: 'name',
+  pid: 'pid',
+}
 const searchForm = ref({
-  planName: "",
-});
-const defaultChecked = ref([]);
+  planName: '',
+})
+const defaultChecked = ref([])
 const getTreeData = (val: any) => {
-  defaultChecked.value = [];
-  data.value = val;
-  defaultChecked.value.push(data.value[0].children[0].id);
-};
-const filterText = ref("");
-const treeRef = ref();
+  defaultChecked.value = []
+  data.value = val
+  defaultChecked.value.push(data.value[0].children[0].id)
+}
+const filterText = ref('')
+const treeRef = ref()
 watch(
   () => searchForm.value.planName,
   (val) => {
-    treeRef.value!.filter(val);
+    treeRef.value!.filter(val)
   },
   {
     deep: true,
-  }
-);
+  },
+)
 const handleNodeClick = (data) => {
-  console.log(data);
-};
+  console.log(data)
+}
 const filterNode = (value: string, data) => {
-  if (!value) return true;
-  return data.name.includes(value);
-};
+  if (!value) return true
+  return data.name.includes(value)
+}
 // 点击详情
-const detail = (e: any) => {
-  emit("jump", e);
-};
+const detail = () => {
+  router.push('/plan')
+}
 onMounted(() => {
-  console.log();
-});
-defineExpose({ getTreeData });
+  console.log()
+})
+defineExpose({ getTreeData })
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .plan_tree {
   // width: 200px;
   // height: 100%;
@@ -83,6 +87,7 @@ defineExpose({ getTreeData });
   padding: 5px;
   // height: calc(100% - 70px);
   background-color: #fff;
+
   .search_view {
     width: 100%;
     height: auto;
@@ -91,10 +96,12 @@ defineExpose({ getTreeData });
     padding: 0 5px;
     box-sizing: border-box;
     align-items: center;
-    .el-input{
+
+    .el-input {
       margin-top: 6px;
     }
   }
+
   .el-input {
     width: 100%;
     margin: 0 10px 10px 0;