<!-- 测试、校准或检定工作分包评审表 基本信息 -->
<script name="SubpackageReviewBasic" lang="ts" setup>
import dayjs from 'dayjs'
import type { FormRules } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { Ref } from 'vue'
import SelectOutsourcerNoDialog from '../dialog/selectOutsourcerNoDialog.vue'
import SelectEquipmentDialog from '../dialog/selectDistributedDialog.vue'
import type { IForm } from '../review-interface'
import {
  addReview,
  failUpdateReview,
  getInfo,
  submit,
  updateReview,
} from '@/api/business/subpackage/Review'
import { getInfo as getDirectoriesDetail, getDirectoriesList } from '@/api/business/subpackage/directories'
import { UploadFile } from '@/api/file'
import { getDictByCode } from '@/api/system/dict'
import showPhoto from '@/components/showPhoto/index.vue'
import type { dictType } from '@/global'
import useUserStore from '@/store/modules/user'
import { SCHEDULE } from '@/utils/scheduleDict'
const props = defineProps({
  pageType: {
    // 页面类型 add新建 edit编辑 detail详情
    type: String,
    requre: true,
    default: 'detail',
  },
  id: {
    type: String,
    requre: true,
  },
  approvalStatusName: {
    // 审批状态名称
    type: String,
    requre: true,
  },
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const user = useUserStore() // 用户信息
const form: Ref<IForm> = ref({
  // 表单
  labCode: '', // 实验室
  labCodeName: '', // 实验室名称
  groupCode: '', // 部门
  groupCodeName: '', // 部门名称
  projectNo: '', // 评审表编号
  projectName: '', // 评审表名称
  formId: SCHEDULE.SUBPACKAGE_AUDIT_LIST_APPROVAL,
  applicantId: '', // 申请人
  applicantName: '', // 申请人名称
  applicantTime: '', // 申请时间
  outsourcerId: '', // 分包方id
  outsourcerNo: '', // 分包方编号
  outsourcerName: '', // 分包机构名称
  director: '', // 机构负责人
  postalCode: '', // 邮编
  fax: '', // 传真
  contacts: '', // 联系人
  mobile: '', // 联系电话
  preEndTime: '', // 预计结束时间
  preStartTime: '', // 预计开始时间
  outsourceReason: '', // 分包原因
  outsourceReasonName: '', // 原因名称
  preCost: '', // 预计费用
  approveSituation: '', // 实验室认可情况
  traceability: '', // 溯源性
  testMethod: '', // 测试方法
  techniqueAbility: '', // 技术能力
  remark: '', // 备注
  minioFileName: [], // 附件

  fullAddress: '', // 公司地址-详细地址
  addressArea: '', // 公司地址-区编码
  addressCity: '', // 公司地址-市编码
  addressCountry: '', // 公司地址-国家编码
  addressProvince: '', // 公司地址-省编码
  addressAreaName: '', // 公司地址-区
  addressCityName: '', // 公司地址-市
  addressCountryName: '', // 公司地址-国家
  addressProvinceName: '', // 公司地址-省

  item: '', // 分包项项目
})
const fullAddress = ref<string[]>([]) // 公司地址
const ruleFormRef = ref() // 表单ref
const loading = ref(false) // loading
const infoId = ref('') // id

// 自定义校验规则--要求预计结束时间大于预计开始时间
const requireOverTimeValid = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('预计结束时间必填'))
  }
  if (
    new Date(form.value.preEndTime).getTime()
    <= new Date(form.value.preStartTime).getTime()
  ) {
    return callback(new Error('不能小于预计开始时间'))
  }
  callback()
}
const rules = ref<FormRules>({
  // 表单验证规则
  labCode: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }],
  groupCode: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }],
  outsourcerName: [{ required: true, message: '分包机构名称不能为空', trigger: ['blur', 'change'] }],
  director: [{ required: true, message: '机构负责人不能为空', trigger: ['blur', 'change'] }],
  postalCode: [{ required: true, message: '邮政编码不能为空', trigger: ['blur', 'change'] }],
  fax: [{ required: true, message: '传真不能为空', trigger: ['blur', 'change'] }],
  fullAddress: [{ required: true, message: '地址不能为空', trigger: ['blur', 'change'] }],
  outsourcerNo: [{ required: true, message: '分包方编号不能为空', trigger: ['blur', 'change'] }],
  contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
  preStartTime: [{ required: true, message: '预计开始时间不能为空', trigger: ['blur', 'change'] }],
  preEndTime: [{ required: true, type: 'date', validator: requireOverTimeValid, trigger: 'change' }],
  outsourceReason: [{ required: true, message: '分包原因不能为空', trigger: ['blur', 'change'] }],
  preCost: [{ required: true, message: '预计费用不能为空', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '预计费用只能为数字', trigger: ['blur', 'change'] }],
  approveSituation: [{ required: true, message: '实验室认可情况不能为空', trigger: 'blur' }],
  traceability: [{ required: true, message: '溯源性不能为空', trigger: 'blur' }],
  testMethod: [{ required: true, message: '测试方法不能为空', trigger: 'blur' }],
  techniqueAbility: [{ required: true, message: '技术能力不能为空', trigger: 'blur' }],
  item: [{ required: true, message: '分包项目不能为空', trigger: 'blur' }],
})
// -------------------------------------------文件上传--------------------------------------
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])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.minioFileName.push(res.data[0])
        event.target.value = null
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

