feat(business-crud-page): 优化合同管理表单页为多分组卡片风格
- 为合同管理独立表单页设置 dialogCustomClass 以实现表单背景透明 - 按业务分区拆分表单列,分组渲染多张白底卡片,卡间距定为 12px - 调整卡片边距由 16px 至 12px,优化视觉层次与空间感 - 统一多分组表单样式,标题区块采用主色蓝条突出显示 - 透明化弹窗内 Avue 表单背景,解决白卡叠白卡问题 - 兼顾表单底部按钮滚动展示,不同于弹窗底部浮动布局
This commit is contained in:
@@ -5909,6 +5909,9 @@ export default {
|
||||
: 'business-crud-form-page-dialog';
|
||||
opt.dialogTop = '0';
|
||||
opt.dialogWidth = '100%';
|
||||
} else if (!opt.dialogCustomClass) {
|
||||
// 普通弹窗模式:灰底 body + 白卡表单(与独立表单页风格一致)
|
||||
opt.dialogCustomClass = 'business-crud-form-dialog';
|
||||
}
|
||||
return opt;
|
||||
})(),
|
||||
@@ -6214,10 +6217,7 @@ export default {
|
||||
submitBtn: !isTransportPlanCreate,
|
||||
emptyBtn: false,
|
||||
};
|
||||
if (this.isContractFormPage) {
|
||||
return this.buildContractFormGroupOption(base);
|
||||
}
|
||||
return base;
|
||||
return this.buildFormGroupOption(base);
|
||||
},
|
||||
isWaybillDetailLayout() {
|
||||
return this.config.permission === 'waybill_manage';
|
||||
@@ -6858,9 +6858,13 @@ export default {
|
||||
if (mode === 'edit') this.form = { id };
|
||||
this.beforeOpen(() => {}, mode);
|
||||
},
|
||||
buildContractFormGroupOption(option) {
|
||||
buildFormGroupOption(option) {
|
||||
const sectionTitleProps = [
|
||||
'basicInfoTitle',
|
||||
'templateInfoTitle',
|
||||
'shippingInfoTitle',
|
||||
'goodsInfoTitle',
|
||||
'taskInfoTitle',
|
||||
'contractFileTitle',
|
||||
'billingInfoTitle',
|
||||
'settlementRuleTitle',
|
||||
@@ -15835,7 +15839,7 @@ export default {
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.avue-form__group--title {
|
||||
padding: 0 !important;
|
||||
@@ -16014,18 +16018,24 @@ export default {
|
||||
|
||||
// 合同管理独立表单页:标题分块使用白底卡片,间距 12px,与 section-card 风格一致
|
||||
:global(.contract-manage-form-dialog) {
|
||||
padding: 20px 24px 96px;
|
||||
//padding: 20px 24px 96px;
|
||||
background: #f5f6fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--contract-form .avue-form) {
|
||||
// 独立表单页(合同/运单/运输计划/运输模板):标题分块使用白底卡片,间距 12px,与 section-card 风格一致
|
||||
:global(.business-crud-form-page-dialog:not(.el-dialog)) {
|
||||
padding: 20px 24px 96px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--form-page .avue-form) {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--contract-form .avue-form > .el-form > .avue-form__group),
|
||||
:global(.business-crud-page--contract-form .avue-group) {
|
||||
:global(.business-crud-page--form-page .avue-form > .el-form > .avue-form__group),
|
||||
:global(.business-crud-page--form-page .avue-group) {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
@@ -16034,26 +16044,35 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--contract-form .avue-form > .el-form > .avue-form__group:last-child),
|
||||
:global(.business-crud-page--contract-form .avue-group:last-child) {
|
||||
:global(.business-crud-page--form-page .avue-form > .el-form > .avue-form__group:last-child),
|
||||
:global(.business-crud-page--form-page .avue-group:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--contract-form .avue-group .el-collapse) {
|
||||
// 分组后的表单:卡片由 .avue-group 承担,内层 .avue-form__group 去卡片化,避免白卡叠白卡
|
||||
:global(.business-crud-page--form-page .avue-form .avue-form__group:has(.dialog-section-title)) {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--form-page .avue-group .el-collapse) {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--contract-form .avue-group .el-collapse-item__header) {
|
||||
:global(.business-crud-page--form-page .avue-group .el-collapse-item__header) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--contract-form .avue-group .el-collapse-item__wrap) {
|
||||
:global(.business-crud-page--form-page .avue-group .el-collapse-item__wrap) {
|
||||
border-bottom: none;
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
:global(.business-crud-page--contract-form .avue-group .el-collapse-item__content) {
|
||||
:global(.business-crud-page--form-page .avue-group .el-collapse-item__content) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1735,7 +1735,7 @@ export default {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.master-editor section {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid #eff1f7;
|
||||
background: #fff;
|
||||
|
||||
@@ -619,7 +619,7 @@
|
||||
</div>
|
||||
</section-card>
|
||||
|
||||
<section-card title="配载信息" class="loading-manage-dialog__load-info-card">
|
||||
<div title="配载信息" class="loading-manage-dialog__load-info-card">
|
||||
<section-card title="待配载运单">
|
||||
<el-table
|
||||
ref="candidateTableRef"
|
||||
@@ -905,7 +905,7 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section-card>
|
||||
</section-card>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2103,8 +2103,8 @@ export default {
|
||||
|
||||
.project-apply-page-form {
|
||||
min-height: 100%;
|
||||
padding: 20px 24px 92px;
|
||||
background: #f5f6fa;
|
||||
//padding: 20px 24px 92px;
|
||||
//background: #f5f6fa;
|
||||
}
|
||||
|
||||
.project-apply-page__title {
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
</section>
|
||||
|
||||
<section class="formal-page__table-panel">
|
||||
<el-tabs v-model="activeSettlementType" @tab-change="handleSettlementTypeChange">
|
||||
<el-tabs type="border-card" v-model="activeSettlementType" @tab-change="handleSettlementTypeChange">
|
||||
<el-tab-pane label="应付" name="payable" />
|
||||
<el-tab-pane label="应收" name="receivable" />
|
||||
</el-tabs>
|
||||
|
||||
@@ -4856,8 +4856,8 @@ export default {
|
||||
|
||||
.archive-page-form {
|
||||
min-height: 100%;
|
||||
padding: 20px 24px 92px;
|
||||
background: #fff;
|
||||
//padding: 20px 24px 92px;
|
||||
//background: #fff;
|
||||
}
|
||||
|
||||
.archive-page-form__title {
|
||||
|
||||
Reference in New Issue
Block a user