修改 测试脚本页面
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user