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

<template>
  <div>
    <a-button
      type="primary"
      @click="goBack"
    >
      返回
    </a-button>
    <a-steps
      :current="current"
      :items="items"
    ></a-steps>
    <div class="steps-content">
      <div v-if="current == 0">
        <a-form
          :model="form"
          :label-col="{sm: { span: 6 } }"
          :wrapper-col="{ span:12}"
          ref="formRef"
        >
          <a-row :gutter="8">
            <a-col :xs="24">
              <a-form-item
                label="运营区域"
                required
                name="regionId"
                :rules="[{ required: true, message: '请选择运营区域' }]"
              >
                <a-select
                  v-model:value="form.regionId"
                  placeholder="请选择运营区域"
                  allow-clear
                >
                  <a-select-option value="1">时间计费</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="8">
            <a-col :xs="24">
              <a-form-item
                label="区域名称"
                required
                name="regionName"
                :rules="[{ required: true, message: '请输入区域名称' }]"
              >
                <a-input
                  v-model:value="form.regionName"
                  placeholder="请输入区域名称"
                  type="number"
                  :disabled="true"
                />
              </a-form-item>
            </a-col>

          </a-row>
          <a-row :gutter="8">
            <a-col :xs="24">
              <a-form-item
                label="区域代码"
                required
                name="regionCode"
                :rules="[{ required: true, message: '请输入区域代码' }]"
              >
                <a-input
                  v-model:value="form.regionCode"
                  placeholder="请输入区域代码"
                  type="number"
                  :disabled="true"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="8">
            <a-col :xs="24">
              <a-form-item
                label="区域简称"
                name="regionForShort"
              >
                <a-input
                  v-model:value="form.regionForShort"
                  placeholder="请输入区域简称"
                  type="number"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div v-if="current == 1">
        <RegionFeeCofFrom
          ref="formModel"
          :onCallBack="onCallBackFeeFormSave"
        ></RegionFeeCofFrom>
      </div>
      <div v-if="current == 2">
        <OperateConfForm
          ref="formModelConfig"
          :onCallBack="onCallBackConfigFormSave"
        ></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>
    </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/RegionFeeCofFrom.vue'
import OperateConfForm from '@/views/form/operateregion/OperateConfForm.vue'
import { useRouter, useRoute } from 'vue-router'


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

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


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

const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};

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

const onCallBackFeeFormSave = (data) => {
  open.value = false;
  if (data['code'] == 200) {
    getData()
  } else {
    message.error(data.message)
  }
}

const onCallBackConfigFormSave = (data) => {
  openConfig.value = false;
}

</script>

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

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