/**
 * 删除附件
 * @param index 索引
 * @param type 操作的类型
 */

const delFile = (index: number) => {
  form.value.minioFileName.splice(index, 1)
}

// ------------------------------------------字典----------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室
const groupCodeList = ref<dictType[]>([]) // 部门
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const meterIdentifyMap = ref([]) as any // 计量标识

async function getDict() {
  // 计量标识
  const response = await getDictByCode('eqptMeterIdentify')
  response.data.forEach((item: { value: string; name: string }) => {
    meterIdentifyMap.value[`${item.value}`] = item.name
  })
  meterIdentifyDict.value = response.data
  // 实验室
  getDictByCode('bizGroupCodeEquipment').then((response) => {
    labCodeList.value = response.data
  })
  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
}

// ----------------------------------------获取分包方机构列表-----------------------------------
const outsourcerList = ref([]) // 分包方机构列表

const fetchOutsourcer = () => {
  const params = {
    approvalStatus: '4', //	审批状态类型code，导出接口不用传
    businessScope: '', //	测试能力
    contacts: '', //	联系人
    createTimeEnd: '', //	创建时间结束
    createTimeStart: '', //	创建时间开始
    createUserName: '', //	创建人
    director: '', //	负责人
    formId: SCHEDULE.SUBPACKAGE_DIRECTORIES_APPROVAL, //	表单id（流程定义对应的表单id，等价于业务id），导出接口不用传
    fullAddress: '', //	地址
    outsourcerName: '', //	单位名称
    outsourcerNo: '', //	分包方编号
    pdf: true,
    phone: '', //	联系电话
    techniqueAbility: '', // 技术能力
    offset: 1,
    limit: 999999,
  }
  getDirectoriesList(params).then((response) => {
    outsourcerList.value = response.data.rows.map((item: { outsourcerName: string; measureValidDate: string }) => {
      return {
        ...item,
        measureValidDate: item.measureValidDate ? dayjs(item.measureValidDate).format('YYYY-MM-DD') : item.measureValidDate,
        value: item.outsourcerName, // 单位名称
      }
    })
  })
}

