dy-admin-manager/src/views/categroyManager/vipNewActive.vue

<template>
  <div class="m-container">
    <!-- <h2><div class="squrt"></div>VIP活动方案新增 </h2> -->
    <h2>
      <el-page-header @back="onCancel" :content="title"></el-page-header>
    </h2>

    <div class="m-core">
      <el-steps
        :active="active"
        finish-status="success"
        align-center
        class="steps"
      >
        <el-step title="基础信息"></el-step>
        <el-step title="缴费信息"></el-step>
        <el-step title="课酬信息"></el-step>
      </el-steps>
      <div class="wrap">
        <baseInfo
          :baseForm="baseForm"
          v-if="active == 1"
          ref="baseForm"
          @resetPayInfo="resetPayInfo"
          @resetBaseChannel="resetBaseChannel"
          :isDisabled="isDisabled"
          :status="statuss"
        />

        <payInfo
          :payForm="payForm"
          ref="payInfo"
          :organ="baseForm.organ"
          :activeType="baseForm.activityType"
          :activityChannel="baseForm.activityChannel"
          @changeCourseType="changeCourseType"
          @changeGiveCourseType="changeGiveCourseType"
          @chageSalary="chageSalary"
          @resetFixedCourseNumFlag="resetFixedCourseNumFlag"
          v-if="active == 2"
          :isDisabled="isDisabled || statuss != 'DRAFT'"
        />
        <salaryInfo
          ref="salaryInfo"
          :salaryForm="salaryForm"
          v-if="active == 3"
          :activeType="baseForm.activityType"
          :payForm="payForm"
          :isDisabled="isDisabled || statuss != 'DRAFT'"
          :status="statuss"
        />
      </div>
      <el-button
        style="margin-top: 12px"
        type="primary"
        @click="prve"
        v-if="active > 1"
        >上一步</el-button
      >
      <el-button
        style="margin-top: 12px"
        type="primary"
        @click="next"
        v-if="active < 3"
        >下一步</el-button
      >

      <el-button
        style="margin-top: 12px"
        type="danger"
        @click="save"
        v-if="!isDisabled && statuss == 'DRAFT'"
        >保存草稿</el-button
      >
      <el-button
        style="margin-top: 12px"
        type="danger"
        @click="submit"
        v-if="active == 3 && !isDisabled && statuss == 'DRAFT'"
        >创建活动</el-button
      >
      <el-button
        style="margin-top: 12px"
        type="danger"
        @click="submit"
        v-if="active == 3 && !isDisabled && statuss != 'DRAFT'"
        >提交修改</el-button
      >
    </div>
  </div>
</template>

