修改 测试脚本页面

frontend/src/views/machine/testScript/components/testScriptDetail.vue

@@ -1,36 +1,32 @@
 <template>
     <div class="divider-container">
-        <el-divider style="width: 400px">检测脚本信息</el-divider>
-        <el-divider style="width: 1300px">检测项目概要信息</el-divider>
+        <el-divider style="width: 300px" content-position="left">检测脚本信息</el-divider>
+        <el-divider style="width: 400px" content-position="left">通讯脚本</el-divider>
+        <el-divider style="flex: 1" content-position="left">检测项目概要信息</el-divider>
     </div>
     <div class="data-check-content">
         <div class="content-tree">
             <Tree />
         </div>
+        <div class="content-tree" style="width: 400px">
+            <Commun :options="props.options" />
+        </div>
 
-        <div class="content-right-Tabs" style="height: 570px; width: 100px">
-            <el-tabs type="border-card" style="height: 100%">
-                <el-tab-pane
-                    v-for="tab in props.options"
-                    :key="tab.name"
-                    :label="tab.label.replace(/准确度|检测/g, '')"
-                    :name="tab.name"
-                >
+        <div class="content-right-Tabs" style="height: calc(100vh - 335px); width: 100px">
+            <el-tabs type="border-card" style="height: 100%" v-model="activeName">
+                <el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
+                    <div class="dialog-footer">
+                        <el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
+                        <el-button :icon="CirclePlus" type="primary" @click="openAddDialog()">保存测试项</el-button>
+                    </div>
                     <!-- 频率tab -->
-                    <el-tabs type="border-card" style="height: 500px">
+                    <el-tabs type="border-card">
                         <el-tab-pane
                             v-for="subTab in tab.children || []"
                             :key="subTab.name"
                             :label="subTab.label"
                             :name="subTab.name"
                         >
-                            <!-- 子标签页内容 -->
-                            <div class="dialog-footer">
-                                <el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
-                                <el-button :icon="CirclePlus" type="primary" @click="openAddDialog()">
-                                    保存测试项
-                                </el-button>
-                            </div>
                             <div class="table-container">
                                 <el-table
                                     :data="tableData"
@@ -40,8 +36,7 @@
                                         color: '#fff'
                                     }"
                                     :cell-style="{ textAlign: 'center' }"
-                                    style="width: 100%"
-                                    :style="{ height: '390px', overflow: 'hidden' }"
+                                    height="calc(100vh - 515px)"
                                 >
                                     <el-table-column prop="sort" label="组次" width="60" />
                                     <el-table-column prop="frequency" label="频率(Hz)" width="100" />
@@ -89,9 +84,6 @@
                                     </el-table-column>
                                 </el-table>
                             </div>
-                            <!-- <div class="dialog-footer" style="margin-top: 20px;">
-                                        
-                                  </div> -->
                         </el-tab-pane>
                     </el-tabs>
                 </el-tab-pane>
@@ -99,22 +91,22 @@
         </div>
     </div>
 
-    <TestProjectPopup ref="testProjectPopup" />
+    <TestProjectPopup ref="testProjectPopup" :options="props.options" :activeName="activeName" @addTab="addTab" />
 </template>
 
 <script setup lang="ts">
-import { type PropType, ref } from 'vue'
+import { type PropType, ref, nextTick } from 'vue'
 import Tree from './tree.vue'
+import Commun from './communication.vue'
 import type { CascaderOption } from 'element-plus'
 import { CirclePlus, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
 import type { TestScript } from '@/api/device/interface/testScript'
 import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
 
-const testProjectPopup = ref()
-
 interface TabOption {
     label: string
     name: string
+    value: string
     children?: TabOption[]
 }
 
@@ -124,7 +116,8 @@ const props = defineProps({
         required: true
     }
 })
-
+const activeName = ref('')
+const testProjectPopup = ref()
 const tableData = [
     { sort: 1, frequency: 42.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
     { sort: 2, frequency: 50, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
@@ -133,116 +126,45 @@ const tableData = [
     { sort: 5, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
     { sort: 6, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }
 ]
-
-const tabs = ref([
-    {
-        label: '频率',
-        name: 'resultTab',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab' }
-        ]
-    },
-    {
-        label: '电压',
-        name: 'resultTab1',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab1' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab1' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab1' }
-        ]
-    },
-    {
-        label: '电流',
-        name: 'resultTab2',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab2' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab2' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab2' }
-        ]
-    },
-    {
-        label: '电压不平衡度',
-        name: 'resultTab3',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab3' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab3' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab3' }
-        ]
-    },
-    {
-        label: '电流不平衡度',
-        name: 'resultTab4',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab4' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab4' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab4' }
-        ]
-    },
-    {
-        label: '谐波电压',
-        name: 'resultTab5',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab5' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab5' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab5' }
-        ]
-    },
-    {
-        label: '谐波电流',
-        name: 'resultTab6',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab6' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab6' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab6' }
-        ]
-    },
-    {
-        label: '间谐波电压',
-        name: 'resultTab7',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab7' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab7' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab7' }
-        ]
-    },
-    {
-        label: '间谐波电流',
-        name: 'resultTab8',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab8' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab8' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab8' }
-        ]
-    },
-    {
-        label: '电压暂升暂降',
-        name: 'resultTab9',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab9' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab9' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab9' }
-        ]
-    },
-    {
-        label: '闪变',
-        name: 'resultTab10',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab10' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab10' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab10' }
-        ]
-    }
-])
-
-
-
+const tabData: any = ref([])
 
 // 打开 drawer(新增、编辑)
 const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
+    if (titleType == 'add') {
+    }
     testProjectPopup.value?.open(titleType, row)
 }
+// 新增保存
+const addTab = (row: any) => {
+    let flag = false
+    let list: any = {}
+    tabData.value.forEach(item => {
+        if (item.value == activeName.value) {
+            list = item
+            item.children.forEach(k => {
+                if (k.value == row.value) {
+                    flag = true
+                }
+            })
+        }
+    })
+    if (flag) {
+        list.children.push(row)
+    }
+    // if (tab.length == 0) {
+    //     tabData.value.filter(item => item.value == activeName.value)[0].children?.push(row)
+    // }
+}
+onMounted(() => {
+    props.options.forEach(item => {
+        tabData.value.push({
+            label: item.label.replace(/准确度|检测/g, ''),
+            value: item.value,
+            children: []
+        })
+    })
+    activeName.value = tabData.value[0].value
+})
 </script>
 <style scoped>
 .data-check-content {
@@ -252,12 +174,12 @@ const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> =
 
 .content-tree {
     width: 300px;
-    height: 560px;
+    height: calc(100vh - 335px);
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     margin-right: 10px;
     overflow: auto; /* 同时启用垂直和水平滚动 */
-    overflow-x: auto; /* 确保水平滚动条生效 */
+    overflow-x: hidden;
 }
 
 /* 确保 el-tree 内容可以超出容器宽度 */