style(attachment): 统一附件上传按钮位置及样式及提示文案格式

- 将站点所有附件上传按钮移至表格下方左侧,与批量下载按钮分开,布局统一
- 统一附件上传按钮旁提示文案格式,改为同一行按钮右侧显示,间距固定30px,文本左对齐
- 统一附件上传支持文件格式说明为“支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式,单个文件不超过500M”
- 统一单个附件文件大小限制改为500M,涉及多页面文件修改
- 恢复vehicle-attachment-upload组件showTip属性门控,支持按需隐藏提示
- 修复master-order编辑页附件上传按钮与描述文字排列,改为单行且按钮左侧描述右侧排列
- 优化customer-archive客商材料上传按钮及提示的布局,按钮左、提示右,间距30px,超长文案省略
- 调整部分页面缩进与标签样式,提升视觉一致性
- 修改部分组件及页面的css样式,适配上述布局与样式调整
This commit is contained in:
2026-08-25 18:43:25 +08:00
parent 7c12163966
commit 3cb365253b
16 changed files with 553 additions and 176 deletions
@@ -75,6 +75,9 @@ import pdfWorkerSrc from 'pdfjs-dist/build/pdf.worker.mjs?url';
import { baseUrl } from '@/config/env';
import { getUploadHeaders } from '@/utils/upload';
const UNIFIED_ATTACHMENT_TIP =
'支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式,单个文件不超过500M';
const MIME_MAP = {
jpg: 'image/jpeg',
jpeg: 'image/jpeg',
@@ -143,7 +146,7 @@ export default {
},
maxSize: {
type: Number,
default: 0,
default: 500,
},
readonly: {
type: Boolean,
@@ -212,10 +215,7 @@ export default {
return this.acceptedList.join(',');
},
tipText() {
if (this.tip) return this.tip;
const typeText = this.acceptText || '所有类型';
const sizeText = this.maxSize > 0 ? `,单文件不超过 ${this.maxSize}MB` : '';
return `支持上传 ${typeText}${sizeText}`;
return this.tip || UNIFIED_ATTACHMENT_TIP;
},
uploadingCount() {
return this.fileList.filter(file => ['ready', 'uploading'].includes(file.status)).length;
@@ -372,6 +372,27 @@ export default {
<style lang="scss" scoped>
.vehicle-attachment-upload {
width: 100%;
div{
display: flex;
flex-direction: row;
align-items: center;
}
:deep(.el-upload) {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
:deep(.el-upload__tip) {
display: inline-block;
margin: 0 0 0 30px;
color: #909399;
font-size: 13px;
line-height: 1.4;
white-space: normal;
text-align: left;
}
:deep(.el-upload-list__item-name) {
cursor: pointer;
@@ -1981,16 +1981,6 @@
<template #attachmentsJson-form>
<div class="business-crud-page__attachment">
<div class="business-crud-page__attachment-head">
<vehicle-attachment-upload
v-model="attachmentRows"
:readonly="dialogReadonly"
:file-types="attachmentFileTypes"
:max-size="500"
:show-tip="false"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
<el-button
type="primary"
:disabled="!attachmentRows.length"
@@ -2043,6 +2033,17 @@
</template>
</el-table-column>
</el-table>
<div class="business-crud-page__attachment-upload">
<vehicle-attachment-upload
v-model="attachmentRows"
:readonly="dialogReadonly"
:file-types="attachmentFileTypes"
:max-size="500"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
</div>
</div>
</template>
@@ -4124,15 +4125,6 @@
<div class="dialog-section-title">附件</div>
<div class="business-crud-page__attachment">
<div class="business-crud-page__attachment-head">
<vehicle-attachment-upload
v-model="dispatchItemAttachmentRows"
:file-types="attachmentFileTypes"
:max-size="500"
:show-tip="false"
:show-file-list="false"
button-text="上传附件"
@change="handleDispatchItemAttachmentChange"
/>
<el-button
type="primary"
:disabled="!dispatchItemAttachmentRows.length"
@@ -4178,6 +4170,16 @@
</template>
</el-table-column>
</el-table>
<div class="business-crud-page__attachment-upload">
<vehicle-attachment-upload
v-model="dispatchItemAttachmentRows"
:file-types="attachmentFileTypes"
:max-size="500"
:show-file-list="false"
button-text="上传附件"
@change="handleDispatchItemAttachmentChange"
/>
</div>
</div>
</el-form>
<template #footer>
@@ -14254,10 +14256,24 @@ export default {
&__attachment-head {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
margin-bottom: 16px;
}
&__attachment-upload {
display: flex;
justify-content: flex-start;
margin-top: 12px;
:deep(.vehicle-attachment-upload) {
width: auto;
}
:deep(.el-upload) {
display: inline-flex;
}
}
&__attachment-table {
width: 100%;
min-width: 0;
@@ -217,15 +217,6 @@
<h3>附件</h3>
<div class="master-editor__attachment">
<div class="master-editor__attachment-head">
<vehicle-attachment-upload
v-model="attachmentRows"
:file-types="attachmentFileTypes"
:max-size="500"
:show-tip="false"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
<el-button
type="primary"
:disabled="!attachmentRows.length"
@@ -261,6 +252,16 @@
</template>
</el-table-column>
</el-table>
<div class="master-editor__attachment-upload">
<vehicle-attachment-upload
v-model="attachmentRows"
:file-types="attachmentFileTypes"
:max-size="500"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
</div>
</div>
</section>
<el-dialog
@@ -1807,9 +1808,33 @@ export default {
.master-editor__attachment-head {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
margin-bottom: 16px;
}
.master-editor__attachment-upload {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 12px;
:deep(.el-upload) {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
text-align: left;
}
:deep(.el-upload__tip) {
display: inline-block;
margin: 0 0 0 8px;
color: #909399;
font-size: 13px;
line-height: 1.4;
white-space: normal;
text-align: left;
}
}
.master-editor__attachment-upload .vehicle-attachment-upload {
width: auto;
}
.master-editor__attachment-table {
width: 100%;
:deep(.el-table__header th) {
+10 -2
View File
@@ -25,8 +25,13 @@
<section class="change-section">
<div class="dialog-section-title">合同文件</div>
<div class="attachment-head"><vehicle-attachment-upload v-model="contractFileRows" :readonly="false" :file-types="attachmentFileTypes" :max-size="500" :show-tip="false" :show-file-list="false" button-text="上传附件" @change="handleContractFileChange" /><el-button type="primary" :disabled="!contractFileRows.length" @click="handleContractFileBatchDownload">批量下载</el-button></div>
<div class="attachment-head">
<el-button type="primary" :disabled="!contractFileRows.length" @click="handleContractFileBatchDownload">批量下载</el-button>
</div>
<el-table :data="contractFileRows" border class="change-table" @selection-change="selectedContractFiles = $event"><el-table-column type="selection" width="55" /><el-table-column type="index" label="序号" width="70" /><el-table-column label="文件名" min-width="240"><template #default="{ row }"><el-link type="primary" @click="previewAttachment(row, contractFileRows)">{{ row.originalName || row.name }}</el-link></template></el-table-column><el-table-column label="文件大小" width="120"><template #default="{ row }">{{ formatFileSize(row.size) }}</template></el-table-column><el-table-column prop="uploadUserName" label="上传人" width="140" /><el-table-column prop="uploadTime" label="上传时间" width="170" /><el-table-column label="操作" width="100"><template #default="{ $index }"><el-link type="danger" @click="removeContractFile($index)">删除</el-link></template></el-table-column></el-table>
<div class="attachment-upload">
<vehicle-attachment-upload v-model="contractFileRows" :readonly="false" :file-types="attachmentFileTypes" :max-size="500" :show-file-list="false" button-text="上传附件" @change="handleContractFileChange" />
</div>
</section>
<section class="change-section">
@@ -144,7 +149,10 @@ export default {
.ratio-tip { margin-bottom: 8px; color: #f56c6c; }
.unit { margin-left: 8px; }
.inline-field { display: flex; align-items: center; gap: 8px; }
.attachment-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.attachment-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
.attachment-upload { display: flex; justify-content: flex-start; margin-top: 12px; }
.attachment-upload .vehicle-attachment-upload { width: auto; }
.attachment-upload .el-upload { display: inline-flex; }
.settlement-switch { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.settlement-form { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 8px 28px; }
.change-reason-section { border: 1px dashed #ff8f9a; margin: 20px 16px; }
+59 -72
View File
@@ -275,25 +275,19 @@
<el-option label="" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="一式">
<div class="contract-manage-form__inline-number">
<el-input
v-model="form.copyCount"
placeholder="请输入"
@input="value => integerInput('copyCount', value)"
/>
<span>份</span>
</div>
<el-form-item label="一式">
<el-input
v-model="form.copyCount"
placeholder="请输入"
@input="value => integerInput('copyCount', value)"
/>
</el-form-item>
<el-form-item label="回款账期">
<div class="contract-manage-form__inline-number">
<el-input
v-model="form.paymentDays"
placeholder="请输入"
@input="value => integerInput('paymentDays', value)"
/>
<span>天</span>
</div>
<el-form-item label="回款账期">
<el-input
v-model="form.paymentDays"
placeholder="请输入"
@input="value => integerInput('paymentDays', value)"
/>
</el-form-item>
</div>
<el-form-item label="备注" prop="remark" class="contract-manage-form__remark">
@@ -1059,27 +1053,11 @@ const AttachmentSection = defineComponent({
[
h('div', { class: 'dialog-section-title' }, this.title),
h('div', { class: 'contract-manage-form__attachment-head' }, [
h('div', { class: 'contract-manage-form__attachment-actions' }, [
...(!this.readonly
? [
h(VehicleAttachmentUpload, {
modelValue: this.rows,
fileTypes: this.attachmentFileTypes,
maxSize: 500,
showTip: false,
showFileList: false,
buttonText: '上传附件',
'onUpdate:modelValue': this.handleChange,
onChange: this.handleChange,
}),
]
: []),
h(
ElButton,
{ type: 'primary', disabled: !this.rows.length, onClick: this.batchDownload },
() => '批量下载'
),
]),
h(
ElButton,
{ type: 'primary', disabled: !this.rows.length, onClick: this.batchDownload },
() => '批量下载'
),
]),
h(
ElTable,
@@ -1093,6 +1071,23 @@ const AttachmentSection = defineComponent({
},
() => columns
),
...(!this.readonly
? [
h('div', { class: 'contract-manage-form__attachment-upload' }, [
h(VehicleAttachmentUpload, {
modelValue: this.rows,
fileTypes: this.attachmentFileTypes,
maxSize: 500,
showTip: true,
tip: '支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式,单个文件不超过500M',
showFileList: false,
buttonText: '上传附件',
'onUpdate:modelValue': this.handleChange,
onChange: this.handleChange,
}),
]),
]
: []),
]
);
},
@@ -2229,25 +2224,6 @@ export default {
}
}
&__inline-number {
display: flex;
align-items: center;
gap: 8px;
width: 360px;
max-width: 100%;
:deep(.el-input) {
flex: 1;
width: auto;
min-width: 0;
}
span {
flex: none;
color: #606266;
}
}
&__billing-head,
&__attachment-head {
display: flex;
@@ -2350,22 +2326,29 @@ export default {
margin-bottom: 16px;
}
:deep(.contract-manage-form__attachment-actions) {
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 8px;
white-space: nowrap;
}
:deep(.contract-manage-form__attachment-upload) {
display: flex;
justify-content: flex-start;
margin-top: 12px;
:deep(.contract-manage-form__attachment-actions .vehicle-attachment-upload) {
flex: 0 0 auto;
width: auto !important;
}
:deep(.vehicle-attachment-upload) {
display: flex;
align-items: center;
width: auto;
}
:deep(.contract-manage-form__attachment-actions .el-upload) {
display: inline-flex;
:deep(.el-upload) {
display: inline-flex;
}
:deep(.el-upload__tip) {
display: inline-block;
margin: 0 0 0 30px;
color: #909399;
font-size: 13px;
line-height: 1.4;
text-align: left;
}
}
.contract-manage-detail {
@@ -2415,4 +2398,8 @@ export default {
white-space: normal;
line-height: 1.2;
}
.contract-manage-form__tip {
color: #ff0000;
font-size: 12px;
}
</style>
+1 -1
View File
@@ -105,7 +105,7 @@
:title="dialogReadonly ? '查看过程配置' : form.id ? '编辑过程配置' : '新建过程配置'"
append-to-body
v-model="configBox"
width="96%"
width="90%"
top="4vh"
class="process-config-dialog"
:close-on-click-modal="false"
+19 -2
View File
@@ -535,9 +535,9 @@
class="project-apply-form__upload"
:readonly="dialogReadonly"
:file-types="attachmentFileTypes"
:max-size="50"
:max-size="500"
button-text="上传附件"
tip="支持pdfbmpjpegpngjpgdocdocxpptpptxxlsxxlsemlmsgzip的文件格式单个文件大小限制50M"
tip="支持pdfbmpjpegpngjpgdocdocxpptpptxxlsxxlsemlmsgzip的文件格式单个文件不超过500M"
@change="handleAttachmentChange"
/>
</div>
@@ -2060,6 +2060,23 @@ export default {
border-radius: 6px;
padding: 12px 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
:deep(.vehicle-attachment-upload) {
display: flex;
align-items: center;
}
:deep(.el-upload) {
display: inline-flex;
}
:deep(.el-upload__tip) {
display: inline-block;
margin: 0 0 0 30px;
color: #909399;
font-size: 13px;
line-height: 1.4;
}
}
&__change-textarea {
+42 -10
View File
@@ -84,15 +84,6 @@
<template #attachmentsJson-form>
<div class="temporary-credit-limit-page__attachment">
<div class="temporary-credit-limit-page__attachment-head">
<vehicle-attachment-upload
v-model="attachmentRows"
:readonly="dialogReadonly"
:file-types="attachmentFileTypes"
:max-size="50"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
<el-button type="primary" :disabled="!attachmentRows.length" @click="batchDownload">
批量下载
</el-button>
@@ -121,6 +112,18 @@
</template>
</el-table-column>
</el-table>
<div class="temporary-credit-limit-page__attachment-upload">
<vehicle-attachment-upload
v-model="attachmentRows"
:readonly="dialogReadonly"
:file-types="attachmentFileTypes"
:max-size="500"
:show-file-list="false"
button-text="上传附件"
tip="支持pdfbmpjpegpngjpgdocdocxpptpptxxlsxxlsemlmsgzip的文件格式单个文件不超过500M"
@change="handleAttachmentChange"
/>
</div>
</div>
</template>
@@ -639,10 +642,35 @@ export default {
&__attachment-head {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
margin-bottom: 12px;
}
&__attachment-upload {
display: flex;
justify-content: flex-start;
margin-top: 12px;
:deep(.vehicle-attachment-upload) {
display: flex;
align-items: center;
width: auto;
}
:deep(.el-upload) {
display: inline-flex;
}
:deep(.el-upload__tip) {
display: inline-block;
margin: 0 0 0 30px;
color: #909399;
font-size: 13px;
line-height: 1.4;
text-align: left;
}
}
&__flow {
width: 100%;
height: calc(100vh - 150px);
@@ -670,4 +698,8 @@ export default {
.temporary-credit-limit-dialog .business-crud-page__detail-content .el-descriptions__label {
width: 180px !important;
}
.el-form-item--default .el-form-item__label {
min-height: 30px;
height: auto !important;
}
</style>
+1 -1
View File
@@ -231,7 +231,7 @@
class="bill-ledger-form-page__uploader"
:multiple="true"
:limit="20"
:max-size="10"
:max-size="500"
:file-types="attachmentFileTypes"
:show-file-list="false"
button-text="上传"
+1 -1
View File
@@ -113,7 +113,7 @@
class="bill-payment-form-page__uploader"
:multiple="true"
:limit="20"
:max-size="10"
:max-size="500"
:file-types="attachmentFileTypes"
:show-file-list="false"
button-text="上传"
+24 -11
View File
@@ -366,17 +366,6 @@
</section-card>
<section-card title="附件信息">
<vehicle-attachment-upload
v-model="form.attachments"
:readonly="readonly"
:multiple="true"
:limit="20"
:max-size="50"
:file-types="attachmentFileTypes"
:show-file-list="false"
button-text="上传"
@change="normalizeAttachments"
/>
<el-table :data="form.attachments" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column prop="originalName" label="文件名" min-width="220" />
@@ -399,6 +388,19 @@
</template>
</el-table-column>
</el-table>
<div class="invoice-form-page__attachment-upload">
<vehicle-attachment-upload
v-model="form.attachments"
:readonly="readonly"
:multiple="true"
:limit="20"
:max-size="500"
:file-types="attachmentFileTypes"
:show-file-list="false"
button-text="上传"
@change="normalizeAttachments"
/>
</div>
</section-card>
<section-card title="备注">
@@ -970,6 +972,17 @@ export default {
gap: 8px;
padding: 16px 0 8px;
}
.invoice-form-page__attachment-upload {
display: flex;
justify-content: flex-start;
margin-top: 12px;
}
.invoice-form-page__attachment-upload .vehicle-attachment-upload {
width: auto;
}
.invoice-form-page__attachment-upload .el-upload {
display: inline-flex;
}
.invoice-form-page__dialog-search {
display: flex;
justify-content: flex-end;
+25 -11
View File
@@ -245,17 +245,7 @@
/></el-table>
</section-card>
<section-card title="附件">
<vehicle-attachment-upload
v-model="form.attachments"
:readonly="readonly"
:multiple="true"
:limit="20"
:max-size="500"
:file-types="attachmentFileTypes"
:show-file-list="false"
button-text="上传附件"
@change="normalizeAttachments"
/><el-table :data="form.attachments" border
<el-table :data="form.attachments" border
><el-table-column type="index" label="序号" width="70" /><el-table-column
label="附件类型"
width="160"
@@ -291,6 +281,19 @@
></el-table-column
></el-table
>
<div class="payment-form-page__attachment-upload">
<vehicle-attachment-upload
v-model="form.attachments"
:readonly="readonly"
:multiple="true"
:limit="20"
:max-size="500"
:file-types="attachmentFileTypes"
:show-file-list="false"
button-text="上传附件"
@change="normalizeAttachments"
/>
</div>
</section-card>
<div class="payment-form-page__actions">
<el-button @click="goBack">返回</el-button
@@ -810,6 +813,17 @@ export default {
justify-content: flex-end;
margin-bottom: 8px;
}
.payment-form-page__attachment-upload {
display: flex;
justify-content: flex-start;
margin-top: 12px;
}
.payment-form-page__attachment-upload .vehicle-attachment-upload {
width: auto;
}
.payment-form-page__attachment-upload .el-upload {
display: inline-flex;
}
.payment-form-page :deep(.el-form-item) {
margin-bottom: 16px;
}
@@ -292,19 +292,6 @@
<section-card title="附件">
<div class="pre-settlement-editor__attachment">
<div class="pre-settlement-editor__attachment-actions">
<vehicle-attachment-upload
ref="attachmentUploadRef"
v-model="attachments"
:readonly="!editable"
:multiple="true"
:limit="20"
:max-size="500"
:file-types="attachmentFileTypes"
:show-tip="false"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
<el-button type="primary" :disabled="!attachments.length" @click="downloadAttachments">
批量下载
</el-button>
@@ -341,6 +328,20 @@
</template>
</el-table-column>
</el-table>
<div class="pre-settlement-editor__attachment-upload">
<vehicle-attachment-upload
ref="attachmentUploadRef"
v-model="attachments"
:readonly="!editable"
:multiple="true"
:limit="20"
:max-size="500"
:file-types="attachmentFileTypes"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
</div>
</div>
</section-card>
@@ -1559,10 +1560,25 @@ export default {
&__attachment-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: 12px;
}
&__attachment-upload {
display: flex;
justify-content: flex-start;
margin-top: 12px;
:deep(.vehicle-attachment-upload) {
width: auto;
}
:deep(.el-upload) {
display: inline-flex;
}
}
&__summary-total {
padding: 12px 16px 0;
text-align: right;
+36 -17
View File
@@ -606,7 +606,6 @@
v-model="ocrQualificationUploadFiles"
:multiple="true"
:limit="20"
accept=".pdf,.bmp,.jpeg,.png,.jpg,.doc,.docx,.ppt,.pptx,.xlsx,.xls,.eml,.msg,.zip"
:max-size="500"
button-text="OCR上传识别"
:show-tip="false"
@@ -689,14 +688,10 @@
accept=".pdf,.bmp,.jpeg,.png,.jpg,.doc,.docx,.ppt,.pptx,.xlsx,.xls,.eml,.msg,.zip"
:max-size="500"
button-text="上传附件"
:show-tip="false"
:show-file-list="false"
:show-uploading="true"
@success="handleQualificationUploadSuccess"
/>
<span class="qualification-upload-bar__tip">
支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip,单个文件不超过500M
</span>
</div>
</section-card>
@@ -859,7 +854,13 @@
</div>
</el-form-item>
<el-form-item label="备注" prop="remark" class="contact-form__compact-field">
<el-input v-model="contactForm.remark" maxlength="200" />
<el-input
v-model="contactForm.remark"
type="textarea"
:rows="2"
maxlength="500"
show-word-limit
/>
</el-form-item>
</el-form>
</section-card>
@@ -951,7 +952,13 @@
<el-input v-model="receiptForm.bankAccount" maxlength="50" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="receiptForm.remark" maxlength="200" />
<el-input
v-model="receiptForm.remark"
type="textarea"
:rows="2"
maxlength="500"
show-word-limit
/>
</el-form-item>
</el-form>
</section-card>
@@ -4537,7 +4544,7 @@ export default {
display: flex;
align-items: center;
gap: 10px;
width: 97%;
width: 100%;
}
.business-term-field {
@@ -4628,21 +4635,33 @@ export default {
}
.qualification-upload-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
display: flex;
align-items: center;
margin-top: 12px;
margin-bottom: 6px;
:deep(.vehicle-attachment-upload) {
width: auto;
}
flex: 1;
display: flex;
align-items: center;
min-width: 0;
&__tip {
grid-column: 2;
color: #909399;
font-size: 13px;
text-align: center;
:deep(.el-upload) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
:deep(.el-upload__tip) {
margin-left: 30px;
color: #909399;
font-size: 13px;
line-height: 1.4;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}