Newer
Older
smart-metering-front / src / views / business / lab / reportOnCredentials / components / reportOnCredentialsAdd.vue
lyg on 22 Mar 2024 42 KB 文件名utf8转成汉字
<!-- 证书报告新增、详情、编辑 -->
<script lang="ts" setup name="ReportOnCredentialsAdd">
import { ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import dayjs from 'dayjs'
import type { IFileList, columnsType, dictType } from '../report_interface'
import selectMeasureDevice from '../../components/selectMeasureDevice.vue'
import SelectFiles from '../../components/selectFiles.vue'
import selectPrimitiveLogList from '../../components/selectPrimitiveLogList.vue'
import selectReportTemplate from '../../components/selectReportTemplate.vue'
import selectSignature from '../../components/selectSignature.vue'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import { cancelApproval, fetchApproval, submitApproval } from '@/api/approval'
import { getStaffList } from '@/api/measure/person'
import { downloadFile } from '@/utils/download'
import { getPrimitiveLogDetail, getPrimitiveLogList } from '@/api/business/lab/primitiveLogList'
import {
  getStandardLisAdd,
  getStandardLisdetali,
  getStandardListDetail,
  getUsersDept,
  submitStandardEquipmentApply,
  updateStandardEquipmentApply,
} from '@/api/device/standard'
import { UploadFile } from '@/api/measure/file'
import useUserStore from '@/store/modules/user'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { SCHEDULE } from '@/utils/scheduleDict'
import {
  addReport,
  downCertifica,
  draftUpdateReport,
  failUpdateReport,
  getReportDetail,
  submitReport,
} from '@/api/business/lab/report'
import type { fixedAssetsType } from '@/views/device/standingBook/standingBook-interface'
import type { fileListType } from '@/views/measure/file/file-interface'
import { getDictByCode } from '@/api/system/dict'

const infoId = ref('') // id
const buttonArray = ref<string[]>([]) // 顶部按钮数组
const pageType = ref('add') // 页面类型: add,edit, detail
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '查看',
} // 字典
const primitiveLogVisible = ref(false) // 控制选择原始记录对话框显隐
const calibrationMajorMap = ref<dictType[]>([]) // 校检专业
const certificationClassMap = ref<dictType[]>([]) // 证书报告类型
const certificationTypeMap = ref<dictType[]>([]) // 证书类别
const approvalStatusName = ref('') // 审批状态、控制草稿箱没有审批流程
const $route = useRoute()
const { username } = useUserStore()
const from = ref('') // reject表示未通过驳回跳转过来的
const ruleFormRef = ref<FormInstance>()
const decisionItem = ref('') // 控制驳回、拒绝、同意按钮显隐
const taskId = ref('') // 控制驳回、拒绝、同意按钮显隐
const formInline = ref({
  calibrationTime: '', // 校验日期
  deliverTime: '', // 接收日期
  createUserName: '', // 创建人
  createTime: '', // 创建日期
  taskId: '', // 任务id,用于审批
  processId: '', // 	流程实例id
  processInstanceId: '', // 流程实例id--用于取消(又定为取消使用processId)
  approvalSignIds: '', // 认可标志专用章id
  approvalSignName: '', // 认可标志专用章名称
  approvalStatus: '1', // 审批状态--(后端要求传1,写死)
  calibrationMajor: '', // 检校专业
  calibrationMajorName: '', // 检校专业名称
  certificateReportType: '', // 证书报告类型
  certificateReportCategory: '', // 证书类别
  certificateReportCode: '', // 证书报告编号
  certificateReportFile: '', // 证书报告附件
  certificateReportName: '', // 证书报告名称
  expirationDate: '', // 证书有效期
  issuanceDate: '', // 出具日期
  measureDeptId: '', // 检定部门id
  measurePersonId: '', // 检定人员
  measureResult: '1', // 检定结果--(后端要求传1,写死)
  orderId: '', // 委托书id
  originalRecordId: '', // 原始记录id
  printNum: 0, // 	打印次数(后端要求传0,写死)
  printStatus: '3', // 	可打印状态--(后端要求传3,写死)
  sampleId: '', // 	样品id
  signId: '', // 	电子签章id
  signName: '', // 	电子签章名称
  remark: '', // 证书报告备注
  templateId: '', // 证书报告模板id
  templateName: '', // 证书报告模板名称
  certifications: '', // 证书类别--用于传参
  businessOriginalRecord: { // 原始记录下的内容
    calibrationPlace: '', // 检校地点
    originalRecordCode: '', // 原始记录编号
    businessEnvironmentRecord: { // 环境记录单
      temperature: '', // 环境记录单温度
      humidity: '', // 环境记录单相对湿度
      environmentCode: '', // 环境记录单编号
    }, // 环境记录单信息
    customerSampleInfo: { // 样品信息
      sampleNo: '', // 样品编号
      sampleName: '', // 样品名称
      manufacturingNo: '', // 出厂编号
      sampleModel: '', // 型号
      manufacturer: '', // 生产厂家
      deliverer: '', // 送检人
      delivererTel: '', // 送检人联系方式
      measureContent: '', // 检定项目
      certificateRequire: '', // 证书要求
      appearanceStatus: '', // 外观状态
    },
    businessOrder: { // 委托书
      orderCode: '', // 委托书编号
      customerNo: '', // 委托方代码
      customerName: '', // 委托方名称
      customerPhone: '', // 委托方电话
      customerAddress: '', // 委托方地址
      planDeliverTime: '', // 预计送达时间
      requireOverTime: '', // 要求检完时间
      certifications: '', // 证书类别
      remark: '',
    },
    equipmentInfoList: [] as any, // 测量设备
    fileList: [] as any, // 技术文件
  } as any, // 原始记录

})
// 从路由中获取页面类型参数
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  infoId.value = $route.params.id as string
  if (pageType.value === 'add') {
    buttonArray.value = ['提交', '保存']
  }
  else if (pageType.value === 'edit') {
    buttonArray.value = ['保存']
  }
  // else {
  //   buttonArray.value = ['同意', '驳回', '拒绝']
  // }
  if ($route.query.from) {
    from.value = $route.query.from as string
  }
  if ($route.query.processId) {
    formInline.value.processId = $route.query?.processId as string
  }
}

