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="
          'VIP/乐理课活动方案' + (pageType == 'create' ? '新增' : '修改')
        "
      ></el-page-header>
    </h2>
    <div class="m-core">
      <el-form
        :label-position="labelPosition"
        :model="vipform"
        ref="vipform"
        label-width="120px"
        :rules="vipformRules"
        class="vipform"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input style="width: 400px" v-model.trim="vipform.name"></el-input>
        </el-form-item>
        <el-form-item label="适用分部" prop="organ">
          <select-all
            v-model.trim="vipform.organ"
            style="width: 400px"
            multiple
            filterable
            @visible-change="$forceUpdate()"
            @change="onOrganChange"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
          <!-- <el-button @click="onCheckAllBranch">适用所有分部</el-button> -->
        </el-form-item>
        <el-form-item label="课程形式" prop="stauts">
          <select-all
            v-model.trim="vipform.stauts"
            style="width: 400px"
            @visible-change="$forceUpdate()"
            clearable
            multiple
          >
            <el-option
              v-for="item in selects.vipGroupCategory"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </select-all>
        </el-form-item>
        <el-form-item label="课程调整方式" prop="allowOnlineToOffline">
          <el-select
            v-model.trim="vipform.allowOnlineToOffline"
            placeholder="请选择课程调整方式"
            clearable
          >
            <el-option label="无限制" :value="1"></el-option>
            <el-option label="线上不可转线下" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用学员" prop="applyToStudentType">
          <el-select
            v-model.trim="vipform.applyToStudentType"
            placeholder="请选择使用学员"
            clearable
          >
            <el-option label="新学员" :value="1"></el-option>
            <el-option label="老学员" :value="0"></el-option>
            <el-option label="所有学员" :value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动描述" prop="desc">
          <el-input
            type="textarea"
            v-model.trim="vipform.desc"
            style="width: 400px"
            :rows="5"
            placeholder="请输入活动说明"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="activeTime">
          <el-date-picker
            v-model.trim="vipform.activeTime"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="课程时间" prop="courseTime">
          <el-date-picker
            v-model.trim="vipform.courseTime"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-alert
        title="活动适用范围&结算标准："
        type="info"
        :closable="false"
        class="alert"
      >
      </el-alert>
      <div class="activeRange" style="padding-left: 120px">
        <!-- <div class="left">
          <p>活动适用范围&结算标准：</p>
        </div> -->
        <div class="right">
          <div class="chioseWrap">
            <el-checkbox label="线上课" v-model.trim="online"></el-checkbox>
            <el-select
              v-model.trim="onlineSalary"
              disabled
              clearable
              filterable
            >
              <el-option
                label="老师默认课酬"
                value="TEACHER_DEFAULT"
              ></el-option>
              <el-option
                label="实际课程单价比例折扣"
                value="RATIO_DISCOUNT"
              ></el-option>
              <el-option label="固定课酬" value="FIXED_SALARY"></el-option>
            </el-select>
            <el-input
              placeholder="请输入"
              v-if="onlineSalary == 'RATIO_DISCOUNT'"
              style="width: 200px"
              type="number"
              @mousewheel.native.prevent
              v-model.trim="onlineprice"
            >
              <template slot="append">%</template>
            </el-input>
            <el-input
              placeholder="请输入"
              v-if="onlineSalary == 'FIXED_SALARY'"
              style="width: 200px"
              type="number"
              @mousewheel.native.prevent
              v-model.trim="onlineprice"
            >
              <template slot="append">元</template>
            </el-input>
            <div
              style="width: 200px"
              v-if="onlineSalary == 'TEACHER_DEFAULT'"
            ></div>
            <!-- <el-checkbox label="是否参加梯度"
                         style="margin-left:20px;"
                         v-model.trim="onlineClassJoinGradientRewards"></el-checkbox> -->
          </div>
          <div class="chioseWrap">
            <el-checkbox label="线下课" v-model.trim="unonline"></el-checkbox>
            <el-select
              v-model.trim="unonlineSalary"
              clearable
              disabled
              filterable
            >
              <el-option
                label="老师默认课酬"
                value="TEACHER_DEFAULT"
              ></el-option>
              <el-option
                label="实际课程单价比例折扣"
                value="RATIO_DISCOUNT"
              ></el-option>
              <el-option label="固定课酬" value="FIXED_SALARY"></el-option>
            </el-select>
            <el-input
              placeholder="请输入"
              v-if="unonlineSalary == 'RATIO_DISCOUNT'"
              style="width: 200px"
              type="number"
              @mousewheel.native.prevent
              v-model.trim="unonlineprice"
            >
              <template slot="append">%</template>
            </el-input>
            <el-input
              placeholder="请输入"
              style="width: 200px"
              v-if="unonlineSalary == 'FIXED_SALARY'"
              type="number"
              @mousewheel.native.prevent
              v-model.trim="unonlineprice"
            >
              <template slot="append">元</template>
            </el-input>
            <div
              style="width: 200px"
              v-if="unonlineSalary == 'TEACHER_DEFAULT'"
            ></div>
            <!-- <el-checkbox label="是否参加梯度"
                         style="margin-left:20px;"
                         v-model.trim="offlineClassJoinGradientRewards"></el-checkbox> -->
          </div>
          <!-- <div class="chioseWrap">
            <el-checkbox v-model.trim="paymentReadonlyFlag"
                         label="可自定义单价"></el-checkbox>
            <el-checkbox v-model.trim="salaryReadonlyFlag"
                         label="可自定义课酬"></el-checkbox>
          </div> -->
        </div>
      </div>
      <el-alert
        title="活动类型："
        type="info"
        style="margin-bottom: 15px"
        :closable="false"
        class="alert"
      >
      </el-alert>
      <div class="activeType">
        <!-- <div class="left">
          <p>活动类型</p>
        </div> -->
        <div class="right">
          <div>
            <div
              class="head"
              :class="activeType == 'BASE_ACTIVITY' ? 'active' : ''"
              @click="
                () => {
                  this.$refs['form'].resetFields();
                  activeType = 'BASE_ACTIVITY';
                  courseNumForm = {
                    minCourseNum: '',
                    maxCourseNum: '',
                    studentMaxUsedTimes: '',
                  };
                  attribute1 = '';
                  attribute2 = '';
                }
              "
            >
              基础活动
            </div>
            <p class="title" v-if="activeType == 'BASE_ACTIVITY'">课程原价</p>
          </div>
          <div>
            <div
              class="head"
              :class="activeType == 'DISCOUNT' ? 'active' : ''"
              @click="activeType = 'DISCOUNT'"
            >
              折扣
            </div>
            <el-input
              v-if="activeType == 'DISCOUNT'"
              v-model.trim="attribute1"
              style="width: 200px !important"
              placeholder="请输入折扣数值"
            >
              <template slot="append">%</template>
            </el-input>
            <el-form
              :model="courseNumForm"
              :inline="true"
              ref="form"
              v-show="activeType == 'DISCOUNT'"
              :rules="activeType == 'DISCOUNT' ? courseNumrules : {}"
            >
              <el-form-item prop="minCourseNum">
                <el-input
                  @change="handleMinChange"
                  v-model.number="courseNumForm.minCourseNum"
                  type="number"
                  style="margin-left: 10px; width: 120px !important"
                  placeholder="最小课时数"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="maxCourseNum">
                <el-input
                  @change="handleMaxChange"
                  v-model.number="courseNumForm.maxCourseNum"
                  type="number"
                  style="margin-left: 10px; width: 120px !important"
                  placeholder="最大课时数"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model.number="courseNumForm.studentMaxUsedTimes"
                  type="number"
                  style="margin-left: 10px; width: 120px !important"
                  placeholder="学员购买次数"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <div
              class="head"
              :class="activeType == 'GIVE_CLASS' ? 'active' : ''"
              @click="
                () => {
                  this.$refs['form'].resetFields();
                  activeType = 'GIVE_CLASS';
                  courseNumForm.minCourseNum = '';
                  courseNumForm.maxCourseNum = '';
                  attribute1 = '';
                  attribute2 = '';
                }
              "
            >
              赠送课时
            </div>
            <el-input
              placeholder="多少节开始赠"
              v-if="activeType == 'GIVE_CLASS'"
              v-model.trim="attribute1"
              type="number"
              @mousewheel.native.prevent
              style="margin-right: 10px; width: 200px !important"
            >
              <template slot="append">节</template>
            </el-input>
            <span v-if="activeType == 'GIVE_CLASS'">赠</span>
            <el-input
              v-if="activeType == 'GIVE_CLASS'"
              placeholder="请输入赠送课时数"
              type="number"
              @mousewheel.native.prevent
              v-model.trim="attribute2"
              style="margin: 0 10px; width: 200px !important"
            >
              <template slot="append">节</template>
            </el-input>
            <el-input
              v-show="activeType == 'GIVE_CLASS'"
              v-model.number="courseNumForm.studentMaxUsedTimes"
              type="number"
              style="margin-left: 10px; width: 120px !important"
              placeholder="学员购买次数"
            >
            </el-input>
            <!-- <el-checkbox
              v-if="activeType=='GIVE_CLASS'"
              v-model.trim="giveClassPaySalaryFlag"
              label="赠送课时结算课酬"
            ></el-checkbox> -->
          </div>
        </div>
      </div>
    </div>
    <div
      class="btnWrap"
      style="justify-content: flex-start; padding-left: 120px"
    >
      <el-button type="primary" @click="submitFrom">确定</el-button>
      <el-button type="info" @click="onReSet">重置</el-button>
      <!-- <div class="okBtn"
           @click="submitFrom">确定</div> -->
    </div>
  </div>
