调整 合同
This commit is contained in:
@@ -0,0 +1,493 @@
|
||||
<template>
|
||||
<section
|
||||
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 }">
|
||||
<span v-if="readonly || isRowLocked(row)">{{ row.fileType || '-' }}</span>
|
||||
<el-select
|
||||
v-else
|
||||
:model-value="row.fileType"
|
||||
placeholder="请选择"
|
||||
:teleported="false"
|
||||
:fit-input-width="true"
|
||||
@update:model-value="value => updateRowFileType(row, value)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in contractAttachmentTypeOptions"
|
||||
:key="item.value"
|
||||
: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 }">
|
||||
<span v-if="readonly || isRowLocked(row)">{{ row.description || '-' }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
:model-value="row.description"
|
||||
maxlength="200"
|
||||
@update:model-value="value => updateRowDescription(row, 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="上传附件"
|
||||
@update:model-value="handleChange"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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 model-value="合同文件" disabled style="width: 100%">
|
||||
<el-option label="合同文件" value="合同文件" />
|
||||
</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>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UploadFilled } from '@element-plus/icons-vue';
|
||||
import { baseUrl } from '@/config/env';
|
||||
import { getUploadHeaders } from '@/utils/upload';
|
||||
import { downloadFileByUrl } from '@/utils/util';
|
||||
|
||||
const CONTRACT_ATTACHMENT_TYPE_OTHER = '其它文件';
|
||||
export const contractAttachmentTypeOptions = [
|
||||
{ label: '合同文件', value: '合同文件' },
|
||||
{ label: '双章归档文件', value: '双章归档文件' },
|
||||
{ label: '其它文件', value: CONTRACT_ATTACHMENT_TYPE_OTHER },
|
||||
];
|
||||
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 attachmentTypeKeywords = fileType => {
|
||||
if (fileType === '双章归档文件') return ['双章归档文件', '双章归档', '双章'];
|
||||
if (fileType === '合同文件') return ['合同文件', '合同'];
|
||||
return [fileType];
|
||||
};
|
||||
|
||||
export const resolveContractAttachmentType = (row = {}) => {
|
||||
const values = contractAttachmentTypeOptions.map(item => item.value);
|
||||
if (values.includes(row.fileType)) return row.fileType;
|
||||
const fileName = normalizeAttachmentTypeText(attachmentName(row));
|
||||
if (!fileName) return CONTRACT_ATTACHMENT_TYPE_OTHER;
|
||||
const matched = contractAttachmentTypeOptions
|
||||
.filter(item => item.value !== CONTRACT_ATTACHMENT_TYPE_OTHER)
|
||||
.flatMap(item =>
|
||||
attachmentTypeKeywords(item.value).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 || CONTRACT_ATTACHMENT_TYPE_OTHER;
|
||||
};
|
||||
|
||||
export const normalizeContractFileRows = rows =>
|
||||
(rows || []).map(row => ({
|
||||
...row,
|
||||
fileType: resolveContractAttachmentType(row),
|
||||
description: row.description || '',
|
||||
}));
|
||||
|
||||
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,
|
||||
preview: { type: Function, default: null },
|
||||
},
|
||||
emits: ['update:rows'],
|
||||
data() {
|
||||
return {
|
||||
selected: [],
|
||||
attachmentFileTypes,
|
||||
contractAttachmentTypeOptions,
|
||||
uploadDialogVisible: false,
|
||||
uploadDialogType: CONTRACT_ATTACHMENT_TYPE_OTHER,
|
||||
uploadDialogFiles: [],
|
||||
uploadDialogFileList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
uploadAction() {
|
||||
return `${baseUrl}/blade-resource/oss/endpoint/put-file`;
|
||||
},
|
||||
uploadHeaders() {
|
||||
return getUploadHeaders();
|
||||
},
|
||||
acceptText() {
|
||||
return this.attachmentFileTypes.map(item => `.${item}`).join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
attachmentName,
|
||||
isRowLocked(row) {
|
||||
return this.lockApproved && isAttachmentApproved(row);
|
||||
},
|
||||
update(rows) {
|
||||
this.$emit('update:rows', rows);
|
||||
},
|
||||
updateRowFileType(row, value) {
|
||||
if (this.isRowLocked(row)) return;
|
||||
row.fileType = value;
|
||||
this.update([...this.rows]);
|
||||
},
|
||||
updateRowDescription(row, value) {
|
||||
if (this.isRowLocked(row)) return;
|
||||
row.description = value;
|
||||
this.update([...this.rows]);
|
||||
},
|
||||
openUploadDialog() {
|
||||
this.uploadDialogType = CONTRACT_ATTACHMENT_TYPE_OTHER;
|
||||
this.uploadDialogFiles = [];
|
||||
this.uploadDialogFileList = [];
|
||||
this.uploadDialogVisible = true;
|
||||
},
|
||||
resetUploadDialog() {
|
||||
this.uploadDialogFiles = [];
|
||||
this.uploadDialogFileList = [];
|
||||
this.uploadDialogType = CONTRACT_ATTACHMENT_TYPE_OTHER;
|
||||
},
|
||||
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,
|
||||
];
|
||||
this.uploadDialogType = resolveContractAttachmentType({
|
||||
...normalized,
|
||||
fileType: '',
|
||||
});
|
||||
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.attachmentType && !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.attachmentType ? this.uploadDialogType : row.fileType,
|
||||
description: row.description || '',
|
||||
uploadUserName: row.uploadUserName || uploadUserName,
|
||||
uploadTime: row.uploadTime || uploadTime,
|
||||
...(this.markApprovedOnUpload ? { approved: true } : {}),
|
||||
}));
|
||||
this.update([...(this.rows || []), ...appended]);
|
||||
this.uploadDialogVisible = false;
|
||||
},
|
||||
handleChange(rows) {
|
||||
const uploadUserName = this.$store.getters.userInfo?.realName || '';
|
||||
const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
const existingRows = this.rows || [];
|
||||
this.update(
|
||||
(rows || []).map(row => {
|
||||
const fileUrl = attachmentUrl(row);
|
||||
const existing = existingRows.find(item => {
|
||||
const sameUid = row.uid && item.uid && String(row.uid) === String(item.uid);
|
||||
const sameUrl = fileUrl && attachmentUrl(item) === fileUrl;
|
||||
return sameUid || sameUrl;
|
||||
});
|
||||
if (existing && this.isRowLocked(existing)) return { ...existing };
|
||||
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 = resolveContractAttachmentType({
|
||||
...next,
|
||||
fileType: existing?.fileType || row.fileType,
|
||||
});
|
||||
}
|
||||
if (this.markApprovedOnUpload && !existing) next.approved = true;
|
||||
return next;
|
||||
})
|
||||
);
|
||||
},
|
||||
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__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>
|
||||
Reference in New Issue
Block a user