<!-- 检完 --> <script lang="ts" setup name="MeasureCompleteDialog"> import type { FormInstance, FormRules } from 'element-plus' import { ElLoading, ElMessage } from 'element-plus' import useUserStore from '@/store/modules/user' import { UploadFile } from '@/api/file' import { getDictByCode } from '@/api/system/dict' import type { dictType } from '@/global' import { measureComplete } from '@/api/business/subpackage/equipment' import { addCertificateList, updateCertificateList } from '@/api/business/subpackage/certificate' const emit = defineEmits(['onSuccess', 'refuse']) // 弹窗显示状态 const dialogVisible = ref(false) // 默认表单 const form = ref({ certificateName: '', // 证书名称 certificateNo: '', // 证书号(手填) certificateValid: '', // 证书有效期 checkDate: '', // 检定日期 conclusion: '', // 检定结论 meterIdentify: '', // 计量标识 certificateReportFile: '', // 证书报告附件 ids: [], outsourcerId: '', // 分包方id sampleId: '', // 智能模型id orderId: '', // 任务单id orderNo: '', // 任务单编号 limitInstruction: '', // 限用说明 }) // 保存按钮加载状态 const btnLoading = ref(false) const certificateId = ref('') // 证书id const userInfo = useUserStore() const type = ref('') // finish检完 finishUpload检完并上传证书 upload上传证书 // ---------------表单提交-------------------------------- // 表单对象 const dataFormRef = ref<FormInstance>() // 校验规则 const rules: FormRules = reactive({ certificateNo: [{ required: true, message: '证书编号必填', trigger: ['blur', 'change'] }], certificateName: [{ required: true, message: '证书名称必填', trigger: ['blur', 'change'] }], checkDate: [{ required: true, message: '检定日期必填', trigger: ['blur', 'change'] }], certificateValid: [{ required: true, message: '检定有效期至必填', trigger: ['blur', 'change'] }], conclusion: [{ required: true, message: '检定结论必填', trigger: ['blur', 'change'] }], meterIdentify: [{ required: true, message: '计量标识必填', trigger: ['blur', 'change'] }], certificateReportFile: [{ required: true, message: '检定证书必填', trigger: ['blur', 'change'] }], limitInstruction: [{ required: true, message: '限用说明必填', trigger: ['blur', 'change'] }], }) // -------------------------------------------字典---------------------------------------------+ const conclusionList = ref<dictType[]>([]) // 结论 const meterIdentifyDict = ref<dictType[]>([]) // 计量标识 // 获取字典值 async function getDict() { // 结论 getDictByCode('bizConclusion').then((response) => { conclusionList.value = response.data }) // 计量标识 getDictByCode('eqptMeterIdentify').then((response) => { meterIdentifyDict.value = response.data }) } getDict() // ----------------------------------------------------------------------------------------+ const titleMap = { finish: '检完', finishUpload: '检完并上传证书', upload: '上传证书', } /** * 初始化弹窗 * @param ids id集合 * @param typeParam 操作类型 finish检完 finishUpload检完并上传证书 upload上传证书 * @param row 表格行数据 */ function initDialog(ids: any, typeParam: 'batchFinish' | 'finish' | 'finishUpload' | 'upload', row: any) { form.value.ids = ids type.value = typeParam if (typeParam !== 'batchFinish') { form.value.outsourcerId = row.outsourcerId // 分包方id form.value.sampleId = row.sampleId // 智能模型id form.value.orderId = row.orderId // 任务单id form.value.orderNo = row.orderNo // 任务单编号 certificateId.value = row.certificateId // 证书id form.value.certificateNo = row.certificateNo // 证书编号 form.value.certificateName = row.certificateName // 证书名称 form.value.certificateReportFile = row.certificateReportFile || '' // 证书报告文件 } if (typeParam === 'upload') { form.value.certificateValid = row.certificateValid // 证书有效期 form.value.checkDate = row.checkDate // 检定日期 form.value.conclusion = row.conclusion // 检定结论 form.value.meterIdentify = row.meterIdentify // 计量标识 } dialogVisible.value = true } // 提交表单 function submitForm() { if (dataFormRef) { dataFormRef.value?.validate((valid: boolean) => { if (valid) { btnLoading.value = true if (type.value === 'batchFinish' || type.value === 'finish' || type.value === 'finishUpload') { // 检完、批量检完 measureComplete({ ...form.value }).then(() => { ElMessage.success('检完操作成功') emit('onSuccess') btnLoading.value = false handleClose() }) } if (type.value === 'finishUpload' || (type.value === 'upload' && !certificateId.value)) { // 检完并上传证书\上传证书(新增) const params = { certificateName: form.value.certificateName, // 证书名称 certificateNo: form.value.certificateNo, // 证书号(手填) certificateValid: form.value.certificateValid, // 证书有效期 checkDate: form.value.checkDate, // 检定日期 conclusion: form.value.conclusion, // 检定结论 meterIdentify: form.value.meterIdentify, // 计量标识 certificateReportFile: form.value.certificateReportFile, // 证书报告附件 outsourcerId: form.value.outsourcerId, // 分包方id sampleId: form.value.sampleId, // 受检智能模型id orderId: form.value.orderId, // 任务单id orderNo: form.value.orderNo, // 任务单编号 limitInstruction: form.value.limitInstruction, // 限用说明 } addCertificateList(params).then(() => { ElMessage.success('上传证书成功') emit('onSuccess') btnLoading.value = false handleClose() }) } if (type.value === 'upload' && certificateId.value) { // 上传证书(编辑) const params = { certificateName: form.value.certificateName, // 证书名称 certificateNo: form.value.certificateNo, // 证书号(手填) certificateValid: form.value.certificateValid, // 证书有效期 checkDate: form.value.checkDate, // 检定日期 conclusion: form.value.conclusion, // 检定结论 meterIdentify: form.value.meterIdentify, // 计量标识 certificateReportFile: form.value.certificateReportFile, // 证书报告附件 outsourcerId: form.value.outsourcerId, // 分包方id sampleId: form.value.sampleId, // 受检智能模型id orderId: form.value.orderId, // 任务单id orderNo: form.value.orderNo, // 任务单编号 id: certificateId.value, // 证书id limitInstruction: form.value.limitInstruction, // 限用说明 } updateCertificateList(params).then(() => { ElMessage.success('上传证书成功') emit('onSuccess') btnLoading.value = false handleClose() }) } } }) } } // 关闭弹窗 function handleClose() { dataFormRef.value?.resetFields() dialogVisible.value = false } // -------------------------------------------文件上传-------------------------------------- const fileRef = ref() // 文件上传input const onFileChange = (event: any) => { if (event.target.files?.length !== 0) { if (event.target.files[0].type !== 'application/pdf') { ElMessage.warning('请上传pdf') return false } // 创建formdata对象 const fd = new FormData() fd.append('multipartFile', event.target.files[0]) btnLoading.value = true UploadFile(fd).then((res) => { if (res.code === 200) { form.value.certificateReportFile = res.data[0] event.target.value = null // 重置当前验证 // ElMessage.success('文件上传成功') btnLoading.value = false } else { ElMessage.error(res.message) btnLoading.value = false } }) } } const upload = () => { fileRef.value.click() } // ----------------------- 以下是暴露的方法内容 ---------------------------- defineExpose({ initDialog }) </script> <template> <div class="approval-dialog"> <el-dialog v-model="dialogVisible" :title="titleMap[type]" width="900px" :before-close="handleClose" > <el-form ref="dataFormRef" v-loading="btnLoading" label-position="left" label-width="130px" :model="form" :rules="rules" > <el-row :gutter="24" class="marg"> <el-col v-if="type !== 'finish'" :span="12"> <el-form-item label="证书编号:" prop="certificateNo"> <el-input v-model="form.certificateNo" placeholder="请输入证书编号" /> </el-form-item> </el-col> <el-col v-if="type !== 'finish'" :span="12"> <el-form-item label="证书名称:" prop="certificateName"> <el-input v-model.trim="form.certificateName" placeholder="请输入证书名称" /> </el-form-item> </el-col> <el-col v-if="type !== 'upload'" :span="12"> <el-form-item label="检定日期:" prop="checkDate"> <el-date-picker v-model="form.checkDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" class="full-width-input" /> </el-form-item> </el-col> <el-col v-if="type !== 'upload'" :span="12"> <el-form-item label="检定有效期至:" prop="certificateValid"> <el-date-picker v-model="form.certificateValid" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" class="full-width-input" /> </el-form-item> </el-col> <el-col v-if="type !== 'upload'" :span="12"> <el-form-item label="检定结论:" prop="conclusion"> <el-select v-model="form.conclusion" placeholder="请选择检定结论" filterable class="full-width-input" > <el-option v-for="item in conclusionList" :key="item.id" :label="item.name" :value="item.name" /> </el-select> </el-form-item> </el-col> <el-col v-if="form.conclusion === '除*外其余所检项目合格'" :span="12"> <el-form-item label="限用说明:" prop="limitInstruction"> <el-input v-model="form.limitInstruction" type="textarea" autosize placeholder="请输入限用说明" /> </el-form-item> </el-col> <el-col v-if="type !== 'upload'" :span="12"> <el-form-item label="计量标识:" prop="meterIdentify"> <el-select v-model="form.meterIdentify" class="full-width-input" placeholder="计量标识" > <el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </el-form-item> </el-col> <el-col v-if="type !== 'finish'" :span="24"> <el-form-item label="检定证书:" prop="certificateReportFile"> <show-photo v-if="form.certificateReportFile" :minio-file-name="form.certificateReportFile" /> <input v-show="false" ref="fileRef" type="file" @change="onFileChange"> <el-button id="file" type="primary" :style="{ 'margin-left': form.certificateReportFile === '' ? '0px' : '20px' }" @click="upload"> {{ form.certificateReportFile === '' ? '上传' : '更换附件' }} </el-button> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <el-button type="primary" :loading="btnLoading" @click="submitForm"> 确定 </el-button> <el-button type="info" @click="handleClose"> 取消 </el-button> </template> </el-dialog> </div> </template> <style lang="scss"> .approval-dialog { .el-radio__label { display: block !important; } } </style>