刘泉佳
85602ff98f
# Conflicts: # src/components/vehicle-attachment-table/main.vue # src/option/payment/paymentApplication.js # src/views/payment/payment-application.vue # src/views/payment/receipt-claim-record.vue # src/views/vehicle/customer-archive.vue
468 lines
14 KiB
Vue
468 lines
14 KiB
Vue
<template>
|
|
<div class="vehicle-attachment-table">
|
|
<div class="vehicle-attachment-table__toolbar">
|
|
<el-button type="primary" :disabled="!rows.length" @click="batchDownload">
|
|
批量下载
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table :data="rows" border @selection-change="selectedRows = $event">
|
|
<el-table-column v-if="!readonly" type="selection" width="55" align="center" />
|
|
<el-table-column type="index" label="序号" width="70" align="center" />
|
|
<el-table-column
|
|
label="文件名"
|
|
min-width="240"
|
|
show-overflow-tooltip
|
|
class-name="is-ellipsis-link"
|
|
>
|
|
<template #default="{ row }">
|
|
<span
|
|
class="attachment-file-name"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="previewAttachment(row)"
|
|
@keydown.enter="previewAttachment(row)"
|
|
@keydown.space.prevent="previewAttachment(row)"
|
|
>{{ attachmentName(row) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="附件描述" min-width="220">
|
|
<template #default="{ row, $index }">
|
|
<span v-if="readonly">{{ row.description || '-' }}</span>
|
|
<el-input
|
|
v-else
|
|
:model-value="row.description"
|
|
maxlength="200"
|
|
placeholder="请输入"
|
|
@update:model-value="value => updateDescription($index, value)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="文件大小" width="120" align="center">
|
|
<template #default="{ row }">{{ formatFileSize(row.size) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="uploadUserName" label="上传人" width="140" align="center" />
|
|
<el-table-column prop="uploadTime" label="上传时间" width="180" align="center" sortable />
|
|
<el-table-column
|
|
v-if="!readonly || showViewActions"
|
|
label="操作"
|
|
:width="readonly ? 120 : 170"
|
|
align="center"
|
|
fixed="right"
|
|
>
|
|
<template #default="{ row, $index }">
|
|
<div class="vehicle-attachment-table__actions">
|
|
<el-link type="primary" :disabled="kingdeeBusy" @click="previewAttachment(row)"
|
|
>查看</el-link
|
|
>
|
|
<el-link type="primary" :disabled="kingdeeBusy" @click="downloadAttachment(row)"
|
|
>下载</el-link
|
|
>
|
|
<el-link v-if="!readonly" type="danger" @click="removeAttachment($index)">删除</el-link>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div v-if="!readonly" class="vehicle-attachment-table__upload">
|
|
<vehicle-attachment-upload
|
|
:model-value="rows"
|
|
:file-types="attachmentFileTypes"
|
|
:max-size="maxSize"
|
|
:show-tip="true"
|
|
:tip="`支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过${maxSize}MB`"
|
|
:show-file-list="false"
|
|
button-text="上传附件"
|
|
@update:model-value="handleUploadChange"
|
|
/>
|
|
</div>
|
|
|
|
<el-dialog
|
|
v-model="documentPreviewVisible"
|
|
:title="previewFile.name || '附件预览'"
|
|
append-to-body
|
|
destroy-on-close
|
|
width="90%"
|
|
top="4vh"
|
|
class="vehicle-attachment-table__viewer-dialog"
|
|
@closed="handlePreviewClosed"
|
|
>
|
|
<pdf-preview
|
|
v-if="documentPreviewVisible && previewFile.url && previewFile.isPdf"
|
|
:source="previewFile.url"
|
|
@error="handlePreviewError"
|
|
/>
|
|
<open-file-viewer
|
|
v-else-if="documentPreviewVisible && previewFile.url"
|
|
:file="previewFile.url"
|
|
:file-name="previewFile.name"
|
|
:mime-type="previewFile.mimeType"
|
|
width="100%"
|
|
height="72vh"
|
|
fit="contain"
|
|
theme="auto"
|
|
locale="zh-CN"
|
|
:toolbar="viewerToolbar"
|
|
:plugins="viewerPlugins"
|
|
@unsupported="handlePreviewUnsupported"
|
|
@error="handlePreviewError"
|
|
/>
|
|
</el-dialog>
|
|
|
|
<el-image-viewer
|
|
v-if="imagePreviewVisible"
|
|
:url-list="imagePreviewUrls"
|
|
:initial-index="imagePreviewIndex"
|
|
@close="imagePreviewVisible = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ElImageViewer } from 'element-plus';
|
|
import { OpenFileViewer } from '@open-file-viewer/vue';
|
|
import { fallbackPlugin, imagePlugin, officePlugin, textPlugin } from '@open-file-viewer/core';
|
|
import '@open-file-viewer/core/style.css';
|
|
import pdfWorkerSrc from 'pdfjs-dist/build/pdf.worker.mjs?url';
|
|
import PdfPreview from '@/components/pdf-preview/main.vue';
|
|
import { downloadFileByUrl } from '@/utils/util';
|
|
import {
|
|
downloadKingdeeInvoiceFile,
|
|
isKingdeePathAttachment,
|
|
requestKingdeeFile,
|
|
} from '@/utils/kingdee-attachment';
|
|
|
|
const attachmentFileTypes = [
|
|
'pdf',
|
|
'bmp',
|
|
'jpeg',
|
|
'png',
|
|
'jpg',
|
|
'doc',
|
|
'docx',
|
|
'ppt',
|
|
'pptx',
|
|
'xlsx',
|
|
'xls',
|
|
'eml',
|
|
'msg',
|
|
'zip',
|
|
];
|
|
|
|
const viewerPlugins = [
|
|
imagePlugin(),
|
|
officePlugin({ pdf: { workerSrc: pdfWorkerSrc, useFetchData: true } }),
|
|
textPlugin(),
|
|
fallbackPlugin(),
|
|
];
|
|
|
|
export default {
|
|
name: 'VehicleAttachmentTable',
|
|
components: {
|
|
ElImageViewer,
|
|
OpenFileViewer,
|
|
PdfPreview,
|
|
},
|
|
props: {
|
|
modelValue: {
|
|
type: [Array, String, Object],
|
|
default: () => [],
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
maxSize: {
|
|
type: Number,
|
|
default: 500,
|
|
},
|
|
// 金蝶侧附件（piaozone path 型）代理下载所依赖的发票号；行内自带 invoiceNo 时优先用行内值
|
|
kingdeeInvoiceNo: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
// 查看态也展示「查看/下载」操作列（编辑态始终展示，含删除）
|
|
showViewActions: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
emits: ['update:modelValue'],
|
|
data() {
|
|
return {
|
|
attachmentFileTypes,
|
|
selectedRows: [],
|
|
imagePreviewVisible: false,
|
|
imagePreviewUrls: [],
|
|
imagePreviewIndex: 0,
|
|
documentPreviewVisible: false,
|
|
previewFile: {},
|
|
// 金蝶侧附件代理请求进行中（行级按钮共享 loading 守卫，防重复触发）
|
|
kingdeeBusy: false,
|
|
// 金蝶附件预览用的 objectURL，弹窗关闭时回收
|
|
kingdeeObjectUrl: '',
|
|
viewerPlugins,
|
|
viewerToolbar: {
|
|
download: true,
|
|
fullscreen: true,
|
|
print: true,
|
|
rotate: true,
|
|
zoom: true,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
rows() {
|
|
if (Array.isArray(this.modelValue)) return this.modelValue;
|
|
if (this.modelValue && typeof this.modelValue === 'object') return [this.modelValue];
|
|
if (!this.modelValue) return [];
|
|
try {
|
|
const rows = JSON.parse(this.modelValue);
|
|
return Array.isArray(rows) ? rows : [];
|
|
} catch (error) {
|
|
return String(this.modelValue)
|
|
.split(',')
|
|
.map(item => item.trim())
|
|
.filter(Boolean)
|
|
.map(item => ({ name: item, url: item }));
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
attachmentName(row = {}) {
|
|
return row.originalName || row.name || row.fileName || '附件';
|
|
},
|
|
attachmentUrl(row = {}) {
|
|
return row.url || row.link || row.fileUrl || row.downloadUrl || row.domain || row.src || '';
|
|
},
|
|
kingdeeInvoiceNoOf(row = {}) {
|
|
return row.invoiceNo || this.kingdeeInvoiceNo || '';
|
|
},
|
|
isKingdeeRow(row = {}) {
|
|
return isKingdeePathAttachment(row) && Boolean(this.kingdeeInvoiceNoOf(row));
|
|
},
|
|
attachmentExtension(row = {}) {
|
|
const source = String(this.attachmentName(row) || this.attachmentUrl(row)).split('?')[0];
|
|
const index = source.lastIndexOf('.');
|
|
return index > -1 ? source.slice(index + 1).toLowerCase() : '';
|
|
},
|
|
isImage(row) {
|
|
return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(this.attachmentExtension(row));
|
|
},
|
|
isPdf(row) {
|
|
const mimeType = String(row.mimeType || row.contentType || '').toLowerCase();
|
|
return mimeType.includes('application/pdf') || this.attachmentExtension(row) === 'pdf';
|
|
},
|
|
emitRows(rows) {
|
|
this.$emit('update:modelValue', rows);
|
|
},
|
|
handleUploadChange(rows) {
|
|
const uploadUserName = this.$store.getters.userInfo?.realName || '';
|
|
const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
this.emitRows(
|
|
(rows || []).map(row => ({
|
|
...row,
|
|
description: row.description || '',
|
|
uploadUserName: row.uploadUserName || uploadUserName,
|
|
uploadTime: row.uploadTime || uploadTime,
|
|
}))
|
|
);
|
|
},
|
|
updateDescription(index, description) {
|
|
const rows = this.rows.map((row, rowIndex) =>
|
|
rowIndex === index ? { ...row, description } : row
|
|
);
|
|
this.emitRows(rows);
|
|
},
|
|
removeAttachment(index) {
|
|
const rows = [...this.rows];
|
|
rows.splice(index, 1);
|
|
this.emitRows(rows);
|
|
},
|
|
formatFileSize(size) {
|
|
if (!size) return '';
|
|
const value = Number(size);
|
|
if (!Number.isFinite(value)) return String(size);
|
|
if (value < 1024) return `${value}B`;
|
|
if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)}KB`;
|
|
return `${(value / 1024 / 1024).toFixed(1)}MB`;
|
|
},
|
|
downloadAttachment(row) {
|
|
// 金蝶侧附件（piaozone path 型）经后端代理 A801-2 下载，OSS 直链维持前端直连下载
|
|
if (this.isKingdeeRow(row)) {
|
|
return this.downloadKingdeeAttachment(row);
|
|
}
|
|
const url = this.attachmentUrl(row);
|
|
if (!url) {
|
|
this.$message.warning('附件地址为空，无法下载');
|
|
return;
|
|
}
|
|
downloadFileByUrl(url, this.attachmentName(row));
|
|
},
|
|
async downloadKingdeeAttachment(row) {
|
|
if (this.kingdeeBusy) return;
|
|
this.kingdeeBusy = true;
|
|
try {
|
|
await downloadKingdeeInvoiceFile(this.kingdeeInvoiceNoOf(row), this.attachmentName(row));
|
|
} finally {
|
|
this.kingdeeBusy = false;
|
|
}
|
|
},
|
|
batchDownload() {
|
|
const rows = this.selectedRows.length ? this.selectedRows : this.rows;
|
|
const kingdeeRows = rows.filter(row => this.isKingdeeRow(row));
|
|
const urlRows = rows.filter(row => !this.isKingdeeRow(row) && this.attachmentUrl(row));
|
|
if (!kingdeeRows.length && !urlRows.length) {
|
|
this.$message.warning(
|
|
this.selectedRows.length ? '所选附件暂无可下载地址' : '暂无可下载附件'
|
|
);
|
|
return;
|
|
}
|
|
urlRows.forEach((row, index) => {
|
|
window.setTimeout(() => this.downloadAttachment(row), index * 500);
|
|
});
|
|
// 金蝶侧附件走代理接口，串行触发避免并发重复回源
|
|
this.downloadKingdeeRows(kingdeeRows);
|
|
},
|
|
async downloadKingdeeRows(rows) {
|
|
if (this.kingdeeBusy) return;
|
|
this.kingdeeBusy = true;
|
|
try {
|
|
for (const row of rows) {
|
|
await downloadKingdeeInvoiceFile(this.kingdeeInvoiceNoOf(row), this.attachmentName(row));
|
|
}
|
|
} finally {
|
|
this.kingdeeBusy = false;
|
|
}
|
|
},
|
|
previewAttachment(row) {
|
|
// 金蝶侧附件经 A801-2 代理取流后进弹窗预览，OSS 直链维持原逻辑
|
|
if (this.isKingdeeRow(row)) {
|
|
return this.previewKingdeeAttachment(row);
|
|
}
|
|
const url = this.attachmentUrl(row);
|
|
if (!url) {
|
|
this.$message.warning('附件地址为空，无法预览');
|
|
return;
|
|
}
|
|
if (this.isImage(row)) {
|
|
this.imagePreviewUrls = this.rows
|
|
.filter(item => this.isImage(item) && this.attachmentUrl(item))
|
|
.map(item => this.attachmentUrl(item));
|
|
this.imagePreviewIndex = Math.max(this.imagePreviewUrls.indexOf(url), 0);
|
|
this.imagePreviewVisible = true;
|
|
return;
|
|
}
|
|
const isPdf = this.isPdf(row);
|
|
this.previewFile = {
|
|
name: this.attachmentName(row),
|
|
url,
|
|
mimeType: isPdf ? 'application/pdf' : row.mimeType || row.contentType || '',
|
|
isPdf,
|
|
};
|
|
this.documentPreviewVisible = true;
|
|
},
|
|
async previewKingdeeAttachment(row) {
|
|
// OFD 版式文件浏览器无法在线渲染，直接提示下载，避免拉流后预览失败
|
|
if (this.attachmentExtension(row) === 'ofd') {
|
|
this.$message.warning('OFD 版式文件不支持在线预览，请使用下载获取后查看');
|
|
return;
|
|
}
|
|
if (this.kingdeeBusy) return;
|
|
this.kingdeeBusy = true;
|
|
try {
|
|
const blob = await requestKingdeeFile(this.kingdeeInvoiceNoOf(row));
|
|
this.releaseKingdeeObjectUrl();
|
|
const isPdf = this.isPdf(row) || String(blob.type || '').includes('application/pdf');
|
|
this.kingdeeObjectUrl = URL.createObjectURL(blob);
|
|
this.previewFile = {
|
|
name: this.attachmentName(row),
|
|
url: this.kingdeeObjectUrl,
|
|
mimeType: isPdf ? 'application/pdf' : blob.type || '',
|
|
isPdf,
|
|
};
|
|
this.documentPreviewVisible = true;
|
|
} catch (error) {
|
|
if (!error?.silent) this.$message.error(error?.message || '附件预览失败');
|
|
} finally {
|
|
this.kingdeeBusy = false;
|
|
}
|
|
},
|
|
handlePreviewClosed() {
|
|
this.releaseKingdeeObjectUrl();
|
|
this.previewFile = {};
|
|
},
|
|
releaseKingdeeObjectUrl() {
|
|
if (this.kingdeeObjectUrl) {
|
|
URL.revokeObjectURL(this.kingdeeObjectUrl);
|
|
this.kingdeeObjectUrl = '';
|
|
}
|
|
},
|
|
handlePreviewUnsupported() {
|
|
this.$message.warning('当前文件暂不支持在线预览');
|
|
},
|
|
handlePreviewError() {
|
|
this.$message.error('附件预览失败');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.vehicle-attachment-table {
|
|
width: 100%;
|
|
|
|
&__toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&__file-name {
|
|
color: #409eff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__file-name:hover,
|
|
&__file-name:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
:deep(.el-link) {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
&__upload {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 12px;
|
|
|
|
:deep(.vehicle-attachment-upload) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
:deep(.el-table th.el-table__cell) {
|
|
height: 42px;
|
|
padding: 8px 0;
|
|
background: #fafafa;
|
|
}
|
|
|
|
:deep(.el-table td.el-table__cell) {
|
|
height: 52px;
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
|
|
:global(.vehicle-attachment-table__viewer-dialog .el-dialog__body) {
|
|
padding: 12px 16px 16px;
|
|
}
|
|
</style>
|