admin-sjzx/src/views/pqs/supervise/plan/components/addForm.vue

<template>
    <el-dialog
        v-model="dialogFormVisible"
        title="技术监督计划"
        width="60%"
        :append-to-body="true"
        :before-close="close"
        :close-on-click-modal="false"
        :lazy="true"
        draggable
        custom-class="fixed-dialog"
    >
        <el-form
            :model="form"
            :validate-on-rule-change="false"
            :scroll-to-error="true"
            :rules="rules"
            ref="ruleFormRef"
            label-width="140px"
            label-position="right"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="计划名称：" prop="workPlanName">
                        <el-input v-model="form.workPlanName" autocomplete="off" place-holder="请输入计划名称" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="监督单位：" prop="supvOrgId">
                        <el-select v-model="form.supvOrgId" clearable style="width: 100%" 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-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="计划编制单位：" prop="planOrgId">
                        <el-input v-model="form.planOrgId" autocomplete="off" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="监督类型：" prop="supvType">
                        <el-select v-model="form.supvType" clearable style="width: 100%" 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-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="监督阶段：" prop="supvStage">
                        <el-select v-model="form.supvStage" clearable style="width: 100%" 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-col>

                <el-col :span="12">
                    <el-form-item label="计划监督时间：" prop="planSupvDate">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.planSupvDate"
                            type="datetime"
                            format="YYYY-MM-DD hh:mm:ss"
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择计划监督时间"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="监督对象类型：" prop="supvObjType">
                        <el-select
                            v-model="form.supvObjType"
                            clearable
                            style="width: 100%"
                            placeholder="请选择监督对象类型"
                        >
                            <el-option
                                v-for="item in powerCompanyList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="监督对象名称：" prop="supvObjName">
                        <el-input v-model="form.supvObjName" autocomplete="off" place-holder="请输入监督对象名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="监督对象电压等级：" prop="supvObjName" class="label_over_warp">
                        <el-select
                            v-model="form.objVoltageLevel"
                            clearable
                            style="width: 100%"
                            placeholder="请选择监督对象电压等级"
                        >
                            <el-option
                                v-for="item in voltageLevelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="监督对象属性：" prop="objType">
                        <el-select
                            v-model="form.objType"
                            clearable
                            style="width: 100%"
                            placeholder="请选择监督对象属性"
                        >
                            <el-option
                                v-for="item in objTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="监督对象属性名称：" prop="objTypeName">
                        <el-input v-model="form.objTypeName" autocomplete="off" place-holder="请输入监督对象属性名称" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="监督对象协议容量(MVA)：" prop="objCapacity" class="label_over_warp">
                        <el-input
                            v-model="form.objCapacity"
                            autocomplete="off"
                            place-holder="请输入监督对象监督对象协议容量"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="监督对象关联电站：" prop="substationName" class="label_over_warp">
                        <el-input
                            v-model="form.substationName"
                            autocomplete="off"
                            place-holder="请输入监督对象关联电站"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item
                        label="监督对象关联电站电压等级："
                        prop="substationVoltageLevel"
                        class="label_over_warp"
                    >
                        <el-select
                            v-model="form.substationVoltageLevel"
                            clearable
                            style="width: 100%"
                            placeholder="请选择监督对象关联电站电压等级"
                        >
                            <el-option
                                v-for="item in neutralPointWiringMethodList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="实施状态：" prop="effectStatus">
                        <el-select
                            v-model="form.effectStatus"
                            clearable
                            style="width: 100%"
                            placeholder="请选择实施状态"
                        >
                            <el-option
                                v-for="item in manufacturerList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="开始实施时间：">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.effectStartTime"
                            type="datetime"
                            format="YYYY-MM-DD hh:mm:ss"
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择开始实施时间"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="结束实施时间：">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.effectEndTime"
                            type="datetime"
                            format="YYYY-MM-DD hh:mm:ss"
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择结束实施时间"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="报告出具时间：">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.reportIssueTime"
                            type="datetime"
                            format="YYYY-MM-DD hh:mm:ss"
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择报告出具时间"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="电能质量问题发生时间：" class="label_over_warp">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.problemOcTime"
                            type="datetime"
                            format="YYYY-MM-DD hh:mm:ss"
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择电能质量问题发生时间"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="实施人员：">
                        <el-select
                            v-model="form.effectUserId"
                            clearable
                            style="width: 100%"
                            placeholder="请选择实施人员"
                        >
                            <el-option
                                v-for="item in frontEndMachineList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="计划状态：">
                        <el-select v-model="form.planStatus" clearable style="width: 100%" placeholder="请选择计划状态">
                            <el-option
                                v-for="item in frontEndMachineList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="其他要求：">
                        <el-input v-model="form.otherRemark" autocomplete="off" place-holder="请输入其他要求" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="false">
                <el-col :span="12" class="required_position">
                    <span class="required_icon">*</span>
                    <el-form-item label="盖章报告：" prop="informationSecurityTestReport">
                        <el-upload
                            v-model:file-list="form.informationSecurityTestReport"
                            ref="uploadRef"
                            action=""
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :on-change="choose"
                            :auto-upload="false"
                            :on-progress="uploadFileName('informationSecurityTestReport')"
                        >
                            <template #trigger>
                                <el-button type="primary">上传文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="required_position">
                    <span class="required_icon">*</span>
                    <el-form-item label="佐证材料：" prop="acceptanceInspectionReportSingle">
                        <el-upload
                            v-model:file-list="form.acceptanceInspectionReportSingle"
                            ref="uploadRef"
                            action=""
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :on-change="choose"
                            :auto-upload="false"
                            :on-progress="uploadFileName('acceptanceInspectionReportSingle')"
                        >
                            <template #trigger>
                                <el-button type="primary">上传文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="false">
                <el-col :span="12" class="required_position">
                    <span class="required_icon">*</span>
                    <el-form-item label="计划变更材料：" prop="acceptanceInspectionReport">
                        <el-upload
                            v-model:file-list="form.acceptanceInspectionReport"
                            ref="uploadRef"
                            action=""
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :on-change="choose"
                            :auto-upload="false"
                            :on-progress="uploadFileName('acceptanceInspectionReport')"
                        >
                            <template #trigger>
                                <el-button type="primary">上传文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="required_position">
                    <span class="required_icon">*</span>
                    <el-form-item label="告预警单材料：" prop="typeExperimentReport" :show-message="false">
                        <el-upload
                            v-model:file-list="form.typeExperimentReport"
                            ref="uploadRef"
                            action=""
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :on-change="choose"
                            :auto-upload="false"
                            :on-progress="uploadFileName('typeExperimentReport')"
                        >
                            <template #trigger>
                                <el-button type="primary">上传文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row v-if="false">
                <el-col :span="12" class="required_position">
                    <span class="required_icon">*</span>
                    <el-form-item label="告预警单反馈材料：" prop="factoryInspectionReport" class="label_over_warp">
                        <el-upload
                            v-model:file-list="form.factoryInspectionReport"
                            ref="uploadRef"
                            action=""
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :on-change="choose"
                            :auto-upload="false"
                            :on-progress="uploadFileName('factoryInspectionReport')"
                        >
                            <template #trigger>
                                <el-button type="primary">上传文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="required_position">
                    <span class="required_icon">*</span>
                    <el-form-item label="评估报告：" prop="performanceTestReport" :show-message="false">
                        <el-upload
                            v-model:file-list="form.performanceTestReport"
                            ref="uploadRef"
                            action=""
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :on-change="choose"
                            :auto-upload="false"
                            :on-progress="uploadFileName('performanceTestReport')"
                        >
                            <template #trigger>
                                <el-button type="primary">上传文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close()">取消</el-button>
                <el-button type="primary" @click="confirmForm()">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, defineExpose, defineProps, defineEmits, watch, onUnmounted } from 'vue'
