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

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>VIP课列表
    </h2>
    <div class="newBand"
         v-permission="'/buildVip'"
         @click="gotoBuildVip">新建VIP课</div>
    <div class="newBand"
         v-permission="'export/vipGroupList'"
         @click="onVIPCourseExport">导出VIP课</div>
    <div class="newBand"
         v-permission="'export/vipGroup'"
         @click="onStudentExport"
         style="max-width: inherit;">VIP课程续费提醒</div>
    <div class="m-core">
      <!-- 搜索类型 -->
      <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
        <!-- 状态 指导老师 活动方案-->
        <el-form-item>
          <el-input v-model.trim="searchForm.search"
                    @keyup.enter.native="search"
                    placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item prop="orgin">
          <el-select class="multiple"
                     v-model.trim="searchForm.orgin"
                     filterable
                     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>
        <!-- statusList -->
        <el-form-item prop="status">
          <el-select class="multiple"
                     v-model.trim="searchForm.status"
                     filterable
                     clearable
                     placeholder="请选课程状态">
            <el-option v-for="(item,index) in statusList"
                       :key="index"
                       :label="item.lable"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model.trim="searchForm.teacherId"
                     clearable
                     filterable
                     placeholder="指导老师">
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :value="item.id"
                       :label="item.realName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.activityId"
                     clearable
                     filterable
                     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 prop="status">
          <el-select class="multiple"
                     v-model.trim="searchForm.hasEducationalTeacherId"
                     filterable
                     clearable
                     placeholder="是否有教务老师">
            <el-option label="是"
                       value="true"></el-option>
            <el-option label="否"
                       value="false"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="search"
                     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"
                           width="120px"
                           prop="id"
                           label="课程组编号"></el-table-column>
          <el-table-column align="center"
                           width="200px"
                           prop="name"
                           label="课程名称">
            <!-- <template slot-scope="scope">
              <el-tooltip placement="top-start">
                  <div slot="content">{{ scope.row.name }}</div>
                  <div style="overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;">
                    <span>{{ scope.row.name }}</span>
                  </div>
              </el-tooltip>
            </template> -->
          </el-table-column>
          <el-table-column align="center"
                           prop="vipGroupCategoryName"
                           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="指导老师"
                           width='100px'></el-table-column>
          <el-table-column align="center"
                           prop="educationalTeacherName"
                           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.courseUnitPrice| moneyFormat }} 元</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="createTime"
                           label="上次课时间"
                           width='100px'>

            <template slot-scope="scope">
              <div>
                <p>{{scope.row.lastOverTime | formatterTime}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="paymentExpireDate"
                           label="开课时间"
                           width='100px'>
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.courseStartDate | formatterTime}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="coursesExpireDate"
                           label="结束时间"
                           width='100px'>
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.coursesExpireDate | formatterTime}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="createTime"
                           label="申请时间"
                           width='100px'>
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.createTime | formatterTime}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="stopReason"
                           label="备注">
          </el-table-column>
          <el-table-column align="center"
                           width="150px"
                           fixed="right"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-if="permission('/vipDetail')"
                           @click="gotoVipDetail(scope.row)">查看</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 && scope.row.enableDelete != 1 && permission('vipGroupManage/stopVipGroup')"
                            :ref="scope.$index">
                  <p style="margin-bottom:10px;">确定停止该vip课?</p>
                  <el-input v-model.trim="stopReason"
                            placeholder="请输入关闭原因"></el-input>
                  <div style="text-align: right; margin-top: 20px">
                    <el-button size="mini"
                               type="text"
                               @click="onCancelVip(scope)">取消</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="onVipDelete(scope.row)"
                           v-if="scope.row.enableDelete == 1 && permission('vipGroupManage/deleteVipGroup')">删除</el-button>
                <el-button type="text"
                           v-if="scope.row.status > 1&&scope.row.status != 3 && permission('/vipReset')"
                           @click="resetVip(scope.row)">修改</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,
  deleteVipGroup
} from "@/api/vipSeting";
import { getTeacher, getEmployeeOrgan } from "@/api/buildTeam";
import store from "@/store";
import axios from "axios";
import { getToken } from "@/utils/auth";
import load from "@/utils/loading";
import { permission } from '@/utils/directivePage'
export default {
  components: { pagination },
  name: "vipList",
  data () {
    return {
      organId: null,
      searchForm: {
        teacherId: null,
        activityId: null,
        search: null,
        orgin: null,
        status: null,
        hasEducationalTeacherId: null
      },
      teacherList: [],
      activeList: [],
      tableData: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      statusList: [
        { lable: "未开始", value: "0" },
        { lable: "报名中", value: "1" },
        { lable: "报名结束", value: "5" },
        { lable: "进行中", value: "2" },
        { lable: "已结束", value: "4" },
        { lable: "取消", value: "3" },
        { lable: "暂停", value: "6" }
      ],
      stopReason: null, // 停止原因
    };
  },
  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 () {
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      getEmployeeOrgan().then(res => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      });

      //   <!-- 状态 指导老师 活动方案-->
      getTeacher({ organId: this.organId }).then(res => {
        if (res.code == 200) {
          this.teacherList = res.data;
        }
      });
      // 获取活动方案
      vipGroupActivity({ organId: this.organId, rows: 9999 }).then(res => {
        if (res.code == 200) {
          this.activeList = res.data.rows;
        }
      });
      this.getList();
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    onReSet () {
      this.searchForm = {
        teacherId: null,
        activityId: null,
        search: null,
        orgin: null,
        status: null
      };
      this.getList();
    },
    getList () {
      let params = this.searchForm;
      params.page = this.rules.page;
      params.rows = this.rules.limit;
      params.hasEducationalTeacherId =
        this.searchForm.hasEducationalTeacherId || null;
      params.organId = this.searchForm.orgin || null;
      params.status = this.searchForm.status || null;
      getVipList(params).then(res => {
        if (res.code == 200) {
          // this.tableData = [];
          setTimeout(() => {
            this.tableData = res.data.rows;
          }, 50);
          this.rules.total = res.data.total;
        }
      });
    },
    // 跳转到vip详情
    gotoVipDetail (row) {
      let rules = JSON.stringify(this.rules);
      let searchForm = JSON.stringify(this.searchForm);
      let id = row.id;
      let name = row.name;
      this.$router.push({
        path: "/business/vipDetail",
        query: { id, name, rules, searchForm }
      });
    },
    closeVip (scope) {
      let id = scope.row.id;
      closeVip({ vipGroupId: id, stopReason: this.stopReason }).then(
        res => {
          if (res.code == 200) {
            this.$message.success("停止课程成功");
            scope._self.$refs[scope.$index].doClose();
            this.getList();
          }
        }
      );
    },
    onCancelVip (scope) {
      this.stopReason = null
      scope._self.$refs[scope.$index].doClose()
    },
    gotoBuildVip () {
      let rules = JSON.stringify(this.rules);
      let searchForm = JSON.stringify(this.searchForm);
      this.$router.push({
        path: "/business/buildVip",
        query: { rules, searchForm }
      });
    },
    onVIPCourseExport () {
      // 导出VIP课
      let searchForm = this.searchForm;
      let data = {
        teacherId: searchForm.teacherId || null,
        activityId: searchForm.activityId || null,
        organId: searchForm.orgin || null,
        status: searchForm.status || null,
        search: searchForm.search || null
      };
      let url = "/api-web/export/vipGroupList";
      const options = {
        method: "get",
        headers: {
          Authorization: getToken()
        },
        params: data,
        url,
        responseType: "blob"
      };
      this.$confirm("您确定导出VIP课吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then(res => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8"
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then(res => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let fname = "VIP列表" + new Date().getTime(); //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch(error => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => { });
    },
    onStudentExport () {
      // 导出VIP课
      // let searchForm = this.searchForm;
      let data = {
        // teacherId: searchForm.teacherId || null,
        // activityId: searchForm.activityId || null,
        // organId: searchForm.orgin || null,
        // status: searchForm.status || null,
        // search: searchForm.search || null
      };
      let url = "/api-web/export/vipGroup";
      const options = {
        method: "get",
        headers: {
          Authorization: getToken()
        },
        params: data,
        url,
        responseType: "blob"
      };
      this.$confirm("VIP课程续费提醒导出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then(res => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8"
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then(res => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let fname = "VIP课程续费提醒" + new Date().getTime() + '.xlsx'; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch(error => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => { });
    },
    // 修改vip
    resetVip (row) {
      let id = row.id;
      let organId = row.organId;
      let educationalTeacherId = row.educationalTeacherId;
      let userId = row.userId; // 课程组上指导老师
      let rules = JSON.stringify(this.rules);
      let searchForm = JSON.stringify(this.searchForm);
      let name = row.name;
      let endTimeStr = row.coursesExpireDate
      let startTimeStr = row.courseStartDate
      this.$router.push({
        path: "/business/vipReset",
        query: { id, educationalTeacherId, organId, userId, rules, searchForm, name, endTimeStr, startTimeStr }
      });
    },
    // 删除VIP
    onVipDelete (row) {
      this.$confirm("您确定删除该VIP课吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteVipGroup({ vipGroupId: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        })
      }).catch(() => { });
    },
    permission (str) {
      return permission(str)
    }
  },
  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" scoped>
.m-container {
  box-sizing: border-box;
  background-color: #fff;
  // padding: 18px 95px 55px 60px;
}
.newBand {
  display: inline-block;
}
</style>