<script>
import baseInfo from "./modals/baseInfo.vue";
import payInfo from "./modals/payInfo.vue";
import salaryInfo from "./modals/salaryInfo.vue";
import merge from "webpack-merge";
import {
  vipGroupCategory,
  addVipActive,
  resetVipActive,
  getVipGroupActivity
} from "@/api/vipSeting";
import cleanDeep from "clean-deep";
const payBaseForm = {
  courseType: "",
  vipGroupCategoryIdList: "",
  applyToStudentType: [],
  teachMode: null,
  allowOnlineToOffline: "",
  singleCourseTime: null,
  fixedCourseNumFlag: false,
  minCourseNum: null,
  maxCourseNum: null,
  memberRankId: null,
  periodEnum: null,
  discount: 100,
  fullMinusCourseTimes: null,
  giveCourseType: null,
  giveTeachMode: null,
  giveCategoryId: null,
  giveSingleCourseTime: null,
  giveCourseNum: null,
  giveMemberRankId: null,
  giveMemberTime: null,
  giveAllowOnlineToOffline: null
};
const baseSalaryForm = {
  vipOnlineSalarySettlement: {
    salarySettlementType: null,
    settlementValue: null
  },
  offlineSalarySettlement: {
    salarySettlementType: null,
    settlementValue: null
  },
  giveVipOnlineSalarySettlement: {
    salarySettlementType: null,
    settlementValue: null
  },
  giveVipOfflineSalarySettlement: {
    salarySettlementType: null,
    settlementValue: null
  },
  practiceSalarySettlement: {
    salarySettlementType: null,
    settlementValue: null
  },
  givePracticeSalarySettlement: {
    salarySettlementType: null,
    settlementValue: null
  }
};
export default {
  components: {
    baseInfo,
    payInfo,
    salaryInfo
  },
  data() {
    return {
      status: "DRAFT",
      active: 1,
      baseForm: {
        name: "",
        description: "",
        activeTime: [],
        courseTime: [],
        organ: [],
        activityType: "",
        applyToStudentType: [],
        studentMaxUsedTimes: "",
        isPayToBalance: "",
        marketPrice: "",
        activityChannel: null,
        originalPrice: null
      },
      title: "新建课程活动方案",
      payForm: {
        ...payBaseForm
      },
      salaryForm: {
        ...baseSalaryForm
      }
    };
  },
  async mounted() {

    if (this.$route.query.id) {
      this.baseForm.id = this.$route.query.id;
      const rusult = await getVipGroupActivity({ id: this.$route.query.id });
      this.formatDetail(rusult.data);
      this.$router;
    } else {
      this.payInfo = { ...payBaseForm };
      this.salaryForm = JSON.parse(JSON.stringify({ ...baseSalaryForm }));
    }
  },
  methods: {
    onCancel() {
      // if (this.active > 1) {
      //   this.active--;
      //   console.log(this.active);
      // } else {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/vipActiveManager/vipActiveList",
        query: { rules: this.rules, searchForm: this.searchForm }
      });
      // }
    },
    next() {
      let flags = true;
      if (this.active == 1) {
        this.$refs.baseForm.$refs.vipform.validate(flag => {
          flags = flag;
        });
        // 验证表单1
      } else if (this.active == 2) {
        // 验证表单2
        this.$refs.payInfo.$refs.form.validate(flag => {
          flags = flag;
        });
      }
      if (!flags) {
        return;
      }
      if (this.active < 3) {
        this.active++;
      }
    },
    prve() {
      if (this.active >= 2) {
        this.active--;
      }
    },
    resetPayInfo() {
      this.payForm = {
        ...payBaseForm
      };
    },
    resetBaseChannel(val) {
      this.$set(this.baseForm, "courseTime", []);
      this.$set(this.baseForm, "activityType", null);
      this.$set(this.baseForm, "applyToStudentType", []);
      this.$set(this.baseForm, "studentMaxUsedTimes", null);
      this.$set(this.baseForm, "isPayToBalance", null);
      this.$set(this.baseForm, "marketPrice", null);
      this.$set(this.baseForm, "originalPrice", null);
      if (val == 1) {
        this.$set(this.baseForm, "activityType", 0);
        this.$set(this.payForm, "allowOnlineToOffline", 1);
        this.$set(this.payForm, "teachMode", -1);
      }
    },
    changeCourseType(val) {
      // this.$emit("changeCourseType", val);
      if (val == "PRACTICE") {
        this.$set(this.payForm, "vipGroupCategoryIdList", "");
        this.$set(this.payForm, "teachMode", "");
        this.$set(this.payForm, "singleCourseTime", 25);
        this.$set(this.payForm, "allowOnlineToOffline", "");
      } else {
        this.$set(this.payForm, "singleCourseTime", 45);
        this.$set(this.payForm, "allowOnlineToOffline", "");
        this.$set(this.payForm, "vipGroupCategoryIdList", "");
        this.$set(this.payForm, "teachMode", "");
      }
      // vip
      // 课程形式
      // 上课模式
      // 单课时长
      // 课程调整方式
      // PRACTICE
    },
    changeGiveCourseType(val) {
      if (val == "PRACTICE") {
        this.$set(this.payForm, "giveSingleCourseTime", 25);
      } else if (val == "VIP") {
        this.$set(this.payForm, "giveSingleCourseTime", 45);
      } else {
        this.$set(this.payForm, "giveSingleCourseTime", null);
      }
      this.$set(this.payForm, "giveCourseNum", null);
      this.$set(this.payForm, "giveCategoryId", null);
      this.$set(this.payForm, "giveMemberRankId", null);
      this.$set(this.payForm, "givePeriod", null);
      this.$set(this.payForm, "giveTeachMode", "");
      this.$set(this.payForm, "giveAllowOnlineToOffline", "");
    },
    chageSalary() {
      this.salaryForm = null;
      this.salaryForm = JSON.parse(JSON.stringify({ ...baseSalaryForm }));

      this.$forceUpdate();
    },
    resetFixedCourseNumFlag() {
      this.$set(this.payForm, "maxCourseNum", null);
      this.$set(this.payForm, "minCourseNum", null);
    },
    async submit() {
      if (this.$refs?.salaryInfo?.$refs?.salaryForm) {
        this.$refs.salaryInfo.$refs.salaryForm.validate(flag => {
          if (flag) {
            this.baseForm.status = "PROGRESS";
            this.submitDataFormat("PROGRESS");
          }
        });
      } else {
        this.baseForm.status = "PROGRESS";
        this.submitDataFormat("PROGRESS");
      }
    },
    save() {
      this.baseForm.status = "DRAFT";
      this.submitDataFormat("DRAFT");
    },
    submitDataFormat(status) {
      let coursesStartTime = null,
        coursesEndTime = null,
        startTime = null,
        endTime = null;
      if (this.baseForm.courseTime && this.baseForm.courseTime.length > 0) {
        coursesStartTime = this.baseForm.courseTime[0];
        coursesEndTime = this.baseForm.courseTime[1];
      }
      if (this.baseForm.activeTime && this.baseForm.activeTime.length > 0) {
        startTime = this.baseForm.activeTime[0];
        endTime = this.baseForm.activeTime[1];
      }
      let organId = this.baseForm.organ.join(",");
      this.baseForm.studentMaxUsedTimes
        ? this.baseForm.studentMaxUsedTimes
        : (this.baseForm.studentMaxUsedTimes = -1);
      for (let item in this.salaryForm) {
        if (this.salaryForm[item].salarySettlementType == "TEACHER_DEFAULT") {
          this.salaryForm[item].settlementValue = null;
        }
      }
      let applyToStudentType = this.baseForm.applyToStudentType.join(",");
      // let vipGroupCategoryIdList =
      //   this.payForm.vipGroupCategoryIdList.join(",");
      let vipGroupSalarySettlement = this.salaryForm;
      // 乐团小课 || 是否限制课时数为true
      if (
        this.baseForm.activityChannel == 1 ||
        this.payForm.fixedCourseNumFlag
      ) {
        this.payForm.maxCourseNum = this.payForm.minCourseNum;
      }

      // 非乐团小课 是否限制课时数为true
      if (
        this.baseForm.activityChannel != 1 &&
        this.payForm.fixedCourseNumFlag
      ) {
        this.payForm.discount = 100;
      }
      let obj = {
        ...this.baseForm,
        ...this.payForm,
        organId,
        coursesStartTime,
        coursesEndTime,
        startTime,
        endTime,
        applyToStudentType,
        vipGroupSalarySettlement
      };
      if (this.baseForm.id) {
        resetVipActive(cleanDeep(obj)).then(res => {
          if (res.code == 200) {
            if (status == "DRAFT") {
              this.$message.success("恭喜你,保存草稿成功");
              this.baseForm.id = res.data.id;
              this.$router.push({
                query: merge(this.$route.query, {
                  id: res.data.id
                })
              });
              this.formatDetail(res.data);
            } else {
              localStorage.removeItem("newVip");
              localStorage.removeItem(`newPractice`);
              this.$message.success("活动修改成功");
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/vipActiveManager/vipActiveList"
              });
            }

            // this.onReSet();
            // this.$store.dispatch("delVisitedViews", this.$route);
            // this.$router.push({
            //   path: "/vipActiveManager/vipActiveList",
            // });
          }
        });
      } else {
        addVipActive(cleanDeep(obj)).then(res => {
          if (res.code == 200) {
            if (status == "DRAFT") {
              this.$message.success("恭喜你,保存草稿成功");
              this.baseForm.id = res.data.id;
              this.$nextTick(() => {
                this.formatDetail(res.data);
              });
              this.$router.push({
                query: merge(this.$route.query, {
                  id: res.data.id
                })
              });
            } else {
              this.$message.success("活动创建成功");
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/vipActiveManager/vipActiveList"
              });
            }
          }
        });
      }
    },
    formatDetail(data) {
      this.status = data.status;
      for (let item in data) {
        if (!(item == "teachMode" || item == "giveTeachMode")) {
          if (data[item] == -1) {
            data[item] = null;
          }
        }
      }
      let activeTime = [];
      let courseTime = [];
      this.title = data.name;
      if (data.startTime) {
        activeTime = [data.startTime, data.endTime];
      }
      if (data.coursesStartTime) {
        courseTime = [data.coursesStartTime, data.coursesEndTime];
      }
      let applyToStudentType = data.applyToStudentType
        ? data.applyToStudentType.split(",")
        : [];
      // 格式化 baseForm
      this.$set(this, "baseForm", {
        name: data.name,
        description: data.description,
        activeTime,
        courseTime,
        organ: data.organId.split(",").map(organ => {
          return Number(organ);
        }),
        activityType: data.activityType,
        applyToStudentType,
        studentMaxUsedTimes: data.studentMaxUsedTimes,
        isPayToBalance: Number(data.payToBalance),
        id: this.$route.query.id,
        activityChannel: data.activityChannel
      });
      // this.baseForm = {
      //   name: data.name,
      //   description: data.description,
      //   activeTime,
      //   courseTime,
      //   marketPrice: data.marketPrice,
      //   organ: data.organId.split(",").map((organ) => {
      //     return Number(organ);
      //   }),
      //   activityType: data.activityType,
      //   applyToStudentType,
      //   studentMaxUsedTimes,
      //   isPayToBalance: Number(data.payToBalance),
      //   id: this.$route.query.id,
      // };
      // this.$set()
      //格式化payForm
      // console.log(data.vipGroupCategoryIdList
      //     .split(",")
      //     .map((id) => {
      //       return Number(id);
      //     }),)
      this.payForm = {
        courseType: data.courseType,
        vipGroupCategoryIdList: data.vipGroupCategoryIdList
          ? data.vipGroupCategoryIdList.split(",").map(id => {
              return Number(id);
            })[0]
          : null,
        teachMode: data.teachMode + "",
        allowOnlineToOffline: data.allowOnlineToOffline + "",
        singleCourseTime: data.singleCourseTime,
        fixedCourseNumFlag: data.fixedCourseNumFlag,
        minCourseNum: data.minCourseNum,
        maxCourseNum: data.maxCourseNum,
        memberRankId: data.memberRankId,
        periodEnum: data.periodEnum,
        discount: data.discount,
        fullMinusCourseTimes: data.fullMinusCourseTimes,
        giveCourseType: data.giveCourseType,
        giveTeachMode: data.giveTeachMode + "",
        giveCategoryId:
          data.giveCategoryId * 1 ? data.giveCategoryId * 1 : null,
        giveSingleCourseTime: data.giveSingleCourseTime,
        giveCourseNum: data.giveCourseNum,
        giveMemberRankId: data.giveMemberRankId,
        givePeriod: data.givePeriodEnum,
        giveMemberTime: data.giveMemberTime ? data.giveMemberTime : null,
        giveAllowOnlineToOffline: data.giveAllowOnlineToOffline + "",
        marketPrice: data.marketPrice,
        originalPrice: data.originalPrice
      };
      // 格式化缴费金额
      if (data.salarySettlementJson && data.salarySettlementJson != "null") {
        this.salaryForm = JSON.parse(JSON.stringify({ ...baseSalaryForm }));
        let result = JSON.parse(data.salarySettlementJson);

        for (let key in result) {
          this.salaryForm[key] = result[key];
        }
      } else {
        this.salaryForm = JSON.parse(JSON.stringify({ ...baseSalaryForm }));
      }
      this.$forceUpdate();
    }
  },
  computed: {
    isDisabled() {
      if (this.$route.query.type == "look") {
        return true;
      } else {
        return false;
      }
    },
    statuss() {
      return this.status;
    }
  }
};
</script>
<style lang="scss" scoped>
.steps {
  margin-top: 30px;
}
::v-deep .is-success {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
</style>