dy-admin-manager/src/views/vipClass/vipList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>VIP课列表
    </h2>
    <div class="newBand"
         @click='gotoBuildVip'>新建vip课</div>
    <div class='m-core'>
      <!-- 搜索类型 -->
      <el-form :inline="true"
               class="searchForm"
               v-model="searchForm">
        <!-- 状态 指导老师 活动方案-->
        <el-form-item prop='orgin'>
          <el-select class='multiple'
                     v-model="searchForm.orgin"
                     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-select v-model="searchForm.teacherId"
                     clearable
                     filterable
                     placeholder="指导老师">
            <el-option v-for="(item,index) in teacherList"
                       :key='index'
                       :value="item.id"
                       :label="item.username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.activityId"
                     clearable
                     placeholder="活动方案">
            <el-option v-for="(item,index) in activeList"
                       :key='index'
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.search"
                    placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList"
                     type="danger">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 查询列表 -->
      <!-- tab -->
      <div class="tableWrap">
        <el-table style="width: 100%"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data='tableData'>
          <el-table-column align='center'
                           prop="id"
                           label="VIP编号">
          </el-table-column>
          <el-table-column align='center'
                           prop="name"
                           label="课程名称">
          </el-table-column>
          <el-table-column align='center'
                           prop="status"
                           label="课程状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.status | formatterStatus}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="userName"
                           label="指导老师">
          </el-table-column>
          <el-table-column align='center'
                           prop="studentNum"
                           label="班级人数">
          </el-table-column>
          <el-table-column align='center'
                           label="课程单价">
            <template slot-scope="scope">
              <div>
                <p>线上课单价:{{scope.row.onlineClassesUnitPrice}}</p>
                <p>线下课单价:{{scope.row.offlineClassesUnitPrice}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="vipGroupActivityName"
                           label="活动方案">
          </el-table-column>
          <el-table-column align='center'
                           label="当前课次">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.currentClassTimes + '/' + scope.row.totalClassTimes}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="月均消耗">
            <template slot-scope="scope">
              {{ scope.row.monthConsumeRate }}%
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="paymentExpireDate"
                           label="开课时间">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.courseStartDate | formatterTime}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="coursesExpireDate"
                           label="课程结束时间">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.coursesExpireDate | formatterTime}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="createTime"
                           label="申请时间">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.createTime | formatterTime}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           @click="gotoVipDetail(scope.row.id)">查看</el-button>
                <!-- 
                <el-button type="text">启动</el-button> -->
                <!-- <el-button type="text"
                           v-if="scope.row.status <3"
                           @click='closeVip(scope.row.id)'>关闭</el-button> -->
                <el-popover placement="top"
                            width="160"
                            v-if="scope.row.status <3"
                            :ref="scope.$index">
                  <p style='margin-bottom:10px;'>确定停止该vip课?</p>
                  <el-input v-model="scope.row.stopReason"
                            placeholder="请输入关闭原因"></el-input>
                  <div style="text-align: right; margin-top: 20px">
                    <el-button size="mini"
                               type="text"
                               @click="scope._self.$refs[scope.$index].doClose()">取消</el-button>
                    <el-button type="primary"
                               size="mini"
                               @click="closeVip(scope)">确定</el-button>
                  </div>
                  <el-button type="text"
                             slot="reference">停止</el-button>
                </el-popover>
                <el-button type="text"
                           @click="resetVip(scope.row.id)">修改</el-button>
              </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>
  </div>

</template>
<script>
import pagination from '@/components/Pagination/index'
import { getVipList, vipGroupActivity, closeVip, getVipGroupDetail } from '@/api/vipSeting'
import { getTeacher, getEmployeeOrgan } from '@/api/buildTeam'
import store from '@/store'
export default {
  components: { pagination },
  name: 'vipList',
  data () {
    return {
      organId: null,
      searchForm: {
        teacherId: null,
        activityId: null,
        search: null,
        orgin: null
      },
      teacherList: [],
      activeList: [],
      tableData: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
    }
  },
  created () {
    if (this.$route.query.rules) {
      this.rules = this.$route.query.rules;
      // console.log(this.$route.query.rules)
    }
    if (this.$route.query.searchForm) {
      this.searchForm = this.$route.query.searchForm;
      // console.log(this.$route.query.rules)
    }
  },
  mounted () {
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    })
    this.getList();
    //   <!-- 状态 指导老师 活动方案-->
    getTeacher({ organId: this.organId }).then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    })
    // 获取活动方案
    vipGroupActivity({ organId: this.organId }).then(res => {
      if (res.code == 200) {
        this.activeList = res.data.rows;
      }
    })
  },
  methods: {
    onReSet () {
      this.searchForm = {
        teacherId: null,
        activityId: null,
        search: null
      }
    },
    getList () {
      let params = this.searchForm
      params.page = this.rules.page
      params.rows = this.rules.limit
      params.organId = this.searchForm.orgin
      getVipList(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.rules.total = res.data.total
        }
      })
    },
    // 跳转到vip详情
    gotoVipDetail (id) {
      this.$router.push({ path: '/business/vipDetail', query: { id, rules: this.rules, searchForm: this.searchForm } })
    },
    closeVip (scope) {
      let id = scope.row.id;
      closeVip({ vipGroupId: id, stopReason: scope.row.stopReason }).then(res => {
        if (res.code == 200) {
          this.$message.success('停止课程成功')
          scope._self.$refs[scope.$index].doClose()
          this.getList();
        }
      })
    },
    gotoBuildVip () {
      this.$router.push({ path: '/business/buildVip', query: { rules: this.rules, searchForm: this.searchForm } })
    },
    // 修改vip
    resetVip (id) {
      this.$router.push({ path: '/business/vipReset', query: { id, rules: this.rules, searchForm: this.searchForm } })
    }

  },
  filters: {
    formatterTime (val) {
      let result
      if (val) {
        result = val.split(' ')[0];
      } else {
        result = ''
      }
      return result
    },
    formatterStatus (val) {
      let arr = ["未开始", "报名中", "报名结束", '取消', '停止']
      return arr[val];
    }
  }
}
</script>
<style lang="scss" scope>
.m-container {
  box-sizing: border-box;
  background-color: #fff;
  padding: 18px 95px 55px 60px;
}
</style>