admin-sjzx/src/views/pqs/runManage/assessment/components/uese/form.vue

<template>
    <div class="default-main ">
        <div class="actionButtons">
            <el-button type="primary" icon="el-icon-Check" class="md8">保存</el-button>
            <back-component style="margin: 8px" />
        </div>
        <div :style="pageHeight" style="overflow-y: auto">
            <el-collapse v-model="activeNames" class="pl10 pr10">
                <el-collapse-item title="用户参数维护" :name="1">
                    <el-form :inline="true" :model="form" class="form-four" label-width="auto">
                        <el-form-item label="所在地市">
                            <el-select v-model="form.city" clearable placeholder="请选择所在地市">
                                <el-option
                                    v-for="item in areaOptionList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户名称">
                            <el-input v-model="form.city" placeholder="用户名称" clearable />
                        </el-form-item>
                        <el-form-item label="用户协议容量">
                            <el-input v-model="form.city" placeholder="用户协议容量" clearable>
                                <template #append>MVA</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="是否包含电容器">
                            <el-select v-model="form.windFarms" placeholder="是否包含电容器" clearable>
                                <el-option label="是" value="1" />
                                <el-option label="否" value="0" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否包含风电场">
                            <el-select v-model="form.windFarms" placeholder="是否包含风电场" clearable>
                                <el-option label="是" value="1" />
                                <el-option label="否" value="0" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="风电场装机容量">
                            <el-input v-model="form.city" placeholder="风电场装机容量" clearable />
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item title="系统参数维护" :name="2">
                    <el-form :inline="true" :model="form" class="form-four" label-width="auto">
                        <el-form-item label="接入变电站">
                            <el-select v-model="form.city" clearable placeholder="请选择接入变电站">
                                <el-option
                                    v-for="item in areaOptionList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="变电站电压等级">
                            <el-input v-model="form.city" placeholder="变电站电压等级" clearable />
                        </el-form-item>
                        <el-form-item label="接入母线">
                            <el-input v-model="form.city" placeholder="接入母线" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="母线电压等级">
                            <el-select v-model="form.windFarms" placeholder="母线电压等级" clearable>
                                <el-option label="是" value="1" />
                                <el-option label="否" value="0" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="供电设备容量">
                            <el-input v-model="form.city" placeholder="供电设备容量" clearable>
                                <template #append>MVA</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="最小短路容量">
                            <el-input v-model="form.city" placeholder="最小短路容量" clearable>
                                <template #append>MVA</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="PCC点名称">
                            <el-select v-model="form.windFarms" placeholder="PCC点名称" clearable>
                                <el-option label="是" value="1" />
                                <el-option label="否" value="0" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="PCC点电网电阻">
                            <el-input v-model="form.city" placeholder="PCC点电网电阻" clearable />
                        </el-form-item>
                        <el-form-item label="长度">
                            <el-input v-model="form.city" placeholder="长度" clearable />
                        </el-form-item>
                        <el-form-item label="回路数">
                            <el-select v-model="form.windFarms" placeholder="回路数" clearable>
                                <el-option label="是" value="1" />
                                <el-option label="否" value="0" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="导线类型">
                            <el-select v-model="form.windFarms" placeholder="导线类型" clearable>
                                <el-option label="是" value="1" />
                                <el-option label="否" value="0" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item :title="item.name" v-for="(item, index) in column" :name="index + 3">
                    <div class="mb10">
                        <el-button type="primary" size="small" icon="el-icon-Plus" @click="addFform(item)">
                            新增
                        </el-button>
                        <el-button type="primary" size="small" icon="el-icon-Delete">删除</el-button>
                        <el-button type="primary" size="small" icon="el-icon-Download">导出</el-button>
                    </div>
                    <div style="height: 200px">
                        <vxe-table height="auto" :data="form[item.key]" v-bind="defaultAttribute">
                            <vxe-column type="checkbox" width="60"></vxe-column>
                            <vxe-column type="seq" title="序号" width="60px"></vxe-column>

                            <vxe-column
                                v-for="(k, index) in item.child"
                                :key="index"
                                :field="k.field"
                                :title="k.title"
                            ></vxe-column>
                            <vxe-column title="操作" width="150px">
                                <template #default="{ row }">
                                    <el-button type="text" @click="edit(item,row)">编辑</el-button>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </el-collapse-item>
                <!-- <el-collapse-item title="变压器参数维护" name="3">


                </el-collapse-item>
                <el-collapse-item title="电容器组参数维护" name="4"></el-collapse-item>

                <el-collapse-item title="风电参数" name="5"></el-collapse-item>
                <el-collapse-item title="用户负荷" name="6"></el-collapse-item>
                <el-collapse-item title="冲击性负荷" name="7"></el-collapse-item> -->
            </el-collapse>
            <!-- 新增 -->
            <addform ref="addformRef" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import BackComponent from '@/components/icon/back/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import addform from './addform.vue'
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
const dictData = useDictData()
const pageHeight = mainHeight(90)
const areaOptionList = dictData.getBasicData('jibei_area')
const addformRef = ref()
const form: any = ref({
    city: '',
    windFarms: '',
    transformer: [
        {
            name: '变压器1',
            name1: '变压器型号1',
            name2: '100'
        },
        {
            name: '变压器2',
            name1: '变压器型号2',
            name2: '100'
        }
    ], //变压器
    capacitor: [
        {
            name: '电容器1',
            name1: '20',
            name2: '100',
            name3: '72.73',
            name4: '400V'
        },
        {
            name: '电容器2',
            name1: '20',
            name2: '100',
            name3: '72.73',
            name4: '400V'
        }
    ], //电容器
    windPower: [
        {
            name: '风机1',
            name1: '0.1',
            name2: '100'
        },
        {
            name: '风机2',
            name1: '0.1',
            name2: '100'
        }
    ], //风电
    load: [], //用户负荷
    impact: [] //冲击性负荷
})
const column: any = ref([
    {
        name: '变压器参数维护',
        key: 'transformer',
        child: [
            {
                title: '用户变压器名称',
                field: 'name'
            },
            {
                title: '变压器型号',
                field: 'name1'
            },
            {
                title: '变压器台数',
                field: 'name2'
            }
        ]
    },
    {
        name: '电容器组参数维护',
        key: 'capacitor',
        child: [
            {
                title: '用户电容器名称',
                field: 'name'
            },
            {
                title: '电容器组数量',
                field: 'name1'
            },
            {
                title: '单组容量(kVar)',
                field: 'name2'
            },
            {
                title: '电抗率(%)',
                field: 'name3'
            },
            {
                title: '电压等级',
                field: 'name4'
            }
        ]
    },
    {
        name: '风电参数',
        key: 'windPower',
        child: [
            {
                title: '风机名称',
                field: 'name'
            },
            {
                title: '风机闪变系数',
                field: 'name1'
            },
            {
                title: '风机额定视在功率',
                field: 'name2'
            }
        ]
    },
    {
        name: '用户负荷',
        key: 'load',
        child: [
            {
                title: '配电窒名称',
                field: 'name'
            },
            {
                title: '进线电压',
                field: 'name1'
            },
            {
                title: '配变容量(kVA)',
                field: 'name2'
            },
            {
                title: '配电变压器阻抗(%)',
                field: 'name3'
            },
            {
                title: '谐波源特性',
                field: 'name4'
            },
            {
                title: '配变低压侧电压',
                field: 'name5'
            },
            {
                title: '非线性负荷功率(kW)',
                field: 'name6'
            },
            {
                title: '功率因素',
                field: 'name7'
            }
        ]
    },
    {
        name: '冲击性负荷',
        key: 'impact',
        child: [
            {
                title: '冲击负荷类型',
                field: 'name'
            },
            {
                title: '冲击负荷功率(MVA)',
                field: 'name1'
            },
            {
                title: '数量',
                field: 'name2'
            },
            {
                title: '启动方式',
                field: 'name3'
            },
            {
                title: '启动容量倍数',
                field: 'name4'
            },
            {
                title: '冲击负荷高压侧电压',
                field: 'name5'
            },
            {
                title: '有无隔离变',
                field: 'name6'
            },
            {
                title: '隔离变阻抗(%)',
                field: 'name7'
            },
            {
                title: '低压侧电压',
                field: 'name8'
            },
            {
                title: '负荷频度选择',
                field: 'name9'
            },
            {
                title: '闪变叠加系数',
                field: 'name10'
            }
        ]
    }
])
// 新增
const addFform = (item: any) => {
    addformRef.value.open({
        title: '新增' ,
        item: item
    })
}
// 编辑
const edit = (item: any,row: any) => {
    addformRef.value.open({
        title: '编辑',
        item: item,
        row:row
    })
}
 
</script>
<style lang="scss" scoped>
.actionButtons {
    display: flex;
    justify-content: end;
}
:deep(.el-collapse-item__header) {
    font-family: AlimamaDongFangDaKai;
    font-size: 20px;
    &::before {
        content: '▍'; /* 添加星号 */
        font-size: 16px;
        color: var(--el-color-primary);
  
    }
}
.el-collapse-item__content {
    padding-bottom: 10px;
}
.form-four {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
        display: flex;
        width: 22%;
        .el-form-item__content {
            flex: 1;
            .el-select,
            .el-cascader,
            .el-input__inner,
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>