// 表单验证规则
const rules = ref({
  'deliverTime': [{ required: true, message: '接收日期必选', trigger: ['blur', 'change'] }],
  'certificateReportCategory': [{ required: true, message: '证书类别必选', trigger: ['blur', 'change'] }],
  'certificateReportFile': [{ required: true, message: '证书附件必选上传', trigger: ['blur', 'change'] }],
  'calibrationTime': [{ required: true, message: '校验日期必选', trigger: ['blur', 'change'] }],
  'calibrationMajor': [{ required: true, message: '检校专业必填', trigger: ['blur', 'change'] }],
  'createUserName': [{ required: true, message: '创建人必填', trigger: ['blur', 'change'] }],
  'createTime': [{ required: true, message: '创建日期必填', trigger: ['blur', 'change'] }],
  'certificateReportName': [{ required: true, message: '证书报告名称必填', trigger: ['blur', 'change'] }],
  'certificateReportType': [{ required: true, message: '证书报告类型必填', trigger: ['blur', 'change'] }],
  'issuanceDate': [{ required: true, message: '出具日期必填', trigger: ['blur', 'change'] }],
  'expirationDate': [{ required: true, message: '有效日期必填', trigger: ['blur', 'change'] }],
  'templateName': [{ required: true, message: '证书报告模板必填', trigger: ['blur', 'change'] }],
  // 'signName': [{ required: true, message: '电子签章必填', trigger: ['blur', 'change'] }],
  // 'approvalSignName': [{ required: true, message: '认可标志专用章必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.originalRecordCode': [{ required: true, message: '原始记录编号必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.sampleNo': [{ required: true, message: '样品编号必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.sampleName': [{ required: true, message: '样品名称必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.sampleModel': [{ required: true, message: '型号必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.manufacturer': [{ required: true, message: '生产厂家必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessEnvironmentRecord.temperature': [{ required: true, message: '温度(℃)必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessEnvironmentRecord.humidity': [{ required: true, message: '相对湿度(%)必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.manufacturingNo': [{ required: true, message: '出厂编号必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerNo': [{ required: true, message: '委托方代码必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerName': [{ required: true, message: '委托方名称必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerPhone': [{ required: true, message: '委托方电话必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerAddress': [{ required: true, message: '委托方地址必填', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.measureContent': [{ required: true, message: '检定项目必填', trigger: ['blur', 'change'] }],
})
// 获取字典值
async function getDict() {
  // 校检专业
  const response = await getDictByCode('calibrationMajor')
  calibrationMajorMap.value = response.data
  // 证书类型
  const resCertificationClass = await getDictByCode('certificationClass')
  certificationClassMap.value = resCertificationClass.data
  // 证书类别
  const rescertificationType = await getDictByCode('certificationType')
  certificationTypeMap.value = rescertificationType.data
}
getDict()

