<script lang="ts" setup name="primitiveLogAdd">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import EnvironmentalDialog from '../components/environmentalDialog.vue'
import OrderDialog from '../components/orderDialog.vue'
import SampleDialog from '../components/sampleDialog.vue'
import PrimitiveLogDialog from '../components/primitiveLogDialog.vue'
import { getStaffList } from '@/api/measure/person'
import { getTypeSelect } from '@/api/system/price'
import EquipmentDialog from '@/views/device/standardEquipment/components/standardList/equipmentDialog.vue'
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'
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const buttonArray = ref<string[]>([]) // 顶部按钮数组
const pageType = ref('add') // 页面类型: add,edit, detail
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '查看',
} // 字典
// 从路由中获取页面类型参数
const $route = useRoute()
const formId = ref<string>('')
const { username } = useUserStore()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  formId.value = $route.query.formId as string
  if ($route.query.id) {
    infoId.value = $route.query.id as string
  }
}
// 检验是否为空的ref
const ruleFormRef = ref<FormInstance>()
// 新建上传参数
const formInline = ref({
  originalRecordCode: '', // 	原始记录编号
  originalRecordName: '', // 原始记录名称
  calibrationCategory: '', // 检校类别
  calibrationTime: '', // 		检校时间
  environmentId: '', // 环境记录单id
  calibrationPlace: '', // 检校地点
  orderId: '', // 	委托书id
  sampleId: '', // 	样品id
  templateId: '', // 	原始记录模板id
  originalRecordFile: '', // 	minio存储文件名
  remark: '', // 备注
  createUser: '', // 创建人id
})
// 数据详情无需上传
const fromListInfo = ref({
  environmentName: '', // 环境记录单名称
  calibrationLocation: '', // 校验地点
  temperature: '', // 环境记录单温度
  dampness: '', // 环境记录单相对湿度
  orderNo: '', // 委托方编号
  orderCode: '', // 委托方代码
  orderName: '', // 委托方名称
  orderPhone: '', // 委托方电话
  orderLocation: '', // 委托方地址
  sampleNo: '', // 样品编号
  sampleName: '', // 样品名称
  factoryNo: '', // 出厂编号
  model: '', // 型号
  manufacturer: '', // 生产厂家
  submissionUser: '', // 送检人
  submissionPhone: '', // 送检人联系方式
  submissionTime: '', // 送检时间
  inspectionTime: '', // 检完时间
  verificationItems: '', // 检定项目
  templateName: '', // 原始记录模板
  fixedAssetsList: [], // 底部设备数组
  fileList: [], // 底部文件表格数组
  applyEquipmentList: [], // 底部设备详情数组
})
// 下拉框数组类型
interface IOptions {
  id: string
  name: string
}
// 模拟检测类型的下拉框数组
const standardOwnerOptions = ref([
  { name: '检测', id: '1' },
  { name: '校准', id: '2' },
  { name: '检定', id: '3' },
  { name: '验收检定', id: '4' },
])
// 数据
const list = ref<object[]>([])
// 标准配套设备更换表格总数
const total = ref(0)
// 审批弹窗开关
const applyShow = ref(false)
// 审批弹窗信息收集类型
interface applyListType {
  select: string
  epilog: string
  approval: string
  approvalTime: string
}
// 审批弹窗信息收集
const applyList = ref<applyListType>({
  select: '',
  epilog: '',
  approval: '',
  approvalTime: '',
})
// 标准配套设备表头类型
interface columnsType {
  text: string
  value: string
  align: string
  required: Boolean
  choose: Boolean
  time: Boolean
}

