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 =
|
||||
this.config.enableTransportPlanCreateActions === true &&
|
||||
this.$route.query.mode === 'add';
|
||||
return {
|
||||
const base = {
|
||||
...this.option,
|
||||
boxType: this.$route.query.mode === 'edit' ? 'edit' : 'add',
|
||||
menuBtn: true,
|
||||
submitBtn: !isTransportPlanCreate,
|
||||
emptyBtn: false,
|
||||
};
|
||||
if (this.isContractFormPage) {
|
||||
return this.buildContractFormGroupOption(base);
|
||||
}
|
||||
return base;
|
||||
},
|
||||
isWaybillDetailLayout() {
|
||||
return this.config.permission === 'waybill_manage';
|
||||
@@ -6854,6 +6858,41 @@ export default {
|
||||
if (mode === 'edit') this.form = { id };
|
||||
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 = {}) {
|
||||
if (this.isStandaloneBusinessPage) {
|
||||
this.$router.push({
|
||||
@@ -15812,7 +15851,7 @@ export default {
|
||||
width: 100% !important;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 24px 96px;
|
||||
//padding: 20px 24px 96px;
|
||||
background: #f5f6fa;
|
||||
margin: 0 !important;
|
||||
border-radius: 0;
|
||||
@@ -15973,6 +16012,51 @@ export default {
|
||||
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)) {
|
||||
left: 60px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user