const handleSelectOutsourcer = (item: any) => {
  form.value.outsourcerId = item.id // 分包方id
  form.value.outsourcerNo = item.outsourcerNo // 分包方编号
  form.value.outsourcerName = item.outsourcerName // 分包机构名称
  form.value.director = item.director // 机构负责人
  form.value.postalCode = item.postalCode // 邮编
  form.value.contacts = item.contacts // 联系人
  form.value.mobile = item.mobile // 联系电话
  form.value.fax = item.fax // 传真
  form.value.testMethod = item.testMethod // 测试方法
  form.value.techniqueAbility = item.techniqueAbility // 技术能力
  form.value.remark = item.remark // 技术能力
  form.value.fullAddress = item.addressCountryName + item.addressProvinceName + item.addressCityName + item.addressAreaName + item.fullAddress
}
// ---------------------------------------------受检设备信息表格-------------------------------
const list = ref([]) as any // 表格数据
const selectEquipmentRef = ref() // 选择设备组件ref
const checkoutList = ref([]) // 选中的内容

const columns = ref([
  { text: '受检设备名称', value: 'sampleName', align: 'center', required: false },
  { text: '规格型号', value: 'sampleModel', align: 'center', required: false },
  { text: '出厂编号', value: 'manufactureNo', align: 'center', required: false },
  // { text: '生产厂家', value: 'manufacturer', align: 'center', required: false },
  // { text: '辅助字段', value: 'helpInstruction', align: 'center', required: false },
  { text: '任务单编号', value: 'orderNo', align: 'center', width: '160' },
  { text: '委托方', value: 'customerName', align: 'center', width: '90' },
  { text: '辅助字段', value: 'helpInstruction', align: 'center', required: false },
  { text: '计量标识', value: 'meterIdentifyName', align: 'center', required: true },
  { text: '检定有效期', value: 'certificateValid', align: 'center', required: false, width: '120' },
])

// 多选发生改变时
const handleSelectionChange = (e: any) => {
  checkoutList.value = e
}

// 点击批量添加
const multiAdd = () => {
  selectEquipmentRef.value.initDialog()
}

// 选好设备
const clickConfirmEquipment = (val: any) => {
  val.forEach((item: any) => {
    // 只添加列表里不存在的
    const index = list.value.findIndex((i: any) => item.sampleId === i.sampleId)
    if (index === -1) {
      const tempItem = {
        ...item,
        meterIdentifyName: item.meterIdentify ? meterIdentifyMap.value[item.meterIdentify] : item.meterIdentify,
        certificateValid: item.certificateValid ? dayjs(item.certificateValid).format('YYYY-MM-DD') : item.certificateValid,
      }
      list.value.push(tempItem)
    }
  })
}

// 删除行
const delRow = () => {
  if (checkoutList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutList.value.forEach((item: any) => {
      list.value.forEach((element: { equipmentNo: string }, index: number) => {
        if (element.equipmentNo === item.equipmentNo) {
          list.value.splice(index, 1)
        }
      })
    })
  }
}
// -----------------------------------------其他方法------------------------------------------

// 获取详情
const fetchInfo = () => {
  loading.value = true
  getInfo({ id: infoId.value }).then((res) => {
    // loading.value = false
    form.value = res.data
    form.value.minioFileName = res.data.minioFileName.split(',') // 附件
    list.value = res.data.equipmentList.map((item: { id: string; model: string;sampleModel: string;sampleName: string;equipmentName: string;meterIdentify: string; validate: string }) => {
      return {
        ...item,
        meterIdentifyName: meterIdentifyMap.value[item.meterIdentify],
        certificateValid: dayjs(item.validate).format('YYYY-MM-DD'),
        sampleName: item.sampleName || item.equipmentName,
        sampleModel: item.sampleModel || item.model,
        sampleId: item.id,
      }
    })
    // getDirectoriesDetail({ id: res.data.outsourcerId }).then((response) => {
    //   loading.value = false
    //   fullAddress.value = [response.data.addressCountryName, response.data.addressProvinceName, response.data.addressCityName, response.data.addressAreaName, response.data.fullAddress]
    // })
    loading.value = false
  })
}
// -----------------------------------------------保存---------------------------------------
/**
 * 点击保存
 * @param formEl 基本信息表单ref
 */
