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
+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; }