本文将讲解如何通过自定义，实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。

实现路径

整体的实现思路是界面设计器拖个选项卡组件，自定义这个选项卡，里面的每个选项页都当成一步渲染出来，每一步的名称是选项页的标题。

1. 界面设计器拖出页面

我们界面设计器拖个选项卡组件，然后在每个选项页里拖拽任意元素。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的步骤条组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。

2. 组件实现

widget 组件重写了选项卡，核心函数 renderStep，通过 DslRender.render 方法渲染界面设计器拖拽的元素，每一步的 step 又是解析选卡页得到的。

import {
  SPI,
  Widget,
  DefaultTabsWidget,
  BasePackWidget,
  DslDefinition,
  DslRender,
  DslDefinitionType,
  CallChaining,
  customMutation
} from '@oinone/kunlun-dependencies';
import { VNode } from 'vue';
import NextStepSinglePage from './NextStepSinglePage.vue';

@SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStepSinglePage' }))
export class NextStepSinglePageWidget extends DefaultTabsWidget {
  public initialize(props) {
    super.initialize(props);
    this.setComponent(NextStepSinglePage);
    return this;
  }

  @Widget.Reactive()
  public get invisible() {
    return false;
  }

  // 配置的每一步名称，解析选项页的标题
  @Widget.Reactive()
  public get titles() {
    return this.template?.widgets?.map((item) => item.title) || [];
  }

  // region 上一步下一步配置

  // 步骤数组，数组里的元素即步骤要渲染的内容
  @Widget.Reactive()
  public get steps(): DslDefinition[] {
    // 每个 tab 是一个步骤，这里会有多个步骤
    // 每个步骤里有多个元素，又是数组
    // 所以这里是二维数组
    const tabDsls: DslDefinition[][] = this.template?.widgets.map((item) => item.widgets) || [];

    // 对每个步骤的子元素们，外侧包一层 row 布局，所以变回了一维数组
    return tabDsls.map((tabDsl) => {
      return {
        ...(this.template || {}),
        dslNodeType: DslDefinitionType.PACK,
        widgets: tabDsl,
        widget: 'row',
        resolveOptions: {
          mode: 1
        }
      };
    });
  }

  // 渲染步骤，每个步骤有多个子元素
  @Widget.Method()
  public renderStep(step: DslDefinition): VNode | undefined {
    return DslRender.render(step);
  }

  // region 校验相关

  // 校验的钩子
  @Widget.Reactive()
  @Widget.Inject('validatorCallChaining')
  protected parentValidatorCallChaining: CallChaining<boolean> | undefined;

  // 校验步骤表单
  @Widget.Method()
  public async onValidator(): Promise<boolean> {
    const res = await this.parentValidatorCallChaining?.syncCall();
    return res ?? true;
  }

  // region 数据提交相关

  // 提交数据的方法
  @Widget.Method()
  public async onSave() {
    const submitData = this.formData;
    await customMutation(this.model.model, 'create', submitData || {});
    window.history.back();
  }
}

vue组件核心内容是用component :is属性，渲染出配置的选项页组件

<template>
  <div class="next-step">
    <a-steps :current="current">
      <a-step v-for="title in titles" :title="title" />
    </a-steps>
    <OioSpin :loading="loading" class="oio-spin">
      <div class="step-main">
        <template v-for="(stepEl, index) in stepsVNodes">
          <div v-if="current === index" class="step-item">
            <component :is="stepEl" />
          </div>
        </template>
      </div>
      <div class="step-footer" v-if="stepsVNodes.length">
        <a-button v-if="current > 0" class="oio-button" type="primary" @click="previous"> 上一步 </a-button>
        <a-button v-if="current < stepsVNodes.length - 1" class="oio-button" type="primary" @click="next">
          下一步
        </a-button>
        <a-button v-if="current === stepsVNodes.length - 1" class="oio-button" type="primary" @click="finish">
          完成
        </a-button>
      </div>
    </OioSpin>
  </div>
</template>
<script setup lang="ts">
import { computed, PropType, ref, VNode } from 'vue';
import { OioSpin } from '@oinone/kunlun-vue-ui-antd';
import { DslDefinition } from '@oinone/kunlun-dependencies';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  titles: {
    type: Array as PropType<string[]>,
    default: []
  },
  steps: {
    type: Array as PropType<DslDefinition[][]>,
    default: []
  },
  renderStep: {
    type: Function as PropType<(step: DslDefinition[]) => VNode[]>
  },
  onValidator: {
    type: Function
  },
  onSave: {
    type: Function
  }
});

const stepsVNodes = computed(() => {
  return props.steps?.map((step) => props.renderStep?.(step));
});

const current = ref<number>(0);

const next = async () => {
  if (await props.onValidator?.()) {
    current.value++;
  }
};
const previous = async () => {
  // if (await props.onValidator?.()) {
  current.value--;
  // }
};
const finish = async () => {
  if (await props.onValidator?.()) {
    props.onSave?.();
  }
};
</script>
<style lang="scss" scoped>
.next-step {
  height: 100%;
  background-color: #fff;
  padding: 16px;

  .step-main {
    display: flex;
    justify-content: flex-start;

    .step-item {
      width: 100%;
    }
  }

  .step-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
  }
}
</style>

3. 效果