const saveForm = async () => {
  if (!list.value.length) {
    ElMessage.warning('受检设备信息不能为空')
    return false
  }
  await ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      // 基本信息表单通过校验
      ElMessageBox.confirm('确认保存吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.6)',
        })
        const params = {
          ...form.value,
          minioFileName: Array.isArray(form.value.minioFileName) ? form.value.minioFileName?.join(',') : form.value.minioFileName,
          orderSampleList: list.value.map(
            (item: { orderId: string; sampleId: string }) => {
              return {
                orderId: item.orderId, // 委托书id
                sampleId: item.sampleId, // 样品id、设备id
              }
            },
          ),
          id: infoId.value,
          item: list.value.map((item: any) => `${item.sampleName}-${item.sampleModel}-${item.manufactureNo}`).join(','), // 模板的分包项目
        }
        if (props.pageType === 'add') {
          // 新建
          addReview(params).then((res) => {
            loading.close()
            form.value.projectNo = res.data.projectNo // 分包方编号
            infoId.value = res.data.id // id
            emits('addSuccess', infoId.value)
            ElMessage.success('已保存')
          }).catch(() => {
            loading.close()
          })
        }
        else if (props.pageType === 'edit') {
          // 编辑
          console.log(props.approvalStatusName)
          if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') {
            updateReview(params).then((res) => {
              loading.close()
              emits('addSuccess', infoId.value)
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
          else {
            // '未通过' || '已取消'
            failUpdateReview(params).then((res) => {
              loading.close()
              emits('submitSuccess')
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    }
  })
}

// ----------------------------------------------提交--------------------------------------------
// 提交
/**
 *
 * @param processId 流程实例id
 * @param id // id
 */
const submitForm = (processId: string, id: string) => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  submit({
    id,
    formId: SCHEDULE.SUBPACKAGE_AUDIT_LIST_APPROVAL,
    processId,
  }).then((res) => {
    ElMessage.success('已提交')
    emits('submitSuccess')
    loading.close()
  })
}

// ---------------------------------------------钩子----------------------------------------------
watch(
  () => props.id, (newValue) => {
    infoId.value = newValue!
    console.log('监听到props.id', infoId.value)

    if (infoId.value) {
      fetchInfo() // 获取详情信息
    }
  },
  { immediate: true },
)

onMounted(async () => {
  getDict().then(() => {
    if (props.pageType !== 'add' && infoId.value) {
      fetchInfo() // 获取详情信息
    }
    if (props.pageType === 'add') {
      form.value.projectName = '测试、校准或检定工作分包评审表' // 评审表名称
      form.value.applicantId = user.id // 申请人id
      form.value.applicantName = user.name // 申请人名字
      form.value.applicantTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 申请时间
      form.value.labCode = user.bizLabCode
      form.value.labCode = user.bizLabCode // 实验室
      form.value.labCodeName = user.labCodeName // 实验室名称
      form.value.groupCode = user.groupNo // 部门名称
      form.value.groupCodeName = user.groupName // 部门名称
    }
    fetchOutsourcer() // 获取分包方机构列表
  })
})

defineExpose({ saveForm, submitForm })
</script>

<template>
  <detail-block v-loading="loading" title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="130"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="实验室" prop="labCode">
            <el-select
              v-model="form.labCode"
              :placeholder="pageType === 'detail' ? ' ' : '请选择实验室'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option
                v-for="item in labCodeList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="groupCode">
            <el-select
              v-model="form.groupCode"
              :placeholder="pageType === 'detail' ? ' ' : '请选择部门'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option
                v-for="item in groupCodeList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件编号:" prop="projectNo">
            <el-input
              v-model="form.projectNo"
              :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件名称:" prop="projectName">
            <el-input
              v-model.trim="form.projectName"
              :placeholder="pageType === 'detail' ? '' : '文件名称'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请人:">
            <el-input v-model="form.applicantName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请时间:" prop="applicantTime">
            <el-input v-model="form.applicantTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分包机构名称:" prop="outsourcerName">
            <!-- <el-input
              v-model="form.outsourcerName"
              :placeholder="pageType === 'detail' ? '' : '分包机构名称'"
              disabled
            /> -->
            <el-autocomplete
              v-model="form.outsourcerName"
              class="inline-input"
              :fetch-suggestions="outsourcerList"
              placeholder="请输入或选择分包机构名称"
              :disabled="pageType === 'detail'"
              @select="handleSelectOutsourcer"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="机构负责人:" prop="director">
            <el-input
              v-model="form.director"
              :placeholder="pageType === 'detail' ? '' : '机构'"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
        <!-- <el-form-item label="公司地址:">
          <address-select :data="fullAddress" />
        </el-form-item> -->
        <el-col :span="12">
          <el-form-item label="地址:" prop="fullAddress">
            <el-input
              v-model="form.fullAddress"
              :placeholder="pageType === 'detail' ? '' : '地址'"
              :disabled="pageType === 'detail'"
              type="textarea"
              autosize
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮政编码:" prop="postalCode">
            <el-input
              v-model="form.postalCode"
              :placeholder="pageType === 'detail' ? ' ' : '邮政编码'"
              :disabled="pageType === 'detail'"

              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人:" prop="contacts">
            <el-input
              v-model="form.contacts"
              :placeholder="pageType === 'detail' ? '' : '联系人'"
              :class="{ 'detail-input': pageType === 'detail' }"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话:" prop="mobile">
            <el-input
              v-model="form.mobile"
              :placeholder="pageType === 'detail' ? ' ' : '请输入电话'"
              :class="{ 'detail-input': pageType === 'detail' }"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="传真:" prop="fax">
            <el-input
              v-model="form.fax"
              :placeholder="pageType === 'detail' ? ' ' : '传真'"
              :class="{ 'detail-input': pageType === 'detail' }"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="实验室认可情况:" prop="approveSituation">
            <el-input
              v-model="form.approveSituation"
              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">
        <el-col :span="12">
          <el-form-item label="溯源性:" prop="traceability">
            <el-input
              v-model="form.traceability"
              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">
        <el-col :span="12">
          <el-form-item label="测试方法:" prop="testMethod">
            <el-input
              v-model="form.testMethod"
              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">
        <el-col :span="12">
          <el-form-item label="技术能力:" prop="techniqueAbility">
            <el-input
              v-model="form.techniqueAbility"
              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">
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input
              v-model="form.remark"
              :placeholder="pageType === 'detail' ? '' : '请输入备注'"
              :disabled="pageType === 'detail'"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="附件:" prop="minioFileName">
            <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="type === 'detail'" :style="{ 'margin-right': '20px' }" @click="upload(fileRef)">
              {{ !form.minioFileName.length ? '上传' : '上传' }}
            </el-button>
            <div v-for="(item, index) in form.minioFileName" :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.minioFileName.length">无</span>
            <input v-show="false" ref="fileRef" type="file" name="upload" multiple @change="onFileChange">
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <detail-block v-loading="loading" title="分包项目-受检设备列表">
    <template v-if="pageType !== 'detail'" #btns>
      <el-button type="primary" @click="multiAdd">
        批量添加
      </el-button>
      <el-button type="info" @click="delRow">
        删除行
      </el-button>
    </template>
    <el-table
      :data="list"
      border
      style="width: 100%;"
      max-height="600"
      @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"
        :width="item.width"
        align="center"
      />
    </el-table>
  </detail-block>
  <!-- 选择设备组件 -->
  <select-equipment-dialog
    ref="selectEquipmentRef"
    :is-multi="true"
    @confirm="clickConfirmEquipment"
  />
</template>