// import { upload, insertTerminal, updateTerminal } from '@/api/process-boot/terminal'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId, ElMessage } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { queryByAllCode } from '@/api/system-boot/dictTree'
import { useAdminInfo } from '@/stores/adminInfo'
import { uploadFile } from '@/api/system-boot/file'
import { addPlanFormData } from '@/api/supervision-boot/plan/index'
import { getAreaList } from '@/api/common'
const emits = defineEmits(['onSubmit'])
const dictData = useDictData()
const dialogFormVisible = ref(false)
const form: any = ref({})
const ruleFormRef = ref(null)
//字典获取监督阶段
const areaOptionList = dictData.getBasicData('jibei_area')
//字典获取监督对象关联电站电压等级
const neutralPointWiringMethodList = dictData.getBasicData('Neutral_Point')
//字典获取实施状态
const manufacturerList = dictData.getBasicData('Dev_Manufacturers')
//字典获取实施人员
const frontEndMachineList = dictData.getBasicData('Front_Type')
//字典获取电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
//
const objTypeList = [
    {
        id: '1',
        name: '在运站'
    },
    {
        id: '2',
        name: '新（改、扩）建站'
    }
]
const resetForm = () => {
    form.value = {
        workPlanName: '', //计划名称
        supvOrgId: '', //监督单位
        planOrgId: '', //计划编制单位
        supvType: '', //监督类型
        supvStage: areaOptionList[0].id, //监督阶段
        planSupvDate: '', //计划监督时间
        supvObjType: areaOptionList[0].id, //监督对象类型
        supvObjName: '', //监督对象名称
        objVoltageLevel: voltageLevelList[0].id, //	监督对象电压等级
        objType: '', //监督对象属性
        objTypeName: '', //监督对象属性名称
        objCapacity: '', //监督对象协议容量
        substationName: '', //监督对象关联电站
        substationVoltageLevel: voltageLevelList[0].id, //	监督对象关联电站电压等级
        effectStatus: '0', //实施状态
        effectStartTime: '', //开始实施时间
        effectEndTime: '', //结束实施时间
        reportIssueTime: '', //报告出具时间
        problemOcTime: '', //电能质量问题发生时间
        effectUserId: '', //实施人员
        planStatus: '', //计划状态
        otherRemark: '', //其他要求
        planUserId: '' //计划编制人,挡墙登陆用户
        // sealReport: '', //盖章报告
        // evidenceMaterials:'', //佐证材料
        // planChangeMaterials: '', //计划变更材料
        // alarmMaterials:'', //告预警单材料
        // alarmFeedbackMaterials: '', //告预警单反馈材料
        // assessReport:'' //评估报告
    }
}
//初始化数据
resetForm()

