<!-- 标准装置台账信息 基本信息 --> <script name="StandardBookBasic" lang="ts" setup> import type { Ref } from 'vue' import dayjs from 'dayjs' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { FormRules } from 'element-plus' import type { IAccessory, IForm, IInspect, Itech } from '../book-interface' import selectUnpackRecordDialog from '../dialog/selectUnpackRecordDialog.vue' import { useCheckList } from '@/commonMethods/useCheckList' import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable' import { getDictByCode } from '@/api/system/dict' import selectTechFiles from '@/views/equipement/standard/book/dialog/selectTechFiles.vue' import countries from '@/components/AddressSelect/country-code.json' import type { deptType, dictType } from '@/global' import { UploadFile } from '@/api/file' import { getDeptTreeList } from '@/api/system/dept' import showPhoto from '@/components/showPhoto/index.vue' import { toTreeList } from '@/utils/structure' import useUserStore from '@/store/modules/user' import { SCHEDULE } from '@/utils/scheduleDict' import { getStaffList } from '@/api/resource/register' import selectSysDocDialog from '@/views/equipement/standard/book/dialog/selectSysDocDialog.vue' import selectStaffPerson from '@/views/equipement/standard/book/dialog/selectPerson.vue' import FilterSupplier from '@/views/resource/common/filterSupplier.vue' import { addEquipment, failUpdateEquipment, getDeptIdByLabAndGroup, getInfo, hasChanged, submit, updateEquipment } from '@/api/equipment/info/book' const props = defineProps({ pageType: { // 页面类型 add新建 edit编辑 detail详情 type: String, require: true, default: 'detail', }, id: { type: String, require: true, }, approvalStatusName: { // 审批状态名称 type: String, require: true, }, dataFromUnpack: { // 从开箱验收带过来的设备信息 type: Object, default: () => {}, }, }) const emits = defineEmits(['submitSuccess', 'addSuccess', 'saveSuccess', 'giveEquipmentNo']) const user = useUserStore() // 用户信息 const $route = useRoute() const changeFormItem = ref<string[]>([]) // 有变化的字段标红 const fromPage = ref('') // 来源页面 const countryList = ref(countries) // 国家列表 const $router = useRouter() // 路由实例 const infoId = ref('') // id const detailOriginData = ref() as any const meterStandardList = ref([]) as any // 所属的测量标准 const form: Ref<IForm> = ref({ // 基本信息表单 approvalType: '', // 审批类型 createUserId: '', // 创建人id createUserName: '', // 创建人名称 createTime: '', // 创建时间 equipmentNo: '', // 统一编号 equipmentName: '', // 设备名称 unpackRecordId: '', // 开箱记录id unpackRecordName: '', // 开箱记录名称 purchaseDate: '', // 购进日期 productCountry: '', // 生产国家 manufacturer: '', // 生产厂家 manufactureNo: '', // 出厂编号 produceDate: '', // 生产日期 unitPrice: 0, // 设备单价(万元) usedYears: 10, // 使用年限 model: '', // 规格型号 qualityStatus: '', // 质量状况 usageStatus: '', // 使用状态 level: '', // 重要等级 type: '', // 设备类型 standardType: '', // 标准类型 deptId: '', // 部门id deptName: '', // 所属部门 labCodeName: '', // 实验室 labCode: '', // 实验室 directorId: '', // 负责人id directorName: '', // 负责人 category: '', // 设备分类 measureCycle: 12, // 检定周期 location: '', // 位置 remark: '', // 备注 instructionsFile: '', // 说明书 fileList: [] as any, // 文件列表 traceCompany: '', // 溯源单位 traceDate: '', // 溯源日期 measureValidDate: '', // 检定有效期 meterIdentify: '', // 计量标识 meterStandardName: '', // 所属测量标准 technicalFile: '', // 所依据的技术文件 technicalFileList: [] as any, // 核查规范/确认方法文件列表 label: '', // 标签 groupCode: '', // 部门 supplierId: '', // 供方id supplierName: '', // 供方名字 }) const rules = reactive<FormRules>({ // 表单验证规则 equipmentName: [{ required: true, message: '设备名称不能为空', trigger: ['blur', 'change'] }], unpackRecordName: [{ required: true, message: '开箱记录不能为空', trigger: ['blur', 'change'] }], purchaseDate: [{ required: true, message: '购进日期不能为空', trigger: ['blur', 'change'] }], productCountry: [{ required: true, message: '生产国家不能为空', trigger: ['blur', 'change'] }], manufacturer: [{ required: true, message: '生产厂家不能为空', trigger: ['blur', 'change'] }], manufactureNo: [{ required: true, message: '出厂编号不能为空', trigger: ['blur', 'change'] }], produceDate: [{ required: true, message: '生产日期不能为空', trigger: ['blur', 'change'] }], unitPrice: [{ required: true, message: '设备单价不能为空', trigger: ['blur', 'change'] }], model: [{ required: true, message: '规格型号不能为空', trigger: ['blur', 'change'] }], qualityStatus: [{ required: true, message: '质量状况不能为空', trigger: ['blur', 'change'] }], usageStatus: [{ required: true, message: '使用状态不能为空', trigger: ['blur', 'change'] }], level: [{ required: true, message: '重要等级不能为空', trigger: ['blur', 'change'] }], type: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }], standardType: [{ required: true, message: '标准类型不能为空', trigger: ['blur', 'change'] }], // deptId: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }], groupCode: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }], labCode: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }], labCodeName: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }], directorId: [{ required: true, message: '负责人不能为空', trigger: ['blur', 'change'] }], category: [{ required: true, message: '设备分类不能为空', trigger: ['blur', 'change'] }], measureCycle: [{ required: true, message: '检定周期不能为空', trigger: ['blur', 'change'] }], traceCompany: [{ required: true, message: '溯源单位不能为空', trigger: ['blur', 'change'] }], traceDate: [{ required: true, message: '溯源日期不能为空', trigger: ['blur', 'change'] }], measureValidDate: [{ required: true, message: '检定有效期不能为空', trigger: ['blur', 'change'] }], meterIdentify: [{ required: true, message: '计量标识不能为空', trigger: ['blur', 'change'] }], usedYears: [{ required: true, message: '使用年限不能为空', trigger: ['blur', 'change'] }], }) // -------------------------------------------文件上传-------------------------------------- const fileRef = ref() // 文件上传input /** * 删除附件 * @param index 索引 */ const delFile = (index: number) => { form.value.fileList.splice(index, 1) form.value.instructionsFile = form.value.fileList.map((item: any) => { return item.instructionsFile }) } const onFileChange = (event: any) => { // 原生上传 const files = event.target.files // 上传的文件列表 if (event.target.files[0].type !== 'application/pdf') { ElMessage.warning('请上传pdf文件') return false } if (files.length !== 0) { // 创建formdata对象 const fd = new FormData() for (var i = 0; i < files.length; i++) { fd.append('multipartFile', files[i]) } const loading = ElLoading.service({ lock: true, background: 'rgba(255, 255, 255, 0.8)', }) UploadFile(fd).then((res) => { if (res.code === 200) { res.data.forEach((item: string) => { form.value.fileList.push({ instructionsFile: item, }) }) form.value.instructionsFile = form.value.fileList.map((item: any) => { return item.instructionsFile }) // form.value.instructionsFile = res.data[0] ElMessage.success('文件上传成功') loading.close() } else { loading.close() ElMessage.error(res.message) } }) } } const upload = () => { fileRef.value.click() } // -----------------------------------------开箱记录----------------------------------------------------------- const selectUnpackRecordDialogRef = ref() // 开箱记录组件ref // 点击选择开箱记录 const selectUnpackRecordList = () => { selectUnpackRecordDialogRef.value.initDialog() } // 选择好开箱记录 const confirmSelectUnpackRecord = (val: any) => { form.value.unpackRecordId = val[0].id // 开箱验收id form.value.unpackRecordName = val[0].logName // 开箱验收名称 form.value.equipmentName = val[0].equipmentName // 设备名称 form.value.model = val[0].model // 型号 form.value.manufactureNo = val[0].manufactureNo // 出厂编号 form.value.manufacturer = val[0].manufacturer // 生产厂家 } // 详情时点击开箱记录链接 const handleClickUnpackRecordLink = () => { $router.push({ path: `/unpackDoc/detail/${form.value.unpackRecordId}`, query: { approvalStatusName: '全部', // 审批状态名称 }, }) } // --------------------------------------打印------------------------------------------------------------------- // 点击打印计量标识 const printMeterIdentify = () => { ElMessage.info('此按钮的需求已取消') } // -----------------------------------------技术指标\主附件信息------------------------------------------- const technicalTargetList = ref<Itech[]>([]) // 技术指标列表 const techRef = ref() // 技术指标表格ref const checkoutTechList = ref([]) as any // 技术指标表格选中 const checkoutAttachmentList = ref([]) as any // 主附件表格选中 const checkoutInspectList = ref([]) as any // 核查点表格选中 const addTechObj: Itech = { // 技术指标对象 id: '', equipmentNo: '', // 设备编号 measureParam: '', // 检定参数名称 measureRange: '', // 测量范围 uncertainty: '', // 不确定度或允许误差极限或准确度等级 indicatorType: '0', // 指标类型 editable: true, } const technicalIndexColumns = [ // 技术指标表头 { text: '检定参数名称', value: 'measureParam', required: true }, { text: '测量范围', value: 'measureRange', required: true }, { text: '不确定度或允许误差极限或准确度等级', value: 'uncertainty', required: true }, { text: '指标类型', value: 'indicatorType', required: true }, ] const accessoryRef = ref() // 主附件信息表格ref const attachmentList = ref<IAccessory[]>([]) // 主附件信息 const addAccessoryObj: IAccessory = { // 主附件信息对象 id: '', // 主键 equipmentNo: '', // 设备编号 name: '', // 名称 information: '', // 数量 location: '', // 位置 // editable: true, } const accessoryColumns = [ // 主附件信息 { text: '名称', value: 'name', required: true }, { text: '数量', value: 'information', required: true }, { text: '位置', value: 'location', required: true }, ] /** * 点击增加行 * @param val 操作的表格类型 tech技术指标、accessory主附件信息、inspect核查点 */ const addRow = (val: string) => { if (val === 'tech') { // 技术指标 if (useCheckList(technicalTargetList.value, technicalIndexColumns, '技术指标')) { useSetAllRowReadable(technicalTargetList.value) technicalTargetList.value.push({ ...addTechObj }) } } if (val === 'accessory') { // 主附件信息 if (useCheckList(attachmentList.value, accessoryColumns, '主附件信息')) { useSetAllRowReadable(attachmentList.value) attachmentList.value.push({ ...addAccessoryObj }) } } } /** * 点击删除行 * @param val 操作的表格类型 tech技术指标、accessory主附件信息、inspect核查点 */ const deleteRow = (val: string) => { if ((val === 'tech' && technicalTargetList.value.length <= 0) || (val === 'accessory' && checkoutAttachmentList.value.length <= 0) || (val === 'inspect' && checkoutInspectList.value.length <= 0)) { ElMessage({ message: '请选中要删除的行', type: 'warning', }) return false } if (val === 'tech') { // 技术指标 technicalTargetList.value = technicalTargetList.value.filter((item: Itech) => { return !checkoutTechList.value.includes(item) }) } if (val === 'accessory') { // 主附件信息 attachmentList.value = attachmentList.value.filter((item: IAccessory) => { return !checkoutAttachmentList.value.includes(item) }) } } // 技术指标选中 const handleTechSelectionChange = (e: any) => { checkoutTechList.value = e } // 主附件信息选中 const handleAccessorySelectionChange = (e: any) => { checkoutAttachmentList.value = e } // 双击主附件信息 const rowDblclickAccessory = (row: IAccessory) => { if (props.pageType !== 'detail') { useDoubleClickTableRow(row, attachmentList.value) } } // 双击技术指标 const rowDblclickTech = (row: Itech) => { if (props.pageType !== 'detail') { useDoubleClickTableRow(row, technicalTargetList.value) } } // 点击所属依据标准 const handleClickMeterStandardLink = (value: any) => { // 跳转标准装置详情页 $router.push({ path: `/standard/detail/${value.id}`, query: { approvalStatusName: '全部', // 审批状态名称 standardNo: value.standardNo, // 标准装置编号 standardName: value.standardName, // 标准装置名称 }, }) } // --------------------------------------------选择核查规范/确认方法--资源管理-体系文件------------------------------------ const techFileRef = ref() // 核查规范/确认方法组件ref // 点击核查规范/确认方法技术文件 const selectTechFile = () => { techFileRef.value.initDialog(true) } const solveTechnicalFileList = () => { if (form.value.technicalFileList && form.value.technicalFileList.length) { form.value.technicalFileList = form.value.technicalFileList.map((item: string | Object) => { if (typeof item === 'string') { item = { technicalFile: item } return item } else { return item } }) } } // 选好技术文件 const confirmSelectTechFile = (val: any) => { // form.value.technicalFile = val[0].file console.log('技术文件技术文件', form.value.technicalFileList) solveTechnicalFileList() val.forEach((item: any) => { const index = form.value.technicalFileList.findIndex((e: any) => e.technicalFile === item.file) if (index === -1) { form.value.technicalFileList.push({ technicalFile: item.file, }) } else { ElMessage.warning(`${item.file}已添加过`) } }) form.value.technicalFile = form.value.technicalFileList.map((item: any) => { return item.technicalFile }) } /** * 删除附件 * @param index 索引 */ const delTechnicalFile = (index: number) => { console.log('删除', index) console.log(form.value.technicalFileList) solveTechnicalFileList() if (form.value.technicalFileList && form.value.technicalFileList.length) { form.value.technicalFileList.splice(index, 1) form.value.technicalFile = form.value.technicalFileList.map((item: any) => { return item.technicalFile }) } } // 清空 const clear = () => { form.value.technicalFileList = [] form.value.technicalFile = [] } // --------------------------------------------选择合格供方------------------------------------ const filterSupplierDialogRef = ref() // 合格供方组件ref // 点击选择设备供方 const handleClickSelectFilterSupplier = () => { filterSupplierDialogRef.value.showOrHideFilterDialog(true) } // 选好合格供方 const confirmSelectFilterSupplier = (list: any) => { if (!list.length) { return } form.value.supplierId = list[0].id // 供方id form.value.supplierName = list[0].supplierName // 供方名字 } // --------------------------------------------选择负责人(计量人员)------------------------------------ const selectStaffPersonRef = ref() // 点击选择负责人 const handleClickSelectStaff = () => { selectStaffPersonRef.value.initDialog() } // 选择计量人员 const confirmSelectStaff = (list: any) => { if (!list.length) { return } form.value.directorId = list[0].id // 负责人(计量人员)id form.value.directorName = list[0].staffName // 负责人(计量人员)名字 } // ------------------------------------------字典---------------------------------------------- const meterIdentifyDict = ref<dictType[]>([]) // 计量标识 const usageStatusList = ref<dictType[]>([]) // 使用状态 const levelList = ref<dictType[]>([]) // 重要等级 const typeList = ref<dictType[]>([]) // 设备类型 const standardTypeList = ref<dictType[]>([]) // 标准类型 const userList = ref<{ [key: string]: string }[]>([]) // 用户列表 const categoryList = ref<dictType[]>([]) // 设备分类 const approveTypeList = ref<dictType[]>([]) // 审批类型 const approveTypeMap = ref({}) as any // 审批类型{1: 新建} const useDeptList = ref<deptType[]>([]) // 所属部门列表 const useDeptDict = ref([]) as any // 所属部门字典 const labNameList = ref<deptType[]>([]) // 实验室列表 const labNameDict = ref([]) as any // 实验室字典 /** * 获取字典 */ async function getDict() { // 实验室 const responseLab = await getDictByCode('bizGroupCodeEquipment') labNameList.value = responseLab.data labNameList.value.forEach((item) => { labNameDict.value[item.value] = item.name }) // 部门 const responseDept = await getDictByCode('bizGroupCode') useDeptList.value = responseDept.data responseDept.data.forEach((item: any) => { useDeptDict.value[item.value] = item.name }) // 计量标识 getDictByCode('bizMeterIdentify').then((response) => { meterIdentifyDict.value = response.data }) // 使用状态 getDictByCode('bizUsageStatus').then((response) => { usageStatusList.value = response.data }) // 重要等级 getDictByCode('bizEquipmentLevel').then((response) => { levelList.value = response.data }) // 设备类型 getDictByCode('bizEquipmentType').then((response) => { typeList.value = response.data }) // 标准类型 getDictByCode('bizStandardType').then((response) => { standardTypeList.value = response.data }) // 获取用户列表 getStaffList({ offset: 1, limit: 999999 }).then((res: any) => { userList.value = res.data.rows }) // 设备分类 getDictByCode('bizEquipmentCategory').then((response) => { categoryList.value = response.data }) // 审批类型 getDictByCode('approvalType').then((response) => { response.data.forEach((item: any) => { approveTypeMap.value[`${item.value}`] = item.name }) approveTypeList.value = response.data }) } // ----------------------------------------------- 保存--------------------------------------- const ruleFormRef = ref() // 基本信息表单ref const sourceFormRef = ref()// 溯源表单ref /** * 点击保存 * @param ruleFormRef 基本信息表单ref * @param sourceFormRef 溯源表单ref */ function saveForm() { if (!useCheckList(technicalTargetList.value, technicalIndexColumns, '技术指标')) { return false } if (!technicalTargetList.value.length) { ElMessage.warning('技术指标不能为空') return false } if (!useCheckList(attachmentList.value, accessoryColumns, '主附件信息')) { return false } if (!attachmentList.value.length) { ElMessage.warning('主附件信息不能为空') return false } ruleFormRef.value.validate((valid: boolean) => { if (valid) { // 基本信息表单通过校验 sourceFormRef.value.validate((validIn: boolean) => { if (validIn) { // 溯源表单信息通过校验 ElMessageBox.confirm( '确认保存吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ).then(() => { const params = { attachmentList: attachmentList.value.map((item) => { return { ...item, equipmentNo: form.value.equipmentNo } }), // 主附件信息 technicalTargetList: technicalTargetList.value.map((item) => { return { ...item, equipmentNo: form.value.equipmentNo } }), // 技术指标 equipmentInfoApproval: { ...form.value, id: form.value.id, measureCycle: `${form.value.measureCycle}`, technicalFile: Array.isArray(form.value.technicalFile) ? form.value.technicalFile?.join(',') : form.value.technicalFile, // 核查规范/确认方法 instructionsFile: Array.isArray(form.value.instructionsFile) ? form.value.instructionsFile?.join(',') : form.value.instructionsFile, // 说明书 traceDate: dayjs(form.value.traceDate).format('YYYY-MM-DD'), measureValidDate: dayjs(form.value.measureValidDate).format('YYYY-MM-DD'), }, } detailOriginData.value = params const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) if (props.pageType === 'add') { // 新建 addEquipment(params).then((res) => { loading.close() form.value.equipmentNo = res.data.equipmentNo // 设备编号 infoId.value = res.data.id // id emits('addSuccess', form.value.equipmentNo, infoId.value) ElMessage.success('已保存') }).catch(() => { loading.close() }) } else if (props.pageType === 'edit') { // 编辑 switch (props.approvalStatusName) { case '草稿箱': updateEquipment(params).then((res) => { loading.close() ElMessage.success('已保存') emits('saveSuccess') useSetAllRowReadable(attachmentList.value) useSetAllRowReadable(technicalTargetList.value) // 三个表格退出编辑模式 }).catch(() => { loading.close() }) break case '全部': // 全部的编辑-保存相当于新建一个草稿 params.equipmentInfoApproval.id = '' params.equipmentInfoApproval.approvalType = '2' // 审批类型 addEquipment(params).then((res) => { loading.close() form.value.equipmentNo = res.data.equipmentNo // 设备编号 infoId.value = res.data.id // id emits('addSuccess', form.value.equipmentNo, infoId.value) ElMessage.success('已保存') }).catch(() => { loading.close() }) break default: // '未通过' || '已取消' failUpdateEquipment(params).then((res) => { loading.close() ElMessage.success('已保存') emits('submitSuccess', form.value.equipmentNo, infoId.value) useSetAllRowReadable(attachmentList.value) useSetAllRowReadable(technicalTargetList.value) // 三个表格退出编辑模式 }).catch(() => { loading.close() }) break } } }) } }) } }) } // -------------------------------------------获取详情信息---------------------------------------- /** * 获取详情 */ function fetchInfo() { const loading = ElLoading.service({ lock: true, background: 'rgba(255, 255, 255, 0.8)', }) getInfo({ id: infoId.value!, type: props.approvalStatusName === '全部' ? '1' : '0' }).then((res) => { attachmentList.value = res.data.attachmentList // 主附件信息 technicalTargetList.value = res.data.technicalTargetList // 技术指标 form.value = res.data.equipmentInfoApproval form.value.approvalType = `${res.data.equipmentInfoApproval.approvalType}` // 审批类型 form.value.purchaseDate = dayjs(res.data.equipmentInfoApproval.purchaseDate).format('YYYY-MM-DD') // 购进日期 form.value.produceDate = dayjs(res.data.equipmentInfoApproval.produceDate).format('YYYY-MM-DD') form.value.technicalFile = res.data.equipmentInfoApproval.technicalFile ? res.data.equipmentInfoApproval.technicalFile.split(',') : res.data.equipmentInfoApproval.technicalFile // 核查规范/确认方法 form.value.technicalFileList = form.value.technicalFile || [] // 核查规范/确认方法 form.value.instructionsFile = res.data.equipmentInfoApproval.instructionsFile.split(',') // 说明书 form.value.traceDate = dayjs(res.data.equipmentInfoApproval.traceDate).format('YYYY-MM-DD') form.value.measureValidDate = dayjs(res.data.equipmentInfoApproval.measureValidDate).format('YYYY-MM-DD') meterStandardList.value = res.data.standardInfoList.map((item: { standardName: string;standardNo: string;id: string }) => { return { standardName: item.standardName, standardNo: item.standardNo, id: item.id, } }) emits('giveEquipmentNo', res.data.equipmentInfoApproval.equipmentNo) checkHasChanged() // 表格是灰色的数据,备注改为溯源中 if (`${$route.query.colorMark}` === '3') { form.value.remark = '溯源中' } loading.close() }).catch(() => { loading.close() }) } // ----------------------------------------------提交-------------------------------------------- // 提交 /** * * @param processId 流程实例id * @param approvalType // 审批类型 1新建、2编辑、3删除 * @param changeFlag // 基本信息是否变化 1、信息没变化、0信息有变化 */ const handleSubmit = (processId: string, approvalType: string, changeFlag?: string) => { const loading = ElLoading.service({ lock: true, background: 'rgba(255, 255, 255, 0.8)', }) submit({ id: infoId.value!, formId: SCHEDULE.EQUIPMENT_BOOK_APPROVAL, processId, approvalType, changeFlag }).then((res) => { if (props.approvalStatusName === '草稿箱' && changeFlag === '1') { // 已经保存到草稿箱了 infoId.value = res.data.id || infoId.value // id } if (`${approvalType}` === '2' && `${changeFlag}` === '1') { ElMessage.success('无基本信息变更,无需审批,更新成功') } else { ElMessage.success('已提交') } emits('submitSuccess', form.value.equipmentNo, infoId.value) loading.close() }) } const submitForm = (processId = '') => { if (infoId.value) { // 未通过编辑、已取消编辑、新建正常走审批流程 if (props.approvalStatusName === '未通过' || props.approvalStatusName === '已取消') { // 未通过、已取消直接进流程,所以不需要查看基本信息有没有变化 handleSubmit(processId, '') } if (props.approvalStatusName === '全部' || props.approvalStatusName === '草稿箱') { // 草稿箱有两种数据:1. 新建的数据、2. 来自全部里面编辑保存的数据 // 第一种情况不需要比较信息是否变化,第二种需要比较 if (form.value.approvalType === '1' && props.approvalStatusName === '草稿箱') { // 草稿箱新建 handleSubmit(processId, '') } else { const loading = ElLoading.service({ lock: true, background: 'rgba(255, 255, 255, 0.8)', }) hasChanged(detailOriginData.value).then((res) => { console.log('信息有变化吗?', res.data) if (res.data && Array.isArray(res.data) && res.data.length) { // 信息有变化吗? changeFormItem.value = res.data handleSubmit(processId, '2', '0') // 信息有变化正常走审批流程 } else { // 信息没变化 handleSubmit(processId, '2', '1') } loading.close() }).catch(() => loading.close()) } } } else { ElMessage.warning('请先保存') } } // ---------------------------------------------钩子---------------------------------------------- // 监听购进日期计算设备使用年限 // watch(() => form.value.purchaseDate, (newValue) => { // form.value.usedYears = dayjs().diff(newValue, 'year') // }) // 实验室选中变化--给labName赋值 const changeLabName = (val: string) => { const index = labNameList.value.findIndex(item => item.value === val) if (index !== -1) { form.value.labCodeName = labNameList.value[index].name } } // 部门选中变化 const changeGroupCode = (groupCode: any) => { console.log('bizLabCode', user.bizLabCode) console.log('groupNo', user.groupNo) console.log('注意:此用户没有实验室或者部门') const index = useDeptList.value.findIndex(item => item.value === groupCode) // if(index !== -1) { // form.value.groupCodeName = useDeptList.value[index].name // } if (index !== -1 && `${user.bizLabCode}` !== '' && `${groupCode}` !== '') { // 通过实验室部门获取部门id、并赋值给deptId fetchDeptIdByLabAndGroup(user.bizLabCode, groupCode) } } // 根据实验室代码和部门获取deptId function fetchDeptIdByLabAndGroup(labCode: string, groupNo: string) { getDeptIdByLabAndGroup({ labCode, groupNo }).then((res) => { form.value.deptId = res.data.deptId }) } // 设备类型变化 const changeType = (val: string) => { // 设备类型处,如果选择”非标准设备“,标准类型固定为”其他“ if (val !== '1') { form.value.standardType = '4' } } // 检查信息变化去标红字段 function checkHasChanged() { const params = { attachmentList: attachmentList.value.map((item) => { return { ...item, equipmentNo: form.value.equipmentNo } }), // 主附件信息 technicalTargetList: technicalTargetList.value.map((item) => { return { ...item, equipmentNo: form.value.equipmentNo } }), // 技术指标 equipmentInfoApproval: { ...form.value, id: form.value.id, measureCycle: `${form.value.measureCycle}`, technicalFile: Array.isArray(form.value.technicalFile) ? form.value.technicalFile?.join(',') : form.value.technicalFile, // 核查规范/确认方法 instructionsFile: Array.isArray(form.value.instructionsFile) ? form.value.instructionsFile?.join(',') : form.value.instructionsFile, // 说明书 traceDate: dayjs(form.value.traceDate).format('YYYY-MM-DD'), measureValidDate: dayjs(form.value.measureValidDate).format('YYYY-MM-DD'), }, } hasChanged(params).then((res) => { changeFormItem.value = res.data }) } // 监听pageType处理审批类型 watch(() => props.pageType, (newValue) => { console.log('监听页面类型', newValue) form.value.approvalType = newValue === 'add' ? '1' : newValue === 'edit' ? '2' : '' }, { immediate: true }) watch(() => props.id, (newValue) => { infoId.value = newValue! }, { immediate: true }) onMounted(async () => { getDict().then(() => { 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() // 获取详情信息 } else { // 新建 const data = props.dataFromUnpack form.value.unpackRecordId = data.unpackRecordId // 开箱验收id form.value.unpackRecordName = data.unpackRecordName // 开箱验收名称 form.value.equipmentName = data.equipmentName // 设备名称 form.value.equipmentNo = data.equipmentNo // 设备编号 form.value.model = data.model // 型号 form.value.manufacturer = data.manufacturer // 生产厂家 form.value.manufactureNo = data.manufactureNo // 出厂编号 fromPage.value = data.fromPage form.value.labCode = user.bizLabCode // 实验室 form.value.labCodeName = labNameDict.value[form.value.labCode!] // 实验室名称 form.value.groupCode = user.groupNo // 部门名称 form.value.groupCodeName = useDeptDict.value[user.groupNo] // 部门名称 changeGroupCode(form.value.groupCode!) } }) // 获取字典 }) defineExpose({ saveForm, submitForm, fetchInfo }) </script> <template> <div class="equipment-book-basic"> <detail-block title=""> <el-form ref="ruleFormRef" :model="form" :label-width="120" label-position="right" :rules="rules" > <el-row v-if="props.approvalStatusName !== '全部' && props.approvalStatusName !== '草稿箱'" :gutter="24" class="marg"> <el-col :span="6"> <el-form-item label="审批类型:"> <el-select v-model.trim="form.approvalType" placeholder=" " clearable size="default" disabled class="full-width-input" > <el-option v-for="item in approveTypeList" :key="item.id" :label="item.name" :value="item.value" /> </el-select> </el-form-item> </el-col> <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="创建时间:" :class="changeFormItem.includes('createTime') ? 'changedLabel' : ''"> <el-date-picker v-model="form.createTime" type="datetime" 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="equipmentNo" :class="changeFormItem.includes('equipmentNo') ? 'changedLabel' : ''"> <el-input v-model="form.equipmentNo" disabled placeholder="系统自动生成" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="设备名称:" prop="equipmentName" :class="changeFormItem.includes('equipmentName') ? 'changedLabel' : ''"> <el-input v-model.trim="form.equipmentName" :placeholder="pageType === 'detail' ? '' : '请输入设备名称'" :disabled="pageType === 'detail' || fromPage === 'unpack'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="对应开箱记录:" :class="changeFormItem.includes('unpackRecordName') ? 'changedLabel' : ''"> <span v-if="pageType === 'detail' && form.unpackRecordName" class="link" @click="handleClickUnpackRecordLink">{{ form.unpackRecordName }}</span> <el-input v-else v-model.trim="form.unpackRecordName" :placeholder="pageType === 'detail' ? ' ' : '请选择开箱记录'" disabled class="full-width-input" clearable > <template v-if="pageType !== 'detail' && fromPage !== 'unpack'" #append> <el-button size="small" @click="selectUnpackRecordList" > 选择 </el-button> </template> </el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="购进日期:" prop="purchaseDate" :class="changeFormItem.includes('purchaseDate') ? 'changedLabel' : ''"> <el-date-picker v-model="form.purchaseDate" 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="productCountry" :class="changeFormItem.includes('productCountry') ? 'changedLabel' : ''"> <el-select v-model="form.productCountry" filterable :placeholder="pageType === 'detail' ? ' ' : '请选择生产国家'" :disabled="pageType === 'detail'" class="full-width-input" > <el-option v-for="country of countryList" :key="country.code" :label="country.CNName" :value="country.code" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="生产厂家:" prop="manufacturer" :class="changeFormItem.includes('manufacturer') ? 'changedLabel' : ''"> <el-input v-model.trim="form.manufacturer" :placeholder="pageType === 'detail' ? '' : '请输入生产厂家'" :class="{ 'detail-input': pageType === 'detail' }" :disabled="pageType === 'detail' || fromPage === 'unpack'" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="出厂编号:" prop="manufactureNo" :class="changeFormItem.includes('manufactureNo') ? 'changedLabel' : ''"> <el-input v-model.trim="form.manufactureNo" :placeholder="pageType === 'detail' ? '' : '请输入出厂编号'" :class="{ 'detail-input': pageType === 'detail' }" :disabled="pageType === 'detail' || fromPage === 'unpack'" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="生产日期:" prop="produceDate" :class="changeFormItem.includes('produceDate') ? 'changedLabel' : ''"> <el-date-picker v-model="form.produceDate" 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="singlePrice" :class="changeFormItem.includes('singlePrice') ? 'changedLabel' : ''"> <el-input-number v-model="form.unitPrice" :placeholder="pageType === 'detail' ? '' : '请输入设备单价'" :disabled="pageType === 'detail'" :precision="4" :step="0.1" :min="0" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="使用年限:" prop="usedYears" :class="changeFormItem.includes('usedYears') ? 'changedLabel' : ''"> <el-input-number v-model="form.usedYears" :placeholder="pageType === 'detail' ? '' : '请输入使用年限'" :disabled="pageType === 'detail'" :step="1" :min="0" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="规格型号" prop="model" :class="changeFormItem.includes('model') ? 'changedLabel' : ''"> <el-input v-model.trim="form.model" :placeholder="pageType === 'detail' ? '' : '请输入规格型号'" :disabled="pageType === 'detail' || fromPage === 'unpack'" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="质量状况" prop="qualityStatus" :class="changeFormItem.includes('qualityStatus') ? 'changedLabel' : ''"> <el-input v-model.trim="form.qualityStatus" :placeholder="pageType === 'detail' ? '' : '请输入质量状况'" :disabled="pageType === 'detail'" class="full-width-input" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="使用状态:" prop="usageStatus" :class="changeFormItem.includes('usageStatus') ? 'changedLabel' : ''"> <el-select v-model.trim="form.usageStatus" clearable :placeholder="pageType === 'detail' ? '' : '请选择使用状态'" size="default" :disabled="pageType === 'detail'" class="full-width-input" > <el-option v-for="item in usageStatusList" :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="level" :class="changeFormItem.includes('level') ? 'changedLabel' : ''"> <el-select v-model.trim="form.level" clearable :placeholder="pageType === 'detail' ? '' : '请选择重要等级'" size="default" :disabled="pageType === 'detail'" class="full-width-input" > <el-option v-for="item in levelList" :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="type" :class="changeFormItem.includes('type') ? 'changedLabel' : ''"> <el-select v-model.trim="form.type" clearable :placeholder="pageType === 'detail' ? '' : '请选择设备类型'" size="default" :disabled="pageType === 'detail'" class="full-width-input" @change="changeType" > <el-option v-for="item in typeList" :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="standardType" :class="changeFormItem.includes('standardType') ? 'changedLabel' : ''"> <el-select v-model.trim="form.standardType" clearable :placeholder="pageType === 'detail' ? '' : '请选择标准类型'" size="default" :disabled="pageType === 'detail' || form.type !== '1'" class="full-width-input" > <el-option v-for="item in standardTypeList" :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="labCode" :class="changeFormItem.includes('labCode') ? 'changedLabel' : ''"> <el-select v-model.trim="form.labCode" placeholder="请选择实验室" filterable :disabled="pageType === 'detail'" class="full-width-input" @change="changeLabName" > <el-option v-for="item in labNameList" :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" :class="changeFormItem.includes('groupCode') ? 'changedLabel' : ''"> <el-select v-model.trim="form.groupCode" placeholder="请选择部门" filterable :disabled="pageType === 'detail'" class="full-width-input" @change="changeGroupCode" > <el-option v-for="item in useDeptList" :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="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="category"> <el-select v-model.trim="form.category" clearable :placeholder="pageType === 'detail' ? '' : '请选择设备分类'" size="default" :disabled="pageType === 'detail'" class="full-width-input" > <el-option v-for="item in categoryList" :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="measureCycle" :class="changeFormItem.includes('measureCycle') ? 'changedLabel' : ''"> <el-input-number v-model="form.measureCycle" :placeholder="pageType === 'detail' ? '' : '请输入检定周期'" :disabled="pageType === 'detail'" class="full-width-input" :min="0" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="设备供方:" :class="changeFormItem.includes('supplierName') ? 'changedLabel' : ''"> <el-input v-model.trim="form.supplierName" :placeholder="pageType === 'detail' ? ' ' : '请选择设备供方'" disabled class="full-width-input" clearable > <template v-if="pageType !== 'detail'" #append> <el-button size="small" @click="handleClickSelectFilterSupplier" > 选择 </el-button> </template> </el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="24" class="marg"> <el-col :span="12"> <el-form-item label="位置信息:" :class="changeFormItem.includes('location') ? 'changedLabel' : ''"> <el-input v-model="form.location" type="textarea" autosize :placeholder="pageType === 'detail' ? '' : '请输入位置信息'" :disabled="pageType === 'detail'" :class="{ 'detail-input': pageType === 'detail' }" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24" class="marg"> <el-col :span="12"> <el-form-item label="备注:" :class="changeFormItem.includes('remark') ? 'changedLabel' : ''"> <el-input v-model="form.remark" type="textarea" autosize :placeholder="pageType === 'detail' ? '' : '请输入备注'" :disabled="pageType === 'detail'" :class="{ 'detail-input': pageType === 'detail' }" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24" class="marg"> <el-col :span="24"> <el-form-item label="说明书:" :class="changeFormItem.includes('instructionsFile') ? 'changedLabel' : ''"> <!-- <show-photo :minio-file-name="form.instructionsFile" width="100%" height="125px" /> <el-button v-if="pageType !== 'detail'" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.instructionsFile === '' ? '0px' : '20px' }" @click="upload"> {{ form.instructionsFile === '' ? '上传' : '更换附件' }} </el-button> <input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange"> --> <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-right': '20px' }" @click="upload"> {{ !form.instructionsFile.length ? '上传' : '上传' }} </el-button> <div v-for="(item, index) in form.instructionsFile" :key="index" style="display: flex;"> <show-photo :minio-file-name="item"> <span v-if="pageType !== 'detail' && item" class="photo-close" @click="delFile(index)">×</span> </show-photo> </div> <span v-if="pageType === 'detail' && !form.instructionsFile.length">无</span> <input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange"> </el-form-item> </el-col> </el-row> <el-row :gutter="24" class="marg"> <el-col :span="12"> <el-form-item label="标签绑定:" :class="changeFormItem.includes('label') ? 'changedLabel' : ''"> <el-input v-model="form.label" type="textarea" autosize :placeholder="pageType === 'detail' ? '' : '标签绑定'" disabled :class="{ 'detail-input': pageType === 'detail' }" /> </el-form-item> </el-col> </el-row> </el-form> <div style="font-size: 13px;padding: 20px 0 10px 20px;color: #606266;"> 说明:以上信息发生变动时,需要经过审批才可生效 </div> </detail-block> <!-- 溯源信息表单 --> <detail-block title=""> <el-form ref="sourceFormRef" :model="form" :label-width="120" label-position="right" :rules="rules" style="display: flex;flex-wrap: nowrap;" > <el-form-item label="溯源单位:" prop="traceCompany" style="flex: 1;"> <el-input v-model="form.traceCompany" :disabled="pageType === 'detail'" :placeholder="pageType === 'detail' ? ' ' : '请输入溯源单位'" /> </el-form-item> <el-form-item label="溯源日期:" prop="traceDate" style="flex: 1;"> <el-date-picker v-model="form.traceDate" type="date" :placeholder="pageType === 'detail' ? ' ' : '请选择日期'" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled="pageType === 'detail'" class="full-width-input" /> </el-form-item> <el-form-item label="检定有效期:" prop="measureValidDate" style="flex: 1;"> <el-date-picker v-model="form.measureValidDate" type="date" :placeholder="pageType === 'detail' ? ' ' : '请选择日期'" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled="pageType === 'detail'" class="full-width-input" /> </el-form-item> <el-form-item label="计量标识:" prop="meterIdentify" style="flex: 1;"> <el-select v-model="form.meterIdentify" :placeholder="pageType === 'detail' ? ' ' : '请选择计量标识'" :disabled="pageType === 'detail'" class="full-width-input" > <el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </el-form-item> <!-- <el-button v-if="props.pageType === 'detail' && approvalStatusName === '全部'" type="primary" style="margin-left: 10px;" @click="printMeterIdentify"> 打印 </el-button> --> </el-form> </detail-block> <!-- 技术指标 --> <detail-block title="技术指标"> <div class="file-area"> <div v-if="meterStandardList.length" style="display: flex;"> <span style="white-space: nowrap;font-weight: 600;">所属测量标准:</span> <div style="padding-right: 60px;padding-left: 20px;line-height: 24px;cursor: pointer;color: #5193ff;"> <span v-for="item in meterStandardList" :key="item.id" @click="handleClickMeterStandardLink(item)"> <span style="text-decoration: underline;">{{ item.standardName }}</span>ㅤ </span> </div> </div> <div class="tech-file"> <span style="white-space: nowrap;font-weight: 600;" class="file-text">核查规范/确认方法: </span> <span v-if="pageType === 'detail' && !form.technicalFile" class="file-text">无 </span> <el-button v-if="pageType !== 'detail'" id="file" type="primary" size="small" :disabled="pageType === 'detail'" @click="selectTechFile"> 选择 </el-button> <el-button v-if="pageType !== 'detail'" id="file" type="info" size="small" :disabled="pageType === 'detail'" @click="clear"> 清空 </el-button> <div v-if="form.technicalFile && form.technicalFile.length"> <div v-for="(item, index) in form.technicalFile" :key="index" style="display: flex;"> <show-photo :minio-file-name="item"> <span v-if="pageType !== 'detail' && item" class="photo-close" @click="delTechnicalFile(index)">×</span> </show-photo> </div> </div> </div> </div> <template v-if="pageType !== 'detail'" #btns> <el-button type="primary" @click="addRow('tech')"> 增加行 </el-button> <el-button type="info" @click="deleteRow('tech')"> 删除行 </el-button> </template> <el-table ref="techRef" :data="technicalTargetList" border style="width: 100%;" @selection-change="handleTechSelectionChange" @row-dblclick="rowDblclickTech" > <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"> <span v-if="pageType === 'detail' && item.value !== 'indicatorType'">{{ scope.row[item.value] }}</span> <span v-if="pageType === 'detail' && item.value === 'indicatorType'">{{ `${scope.row[item.value]}` === '0' ? '量传指标' : '非量传指标' }}</span> <el-input v-if="pageType !== 'detail' && item.value !== 'indicatorType'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="input" /> <el-radio-group v-if="pageType !== 'detail' && item.value === 'indicatorType'" v-model="scope.row[item.value]" class="full-width-input" :disabled="props.pageType === 'detail'"> <el-radio label="0" size="large"> 量传指标 </el-radio> <el-radio label="1" size="large"> 非量传指标 </el-radio> </el-radio-group> </template> </el-table-column> </el-table> </detail-block> <!-- 主附件信息 --> <detail-block title="主附件信息"> <template v-if="pageType !== 'detail'" #btns> <el-button type="primary" @click="addRow('accessory')"> 增加行 </el-button> <el-button type="info" @click="deleteRow('accessory')"> 删除行 </el-button> </template> <el-table ref="accessoryRef" :data="attachmentList" border style="width: 100%;" @selection-change="handleAccessorySelectionChange" @row-dblclick="rowDblclickAccessory" > <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 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="pageType === 'detail'">{{ scope.row[item.value] }}</span> <el-input v-else v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="input" /> </template> </el-table-column> </el-table> </detail-block> <!-- 选择所依据的技术文件 --> <select-sys-doc-dialog ref="techFileRef" @confirm="confirmSelectTechFile" /> <!-- 选择开箱记录 --> <select-unpack-record-dialog ref="selectUnpackRecordDialogRef" @confirm="confirmSelectUnpackRecord" /> <!-- 选择合格供方名录 --> <filter-supplier ref="filterSupplierDialogRef" @records-selected="confirmSelectFilterSupplier" /> <!-- 选择计量人员(负责人) --> <select-staff-person ref="selectStaffPersonRef" @confirm="confirmSelectStaff" /> </div> </template> <style lang="scss" scoped> ::v-deep .changedLabel .el-form-item__label { color: #f56c6c; } .link { text-decoration: underline; color: #3d7eff; cursor: pointer; } .file-area { // display: flex; // align-items: center; font-size: 14px; color: #60627f; margin-bottom: 10px; margin-left: 40px; width: 100%; flex-wrap: wrap; .tech-file { display: flex; align-items: center; // margin-left: 20px; flex-wrap: wrap; white-space: nowrap; .file-text { margin-right: 10px; } } } </style> <style lang="scss"> .equipment-book-basic { .el-radio__label { display: block !important; } } </style>