<!-- 证书管理 基本信息 -->
<script name="BusinessCertBasic" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from '../cert-interface'
import showPhoto from '@/components/showPhoto/index.vue'
import selectOrderTestEquipment from '@/views/dialog/selectOrderTestEquipment.vue'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import { getDeptTreeList } from '@/api/system/dept'
import useUserStore from '@/store/modules/user'
import useOpenPdfinBrowser from '@/commonMethods/useOpenPdfinBrowser'
import { addCert, draftUpdateCert, failUpdateCert, getCertDetail, submitCert } from '@/api/business/certManage/cert'
import { UploadFile } from '@/api/file'
const props = defineProps({
pageType: { // 页面类型 add新建 edit编辑 detail详情
type: String,
requre: true,
default: 'detail',
},
approvalStatusName: { // 审批状态名称
type: String,
requre: true,
},
processId: { // 流程实例id
type: String,
},
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const $router = useRouter()
const ruleFormRef = ref()
const user = useUserStore() // 用户信息
const form = ref<IForm>({
id: '', // id，更新/删除使用参数
certificateNo: '', // 证书编号
certificateName: '', // 证书名称
orderId: '', // 委托单id
customerName: '', // 委托方名称
sampleId: '', // 被检设备id
sampleNo: '', // 被检设备统一编号
sampleName: '', // 被检设备名称
model: '', // 规格型号
manufactureNo: '', // 出厂编号
staffName: '', // 检定员
conclusion: '', // 结论
traceDate: '', // 检定日期
expirationDate: '', // 检定有效期
deptId: '', // 实验室
deptName: '', // 实验室/使用部门
measureCategory: '', // 业务类型
certificateFile: '', // 证书报告文件(minio存储文件名)
createTime: '', // 创建时间
createUserId: '', // 创建用户id
createUserName: '', // 创建用户
decisionItem: '', // 可选决策项（1同意驳回拒绝 2同意驳回 3同意拒绝，用于待审批列表同意/驳回/拒绝按钮展示）
processId: '', // 流程实例id
taskId: '', // 任务id（同意、驳回等操作使用）
})
const infoId = ref('') // id
const rules = reactive<FormRules>({ // 表单验证规则
certificateNo: [{ required: true, message: '证书编号不能为空', trigger: ['change', 'blur'] }],
certificateName: [{ required: true, message: '证书名称不能为空', trigger: ['change', 'blur'] }],
customerName: [{ required: true, message: '委托方名称不能为空', trigger: ['change', 'blur'] }],
sampleName: [{ required: true, message: '设备名称不能为空', trigger: ['change', 'blur'] }],
model: [{ required: true, message: '规格型号不能为空', trigger: ['change', 'blur'] }],
manufactureNo: [{ required: true, message: '出厂编号不能为空', trigger: ['change', 'blur'] }],
staffName: [{ required: true, message: '检定员不能为空', trigger: ['change', 'blur'] }],
conclusion: [{ required: true, message: '检定结论不能为空', trigger: ['change', 'blur'] }],
traceDate: [{ required: true, message: '检定日期不能为空', trigger: ['change', 'blur'] }],
expirationDate: [{ required: true, message: '检定有效期不能为空', trigger: ['change', 'blur'] }],
deptId: [{ required: true, message: '实验室不能为空', trigger: ['change', 'blur'] }],
measureCategory: [{ required: true, message: '业务类型不能为空', trigger: ['change', 'blur'] }],
certificateFile: [{ required: true, message: '证书报告不能为空', trigger: ['change', 'blur'] }],
})
// -----------------------------------------路由参数----------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.id) {
if ($route.params.id) {
infoId.value = $route.params.id as string
}
}
// --------------------------------------字典---------------------------------------------
const measureCategoryList = ref<dictType[]>([])// 业务类型
const conclusionList = ref<dictType[]>([])// 检定结论
const deptList = ref([]) as any
async function getDict() {
// 获取部门列表
const resDept = await getDeptTreeList()
deptList.value = resDept.data
console.log('部门列表', deptList.value)
// 业务类型
getDictByCode('businessType').then((response) => {
measureCategoryList.value = response.data
})
// 检定结论
getDictByCode('bizConclusion').then((response) => {
conclusionList.value = response.data
})
}
// -------------------------------------------文件上传--------------------------------------
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
// 原生上传
const files = event.target.files // 上传的文件列表
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) {
form.value.certificateFile = res.data[0]
ElMessage.success('文件上传成功')
loading.close()
}
else {
loading.close()
ElMessage.error(res.message)
}
})
}
}
const upload = () => {
fileRef.value.click()
}
// -------------------------------------------选择受检设备------------------------------------------
const selectTestEquipmentRef = ref() // 选择设备组件ref
// 点击从受检设备中添加
const selectTestEquipment = () => {
selectTestEquipmentRef.value.initDialog(false)
}
// 选好设备
const clickConfirmTestEquipment = (val: any) => {
console.log(val)
form.value.sampleId = val.sampleId // 被检设备id
form.value.sampleNo = val.sampleNo // 被检设备编号
form.value.sampleName = val.sampleName // 被检设备名称
form.value.model = val.sampleModel // 规格型号
form.value.manufactureNo = val.manufactureNo // 出厂编号
form.value.customerName = val.customerName // 委托方名称
form.value.orderId = val.orderId // 委托单id
form.value.measureCategory = val.measureCategory // 业务类型
}
// ---------------------------------------------------------------------------------
// 点击证书报告
const clickPrintFile = () => {
useOpenPdfinBrowser(form.value.certificateFile)
}
// 获取证书详情
const fetchInfo = (receiveMajor: string) => {
if (!infoId.value) { return }
getCertDetail({ id: infoId.value, receiveMajor }).then((res) => {
form.value = res.data
// 处理实验室id
let tempDeptId = ''
const tempIndex = deptList.value.findIndex((item: { name: string | number | undefined }) => item.name === form.value.deptName)
if (tempIndex !== -1) {
tempDeptId = deptList.value[tempIndex].id
}
form.value.deptId = tempDeptId
})
}
// 点击保存
const saveForm = () => {
let tempDeptName = ''
const tempIndex = deptList.value.findIndex((item: { id: string | number | undefined }) => item.id === form.value.deptId)
if (tempIndex !== -1) {
tempDeptName = deptList.value[tempIndex].name
}
form.value.deptName = tempDeptName
ruleFormRef.value.validate((valid: any) => {
if (valid) {
// ElMessageBox.confirm(
// '确认保存吗？',
// '提示',
// {
// confirmButtonText: '确认',
// cancelButtonText: '取消',
// type: 'warning',
// },
// ).then(() => {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
const params = {
...form.value,
id: infoId.value,
}
if (props.pageType === 'add') { // 新建
addCert(params).then((res) => {
loading.close()
form.value.certificateNo = res.data.certificateNo // 证书编号
infoId.value = res.data // id
emits('addSuccess', infoId.value)
fetchInfo()
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
else if (props.pageType === 'edit') { // 编辑
console.log(props.approvalStatusName)
if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') {
draftUpdateCert(params).then((res) => {
loading.close()
emits('addSuccess', infoId.value)
// fetchInfo()
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
else { // '未通过' || '已取消'
failUpdateCert(params).then((res) => {
loading.close()
emits('submitSuccess')
// fetchInfo()
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
}
// })
}
})
}
// ----------------------------------------------提交--------------------------------------------
// 提交
/**
*
* @param processId 流程实例id
* @param id
*/
const submitForm = (processId: string, id: string) => {
ElMessageBox.confirm(
'确认提交吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.6)',
})
submitCert({ id, formId: SCHEDULE.CERTIFICATE_PRINT_APPROVAL }).then((res) => {
ElMessage.success('已提交')
emits('submitSuccess')
loading.close()
})
})
}
// ---------------------------------------------钩子----------------------------------------------
onMounted(async () => {
await getDict()
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() // 获取详情信息
}
})
defineExpose({ saveForm, submitForm, fetchInfo })
</script>
<template>
<detail-block title="">
<el-form
ref="ruleFormRef"
:model="form"
:label-width="120"
:rules="rules"
label-position="right"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="证书编号:" prop="certificateNo">
<el-input
v-model="form.certificateNo"
:class="{ 'detail-input': pageType === 'detail' }"
:placeholder="pageType === 'detail' ? ' ' : '请输入证书编号'"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证书名称:" prop="certificateName">
<el-input
v-model="form.certificateName"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
:placeholder="pageType === 'detail' ? ' ' : '请输入证书名称'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="委托方名称:" prop="customerName">
<el-input
v-model="form.customerName"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
:placeholder="pageType === 'detail' ? ' ' : '请输入委托方名称'"
>
<template v-if="pageType !== 'detail'" #append>
<el-button
size="small"
@click="selectTestEquipment"
>
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备名称:" prop="sampleName">
<el-input
v-model="form.sampleName"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
:placeholder="pageType === 'detail' ? ' ' : '请输入设备名称'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="规格型号:" prop="model">
<el-input
v-model="form.model"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
:placeholder="pageType === 'detail' ? ' ' : '请输入规格型号'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出厂编号:" prop="manufactureNo">
<el-input
v-model="form.manufactureNo"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
:placeholder="pageType === 'detail' ? ' ' : '请输入出厂编号'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="业务类型:" prop="measureCategory">
<el-select
v-model.trim="form.measureCategory"
clearable
:placeholder="pageType === 'detail' ? '' : '请选择业务类型'"
disabled
class="full-width-input"
>
<el-option
v-for="item in measureCategoryList"
: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="deptId">
<dept-select
ref="deptSelect"
v-model="form.deptId"
placeholder="请选择实验室"
:dept-show="true"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定员:" prop="staffName">
<el-input
v-model="form.staffName"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
:placeholder="pageType === 'detail' ? ' ' : '请输入检定员'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定结论:" prop="conclusion">
<el-select
v-model="form.conclusion"
clearable
:placeholder="pageType === 'detail' ? '' : '请选择检定结论'"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option
v-for="item in conclusionList"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定日期:" prop="traceDate">
<el-date-picker
v-model="form.traceDate"
type="date"
format="YYYY-MM-DD"
:placeholder="pageType === 'detail' ? ' ' : '请选择检定日期'"
value-format="YYYY-MM-DD"
:disabled="pageType === 'detail'"
style="width: 100%;"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定有效期:" prop="expirationDate">
<el-date-picker
v-model="form.expirationDate"
type="date"
format="YYYY-MM-DD"
:placeholder="pageType === 'detail' ? ' ' : '请选择检定有效期'"
value-format="YYYY-MM-DD"
:disabled="pageType === 'detail'"
style="width: 100%;"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="证书报告" prop="certificateFile">
<show-photo v-if="form.certificateFile" :minio-file-name="form.certificateFile" />
<el-button v-if="pageType !== 'detail'" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.certificateFile === '' ? '0px' : '20px' }" @click="upload">
{{ form.certificateFile === '' ? '上传' : '更换附件' }}
</el-button>
<input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange">
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-block>
<!-- 选择委托单设备 -->
<select-order-test-equipment ref="selectTestEquipmentRef" @confirm="clickConfirmTestEquipment" />
</template>
<style lang="scss" scoped>
.link {
color: #5da0ff;
text-decoration: underline;
cursor: pointer;
margin-right: 8px;
}
</style>