// 审批弹窗开关
const applyShow = ref(false)
// 审批弹窗信息收集类型
interface applyListType {
  select: string
  epilog: string
  approval: string
  approvalTime: string
}
// 审批弹窗信息收集
const applyList = ref<applyListType>({
  select: '',
  epilog: '',
  approval: '',
  approvalTime: '',
})

// 所用设备表头
const columns = ref<columnsType[]>([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
    width: '240',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '设备编号',
    value: 'equipmentNo',
    align: 'center',
    width: '160',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '型号',
    value: 'modelNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '出厂编号',
    value: 'manufacturingNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '证书有效期',
    value: 'validDate',
    width: '120',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
])

// 所依据的技术文件表头
const columnsFiles = ref<columnsType[]>([
  {
    text: '文件编号',
    value: 'fileNo',
    align: 'center',
    width: '240',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '文件名称',
    value: 'fileName',
    align: 'center',
    required: true,
    choose: false,
    time: true,
  },
  {
    text: '文件代号',
    value: 'fileCode',
    align: 'center',
    required: true,
    time: false,
    choose: false,
  },
])

// 初始化路由
const $router = useRouter()

// 关闭
const close = () => {
  $router.back()
}

const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  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) {
        formInline.value.certificateReportFile = res.data[0]
        // 重置当前验证
        ruleFormRef.value?.clearValidate('certificateReportFile')
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

// 保存后的id,用于提交
const addId = ref('')
// 保存、提交、关闭
const getAddList = async (item: string, formEl: FormInstance | undefined) => {
  if (item === '保存' && pageType.value === 'add') { // 新建的保存
    rules.value.certificateReportFile[0].required = true
    if (!formEl) {
      return
    }
    await formEl.validate((valid) => {
      if (valid) {
        ElMessageBox.confirm('确认保存吗?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          addReport(formInline.value).then((res) => {
            if (res.code === 200) {
              ElMessage.success('保存成功')
              addId.value = res.data.data
            }
          })
        })
      }
    })
  }
  else if (item === '保存' && pageType.value === 'edit') { // 编辑的保存
    rules.value.certificateReportFile[0].required = true
    if (!formEl) {
      return
    }
    await formEl.validate((valid) => {
      if (valid) {
        ElMessageBox.confirm('确认保存吗?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          if (from.value === 'reject') { // 未通过-驳回编辑
            failUpdateReport(formInline.value).then((res) => {
              if (res.code === 200) {
                ElMessage.success('保存成功')
                close()
              }
            })
          }
          else {
            draftUpdateReport(formInline.value).then((res) => {
              if (res.code === 200) {
                ElMessage.success('保存成功')
                close()
              }
            })
          }
        })
      }
    })
  }
  else if (item === '提交') {
    if (addId.value === '') {
      ElMessage.warning('请先保存')
    }
    else {
      submitReport({
        id: addId.value,
        formId: SCHEDULE.BUSINESS_REPORT_ON_CREDENTIALS,
      }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('已提交')
          close()
        }
      })
    }
  }
}

