修改 测试脚本页面

This commit is contained in:
GGJ
2025-02-17 08:39:18 +08:00
parent 1e83172e9a
commit bba0ced7f9
9 changed files with 722 additions and 277 deletions

View File

@@ -1,27 +1,46 @@
<template>
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1500px">
<div class="dialog-content">
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="全局设置菜单">
<!-- 全局设置菜单内容 -->
<div style="height: 295px">
<el-radio-group v-model="radio">
<el-radio
v-for="item in tabChildren"
:key="item"
:label="item.label"
:value="item.value"
border
style="margin: 0 0 10px 10px"
/>
<!-- <el-radio v-for="item in tabChildren" :value="item.value" border>{{ item.label }}</el-radio> -->
</el-radio-group>
</div>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" class="left-tabs" style="height: 100%">
<el-tab-pane label="输出菜单">
<!-- 输出菜单内容 -->
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '295px', overflow: 'hidden' }"
:show-header="false"
:span-method="arraySpanMethod"
:cell-style="tableStyle.cellStyle"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
@row-click="handleRowClick"
>
<el-table-column prop="sort" label="相别" width="60" />
<el-table-column prop="frequency" label="电压/电流" width="90" />
<el-table-column prop="L1" label="值" width="180" />
<el-table-column prop="sort" label="相别" width="60" align="center" />
<el-table-column prop="frequency" label="电压/电流" align="center" width="90" />
<el-table-column prop="L1" label="值" width="180" align="center" />
<el-table-column label="操作" width="80">
<template #default="{}">
<el-button type="info" :icon="Bottom"></el-button>
<el-button type="primary" :icon="Bottom"></el-button>
</template>
</el-table-column>
<el-table-column label="操作">
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-button
:type="buttonTypes[$index].channel || 'info'"
@@ -61,7 +80,7 @@
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="全局设置菜单">
<!-- 全局设置菜单内容 -->
<div style="height: 295px;">
<div style="height: 295px">
<div class="form-item-container">
<el-form-item label="频率:" prop="name">
<div class="input-label-container">
@@ -120,6 +139,28 @@ import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptH
import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue'
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue'
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue'
const emit = defineEmits(['addTab'])
interface TabOption {
label: string
name: string
value: string
children?: TabOption[]
}
const props = defineProps({
options: {
type: Array as PropType<TabOption[]>,
required: true
},
activeName: {
type: String,
required: true
}
})
const form = ref({
value: '',
label: ''
})
const dialogVisible = ref(false)
const dialogTitle = ref()
@@ -145,7 +186,8 @@ const tableData = [
{ sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°' }
]
const radio = ref('')
const tabChildren: any = ref([])
// 定义 span-method 逻辑
const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
if (columnIndex === 0 || columnIndex === 3) {
@@ -163,6 +205,17 @@ const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIn
}
}
}
const selectedRow = ref('L1')
const tableStyle = {
cellStyle: ({ row }: { row: any }) => {
return row.sort === selectedRow.value
? { backgroundColor: '#dcdcdc' } // 设置选中行的背景颜色
: {}
}
}
const handleRowClick = async (row: any) => {
selectedRow.value = row.sort
}
// 切换按钮类型
const toggleType = (
@@ -182,7 +235,11 @@ const close = () => {
}
// 保存数据
const save = () => {}
const save = () => {
form.value.value = radio.value
form.value.label = tabChildren.value.filter(item => item.value == radio.value)[0].label
emit('addTab', form.value)
}
// 打开弹窗,可能是新增,也可能是编辑
const open = (sign: string, row: any) => {
@@ -199,6 +256,8 @@ const open = (sign: string, row: any) => {
transient: 'info'
}
})
tabChildren.value = props.options.filter(item => item.value == props.activeName)[0].children || []
radio.value = tabChildren.value[0].value || ''
}
// 打开 drawer(新增、编辑)
@@ -226,12 +285,12 @@ defineExpose({ open })
}
.left-tabs {
flex: 3; /* 左侧 tab 占据 3/4 的宽度 */
margin-right: 10px; /* 可选:添加间距 */
width: 980px;
margin: 0 10px; /* 可选:添加间距 */
}
.right-tabs {
flex: 1; /* 右侧 tab 占据 1/4 的宽度 */
flex: 1;
}
.form-item-container {