方案数据删除后默认显示第一个

src/views/govern/device/planData/components/schemeTree.vue

@@ -1,10 +1,18 @@
 <template>
     <div>
-        <div :style="{ width: menuCollapse ? '40px' : '280px' }"
+        <div
-            style="transition: all 0.3s; overflow: hidden; height: 100%">
+            :style="{ width: menuCollapse ? '40px' : '280px' }"
-            <Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            style="transition: all 0.3s; overflow: hidden; height: 100%"
-                :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
+        >
-                style="cursor: pointer" />
+            <Icon
+                v-show="menuCollapse"
+                @click="onMenuCollapse"
+                :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                :class="menuCollapse ? 'unfold' : ''"
+                size="18"
+                class="fold ml10 mt20 menu-collapse"
+                style="cursor: pointer"
+            />
             <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
                 <div style="display: flex; align-items: center" class="mb10">
                     <el-input v-model="filterText" placeholder="请输入内容" clearable>
@@ -12,18 +20,37 @@
                             <Icon name="el-icon-Search" style="font-size: 16px" />
                         </template>
                     </el-input>
-                    <Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    <Icon
-                        :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
+                        @click="onMenuCollapse"
-                        style="cursor: pointer" />
+                        :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                        :class="menuCollapse ? 'unfold' : ''"
+                        size="18"
+                        class="fold ml10 menu-collapse"
+                        style="cursor: pointer"
+                    />
                 </div>
-                <el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
+                <el-tree
-                    :filter-node-method="filterNode" node-key="id" v-bind="$attrs" default-expand-all :data="tree"
+                    style="flex: 1; overflow: auto"
-                    ref="treRef" @node-click="clickNode" :expand-on-click-node="false">
+                    :props="defaultProps"
+                    highlight-current
+                    :filter-node-method="filterNode"
+                    node-key="id"
+                    v-bind="$attrs"
+                    default-expand-all
+                    :data="tree"
+                    ref="treRef"
+                    @node-click="clickNode"
+                    :expand-on-click-node="false"
+                >
                     <template #default="{ node, data }">
                         <span class="custom-tree-node">
                             <div class="left">
-                                <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
+                                <Icon
-                                    v-if="data.icon" />
+                                    :name="data.icon"
+                                    style="font-size: 16px"
+                                    :style="{ color: data.color }"
+                                    v-if="data.icon"
+                                />
                                 <span>{{ node.label }}</span>
                             </div>
                             <div class="right">
