b2894lxlx
e2e2eb9a2f
修复上传成功后表格不回显，附件类型可切换，未匹配文件名默认其他文件；列表附件上传支持合同文件/其它附件。 Co-authored-by: Cursor <cursoragent@cursor.com>
726 lines
24 KiB
Vue
726 lines
24 KiB
Vue
<template>
|
||
<div class="contract-attachment-section">
|
||
<section
|
||
v-if="!dialogOnly"
|
||
class="contract-manage-form__section contract-manage-form__section--panel contract-manage-form__section--attachment"
|
||
>
|
||
<div class="contract-manage-form__attachment-head">
|
||
<div class="dialog-section-title">{{ title }}</div>
|
||
<el-button type="primary" :disabled="!rows.length" @click="batchDownload"
|
||
>批量下载</el-button
|
||
>
|
||
</div>
|
||
<el-table
|
||
:data="rows"
|
||
border
|
||
class="contract-manage-form__attachment-table"
|
||
@selection-change="selected = $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 v-if="attachmentType" label="附件类型" min-width="160" align="center">
|
||
<template #default="{ row, $index }">
|
||
<span v-if="readonly || isRowLocked(row)">{{ row.fileType || '-' }}</span>
|
||
<el-select
|
||
v-else
|
||
:model-value="row.fileType"
|
||
placeholder="请选择"
|
||
style="width: 100%"
|
||
teleported
|
||
clearable
|
||
@update:model-value="value => updateRowFileType($index, value)"
|
||
>
|
||
<el-option
|
||
v-for="item in contractAttachmentTypeOptions"
|
||
:key="`${item.value}-${item.label}`"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="文件名"
|
||
min-width="240"
|
||
align="left"
|
||
header-align="left"
|
||
show-overflow-tooltip
|
||
>
|
||
<template #default="{ row }">
|
||
<el-link type="primary" @click="preview?.(row, rows)">{{
|
||
attachmentName(row)
|
||
}}</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="description" label="附件描述" min-width="220">
|
||
<template #default="{ row, $index }">
|
||
<span v-if="readonly || isRowLocked(row)">{{ row.description || '-' }}</span>
|
||
<el-input
|
||
v-else
|
||
:model-value="row.description"
|
||
maxlength="200"
|
||
@update:model-value="value => updateRowDescription($index, value)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="文件大小" width="120" align="center">
|
||
<template #default="{ row }">{{ formatSize(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" label="操作" width="100" align="center" fixed="right">
|
||
<template #default="{ row, $index }">
|
||
<span v-if="isRowLocked(row)">-</span>
|
||
<el-link v-else type="danger" @click="remove($index)">删除</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div v-if="!readonly" class="contract-manage-form__attachment-upload">
|
||
<template v-if="useUploadDialog">
|
||
<el-button type="primary" plain @click="openUploadDialog">上传附件</el-button>
|
||
<span class="contract-manage-form__attachment-tip">
|
||
支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过50M
|
||
</span>
|
||
</template>
|
||
<vehicle-attachment-upload
|
||
v-else
|
||
:model-value="rows"
|
||
:file-types="attachmentFileTypes"
|
||
:max-size="50"
|
||
show-tip
|
||
tip="支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过50M"
|
||
:show-file-list="false"
|
||
button-text="上传附件"
|
||
@change="handleChange"
|
||
@success="handleUploadSuccess"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<el-dialog
|
||
v-model="uploadDialogVisible"
|
||
title="附件上传"
|
||
width="560px"
|
||
append-to-body
|
||
destroy-on-close
|
||
:close-on-click-modal="false"
|
||
class="contract-attachment-upload-dialog"
|
||
@closed="resetUploadDialog"
|
||
>
|
||
<div class="contract-attachment-upload-dialog__body">
|
||
<div class="contract-attachment-upload-dialog__field">
|
||
<span class="contract-attachment-upload-dialog__label">附件位置</span>
|
||
<el-select
|
||
v-model="uploadDialogLocation"
|
||
placeholder="请选择附件位置"
|
||
style="width: 100%"
|
||
@change="syncUploadDialogTypeByLocation"
|
||
>
|
||
<el-option
|
||
v-for="item in resolvedLocationOptions"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="contract-attachment-upload-dialog__field">
|
||
<span class="contract-attachment-upload-dialog__label">附件类型</span>
|
||
<el-select v-model="uploadDialogType" placeholder="请选择附件类型" style="width: 100%">
|
||
<el-option
|
||
v-for="item in contractAttachmentTypeOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="contract-attachment-upload-dialog__uploader">
|
||
<el-upload
|
||
drag
|
||
multiple
|
||
:action="uploadAction"
|
||
:headers="uploadHeaders"
|
||
:accept="acceptText"
|
||
:show-file-list="true"
|
||
:before-upload="beforeUpload"
|
||
:on-success="handleDialogSuccess"
|
||
:on-error="handleDialogError"
|
||
:on-remove="handleDialogRemove"
|
||
:file-list="uploadDialogFileList"
|
||
>
|
||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="contract-attachment-upload-dialog__footer">
|
||
<el-button type="primary" @click="confirmUploadDialog">确定</el-button>
|
||
<el-button type="primary" @click="uploadDialogVisible = false">取消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { UploadFilled } from '@element-plus/icons-vue';
|
||
import { baseUrl } from '@/config/env';
|
||
import { getUploadHeaders } from '@/utils/upload';
|
||
import { downloadFileByUrl } from '@/utils/util';
|
||
import { getDictionary as getBizDictionary } from '@/api/system/dictbiz';
|
||
|
||
const CONTRACT_ATTACHMENT_TYPE_OTHER = '其他文件';
|
||
export const defaultContractAttachmentTypeOptions = [
|
||
{ label: '合同文件', value: '合同文件' },
|
||
{ label: '双章归档文件', value: '双章归档文件' },
|
||
{ label: '其他文件', value: CONTRACT_ATTACHMENT_TYPE_OTHER },
|
||
];
|
||
/** @deprecated 兼容旧引用，实际选项由业务字典 contract_attachment_type 动态加载 */
|
||
export const contractAttachmentTypeOptions = defaultContractAttachmentTypeOptions;
|
||
export const attachmentFileTypes = [
|
||
'pdf',
|
||
'bmp',
|
||
'jpeg',
|
||
'png',
|
||
'jpg',
|
||
'doc',
|
||
'docx',
|
||
'ppt',
|
||
'pptx',
|
||
'xlsx',
|
||
'xls',
|
||
'eml',
|
||
'msg',
|
||
'zip',
|
||
];
|
||
|
||
export const attachmentName = row => row?.originalName || row?.name || row?.fileName || '附件';
|
||
export const attachmentUrl = row =>
|
||
row?.url || row?.link || row?.fileUrl || row?.downloadUrl || row?.domain || '';
|
||
export const isAttachmentApproved = row =>
|
||
row?.approved === true ||
|
||
row?.approved === 1 ||
|
||
row?.approved === '1' ||
|
||
row?.approvalStatus === 'approved';
|
||
|
||
const normalizeAttachmentTypeText = value => {
|
||
let text = String(value || '').split(/[?#]/)[0];
|
||
try {
|
||
text = decodeURIComponent(text);
|
||
} catch (error) {
|
||
// ignore decode error
|
||
}
|
||
return text
|
||
.replace(/\.[^.\\/]+$/, '')
|
||
.toLowerCase()
|
||
.replace(/[\s_\-—–·•()（）\[\]【】{}《》<>“”"'、，,。.]/g, '');
|
||
};
|
||
|
||
const isOtherAttachmentTypeOption = item => {
|
||
const text = `${item?.label || ''}${item?.value || ''}`;
|
||
return (
|
||
String(item?.value) === CONTRACT_ATTACHMENT_TYPE_OTHER ||
|
||
String(item?.value) === '其它文件' ||
|
||
text.includes('其他文件') ||
|
||
text.includes('其它文件') ||
|
||
text.includes('其他') ||
|
||
text.includes('其它')
|
||
);
|
||
};
|
||
|
||
const attachmentTypeKeywords = fileType => {
|
||
const text = String(fileType || '');
|
||
if (text.includes('双章')) return ['双章归档文件', '双章归档', '双章'];
|
||
if (text.includes('合同') && !text.includes('其他') && !text.includes('其它')) {
|
||
return ['合同文件', '合同'];
|
||
}
|
||
if (isOtherAttachmentTypeOption({ label: text, value: text })) return [];
|
||
return text ? [text] : [];
|
||
};
|
||
|
||
const resolveOtherAttachmentType = (options = []) => {
|
||
const list = options.length ? options : defaultContractAttachmentTypeOptions;
|
||
const matched = list.find(isOtherAttachmentTypeOption);
|
||
return matched?.value || CONTRACT_ATTACHMENT_TYPE_OTHER;
|
||
};
|
||
|
||
export const resolveContractAttachmentType = (
|
||
row = {},
|
||
options = defaultContractAttachmentTypeOptions
|
||
) => {
|
||
const list = options.length ? options : defaultContractAttachmentTypeOptions;
|
||
const otherType = resolveOtherAttachmentType(list);
|
||
const values = list.map(item => item.value);
|
||
if (values.includes(row.fileType)) return row.fileType;
|
||
const matchedByLabel = list.find(item => String(item.label) === String(row.fileType));
|
||
if (matchedByLabel) return matchedByLabel.value;
|
||
const fileName = normalizeAttachmentTypeText(attachmentName(row));
|
||
if (!fileName) return otherType;
|
||
const matched = list
|
||
.filter(item => !isOtherAttachmentTypeOption(item))
|
||
.flatMap(item =>
|
||
attachmentTypeKeywords(item.value)
|
||
.concat(attachmentTypeKeywords(item.label))
|
||
.map(keyword => ({
|
||
value: item.value,
|
||
keyword: normalizeAttachmentTypeText(keyword),
|
||
}))
|
||
)
|
||
.filter(item => item.keyword)
|
||
.sort((a, b) => b.keyword.length - a.keyword.length)
|
||
.find(item => fileName.includes(item.keyword));
|
||
// 文件名未命中任何附件类型时，默认「其他文件」
|
||
return matched?.value || otherType;
|
||
};
|
||
|
||
export const normalizeContractFileRows = (rows, options = defaultContractAttachmentTypeOptions) =>
|
||
(rows || []).map(row => ({
|
||
...row,
|
||
fileType: resolveContractAttachmentType(row, options),
|
||
description: row.description || '',
|
||
}));
|
||
|
||
const mapDictOptions = response => {
|
||
const data = response?.data?.data || response?.data || [];
|
||
const records = Array.isArray(data) ? data : data.records || [];
|
||
return records
|
||
.map(item => ({
|
||
label: item.dictValue,
|
||
value: item.dictKey,
|
||
}))
|
||
.filter(item => item.label && item.value);
|
||
};
|
||
|
||
export default {
|
||
name: 'ContractAttachmentSection',
|
||
components: { UploadFilled },
|
||
props: {
|
||
title: { type: String, required: true },
|
||
rows: { type: Array, default: () => [] },
|
||
description: Boolean,
|
||
attachmentType: Boolean,
|
||
readonly: Boolean,
|
||
lockApproved: Boolean,
|
||
markApprovedOnUpload: Boolean,
|
||
useUploadDialog: Boolean,
|
||
dialogOnly: Boolean,
|
||
attachmentLocation: { type: String, default: '合同文件' },
|
||
attachmentLocationOptions: { type: Array, default: null },
|
||
preview: { type: Function, default: null },
|
||
},
|
||
emits: ['update:rows', 'upload-to-location', 'upload-confirmed'],
|
||
data() {
|
||
return {
|
||
selected: [],
|
||
attachmentFileTypes,
|
||
contractAttachmentTypeOptions: [...defaultContractAttachmentTypeOptions],
|
||
uploadDialogVisible: false,
|
||
uploadDialogLocation: '合同文件',
|
||
uploadDialogType: resolveOtherAttachmentType(defaultContractAttachmentTypeOptions),
|
||
uploadDialogFiles: [],
|
||
uploadDialogFileList: [],
|
||
};
|
||
},
|
||
computed: {
|
||
uploadAction() {
|
||
return `${baseUrl}/blade-resource/oss/endpoint/put-file`;
|
||
},
|
||
uploadHeaders() {
|
||
return getUploadHeaders();
|
||
},
|
||
acceptText() {
|
||
return this.attachmentFileTypes.map(item => `.${item}`).join(',');
|
||
},
|
||
defaultAttachmentType() {
|
||
return resolveOtherAttachmentType(this.contractAttachmentTypeOptions);
|
||
},
|
||
resolvedLocationOptions() {
|
||
const options = (this.attachmentLocationOptions || []).filter(Boolean);
|
||
if (options.length) return options;
|
||
return ['合同文件', '其它附件'];
|
||
},
|
||
},
|
||
created() {
|
||
this.loadAttachmentTypeOptions();
|
||
},
|
||
methods: {
|
||
attachmentName,
|
||
loadAttachmentTypeOptions() {
|
||
return getBizDictionary({ code: 'contract_attachment_type' })
|
||
.then(res => {
|
||
const options = mapDictOptions(res);
|
||
if (options.length) {
|
||
// 字典缺少「其他文件」时补上，保证未匹配文件名可默认选中
|
||
this.contractAttachmentTypeOptions = options.some(isOtherAttachmentTypeOption)
|
||
? options
|
||
: [...options, { label: '其他文件', value: CONTRACT_ATTACHMENT_TYPE_OTHER }];
|
||
if (
|
||
!this.contractAttachmentTypeOptions.some(
|
||
item => String(item.value) === String(this.uploadDialogType)
|
||
)
|
||
) {
|
||
this.uploadDialogType = this.defaultAttachmentType;
|
||
}
|
||
// 字典加载后，把已有行的中文类型名对齐到 dictKey，保证下拉可选中
|
||
if (this.attachmentType && (this.rows || []).length) {
|
||
const aligned = (this.rows || []).map(row => ({
|
||
...row,
|
||
fileType: resolveContractAttachmentType(row, this.contractAttachmentTypeOptions),
|
||
}));
|
||
const changed = aligned.some(
|
||
(row, index) => row.fileType !== this.rows[index]?.fileType
|
||
);
|
||
if (changed) this.update(aligned);
|
||
}
|
||
}
|
||
})
|
||
.catch(() => {
|
||
// 字典加载失败时保留默认选项
|
||
});
|
||
},
|
||
isRowLocked(row) {
|
||
return this.lockApproved && isAttachmentApproved(row);
|
||
},
|
||
update(rows) {
|
||
this.$emit('update:rows', Array.isArray(rows) ? rows.map(item => ({ ...item })) : []);
|
||
},
|
||
enrichUploadedRow(row, existing) {
|
||
const uploadUserName = this.$store.getters.userInfo?.realName || '';
|
||
const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||
const next = {
|
||
...existing,
|
||
...row,
|
||
description: row.description || existing?.description || '',
|
||
uploadUserName: existing?.uploadUserName || row.uploadUserName || uploadUserName,
|
||
uploadTime: existing?.uploadTime || row.uploadTime || uploadTime,
|
||
approved: existing?.approved || row.approved || false,
|
||
};
|
||
if (this.attachmentType) {
|
||
next.fileType = existing?.fileType
|
||
? existing.fileType
|
||
: resolveContractAttachmentType(
|
||
{ ...next, fileType: '' },
|
||
this.contractAttachmentTypeOptions
|
||
);
|
||
}
|
||
if (this.markApprovedOnUpload && !existing) next.approved = true;
|
||
return next;
|
||
},
|
||
findExistingRow(row, rows = this.rows) {
|
||
const fileUrl = attachmentUrl(row);
|
||
return (rows || []).find(item => {
|
||
const sameUid = row.uid && item.uid && String(row.uid) === String(item.uid);
|
||
const sameUrl = fileUrl && attachmentUrl(item) === fileUrl;
|
||
return sameUid || sameUrl;
|
||
});
|
||
},
|
||
updateRowFileType(index, value) {
|
||
const rows = [...(this.rows || [])];
|
||
const row = rows[index];
|
||
if (!row || this.isRowLocked(row)) return;
|
||
rows[index] = { ...row, fileType: value };
|
||
this.update(rows);
|
||
},
|
||
updateRowDescription(index, value) {
|
||
const rows = [...(this.rows || [])];
|
||
const row = rows[index];
|
||
if (!row || this.isRowLocked(row)) return;
|
||
rows[index] = { ...row, description: value };
|
||
this.update(rows);
|
||
},
|
||
resolveTypeByLocation(location) {
|
||
const options = this.contractAttachmentTypeOptions || [];
|
||
const locationText = String(location || '');
|
||
if (locationText.includes('其它') || locationText.includes('其他')) {
|
||
return this.defaultAttachmentType;
|
||
}
|
||
const matched = options.find(
|
||
item =>
|
||
String(item.value) === locationText ||
|
||
String(item.label) === locationText ||
|
||
String(item.value).includes('合同') ||
|
||
String(item.label).includes('合同')
|
||
);
|
||
return matched?.value || options[0]?.value || this.defaultAttachmentType;
|
||
},
|
||
syncUploadDialogTypeByLocation() {
|
||
this.uploadDialogType = this.resolveTypeByLocation(this.uploadDialogLocation);
|
||
},
|
||
openUploadDialog() {
|
||
const options = this.resolvedLocationOptions;
|
||
this.uploadDialogLocation = options.includes(this.attachmentLocation)
|
||
? this.attachmentLocation
|
||
: options[0] || this.attachmentLocation;
|
||
this.syncUploadDialogTypeByLocation();
|
||
this.uploadDialogFiles = [];
|
||
this.uploadDialogFileList = [];
|
||
this.uploadDialogVisible = true;
|
||
},
|
||
resetUploadDialog() {
|
||
this.uploadDialogFiles = [];
|
||
this.uploadDialogFileList = [];
|
||
this.uploadDialogLocation = this.attachmentLocation;
|
||
this.syncUploadDialogTypeByLocation();
|
||
},
|
||
beforeUpload(file) {
|
||
const extension = String(file.name || '')
|
||
.split('.')
|
||
.pop()
|
||
?.toLowerCase();
|
||
if (!this.attachmentFileTypes.includes(extension)) {
|
||
this.$message.warning('文件类型不符合上传要求');
|
||
return false;
|
||
}
|
||
if (file.size / 1024 / 1024 > 50) {
|
||
this.$message.warning('单文件大小不能超过 50MB');
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
normalizeUploadFile(file, response) {
|
||
const data = response?.data || file.response?.data || {};
|
||
const url = data.link || data.url || data.domain || file.url || '';
|
||
const originalName =
|
||
data.originalName || file.name || data.name || attachmentName({ url }) || '附件';
|
||
return {
|
||
uid: file.uid,
|
||
originalName,
|
||
name: originalName,
|
||
url,
|
||
link: data.link || url,
|
||
size: data.size || data.attachSize || file.size || '',
|
||
};
|
||
},
|
||
handleDialogSuccess(response, file, fileList) {
|
||
if (!response || response.success === false || (response.code && response.code !== 200)) {
|
||
this.$message.error(response?.msg || '上传失败');
|
||
this.uploadDialogFileList = (fileList || []).filter(item => item.uid !== file.uid);
|
||
return;
|
||
}
|
||
const normalized = this.normalizeUploadFile(file, response);
|
||
this.uploadDialogFileList = fileList || [];
|
||
this.uploadDialogFiles = [
|
||
...this.uploadDialogFiles.filter(item => String(item.uid) !== String(file.uid)),
|
||
normalized,
|
||
];
|
||
const locationText = String(this.uploadDialogLocation || '');
|
||
if (!(locationText.includes('其它') || locationText.includes('其他'))) {
|
||
this.uploadDialogType = resolveContractAttachmentType(
|
||
{
|
||
...normalized,
|
||
fileType: '',
|
||
},
|
||
this.contractAttachmentTypeOptions
|
||
);
|
||
} else {
|
||
this.uploadDialogType = this.defaultAttachmentType;
|
||
}
|
||
this.$message.success('上传成功');
|
||
},
|
||
handleDialogError() {
|
||
this.$message.error('上传失败');
|
||
},
|
||
handleDialogRemove(file) {
|
||
this.uploadDialogFiles = this.uploadDialogFiles.filter(
|
||
item => String(item.uid) !== String(file.uid)
|
||
);
|
||
this.uploadDialogFileList = this.uploadDialogFileList.filter(
|
||
item => String(item.uid) !== String(file.uid)
|
||
);
|
||
},
|
||
confirmUploadDialog() {
|
||
if (!this.uploadDialogFiles.length) {
|
||
this.$message.warning('请先上传附件');
|
||
return;
|
||
}
|
||
if (!this.uploadDialogLocation) {
|
||
this.$message.warning('请选择附件位置');
|
||
return;
|
||
}
|
||
if (!this.uploadDialogType) {
|
||
this.$message.warning('请选择附件类型');
|
||
return;
|
||
}
|
||
const uploadUserName = this.$store.getters.userInfo?.realName || '';
|
||
const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||
const appended = this.uploadDialogFiles.map(row => ({
|
||
...row,
|
||
fileType: this.uploadDialogType,
|
||
description: row.description || '',
|
||
uploadUserName: row.uploadUserName || uploadUserName,
|
||
uploadTime: row.uploadTime || uploadTime,
|
||
...(this.markApprovedOnUpload ? { approved: true } : {}),
|
||
}));
|
||
// 统一交给父组件按附件位置写入对应列表，避免同位置双写或跨位置不显示
|
||
this.$emit('upload-to-location', {
|
||
location: this.uploadDialogLocation,
|
||
rows: appended,
|
||
});
|
||
this.uploadDialogVisible = false;
|
||
this.$emit('upload-confirmed', {
|
||
location: this.uploadDialogLocation,
|
||
rows: appended,
|
||
});
|
||
},
|
||
handleChange(list) {
|
||
if (!Array.isArray(list)) return;
|
||
// 上传组件偶发回传空列表时，禁止清空已有表格数据
|
||
if (!list.length) return;
|
||
const existingRows = this.rows || [];
|
||
const nextRows = list.map(row => {
|
||
const existing = this.findExistingRow(row, existingRows);
|
||
if (existing && this.isRowLocked(existing)) return { ...existing };
|
||
return this.enrichUploadedRow(row, existing);
|
||
});
|
||
existingRows.forEach(item => {
|
||
if (!this.isRowLocked(item)) return;
|
||
if (this.findExistingRow(item, nextRows)) return;
|
||
nextRows.unshift({ ...item });
|
||
});
|
||
this.update(nextRows);
|
||
},
|
||
handleUploadSuccess(file) {
|
||
const url = attachmentUrl(file);
|
||
if (!file || !url) return;
|
||
if (this.findExistingRow(file)) return;
|
||
this.update([...(this.rows || []), this.enrichUploadedRow(file)]);
|
||
},
|
||
remove(index) {
|
||
const row = this.rows[index];
|
||
if (this.isRowLocked(row)) {
|
||
this.$message.warning('已审核通过的附件不允许删除');
|
||
return;
|
||
}
|
||
const rows = [...(this.rows || [])];
|
||
rows.splice(index, 1);
|
||
this.update(rows);
|
||
},
|
||
download(row) {
|
||
const url = attachmentUrl(row);
|
||
if (!url) {
|
||
this.$message.warning('附件地址为空，无法下载');
|
||
return;
|
||
}
|
||
downloadFileByUrl(url, attachmentName(row));
|
||
},
|
||
batchDownload() {
|
||
(this.selected.length ? this.selected : this.rows || []).forEach(this.download);
|
||
},
|
||
formatSize(size) {
|
||
const value = Number(size);
|
||
if (!value) return '';
|
||
if (value < 1024) return `${value}B`;
|
||
if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)}KB`;
|
||
return `${(value / 1024 / 1024).toFixed(1)}MB`;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contract-manage-form__section {
|
||
margin: 12px 0 0;
|
||
padding: 14px 16px 16px;
|
||
overflow: visible;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
|
||
.dialog-section-title {
|
||
margin-bottom: 20px;
|
||
color: #303133;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
|
||
&::before {
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
vertical-align: -2px;
|
||
background: #409eff;
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
|
||
.contract-manage-form__attachment-table {
|
||
:deep(.el-table__body-wrapper),
|
||
:deep(.el-table__header-wrapper),
|
||
:deep(.el-table__cell),
|
||
:deep(.cell) {
|
||
overflow: visible;
|
||
}
|
||
}
|
||
|
||
.contract-manage-form__attachment-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
|
||
.dialog-section-title {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.contract-manage-form__attachment-upload {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.contract-manage-form__attachment-tip {
|
||
margin-left: 30px;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.contract-attachment-upload-dialog {
|
||
&__body {
|
||
padding: 4px 8px 0;
|
||
}
|
||
|
||
&__field {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
&__label {
|
||
flex: none;
|
||
width: 72px;
|
||
color: #606266;
|
||
text-align: right;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
&__uploader {
|
||
margin-top: 8px;
|
||
|
||
:deep(.el-upload) {
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.el-upload-dragger) {
|
||
width: 100%;
|
||
height: 180px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
&__footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
</style>
|