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

<template >
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      VIP活动管理
    </h2>

    <div class="m-core">
      <el-button
        type="primary"
        style="margin-bottom: 20px"
        v-permission="'/vipNewActive'"
        @click="gotoNewActive"
        >新建</el-button
      >
      <el-button
        type="primary"
        style="margin-bottom: 20px"
        v-permission="'export/vipGroupActivity'"
        @click="onExport"
        >VIP活动导出</el-button
      >
      <save-form
        :inline="true"
        class="searchForm"
        ref="searchForm"
        @submit="search"
        @reset="onReset"
        :model="searchForm"
      >
        <el-form-item prop="search">
          <el-input
            v-model.trim="searchForm.search"
            clearable
            placeholder="活动编号、名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            style="width: 180px !important"
            v-model.trim="searchForm.organId"
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="enable">
          <el-select
            filterable
            style="width: 180px !important"
            v-model="searchForm.enable"
            clearable
            @clear="resetEnable"
            placeholder="活动状态"
          >
            <el-option label="开启" :value="true"></el-option>
            <el-option label="关闭" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="allowOnlineToOffline">
          <el-select
            v-model.trim="searchForm.allowOnlineToOffline"
            placeholder="请选择课程调整方式"
            clearable
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in vipResetTypeList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="applyToStudentType">
          <el-select
            filterable
            style="width: 180px !important"
            v-model="searchForm.applyToStudentType"
            clearable
            placeholder="适用学员"
          >
            <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>
          <el-button native-type="submit" type="danger">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="reset">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column align="center" prop="id" label="活动编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.id }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="type"
            :formatter="fommatterType"
            label="活动类型"
          ></el-table-column>
          <el-table-column align="center" prop="name" label="活动名称">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.name }}</copy-text>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="vipGroupCategoryNames"
            label="适用课程形式"
          ></el-table-column>

          <el-table-column
            align="center"
            label="适用课时类型"
            :formatter="fommatterCourseType"
          ></el-table-column>
          <el-table-column
          width="135"
            align="center"
            label="课程调整方式"
            :formatter="fommatterResetType"
          ></el-table-column>
          <el-table-column
            align="center"
            label="使用学员"
            :formatter="formatStudentType"
          ></el-table-column>

          <el-table-column label="结算标准">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.salarySettlementJson | onlineDesc }}</p>
                <p>{{ scope.row.salarySettlementJson | unonlineDesc }}</p>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="结算说明">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.salarySettlementJson | onlineDesc }}</p>
                <p>{{ scope.row.salarySettlementJson | unonlineDesc }}</p>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            label="启用状态"
            prop="enable"
            :formatter="fommatterEnable"
          ></el-table-column>
          <el-table-column align="center" width="150px" label="活动持续时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.startTime }}</p>
                <p>{{ scope.row.endTime }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="150px" label="课程安排时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.coursesStartTime }}</p>
                <p>{{ scope.row.coursesEndTime }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <!--   v-if="scope.row.enable > 0" -->
                <el-button
                  type="text"
                  v-permission="'vipGroupActivity/update'"
                  @click="reset(scope.row)"
                  >修改</el-button
                >
                <!-- <el-button type='text'
                @click="remove(scope.row)">删除</el-button>-->
                <el-popover
                  placement="top"
                  width="160"
                  v-permission="'vipGroupActivity/delete'"
                  :ref="scope.$index"
                >
                  <p>确定删除?</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      size="mini"
                      type="text"
                      @click="scope._self.$refs[scope.$index].doClose()"
                      >取消</el-button
                    >
                    <el-button type="primary" size="mini" @click="remove(scope)"
                      >确定</el-button
                    >
                  </div>
                  <el-button type="text" slot="reference">删除</el-button>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <pagination
          :total.sync="rules.total"
          sync
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="修改VIP/乐理课活动"
      width="800px"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
    >
      <div>
        <el-form
          :label-position="labelPosition"
          :model="resetForm"
          ref="vipform"
          :rules="resetFormRules"
          class="vipform"
        >
          <el-form-item label="活动名称" label-width="120px" prop="name">
            <el-input v-model.trim="resetForm.name"></el-input>
          </el-form-item>
          <el-form-item label="适用分部" label-width="120px" prop="organ">
            <select-all
              v-model.trim="resetForm.organ"
              filterable
              disabled
              multiple
              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="课程形式" label-width="120px" prop="stauts">
            <select-all
              v-model.trim="resetForm.stauts"
              filterable
              clearable
              multiple
              disabled
            >
              <el-option
                v-for="(item, index) in selects.vipGroupCategory"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </select-all>
          </el-form-item>
          <el-form-item
            label="课程调整方式"
            label-width="120px"
            prop="allowOnlineToOffline"
          >
            <el-select
              style="width: 100% !important"
              v-model.trim="resetForm.allowOnlineToOffline"
              placeholder="请选择课程调整方式"
              clearable
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in vipResetTypeList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="使用学员"
            label-width="120px"
            prop="applyToStudentType"
          >
            <el-select
              v-model.trim="resetForm.applyToStudentType"
              style="width: 100% !important"
              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="活动描述" label-width="120px" prop="desc">
            <el-input
              type="textarea"
              v-model.trim="resetForm.desc"
              :rows="5"
              placeholder="请输入活动说明"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动时间" label-width="120px" prop="activeTime">
            <el-date-picker
              v-model.trim="resetForm.activeTime"
              style="width: 100%"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="{
                firstDayOfWeek: 1,
              }"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="课程时间" label-width="120px" prop="courseTime">
            <el-date-picker
              v-model.trim="resetForm.courseTime"
              style="width: 100%"
              type="datetimerange"
              :picker-options="{
                firstDayOfWeek: 1,
              }"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <el-alert
          title="活动适用范围&结算标准"
          type="info"
          :closable="false"
          class="alert"
        >
        </el-alert>
        <div class="activeRange">
          <!-- <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" 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>
              <!--   v-show='onlineSalary!= "TEACHER_DEFAULT"' -->
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-if="onlineSalary == 'FIXED_SALARY'"
                v-model.trim="onlineprice"
              >
                <template slot="append">元</template>
              </el-input>
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-else-if="onlineSalary == 'RATIO_DISCOUNT'"
                v-model.trim="onlineprice"
              >
                <template slot="append">%</template>
              </el-input>
              <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" filterable clearable>
                <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>
              <!-- unonlineSalary -->
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-if="unonlineSalary == 'FIXED_SALARY'"
                v-model.trim="unonlineprice"
              >
                <template slot="append">元</template>
              </el-input>
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-else-if="unonlineSalary == 'RATIO_DISCOUNT'"
                v-model.trim="unonlineprice"
              >
                <template slot="append">%</template>
              </el-input>
              <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"
                           disabled
                           label="可自定义课酬"></el-checkbox> -->
            </div>
          </div>
        </div>
        <el-alert
          title="活动类型"
          type="info"
          :closable="false"
          style="margin-bottom: 15px"
          class="alert"
        >
        </el-alert>
        <div class="activeType">
          <!-- <div class="left">
            <p style="width: 60px">活动类型</p>
          </div> -->
          <div class="right">
            <div>
              <div
                class="head"
                @click="
                  () => {
                    this.$refs['form'].resetFields();
                    activeType = 'BASE_ACTIVITY';
                    courseNumForm = {
                      minCourseNum: '',
                      maxCourseNum: '',
                      studentMaxUsedTimes: '',
                    };
                    attribute1 = '';
                    attribute2 = '';
                  }
                "
                :class="activeType == 'BASE_ACTIVITY' ? 'active' : ''"
              >
                基础活动
              </div>
              <p class="title" v-if="activeType == 'BASE_ACTIVITY'">课程原价</p>
            </div>
            <div>
              <div
                class="head"
                @click="activeType = 'DISCOUNT'"
                :class="activeType == 'DISCOUNT' ? 'active' : ''"
              >
                折扣
              </div>
              <el-input
                v-if="activeType == 'DISCOUNT'"
                v-model.trim="attribute1"
                type="number"
                placeholder="请输入折扣数值"
              >
                <template slot="append">%</template>
              </el-input>
              <el-form
                :model="courseNumForm"
                :inline="true"
                ref="form"
                :rules="activeType == 'DISCOUNT' ? courseNumrules : {}"
                v-show="activeType == 'DISCOUNT'"
              >
                <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"
                @click="
                  () => {
                    this.$refs['form'].resetFields();
                    activeType = 'GIVE_CLASS';
                    courseNumForm.minCourseNum = '';
                    courseNumForm.maxCourseNum = '';
                    attribute1 = '';
                    attribute2 = '';
                  }
                "
                :class="activeType == 'GIVE_CLASS' ? 'active' : ''"
              >
                赠送课时
              </div>
              <el-input
                placeholder="多少节开始赠"
                v-if="activeType == 'GIVE_CLASS'"
                v-model.trim="attribute1"
                type="number"
                style="margin-right: 10px"
              ></el-input>
              <span v-if="activeType == 'GIVE_CLASS'">赠</span>
              <el-input
                v-if="activeType == 'GIVE_CLASS'"
                placeholder="请输入赠送课时数"
                v-model.trim="attribute2"
                type="number"
                style="margin: 0 10px"
              ></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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const MIN_NUMBER = 1;
