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={ +