@@ -85,12 +112,10 @@ const filterNode = (value: string, data: any, node: any) => {
     if (!value) return true
     // return data.name.includes(value)
     if (data.name) {
-
         return chooseNode(value, data, node)
     }
 }
 const chooseNode = (value: string, data: any, node: any) => {
-
     if (data.name.indexOf(value) !== -1) {
         return true
     }
@@ -136,7 +161,7 @@ const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getC
 const config = useConfig()
 const tree = ref()
 const treRef = ref()
-const id = ref(null)
+const id: any = ref(null)
 const treeData = ref({})
 //获取方案树形数据
 const getTreeList = () => {
@@ -155,7 +180,6 @@ const getTreeList = () => {
         tree.value = res.data
         nextTick(() => {
             if (arr.length) {
-
                 treRef.value.setCurrentKey(id.value || arr[0].id)
                 let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
                 // 注册父组件事件
@@ -190,7 +214,7 @@ const add = (node: any, data: any) => {
     planId.value = data.id
     //添加测试项
     if (data?.children) {
-        dialogRef.value.detailsType("tree")
+        dialogRef.value.detailsType('tree')
         handleOpen(2, planId.value)
     }
 }
@@ -201,19 +225,19 @@ const edit = async (node: Node, data: any) => {
         .then(res => {
             //修改方案
             if (data?.children) {
-                dialogRef.value.detailsType("")
+                dialogRef.value.detailsType('')
                 dialogRef.value.details(res.data)
                 handleOpen(1, planId.value)
             }
             //修改测试项
             else {
                 monitorId.value = data.id
-                dialogRef.value.detailsType("tree")
+                dialogRef.value.detailsType('tree')
                 dialogRef.value.details(res.data.records[0])
                 handleOpen(3, planId.value)
             }
         })
-        .catch(e => { })
+        .catch(e => {})
 }
 /** 删除树节点 */
 const del = (node: Node, data: any) => {
@@ -228,6 +252,7 @@ const del = (node: Node, data: any) => {
             delRecord({ id: data.id }).then((res: any) => {
                 if (res.code == 'A0000') {
                     ElMessage.success('删除成功')
+                    id.value=null
                     getTreeList()
                 }
             })
@@ -240,7 +265,7 @@ const del = (node: Node, data: any) => {
         })
 }
 //取消删除
-const cancelDel = () => { }
+const cancelDel = () => {}
 const clickNode = (e: anyObj) => {
     e?.children ? (planId.value = e.id) : (planId.value = e.pid)
     id.value = e.id
@@ -248,7 +273,7 @@ const clickNode = (e: anyObj) => {
     emit('nodeChange', e)
 }
 const setCheckedNode = (e: anyObj) => {
-    console.log("🚀 ~ setCheckedNode ~ e:", e)
+    console.log('🚀 ~ setCheckedNode ~ e:', e)
     id.value = e
     treRef.value.setCurrentKey(e)
 }

src/views/govern/device/planData/index.vue

@@ -315,46 +315,54 @@ const nodeClick = async (e: anyObj) => {
     let id = e.pid ? e.pid : e.id
 
     //查询测试项信息
-    await getTestRecordInfo(id)
+    if (id) {
-        .then(async res => {
+        await getTestRecordInfo(id)
-            deviceData.value = res.data
+            .then(async res => {
-            console.log(deviceData.value, '.......')
+                deviceData.value = res.data
-            if (res.data.records.length == 1) {
+                console.log(deviceData.value, '.......')
-                activeName.value = res.data.records[0].id
+                if (res.data.records.length == 1) {
-            } else {
+                    activeName.value = res.data.records[0].id
-                res.data.records.map((item: any, index: any) => {
-                    //多层
-                    if (item.id == e.id) {
-                        activeName.value = item.id
-                        return
-                    } else {
-                        activeName.value = res.data.records[0].id
-                        return
-                    }
-                })
-            }
-            console.log(activeName.value, '7777777777777')
-            searchForm.value.index = [indexOptions.value[0].id]
-
-            schemeTreeRef.value.getPlanData(deviceData.value)
-            await setTimeout(() => {
-                loading.value = true
-                if (e.pid) {
-                    init(true)
                 } else {
-                    init(false)
+                    res.data.records.map((item: any, index: any) => {
+                        //多层
+                        if (item.id == e.id) {
+                            activeName.value = item.id
+                            return
+                        } else {
+                            activeName.value = res.data.records[0].id
+                            return
+                        }
+                    })
                 }
-            }, 100)
+                console.log(activeName.value, '7777777777777')
+                searchForm.value.index = [indexOptions.value[0].id]
 
-            loading.value = false
+                schemeTreeRef.value.getPlanData(deviceData.value)
-        })
+                await setTimeout(() => {
-        .catch(e => {
+                    loading.value = true
-            loading.value = false
+                    if (e.pid) {
-        })
+                        init(true)
+                    } else {
+                        init(false)
+                    }
+                }, 100)
+
+                loading.value = false
+            })
+            .catch(e => {
+                loading.value = false
+            })
+    } else {
+        schemeTreeRef.value.getTreeList()
+    }
 }
 const dialogRef = ref()
 const dailogForm = ref()
 const handleOpen = (val: any) => {
+    if(!deviceData.value){
+        dialogRef.value.open(val, '')
+        return
+    }
     deviceData.value.records.map((item: any) => {
         if (item.id == activeName.value) {
             dailogForm.value = item
@@ -568,7 +576,6 @@ const init = (flag: boolean) => {
 
                                         seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
                                     })
-console.log(seriesList,"9999999999");
                                     echartsData.value.options.series.push({
                                         name: kk[0].phase + '相' + item[0].anotherName,
                                         type: 'line',