// 获取详情信息
const getInfo = () => {
  getReportDetail({ id: infoId.value }).then((res) => {
    formInline.value = res.data
    if (res.data.businessOriginalRecord.equipmentInfoList && res.data.businessOriginalRecord.equipmentInfoList.length) {
      formInline.value.businessOriginalRecord.equipmentInfoList = res.data.businessOriginalRecord.equipmentInfoList.map((item: fixedAssetsType) => {
        return {
          ...item,
          validDate: item.validDate ? dayjs(item.validDate).format('YYYY-MM-DD') : '',
        }
      })
    }
    else {
      formInline.value.businessOriginalRecord.equipmentInfoList = []
    }
    formInline.value.businessOriginalRecord.fileList = res.data.businessOriginalRecord.fileList || []
  })
}
// --------------------------------------审批------------------------------------------
const approvalRecordData = ref([]) // 审批流程数据
const approvalDialog = ref() // 审批对话ref
// 查询审批记录
function getApprovalRecord(processId: string) {
  if (processId) {
    fetchApproval(processId).then((res) => {
      approvalRecordData.value = res.data
    })
  }
  else {
    ElMessage.warning('流程实例id为空')
  }
}
// 审批结束回调
const approvalSuccess = () => {
  close() // 返回上一页
}
// 审批
const handleApprove = (val: string, title = '') => {
  if (val === '取消') {
    const params = {
      processInstanceId: formInline.value.processId!,
      comments: '',
    }
    ElMessageBox.confirm(
      '确认取消该审批吗?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '取消成功',
          })
          close()
        })
      })
  }

  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value)
  }
  else if (val === '驳回') {
    approvalDialog.value.initDialog('reject', taskId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value)
  }
}
// -------------------------------------------原始记录------------------------------------
// 点击选择原始记录编号
const handleClickPrimitiveLog = () => {
  primitiveLogVisible.value = true
}

// 修改原始记录对话框显隐
const changePrimitiveLogVisible = (val: boolean) => {
  primitiveLogVisible.value = val
}
// 选好原始记录
const confirmCheckoutPrimitiveLog = (val: any) => {
  formInline.value.businessOriginalRecord = val
  formInline.value.certifications = val.businessOrder.certifications // 证书类别
  // formInline.value.certificateReportCategory = val.businessOrder.certifications // 证书类别
  formInline.value.sampleId = val.customerSampleInfo.id // 样品id
  formInline.value.orderId = val.businessOrder.id // 委托书id
  formInline.value.originalRecordId = val.id // 原始记录id
  formInline.value.originalRecordId = val.id // 原始记录id
  formInline.value.originalRecordId = val.id // 原始记录id
  // formInline.value.deliverTime = val.customerSampleInfo.deliverTime
}
const primitiveLogRef = ref()
if ($route.query.originalRecordId) {
  // primitiveLogRef.value?.fetchDetail($route.query.originalRecordId)
  getPrimitiveLogDetail({ id: $route.query.originalRecordId as string }).then((res) => {
    let responseData = {} as any
    responseData = res.data
    if (res.data.equipmentInfoList && res.data.equipmentInfoList.length) {
      responseData.equipmentInfoList = res.data.equipmentInfoList.map((item: fixedAssetsType) => {
        return {
          ...item,
          validDate: item.validDate ? dayjs(item.validDate).format('YYYY-MM-DD') : '',
        }
      })
    }
    else {
      responseData.equipmentInfoList = []
    }
    responseData.fileList = res.data.fileList || []
    confirmCheckoutPrimitiveLog(responseData)
  })
}
// --------------------------------------证书报告模板-----------------------------------
// 选择证书报告模板Ref
const templateDialog = ref()
// 选择证书报告模板
const handleClickTemplate = () => {
  templateDialog.value.initDialog()
}
// 选择证书报告模板确认
const confirmCheckoutTemplate = (val: any) => {
  formInline.value.templateId = val.id // 证书报告模板id
  formInline.value.templateName = val.templateName || '' // 证书报告模板名称
  formInline.value.certificateReportType = val.certificationType // 证书报告类型
}

// --------------------------------------选择签章-----------------------------------
// 选择签章Ref
const signatureDialog = ref()
// 选择签章模板
const handleClickSignature = () => {
  signatureDialog.value.initDialog()
}
// 选择签章确认
const confirmCheckoutSignature = (val: any) => {
  formInline.value.signId = val[0].id // 电子签章id
  formInline.value.signName = val[0].signName || '' // 电子签章名称
}

