water-dispatch-web/src/views/order/component/normalCreate.vue

<template>
  <div>
    <LxHeader
      icon="md-apps"
      :text="$route.meta.title"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="调度指令"
    >
    </LxHeader>

    <Card>
      <div class="step">
        <el-steps :active="currentStep" align-center process-status="finish" finish-status="success">
          <el-step title="点位选择"></el-step>
          <el-step title="调令内容"></el-step>
          <el-step title="调令预览"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>

      <Divider></Divider>

      <div class="content">
        <step1 v-if="currentStep === 0" :original-data="data" @next="handleNext"></step1>
        <step2 v-if="currentStep === 1" :original-data="data" @next="handleNext" @forward="handleForward"></step2>
        <step3 v-if="currentStep === 2" :original-data="data" @next="handleNext" @forward="handleForward"></step3>

        <div v-if="currentStep === 3" class="complete">
          <Icon class="complete__icon" type="ios-checkmark-circle" />

          <p>完成</p>

          <Button style="width: 180px;" type="primary" @click="$router.push('/dispatch/list')">查看调令</Button>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import { save } from "@/api/system/baseForm";
import { uuid } from "@/utils";

import LxHeader from "@/components/LxHeader/index.vue";
import step1 from "@/views/order/component/step1.vue";
import step2 from "@/views/order/component/step2.vue";
import step3 from "@/views/order/component/step3.vue";
export default {
  components: {
    LxHeader,
    step1,
    step2,
    step3
  },
  data() {
    return {
      currentStep: 0,

      data: []
    }
  },
  methods: {
    handleNext ({ data, step }) {
      console.log(data,step)
      switch (step) {
        case 1:
          let uid = uuid();
          this.data = data.map(equipmentId => {
            return {
              no: uid,
              equipment_id: equipmentId,
              start_time: '',
              end_time: '',
              content: '',
              level: 1,
              status: 1
            }
          })
          this.currentStep = 1;
          break;
        case 2:
          this.data = data;
          this.currentStep = 2;
          break;
        case 3:
          let promiseAll = this.data.map(i => {
            delete i['equipment_id-span']
            delete i['_index']
            delete i['_rowKey']
            i.start_time = `${this.$moment().format('YYYY-MM-DD')} ${i.start_time}`;
            i.end_time = `${this.$moment().format('YYYY-MM-DD')} ${i.end_time}`;

            return save({
              table_name: 'transfers',
              ...i
            },false)
          })
          let loadingInstance = this.$loading({
            lock:true,
            background:"rgba(0,0,0,0.4)",
            text:"正在加载中..."
          })
          Promise.all(promiseAll).then(res => {
            this.data = [];
            loadingInstance.close();
            this.currentStep = 3;
          }).catch(_ => {
            loadingInstance.close();
          })
          break;
      }
    },

    handleForward ({ data, step }) {
      switch (step) {
        case 2:
          this.data = data;
          this.currentStep = 0;
          break;
        case 3:
          this.currentStep = 1;
          break;
      }
    }
  },
  computed: {},
}
</script>

<style scoped lang="scss">
::v-deep .ivu-steps .ivu-steps-title,::v-deep .ivu-steps .ivu-steps-head {
  background: #0000;
}

.step {
  width: 80%;

  margin: 0 auto;
}

.complete {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-bottom: 20px;
  &__icon {
    color: green;
    font-size: 66px;
  }

  & > p {
    font-weight: 600;
    color: #333;
    font-size: 20px;

    padding: 20px 0;
  }
}
</style>