<!-- 合同执行变更登记表 --> <script name="ResourceCustomerContractDetail" lang="ts" setup> import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import dayjs from 'dayjs' import { getStream, handleCustomerAdvice, sendTo } from '@/api/resource/contract' import FilterCustomerStaff from '@/views/resource/common/filterCustomerStaff.vue' import filePreview from '@/components/filePreview/filePreview.vue' import { getBase64, getObjectURL } from '@/utils/download' import { exportFile } from '@/utils/exportUtils' import { printPdf } from '@/utils/printUtils' const loading = ref(false) // 表单加载状态 const infoId = ref('') // id const printFileName = ref('') // 文件名 const $route = useRoute() const $router = useRouter() const fromPage = ref('') // 来源页面 const pdfUrl = ref('') // pdfurl const pdfStream = ref() as any // pdf流 const customerName = ref('') // 委托方 // --------------------------------------路由参数---------------------------------------------- // 从路由中获取页面类型参数 if ($route.params) { if ($route.params.id) { infoId.value = $route.params.id as string } } // -----------------------------------------按钮-------------------------------------------------- // 关闭新增页面的回调 const close = () => { $router.back() } // 导出word const exportWord = () => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) getStream({ id: infoId.value, pdf: false }).then((res) => { exportFile(res.data, '合同执行变更登记表.doc') loading.close() }) } // 导出pdf const exportPdf = () => { exportFile(pdfStream.value, '合同执行变更登记表.pdf') } // 打印 const print = () => { const blobUrl = URL.createObjectURL(pdfStream.value) printPdf(blobUrl) } // ----------------------------------------------------------------------------------------------- /** * 初始化 */ function init() { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) getStream({ id: infoId.value, pdf: true }).then((res) => { pdfStream.value = new Blob([res.data]) getBase64(res.data).then((res) => { pdfUrl.value = res as string }) loading.close() }) } // ----------------------------------------------发送给委托方----------------------------------------- const refCustomerStaffFilter = ref() // 点击 发送 按钮 const sendToCustomer = () => { refCustomerStaffFilter.value.showOrHideFilterDialog(true, customerName.value, true) } const sysUserSelectedHandler = (row: any) => { refCustomerStaffFilter.value.showOrHideFilterDialog(false) if (row.id !== '') { sendTo({ id: infoId.value, noticeUserId: row.id, noticeUserName: row.name }).then((res) => { if (res.code === 200) { // 提示保存成功 ElMessage.success(`通知单发送到送检单位 ${row.customerName} 的 ${row.name} 成功`) } else { // 提示失败信息 ElMessage.error(`通知单发送至送检单位失败:${res.message}`) } }) } else { ElMessage.error('发送给委托方人员不能为空,请重新选择') } } // 处理受检系统委托方的意见,暂时提供给测试使用, 正式部署需要删除 const handleCustomer = (type: 'agree' | 'refuse') => { const title = type === 'agree' ? '同意' : '拒绝' const params = { customerAdvice: type === 'agree' ? '同意' : '拒绝', customerAdviceTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), id: infoId.value, } handleCustomerAdvice(params).then(() => { ElMessage.success(`已${title}`) }) } // -----------------------------------------钩子-------------------------------------------------- onMounted(() => { customerName.value = $route.query.customerName as string console.log('委托方名称', customerName.value) init() }) </script> <template> <div class="certManage-apply"> <app-container> <detail-page v-loading="loading" title="合同执行变更登记表"> <template #btns> <el-button v-if="fromPage !== 'equipment'" type="success" @click="handleCustomer('agree')"> 同意(模拟受检操作,提供测试使用,之后删除) </el-button> <el-button v-if="fromPage !== 'equipment'" type="danger" @click="handleCustomer('refuse')"> 拒绝(模拟受检操作,提供测试使用,之后删除) </el-button> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="sendToCustomer"> 发送给委托方 </el-button> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="exportWord"> 导出word </el-button> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="exportPdf"> 导出pdf </el-button> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="print"> 打印 </el-button> <el-button type="info" @click="close"> 关闭 </el-button> </template> </detail-page> <filter-customer-staff ref="refCustomerStaffFilter" title="请选择委托方" @record-selected="sysUserSelectedHandler" /> <div style="display: flex;justify-content: center; margin-top: 10px;width: 100%;"> <file-preview :pdf-url="pdfUrl" style="width: 70%;" /> </div> </app-container> </div> </template> <style lang="scss"> .certManage-apply { .el-radio__label { display: block !important; } } </style>