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" @click="onsubmit" v-if="showSaveButton">保存</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
                        ref="form1"
                        :inline="true"
                        :model="form"
                        class="form-four"
                        :rules="rules"
                        label-width="auto"
                        :disabled="formDisabled"
                    >
                        <el-form-item label="所在地市" prop="deptId">
                            <!-- <el-select v-model="form.deptId" clearable placeholder="请选择所在地市">
                                <el-option
                                    v-for="item in areaOptionList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select> -->
                            <Area ref="areaRef" v-model="form.deptId" style="width: 100%" @changeValue="changeArea" />
                        </el-form-item>
                        <el-form-item label="用户名称" prop="assessName">
                            <el-input v-model="form.assessName" placeholder="用户名称" clearable show-word-limit maxlength="32"/>
                        </el-form-item>
                        <el-form-item label="电压等级" prop="userScale">
                            <el-select v-model="form.userScale" clearable placeholder="请选择电压等级">
                                <el-option
                                    v-for="item in voltageleveloption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户协议容量(MVA)" prop="agreedCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.agreedCapacity"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="是否包含电容器" prop="withCapacitor">
                            <el-select v-model="form.withCapacitor" placeholder="请选择是否包含电容器" clearable>
                                <el-option label="是" value="01" />
                                <el-option label="否" value="00" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户负荷类型" prop="isWindfarm">
                            <el-select v-model="form.isWindfarm" clearable placeholder="请选择用户负荷类型">
                                <el-option label="风电场" value="01"></el-option>
                                <el-option label="光伏" value="02"></el-option>
                                <el-option label="其他" value="03"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="windfarmCapacityLabel" prop="windfarmCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model="form.windfarmCapacity"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="是否单相负荷" prop="singleLoad">
                            <el-select v-model="form.singleLoad" clearable placeholder="请选择是否单相负荷">
                                <el-option label="是" value="00"></el-option>
                                <el-option label="否" value="01"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item title="系统参数维护" :name="2">
                    <el-form
                        :inline="true"
                        ref="form2"
                        :model="form"
                        class="form-four"
                        :rules="rules"
                        label-width="auto"
                        :disabled="formDisabled"
                    >
                        <el-form-item label="接入变电站" prop="powerstationId">
                            <el-select
                                v-model="form.powerstationId"
                                filterable
                                clearable
                                @change="changePowerstation"
                                placeholder="请选择接入变电站"
                            >
                                <el-option
                                    v-for="item in powerstationList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="变电站电压等级" prop="powerstationScale">
                            <el-select v-model="form.powerstationScale" disabled clearable placeholder="请选择变电站">
                                <el-option
                                    v-for="item in voltageleveloption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="接入母线" prop="busId">
                            <el-select v-model="form.busId" clearable @change="changeBus" placeholder="请选择母线">
                                <el-option
                                    v-for="item in busList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="母线电压等级" prop="busScale">
                            <el-select v-model="form.busScale" disabled clearable placeholder="请选择母线">
                                <el-option
                                    v-for="item in voltageleveloption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="供电设备容量(MVW)" prop="powersupplyCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.powersupplyCapacity"
                                show-word-limit
                                placeholder="请输入值"
                                min="1"
                                max="9999"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="最小短路容量(MVA)" prop="minshortcircuitCapacity">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.minshortcircuitCapacity"
                                show-word-limit
                                placeholder="请输入值"
                                 min="1"
                                max="9999"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="PCC点名称" prop="lineId">
                            <el-select v-model="form.lineId" clearable @change="LineChange" placeholder="请选择PCC点">
                                <el-option
                                    v-for="item in pccList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="导线类型" prop="linetypeId">
                            <el-select v-model="form.linetypeId" clearable placeholder="请选择变电站">
                                <el-option
                                    v-for="item in linetypeList"
                                    :key="item.linetypeId"
                                    :label="item.linetypeName"
                                    :value="item.linetypeId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="长度(km)" prop="lineLen">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineLen"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="回路数" prop="lineNum">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineNum"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="PCC点电网电阻" prop="lineGridreactance">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineGridreactance"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="PCC电电网电抗" prop="lineGridresistance">
                            <el-input-number
                                style="width: 100%"
                                v-model.trim="form.lineGridresistance"
                                show-word-limit
                                placeholder="请输入值"
                            ></el-input-number>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <div v-if="form.assessId">
                    <tabFrom :assessId="form.assessId" :isWindfarm="form.isWindfarm" :isWithCapacitor="form.withCapacitor"  :disabled="formDisabled"/>
                </div>
            </el-collapse>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import BackComponent from '@/components/icon/back/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import Area from '@/components/form/area/index.vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus'
import { useRoute } from 'vue-router'
import { getSubstationSelect } from '@/api/device-boot/line'
import tabFrom from './tabFrom.vue'
import { cableList, getBusBarSelect, getMonitorSelect, userAdd, userGetInfo ,userEdit} from '@/api/advance-boot/assess'
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
const dictData = useDictData()
const pageHeight = mainHeight(70)
const areaOptionList = dictData.getBasicData('jibei_area')
const { query} = useRoute() // 查询参数
//字典获取电压等级
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
const powerstationList: any = ref([]) //变电站列表
const busList: any = ref([]) //generatrix列表
const linetypeList: any = ref([]) //线路类型
const pccList: any = ref([]) //pcc列表


const route = useRoute()
const isViewMode = ref(route.query.mode === 'view')

// 根据 isViewMode 控制表单的禁用状态
const formDisabled = ref(isViewMode.value)

