<!-- 标准装置台账信息 基本信息 --> <script name="StandardBookBasic" lang="ts" setup> import type { Ref } from 'vue' import { onMounted, ref } from 'vue' import dayjs from 'dayjs' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { FormRules } from 'element-plus' import type { IForm, ITech, ITechFiles } from '../book-interface' import selectBuildStandardDialog from '@/views/equipement/standard/dialog/selectBuildStandardDialog.vue' import selectMeasureFile from '@/views/dialog/selectMeasureFile.vue' import { getAllDeptList, getDeptTreeList } from '@/api/system/dept' import { getDictByCode } from '@/api/system/dict' import useUserStore from '@/store/modules/user' import type { deptType, dictType } from '@/global' import showPhoto from '@/components/showPhoto/index.vue' import { UploadFile } from '@/api/file' import { SCHEDULE } from '@/utils/scheduleDict' import { useCheckList } from '@/commonMethods/useCheckList' import { useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable' import { getStaffList } from '@/api/resource/register' import { addStandard, failUpdateStandard, getInfo, getStandardCertList, hasChanged, submit, updateStandard } from '@/api/equipment/standard/book' import { getUid } from '@/utils/getUid' import selectUser from '@/views/dialog/selectUser.vue' const props = defineProps({ pageType: { // 页面类型 add新建 edit编辑 detail详情 type: String, require: true, default: 'detail', }, id: { type: String, require: true, }, approvalStatusName: { // 审批状态名称 type: String, require: true, }, }) const emits = defineEmits(['submitSuccess', 'addSuccess', 'saveSuccess', 'giveApprovalType']) const user = useUserStore() // 用户信息 const route = useRoute() const changeFormItem = ref<string[]>([]) // 有变化的字段标红 const infoId = ref('') // id const form: Ref<IForm> = ref({ // 基本信息表单 createUserId: '', // 创建人id createUserName: '', // 创建人名称 createTime: '', // 创建时间 standardCertNo: '', // 计量标准证书号 standardNo: '', // 标准代码 standardName: '', // 标准装置名称 deptId: '', // 标准所在部门id deptName: '', // 标准所在部门名称 directorId: '', // 负责人id directorName: '', // 负责人名称 majorType: '', // 专业类别(字典code) majorTypeName: '', // 专业类别(字典value) lastReviewDate: '', // 最近复查日期 manageStatus: '', // 使用状态code manageStatusName: '', // 使用状态名称 standardImageFile: '', // 标准装置图片 }) const rules = reactive<FormRules>({ // 表单验证规则 standardCertNo: [{ required: true, message: '计量标准证书号不能为空', trigger: ['blur', 'change'] }], standardName: [{ required: true, message: '标准装置名称不能为空', trigger: ['blur', 'change'] }], deptId: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }], directorId: [{ required: true, message: '负责人不能为空', trigger: ['blur', 'change'] }], majorType: [{ required: true, message: '专业类别不能为空', trigger: ['blur', 'change'] }], lastReviewDate: [{ required: true, message: '最近复查日期不能为空', trigger: ['blur', 'change'] }], manageStatus: [{ required: true, message: '使用状态不能为空', trigger: ['blur', 'change'] }], }) const detailOriginData = ref() as any // ------------------------------------------字典---------------------------------------------- const manageStatusList = ref<dictType[]>([]) // 使用状态 const bizMajorTypeList = ref<dictType[]>([]) // 专业类别 const deptList = ref([]) as any /** * 获取字典 */ async function getDict() { // 专业类别 getDictByCode('bizMajorType').then((response) => { bizMajorTypeList.value = response.data }) // 使用状态 getDictByCode('bizStandardManagerState').then((response) => { manageStatusList.value = response.data }) // 获取部门列表 getDeptTreeList().then((res) => { deptList.value = res.data console.log('部门列表', deptList.value) }) } // -------------------------------------------文件上传-------------------------------------- // 文件上传 const fileRefStandardImageFile = ref() // 标准装置图片 // 标准装置图片上传 const onStandardImageFileChange = (event: any) => { if (event.target.files[0].type !== 'image/png' && event.target.files[0].type !== 'image/jpeg') { ElMessage.warning('请上传png、jpg格式') return } UploadFileFn(event, 'standardImageFile', '图片上传成功') } // 上传文件操作 function UploadFileFn(event: any, prop: string, message: string) { if (event.target.files?.length !== 0) { // 创建formdata对象 const fd = new FormData() fd.append('multipartFile', event.target.files[0]) const loading = ElLoading.service({ lock: true, background: 'rgba(255, 255, 255, 0.8)', }) UploadFile(fd).then((res) => { if (res.code === 200) { form.value[prop] = res.data[0] event.target.value = null // 重置当前验证 ElMessage.success(message) loading.close() } else { ElMessage.error(res.message) loading.close() } }).catch(() => { event.target.value = null }) } } const upload = (fileRef: any) => { fileRef.click() } // -----------------------------------------依据的计量文件------------------------------ const checkoutFilesList = ref<ITechFiles[]>([]) // 技术文件多选 const technologyRelationList = ref<ITechFiles[]>([]) // 所依据的技术文件 const selectFliesIndex = ref() // 技术文件表格-点击选择的index---点击第几行 const selectMeasureFileRef = ref() // 所依据的技术文件组件ref const isMultiFiles = ref(false) // 选择依据的技术文件是否多选 // 所依据的技术文件表头 const techFilesColumns = [ { text: '文件编号', value: 'technologyFileNo', required: true, align: 'center', width: '240' }, { text: '文件名称', value: 'technologyFileName', required: true, align: 'center' }, { text: '文件附件', value: 'fileArr', align: 'center', isLink: true }, ] // 点击技术文件批量增加 const multiFilesAdd = () => { isMultiFiles.value = true selectMeasureFileRef.value.initDialog(isMultiFiles.value) } // 点击增加行 const addFilesRow = () => { const index = technologyRelationList.value.findIndex((item: ITechFiles) => !item.technologyFileNo) if (index !== -1) { ElMessage.warning('请完善上一条文件信息') return } technologyRelationList.value.push({ remark: '', // 备注 standardNo: '', // 标准代码 technologyFileId: '', // 依据的技术文件id technologyFileName: '', // 依据的技术文件名称 }) } // 技术文件表格多选 const handleSelectionChangeFiles = (e: any) => { checkoutFilesList.value = e } // 点击技术文件删除行 const delFilesRow = () => { if (checkoutFilesList.value.length <= 0) { ElMessage({ message: '请选中要删除的行', type: 'warning', }) } else { checkoutFilesList.value.forEach((item: ITechFiles) => { technologyRelationList.value.forEach((element: ITechFiles, index: number) => { if (element.technologyFileId === item.technologyFileId) { technologyRelationList.value.splice(index, 1) } }) }) } } // 点击选择文件编号 const handleClickFiles = (index: number) => { isMultiFiles.value = false // 单选 selectFliesIndex.value = index selectMeasureFileRef.value.initDialog(isMultiFiles.value) } // 选好文件 const confirmSelectMeasureFile = (val: any) => { if (val && val.length) { if (isMultiFiles.value) { // 多选 val.forEach((item: any) => { // 只添加列表里不存在的 const index = technologyRelationList.value.findIndex((i: ITechFiles) => item.fileNo === i.technologyFileNo) if (index === -1) { const param = { technologyFileNo: item.fileNo, // 文件编号 technologyFileName: item.fileName, // 文件名称 remark: item.remark, // 备注 technologyFileId: item.id, // id fileArr: [item.pdfUrl], fileAttachment: item.pdfUrl, temperatureLowLimit: item.temperatureLowLimit, temperatureHighLimit: item.temperatureHighLimit, humidityLowLimit: item.humidityLowLimit, humidityHighLimit: item.humidityHighLimit, } technologyRelationList.value.push(param) } }) } else { // 单选 const index = technologyRelationList.value.findIndex((i: ITechFiles) => val[0].fileNo === i.technologyFileNo) if (index !== -1) { ElMessage.warning('此文件已添加过') return } const fileParam = { technologyFileNo: val[0].fileNo, // 文件编号 technologyFileName: val[0].fileName, // 文件名称 remark: val[0].remark, // 备注 technologyFileId: val[0].id, // id fileArr: [val[0].pdfUrl], fileAttachment: val[0].pdfUrl, temperatureLowLimit: val[0].temperatureLowLimit, temperatureHighLimit: val[0].temperatureHighLimit, humidityLowLimit: val[0].humidityLowLimit, humidityHighLimit: val[0].humidityHighLimit, } technologyRelationList.value.splice(selectFliesIndex.value, 1, fileParam) } } } // ------------------------------------------环境条件---------------------------------------- const environmentalConditionsColumns = [ // 环境条件表头 { text: '温度(℃)', value: 'temperature', align: 'center', required: true }, { text: '相对湿度(%)', value: 'humidity', align: 'center', required: true }, { text: '电源电压(v)', value: 'voltage', align: 'center', required: true }, { text: '其他要求', value: 'otherRequirement', align: 'center', required: false }, ] const environmentalConditionsList = ref([ { temperature: '', // 温度(℃) humidity: '', // 相对湿度 voltage: '', // 电源电压 otherRequirement: '', // 其他要求 }, ]) // --------------------------------------------选择负责人------------------------------------ const selectUserRef = ref() // 点击选择负责人 const handleClickSelectStaff = () => { selectUserRef.value.initDialog() } // 选择计量人员 const confirmSelectUser = (list: any) => { if (!list.length) { return } form.value.directorId = list[0].id // 负责人id form.value.directorName = list[0].name // 负责人名字 } // -------------------------------------------技术指标---------------------------------------- const technicalIndexColumns = [ // 技术指标表头 { text: '开展量传参数', value: 'measureItem', align: 'center', required: true }, { text: '测量范围', value: 'measureRange', align: 'center', required: true }, { text: '不确定度或允许误差极限或准确度等级', value: 'uncertainty', align: 'center', required: true }, ] const checkoutTechnicalIndex = ref<ITech[]>([]) // 选中 const technologyIndexRelationList = ref<ITech[]>([]) // 技术指标 // 技术文件表格多选 const handleSelectionTechIndex = (e: any) => { checkoutTechnicalIndex.value = e } // 点击增加行 const addTechnicalIndexRow = () => { if (!useCheckList(technologyIndexRelationList.value, technicalIndexColumns, '技术指标')) { return false } technologyIndexRelationList.value.push({ measureRange: '', // 测量范围 uncertainty: '', // 不确定度或允许误差极限或准确度等级 measureItem: '', // 开展量传参数 editable: true, // 是否可编辑 frontId: getUid(), }) } // 点击删除行 const delTechnicalIndexRow = () => { if (checkoutTechnicalIndex.value.length <= 0) { ElMessage({ message: '请选中要删除的行', type: 'warning', }) } else { checkoutTechnicalIndex.value.forEach((item: ITech) => { technologyIndexRelationList.value.forEach((element: ITech, index: number) => { if (element.frontId === item.frontId) { technologyIndexRelationList.value.splice(index, 1) } }) }) } } // -------------------------------------------获取详情信息---------------------------------------- // 获取最新一条标准证书 const fetchLastStandardCert = (standardId: string) => { if (!standardId) { return } const params = { id: standardId, offset: 1, limit: 20, } getStandardCertList(params).then((res) => { if (res && res.data && res.data.rows && res.data.rows.length) { const tempCert = res.data.rows[res.data.rows.length - 1] form.value.lastReviewDate = tempCert.certificateDate // 最近复查日期-证书日期 form.value.nextReviewDate = tempCert.certificateExpireDate // 下次复查日期-证书有效期 } }) } /** * 获取详情 * @param isCopy 是否备份,判断基本信息是否变化 */ function fetchInfo() { const loading = ElLoading.service({ lock: true, background: 'rgba(255, 255, 255, 0.8)', }) getDict() // 获取字典 getInfo({ id: infoId.value! }).then((res) => { form.value = res.data.standardInfo // 表单数据 technologyRelationList.value = res.data.technologyRelationList // 技术文件 environmentalConditionsList.value = [{ // 环境数据 temperature: res.data.standardInfo.temperature, // 温度(℃) humidity: res.data.standardInfo.humidity, // 相对湿度 voltage: res.data.standardInfo.voltage, // 电源电压 otherRequirement: res.data.standardInfo.otherRequirement, // 其他要求 }] technologyIndexRelationList.value = res.data.technologyIndexRelationList.map((item: ITech) => { // 技术指标数据 return { measureRange: item.measureRange, // 测量范围 uncertainty: item.uncertainty, // 不确定度或允许误差极限或准确度等级 measureItem: item.measureItem, // 开展量传参数 editable: props.pageType !== 'detail', // 是否可编辑 } }) // 如果有标准证书,最近复查日期和下次复查日期就需要用标准证书的证书日期和证书有效期 // fetchLastStandardCert(infoId.value) loading.close() }) } // ----------------------------------------------- 保存--------------------------------------- const ruleFormRef = ref() // 基本信息表单ref /** * 点击保存 * @param ruleFormRef 基本信息表单ref */ function saveForm() { if (!useCheckList(technologyRelationList.value, techFilesColumns, '依据的计量文件')) { return false } if (!technologyRelationList.value.length) { ElMessage.warning('依据的计量文件不能为空') return false } if (!technologyIndexRelationList.value.length) { ElMessage.warning('技术指标不能为空') return false } if (!useCheckList(environmentalConditionsList.value, environmentalConditionsColumns, '环境条件')) { return false } if (!useCheckList(technologyIndexRelationList.value, technicalIndexColumns, '技术指标')) { return false } ruleFormRef.value.validate((valid: boolean) => { if (valid) { // 基本信息表单通过校验 let tempDeptName = '' const tempIndex = deptList.value.findIndex((item: { id: string | number | undefined }) => item.id === form.value.deptId) if (tempIndex !== -1) { tempDeptName = deptList.value[tempIndex].name } const params = { // 请求参数 technologyRelationList: technologyRelationList.value.map((item: any) => { return { ...item, standardNo: form.value.standardNo, // 标准代码 id: '', // 解决编辑的时候报生成编号重复问题 } }), // 依据的计量文件 technologyIndexRelationList: technologyIndexRelationList.value.map((item: any) => { return { ...item, standardNo: form.value.standardNo, // 标准代码 } }), // 技术指标 standardInfo: { // 表单、环境、指标 ...form.value, ...environmentalConditionsList.value[0], // 环境 id: form.value.id || infoId.value, }, } const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) detailOriginData.value = params if (props.pageType === 'add') { // 新建 addStandard(params).then((res) => { loading.close() form.value.standardNo = res.data.standardNo // 设备编号 infoId.value = res.data.id // id emits('addSuccess', form.value.standardNo, infoId.value, form.value.standardName) ElMessage.success('已保存') }).catch(() => { loading.close() }) } else if (props.pageType === 'edit') { // 编辑 updateStandard(params).then((res) => { loading.close() ElMessage.success('已保存') emits('saveSuccess') }).catch(() => { loading.close() }) } } }) } // -------------------------------------------钩子------------------------------------------------ watch(() => props.id, (newValue) => { infoId.value = newValue! }, { immediate: true }) // 专业类别变化 const changeMajorType = (val: string) => { if (val) { const index = bizMajorTypeList.value.findIndex(item => item.value === val) if (index !== -1) { form.value.majorTypeName = bizMajorTypeList.value[index].name } } } onMounted(async () => { await getDict() // 获取字典 form.value.createUserId = user.id// 创建人id form.value.createUserName = user.name // 创建人 form.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')// 申请时间 if (props.pageType !== 'add') { fetchInfo() // 获取详情信息 } }) defineExpose({ saveForm }) </script> <template> <div class="standard-basic"> <detail-block title=""> <el-form ref="ruleFormRef" :model="form" :label-width="130" label-position="right" :rules="rules" > <el-row :gutter="24" class="marg"> <el-col :span="6"> <el-form-item label="创建人:" :class="changeFormItem.includes('createUserName') ? 'changedLabel' : ''"> <el-input v-model="form.createUserName" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="创建时间:"> <el-date-picker v-model="form.createTime" type="date" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" disabled class="full-width-input" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24" class="marg"> <el-col :span="6"> <el-form-item label="计量标准证书号:" prop="standardCertNo" :class="changeFormItem.includes('standardCertNo') ? 'changedLabel' : ''"> <el-input v-model="form.standardCertNo" :disabled="pageType === 'detail'" :placeholder="pageType === 'detail' ? '' : '请输入计量标准证书号'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="标准装置名称:" prop="standardName" :class="changeFormItem.includes('standardAlias') ? 'changedLabel' : ''"> <el-input v-model="form.standardName" :disabled="pageType === 'detail'" :placeholder="pageType === 'detail' ? '' : '请输入标准装置名称'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="实验室" prop="deptId"> <dept-select ref="deptSelect" v-model="form.deptId" placeholder="请选择实验室" :dept-show="true" :disabled="pageType === 'detail'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="负责人:" prop="directorId" :class="changeFormItem.includes('directorId') ? 'changedLabel' : ''"> <el-input v-model.trim="form.directorName" :placeholder="pageType === 'detail' ? ' ' : '请选择负责人'" disabled class="full-width-input" clearable > <template v-if="pageType !== 'detail'" #append> <el-button size="small" @click="handleClickSelectStaff" > 选择 </el-button> </template> </el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="专业类别:" prop="majorType" :class="changeFormItem.includes('majorType') ? 'changedLabel' : ''"> <el-select v-model="form.majorType" filterable :placeholder="pageType === 'detail' ? ' ' : '请选择专业类别'" :disabled="pageType === 'detail'" class="full-width-input" @change="changeMajorType" > <el-option v-for="item of bizMajorTypeList" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="最近复查日期:" prop="lastReviewDate"> <el-date-picker v-model="form.lastReviewDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="pageType === 'detail' ? ' ' : '最近复查日期'" :disabled="pageType === 'detail'" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="使用状态:" prop="manageStatus" :class="changeFormItem.includes('manageStatus') ? 'changedLabel' : ''"> <el-select v-model.trim="form.manageStatus" clearable :placeholder="pageType === 'detail' ? '' : '请选择使用状态'" size="default" :disabled="pageType === 'detail'" class="full-width-input" > <el-option v-for="item in manageStatusList" :key="item.id" :label="item.name" :value="item.value" /> </el-select> </el-form-item> </el-col> </el-row> <el-row :gutter="24" class="marg"> <el-col :span="12"> <el-form-item label="标准装置图片:" label-width="150px" :class="changeFormItem.includes('standardImageFile') ? 'changedLabel' : ''"> <show-photo v-if="form.standardImageFile" :minio-file-name="form.standardImageFile" /> <span v-else-if="pageType === 'detail'">无</span> <input v-show="pageType === ''" ref="fileRefStandardImageFile" type="file" @change="onStandardImageFileChange"> <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.standardImageFile === '' ? '0px' : '20px' }" @click="upload(fileRefStandardImageFile)"> {{ form.standardImageFile === '' ? '上传' : '更换附件' }} </el-button> </el-form-item> </el-col> </el-row> </el-form> </detail-block> <detail-block title="依据的计量文件"> <template v-if="pageType !== 'detail'" #btns> <el-button type="primary" @click="multiFilesAdd"> 批量添加 </el-button> <el-button type="primary" @click="addFilesRow"> 增加行 </el-button> <el-button type="info" @click="delFilesRow"> 删除行 </el-button> </template> <el-table :data="technologyRelationList" border style="width: 100%;" @selection-change="handleSelectionChangeFiles" > <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" /> <el-table-column align="center" label="序号" width="80" type="index" /> <el-table-column v-for="item in techFilesColumns" :key="item.value" :prop="item.value" :label="item.text" :width="item.width" align="center" > <template #header> <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span> </template> <template #default="scope"> <el-input v-if="item.text === '文件编号' && pageType !== 'detail'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="input" disabled > <template #append> <el-button v-if="pageType !== 'detail'" size="small" @click="handleClickFiles(scope.$index)" > 选择 </el-button> </template> </el-input> <show-photo v-if="item.value === 'fileArr'" :minio-file-name="scope.row.fileAttachment" /> </template> </el-table-column> </el-table> </detail-block> <detail-block title="环境条件"> <el-table :data="environmentalConditionsList" border style="width: 100%;" > <el-table-column align="center" label="序号" width="80" type="index" /> <el-table-column v-for="item in environmentalConditionsColumns" :key="item.value" :prop="item.value" :label="item.text" align="center" > <template #header> <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span> </template> <template #default="scope"> <el-input v-if="pageType !== 'detail'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" type="textarea" :autosize="{ minRows: 3 }" /> <span v-else>{{ scope.row[item.value] }}</span> </template> </el-table-column> </el-table> </detail-block> <detail-block title="技术指标"> <template v-if="pageType !== 'detail'" #btns> <el-button type="primary" @click="addTechnicalIndexRow"> 增加行 </el-button> <el-button type="info" @click="delTechnicalIndexRow"> 删除行 </el-button> </template> <el-table :data="technologyIndexRelationList" border style="width: 100%;" @selection-change="handleSelectionTechIndex" > <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" /> <el-table-column align="center" label="序号" width="80" type="index" /> <el-table-column v-for="item in technicalIndexColumns" :key="item.value" :prop="item.value" :label="item.text" align="center" > <template #header> <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span> </template> <template #default="scope"> <el-input v-if="pageType !== 'detail'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" type="textarea" autosize /> <span v-else>{{ scope.row[item.value] }}</span> </template> </el-table-column> </el-table> </detail-block> <!-- 选择所依据的技术文件 --> <select-measure-file ref="selectMeasureFileRef" @confirm="confirmSelectMeasureFile" /> <!-- 选择(负责人) --> <select-user ref="selectUserRef" :is-multi="false" @confirm="confirmSelectUser" /> </div> </template> <style lang="scss" scoped> ::v-deep .changedLabel .el-form-item__label { color: #f56c6c; } </style> <style lang="scss"> .standard-basic { // 单元格样式 .el-table__cell { position: static !important; // 解决el-image 和 el-table冲突层级冲突问题 } } </style>