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="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" prop="id" label="课程组编号"></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="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.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" width="150px" fixed="right" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  v-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-permission="'vipGroupManage/stopVipGroup'"
                  v-if="scope.row.status <3"
                  :ref="scope.$index"
                >
                  <p style="margin-bottom:10px;">确定停止该vip课?</p>
                  <el-input v-model.trim="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"
                  v-if="scope.row.status > 1&&scope.row.status != 3"
                  v-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
} from "@/api/vipSeting";
import { getTeacher, getEmployeeOrgan } from "@/api/buildTeam";
import store from "@/store";
import axios from "axios";
import { getToken } from "@/utils/auth";
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" }
      ]
    };
  },
  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 }).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: scope.row.stopReason }).then(
        res => {
          if (res.code == 200) {
            this.$message.success("停止课程成功");
            scope._self.$refs[scope.$index].doClose();
            this.getList();
          }
        }
      );
    },
    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("您确定导出报表", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          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 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();
          });
        })
        .catch(() => {});
    },
    // 修改vip
    resetVip(row) {
      let id  = row.id;
      let educationalTeacherId = row.educationalTeacherId;
      let rules = JSON.stringify(this.rules);
      let searchForm = JSON.stringify(this.searchForm);
      this.$router.push({
        path: "/business/vipReset",
        query: { id,educationalTeacherId, rules, 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" scoped>
.m-container {
  box-sizing: border-box;
  background-color: #fff;
  // padding: 18px 95px 55px 60px;
}
.newBand {
  display: inline-block;
}
</style>