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

<template>
    <div class="tabs-container">
        <el-tabs type="border-card" class="right-tabs" style="height: 100%">
            <el-tab-pane label="电压通道">
                <el-table :data="form[0].inharmList" border size="small" class="half-width-table">
                    <el-table-column prop="date" align="center" label="次数">
                        <template #default="{ row, $index }">
                            <div class="input-label-container">
                                <el-select
                                    v-model="form[0].inharmList[$index].inharm"
                                    :disabled="!form[0].inHarmFlag"
                                    filterable
                                    placeholder="选择次数"
                                    size="small"
                                >
                                    <el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
                                </el-select>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="间谐波含有率">
                        <template #default="{ row, $index }">
                            <div class="input-label-container">
                                <el-input
                                    type="number"
                                    size="small"
                                    v-model="form[0].inharmList[$index].famp"
                                    :disabled="!form[0].inHarmFlag"
                                />
                                <label>%</label>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="间谐波相角" align="center">
                        <template #default="{ row, $index }">
                            <div class="input-label-container">
                                <el-input
                                    type="number"
                                    size="small"
                                    v-model="form[0].inharmList[$index].fphase"
                                    :disabled="!form[0].inHarmFlag"
                                />
                                <label>°</label>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="操作" width="100">
                        <template #default="{ row, $index }">
                            <el-button
                                v-if="$index == 0"
                                type="primary"
                                size="small"
                                link
                                :icon="CirclePlus"
                                @click="inHarmFlagAdd(0, row)"
                            >
                                新增
                            </el-button>
                            <el-button v-else type="primary" link :icon="Delete" @click="inHarmFlagDelete(0, $index)">
                                删除
                            </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="电流通道">
                <el-table :data="form[1].inharmList" border size="small" class="half-width-table">
                    <el-table-column prop="date" align="center" label="次数">
                        <template #default="{ row, $index }">
                            <div class="input-label-container">
                                <el-select
                                    v-model="form[1].inharmList[$index].inharm"
                                    :disabled="!form[1].inHarmFlag"
                                    filterable
                                    placeholder="选择次数"
                                    size="small"
                                >
                                    <el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
                                </el-select>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="间谐波含有率">
                        <template #default="{ row, $index }">
                            <div class="input-label-container">
                                <el-input
                                    type="number"
                                    size="small"
                                    v-model="form[1].inharmList[$index].famp"
                                    :disabled="!form[1].inHarmFlag"
                                />
                                <label>%</label>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="间谐波相角" align="center">
                        <template #default="{ row, $index }">
                            <div class="input-label-container">
                                <el-input
                                    type="number"
                                    size="small"
                                    v-model="form[1].inharmList[$index].fphase"
                                    :disabled="!form[1].inHarmFlag"
                                />
                                <label>°</label>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="操作" width="100">
                        <template #default="{ row, $index }">
                            <el-button
                                v-if="$index == 0"
                                type="primary"
                                size="small"
                                link
                                :icon="CirclePlus"
                                @click="inHarmFlagAdd(1, row)"
                            >
                                新增
                            </el-button>
                            <el-button v-else type="primary" link :icon="Delete" @click="inHarmFlagDelete(1, $index)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

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

const form: any = computed({
    get() {
        return props.childForm
    },
    set(value) {}
})
const num = ref(0)

// 添加间间谐波
const inHarmFlagAdd = (index: number, row: any) => {
    props.childForm[index].inharmList.push({ inharm: '', famp: 0, fphase: 0 })
    num.value += 1
}
// 删除
const inHarmFlagDelete = (index: number, number: number) => {
    props.childForm[index].inharmList.splice(number, 1)
    num.value -= 1
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-top: 10px;
    height: 40px;
}

.fixed-width-tabs:last-child {
    margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
}

.el-tab-pane {
    display: flex;
    flex-direction: column; /* 确保内容上下排列 */
}

.el-form-item {
    margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
}
:deep(.el-form-item) {
    margin-bottom: 10px !important;
}
.input-label-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.input-label-container label {
    margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
.tabs-container {
    display: flex;
    justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
    height: 100%;
    .right-tabs {
        flex: 1; /* 使两个 el-tabs 占据相同的空间 */
        margin-right: 10px; /* 可选：添加右侧间距 */
    }
}
</style>