diff --git a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss index e3784a0e..212b42c7 100644 --- a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss +++ b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss @@ -191,6 +191,19 @@ margin-top: 16px; } +.formFooter { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + background: #fff; + border-top: 1px solid #f0f0f0; +} + +.footerBtn { + min-width: 80px; +} + // 步骤条美化 .formSteps :global(.ant-steps-item-title) { font-size: 15px; diff --git a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx index dcadca5c..04932ab9 100644 --- a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx +++ b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx @@ -184,7 +184,21 @@ const TrafficDistributionForm: React.FC = () => { }; // 步骤切换 - const next = () => setCurrent(cur => cur + 1); + const next = () => { + if (current === 0) { + // 第一步需要验证表单 + form + .validateFields() + .then(() => { + setCurrent(cur => cur + 1); + }) + .catch(() => { + // 验证失败,不进行下一步 + }); + } else { + setCurrent(cur => cur + 1); + } + }; const prev = () => setCurrent(cur => cur - 1); // 过滤流量池 @@ -201,6 +215,29 @@ const TrafficDistributionForm: React.FC = () => { } loading={detailLoading} + footer={ +
+ {current > 0 && ( + + )} + {current < 2 ? ( + + ) : ( + + )} +
+ } >
@@ -208,7 +245,6 @@ const TrafficDistributionForm: React.FC = () => {
next()} initialValues={{ name: isEdit ? "" : generateDefaultName(), distributeType: 1, @@ -314,16 +350,6 @@ const TrafficDistributionForm: React.FC = () => {
)} - - - )} {current === 1 && ( @@ -361,14 +387,6 @@ const TrafficDistributionForm: React.FC = () => { className={style.checkboxGroup} />
-
- - -
)} {current === 2 && ( @@ -409,14 +427,6 @@ const TrafficDistributionForm: React.FC = () => { 已选流量池:{selectedPools.length} 个 -
- - -
)}