refactor(transportCapacity): 使用 section-card 重构司机管理弹窗布局

- 将司机管理页面新增/编辑弹窗中四个分组改为使用标准 section-card 组件包裹
- 删除手写的扁平样式和红色竖条,统一使用全局 element-ui 样式维护弹窗视觉风格
- 调整司机证件上传区尺寸为 240x151 px,保持身份证比例并左对齐显示
- 优化弹窗中各表单项布局,提高视觉层次与一致性
- 更新 scoped 样式,移除无用的 section-title 样式,保持代码清洁
This commit is contained in:
2026-08-06 16:53:23 +08:00
parent 53676a1150
commit 02b2e3b673
9 changed files with 1920 additions and 1621 deletions
+60 -17
View File
@@ -1,28 +1,57 @@
<template>
<el-form-item v-if="mode === 'form'" :label="label" :prop="prop">
<el-upload
:class="[`${classPrefix}-uploader`, { [`${classPrefix}-uploader--large`]: large }]"
action="/api/blade-resource/oss/endpoint/put-file"
name="file"
:headers="uploadHeaders"
:show-file-list="false"
:disabled="readonly"
:before-upload="beforeUpload"
:on-progress="handleProgress"
:on-success="handleSuccess"
:on-error="handleError"
>
<img v-if="value" :src="value" :class="`${classPrefix}-uploader__image`" />
<div v-else :class="`${classPrefix}-uploader__empty`">{{ emptyText }}</div>
</el-upload>
<div :class="[`${classPrefix}-uploader`, { [`${classPrefix}-uploader--large`]: large }]">
<el-upload
ref="uploadRef"
class="upload-inner"
action="/api/blade-resource/oss/endpoint/put-file"
name="file"
:headers="uploadHeaders"
:show-file-list="false"
:disabled="readonly"
:before-upload="beforeUpload"
:on-progress="handleProgress"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-image
v-if="value"
:src="value"
:class="`${classPrefix}-uploader__image`"
:preview-src-list="[value]"
fit="contain"
preview-teleported
:z-index="3000"
@click.stop
/>
<div v-else :class="`${classPrefix}-uploader__empty`">{{ emptyText }}</div>
</el-upload>
<el-link
v-if="value && !readonly"
type="primary"
class="upload-replace-link"
@click.stop="triggerUpload"
>
更换
</el-link>
</div>
</el-form-item>
<el-form-item v-else :prop="prop" :class="`${classPrefix}-upload-item`">
<div :class="[`${classPrefix}-upload-card`, { [`${classPrefix}-upload-card--large`]: large }]">
<div v-if="label" :class="`${classPrefix}-upload-card__head`">
<span :class="`${classPrefix}-upload-card__label`">{{ label }}</span>
<span :class="`${classPrefix}-upload-card__action`">{{ actionText }}</span>
<el-link
v-if="!readonly"
type="primary"
:class="`${classPrefix}-upload-card__action`"
@click.stop="triggerUpload"
>
{{ actionText }}
</el-link>
<span v-else :class="`${classPrefix}-upload-card__action`">{{ actionText }}</span>
</div>
<el-upload
ref="uploadRef"
:class="`${classPrefix}-upload-card__uploader`"
action="/api/blade-resource/oss/endpoint/put-file"
name="file"
@@ -34,7 +63,16 @@
:on-success="handleSuccess"
:on-error="handleError"
>
<img v-if="value" :src="value" :class="`${classPrefix}-upload-card__image`" />
<el-image
v-if="value"
:src="value"
:class="`${classPrefix}-upload-card__image`"
:preview-src-list="[value]"
fit="contain"
preview-teleported
:z-index="3000"
@click.stop
/>
<div v-else :class="`${classPrefix}-upload-card__empty`">{{ emptyText }}</div>
</el-upload>
</div>
@@ -86,6 +124,11 @@ export default {
this.closeUploadLoading();
},
methods: {
triggerUpload() {
const uploadEl = this.$refs.uploadRef && this.$refs.uploadRef.$el;
const input = uploadEl && uploadEl.querySelector('.el-upload__input');
if (input) input.click();
},
showUploadLoading() {
if (this.uploadLoading) {
return;