feat(business-crud-page): 合同管理表单页改为多分组卡片风格
参考 business/project-apply 表单页的白底分组卡片样式,让合同管理新增/编辑 表单页(/business/contract-manage/form)的 7 个业务分组(基本信息 / 合同文件 / 计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录)独立成白底卡片、卡间 留 12px 间距露出灰底,标题统一加 4px 主色蓝条,与项目管理风格一致。 实现: - buildContractFormGroupOption:按 order 降序遍历 option.column,遇到 basicInfoTitle/contractFileTitle/billingInfoTitle/settlementRuleTitle/ paymentRatioTitle/attachmentTitle/changeRecordTitle 7 个分区分隔列就切片 分组;第一组做 column,后 6 组做 group(label: '' / arrow: false,避免 avue-group 渲染空标题/箭头) - pageFormOption:isContractFormPage 时调用上述方法 - CSS:合同表单页 dialog 灰底 #f5f6fa、avue-form 透明化、avue-form__group 与 avue-group 统一白底 + 6px 圆角 + 轻阴影 + 12px margin-bottom
This commit is contained in:
@@ -6207,13 +6207,17 @@ export default {
|
|||||||
const isTransportPlanCreate =
|
const isTransportPlanCreate =
|
||||||
this.config.enableTransportPlanCreateActions === true &&
|
this.config.enableTransportPlanCreateActions === true &&
|
||||||
this.$route.query.mode === 'add';
|
this.$route.query.mode === 'add';
|
||||||
return {
|
const base = {
|
||||||
...this.option,
|
...this.option,
|
||||||
boxType: this.$route.query.mode === 'edit' ? 'edit' : 'add',
|
boxType: this.$route.query.mode === 'edit' ? 'edit' : 'add',
|
||||||
menuBtn: true,
|
menuBtn: true,
|
||||||
submitBtn: !isTransportPlanCreate,
|
submitBtn: !isTransportPlanCreate,
|
||||||
emptyBtn: false,
|
emptyBtn: false,
|
||||||
};
|
};
|
||||||
|
if (this.isContractFormPage) {
|
||||||
|
return this.buildContractFormGroupOption(base);
|
||||||
|
}
|
||||||
|
return base;
|
||||||
},
|
},
|
||||||
isWaybillDetailLayout() {
|
isWaybillDetailLayout() {
|
||||||
return this.config.permission === 'waybill_manage';
|
return this.config.permission === 'waybill_manage';
|
||||||
@@ -6854,6 +6858,41 @@ export default {
|
|||||||
if (mode === 'edit') this.form = { id };
|
if (mode === 'edit') this.form = { id };
|
||||||
this.beforeOpen(() => {}, mode);
|
this.beforeOpen(() => {}, mode);
|
||||||
},
|
},
|
||||||
|
buildContractFormGroupOption(option) {
|
||||||
|
const sectionTitleProps = [
|
||||||
|
'basicInfoTitle',
|
||||||
|
'contractFileTitle',
|
||||||
|
'billingInfoTitle',
|
||||||
|
'settlementRuleTitle',
|
||||||
|
'paymentRatioTitle',
|
||||||
|
'attachmentTitle',
|
||||||
|
'changeRecordTitle',
|
||||||
|
];
|
||||||
|
const columns = [...(option.column || [])].sort(
|
||||||
|
(a, b) => (b.order || 0) - (a.order || 0)
|
||||||
|
);
|
||||||
|
const groups = [];
|
||||||
|
let current = [];
|
||||||
|
columns.forEach(col => {
|
||||||
|
if (sectionTitleProps.includes(col.prop)) {
|
||||||
|
if (current.length) groups.push(current);
|
||||||
|
current = [col];
|
||||||
|
} else {
|
||||||
|
current.push(col);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (current.length) groups.push(current);
|
||||||
|
if (groups.length <= 1) return option;
|
||||||
|
return {
|
||||||
|
...option,
|
||||||
|
column: groups[0],
|
||||||
|
group: groups.slice(1).map(group => ({
|
||||||
|
label: '',
|
||||||
|
arrow: false,
|
||||||
|
column: group,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
},
|
||||||
openContractFormPage(mode, row = {}) {
|
openContractFormPage(mode, row = {}) {
|
||||||
if (this.isStandaloneBusinessPage) {
|
if (this.isStandaloneBusinessPage) {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
@@ -15812,7 +15851,7 @@ export default {
|
|||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 20px 24px 96px;
|
//padding: 20px 24px 96px;
|
||||||
background: #f5f6fa;
|
background: #f5f6fa;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@@ -15973,6 +16012,51 @@ export default {
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 合同管理独立表单页:标题分块使用白底卡片,间距 12px,与 section-card 风格一致
|
||||||
|
:global(.contract-manage-form-dialog) {
|
||||||
|
padding: 20px 24px 96px;
|
||||||
|
background: #f5f6fa;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.business-crud-page--contract-form .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) {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding: 14px 16px 4px;
|
||||||
|
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) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.business-crud-page--contract-form .avue-group .el-collapse) {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.business-crud-page--contract-form .avue-group .el-collapse-item__header) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.business-crud-page--contract-form .avue-group .el-collapse-item__wrap) {
|
||||||
|
border-bottom: none;
|
||||||
|
will-change: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.business-crud-page--contract-form .avue-group .el-collapse-item__content) {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
:global(.avue--collapse .el-overlay:has(.contract-manage-form-dialog)) {
|
:global(.avue--collapse .el-overlay:has(.contract-manage-form-dialog)) {
|
||||||
left: 60px !important;
|
left: 60px !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user