b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 将站点所有附件上传按钮移至表格下方左侧，与批量下载按钮分开，布局统一
- 统一附件上传按钮旁提示文案格式，改为同一行按钮右侧显示，间距固定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
Download Patch File Download Diff File Expand all files Collapse all files
src/views/business/components/business-crud-page.vue
+36 -20
View File
@@ -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;
src/views/business/components/master-order-editor.vue
+35 -10
View File
@@ -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) {
src/views/business/contract-manage-change.vue
+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; }
src/views/business/contract-manage.vue
+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>
src/views/business/process-config.vue
+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"
src/views/business/project-apply.vue
+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="支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件大小限制50M"
tip="支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过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 {
src/views/business/temporary-credit-limit.vue
+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="支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过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>