style(customer-archive): 优化编辑弹窗表单布局和样式
- 将 el-form 的 label-width 固定为 96px,保证标签宽度统一 - 调整 form 各部分 gutter 为 24,使列间距更均匀 - 联系信息分组布局由三列改为四列,与其他分组对齐 - 提升 label 支持自动换行,解决长标签截断问题 - 在全局样式中新添弹窗内自定义分组白卡样式,提升 Avue 弹窗穿透稳定性 - 修改代理配置中的 target 地址指向内网服务器 - 清理业务弹窗表格边框,移除多余 border 属性及样式
This commit is contained in:
@@ -191,3 +191,8 @@
|
|||||||
- 需求:用户截图反馈 /business/shipping-template 查看弹窗中「货物信息」表格有边框线,要求去掉。
|
- 需求:用户截图反馈 /business/shipping-template 查看弹窗中「货物信息」表格有边框线,要求去掉。
|
||||||
- 改动:`src/views/business/components/business-crud-page.vue`
|
- 改动:`src/views/business/components/business-crud-page.vue`
|
||||||
- 详情弹窗中货物信息和附件 `<el-table>` 移除 `border` 属性,清理残留 border-color 样式。
|
- 详情弹窗中货物信息和附件 `<el-table>` 移除 `border` 属性,清理残留 border-color 样式。
|
||||||
|
|
||||||
|
## 编辑弹窗自定义分组白卡样式提升到全局
|
||||||
|
- 现象:/business/shipping-template 新增/编辑弹窗中「模板信息」「基本信息」等分组未显示白底卡片(scoped :deep() 对 Avue 内部弹窗穿透不稳定)。
|
||||||
|
- 根因:发货模板/运输计划用 hidden form item + formslot 注入 `.dialog-section-title` 做分组标题,白卡样式原写在 business-crud-page.vue 的 `<style scoped>` 中,Avue CRUD 弹窗为库内渲染,:deep() 穿透不可靠。
|
||||||
|
- 修复:在 `src/styles/element-ui.scss` 全局新增 `.el-dialog .avue-form__group:has(.dialog-section-title)` 白卡规则(bg #fff / radius 6px / shadow / padding 16px / margin-bottom 16px),确保所有弹窗生效。
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
# 2026-08-11 工作日志
|
||||||
|
|
||||||
|
## 客商档案编辑弹窗布局改造(customer-archive.vue)
|
||||||
|
客户需求:参考截图,编辑弹窗表单改为 4 列布局、label 固定 6 汉字宽、超长换行、列间有间距。
|
||||||
|
|
||||||
|
改动(仅 `src/views/vehicle/customer-archive.vue` 一个文件):
|
||||||
|
- `el-form` 的 `label-width` 由 `auto` → `96px`(≈6 汉字 + 12px padding)。
|
||||||
|
- `el-form` 的 `gutter` 由 `18` → `24`(4 个 section-card 分组全部统一)。
|
||||||
|
- 联系信息分组 `el-col :span="8"`(3列)→ `:span="6"`(4列),与工商/财务分组对齐。
|
||||||
|
- `<style scoped>` 中 `.archive-form` 新增 label 规则:固定 `width:96px` + `padding-right:12px` + `white-space:normal` + `text-align:right` + `overflow:visible`,使长 label(如"统一社会信用代码")自动折行。
|
||||||
|
|
||||||
|
注意:`.score-detail-form` 已有独立 `.el-form-item__label` 规则,与本次改动无关,未触碰。
|
||||||
@@ -246,6 +246,24 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 3b) Avue 弹窗内自定义标题分组(formslot + dialog-section-title)渲染为白卡
|
||||||
|
.el-dialog .avue-form__group:has(.dialog-section-title) {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.avue-form__group--title {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avue-form__row {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 4) 弹窗内表单项默认上下间距 16px(覆盖默认 18px / 22px)
|
// 4) 弹窗内表单项默认上下间距 16px(覆盖默认 18px / 22px)
|
||||||
.el-dialog .el-form-item {
|
.el-dialog .el-form-item {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|||||||
@@ -147,12 +147,12 @@
|
|||||||
:model="archiveForm"
|
:model="archiveForm"
|
||||||
:rules="formRules"
|
:rules="formRules"
|
||||||
label-position="right"
|
label-position="right"
|
||||||
label-width="auto"
|
label-width="96px"
|
||||||
:disabled="readonly"
|
:disabled="readonly"
|
||||||
class="archive-form"
|
class="archive-form"
|
||||||
>
|
>
|
||||||
<section-card title="工商信息">
|
<section-card title="工商信息">
|
||||||
<el-row :gutter="18">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-form-item label="客商编号" prop="customerCode">
|
<el-form-item label="客商编号" prop="customerCode">
|
||||||
<el-input v-model="archiveForm.customerCode" disabled placeholder="保存后自动生成" />
|
<el-input v-model="archiveForm.customerCode" disabled placeholder="保存后自动生成" />
|
||||||
@@ -253,7 +253,7 @@
|
|||||||
:model-value="archiveForm.businessTermType === '长期'"
|
:model-value="archiveForm.businessTermType === '长期'"
|
||||||
@change="handleNoFixedTermChange"
|
@change="handleNoFixedTermChange"
|
||||||
>
|
>
|
||||||
无固定期限
|
无
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -273,7 +273,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24">
|
<el-col :span="12">
|
||||||
<el-form-item label="地址" prop="registeredDetailAddress" required>
|
<el-form-item label="地址" prop="registeredDetailAddress" required>
|
||||||
<div class="archive-form__address">
|
<div class="archive-form__address">
|
||||||
<el-cascader
|
<el-cascader
|
||||||
@@ -298,18 +298,18 @@
|
|||||||
</section-card>
|
</section-card>
|
||||||
|
|
||||||
<section-card title="联系信息">
|
<section-card title="联系信息">
|
||||||
<el-row :gutter="18">
|
<el-row :gutter="24">
|
||||||
<el-col :span="8">
|
<el-col :span="6">
|
||||||
<el-form-item label="客商负责人" prop="principal">
|
<el-form-item label="客商负责人" prop="principal">
|
||||||
<el-input v-model="archiveForm.principal" maxlength="10" show-word-limit />
|
<el-input v-model="archiveForm.principal" maxlength="10" show-word-limit />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="6">
|
||||||
<el-form-item label="联系电话" prop="contactPhone">
|
<el-form-item label="联系电话" prop="contactPhone">
|
||||||
<el-input v-model="archiveForm.contactPhone" maxlength="20" />
|
<el-input v-model="archiveForm.contactPhone" maxlength="20" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="6">
|
||||||
<el-form-item label="所属组织" prop="deptName">
|
<el-form-item label="所属组织" prop="deptName">
|
||||||
<el-tree-select
|
<el-tree-select
|
||||||
v-model="archiveForm.deptId"
|
v-model="archiveForm.deptId"
|
||||||
@@ -329,7 +329,7 @@
|
|||||||
</section-card>
|
</section-card>
|
||||||
|
|
||||||
<section-card title="财务/信用信息">
|
<section-card title="财务/信用信息">
|
||||||
<el-row :gutter="18">
|
<el-row :gutter="24">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-form-item label="注册资金(万元)" prop="registeredCapital">
|
<el-form-item label="注册资金(万元)" prop="registeredCapital">
|
||||||
<el-input
|
<el-input
|
||||||
@@ -376,7 +376,7 @@
|
|||||||
</section-card>
|
</section-card>
|
||||||
|
|
||||||
<section-card title="其他信息">
|
<section-card title="其他信息">
|
||||||
<el-row :gutter="18">
|
<el-row :gutter="24">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="备注" prop="remark">
|
<el-form-item label="备注" prop="remark">
|
||||||
<el-input
|
<el-input
|
||||||
@@ -1503,7 +1503,7 @@ export default {
|
|||||||
dicData: [{ label: '全部', value: '' }],
|
dicData: [{ label: '全部', value: '' }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '准入标准',
|
label: '准入类型',
|
||||||
prop: 'accessType',
|
prop: 'accessType',
|
||||||
slot: true,
|
slot: true,
|
||||||
type: 'select',
|
type: 'select',
|
||||||
@@ -3487,15 +3487,44 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.archive-form {
|
.archive-form {
|
||||||
:deep(.el-input-number),
|
// form-item 横向 flex 布局,严格约束宽度不让子组件撑开
|
||||||
:deep(.el-select),
|
:deep(.el-form-item) {
|
||||||
:deep(.el-cascader),
|
display: flex;
|
||||||
:deep(.el-date-editor) {
|
align-items: flex-start;
|
||||||
width: 100%;
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-form-item__content) {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
> .el-input,
|
||||||
|
> .el-select,
|
||||||
|
> .el-cascader,
|
||||||
|
> .el-date-editor,
|
||||||
|
> .el-input-number,
|
||||||
|
> .el-tree-select {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-form-item__label) {
|
||||||
|
width: 96px;
|
||||||
|
padding-right: 12px;
|
||||||
|
white-space: normal;
|
||||||
|
line-height: 32px;
|
||||||
|
text-align: right;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: visible;
|
||||||
|
text-overflow: unset;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
business-term-field,
|
.business-term-field,
|
||||||
.archive-form__address {
|
.archive-form__address {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
+1
-3
@@ -63,10 +63,8 @@ export default ({
|
|||||||
port: 2888,
|
port: 2888,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost',
|
target: 'http://172.16.203.228:8000',
|
||||||
//target: 'https://saber3.bladex.cn/api',
|
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: path => path.replace(/^\/api/, ''),
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user