admin-sjzx/src/views/pqs/supervise/electricalEnergy/components/process1.vue

<template>
    <el-form :model="causeAnalysisData" :rules="rules" ref="form1Ref" label-width="auto">
        <el-form-item label="电网侧原因:" prop="reportProcessContentYyfx">
            <el-checkbox-group v-model="causeAnalysisData.reportProcessContentYyfx">
                <el-checkbox v-for="(item, ind) in CauseList" :key="ind" :label="item.code">
                    {{ item.name }}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="用户侧原因:" prop="userReportProcessContentYyfx">
            <el-checkbox-group v-model="causeAnalysisData.userReportProcessContentYyfx">
                <el-checkbox v-for="(item, ind) in userCauseList" :key="ind" :label="item.code">
                    {{ item.name }}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-row v-if="prop.addData.problemSources == '用户投诉' || prop.addData.problemSources == '设备异常'">
            <el-divider></el-divider>

            <el-form-item label="电网侧受影响设备:" prop="powerGridAffectDev">
                <el-checkbox-group v-model="causeAnalysisData.powerGridAffectDev">
                    <el-checkbox v-for="(item, ind) in powerGridAffectDevList" :key="ind" :label="item.code">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-divider></el-divider>

            <el-form-item label="用户侧受影响设备:" prop="userAffectDev">
                <el-checkbox-group v-model="causeAnalysisData.userAffectDev">
                    <el-checkbox v-for="(item, ind) in userAffectDevList" :key="ind" :label="item.code">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-row>

        <el-divider></el-divider>

        <el-form-item label="事件描述:" prop="eventDescriptionYyfx">
            <el-input
                style="width: 400px"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入内容"
                v-model="causeAnalysisData.eventDescriptionYyfx"
            ></el-input>
        </el-form-item>
        <el-form-item class="item" label="原因分析报告:" style="margin-top: 10px" prop="fileList">
            <el-upload
                v-model:file-list="causeAnalysisData.fileList"
                ref="upload"
                action=""
                :limit="1"
                :on-exceed="handleExceed"
                :auto-upload="false"
            >
                <template #trigger>
                    <el-button type="primary">上传文件</el-button>
                </template>
            </el-upload>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { useDictData } from '@/stores/dictData'
import { uploadFile, reasonAnalysis } from '@/api/process-boot/electricitymanagement'
import { UploadInstance, UploadProps, UploadRawFile, ElMessage, ElMessageBox } from 'element-plus'
import { genFileId } from 'element-plus'
import { ref, reactive } from 'vue'
const prop = defineProps({
    addData: {
        type: Object,
        default: () => {}
    }
})
const emit = defineEmits(['handleClose'])

const dictData = useDictData()
const upload = ref()
const form1Ref = ref()
const causeAnalysisData: any = ref({
    reportProcessContentYyfx: [],
    userReportProcessContentYyfx: [],
    eventDescriptionYyfx: '',
    fileNameYyfx: '', //原因分析报告文件名称
    filePathYyfx: '', //原因分析报告文件路径
    powerGridAffectDev: [],
    userAffectDev: [],
    fileList: []
})
const rules = {
    reportProcessContentYyfx: [{ required: true, message: '请选择电网侧原因', trigger: 'change' }],
    userReportProcessContentYyfx: [{ required: true, message: '请选择用户侧原因', trigger: 'change' }],
    eventDescriptionYyfx: [{ required: true, message: '请填写事件描述', trigger: 'blur' }],
    powerGridAffectDev: [{ required: true, message: '请选择电网侧受影响设备', trigger: 'change' }],
    userAffectDev: [{ required: true, message: '请选择用户侧受影响设备', trigger: 'change' }],
    fileList: [{ required: true, message: '请上传文件', trigger: 'change' }]
}
// 电网侧原因
const CauseList = dictData.getBasicData('Grid-side_Reasons')
// 用户侧原因
const userCauseList = dictData.getBasicData('User_Reasons')
// 电网侧受影响设备
const powerGridAffectDevList = dictData.getBasicData('Grid_Unit')
// 用户侧受影响设备
const userAffectDevList = dictData.getBasicData('Customer_Unit')
const OnlineList = dictData.getBasicData('Problem_Sources')

// 上传
const handleExceed: UploadProps['onExceed'] = files => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

const submit = () => {
    // console.log('🚀 ~ form1Ref.value.validate ~ =prop.addData:', prop.addData)

    form1Ref.value.validate(async (valid: any) => {
        if (valid) {
            let form = new FormData()
            form.append('file', causeAnalysisData.value.fileList[0].raw)
            causeAnalysisData.value.powerQualityProblemNo = prop.addData.powerQualityProblemNo
            await uploadFile(form).then((res: any) => {
                causeAnalysisData.value.filePathYyfx = res.filePath
                causeAnalysisData.value.fileNameYyfx = res.fileName
            })
            await reasonAnalysis(causeAnalysisData.value).then((res: any) => {
                ElMessage.success('提交成功')
                emit('handleClose')
            })
        }
    })
}
defineExpose({
    submit
})
</script>
<style lang="scss" scoped></style>