const MAX_NUMBER = 999;
import pagination from "@/components/Pagination/index";
import {
  vipGroupActivity,
  vipGroupCategory,
  addVipActive,
  resetVipActive,
  removeVipActive,
} from "@/api/vipSeting";
import qs from "qs";
import { Export } from "@/utils/downLoadFile";
import cleanDeep from "clean-deep";
import { vipResetTypeList } from "@/utils/searchArray";
export default {
  name: "vipActiveList",
  components: { pagination },
  data() {
    return {
      vipResetTypeList,
      labelPosition: "right",
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      searchForm: {
        organId: null,
        enable: null,
        search: "",
        applyToStudentType: null,
        allowOnlineToOffline: null,
      },
      dialogVisible: false,
      resetForm: {
        name: "",
        desc: "",
        activeTime: [],
        courseTime: [],
        stauts: [],
        applyToStudentType: null,
        allowOnlineToOffline: null,
        organ: [],
      }, // 修改信息
      resetFormRules: {
        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: "请选择是否新生专享", trigger: "change" },
        ],
        allowOnlineToOffline: [
          { required: true, message: "请选择课程调整方式" },
        ],
      },
      courseStatusList: [],
      activeType: "",
      online: true,
      unonline: true,
      onlineClassJoinGradientRewards: false,
      offlineClassJoinGradientRewards: false,
      onlineSalary: "TEACHER_DEFAULT",
      unonlineSalary: "TEACHER_DEFAULT",
      onlineprice: "",
      unonlineprice: "",
      salaryReadonlyFlag: false,
      paymentReadonlyFlag: true,
      attribute1: "",
      attribute2: "",
      giveClassPaySalaryFlag: false,
      activeId: "",
      isReset: false,
      courseNumForm: {
        minCourseNum: "",
        maxCourseNum: "",
        studentMaxUsedTimes: "",
      },
      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" },
        ],
      },
    };
  },
  // created() {
  //   this.init();
  // },
  // activated() {
  //   this.init();
  // },
  mounted() {
    this.init();
  },
  filters: {
    onlinePip(val) {
      let obj = JSON.parse(val);
      // debugger;
      if (
        obj &&
        obj.onlineSalarySettlement &&
        obj.onlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.onlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            return "线上:比例结算";
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线上:老师默认";
            break;
          }
          case "FIXED_SALARY": {
            return "线上:固定课酬";
            break;
          }
        }
      }
    },
    unonlinePip(val) {
      let obj = JSON.parse(val);
      if (
        obj &&
        obj.offlineSalarySettlement &&
        obj.offlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.offlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            return "线下:比例结算";
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线下:老师默认";
            break;
          }
          case "FIXED_SALARY": {
            return "线下:固定课酬";
            break;
          }
        }
      }
    },
    onlineDesc(val) {
      let obj = JSON.parse(val);
      // debugger;
      if (
        obj &&
        obj.onlineSalarySettlement &&
        obj.onlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.onlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            if (obj.onlineSalarySettlement.settlementValue) {
              return `线上:比例结算${obj.onlineSalarySettlement.settlementValue}%`;
            } else {
              return "线上:比例结算";
            }
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线上:默认课酬";
            break;
          }
          case "FIXED_SALARY": {
            if (obj.onlineSalarySettlement.settlementValue) {
              return `线上:固定课酬${obj.onlineSalarySettlement.settlementValue}/次`;
            } else {
              return "线上:固定课酬";
            }

            break;
          }
        }
      }
    },
    unonlineDesc(val) {
      let obj = JSON.parse(val);
      if (
        obj &&
        obj.offlineSalarySettlement &&
        obj.offlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.offlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            if (obj.offlineSalarySettlement.settlementValue) {
              return `线下:比例结算${obj.offlineSalarySettlement.settlementValue}%`;
            } else {
              return "线下:比例结算";
            }
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线下:默认课酬";
            break;
          }
          case "FIXED_SALARY": {
            if (obj.offlineSalarySettlement.settlementValue) {
              return `线下:固定课酬${obj.offlineSalarySettlement.settlementValue}/次`;
            } else {
              return "线下:固定课酬";
            }
            break;
          }
        }
      }
    },
  },
  methods: {
    async init() {
      // 获取类型
      await this.$store.dispatch("setVipGroupCategory");
      // 获取分部
      await this.$store.dispatch("setBranchs");

      this.getList();
    },
    // 导出
    async onExport() {
      const { ...rest } = this.searchForm;
      let obj = {
        ...rest,
        page: this.rules.page,
        rows: this.rules.limit,
      };
      await Export(
        this,
        {
          url: "/api-web/export/vipGroupActivity",
          fileName: "活动列表.xls",
          method: "post",
          params: qs.stringify(cleanDeep(obj)),
        },
        "您确定活动列表?"
      );
    },
    loadNumber(event) {
      var el = event.currentTarget;
      var elValue = el.value;
      var reg = /^((?!0)\d{1,2}|100)$/;
      if (!elValue.match(reg)) {
        elValue = "";
        return false;
      } else {
        return true;
      }
    },

    onCheckAllBranch() {
      // 适用所有分部
      this.resetForm.organ = [];
      this.organList.forEach((item) => {
        this.resetForm.organ.push(item.id);
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReset() {
      // this.searchForm = {
      //   enable: null,
      //   search: null,
      //   organId: null,
      // }
      this.$refs["searchForm"].resetFields();
      this.search();
    },
    getList() {
      let enable = this.searchForm.enable;
      let search = this.searchForm.search;
      vipGroupActivity({
        organId: this.searchForm.organId,
        applyToStudentType: this.searchForm.applyToStudentType,
        allowOnlineToOffline: this.searchForm.allowOnlineToOffline,
        rows: this.rules.limit,
        page: this.rules.page,
        enable,
        search,
      }).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    resetEnable(val) {
      val = null;
    },
    // 格式化活动类型
    fommatterType(row, column) {
      switch (row.type) {
        case "BASE_ACTIVITY": {
          return "基础";
          break;
        }
        case "DISCOUNT": {
          return "折扣";
          break;
        }
        case "GIVE_CLASS": {
          if (row.giveClassPaySalaryFlag) {
            return "买赠(赠课结算)";
          } else {
            return "买赠(不结算)";
          }

          break;
        }
      }
    },
    // 格式化课时类型
    fommatterCourseType(row) {
      let date = JSON.parse(row.salarySettlementJson);
      let str = "";
      if (date && date.onlineSalarySettlement) {
        str += "线上 ";
      }
      if (date && date.offlineSalarySettlement) {
        str += "线下";
      }
      return str;
    },
    fommatterResetType(row) {
      let str = null;
      if (row.allowOnlineToOffline == 1) {
        str = "无限制";
      }
      if (row.allowOnlineToOffline == 0) {
        str = "线上不可转线下";
      }
      if (row.allowOnlineToOffline == 2) {
        str = "线下不可调为线上";
      }
        if (row.allowOnlineToOffline == 3) {
        str = "线上线下不可互调";
      }
      return str;
    },
    formatStudentType(row) {
      let str = null;
      if (row.applyToStudentType == -1) {
        str = "所有学员";
      }
      if (row.applyToStudentType == 0) {
        str = "老学员";
      }
      if (row.applyToStudentType == 1) {
        str = "新学员";
      }
      return str;
    },
    // 格式化启用状态
    fommatterEnable(row) {
      switch (row.enable) {
        case 0: {
          return "关闭";
          break;
        }
        case 1: {
          return "开启";
          break;
        }
      }
    },
    // 点击列表修改同步状态
    reset(row) {
      this.isReset = true;
      this.activeId = row.id;
      this.dialogVisible = true;
      this.resetForm = {
        name: "",
        desc: "",
        activeTime: [],
        courseTime: [],
        stauts: [],
        applyToStudentType: null,
        allowOnlineToOffline: null,
        organ: [],
      }
      this.resetForm.name = row.name;
      this.resetForm.applyToStudentType = row.applyToStudentType;
      this.resetForm.allowOnlineToOffline = row.allowOnlineToOffline + "";
      this.resetForm.desc = row.description;

      if (row.organId) {
        this.resetForm.organ = row.organId.split(",").map((res) => {
          return parseInt(res);
        });
      }
      if (row.vipGroupCategoryIdList) {
        this.resetForm.stauts = row.vipGroupCategoryIdList
          .split(",")
          .map((res) => {
            return parseInt(res);
          });
      }

      // 同步活动时间
      if (row.startTime && row.endTime) {
        this.resetForm.activeTime = [row.startTime, row.endTime];
      }
      if (row.coursesStartTime && row.coursesEndTime) {
        this.resetForm.courseTime = [row.coursesStartTime, row.coursesEndTime];
      }
      // 同步适用范围
      let obj = JSON.parse(row.salarySettlementJson);
      // 同步线上课状态
      obj.onlineSalarySettlement ? (this.online = true) : (this.online = false);
      if (obj.onlineSalarySettlement) {
        this.onlineSalary = obj.salarySettlementType;
        if (obj.onlineSalarySettlement.settlementValue) {
          this.onlineprice = obj.onlineSalarySettlement.settlementValue;
        }
        if (obj.onlineSalarySettlement.salarySettlementType)
          this.onlineSalary = obj.onlineSalarySettlement.salarySettlementType;
      } else {
        this.onlineSalary = "TEACHER_DEFAULT";
        this.onlineprice = "";
      }
      // 同步线下课状态
      obj.offlineSalarySettlement
        ? (this.unonline = true)
        : (this.unonline = false);
      if (obj.offlineSalarySettlement) {
        this.unonlineSalary = obj.offlineSalarySettlement;
        if (obj.offlineSalarySettlement.settlementValue) {
          this.unonlineprice = obj.offlineSalarySettlement.settlementValue;
        }
        if (obj.offlineSalarySettlement.salarySettlementType)
          this.unonlineSalary =
            obj.offlineSalarySettlement.salarySettlementType;
      } else {
        this.unonlineSalary = "TEACHER_DEFAULT";
        this.unonlineprice = "";
      }
      //
      this.salaryReadonlyFlag = !!parseInt(row.salaryReadonlyFlag);
      this.paymentReadonlyFlag = !!parseInt(row.paymentReadonlyFlag);
      this.offlineClassJoinGradientRewards = !!parseInt(
        row.offlineClassJoinGradientRewards
      );
      this.onlineClassJoinGradientRewards = !!parseInt(
        row.onlineClassJoinGradientRewards
      );

      this.activeType = row.type;
      this.attribute1 = row.attribute1;
      this.attribute2 = row.attribute2;

      let studentMaxUsedTimes =
        row.studentMaxUsedTimes == -1 ? null : row.studentMaxUsedTimes;
      let minCourseNum = row.minCourseNum == -1 ? null : row.minCourseNum;
      let maxCourseNum = row.maxCourseNum == -1 ? null : row.maxCourseNum;
      this.$set(this.courseNumForm, "studentMaxUsedTimes", studentMaxUsedTimes);
      this.$set(this.courseNumForm, "minCourseNum", minCourseNum);
      this.$set(this.courseNumForm, "maxCourseNum", maxCourseNum);
      this.giveClassPaySalaryFlag =
        row.giveClassPaySalaryFlag == 1 ? true : false;
    },
    // 点击确认按钮发送修改请求
    resetRow() {
      this.$refs.form.validate((isok) => {
        if (isok) {
          this.$refs["vipform"].validate((valid) => {
            if (valid) {
              // 验证通过
              let coursesStartTime;
              let coursesEndTime;
              let startTime;
              let endTime;
              if (!this.resetForm.courseTime) {
                this.resetForm.courseTime = [];
                // coursesStartTime = null;
                // coursesEndTime = null;
              }
              if (!this.resetForm.activeTime) {
                this.resetForm.activeTime = [];
                // startTime = null;
                // endTime = null;
              }
              let id = this.activeId;
              coursesStartTime = this.resetForm.courseTime[0] || null;
              coursesEndTime = this.resetForm.courseTime[1] || null;
              startTime = this.resetForm.activeTime[0] || null;
              endTime = this.resetForm.activeTime[1] || null;
              let organId = this.resetForm.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.resetForm.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;
              }
              // 发请求创建活动
              resetVipActive({
                paymentReadonlyFlag,
                id,
                coursesStartTime,
                coursesEndTime,
                startTime,
                endTime,
                name: this.resetForm.name,
                description: this.resetForm.desc,
                applyToStudentType: this.resetForm.applyToStudentType,
                allowOnlineToOffline: this.resetForm.allowOnlineToOffline,
                organId,
                type,
                vipGroupCategoryIdList,
                vipGroupSalarySettlement,
                salaryReadonlyFlag,
                giveClassPaySalaryFlag: 1,
                attribute1: this.attribute1,
                attribute2: this.attribute2,
                minCourseNum: this.courseNumForm.minCourseNum,
                maxCourseNum: this.courseNumForm.maxCourseNum,
                studentMaxUsedTimes: this.courseNumForm.studentMaxUsedTimes
                  ? this.courseNumForm.studentMaxUsedTimes
                  : -1,
                onlineClassJoinGradientRewards:
                  this.onlineClassJoinGradientRewards * 1,
                offlineClassJoinGradientRewards:
                  this.offlineClassJoinGradientRewards * 1,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message.success("恭喜你,活动修改成功");
                  this.dialogVisible = false;
                  this.getList();
                }
              });
            } else {
              this.$message.error("请填写必要参数");
            }
          });
        }
      });
    },
    remove(scope) {
      let id = scope.row.id;
      removeVipActive({ id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("恭喜您删除成功");
          this.getList();
        }
        scope._self.$refs[scope.$index].doClose();
      });
    },
    gotoNewActive() {
      // 带参数 searchForm: { organId: null } 搜索条件
      // let rules = JSON.stringify(this.rules);
      // let searchForm = JSON.stringify(this.searchForm);
      this.$router.push({
        path: "/operateManager/vipNewActive?type=create",
        // query: { rules, searchForm },
      });
    },
    closeVipform() {
      this.$refs["vipform"].resetFields();
      this.dialogVisible = false;
    },
    resetForms() {
      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("输入值不得小于最小课时数"));
    },
  },
};
</script>
<style lang="scss" scoped>
.activeType {
  .right {
    .el-input {
      width: 150px !important;
    }
  }
}
.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;
      }
    }
  }
}
.vipform {
  .el-select {
    width: 400px !important;
    .el-input__inner {
      width: 400px;
    }
  }
}
.ishidden {
  visibility: hidden;
}
</style>