<!-- 设备借用 基本信息 --> <script name="ResumeBorrowApproveBasic" lang="ts" setup> import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { FormRules } from 'element-plus' import dayjs from 'dayjs' import type { IForm } from '../borrow-interface' import type { dictType } from '@/global' import { getDictByCode } from '@/api/system/dict' import { getUserList } from '@/api/system/user' import { SCHEDULE } from '@/utils/scheduleDict' import useUserStore from '@/store/modules/user' import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue' import { useCheckList } from '@/commonMethods/useCheckList' import type { IAccessory } from '@/views/equipement/info/book/book-interface' import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable' import { addResumeBorrowList, failUpdateResumeBorrowList, getInfo, saveReturnInfo, submit, updateResumeBorrowList } from '@/api/equipment/resume/borrow' const props = defineProps({ pageType: { // 页面类型 add新建 edit编辑 detail详情 type: String, requre: true, default: 'detail', }, id: { type: String, requre: true, }, approvalStatusName: { // 审批状态名称 type: String, requre: true, }, processId: { type: String, }, operateType: { type: String, }, returnStatus: { type: String, }, }) const emits = defineEmits(['addSuccess', 'submitSuccess']) const user = useUserStore() // 用户信息 const form = ref<IForm>({ groupCode: '', // 部门 labCode: '', // 实验室 registerNo: '', // 登记表编号 registerName: '', // 登记表名称 createUserId: '', // 创建人id createUserName: '', // 创建人 createTime: '', // 创建时间 equipmentName: '', // 设备名称 model: '', // 型号 manufacturer: '', // 生产厂家 manufactureNo: '', // 出厂编号 equipmentCompany: '', // 设备所属单位 deptId: '', // 设备借用部门id deptName: '', // 设备借用部门id borrowDate: '', // 借用日期 borrowDeadline: '', // 借用期限 borrowReason: '', // 借用原因 equipmentPerformanceStatus: '', // 设备性能状态 traceSituation: '', // 溯源情况 }) const returnForm = ref({ receiveDate: '', // 归还信息-接收日期 receiver: '', // 归还信息-接收人 returnDate: '', // 归还信息-归还日期 returnEquipmentPerformanceStatus: '', // 归还信息-设备性能状态 returnUser: '', // 归还信息-归还人 }) const ruleFormBasicInfoRef = ref() // 基本信息表单ref const ruleFormBorrowInfoRef = ref() // 基本借用信息表单ref const returnRuleFormLendInfoRef = ref() // 归还信息表单 const loading = ref(false) // loading const infoId = ref('') // id // 自定义校验规则--借用期限应该比借用日期大 const requireOverTimeValid = (rule: any, value: any, callback: any) => { if (!value) { return callback(new Error('借用期限不能为空')) } if (new Date(form.value.borrowDeadline).getTime() < new Date(form.value.borrowDate).getTime()) { return callback(new Error('借用期限应不小于借用日期')) } callback() } const rules = ref<FormRules>({ // 校验规则 labCode: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }], groupCode: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }], equipmentName: [{ required: true, message: '设备名称不能为空', trigger: ['blur', 'change'] }], model: [{ required: true, message: '规格型号不能为空', trigger: ['blur', 'change'] }], manufacturer: [{ required: true, message: '生产厂家不能为空', trigger: ['blur', 'change'] }], manufactureNo: [{ required: true, message: '出厂编号不能为空', trigger: ['blur', 'change'] }], borrowCompany: [{ required: true, message: '借用单位不能为空', trigger: ['blur', 'change'] }], borrower: [{ required: true, message: '借用人不能为空', trigger: ['blur', 'change'] }], borrowDate: [{ required: true, message: '借用日期不能为空', trigger: ['blur', 'change'] }], borrowDeadline: [{ required: true, type: 'date', validator: requireOverTimeValid, trigger: 'change' }], equipmentPerformanceStatus: [{ required: true, message: '设备性能状态不能为空', trigger: ['blur', 'change'] }], borrowReason: [{ required: true, message: '借用原因不能为空', trigger: ['blur', 'change'] }], traceSituation: [{ required: true, message: '溯源情况不能为空', trigger: ['blur', 'change'] }], equipmentCompany: [{ required: true, message: '设备所属单位不能为空', trigger: ['blur', 'change'] }], receiveDate: [{ required: true, message: '接收日期不能为空', trigger: ['blur', 'change'] }], receiver: [{ required: true, message: '接收人不能为空', trigger: ['blur', 'change'] }], returnEquipmentPerformanceStatus: [{ required: true, message: '设备性能状态不能为空', trigger: ['blur', 'change'] }], returnDate: [{ required: true, message: '归还日期不能为空', trigger: ['blur', 'change'] }], returnUser: [{ required: true, message: '归还人不能为空', trigger: ['blur', 'change'] }], }) // ------------------------------------------字典---------------------------------------------- const labCodeList = ref<dictType[]>([]) // 实验室 const groupCodeList = ref<dictType[]>([]) // 部门 const userList = ref<{ [key: string]: string }[]>([]) // 用户列表 function getDict() { // 实验室 // getDictByCode('bizLabCode').then((response) => { getDictByCode('bizGroupCodeEquipment').then((response) => { labCodeList.value = response.data }) // 部门 getDictByCode('bizGroupCode').then((response) => { groupCodeList.value = response.data }) // 获取用户列表 getUserList({ offset: 1, limit: 999999 }).then((res: any) => { userList.value = res.data.rows }) } // ----------------------------------------------主附件信息---------------------------------------- const checkoutAttachmentList = ref([]) as any // 主附件表格选中 const checkoutReturnAttachmentList = ref([]) as any // 主附件表格选中 const attachmentList = ref<IAccessory[]>([]) // 主附件信息 const returnAttachmentList = ref<IAccessory[]>([]) // 主附件信息归还信息 const addAccessoryObj: IAccessory = { // 主附件信息对象 id: '', // 主键 name: '', // 名称 information: '', // 信息 location: '', // 位置 editable: true, } const accessoryColumns = [ // 主附件信息 { text: '名称', value: 'name', required: true }, { text: '信息', value: 'information', required: true }, { text: '位置', value: 'location', required: true }, ] /** * 点击增加行 * @param val 操作的表格类型 */ const addRow = (type: 'normal' | 'return') => { if (type === 'normal') { if (useCheckList(attachmentList.value, accessoryColumns, '主附件信息')) { useSetAllRowReadable(attachmentList.value) attachmentList.value.push({ ...addAccessoryObj }) } } else if (type === 'return') { if (useCheckList(returnAttachmentList.value, accessoryColumns, '主附件信息')) { useSetAllRowReadable(returnAttachmentList.value) returnAttachmentList.value.push({ ...addAccessoryObj }) } } } /** * 点击删除行 * @param val 操作的表格类型 tech技术指标、accessory主附件信息、inspect核查点 */ const deleteRow = (type: 'normal' | 'return') => { if (checkoutAttachmentList.value.length <= 0) { ElMessage({ message: '请选中要删除的行', type: 'warning', }) return false } if (type === 'normal') { // 主附件信息 attachmentList.value = attachmentList.value.filter((item: IAccessory) => { return !checkoutAttachmentList.value.includes(item) }) } else if (type === 'return') { returnAttachmentList.value = returnAttachmentList.value.filter((item: IAccessory) => { return !checkoutReturnAttachmentList.value.includes(item) }) } } // 主附件信息选中 const handleAccessorySelectionChange = (e: any, type: 'normal' | 'return') => { if (type === 'normal') { checkoutAttachmentList.value = e } else { checkoutReturnAttachmentList.value = e } } // 双击主附件信息 const rowDblclickAccessory = (row: IAccessory) => { // if (props.pageType !== 'detail') { // useDoubleClickTableRow(row, attachmentList.value) // } } // ------------------------------------------------选择设备-------------------------------------------- const selectEquipmentDialogRef = ref() // 选择设备组件ref // 点击选择 const selectEquipment = () => { selectEquipmentDialogRef.value.initDialog() } // 确定选择设备 const confirmSelectEquipment = (list: any = []) => { if (list && list.length) { form.value.equipmentName = list[0].equipmentName // 设备名称 form.value.model = list[0].model // 型号 form.value.manufacturer = list[0].manufacturer // 生产厂家 form.value.manufactureNo = list[0].manufactureNo // 出厂编号 } } // -----------------------------------------------保存---------------------------------------------- // 封装验证函数 const validateForm = (formRef: any) => { return new Promise((resolve, reject) => { formRef.validate((valid: Boolean) => { if (valid) { resolve(valid) } else { reject(new Error('验证不通过')) } }) }) } /** * 点击保存 * @param formEl 基本信息表单ref */ const saveForm = async () => { if (props.operateType === '归还') { if (!useCheckList(returnAttachmentList.value, accessoryColumns, '主附件信息')) { return false } if (!returnAttachmentList.value.length) { ElMessage.warning('主附件信息不能为空') return false } const param = { ...returnForm.value, attachmentIdList: returnAttachmentList.value.map(item => item.id), id: infoId.value, } validateForm(returnRuleFormLendInfoRef.value).then(() => { ElMessageBox.confirm( '确认保存吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ).then(() => { saveReturnInfo(param).then(() => { ElMessage.success('归还信息保存成功') }) }) }) } else { if (!useCheckList(attachmentList.value, accessoryColumns, '主附件信息')) { return false } if (!attachmentList.value.length) { ElMessage.warning('主附件信息不能为空') return false } Promise.all([validateForm(ruleFormBasicInfoRef.value), validateForm(ruleFormBorrowInfoRef.value)]).then(() => { ElMessageBox.confirm( '确认保存吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ).then(() => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.8)', }) console.log('props.processId', props.processId) const params = { ...form.value, id: infoId.value, attachmentList: attachmentList.value.map((item) => { return { ...item, lendId: infoId.value, } }), processId: props.processId, } if (props.pageType === 'add') { // 新建 addResumeBorrowList(params).then((res) => { loading.close() form.value.registerNo = res.data.registerNo // 登记表编号 infoId.value = res.data.id // id emits('addSuccess', infoId.value) ElMessage.success('已保存') }).catch(() => { loading.close() }) } else if (props.pageType === 'edit') { // 编辑 console.log(props.approvalStatusName) if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') { updateResumeBorrowList(params).then((res) => { loading.close() emits('addSuccess', infoId.value) ElMessage.success('已保存') }).catch(() => { loading.close() }) } else { // '未通过' || '已取消' failUpdateResumeBorrowList(params).then((res) => { loading.close() emits('submitSuccess') fetchInfo() ElMessage.success('已保存') }).catch(() => { loading.close() }) } } }) }) } } // ----------------------------------------------提交-------------------------------------------- // 提交 /** * * @param processId 流程实例id * @param id */ const submitForm = (processId: string, id: string) => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) submit({ id, formId: SCHEDULE.EQUIPMENT_BORROW_APPROVAL }).then((res) => { ElMessage.success('已提交') emits('submitSuccess') loading.close() }) } // -----------------------------------------获取详情------------------------------------------ // 获取详情 function fetchInfo() { loading.value = true getInfo({ id: infoId.value }).then((res) => { loading.value = false form.value = res.data attachmentList.value = res.data.attachmentList // 设备列表 if (props.returnStatus === '未归还') { returnAttachmentList.value = res.data.returnAttachmentList // 归还主附件信息 } else { returnAttachmentList.value = res.data.attachmentList // 归还主附件信息 returnForm.value.receiveDate = res.data.receiveDate // 归还信息-接收日期 returnForm.value.receiver = res.data.receiver // 归还信息-接收人 returnForm.value.returnDate = res.data.returnDate // 归还信息-归还日期 returnForm.value.returnEquipmentPerformanceStatus = res.data.returnEquipmentPerformanceStatus // 归还信息-设备性能状态 returnForm.value.returnUser = res.data.returnUser // 归还信息-归还人 } }) } // ---------------------------------------------钩子---------------------------------------------- watch(() => props.id, (newValue) => { infoId.value = newValue! if (infoId.value) { fetchInfo() // 获取详情信息 } }, { immediate: true }) onMounted(() => { getDict() form.value.createUserId = user.id// 创建人id form.value.createUserName = user.name // 创建人名字 form.value.registerName = '设备借用登记表' // 记录表名称 form.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')// 创建时间 form.value.deptId = user.deptId // 借用部门id form.value.deptName = user.deptName // 借用部门 if (props.pageType !== 'add') { fetchInfo() // 获取详情信息 } else { // 新建 form.value.labCode = user.bizLabCode // 实验室 form.value.groupCode = user.groupNo // 部门名称 } }) defineExpose({ saveForm, submitForm, fetchInfo }) </script> <template> <div v-loading="loading"> <detail-block title=""> <el-form ref="ruleFormBasicInfoRef" :model="form" :label-width="120" label-position="right" :rules="rules" > <el-row :gutter="24"> <el-col :span="6"> <el-form-item label="文件编号:" prop="registerNo"> <el-input v-model="form.registerNo" disabled placeholder="系统自动生成" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="文件名称:" prop="registerName"> <el-input v-model="form.registerName" disabled :placeholder="pageType === 'detail' ? ' ' : '文件名称'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="创建人:"> <el-input v-model="form.createUserName" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="创建时间:" prop="createTime"> <el-date-picker v-model="form.createTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="pageType === 'detail' ? ' ' : '请选择创建时间'" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="实验室" prop="labCode"> <el-select v-model="form.labCode" :placeholder="pageType === 'detail' ? ' ' : '请选择实验室'" :disabled="pageType === 'detail' || props.operateType === '归还'" class="full-width-input" > <el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="部门" prop="groupCode"> <el-select v-model="form.groupCode" :placeholder="pageType === 'detail' ? ' ' : '请选择部门'" :disabled="pageType === 'detail' || props.operateType === '归还'" class="full-width-input" > <el-option v-for="item in groupCodeList" :key="item.id" :label="item.name" :value="item.value" /> </el-select> </el-form-item> </el-col> </el-row> </el-form> </detail-block> <detail-block title="" style="position: relative;"> <div style="color: red;font-size: 11px;position: absolute;top: 3px;left: 20px;"> ***注意:借外单位设备可填写,实验室相互借用可选择*** </div> <el-form ref="ruleFormBorrowInfoRef" :model="form" :label-width="120" label-position="right" :rules="rules" > <el-row :gutter="24"> <el-col :span="12"> <el-form-item label="设备名称:" prop="equipmentName"> <el-input v-model="form.equipmentName" :disabled="pageType === 'detail' || props.operateType === '归还'" :class="{ 'detail-input': pageType === 'detail' }" :placeholder="pageType === 'detail' ? '' : '请输入设备名称'" clearable > <template v-if="pageType !== 'detail'" #append> <el-button :disabled="pageType === 'detail'" @click="selectEquipment"> 选择 </el-button> </template> </el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="出厂编号:" prop="manufactureNo"> <el-input v-model.trim="form.manufactureNo" :placeholder="pageType === 'detail' ? '' : '请输入出厂编号'" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="规格型号" prop="model"> <el-input v-model.trim="form.model" placeholder="请输入规格型号" :disabled="pageType === 'detail' || props.operateType === '归还'" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="生产厂家:" prop="manufacturer"> <el-input v-model.trim="form.manufacturer" :placeholder="pageType === 'detail' ? '' : '请输入生产厂家'" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="设备所属单位:" prop="equipmentCompany"> <el-input v-model.trim="form.equipmentCompany" :placeholder="pageType === 'detail' ? '' : '请输入设备所属单位'" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="借用部门:" prop="deptName"> <el-input v-model.trim="form.deptName" :placeholder="pageType === 'detail' ? '' : '借用单位'" disabled /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="借用日期:" prop="borrowDate"> <el-date-picker v-model="form.borrowDate" type="date" format="YYYY-MM-DD" :placeholder="pageType === 'detail' ? ' ' : '请选择借用日期'" value-format="YYYY-MM-DD" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="借用期限:" prop="borrowDeadline"> <el-date-picker v-model="form.borrowDeadline" type="date" format="YYYY-MM-DD" :placeholder="pageType === 'detail' ? ' ' : '请选择借用期限'" value-format="YYYY-MM-DD" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24"> <el-col :span="12"> <el-form-item label="借用原因:" prop="borrowReason"> <el-input v-model="form.borrowReason" class="full-width-input" :placeholder="pageType === 'detail' ? ' ' : '请输入借用原因'" autosize type="textarea" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24"> <el-col :span="12"> <el-form-item label="设备性能状态:" prop="equipmentPerformanceStatus"> <el-input v-model="form.equipmentPerformanceStatus" class="full-width-input" :placeholder="pageType === 'detail' ? ' ' : '请选择设备性能状态'" autosize type="textarea" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24"> <el-col :span="12"> <el-form-item label="溯源情况:" prop="traceSituation"> <el-input v-model="form.traceSituation" class="full-width-input" :placeholder="pageType === 'detail' ? ' ' : '请输入溯源情况'" autosize type="textarea" :disabled="pageType === 'detail' || props.operateType === '归还'" /> </el-form-item> </el-col> </el-row> </el-form> </detail-block> <detail-block title="主附件信息"> <template v-if="pageType !== 'detail' && props.operateType !== '归还'" #btns> <el-button type="primary" @click="addRow('normal')"> 增加行 </el-button> <el-button type="info" @click="deleteRow('normal')"> 删除行 </el-button> </template> <el-table ref="accessoryRef" :data="attachmentList" border style="width: 100%;" @selection-change="(e: any) => handleAccessorySelectionChange(e, 'normal')" @row-dblclick="rowDblclickAccessory" > <el-table-column v-if="pageType !== 'detail' && props.operateType !== '归还'" type="selection" width="38" /> <el-table-column align="center" label="序号" width="80" type="index" /> <el-table-column v-for="item in accessoryColumns" :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"> <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span> <el-input v-if="pageType !== 'detail' && props.operateType !== '归还' && props.returnStatus !== '已归还'" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" /> </template> </el-table-column> </el-table> </detail-block> <detail-block v-if="props.operateType === '归还' || props.returnStatus === '已归还' || returnForm.returnDate" title="归还信息"> <el-form ref="returnRuleFormLendInfoRef" :model="returnForm" :label-width="120" label-position="right" :rules="rules" > <el-row :gutter="24"> <el-col :span="6"> <el-form-item label="归还日期:" prop="returnDate"> <el-date-picker v-model="returnForm.returnDate" type="date" format="YYYY-MM-DD" :placeholder="pageType === 'detail' ? ' ' : '请选择归还日期'" value-format="YYYY-MM-DD" :disabled="pageType === 'detail'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="归还人:" prop="returnUser"> <el-input v-model.trim="returnForm.returnUser" :placeholder="pageType === 'detail' ? '' : '请输入归还人'" :disabled="pageType === 'detail'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="接收日期:" prop="receiveDate"> <el-date-picker v-model="returnForm.receiveDate" type="date" format="YYYY-MM-DD" :placeholder="pageType === 'detail' ? ' ' : '请选择接收日期'" value-format="YYYY-MM-DD" :disabled="pageType === 'detail'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="接收人:" prop="receiver"> <el-input v-model.trim="returnForm.receiver" :placeholder="pageType === 'detail' ? '' : '请输入接收人'" :disabled="pageType === 'detail'" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24"> <el-col :span="12"> <el-form-item label="设备性能状态:" prop="returnEquipmentPerformanceStatus"> <el-input v-model="returnForm.returnEquipmentPerformanceStatus" class="full-width-input" :placeholder="pageType === 'detail' ? ' ' : '请输入设备性能状态'" autosize type="textarea" :disabled="pageType === 'detail'" /> </el-form-item> </el-col> </el-row> </el-form> </detail-block> <detail-block v-if="props.operateType === '归还' || props.returnStatus === '已归还'" title="主附件信息"> <el-table ref="accessoryRef" :data="returnAttachmentList" border style="width: 100%;" @selection-change="(e: any) => handleAccessorySelectionChange(e, 'return')" @row-dblclick="rowDblclickAccessory" > <el-table-column align="center" label="序号" width="80" type="index" /> <el-table-column v-for="item in accessoryColumns" :key="item.value" :prop="item.value" :label="item.text" align="center" /> </el-table> </detail-block> </div> <!-- 选择设备台账 --> <select-equipment-dialog ref="selectEquipmentDialogRef" :is-multi="true" @confirm="confirmSelectEquipment" /> </template>