<!-- 分包证书管理详情 -->
<script lang="ts" setup name="CertificateEdit">
import type { Ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import type { IForm } from './certificate-interface'
import type { dictType } from '@/global'
import { printPdf } from '@/utils/printUtils'
import { getDictByCode } from '@/api/system/dict'
const $router = useRouter() // 初始化router
const $route = useRoute()
const textMap: { [key: string]: string } = {
edit: '编辑',
add: '新建',
detail: '详情',
}// 字典
const pageType = ref('add') // 页面类型: add, edit, detail
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const form: Ref<IForm> = ref({ // 表单
id: '',
certificateNo: '', // 证书号
certificateName: '', // 证书名称
outsourcerNo: '', // 检测单位编号
outsourcerName: '', // 检测单位名称
outsourcerId: '', // 检测单位id
sampleId: '', // 受检设备id
sampleName: '', // 受检设备名称
sampleNo: '', // 受检设备编号
model: '', // 型号
manufactureNo: '', // 出厂编号
orderId: '', // 任务单id
orderNo: '', // 任务单编号
checkDate: '', // 检定(校准)日期
certificateValid: '', // 证书有效期
meterIdentify: '', // 计量标识
certificateReportFile: '', // 证书报告附件
originalRecordFile: '', // 原始记录文件
})
const ruleFormRef = ref<FormInstance>() // 表单ref
// 关闭
const close = () => {
$router.back()
}
// -----------------------------------------路由参数--------------------------------
if ($route.params && $route.params.type) {
pageType.value = $route.params.type as string
if ($route.params.id) {
infoId.value = $route.params.id as string
}
}
// ------------------------------------------字典----------------------------------------------
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
/**
* 获取字典
*/
async function getDict() {
// 计量标识
const response = await getDictByCode('bizMeterIdentify')
meterIdentifyDict.value = response.data
}
// 点击打印
const print = () => {
printPdf(form.value.certificateReportFile)
}
onMounted(() => {
getDict().then(() => {
if (pageType.value !== 'add') {
form.value.certificateNo = $route.query.certificateNo as string// 证书号
form.value.certificateName = $route.query.certificateName as string// 证书名称
form.value.certificateReportFile = $route.query.certificateReportFile as string// 证书文件
form.value.originalRecordFile = $route.query.originalRecordFile as string// 原始记录文件
form.value.outsourcerName = $route.query.outsourcerName as string// 检测单位名称-分包方名称
form.value.sampleName = $route.query.sampleName as string// 样品名称
form.value.sampleNo = $route.query.sampleNo as string// 样品编号
form.value.model = $route.query.sampleModel as string// 型号
form.value.manufactureNo = $route.query.manufactureNo as string// 出厂编号
form.value.orderNo = $route.query.orderNo as string// 任务单编号
form.value.checkDate = $route.query.checkDate as string// 检定(校准)日期
form.value.certificateValid = $route.query.certificateValid as string// 证书有效期
form.value.outsourcerNo = $route.query.outsourcerNo as string// 检测单位编号
form.value.outsourcerId = $route.query.outsourcerId as string// 检测单位id
form.value.sampleId = $route.query.sampleId as string// 受检设备id
form.value.orderId = $route.query.orderId as string// 任务单id
form.value.meterIdentify = $route.query.meterIdentify as string// 计量标识
form.value.id = $route.query.id as string// id
}
})
})
</script>
<template>
<div>
<!-- 布局 -->
<app-container>
<detail-page v-loading="loading" :title="`分包证书管理-${textMap[pageType]}`">
<template #btns>
<el-button type="info" @click="close">
关闭
</el-button>
</template>
<div id="form">
<el-form
ref="ruleFormRef"
:model="form"
:label-width="120"
label-position="right"
:rules="rules"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="证书编号:" prop="certificateNo">
<el-input
v-model="form.certificateNo"
:placeholder="pageType === 'detail' ? '' : '证书编号'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证书名称:" prop="certificateName">
<el-input
v-model.trim="form.certificateName"
:placeholder="pageType === 'detail' ? '' : '证书名称'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="受检设备名称:" prop="sampleName">
<el-input
v-model="form.sampleName"
:placeholder="pageType === 'detail' ? ' ' : '受检设备名称'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="规格型号:" prop="model">
<el-input
v-model="form.model"
:placeholder="pageType === 'detail' ? ' ' : '规格型号'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出厂编号:" prop="manufactureNo">
<el-input
v-model="form.manufactureNo"
:placeholder="pageType === 'detail' ? ' ' : '出厂编号'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产厂家:" prop="manufacturer">
<el-input
v-model="form.manufacturer"
:placeholder="pageType === 'detail' ? ' ' : '生产厂家'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="任务单编号:" prop="orderNo">
<el-input
v-model.trim="form.orderNo"
:placeholder="pageType === 'detail' ? ' ' : '任务单编号'"
disabled
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="委托方:" prop="customerName">
<el-input
v-model.trim="form.customerName"
:placeholder="pageType === 'detail' ? ' ' : '委托方'"
disabled
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="分包方名称:" prop="outsourcerName">
<el-input
v-model.trim="form.outsourcerName"
:placeholder="pageType === 'detail' ? ' ' : '分包方名称'"
disabled
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系人:" prop="lxr">
<el-input
v-model.trim="form.lxr"
:placeholder="pageType === 'detail' ? ' ' : '联系人'"
disabled
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定日期:" prop="checkDate">
<el-date-picker
v-model="form.checkDate"
type="date"
style="width: 100%;"
:placeholder="pageType === 'detail' ? '' : '检定日期'"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定有效期:" prop="certificateValid">
<el-date-picker
v-model="form.certificateValid"
type="date"
style="width: 100%;"
:placeholder="pageType === 'detail' ? '' : '检定有效期'"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定结论:" prop="conclusion">
<el-input
v-model.trim="form.conclusion"
:placeholder="pageType === 'detail' ? ' ' : '检定结论'"
disabled
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="计量标识:" prop="meterIdentify">
<el-select
v-model="form.meterIdentify"
:placeholder="pageType === 'detail' ? ' ' : '计量标识'"
disabled
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-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="证书报告:" prop="certificateReportFile">
<show-photo v-if="form.certificateReportFile" :minio-file-name="form.certificateReportFile" />
<span v-if="!form.certificateReportFile">无</span>
<el-button v-if="form.certificateReportFile" id="file" type="primary" disabled :style="{ 'margin-left': form.certificateReportFile === '' ? '0px' : '20px' }" @click="print">
打印
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</detail-page>
</app-container>
</div>
</template>
