precise_delivery_distribution_front/src/views/put/landing/add.vue

<template>
  <div class="landing-add">
    <div class="landing-container">
      <div class="step-container">
        <a-steps :current="stepCurrent">
          <a-step title="填写基本信息" />
          <a-step title="编辑内容1" />
        </a-steps>
      </div>
      <div class="step-content-container">
        <component
          :is="stepComponent[stepCurrent]"
          :content="forms"
          @next="onTapNext"
          @prev="onTapPrev"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  createVNode,
  ref,
  onMounted,
} from "vue";
import { onBeforeRouteLeave } from "vue-router";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { landingAdd, getLandingInfo, landingEdit } from "@/api";
import StepOne from "./stepComp/step-one.vue";
import StepTwo from "./stepComp/step-two.vue";
import useApp from "@/hooks/useApp";
import { message } from "ant-design-vue";
const LandingAddPage = defineComponent({
  name: "LandingAddPage",
  components: {
    StepOne,
    StepTwo,
  },
  setup() {
    const state = reactive({
      stepCurrent: 0,
      stepComponent: ["step-one", "step-two"],
      isOver: false,
      forms: ref<Record<string, any>>({}),
    });
    const { route, router } = useApp();
    onBeforeRouteLeave((_, __, next) => {
      if (!state.isOver) {
        Modal.confirm({
          title: "确认离开当前页面吗?",
          content: "未保存的内容将会丢失",
          icon: createVNode(ExclamationCircleOutlined),
          onOk: () => {
            next();
          },
        });
      } else {
        next();
      }
    });

    if (route.query && route.query.id) {
      getLandingInfo(route.query.id as string).then((res) => {
        state.forms = res.data;
      });
    }
    const onTapNext = (content: Record<string, any>) => {
      //log(content);
      state.forms = Object.assign(state.forms, content);
      if (state.stepCurrent >= 1) {
        if (route.query && route.query.id) {
          landingEdit(Object.assign(state.forms, { id: route.query.id })).then(
            (res) => {
              state.isOver = true;
              message.success("编辑成功");
              router.replace("/put/landing");
            }
          );
        } else {
          landingAdd(state.forms).then((res) => {
            state.isOver = true;
            message.success("创建成功");
            router.replace("/put/landing");
          });
        }
      } else {
        state.stepCurrent++;
      }
    };

    //上一步
    const onTapPrev = (content: Record<string, any>) => {
      Object.assign(state.forms, content)
      state.stepCurrent--;
    };
    return {
      ...toRefs(state),
      onTapNext,
      onTapPrev,
    };
  },
});

export default LandingAddPage;
</script>

<style lang="scss">
.landing-add {
  padding: 22px;
  min-height: 100%;

  .landing-container {
    height: inherit;
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
    padding: 16px;
  }

  .step-container {
    padding: 20px 60px 36px;
    border-bottom: 1px solid #e5e5e5;
  }

  .step-content-container {
    padding: 20px 42px;
  }
}
</style>