// --------------------------------------选择认可标志专用章-----------------------------------
// 选择认可标志专用章ref
const specialSignatureDialog = ref()
// 选择认可标志专用章
const handleClickSpecialSignature = () => {
  specialSignatureDialog.value.initDialog()
}
// 选择认可标志专用章确认
const confirmCheckoutSpecialSignature = (val: any) => {
  let ids = '' // id
  let names = '' // 名字
  val.forEach((item: any, index: number) => {
    if (index === 0) {
      ids = ids + item.id
      names = names + item.signName
    }
    else {
      ids = `${ids},${item.id}`
      names = `${names},${item.signName}`
    }
  })
  formInline.value.approvalSignIds = ids // 认可标志专用章id
  formInline.value.approvalSignName = names // 认可标志专用章名称
}
// 下载证书
const downLo = () => {
  // ruleFormRef.value?.clearValidate('certificateReportFile')
  rules.value.certificateReportFile[0].required = false
  ruleFormRef.value?.validate().then(() => {
    downCertifica(formInline.value).then((res) => {
      if (res.status === 200) {
        const dis = res.headers['content-disposition']
        if (dis) {
          const name = dis.replace('attachment; filename=', '')
          let fileName = name.split('.')[0]
          const suffix = name.split('.')[1]
          if (fileName.includes('%')) {
            fileName = decodeURIComponent(fileName)
          }
          downloadFile(res.data, `${fileName}.${suffix}`)
        }
        else {
          downloadFile(res.data, '证书模板.excel')
        }
      }
      else {
        ElMessage.error('下载失败')
      }
    }).catch(() => {
      ElMessage.error('下载失败')
    })
  })
}
// -------------------------------------------底部-------------------------------------------

onMounted(() => {
  if (pageType.value !== 'add') {
    getInfo() // 获取详情
    decisionItem.value = JSON.parse($route.query?.row as string).decisionItem
    formInline.value.taskId = JSON.parse($route.query?.row as string).taskId // 任务id(同意、驳回等操作使用)
    taskId.value = JSON.parse($route.query.row as string).taskId // 任务id(同意、驳回等操作使用)
    formInline.value.processId = JSON.parse($route.query?.row as string).processId // 流程实例id
    formInline.value.processInstanceId = JSON.parse($route.query?.row as string).processInstanceId // 流程实例id(取消操作使用)
    approvalStatusName.value = JSON.parse($route.query?.row as string).approvalStatusName
    if (approvalStatusName.value !== '草稿箱') {
      getApprovalRecord(formInline.value.processId) // 查询审批记录
    }
    console.log('000000', formInline.value.taskId)
  }
  else {
    formInline.value.createUserName = useUserStore().name
    formInline.value.createTime = dayjs().format('YYYY-MM-DD ')
  }
})
</script>

