<!-- 开箱验收管理详情 --> <script name="EquipmentResumeUnpackDetail" lang="ts" setup> import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' // import * as pdfjsLib from 'pdfjs-dist' import { getInfo, getStream } from '@/api/equipment/resume/unpack' 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 getListRow = ref({}) // 列表页带来的数据 const pdfUrl = ref('') // pdfurl const pdfStream = ref() as any // pdf流 // --------------------------------------路由参数---------------------------------------------- // 从路由中获取页面类型参数 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) } // 新增智能模型台账 const addEquipment = () => { getInfo({ id: infoId.value }).then((res) => { $router.push({ path: `/equipmentInfo/add/${infoId.value}`, query: { unpackRecordId: infoId.value, unpackRecordName: res.data.logName, // 开箱验收记录表名称 equipmentName: res.data.equipmentName, // 智能模型名称 equipmentNo: res.data.equipmentNo, // 智能模型编号 model: res.data.model, // 型号 manufacturer: res.data.manufacturer, // 厂商 manufactureNo: res.data.manufactureNo, // 出厂编号 }, }) }) } // ----------------------------------------------------------------------------------------------- /** * 初始化 */ 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 }) // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js' loading.close() }) } // -----------------------------------------钩子-------------------------------------------------- onMounted(() => { getListRow.value = $route.query.row as any console.log($router.options.history.state.back) if ((`${$router.options.history.state.back!}`).includes('/equipmentInfo/detail')) { // 从开箱验收的详情跳过来 fromPage.value = 'equipment' } init() }) </script> <template> <app-container> <detail-page v-loading="loading" title="开箱验收管理"> <template #btns> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="addEquipment"> 新增智能模型台账 </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> <div style="display: flex;justify-content: center; margin-top: 10px;width: 100%;"> <file-preview :pdf-url="pdfUrl" style="width: 70%;" /> </div> </app-container> </template> <style lang="scss" scoped> // 样式 </style>