</template>
<script>
import { vipGroupCategory, addVipActive } from "@/api/vipSeting";
import { getEmployeeOrgan } from "@/api/buildTeam";
import cleanDeep from "clean-deep";
const MIN_NUMBER = 1;
const MAX_NUMBER = 999;
export default {
  name: "vipNewActive",
  data() {
    return {
      pageType: "",
      labelPosition: "right",
      vipform: {
        name: "",
        desc: "",
        activeTime: [],
        courseTime: [],
        organ: [],
      },
      vipformRules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 25,
            message: "长度在 1 到 25 个字符",
            trigger: "blur",
          },
        ],
        desc: [
          { required: false, message: "请输入文字描述", trigger: "blur" },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "blur",
          },
        ],
        activeTime: [
          { required: false, message: "请选择活动时间", trigger: "blur" },
        ],
        courseTime: [
          { required: false, message: "请选择课程时间", trigger: "blur" },
        ],
        organ: [{ required: true, message: "请选择适用分部", trigger: "blur" }],
        stauts: [
          { required: true, message: "请选择活动形式", trigger: "blur" },
        ],
        applyToStudentType: [{ required: true, message: "请选择是否新生专享" }],
        allowOnlineToOffline: [
          { required: true, message: "请选择课程调整方式" },
        ],
      },
      courseStatusList: [], // 获取所有课程形式
      activeType: "",
      online: true,
      unonline: true,
      onlineSalary: "TEACHER_DEFAULT",
      unonlineSalary: "TEACHER_DEFAULT",
      onlineprice: "",
      unonlineprice: "",
      salaryReadonlyFlag: false,
      paymentReadonlyFlag: false,
      attribute1: "",
      attribute2: "",
      courseNumForm: {
        minCourseNum: "",
        maxCourseNum: "",
        studentMaxUsedTimes: "",
      },
      giveClassPaySalaryFlag: true,
      organList: [],
      onlineClassJoinGradientRewards: false,
      offlineClassJoinGradientRewards: false,
      courseNumrules: {
        minCourseNum: [
          { required: true, message: "请输入最小课时数", trigger: "blur" },
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMin, trigger: "blur" },
        ],
        maxCourseNum: [
          { required: true, message: "请输入最大课时数", trigger: "blur" },
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMax, trigger: "blur" },
        ],
      },
    };
  },
  activated() {
    this.onReSet();
    // if (this.$route.query.rules) {
    //   this.rules = this.$route.query.rules;
    // }
    // if (this.$route.query.searchForm) {
    //   this.searchForm = this.$route.query.searchForm;
    // }

    this.pageType = this.$route.query.type;
    this.$refs.vipform.resetFields();
  },

  async mounted() {
    // 首先获取课程形式
    // vipGroupCategory().then(res => {
    //   if (res.code == 200) {
    //     this.courseStatusList = res.data;
    //   }
    // });
    // // 适用分部
    // getEmployeeOrgan().then(res => {
    //   if (res.code == 200) {
    //     this.organList = res.data;
    //   }
    // });
    // 获取类型
    await this.$store.dispatch("setVipGroupCategory");
    // 获取分部
    await this.$store.dispatch("setBranchs");
    this.onReSet();
    // if (this.$route.query.rules) {
    //   this.rules = this.$route.query.rules;
    // }
    // if (this.$route.query.searchForm) {
    //   this.searchForm = this.$route.query.searchForm;
    // }

    this.pageType = this.$route.query.type;
    this.$refs.vipform.resetFields();
  },

  methods: {
    resetForm() {
      this.$refs.form.resetFields();
    },
    handleMinChange() {
      this.$refs.form.validateField("maxCourseNum");
    },
    handleMaxChange() {
      this.$refs.form.validateField("minCourseNum");
    },
    validateCom(rule, value, callback) {
      const one = Number(value);
      if (Number.isInteger(one)) {
        if (one < MIN_NUMBER) {
          return callback(new Error("输入值必须大于0"));
        } else if (one > MAX_NUMBER) {
          return callback(new Error("输入值必须小于999"));
        }
        return callback();
      }
      return callback(new Error("输入值必须为正整数"));
    },
    validateMin(rule, value, callback) {
      const one = Number(value);
      const max = Number(this.courseNumForm.maxCourseNum);
      if (!max || one <= max) {
        return callback();
      }
      return callback(new Error("输入值不得大于最大课时数"));
    },
    validateMax(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.courseNumForm.minCourseNum);
      if (!min || one >= min) {
        return callback();
      }
      return callback(new Error("输入值不得小于最小课时数"));
    },
    changeStauts(val) {
      console.log(val);
    },
    submitFrom() {
      this.$refs.form.validate((isok) => {
        if (isok) {
          this.$refs["vipform"].validate((valid) => {
            if (valid) {
              // 验证通过
              let coursesStartTime = null,
                coursesEndTime = null,
                startTime = null,
                endTime = null;
              if (
                this.vipform.courseTime &&
                this.vipform.courseTime.length > 0
              ) {
                coursesStartTime = this.vipform.courseTime[0];
                coursesEndTime = this.vipform.courseTime[1];
              }
              if (
                this.vipform.activeTime &&
                this.vipform.activeTime.length > 0
              ) {
                startTime = this.vipform.activeTime[0];
                endTime = this.vipform.activeTime[1];
              }
              let organId = this.vipform.organ.join(",");
              let type = this.activeType;
              if (!type) {
                this.$message.error("请选择活动类型");
                return;
              }
              if (!this.online && !this.unonline) {
                this.$message.error("请选择活动适用范围");
                return;
              }
              if (type == "DISCOUNT") {
                if (!this.attribute1 || this.attribute1 < 0) {
                  this.$message.error("折扣必须大于等于0");
                  return;
                }
              } else if (type == "GIVE_CLASS") {
                if (!this.attribute1) {
                  this.$message.error("请输入多少节开始赠");
                  return;
                }
                if (!this.attribute2) {
                  this.$message.error("请输入赠送课时数");
                  return;
                }
              }
              let vipGroupCategoryIdList = this.vipform.stauts.join(",");
              let onlineSalarySettlement;
              let offlineSalarySettlement;
              if (this.online) {
                // 勾选线上
                if (this.onlineSalary == "RATIO_DISCOUNT") {
                  if (this.onlineprice < 0 || this.onlineprice > 100) {
                    this.$message.error("折扣比必须大于0且小于100");
                    return;
                  }
                } else if (this.onlineSalary == "TEACHER_DEFAULT") {
                  this.onlineprice = 0;
                }
                onlineSalarySettlement = {
                  salarySettlementType: this.onlineSalary,
                  settlementValue: this.onlineprice,
                };
              } else {
                onlineSalarySettlement = null;
              }
              if (this.unonline) {
                // 勾选线下
                if (this.unonlineSalary == "RATIO_DISCOUNT") {
                  if (this.unonlineprice < 0 || this.unonlineprice > 100) {
                    this.$message.error("折扣比必须大于0且小于100");
                    return;
                  }
                } else if (this.unonlineSalary == "TEACHER_DEFAULT") {
                  this.unonlineprice = 0;
                }
                offlineSalarySettlement = {
                  salarySettlementType: this.unonlineSalary,
                  settlementValue: this.unonlineprice,
                };
              } else {
                offlineSalarySettlement = null;
              }
              let salaryReadonlyFlag = this.salaryReadonlyFlag * 1;
              let paymentReadonlyFlag = this.paymentReadonlyFlag * 1;
              // let giveClassPaySalaryFlag = this.giveClassPaySalaryFlag * 1;
              let vipGroupSalarySettlement = {
                onlineSalarySettlement,
                offlineSalarySettlement,
              };
              if (type == "BASE_ACTIVITY") {
                this.courseNumForm.studentMaxUsedTimes = -1;
                this.courseNumForm.minCourseNum = -1;
                this.courseNumForm.maxCourseNum = -1;
              } else if (type == "GIVE_CLASS") {
                this.courseNumForm.minCourseNum = -1;
                this.courseNumForm.maxCourseNum = -1;
              }
              // 发请求创建活动
              addVipActive(
                cleanDeep({
                  coursesStartTime,
                  coursesEndTime,
                  startTime,
                  endTime,
                  name: this.vipform.name,
                  description: this.vipform.desc,
                  applyToStudentType: this.vipform.applyToStudentType,
                  allowOnlineToOffline: this.vipform.allowOnlineToOffline,
                  organId,
                  type,
                  vipGroupCategoryIdList,
                  vipGroupSalarySettlement,
                  salaryReadonlyFlag,
                  paymentReadonlyFlag,
                  giveClassPaySalaryFlag: 1,
                  attribute1: this.attribute1,
                  attribute2: this.attribute2,
                  minCourseNum: this.courseNumForm.minCourseNum,
                  maxCourseNum: this.courseNumForm.maxCourseNum,
                  studentMaxUsedTimes: this.courseNumForm.studentMaxUsedTimes
                    ? this.courseNumForm.studentMaxUsedTimes
                    : -1,
                  offlineClassJoinGradientRewards:
                    this.offlineClassJoinGradientRewards * 1,
                  onlineClassJoinGradientRewards:
                    this.onlineClassJoinGradientRewards * 1,
                })
              ).then((res) => {
                if (res.code == 200) {
                  this.$message.success("恭喜你,活动创建成功");
                  this.onReSet();
                  this.$store.dispatch("delVisitedViews", this.$route);
                  this.$router.push({
                    path: "/vipActiveManager/vipActiveList",
                  });
                }
              });
            } else {
              this.$nextTick(() => {
                let isError = document.getElementsByClassName("is-error");
                isError[0].scrollIntoView({
                  block: "center",
                  behavior: "smooth",
                });
              });
              // this.$message.error("请填写必要参数");
            }
          });
        }
      });

      // 线上线下课 勾选就传不勾选就不传
      // addVipActive().then(res => { })
    },
    onOrganChange() {
      this.$forceUpdate();
    },
    onCheckAllBranch() {
      // 选择所有分部
      let vipform = this.vipform;
      vipform.organ = [];
      this.selects.branchs.forEach((item) => {
        vipform.organ.push(item.id);
      });
      this.$forceUpdate();
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/vipActiveManager/vipActiveList",
        query: { rules: this.rules, searchForm: this.searchForm },
      });
    },
    onReSet() {
      this.vipform = {
        name: "",
        desc: "",
        activeTime: [],
        courseTime: [],
      };
      this.activeType = "";
      this.online = true;
      this.unonline = true;
      this.salaryReadonlyFlag = false;
      this.onlineSalary = "TEACHER_DEFAULT";
      this.unonlineSalary = "TEACHER_DEFAULT";
      this.onlineprice = "";
      this.unonlineprice = "";
      this.onlineClassJoinGradientRewards = false;
      this.offlineClassJoinGradientRewards = false;
      this.attribute1 = "";
      this.attribute2 = "";
      this.courseNumForm.maxCourseNum = "";
      this.courseNumForm.minCourseNum = "";
      this.$refs.vipform.resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.m-core {
  font-size: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // text-align: center;
  .activeRange {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .left {
      height: 72px;
      line-height: 72px;
    }
    .right {
      .chioseWrap {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 72px;
        line-height: 72px;
        align-items: center;
        .el-checkbox {
          margin-right: 20px;
        }
        .el-select {
          margin-right: 20px;
        }
      }
    }
  }
  .activeType {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .left {
      margin-right: 20px;
      p {
        height: 40px;
        line-height: 40px;
      }
    }
    .right {
      > div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 40px;
        line-height: 40px;
        margin-bottom: 20px;
        .head {
          width: 120px;
          height: 40px;
          line-height: 40px;
          border: 1px solid #ccc;

          text-align: center;
          border-radius: 5px;
          cursor: pointer;
          margin-right: 10px;
        }
        > .head.active {
          background-color: #13817a;
          color: #fff;
          border: none;
        }
        .title {
          line-height: 40px;
          height: 40px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.m-core {
  .vipform {
    .el-select {
      width: 400px !important;
      .el-input__inner {
        width: 400px;
      }
    }
  }
  .activeType {
    .right {
      .el-input {
        width: 150px !important;
      }
    }
  }
}
</style>