// 或者在保存按钮上根据模式控制显示
const showSaveButton = !isViewMode.value


const form: any = ref({
    assessId: '',
    deptId: dictData.state.area[0].id,
    deptName: dictData.state.area[0].name,
    assessName: '', //用户名称
    userScale: '', //电压等级
    agreedCapacity: 0, //用户协议容量，
    withCapacitor: '', //是否包含电容器
    isWindfarm: '', //用户负荷类型
    windfarmCapacity: 0, //用户有功功率（MW）
    singleLoad: '', //是否为单相负荷
    powerstationId: '', //变电站id
    powerstationName: '', //变电站名称
    powerstationScale: '', //变电站电压等级
    busId: '', //母线id
    busName: '', //母线名称
    busScale: '', //母线电压等级
    powersupplyCapacity: 0, //供电设备容量
    minshortcircuitCapacity: 0, //最小短路容量
    lineId: '', //Pccid
    lineName: '', //Pccid
    lineLen: 0, //长度
    lineNum: 0, //回路数
    linetypeId: '', //导线类型
    lineGridreactance: 0, //	PCC电电网电抗
    lineGridresistance: 0 //PCC电电网电阻
})
const rules = {
    deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
    assessName: [{ required: true, message: '请输入评估名称', trigger: 'blur' }],
    agreedCapacity: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
    withCapacitor: [{ required: true, message: '请选择是否带电容器', trigger: 'change' }],
    isWindfarm: [{ required: true, message: '请选择用户负荷类型', trigger: 'change' }],
    windfarmCapacity: [{ required: true, message: '请输入用户有功功率', trigger: 'blur' }],
    singleLoad: [{ required: true, message: '请输入是否单相负荷', trigger: 'blur' }],
    powerstationId: [{ required: true, message: '请选择接入变电站', trigger: 'change' }],
    powerstationScale: [{ required: true, message: '请选择变电站电压等级', trigger: 'change' }],
    busId: [{ required: true, message: '请选择接入母线', trigger: 'change' }],
    userScale: [{ required: true, message: '请选择母线电压等级', trigger: 'change' }],
    busScale: [{ required: true, message: '请选择母线电压等级', trigger: 'change' }],
    powersupplyCapacity: [{ required: true, message: '请输入供电设备容量', trigger: 'blur' }],
    minshortcircuitCapacity: [{ required: true, message: '请输入最小短路容量', trigger: 'blur' }],
    lineId: [{ required: true, message: '请选择PCC点名称', trigger: 'change' }],
    linetypeId: [{ required: true, message: '请选择导线类型', trigger: 'change' }],
    lineLength: [{ required: true, message: '请输入长度', trigger: 'blur' }],
    lineNum: [{ required: true, message: '请输入回路数', trigger: 'blur' }],
    lineGridreactance: [{ required: true, message: '请输入PCC点电网电阻', trigger: 'blur' }],
    lineGridresistance: [{ required: true, message: '请输入PCC点电网电抗', trigger: 'blur' }]
}

const windfarmCapacityLabel = computed(() => {
  if (form.value.isWindfarm === '01') {
    return '风电场装机容量(MW)'
  } else {
    return '用户有功功率(MW)'
  }
})

const form1 = ref()
const form2 = ref()

// 保存
const onsubmit = () => {
    form1.value.validate((valid: any) => {
        if (valid) {
            form2.value.validate((valid2: any) => {
                if (valid2) {
                    if(form.value.assessId){
                        userEdit(form.value).then((res: any) => {
                            //form.value.assessId = res.data
                            ElMessage({
                                type: 'success',
                                message: '编辑成功!'
                            })
                        })
                    }else{
                        userAdd(form.value).then((res: any) => {
                        form.value.assessId = res.data
                        ElMessage({
                                type: 'success',
                                message: '新增成功!'
                            })
                        })
                    }
                  
                }
            })
        }
    })
}

const info = async (id?: string) => {
    // 获取电站
    await getSubstationSelect().then(res => {
        powerstationList.value = res.data
    })
    // 获取线路类型
    await cableList({}).then(res => {
        linetypeList.value = res.data
    })
    if (id) {
        userGetInfo({ assessId: id }).then(async (res: any) => {
            form.value = res.data
            await changePowerstation(res.data.powerstationId, false)
        })
    }
}
// 地市切换
const changeArea = (e: any) => {
    form.value.deptName = e.label
}
// 点击变电站
const changePowerstation = (e: any, flag: boolean = true) => {
    if (flag) {
        form.value.busScale = ''
        form.value.busId = ''
        form.value.lineId = ''
        form.value.lineName = ''
    }
    let data = powerstationList.value.filter((item: any) => item.id == e)[0]
    form.value.powerstationName = data.name
    form.value.powerstationScale = data.voltageLevel
    getBusBarSelect({ stationId: data.id }).then(res => {
        busList.value = res.data
    })
    getMonitorSelect({ stationId: data.id }).then(res => {
        pccList.value = res.data
    })
}
// 点击母线
const changeBus = (e: any) => {
    let data = busList.value.filter((item: any) => item.id == e)[0]
    form.value.busName = data.name
    form.value.busScale = data.voltageLevel
}
// 点击pcc
const LineChange = (e: any) => {
    let data = pccList.value.filter((item: any) => item.id == e)[0]
    form.value.lineName = data.name
}



onMounted(() => {
    info(query?.id)
})

</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%;
        margin-bottom: 20px;
        .el-form-item__content {
            flex: 1;
            .el-select,
            .el-cascader,
            .el-input__inner,
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
:deep(.el-select) {
    min-width: 120px;
}
</style>