<template>
  <app-container>
    <detail-page :title="`证书报告 -- ${textMap[pageType]}`">
      <template #btns>
        <el-button
          v-for="(item, index) in buttonArray"
          :key="index"
          type="primary"
          @click="getAddList(item, ruleFormRef)"
        >
          {{ item }}
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批'" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && decisionItem !== '3'" type="primary" @click="handleApprove('驳回')">
          驳回
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && decisionItem !== '2'" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '审批中'" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="formInline"
        label-position="right"
        label-width="auto"
        :rules="rules"
        :disabled="pageType === 'detail'"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="证书报告编号:">
              <el-input
                v-model.trim="formInline.certificateReportCode"
                placeholder="系统自动生成"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书报告名称:" prop="certificateReportName">
              <el-input
                v-model.trim="formInline.certificateReportName"
                :placeholder="pageType === 'detail' ? '' : '请输入证书报告名称'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人:" prop="createUserName">
              <el-input
                v-model.trim="formInline.createUserName"
                :placeholder="pageType === 'detail' ? '' : '创建人'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建日期:" prop="createTime">
              <el-date-picker
                v-model="formInline.createTime"
                type="date"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '创建日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原始记录编号:" prop="businessOriginalRecord.originalRecordCode">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.originalRecordCode"
                class="full-width-input"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="handleClickPrimitiveLog">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检校地点:" prop="businessOriginalRecord.calibrationPlace">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.calibrationPlace"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度(℃):">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.temperature"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="相对湿度(%RH):">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.humidity"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品编号:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.sampleNo"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品名称:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.sampleName"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.sampleModel"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.manufacturingNo"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.manufacturer"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书要求:" prop="businessOriginalRecord.certificateRequire">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.certificateRequire"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="外观状态:" prop="businessOriginalRecord.appearanceStatus">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.appearanceStatus"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托书:" prop="businessOriginalRecord.orderCode">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.orderCode"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托书样品备注:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.sampleRemark"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检校专业:" prop="calibrationMajor">
              <el-select
                v-model="formInline.calibrationMajor"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择检校专业'"
                size="default"
                style="width: 100%;"
                :disabled="pageType === 'detail'"
              >
                <el-option
                  v-for="item in calibrationMajorMap"
                  :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="certificateReportCategory">
              <el-select
                v-model="formInline.certificateReportCategory"
                clearable
                size="default"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in certificationTypeMap"
                  :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="expirationDate">
              <el-date-picker
                v-model="formInline.expirationDate"
                type="date"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择证书有效日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="6">
            <el-form-item label="证书报告模板:" prop="templateName">
              <el-input
                v-model.trim="formInline.templateName"
                :placeholder="pageType === 'detail' ? '' : '请选择证书报告模板'"
                class="full-width-input"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="handleClickTemplate">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="6">
            <el-form-item label="证书报告类型:" prop="certificateReportType">
              <el-select
                v-model="formInline.certificateReportType"
                clearable
                :placeholder="pageType === 'detail' ? ' ' : '请选择证书报告类型'"
                size="default"
                style="width: 100%;"
                disabled
              >
                <el-option
                  v-for="item in certificationTypeMap"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="6">
            <el-form-item label="委托方代码:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerNo"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="6">
            <el-form-item label="委托方电话:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerPhone"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="委托方名称:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerName"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书单位名称:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerName"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书单位地址:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerAddress"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="联系人:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.deliverer"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.delivererTel"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="接收日期:" prop="deliverTime">
              <el-date-picker
                v-model="formInline.deliverTime"
                type="date"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '接收日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="校验日期:" prop="calibrationTime">
              <el-date-picker
                v-model="formInline.calibrationTime"
                type="date"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '校验日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电子签章:" prop="signName">
              <el-input
                v-model.trim="formInline.signName"
                :placeholder="pageType === 'detail' ? '' : '请选择电子签章'"
                class="full-width-input"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="handleClickSignature">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="认可标志专用章:" prop="approvalSignName">
              <el-input
                v-model.trim="formInline.approvalSignName"
                :placeholder="pageType === 'detail' ? '' : '请选择认可标志专用章'"
                class="full-width-input"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="handleClickSpecialSignature">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="证书报告模板:" prop="templateName">
              <el-input
                v-model.trim="formInline.templateName"
                :placeholder="pageType === 'detail' ? '' : '证书报告模板'"
                class="full-width-input"
                clearable
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="handleClickTemplate"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="pageType !== 'detail'" :span="6">
            <el-button type="primary" @click="downLo">
              生成证书
            </el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="证书报告附件:" prop="certificateReportFile">
              <show-photo v-if="formInline.certificateReportFile" :minio-file-name="formInline.certificateReportFile" />
              <span v-else-if="pageType === 'detail'">无</span>
              <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
              <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': formInline.certificateReportFile === '' ? '0px' : '20px' }" @click="upload">
                {{ formInline.certificateReportFile === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model.trim="formInline.remark"
                :placeholder="pageType === 'detail' ? '' : '请输入备注'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="所用设备">
      <el-table
        :data="formInline.businessOriginalRecord.equipmentInfoList"
        border
        style="width: 100%;"
      >
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        />
      </el-table>
    </detail-block>
    <detail-block title="所依据的技术文件">
      <el-table
        :data="formInline.businessOriginalRecord.fileList"
        border
        style="width: 100%;"
      >
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columnsFiles"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        />
      </el-table>
    </detail-block>
    <detail-block v-if="approvalStatusName !== '草稿箱' && pageType !== 'add'" title="审批流程">
      <!-- 审批流程 -->
      <approval-record ref="approvalRecord" :approval-record-data="approvalRecordData" />
    </detail-block>
  </app-container>
  <!-- 审批弹窗 -->
  <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  <!-- 选择原始记录 -->
  <select-primitive-log-list ref="primitiveLogRef" v-model:visible="primitiveLogVisible" @confirm-checkout="confirmCheckoutPrimitiveLog" @change-visible="changePrimitiveLogVisible" />
  <!-- 选择原始记录模板 -->
  <select-report-template ref="templateDialog" @add="confirmCheckoutTemplate" />
  <!-- 选择签章 -->
  <select-signature ref="signatureDialog" @add="confirmCheckoutSignature" />
  <!-- 选择认可标志专用签章 -->
  <select-signature ref="specialSignatureDialog" :is-multi="true" @add="confirmCheckoutSpecialSignature" />
</template>

<style lang="scss">
.el-upload-list {
  display: none !important;
}
</style>