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

<template>
    <div class="tabs-container">
        <el-tabs type="border-card" class="right-tabs" style="height: 100%">
            <el-tab-pane label="电压通道">
                <el-form :inline="true" :model="formInline" :disabled="!props.childForm[0].harmFlag">
                    <el-form-item label="次数">
                        <el-select
                            v-model="formInline.harm"
                            multiple
                            collapse-tags
                            collapse-tags-tooltip
                            style="width: 160px"
                            filterable
                            clearable
                        >
                            <el-option label="全部" value="0" />
                            <el-option v-for="item in 49" :key="item" :label="item + 1" :value="item + 1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="含有率">
                        <el-input
                            v-model="formInline.famp"
                            type="number"
                            placeholder="含有率"
                            style="width: 80px"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="相角">
                        <el-input
                            v-model="formInline.fphase"
                            type="number"
                            placeholder="相角"
                            style="width: 80px"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :icon="Check" @click="onSubmit" size="small">确定</el-button>
                        <el-button type="primary" :icon="Delete" @click="empty(0)" size="small">清空表格</el-button>
                    </el-form-item>
                </el-form>
                <!-- 电压通道内容 -->
                <div class="table-container">
                    <el-table :data="form[0].harmList" border stripe size="small">
                        <el-table-column prop="harm" align="center" label="次数" width="60" />
                        <el-table-column prop="famp" align="center" label="谐波含有率">
                            <template #default="{ row }">
                                <el-input type="number" v-if="row.show" v-model="row.famp" />
                                <span v-else>{{ row.famp }}%</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fphase" label="谐波相角" align="center">
                            <template #default="{ row }">
                                <el-input type="number" v-if="row.show" v-model="row.fphase" />
                                <span v-else>{{ row.fphase }}°</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template #default="{ row, $index }">
                                <el-button
                                    type="primary"
                                    link
                                    :icon="EditPen"
                                    v-if="!row.show"
                                    @click="row.show = true"
                                >
                                    编辑
                                </el-button>
                                <el-button type="primary" link :icon="Check" v-else @click="row.show = false">
                                    保存
                                </el-button>
                                <el-button type="primary" link :icon="Delete" @click="HarmFlagDelete(0, $index)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-tabs type="border-card" style="height: 100%">
            <el-tab-pane label="电流通道">
                <el-form :inline="true" :model="formInline1" :disabled="!props.childForm[1].harmFlag">
                    <el-form-item label="次数">
                        <el-select
                            v-model="formInline1.harm"
                            multiple
                            collapse-tags
                            collapse-tags-tooltip
                            style="width: 160px"
                            filterable
                            clearable
                        >
                            <el-option label="全部" value="0" />
                            <el-option v-for="item in 49" :key="item" :label="item + 1" :value="item + 1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="含有率">
                        <el-input
                            v-model="formInline1.famp"
                            type="number"
                            placeholder="含有率"
                            style="width: 80px"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="相角">
                        <el-input
                            v-model="formInline1.fphase"
                            type="number"
                            placeholder="相角"
                            style="width: 80px"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :icon="Check" @click="onSubmit1" size="small">确定</el-button>
                        <el-button type="primary" :icon="Delete" @click="empty(1)" size="small">清空表格</el-button>
                    </el-form-item>
                </el-form>
                <!-- 电流通道内容 -->
                <div class="table-container">
                    <el-table :data="form[1].harmList" border stripe size="small">
                        <el-table-column prop="harm" align="center" label="次数" width="60" />
                        <el-table-column prop="famp" align="center" label="谐波含有率">
                            <template #default="{ row }">
                                <el-input type="number" v-if="row.show" v-model="row.famp" />
                                <span v-else>{{ row.famp }}%</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fphase" label="谐波相角" align="center">
                            <template #default="{ row }">
                                <el-input type="number" v-if="row.show" v-model="row.fphase" />
                                <span v-else>{{ row.fphase }}°</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template #default="{ row, $index }">
                                <el-button
                                    type="primary"
                                    link
                                    :icon="EditPen"
                                    v-if="!row.show"
                                    @click="row.show = true"
                                >
                                    编辑
                                </el-button>
                                <el-button type="primary" link :icon="Check" v-else @click="row.show = false">
                                    保存
                                </el-button>
                                <el-button type="primary" link :icon="Delete" @click="HarmFlagDelete(1, $index)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { Check, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
