bsdgy-front/src/pages/activity/useTable.vue

<template>
  <Modal v-model="displayUseModal" @on-cancel="cancel" width="1000">
    <Steps style="padding: 40px;" :current="currentStep">
      <Step title="基本信息" content=""></Step>
      <Step title="选择零售公司" content=""></Step>
      <Step title="选择店铺" content=""></Step>
      <Step title="确认信息" content=""></Step>
    </Steps>
    <useActivityStepOne :displayUseModal="displayUseModal" v-if="currentStep==0"></useActivityStepOne>
    <useActivityStepTwo v-if="currentStep==1"></useActivityStepTwo>
    <useActivityStepThree v-if="currentStep==2"></useActivityStepThree>
    <useActivityStepFoure v-if="currentStep==3"></useActivityStepFoure>
    <div slot="footer">
      <Button v-if="currentStep!==0" type="primary" shape="circle" :loading="modal_loading" @click="back">上一步</Button>
      <Button v-if="currentStep!==3" type="primary" shape="circle" :loading="modal_loading" @click="next">下一步</Button>
      <Button v-if="currentStep==3" type="primary" shape="circle" :loading="modal_loading" @click="finish">完成</Button>
    </div>
    </Modal>
</template>
<script>
import useActivityStepOne from './useActivityStepOne'
import useActivityStepTwo from './useActivityStepTwo'
import useActivityStepThree from './useActivityStepThree'
import useActivityStepFoure from './useActivityStepFoure'
import ActivityManager from "../../services/ActivityManager/ActivityManager"
import store from "../../store/index"
export default {
  name: "useTable",
  components: {
    useActivityStepOne,
    useActivityStepTwo,
    useActivityStepThree,
    useActivityStepFoure
	},
  data() {
		return {
      currentStep: 0,
      modal_loading: false,
      displayUseModal: false
		}
  },
  props: {
    useModal: Boolean,
    id: String
  },
  watch: {
    useModal(val) {
      this.displayUseModal = val
    }
  },
	mounted() {
    console.log(this.useModal)
  },
  methods: {
    cancel() {
      this.$emit("dispalyuseModal", false, false)
      this.currentStep = 0
    },
    next() {
        const data = store.getters.useData;
        if (this.currentStep === 0) {
            if (!data.activityStartDate) {
                this.$Message.error('请填写活动开始时间');
                return;
            }
            if (!data.activityEndDate) {
                this.$Message.error('请填写活动结束时间');
                return;
            }
            if (data.activityStartDate > data.activityEndDate) {
                this.$Message.error('开始时间不能晚于结束时间');
                return;
            }
        }
        if (this.currentStep === 1) {
            if (!data.selectCompanyValue || data.selectCompanyValue.length === 0) {
                this.$Message.error('请至少选择1家公司');
                return;
            }
        }
        if (this.currentStep === 2) {
            if (!data.selectShopValue || data.selectShopValue.length === 0) {
                this.$Message.error('请至少选择1家店铺');
                return;
            }
        }
      this.currentStep = this.currentStep + 1
    },
    back() {
      this.currentStep = this.currentStep - 1
    },
    finish() {
      let that = this
      console.log(store.getters.useData)

      let data = {
        beginTime: store.getters.useData.activityStartDate,
        endTime: store.getters.useData.activityEndDate,
        name: store.getters.useData.name,
        organizations: store.getters.useData.selectCompanyValue,
        params: store.getters.useData.inputActivityList,
        stores: store.getters.useData.selectShopValue,
        id: store.getters.useData.id,
        scheduleId: store.getters.useData.scheduleId,
        isGetActivityInfo: true
      }
      ActivityManager.saveActivityData(data, function (data) {
        that.$emit("dispalyuseModal", false, false)
        that.$router.push('/activity/plan');
        that.currentStep = 0
      })
    }
  }
}
</script>

<style  scoped>
</style>