// 标准配套设备更换表头
const columns = ref<columnsType[]>([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '设备编号',
    value: 'equipmentNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '型号',
    value: 'modelNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '出厂编号',
    value: 'mesureResult',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '证书有效期',
    value: 'validDate',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
])
// 标准配套设备更换查询条件
const listQuery = ref<object>({
  limit: 10,
  offset: 1,
})
// 标准配套设备更换表格loding
const loadingTable = ref(false)
// 申请文档表头
const columnsFiles = ref<columnsType[]>([
  {
    text: '文件编号',
    value: 'fileName',
    align: 'center',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '文件名称',
    value: 'createTime',
    align: 'center',
    required: true,
    choose: false,
    time: true,
  },
  {
    text: '文件代号',
    value: 'remark',
    align: 'center',
    required: true,
    time: false,
    choose: false,
  },
])
// 标准配套设备更换表格分页
const changePage = () => {}
// 添加表格数据对象
const addList = ref({})
// 添加表格弹窗开关
const dialogVisible = ref(false)
// 选择标准装置数据列表下拉框类型
interface standardListType {
  id: string
  standardName: string
}
// 选择标准装置数据列表下拉框
const standardList = ref<standardListType[]>([])
// 初始化路由
const $router = useRouter()
// 关闭
const close = () => {
  // emit('close')
  $router.back()
}
// 表单验证规则
const rules = ref({
  originalRecordCode: [
    { required: true, message: '原始记录编号不能为空', trigger: ['blur', 'change'] },
  ],
  originalRecordName: [{ required: true, message: '原始记录名称不能为空', trigger: ['blur', 'change'] }],
  calibrationCategory: [
    { required: true, message: '校验专业不能为空', trigger: ['blur', 'change'] },
  ],
  calibrationTime: [
    { required: true, message: '校验时间不能为空', trigger: ['blur', 'change'] },
  ],
  environmentName: [
    { required: true, message: '环境记录单不能为空', trigger: ['blur', 'change'] },
  ],
  calibrationLocation: [
    { required: true, message: '校验地点不能为空', trigger: ['blur', 'change'] },
  ],
  temperature: [
    { required: true, message: '温度不能为空', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '温度只能为数字', trigger: ['blur', 'change'] },
  ],
  dampness: [{ required: true, message: '相对湿度不能为空', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '相对湿度只能为数字', trigger: ['blur', 'change'] },
  ],
  orderNo: [
    { required: true, message: '委托方编号不能为空', trigger: ['blur', 'change'] },
  ],
  orderCode: [
    { required: true, message: '委托方代码不能为空', trigger: ['blur', 'change'] },
  ],
  orderName: [
    { required: true, message: '委托方名称不能为空', trigger: ['blur', 'change'] },
  ],
  orderPhone: [
    { required: true, message: '委托方电话不能为空', trigger: ['blur', 'change'] },
  ],
  orderLocation: [
    { required: true, message: '委托方地址不能为空', trigger: ['blur', 'change'] },
  ],
  sampleNo: [
    { required: true, message: '样品编号不能为空', trigger: ['blur', 'change'] },
  ],
  sampleName: [
    { required: true, message: '样品名称不能为空', trigger: ['blur', 'change'] },
  ],
  factoryNo: [
    { required: true, message: '出厂编号不能为空', trigger: ['blur', 'change'] },
  ],
  model: [
    { required: true, message: '型号不能为空', trigger: ['blur', 'change'] },
  ],
  manufacturer: [
    { required: true, message: '生产厂家不能为空', trigger: ['blur', 'change'] },
  ],
  verificationItems: [
    { required: true, message: '检定项目不能为空', trigger: ['blur', 'change'] },
  ],
})
// 第几条数据选择
const listIndex = ref(0)
// 底部文件选择下标收集类型
interface arowReturnType {
  $index: number
}
const uploadIndex = (row: arowReturnType) => {
  listIndex.value = row.$index
}
// 选择标准配套设备
const equipmentDialog = ref()
// 点击标准配套设备选择按钮
const chooseList = (row: object, index: number) => {
  listIndex.value = index
  equipmentDialog.value.initDialog()
}
// 点击增加行
const addRoow = () => {
  if (
    fromListInfo.value.applyEquipmentList.length >= 1
    && fromListInfo.value.applyEquipmentList[
      fromListInfo.value.applyEquipmentList.length - 1
    ].equipmentId === ''
  ) {
    ElMessage.warning('请完善上一条设备信息')
  }
  else {
    fromListInfo.value.applyEquipmentList.push({
      equipmentId: '',
      standardApplyId: '',
    })
    fromListInfo.value.fixedAssetsList.push({})
  }
}
// 选择设备之后
const equipmentAddRow = (data: object) => {
  fromListInfo.value.fixedAssetsList[listIndex.value] = data
  fromListInfo.value.applyEquipmentList[listIndex.value].equipmentId = data.id
  fromListInfo.value.applyEquipmentList[listIndex.value].standardApplyId
    = infoId.value || ''
}
// 增加申请文档列表
const addRow = () => {
  if (
    fromListInfo.value.fileList.length >= 1
    && !fromListInfo.value.fileList[fromListInfo.value.fileList.length - 1]
      .fileName
  ) {
    ElMessage.warning('请完善上一条文件信息')
  }
  else {
    fromListInfo.value.fileList.push({})
  }
}
// 点击文件预览
const uploadShow = (e: any) => {
  const URL = window.URL || window.webkitURL
  window.open(URL.createObjectURL(e.raw))
}
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        formInline.value.originalRecordFile = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

