| | |
| | | :close-on-click-modal="false" |
| | | :title="pdftitle" |
| | | :visible.sync="pdfVisible" |
| | | :fullscreen="pdfFullscreen" |
| | | width="60%" |
| | | custom-class="pdf-resize-dialog" |
| | | @closed="pdfFullscreen = false" |
| | | > |
| | | <template slot="title"> |
| | | <span>{{ pdftitle }}</span> |
| | | <el-button class="pdf-fullscreen-btn" size="mini" |
| | | :icon="pdfFullscreen ? 'el-icon-close' : 'el-icon-full-screen'" |
| | | @click="pdfFullscreen = !pdfFullscreen">{{ pdfFullscreen ? "还原" : "全屏" }}</el-button> |
| | | </template> |
| | | <el-alert |
| | | :title=" |
| | | activeName == 2 |
| | | ? '当前正在操作:发票文件(请确认票据属于发票)' |
| | | : '当前正在操作:普通附件(请勿在此上传发票)' |
| | | " |
| | | :type="activeName == 2 ? 'success' : 'warning'" |
| | | :closable="false" |
| | | show-icon |
| | | style="margin-bottom: 10px;" |
| | | /> |
| | | <div style="margin-bottom: 10px;"> |
| | | <el-table :data="tableDatatop" style="width: 100%"> |
| | | <el-table-column |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div |
| | | v-if="this.previewpdf && pdfimgsrcList.length" |
| | | class="pdfimgmin" |
| | | > |
| | | <el-image |
| | | style="width: 95%; height: 90%" |
| | | :src="pdfimg" |
| | | @click="handleImageClick(0)" |
| | | /> |
| | | <custom-image-viewer |
| | | :url-list="pdfimgsrcList" |
| | | :initial-index="currentIndex" |
| | | :visible="viewerVisible" |
| | | @update:visible="viewerVisible = $event" |
| | | @close="handleViewerClose" |
| | | /> |
| | | </div> |
| | | <div v-else class="pdfimgmins">{{ hintitle }}</div> |
| | | <attachment-preview-pane :file="embeddedFile" style="flex: 1; min-width: 0;" /> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="发票文件" :name="2"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div |
| | | v-if="this.previewpdf && invoicepdfimgsrcList.length" |
| | | class="pdfimgmin" |
| | | > |
| | | <el-image |
| | | style="width: 95%; height: 90%" |
| | | :src="invoicepdfimg" |
| | | @click="invoiceHandleImageClick(0)" |
| | | /> |
| | | <custom-image-viewer |
| | | :url-list="invoicepdfimgsrcList" |
| | | :initial-index="invoiceCurrentIndex" |
| | | :visible="invoiceViewerVisible" |
| | | @update:visible="invoiceViewerVisible = $event" |
| | | @close="invoiceHandleViewerClose" |
| | | /> |
| | | </div> |
| | | <div v-else class="pdfimgmins">{{ hintitle }}</div> |
| | | <attachment-preview-pane :file="invoiceEmbeddedFile" style="flex: 1; min-width: 0;" /> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | |
| | | invoicefileListto: [], |
| | | invoicepdfimg: "", |
| | | invoicepdfimgsrcList: [], |
| | | activeName: 1, //文件类型 |
| | | activeName: 2, //文件类型:默认发票文件 |
| | | //上传附件路径 |
| | | uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", |
| | | //文件上传token |
| | |
| | | //票据文件 |
| | | pdftitle: "", |
| | | pdfimg: "", |
| | | invoiceEmbeddedFile: null, |
| | | pdfimgsrcList: [], |
| | | pdfVisible: false, |
| | | previewpdf: false, |
| | |
| | | }, |
| | | // 获取请求头 |
| | | Getnetworkheader() { |
| | | let string = window.location.href; |
| | | if (string.includes("9091")) { |
| | | const index = string.indexOf("9091"); |
| | | this.Networkheader = string.slice(0, index + 4); // 截取9091及其前部字符 |
| | | } else { |
| | | const index = string.indexOf("8032"); |
| | | this.Networkheader = string.slice(0, index + 4); // 截取8032及其前部字符 |
| | | } |
| | | // 以当前页面 origin 为准,兼容 80/8032/9091 及后续端口调整 |
| | | this.Networkheader = window.location.origin; |
| | | }, |
| | | /** |
| | | * 2026-10-15:上传时校验附件文件名(业务要求:不合格立即提示且不加入列表)。 |
| | | * 规则与后端 AttachmentNameValidator 同口径:必须含中文 / 去掉扩展名后主干 ≤20 字 / |
| | | * 规则与后端 AttachmentNameValidator 同口径:不强制含中文 / 去掉扩展名后主干 ≤20 字 / |
| | | * 不含空格及 / \ : * ? " < > | # % 等特殊字符。 |
| | | */ |
| | | checkUploadFileName(file) { |
| | |
| | | const config = { |
| | | headers: { Authorization: "Bearer " + this.ICDtoken } |
| | | }; |
| | | const pdfimg = this.Networkheader + "/prod-api" + response.fileName; |
| | | const pdfimg = this.Networkheader + process.env.VUE_APP_BASE_API + response.fileName; |
| | | //获取票据信息位置 |
| | | if (this.activeName == 1) { |
| | | if (response.code == 200) { |
| | | this.previewpdf = true; |
| | | |
| | | fetch(pdfimg, config) |
| | | .then(response => response.blob()) |
| | | .then(blob => { |
| | | // 将获取的数据流转换为URL |
| | | this.pdfimg = URL.createObjectURL(blob); |
| | | this.pdfimgsrcList.push(URL.createObjectURL(blob)); |
| | | this.fileListto.push({ |
| | | name: file.name, |
| | | url: URL.createObjectURL(blob) |
| | | }); |
| | | }) |
| | | .catch(error => { |
| | | console.error("Error loading image", error); |
| | | return; |
| | | }); |
| | | const localUrl = URL.createObjectURL(file.raw); |
| | | this.pdfimg = localUrl; |
| | | this.embeddedFile = { |
| | | name: file.name, |
| | | url: localUrl, |
| | | type: /\.pdf$/i.test(file.name) ? "pdf" : "image" |
| | | }; |
| | | this.pdfimgsrcList.push(localUrl); |
| | | this.fileListto.push({ |
| | | name: file.name, |
| | | url: localUrl |
| | | }); |
| | | |
| | | this.$modal.msgSuccess(response.msg); |
| | | |
| | |
| | | } else { |
| | | if (response.code == 200) { |
| | | this.previewpdf = true; |
| | | fetch(pdfimg, config) |
| | | .then(response => response.blob()) |
| | | .then(blob => { |
| | | // 将获取的数据流转换为URL |
| | | this.invoicepdfimg = URL.createObjectURL(blob); |
| | | this.invoicepdfimgsrcList.push(URL.createObjectURL(blob)); |
| | | this.invoicefileListto.push({ |
| | | name: file.name, |
| | | url: URL.createObjectURL(blob) |
| | | }); |
| | | }) |
| | | .catch(error => { |
| | | console.error("Error loading image", error); |
| | | return; |
| | | }); |
| | | const localUrl = URL.createObjectURL(file.raw); |
| | | this.invoicepdfimg = localUrl; |
| | | this.invoiceEmbeddedFile = { |
| | | name: file.name, |
| | | url: localUrl, |
| | | type: /\.pdf$/i.test(file.name) ? "pdf" : "image" |
| | | }; |
| | | this.invoicepdfimgsrcList.push(localUrl); |
| | | this.invoicefileListto.push({ |
| | | name: file.name, |
| | | url: localUrl |
| | | }); |
| | | |
| | | this.$modal.msgSuccess(response.msg); |
| | | |
| | |
| | | if (this.rbDetails[index].annexfilesList) { |
| | | const fetchPromises = this.rbDetails[index].annexfilesList.map( |
| | | (value, indexson) => { |
| | | const pdfimg = this.Networkheader + "/prod-api" + value.url; |
| | | const pdfimg = this.Networkheader + process.env.VUE_APP_BASE_API + value.url; |
| | | return fetch(pdfimg, config) |
| | | .then(response => response.blob()) |
| | | .then(blob => { |
| | |
| | | if (this.rbDetails[index].invoicefilesList) { |
| | | const fetchPromises = this.rbDetails[index].invoicefilesList.map( |
| | | (value, indexson) => { |
| | | const pdfimg = this.Networkheader + "/prod-api" + value.url; |
| | | const pdfimg = this.Networkheader + process.env.VUE_APP_BASE_API + value.url; |
| | | return fetch(pdfimg, config) |
| | | .then(response => response.blob()) |
| | | .then(blob => { |
| | |
| | | this.pdftitle = ""; |
| | | } |
| | | |
| | | if (this.activeName == "common") { |
| | | if (this.activeName == 1) { |
| | | this.pdftitle = "共" + this.pdfimgsrcList.length + "项"; |
| | | } else { |
| | | this.pdftitle = "共" + this.invoicepdfimgsrcList.length + "项"; |
| | |
| | | console.log(this.rbDetails[index].annexfilesList, "annexfilesList"); |
| | | }, |
| | | |
| | | // 点击已上传文件 |
| | | // 点击已上传文件:在附件弹窗右侧内嵌预览 |
| | | downFile(item) { |
| | | if (this.operationType == "detail") { |
| | | const source = |
| | | this.activeName == 1 ? this.fileListto : this.invoicefileListto; |
| | | const list = (source || []).map(f => ({ name: f.name, url: f.url })); |
| | | const index = list.findIndex(f => f.url === item.url); |
| | | this.$previewFile(list, index > -1 ? index : 0); |
| | | return; |
| | | } |
| | | const ext = String(item.name || "").toLowerCase().split(".").pop(); |
| | | const isImage = ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext); |
| | | if (ext !== "pdf" && !isImage) { |
| | | this.hintitle = "当前文件暂不支持预览"; |
| | | this.$modal.msgWarning("当前文件暂不支持预览"); |
| | | return; |
| | | } |
| | | const file = { |
| | | name: item.name, |
| | | url: item.url, |
| | | type: ext === "pdf" ? "pdf" : "image" |
| | | }; |
| | | if (this.activeName == 1) { |
| | | this.embeddedFile = file; |
| | | this.pdftitle = |
| | | "共" + this.pdfimgsrcList.length + "项,当前选中" + item.name; |
| | | let name = item.name.split("."); |
| | | if (name[1] == "pdf") { |
| | | this.$modal.msgWarning("当前文件暂不支持预览"); |
| | | this.previewpdf = false; |
| | | this.hintitle = "当前文件暂不支持预览"; |
| | | } else if (name[1] == "jpg" || "png") { |
| | | console.log(item, "展示"); |
| | | this.previewpdf = true; |
| | | if (item.url) { |
| | | this.pdfimg = item.url; |
| | | } else { |
| | | this.pdfimg = ""; |
| | | } |
| | | } else { |
| | | this.hintitle = "当前文件暂不支持预览"; |
| | | this.$modal.msgWarning("当前文件暂不支持预览"); |
| | | this.previewpdf = false; |
| | | } |
| | | } else { |
| | | this.invoiceEmbeddedFile = file; |
| | | this.pdftitle = |
| | | "共" + this.invoicepdfimgsrcList.length + "项,当前选中" + item.name; |
| | | let name = item.name.split("."); |
| | | if (name[1] == "pdf") { |
| | | this.$modal.msgWarning("当前文件暂不支持预览"); |
| | | this.previewpdf = false; |
| | | this.hintitle = "当前文件暂不支持预览"; |
| | | } else if (name[1] == "jpg" || "png") { |
| | | this.previewpdf = true; |
| | | if (item.url) { |
| | | this.invoicepdfimg = item.url; |
| | | } else { |
| | | this.invoicepdfimg = ""; |
| | | } |
| | | } else { |
| | | this.hintitle = "当前文件暂不支持预览"; |
| | | this.$modal.msgWarning("当前文件暂不支持预览"); |
| | | this.previewpdf = false; |
| | | } |
| | | } |
| | | this.pdfVisible = true; |
| | | }, |
| | | getIndexInArray(arr, obj) { |
| | | return arr.indexOf(obj); |
| | |
| | | }, |
| | | Downloadfile(row) { |
| | | console.log(row); |
| | | window.location.href = this.Networkheader + "/prod-api" + row.url; |
| | | window.location.href = this.Networkheader + process.env.VUE_APP_BASE_API + row.url; |
| | | }, |
| | | //表格合计 |
| | | getSummaries(param) { |