pqs-9100_client/frontend/src/views/machine/testScript/components/testProjectPopup.vue

<template>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
        <div class="dialog-content">
            <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"
                    >
                        <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 label="操作" width="80">
                            <template #default="{}">
                                <el-button type="info" :icon="Bottom"></el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="{ row, $index }">
                                <el-button
                                    :type="buttonTypes[$index].channel || 'info'"
                                    @click="toggleType(row, $index, 'channel')"
                                >
                                    通道使能
                                </el-button>
                                <el-button
                                    :type="buttonTypes[$index]?.harmonic || 'info'"
                                    @click="toggleType(row, $index, 'harmonic')"
                                >
                                    谐波使能
                                </el-button>
                                <el-button
                                    :type="buttonTypes[$index]?.interHarmonic || 'info'"
                                    @click="toggleType(row, $index, 'interHarmonic')"
                                >
                                    间谐波使能
                                </el-button>
                                <el-button
                                    :type="buttonTypes[$index]?.flicker || 'info'"
                                    @click="toggleType(row, $index, 'flicker')"
                                >
                                    闪变使能
                                </el-button>
                                <el-button
                                    :type="buttonTypes[$index]?.transient || 'info'"
                                    @click="toggleType(row, $index, 'transient')"
                                >
                                    暂态使能
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <el-tabs type="border-card" class="right-tabs" style="height: 100%">
                <el-tab-pane label="全局设置菜单">
                    <!-- 全局设置菜单内容 -->
                    <div style="height: 295px;">
                        <div class="form-item-container">
                            <el-form-item label="频率：" prop="name">
                                <div class="input-label-container">
                                    <el-input style="width: 100px" />
                                    <label>Hz</label>
                                </div>
                            </el-form-item>
                        </div>
                        <div class="button-label-container">
                            <label>参考设定值列表:</label>
                            <el-button type="primary" :icon="EditPen" @click="openDialog">编辑</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div style="margin-top: 10px">
            <el-tabs type="border-card" class="custom-tabs">
                <el-tab-pane label="电压/电流编辑">
                    <TestScriptVolCurTab />
                </el-tab-pane>
                <el-tab-pane label="谐波编辑">
                    <TestScriptHarmTab />
                </el-tab-pane>
                <el-tab-pane label="间谐波编辑">
                    <TestScriptInHarmTab />
                </el-tab-pane>
                <el-tab-pane label="闪变编辑">
                    <TestScriptFlickerTab />
                </el-tab-pane>
                <el-tab-pane label="暂态编辑">
                    <TestScriptDipTab />
                </el-tab-pane>
            </el-tabs>
        </div>

        <SetValueTable ref="setValueTable" />

        <template #footer>
            <div>
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { dialogBig } from '@/utils/elementBind'
import { onMounted, reactive, ref } from 'vue'
import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue'
import { EditPen, ArrowDown, Bottom } from '@element-plus/icons-vue'
import { type TabsInstance } from 'element-plus'
import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue'
import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue'
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 dialogVisible = ref(false)
const dialogTitle = ref()
const setValueTable = ref()
const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const
type ButtonType = (typeof buttonTypeOptions)[number]
// 初始化按钮类型
const buttonTypes = reactive<{
    [key: number]: {
        channel: ButtonType
        harmonic: ButtonType
        interHarmonic: ButtonType
        flicker: ButtonType
        transient: ButtonType
    }
}>({})

const tableData = [
    { sort: 'L1', frequency: 'V', L1: '电压:57.75V 相角:0°' },
    { sort: 'L1', frequency: 'I', L1: '电压:57.75V 相角:0°' },
    { sort: 'L2', frequency: 'V', L1: '电压:57.75V 相角:0°' },
    { sort: 'L2', frequency: 'I', L1: '电压:57.75V 相角:0°' },
    { sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°' },
    { sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°' }
]

// 定义 span-method 逻辑
const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
    if (columnIndex === 0 || columnIndex === 3) {
        // 第一列
        if (rowIndex % 2 === 0) {
            return {
                rowspan: 2,
                colspan: 1
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0
            }
        }
    }
}

// 切换按钮类型
const toggleType = (
    row: any,
    $index: number,
    buttonType: 'channel' | 'harmonic' | 'interHarmonic' | 'flicker' | 'transient'
) => {
    if ($index !== undefined) {
        const currentType = buttonTypes[$index][buttonType]
        buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info'
    }
}

// 关闭弹窗
const close = () => {
    dialogVisible.value = false
}

// 保存数据
const save = () => {}

// 打开弹窗，可能是新增，也可能是编辑
const open = (sign: string, row: any) => {
    dialogVisible.value = true
    dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'

    // 初始化按钮类型
    tableData.forEach((_, index) => {
        buttonTypes[index] = {
            channel: 'info',
            harmonic: 'info',
            interHarmonic: 'info',
            flicker: 'info',
            transient: 'info'
        }
    })
}

// 打开 drawer(新增、编辑)
const openDialog = () => {
    setValueTable.value?.open()
}

// 对外映射
defineExpose({ open })
</script>

<style scoped>
.dialog-content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
}

.tabs-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.left-tabs {
    flex: 3; /* 左侧 tab 占据 3/4 的宽度 */
    margin-right: 10px; /* 可选：添加间距 */
}

.right-tabs {
    flex: 1; /* 右侧 tab 占据 1/4 的宽度 */
}

.form-item-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-bottom: 10px; /* 可选：添加间距 */
}

.button-label-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.button-label-container label {
    margin-right: 10px; /* 按钮和文字之间的距离 */
}
.input-label-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.input-label-container label {
    margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>