//定义校验规则
const rules = ref({
    //基础信息
    workPlanName: [
        {
            required: true,
            message: '请输入计划名称',
            trigger: 'blur'
        }
    ],
    supvOrgId: [
        {
            required: true,
            message: '请选择监督单位',
            trigger: 'change'
        }
    ],
    planOrgId: [
        {
            required: true,
            message: '请选择计划编制单位',
            trigger: 'change'
        }
    ],
    supvType: [
        {
            required: true,
            message: '请选择监督类型',
            trigger: 'change'
        }
    ],
    supvStage: [
        {
            required: true,
            message: '请选择监督阶段',
            trigger: 'change'
        }
    ],
    planSupvDate: [
        {
            required: true,
            message: '请选择计划监督时间',
            trigger: 'change'
        }
    ],
    supvObjType: [
        {
            required: true,
            message: '请选择监督对象类型',
            trigger: 'change'
        }
    ],
    supvObjName: [
        {
            required: true,
            message: '请输入监督对象名称',
            trigger: 'blur'
        }
    ],
    objVoltageLevel: [
        {
            required: true,
            message: '请选择监督对象电压等级',
            trigger: 'change'
        }
    ],
    objType: [
        {
            required: true,
            message: '请选择监督对象属性',
            trigger: 'change'
        }
    ],
    objTypeName: [
        {
            required: false,
            message: '请输入监督对象属性名称',
            trigger: 'blur'
        }
    ],
    objCapacity: [
        {
            required: true,
            message: '请输入监督对象监督对象协议容量',
            trigger: 'blur'
        }
    ],
    substationName: [
        {
            required: true,
            message: '请输入监督对象关联电站',
            trigger: 'blur'
        }
    ],
    substationVoltageLevel: [
        {
            required: true,
            message: '请选择监督对象关联电站电压等级',
            trigger: 'change'
        }
    ],
    effectStatus: [
        {
            required: true,
            message: '请选择实施状态',
            trigger: 'change'
        }
    ]
})
watch(
    () => form.value,
    (val, oldVal) => {},
    {
        deep: true,
        immediate: true
    }
)
const open = () => {
    dialogFormVisible.value = true
}
const close = () => {
    //重置表单内容
    //取消表单校验状态
    ruleFormRef.value && ruleFormRef.value.resetFields()
    dialogFormVisible.value = false
    emits('onSubmit')
    resetForm()
}
onMounted(() => {
    console.log()
})