// 表格选中的数组
const SelectionList = ref<object[]>([])
// 标准实验室发生改变row类型
interface rowReturn {
  phone: string
  director: string
  deptId: string
  organizeName: string
  id: string
}
// 标准实验室发生改变
const changeDeptList = (row: rowReturn) => {}
// 标准实验室清空时
const clearDeptList = () => {}
// 获取详情信息
const getInfo = (id: string | number) => {
  getStandardLisdetali({ id }).then((res) => {
    Object.keys(res.data).map((item) => {
      if (typeof res.data[item] === 'number') {
        res.data[item] = res.data[item].toString()
      }
    })
    formInline.value = res.data.meterStandardEquipment
    fromListInfo.value.fixedAssetsList = res.data.fixedAssetsList
  })
}
if (pageType.value !== 'add') {
  // getInfo(infoId.value)
}

// 保存后的id
const addId = ref('')
// 点击保存
const preserve = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确认提交吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // getListSave(formInline.value).then((res) => {
        //   if (res.code === 200) {
        //     addId.value = res.data.id
        //     ElMessage.success('保存成功！')
        //   }
        // })
      })
    }
  })
}

// 标准实验室发生改变row类型
interface rowReturn {
  phone: string
  director: string
  deptId: string
  organizeName: string
  id: string
}
// 选择标准装置弹窗ref
const standarDialog = ref()
// 选择了标准名称后
const standardChange = () => {
  standarDialog.value.initDialog()
}

// 选择环境记录单Ref
const environmentalDialog = ref()
// 选择环境记录单
const environmentalClick = () => {
  environmentalDialog.value.initDialog()
}

