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="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"
                        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' }"
                        @cell-click="handleRowClick"
                    >
                        <el-table-column prop="name" label="相别" width="60" align="center" />
                        <el-table-column prop="frequency" label="电压/电流" align="center" width="60" />
                        <el-table-column prop="L1" label="值" width="180" align="center">
                            <template #default="{ row, $index }">
                                <span>
                                    {{ row.frequency === 'V' ? '电压' : '电流' }}{{ form.children[$index].fAmp
                                    }}{{ row.frequency === 'V' ? 'V' : 'A' }} 相角{{ form.children[$index].fPhase }}°
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="85">
                            <template #default="{}">
                                <el-button type="primary" link :icon="Bottom">复制</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template #default="{ row, $index }">
                                <el-checkbox-group v-model="form.children[$index].checkboxGroup">
                                    <el-checkbox-button v-for="item in GroupList" :key="item.value" :value="item.value">
                                        {{ item.label }}
                                    </el-checkbox-button>
                                </el-checkbox-group>
                            </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" v-model="form.fFreq" />
                                    <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 :childForm="childForm" />
                </el-tab-pane>
                <el-tab-pane label="谐波编辑">
                    <TestScriptHarmTab :childForm="childForm" />
                </el-tab-pane>
                <el-tab-pane label="间谐波编辑">
                    <TestScriptInHarmTab :childForm="childForm" />
                </el-tab-pane>
                <el-tab-pane label="闪变编辑">
                    <TestScriptFlickerTab :childForm="childForm" />
                </el-tab-pane>
                <el-tab-pane label="暂态编辑">
                    <TestScriptDipTab :childForm="childForm" />
                </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, CopyDocument } 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 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 GroupList = [
    {
        label: '通道使能',
        value: 'channelFlag'
    },
    {
        label: '谐波使能',
        value: 'harmFlag'
    },
    {
        label: '间谐波使能',
        value: 'inHarmFlag'
    },
    {
        label: '闪变使能',
        value: 'flickerFlag'
    },
    {
        label: '暂态使能',
        value: 'dipFlag'
    }
]
const form: any = ref({
    value: '',
    label: '',
    fFreq: 50,
    children: [
        {
            checkboxGroup: ['channelFlag','harmFlag'],//通道选择
            fAmp: 0, //幅值
            fPhase: 0, //相角
            harmList: [
                {
                    harm: 1, //谐波次数
                    fAmp: 0, //谐波含有率
                    fPhase: 0 // 谐波相角
                }
            ], //谐波
            inHarmList: [
                {
                    inharm: 1, //间谐波次数
                    fAmp: 0, //间谐波含有率
                    fPhase: 0 // 间谐波相角
                }
            ], //间谐波
            flickerData: {
                fChagValue: 0,//电压变动幅度
                fChagFre: 0, //波动频度
                waveFluType: 0, //波动类型
                waveType: 0, //波类型
                fDutyCycle: 0, //占空比

            }, //闪变
            dipData: {
                fTransValue: 0, // 暂态幅值
                fRetainTime: 0 // 暂态持续时间
            } //暂态
        },
        {
            checkboxGroup: [],
            fAmp: 0,
            fPhase: 0
        },
        {
            checkboxGroup: [],
            fAmp: 0,
            fPhase: 0
        },
        {
            checkboxGroup: [],
            fAmp: 0,
            fPhase: 0
        },
        {
            checkboxGroup: [],
            fAmp: 0,
            fPhase: 0
        },
        {
            checkboxGroup: [],
            fAmp: 0,
            fPhase: 0
        }
    ]
})
const childForm: any = ref([])

const dialogVisible = ref(false)
const dialogTitle = ref()
const setValueTable = ref()
const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const

const tableData = [
    { name: 'L1', frequency: 'V', electricity: 0, fPhase: 0, sort: 0 },
    { name: 'L1', frequency: 'I', electricity: 0, fPhase: 0, sort: 0 },
    { name: 'L2', frequency: 'V', electricity: 0, fPhase: 0, sort: 1 },
    { name: 'L2', frequency: 'I', electricity: 0, fPhase: 0, sort: 1 },
    { name: 'L3', frequency: 'V', electricity: 0, fPhase: 0, sort: 2 },
    { name: 'L3', frequency: 'I', electricity: 0, fPhase: 0, sort: 2 }
]
const radio = ref('')
const tabChildren: any = ref([])
// 定义 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 selectedRow = ref('')
const tableStyle = {
    cellStyle: ({ row }: { row: any }) => {
        return row.name === selectedRow.value
            ? { backgroundColor: '#dcdcdc' } // 设置选中行的背景颜色
            : {}
    }
}
const handleRowClick = async (row: any, column: any) => {
    if (column.label == '相别') {
        childForm.value = []
        selectedRow.value = row.name
        childForm.value.push(form.value.children[row.sort * 2])
        childForm.value.push(form.value.children[row.sort * 2 + 1])
        console.log('🚀 ~ handleRowClick ~  childForm.value:', childForm.value)
    }

    // childForm.value = row
}

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

// 保存数据
const save = () => {
    dialogVisible.value = false
    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) => {
    dialogVisible.value = true
    dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'
    // 添加选择检测项目
    tabChildren.value = props.options.filter(item => item.value == props.activeName)[0].children || []
    radio.value = tabChildren.value[0].value || ''
    handleRowClick({ name: 'L1', sort: 0 }, { label: '相别' })
}

// 打开 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 {
    width: 900px;
    margin: 0 10px; /* 可选：添加间距 */
}

.right-tabs {
    flex: 1;
}

.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>