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

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

    <div class="m-core">
      <div class="newBand"
           v-permission="'/vipNewActive'"
           @click='gotoNewActive'>新建</div>
      <el-form :inline="true"
               class="searchForm"
               v-model="searchForm">
        <el-form-item prop='organId'>
          <el-select class='multiple'
                     style="width:180px!important"
                     v-model="searchForm.organId"
                     clearable
                     placeholder="请选择分部">
            <el-option v-for="(item,index) in organList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search"
                     type="danger">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           prop="id"
                           label="活动编号">
          </el-table-column>
          <el-table-column align='center'
                           prop="name"
                           label="活动名称">
          </el-table-column>
          <el-table-column align='center'
                           prop="vipGroupCategoryNames"
                           label="适用课程形式">
          </el-table-column>
          <el-table-column align='center'
                           prop="type"
                           :formatter="fommatterType"
                           label="活动类型">
          </el-table-column>
          <el-table-column align='center'
                           label="适用课时类型"
                           :formatter="fommatterCourseType">
          </el-table-column>
          <el-table-column align='center'
                           label="结算标准">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.salarySettlementJson | onlinePip }}</p>
                <p>{{ scope.row.salarySettlementJson | unonlinePip }}</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="130px"
                           label="活动持续时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.startTime | formatTimer }}</p>
                <p>{{ scope.row.endTime | formatTimer }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           width="130px"
                           label="课程安排时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.coursesStartTime | formatTimer }}</p>
                <p>{{ scope.row.coursesEndTime | formatTimer }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope">
              <div>
                <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="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title='提示'
               width="60%"
               :visible.sync="dialogVisible">
      <div>
        <el-form :label-position="labelPosition"
                 :model="resetForm"
                 ref='vipform'
                 :rules='resetFormRules'
                 class="vipform">
          <el-form-item label="活动名称"
                        prop="name">
            <el-input style="width:400px"
                      v-model="resetForm.name"></el-input>
          </el-form-item>
          <el-form-item label="适用分部"
                        prop="organ">
            <el-select v-model="resetForm.organ"
                       multiple
                       clearable>
              <el-option v-for='(item,index) in organList'
                         :key="index"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
            <el-button @click="onCheckAllBranch">适用所有分部</el-button>
          </el-form-item>
          <el-form-item label="活动描述"
                        prop="desc">
            <el-input type="textarea"
                      v-model="resetForm.desc"
                      style="width:400px"
                      :rows="5"
                      placeholder="请输入活动说明"></el-input>
          </el-form-item>
          <el-form-item label="活动时间"
                        prop="activeTime">
            <el-date-picker v-model="resetForm.activeTime"
                            type="datetimerange"
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="课程时间"
                        prop="courseTime">
            <el-date-picker v-model="resetForm.courseTime"
                            type="datetimerange"
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="课程形式"
                        prop="stauts">
            <el-select v-model="resetForm.stauts"
                       multiple>
              <el-option v-for="(item,index) in courseStatusList"
                         :key='index'
                         :value="item.id"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="activeRange">
          <div class="left">
            <p>活动适用范围&结算标准：</p>
          </div>
          <div class="right">
            <div class="chioseWrap">
              <el-checkbox label="线上课"
                           v-model="online"></el-checkbox>
              <el-select v-model="onlineSalary">
                <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="请输入"
                        style="width:100px"
                        type="number"
                        v-if='onlineSalary!= "TEACHER_DEFAULT"'
                        v-model="onlineprice"></el-input>
            </div>
            <div class="chioseWrap">
              <el-checkbox label="线下课"
                           v-model="unonline"></el-checkbox>
              <el-select v-model="unonlineSalary">
                <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="请输入"
                        style="width:100px"
                        v-if='unonlineSalary!= "TEACHER_DEFAULT"'
                        type="number"
                        v-model="unonlineprice"></el-input>
            </div>
            <div class="chioseWrap">
              <el-checkbox v-model="salaryReadonlyFlag"
                           label="可自定义收费、结算标准"></el-checkbox>
            </div>
          </div>
        </div>
        <div class="activeType">
          <div class="left">
            <p style='width:60px;'>活动类型</p>
          </div>
          <div class="right">
            <div>
              <div class="head"
                   :class="activeType=='BASE_ACTIVITY'?'active':''"
                   @click="activeType='BASE_ACTIVITY'">基础活动</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="attribute1"
                        placeholder="请输入折扣数值"></el-input>
            </div>
            <div>
              <div class="head"
                   :class="activeType=='GIVE_CLASS'?'active':''"
                   @click="activeType='GIVE_CLASS'">赠送课时</div>
              <el-input placeholder="多少节开始赠"
                        v-if="activeType=='GIVE_CLASS'"
                        v-model="attribute1"
                        style='margin-right:10px;'></el-input> <span v-if="activeType=='GIVE_CLASS'">赠</span>
              <el-input v-if="activeType=='GIVE_CLASS'"
                        placeholder="请输入赠送课时数"
                        v-model="attribute2"
                        style='margin:0 10px;'></el-input>
              <el-checkbox v-if="activeType=='GIVE_CLASS'"
                           v-model="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>
import pagination from '@/components/Pagination/index'
import { vipGroupActivity, vipGroupCategory, addVipActive, resetVipActive, removeVipActive } from "@/api/vipSeting"
import { getEmployeeOrgan } from '@/api/buildTeam'
export default {
  components: { pagination },
  data () {
    return {
      labelPosition: 'right',
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      searchForm: { organId: null },
      organList: [],
      dialogVisible: false,
      resetForm: {
        name: '',
        desc: '',
        activeTime: [],
        courseTime: [],
        stauts: [],
        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' }]
      },
      courseStatusList: [],
      activeType: '',
      online: true,
      unonline: true,
      onlineSalary: 'TEACHER_DEFAULT',
      unonlineSalary: 'TEACHER_DEFAULT',
      onlineprice: '',
      unonlineprice: '',
      salaryReadonlyFlag: true,
      attribute1: '',
      attribute2: '',
      attribute3: '',
      giveClassPaySalaryFlag: false,
      activeId: ''
    }
  },
  created () {
    if (this.$route.query.searchForm) {
      this.$route.query.searchForm instanceof Object ? this.searchForm = this.$route.query.searchForm : this.searchForm = JSON.parse(this.$route.query.searchForm);
    }
    if (this.$route.query.rules) {
      this.$route.query.rules instanceof Object ? this.rules = this.$route.query.rules : this.rules = JSON.parse(this.$route.query.rules);
    }
  },
  mounted () {
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    })
    this.getList();
    // 首先获取课程形式
    // 获取分部id
    vipGroupCategory().then(res => {
      if (res.code == 200) {
        this.courseStatusList = res.data;
      }
    })
  },
  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': {
            return `线上:${obj.onlineSalarySettlement.settlementValue}%`
            break
          }
          case 'TEACHER_DEFAULT': {
            return '线上:默认'
            break
          }
          case 'FIXED_SALARY': {
            return `线上:${obj.onlineSalarySettlement.settlementValue}/次`
            break
          }
        }
      }
    },
    unonlineDesc (val) {
      let obj = JSON.parse(val)
      if (obj && obj.offlineSalarySettlement && obj.offlineSalarySettlement.salarySettlementType) {
        switch (obj.offlineSalarySettlement.salarySettlementType) {
          case 'RATIO_DISCOUNT': {
            return '线下:' + obj.offlineSalarySettlement.settlementValue + '%'
            break
          }
          case 'TEACHER_DEFAULT': {
            return '线下:默认'
            break
          }
          case 'FIXED_SALARY': {
            return '线下:' + obj.offlineSalarySettlement.settlementValue + '/次'
            break
          }
        }
      }
    }
  },
  methods: {
    onCheckAllBranch () {
      // 适用所有分部
      this.resetForm.organ = []
      this.organList.forEach(item => {
        this.resetForm.organ.push(item.id)
      })
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    getList () {
      vipGroupActivity({
        organId: this.searchForm.organId,
        rows: this.rules.limit,
        page: this.rules.page      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows
          this.rules.total = res.data.total
        }
      })
    },
    // 格式化活动类型
    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
    },
    // 格式化启用状态
    fommatterEnable (row) {
      switch (row.enable) {
        case 0: {
          return '关闭'
          break
        }
        case 1: {
          return '开启'
          break
        }
      }
    },
    // 点击列表修改同步状态
    reset (row) {
      this.activeId = row.id;
      this.dialogVisible = true;
      this.resetForm.name = row.name;
      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;
      }
      // 同步线下课状态
      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;
      }
      // 
      this.salaryReadonlyFlag = !!parseInt(row.salaryReadonlyFlag);
      this.activeType = row.type;
      this.attribute1 = row.attribute1;
      this.attribute2 = row.attribute2;
      this.giveClassPaySalaryFlag = row.giveClassPaySalaryFlag == 1 ? true : false;
    },
    // 点击确认按钮发送修改请求
    resetRow () {
      this.$refs['vipform'].validate((valid) => {
        if (valid) {
          // 验证通过
          let id = this.activeId;
          let coursesStartTime = this.resetForm.courseTime[0];
          let coursesEndTime = this.resetForm.courseTime[1];
          let startTime = this.resetForm.activeTime[0];
          let endTime = this.resetForm.activeTime[1];
          let organId = this.resetForm.organ.join(',');
          let type = this.activeType;
          let vipGroupCategoryIdList = this.resetForm.stauts.join(',')
          let onlineSalarySettlement;
          let offlineSalarySettlement;
          if (this.online) {
            // 勾选线上
            onlineSalarySettlement = {
              salarySettlementType: this.onlineSalary,
              settlementValue: this.onlineprice
            }
          } else {
            onlineSalarySettlement = null;
          }
          if (this.unonline) {
            // 勾选线下
            offlineSalarySettlement = {
              salarySettlementType: this.unonlineSalary,
              settlementValue: this.unonlineprice
            }
          } else {
            offlineSalarySettlement = null
          }
          let salaryReadonlyFlag = this.salaryReadonlyFlag * 1;
          let giveClassPaySalaryFlag = this.giveClassPaySalaryFlag * 1;
          let vipGroupSalarySettlement = {
            onlineSalarySettlement,
            offlineSalarySettlement
          }
          // 发请求创建活动
          resetVipActive({
            id,
            coursesStartTime,
            coursesEndTime,
            startTime,
            endTime,
            name: this.resetForm.name,
            description: this.resetForm.desc,
            organId,
            type,
            vipGroupCategoryIdList,
            vipGroupSalarySettlement,
            salaryReadonlyFlag,
            giveClassPaySalaryFlag,
            attribute1: this.attribute1,
            attribute2: this.attribute2,
            attribute3: this.attribute3

          }).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: '/vipClassSet/vipNewActive?type=create', query: { rules, searchForm } })
    }
  },
}
</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;
    }
  }
}
</style>