// 环境记录单表格确认
const environmentalAdd = (data: rowReturn) => {
  formInline.value.environmentId = data.id
}
// 委托方组件ref
const orderDialog = ref()
// 点击选择委托书
const orderClick = () => {
  orderDialog.value.initDialog()
}
// 委托方表格确认后
const orderAdd = (data: rowReturn) => {
  formInline.value.orderId = data.id
}
// 样品组件ref
const sampleDialog = ref()
// 点击选择样品
const sampleClick = () => {
  sampleDialog.value.initDialog()
}
// 样品组件弹窗选择完成后
const sampleAdd = (data: rowReturn) => {
  formInline.value.sampleId = data.id
}
// 原始记录组件ref
const primitiveLogDialog = ref()
// 点击原始记录选择
const primitiveLogClick = () => {
  primitiveLogDialog.value.initDialog()
}
// 原始记录选择完成之后
const primitiveLogAdd = (data: rowReturn) => {
  formInline.value.templateId = data.id
}
// 点击关闭
const handleClose = () => {
  dialogVisible.value = false
}
// 标准配套设备更换表格删除行
const removeRow = (type: string) => {
  if (SelectionList.value.length > 0) {
    ElMessageBox.confirm('确认删除选中的数据吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      if (type == '1') {
        // 删除设备行
        fromListInfo.value.fixedAssetsList = fromListInfo.value.fixedAssetsList.filter((item) => {
          return !SelectionList.value.includes(item)
        })
        fromListInfo.value.applyEquipmentList = fromListInfo.value.fixedAssetsList.filter((item) => {
          return !SelectionList.value.includes(item)
        })
        ElMessage.success('删除成功')
      }
      else {
        // 删除文件行
        fromListInfo.value.fileList = fromListInfo.value.fileList.filter(
          (item) => {
            return !SelectionList.value.includes(item)
          },
        )
        ElMessage.success('删除成功')
      }
    })
  }
  else {
    ElMessage.warning('请先选择需要删除的数据')
  }
}
// 文件表格多选框
const handleSelectionChange = (e: any) => {
  SelectionList.value = e
}
watch(
  () => formInline.value,
  (newVal) => {
    // 变化后存储
  },
  { deep: true, immediate: true },
)
// 审批弹窗的关闭
const applyListClose = () => {
  applyShow.value = false
}
// 审批弹窗的提交
const applyListSubmit = () => {
  console.log(applyList.value)
  if (applyList.value.select == '') {
    return ElMessage.error('必须选择审批意见')
  }
  applyListClose()
}
// 标准装置发生改变data类型
interface dataReturn {
  id: string
}
// 获取详情信息
const getStandarInfo = (id: string | number) => {
  getStandardListDetail({ id }).then((res) => {
    Object.keys(res.data).map((item) => {
      if (typeof res.data[item] === 'number') {
        res.data[item] = res.data[item].toString()
      }
    })
    formInline.value = res.data
  })
}
// 选择标准装置完成之后
const StandarAddRow = (data: dataReturn) => {
  getStandarInfo(data.id)
}
// 打印
const printObj = ref({
  id: 'form', // 需要打印元素的id
  popTitle: '原始记录模板', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})
</script>