import { ref } from 'vue'
const props = defineProps({
    childForm: {
        type: Array as any,
        required: true
    }
})

const form: any = computed({
    get() {
        return props.childForm
    },
    set(value) {}
})
const formInline = ref({
    harm: [],
    famp: '',
    fphase: ''
})
const formInline1 = ref({
    harm: [],
    famp: '',
    fphase: ''
})
// 定义表格数据项的类型
interface TableItem {
    date: string
    harmonicRate?: string
    harmonicPhase?: string
    name?: string
}
const empty = (index: number) => {
    props.childForm[index].harmList = []
}
const onSubmit = () => {
    console.log('🚀 ~ onSubmit ~ props.childForm[0]:', props.childForm[0].harmList)
    if (formInline.value.harm.length == 0 || formInline.value.famp == '' || formInline.value.fphase == '') {
        ElMessage.warning('请填写值!')
        return
    }
    if (formInline.value.harm.includes('0')) {
        props.childForm[0].harmList = []
        for (let i = 2; i < 51; i++) {
            props.childForm[0].harmList.push({
                harm: i, //间谐波次数
                famp: formInline.value.famp, //间谐波含有率
                fphase: formInline.value.fphase // 间谐波相角
            })
        }
    } else {
        formInline.value.harm.forEach((item: any) => {
            props.childForm[0].harmList.push({
                harm: item, //间谐波次数
                famp: formInline.value.famp, //间谐波含有率
                fphase: formInline.value.fphase // 间谐波相角
            })
        })
        const seen = new Set()
        const uniqueData = []

        // 反向遍历数组
        for (let i = props.childForm[0].harmList.length - 1; i >= 0; i--) {
            const item = props.childForm[0].harmList[i]
            // 如果 harm 还未出现过，则添加到结果数组
            if (!seen.has(item.harm)) {
                seen.add(item.harm)
                uniqueData.unshift(item) // 添加到结果数组的开头
            }
        }
        props.childForm[0].harmList = uniqueData.sort((a, b) => a.harm - b.harm)
    }
}
const onSubmit1 = () => {
    if (formInline1.value.harm.length == 0 || formInline1.value.famp == '' || formInline1.value.fphase == '') {
        ElMessage.warning('请填写值!')
        return
    }
    if (formInline1.value.harm.includes('0')) {
        props.childForm[1].harmList = []
        for (let i = 2; i < 51; i++) {
            props.childForm[1].harmList.push({
                harm: i, //间谐波次数
                famp: formInline1.value.famp, //间谐波含有率
                fphase: formInline1.value.fphase // 间谐波相角
            })
        }
    } else {
        formInline1.value.harm.forEach((item: any) => {
            props.childForm[1].harmList.push({
                harm: item, //间谐波次数
                famp: formInline1.value.famp, //间谐波含有率
                fphase: formInline1.value.fphase // 间谐波相角
            })
        })
        const seen = new Set()
        const uniqueData = []

        // 反向遍历数组
        for (let i = props.childForm[1].harmList.length - 1; i >= 0; i--) {
            const item = props.childForm[1].harmList[i]
            // 如果 harm 还未出现过，则添加到结果数组
            if (!seen.has(item.harm)) {
                seen.add(item.harm)
                uniqueData.unshift(item) // 添加到结果数组的开头
            }
        }
        props.childForm[1].harmList = uniqueData.sort((a, b) => a.harm - b.harm)
    }
}
// 删除
const HarmFlagDelete = (index: number, number: number) => {
    props.childForm[index].harmList.splice(number, 1)
}
</script>

<style lang="scss" scoped>
.tabs-container {
    display: flex;
    justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
    height: 100%;
}

.right-tabs {
    flex: 1; /* 使两个 el-tabs 占据相同的空间 */
    margin-right: 10px; /* 可选：添加右侧间距 */
}

.el-tabs {
    flex: 1; /* 使两个 el-tabs 占据相同的空间 */
}

.table-container {
    display: flex;
    justify-content: space-between; /* 使两个表格之间有间距 */
    width: 100%;
}

.half-width-table {
    flex: 1; /* 使两个表格占据相同的空间 */
    margin-right: 10px; /* 可选：添加表格之间的间距 */
}

.half-width-table:last-child {
    margin-right: 0; /* 最后一个表格不需要右侧间距 */
}

.input-label-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.input-label-container label {
    margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
// 全局css 加上以下代码，可以隐藏上下箭头

// 取消input的上下箭头
</style>