ebike-ui/ebike-operate/src/views/Urban/OperateRegionAdd/index.vue

<template>
  <div>
    <div style="display: flex;justify-content: center;">
      <a-steps
        style="margin-top: 20px;width: 80%;"
        :current="current"
        :items="items"
      ></a-steps>
    </div>
    <div class="steps-content">
      <div v-if="current == 0">
        <OperateAddForm ref="formModelOperateAdd">
        </OperateAddForm>
      </div>
      <div v-if="current == 1">
        <RegionFeeCofFrom ref="formModel"></RegionFeeCofFrom>
      </div>
      <div v-if="current == 2">
        <OperateConfForm ref="formModelConfig"></OperateConfForm>
      </div>
    </div>
    <div class="steps-action">
      <a-button
        v-if="current < steps.length - 1"
        type="primary"
        @click="next"
      >下一步</a-button>
      <a-button
        v-if="current > 0"
        style="margin-left: 8px"
        @click="prev"
      >上一步</a-button>
      <a-button
        v-if="current == 2"
        style="margin-left: 8px"
        @click="next"
      >完成</a-button>
      <a-button
        type="default"
        style="margin-left: 8px"
        @click="goBack"
      >
        返回
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { callOperate } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import RegionFeeCofFrom from '@/views/form/operateregion/feeconfig/RegionFeeCofFrom.vue'
import OperateConfForm from '@/views/form/operateregion/operateconfig/OperateConfForm.vue'
import OperateAddForm from '@/views/form/operateregion/operateconfig/OperateAddForm.vue'
import { useRouter, useRoute } from 'vue-router'


const current = ref(0);
const formModel = ref(null);
const formModelConfig = ref(null);
const formModelOperateAdd = ref(null);

const router = useRouter()
const steps = ref([
  {
    title: '基本配置',
  },
  {
    title: '费用信息',
  },
  {
    title: '运营配置',
  },
]);

const items = steps.value.map(item => ({ key: item.title, title: item.title }));

const next = () => {
  switch (current.value) {
    case 0:
      formModelOperateAdd.value.formSave((bres, data) => {
        if (bres) current.value++;
      });
      break;
    case 1:
      formModel.value.formSave((bres, data) => {
        if (bres) current.value++;
      }); break;
    case 2:
      formModelOperateAdd.value.formSave((bres, data) => {
        if (bres) current.value++;
      }); break;
    default: break
  }
};
const prev = () => {
  current.value--;
};

const goBack = () => {
  router.back()
}

</script>

<style scoped>
.steps-content {
  margin-top: 16px;
}

.steps-action {
  margin-top: 24px;
  text-align: center;
}
</style>