<template>
  <app-container>
    <detail-page :title="`原始记录 -- ${textMap[pageType]}`">
      <template #btns>
        <el-button
          v-if="pageType !== 'detail'"
          type="primary"
          @click="
            preserve(ruleFormRef)
          "
        >
          提交
        </el-button>
        <el-button v-else v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        id="form"
        ref="ruleFormRef"
        :model="formInline"
        label-position="right"
        label-width="auto"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="原始记录编号:" prop="originalRecordCode">
              <el-input
                v-model.trim="formInline.originalRecordCode"
                :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="originalRecordName">
              <el-input
                v-model.trim="formInline.originalRecordName"
                :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="calibrationCategory">
              <el-select
                v-model="formInline.calibrationCategory"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择检校专业'"
                size="default"
                style="width: 100%;"
                :disabled="pageType === 'detail'"
              >
                <el-option
                  v-for="item in standardOwnerOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检校时间:" prop="calibrationTime">
              <el-date-picker
                v-model="formInline.calibrationTime"
                type="datetime"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择检校时间'"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="环境记录单编号:" prop="environmentName">
              <el-input
                v-model.trim="fromListInfo.environmentName"
                :placeholder="pageType === 'detail' ? '' : '请选择环境记录单编号'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="environmentalClick"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="检校地点:"
              prop="calibrationLocation"
            >
              <el-input
                v-model.trim="fromListInfo.calibrationLocation"
                :placeholder="pageType === 'detail' ? '' : '请输入检校地点'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度(℃):" prop="temperature">
              <el-input
                v-model.trim="fromListInfo.temperature"
                :placeholder="pageType === 'detail' ? '' : '请输入温度(℃)'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="相对湿度(%):" prop="dampness">
              <el-input
                v-model.trim="fromListInfo.dampness"
                :placeholder="pageType === 'detail' ? '' : '请输入相对湿度(%)'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="委托书编号:" prop="orderNo">
              <el-input
                v-model.trim="fromListInfo.orderNo"
                :placeholder="pageType === 'detail' ? '' : '请选择委托书编号'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="orderClick"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方代码:" prop="orderCode">
              <el-input
                v-model.trim="fromListInfo.orderCode"
                :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="orderName">
              <el-input
                v-model.trim="fromListInfo.orderName"
                :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="orderPhone">
              <el-input
                v-model.trim="fromListInfo.orderPhone"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方电话'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="委托方地址:" prop="orderLocation">
              <el-input
                v-model.trim="fromListInfo.orderLocation"
                :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="sampleNo">
              <el-input
                v-model.trim="fromListInfo.sampleNo"
                :placeholder="pageType === 'detail' ? '' : '请输入样品编号'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="sampleClick"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品名称:" prop="sampleName">
              <el-input
                v-model.trim="fromListInfo.sampleName"
                :placeholder="pageType === 'detail' ? '' : '请输入样品名称'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出厂编号:" prop="factoryNo">
              <el-input
                v-model.trim="fromListInfo.factoryNo"
                :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="model">
              <el-input
                v-model.trim="fromListInfo.model"
                :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="manufacturer">
              <el-input
                v-model.trim="fromListInfo.manufacturer"
                :placeholder="pageType === 'detail' ? '' : '请输入生产厂家'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="送检人:">
              <el-input
                v-model.trim="fromListInfo.submissionUser"
                :placeholder="pageType === 'detail' ? '' : '请输入送检人'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input
                v-model.trim="fromListInfo.submissionPhone"
                :placeholder="pageType === 'detail' ? '' : '请输入联系方式'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计送达时间:">
              <el-date-picker
                v-model="fromListInfo.submissionTime"
                type="datetime"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择预计送达时间'"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计检完时间:">
              <el-date-picker
                v-model="fromListInfo.inspectionTime"
                type="datetime"
                style="width: 100%;"
                :placeholder="pageType === 'detail' ? '' : '请选择预计送达时间'"
                format="YYYY-MM-DD hh:mm:ss"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检定项目:" prop="verificationItems">
              <el-input
                v-model.trim="fromListInfo.verificationItems"
                :placeholder="pageType === 'detail' ? '' : '请输入检定项目'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </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-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="原始记录模板:">
              <el-input
                v-model.trim="fromListInfo.templateName"
                :placeholder="pageType === 'detail' ? '' : '请选择原始记录模板'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="primitiveLogClick"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="原始记录附件:" prop="contactInfo">
              <show-photo v-if="formInline.originalRecordFile" :minio-file-name="formInline.originalRecordFile" />
              <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.originalRecordFile === '' ? '0px' : '20px' }" @click="upload">
                {{ formInline.originalRecordFile === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title=" 所用设备">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="addRoow">
          增加行
        </el-button>
        <el-button
          v-if="pageType !== 'detail'"
          type="info"
          @click="removeRow('1')"
        >
          删除行
        </el-button>
      </template>
      <el-table
        :data="fromListInfo.fixedAssetsList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <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 columns"
          :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
            v-if="item.text === '设备名称' && pageType !== 'detail'"
            #default="scope"
          >
            <el-input
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
            >
              <template v-if="item.choose" #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  @click="chooseList(scope.row, scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block title="所依据的技术文件">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button type="primary" @click="addRow">
          增加行
        </el-button>
        <el-button type="info" @click="removeRow('2')">
          删除行
        </el-button>
      </template>
      <el-table
        :data="fromListInfo.fileList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <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 columnsFiles"
          :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
            v-if="item.text === '文件编号' && pageType !== 'detail'"
            #default="scope"
          >
            <el-input
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
            >
              <template v-if="item.choose" #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
  </app-container>
  <!-- 选择设备弹窗 -->
  <equipment-dialog ref="equipmentDialog" @add="equipmentAddRow" />
  <!-- 选择环境记录单弹窗 -->
  <environmental-dialog ref="environmentalDialog" @add="environmentalAdd" />
  <!-- 选择委托方弹窗 -->
  <order-dialog ref="orderDialog" @add="orderAdd" />
  <!-- 选择样品弹窗 -->
  <sample-dialog ref="sampleDialog" @add="sampleAdd" />
  <!-- 选择原始记录单 -->
  <primitive-log-dialog ref="primitiveLogDialog" @add="primitiveLogAdd" />
</template>

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