This commit is contained in:
sjl
2024-12-26 09:28:19 +08:00
parent 2e17531c52
commit 6ce58e86ad
12 changed files with 414 additions and 48 deletions

View File

@@ -1,4 +1,8 @@
<template>
<div class="divider-container">
<el-divider style="width: 400px">检测脚本信息</el-divider>
<el-divider style="width: 1300px">检测项目概要信息</el-divider>
</div>
<div class="data-check-content">
<div class="content-tree" >
<el-tree
@@ -8,32 +12,91 @@
:props="defaultProps"
@node-click="handleNodeClick" />
</div>
<div class="content-right-Tabs" style="height: 500px;">
<div class="content-right-Tabs" style="height: 470px;width: 100px;">
<el-tabs type="border-card" style="height: 100%;">
<el-tab-pane
v-for="tab in tabs"
v-for="tab in props.options"
:key="tab.name"
:label="tab.label"
:label="tab.label"
:name="tab.name">
<!-- 频率tab -->
<el-tabs type="border-card" style="height: 430px;">
<el-tabs type="border-card" style="height: 400px;">
<el-tab-pane
v-for="subTab in tab.subTabs"
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>
</div>
<div class="table-container">
<el-table :data="tableData"
:header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } "
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '240px',overflow:'hidden'}">
<el-table-column prop="sort" label="组次" width="60" />
<el-table-column prop="frequency" label="频率(Hz)" width="100" />
<el-table-column prop="L1" label="L1"/>
<el-table-column prop="L2" label="L2"/>
<el-table-column prop="L3" label="L3"/>
<el-table-column label="操作" min-width="100">
<template #default="{ row }">
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
<el-button type="primary" link :icon='CopyDocument' @click="openAddDialog('edit',row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="dialog-footer" style="margin-top: 20px;">
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog()">保存测试项</el-button>
</div>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
</div>
</div>
<TestProjectPopup ref="testProjectPopup" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { type PropType, ref } from 'vue';
import { data } from "@/api/plan/autoTest.json";
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;
children?: TabOption[];
}
const props = defineProps({
options: {
type: Array as PropType<TabOption[]>,
required: true
},
});
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°' },
{ sort: 3, frequency: 50.05, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
{ sort: 4, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
{ 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([
{
@@ -147,17 +210,24 @@ const handleNodeClick = (data: any) => {
console.log(data);
};
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
testProjectPopup.value?.open(titleType, row)
}
</script>
<style scoped>
.data-check-content {
display: flex;
gap: 20px;
gap: 10px;
}
.content-tree {
width: 300px;
height: 500px;
height: 470px;
border: 1px solid #dcdfe6;
border-radius: 4px;
margin-right: 10px;
@@ -173,6 +243,21 @@ const handleNodeClick = (data: any) => {
.content-right-Tabs {
flex: 1; /* 根据需要调整宽度比例 */
}
.dialog-footer{
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.divider-container {
display: flex;
}
.divider-container .el-divider {
margin-right: 30px; /* 根据需要调整间距 */
}
</style>