// 上传报告
const uploadRef = ref()
const handleExceed: UploadProps['onExceed'] = files => {
    uploadRef.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadRef.value!.handleStart(file)
}
let uploadName = ref('')
//上传报告改变
const uploadFileName = val => {
    uploadName.value = val
}
// 盖章报告
const sealReport = ref('')
// 佐证材料
const evidenceMaterials = ref('')
// 计划变更材料
const planChangeMaterials = ref('')
//告预警单材料
const alarmMaterials = ref('')
//告预警单反馈材料
const alarmFeedbackMaterials = ref('')
//评估报告
const assessReport = ref('')
const choose = (e: any) => {
    uploadFile(e.raw, '/supervision/').then(res => {
        //盖章报告
        if (uploadName.value == 'sealReport') {
            sealReport.value = res.data.name
        }
        //佐证材料
        else if (uploadName.value == 'evidenceMaterials') {
            evidenceMaterials.value = res.data.name
        }
        //计划变更材料
        else if (uploadName.value == 'planChangeMaterials') {
            planChangeMaterials.value = res.data.name
        }
        //告预警单材料
        else if (uploadName.value == 'alarmMaterials') {
            alarmMaterials.value = res.data.name
        }
        //告预警单反馈材料
        else if (uploadName.value == 'alarmFeedbackMaterials') {
            alarmFeedbackMaterials.value = res.data.name
        }
        //评估报告
        else if (uploadName.value == 'assessReport') {
            assessReport.value = res.data.name
        }
    })
}

//设置监督类型时间选择范围不能<今天
const disabledDate = time => {
    return time.getTime() < Date.now() - 8.64e7 // 8.64e7 毫秒数代表一天
}
//获取登陆用户姓名和部门
const adminInfo = useAdminInfo()
//提交
const confirmForm = () => {
    // 提交终端信息
    ruleFormRef.value.validate(valid => {
        if (valid) {
            form.value.planUserId = adminInfo.$state.id
            let confirmFormData = JSON.parse(JSON.stringify(form.value))
            //1.判断是否上传
            // if (!sealReport.value) {
            //     return ElMessage({
            //         message: '请上传盖章报告',
            //         type: 'warning'
            //     })
            // }
            // if (!evidenceMaterials.value) {
            //     return ElMessage({
            //         message: '请上传佐证材料',
            //         type: 'warning'
            //     })
            // }
            // if (!planChangeMaterials.value) {
            //     return ElMessage({
            //         message: '请上传计划变更材料',
            //         type: 'warning'
            //     })
            // }
            // if (!alarmMaterials.value) {
            //     return ElMessage({
            //         message: '请上传告预警单材料',
            //         type: 'warning'
            //     })
            // }
            // if (!alarmFeedbackMaterials.value) {
            //     return ElMessage({
            //         message: '请上传告预警单反馈材料',
            //         type: 'warning'
            //     })
            // }
            // if (!assessReport.value) {
            //     return ElMessage({
            //         message: '请上传评估报告',
            //         type: 'warning'
            //     })
            // }

            //提交终端信息
            // confirmFormData = {
            //     ...confirmFormData,
            //     sealReport: sealReport?.value, //盖章报告
            //     evidenceMaterials: evidenceMaterials.value, //佐证材料
            //     planChangeMaterials: planChangeMaterials.value, //计划变更材料
            //     alarmMaterials: alarmMaterials.value, //告预警单材料
            //     alarmFeedbackMaterials: alarmFeedbackMaterials.value, //告预警单反馈材料
            //     assessReport: assessReport.value //评估报告
            // }
            addPlanFormData(confirmFormData).then(res => {
                ruleFormRef.value.resetFields()
                resetForm()
                close()
            })
        } else {
            console.log('表单验证失败')
            return false
        }
    })
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.fixed-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
}
.el-form {
    width: 96%;
    height: 400px;
    margin: 0 auto;
    overflow-y: auto;
    padding-top: 20px;
}
.dialog-footer {
    padding: 10px;
}
/* 调整标签的换行行为 */
.label_over_warp::v-deep .el-form-item__label {
    // white-space: pre-line !important;
    line-height: 16px !important;
}
::v-deep .el-form-item {
    padding: 0 10px;
    height: auto !important;
}
::v-deep .el-form-item__label {
    justify-content: flex-start !important;
}
.form-label-left-align {
    text-align: left;
}
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
.no_required::v-deep .el-form-item__label {
    padding-left: 10px !important;
}

::v-deep .el-input {
    width: 200px !important;
}
::v-deep .el-select {
    width: 200px !important;
}
::v-deep .required_position {
    position: relative;
    .required_icon {
        position: absolute;
        left: -10px;
        margin-top: 8px;
        color: #f56c6c;
        margin-left: 20px;
        margin-right: 10px;
    }
    .required_icon_white {
        color: #fff;
        position: absolute;
        left: -10px;
        padding-left: 10px;
        margin: 8px 10px 0 10px;
    }
    .required_text {
        // padding-left: 20px;
    }
    .el-form-item__label {
        padding-left: 10px;
    }
}
// ::v-deep .tabs_form{
//     height:300px !important;
// }
</style>