Newer
Older
xc-business-system / src / views / equipement / info / book / components / basic.vue
dutingting on 16 Jan 59 KB 需求开发、bug修复+4
<!-- 标准装置台账信息 基本信息 -->
<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>