dy-admin-manager/src/views/courseCredentials/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      排课资格列表
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        :saveKey="'courseCreditials'"
        :model="searchForm"
        ref="searchForm"
        @submit="search"
        @reset="onReSet"
      >
        <el-form-item prop="search">
          <el-input
            placeholder="学生编号/姓名"
            clearable
            type="text"
            v-model.trim="searchForm.search"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            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>
          <el-button native-type="submit" type="primary">搜索</el-button>
          <el-button native-type="reset" type="danger">重置</el-button>
        </el-form-item>
      </save-form>

      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
        >
          <el-table-column
            align="center"
            prop="organName"
            label="分部"
          ></el-table-column>
          <el-table-column align="center" label="学员信息" width="120px">
            <template slot-scope="scope">
              {{ scope.row.username }}<br />
              <copy-text>{{ scope.row.userId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="手机号"
            width="120px"
          ></el-table-column>
          <el-table-column align="center" prop="one" label="1v1">
            <template slot="header">
              <div class="titleCell">
                <span>1v1</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="two" label="1v2">
            <template slot="header">
              <div class="titleCell">
                <span>1v2</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div> </template
          ></el-table-column>
          <el-table-column align="center" prop="three" label="1v3">
            <template slot="header">
              <div class="titleCell">
                <span>1v3</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div> </template
          ></el-table-column>
          <el-table-column align="center" prop="four" label="1v4">
            <template slot="header">
              <div class="titleCell">
                <span>1v4</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div> </template
          ></el-table-column>
          <el-table-column align="center" prop="five" label="1v5">
            <template slot="header">
              <div class="titleCell">
                <span>1v5</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div> </template
          ></el-table-column>
          <el-table-column align="center" prop="six" label="1v6">
            <template slot="header">
              <div class="titleCell">
                <span>1v6</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="seven" label="1v7">
            <template slot="header">
              <div class="titleCell">
                <span>1v7</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="theory" label="小组课">
            <template slot="header">
              <div class="titleCell">
                <span>小组课</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="practice" label="网管课">
            <template slot="header">
              <div class="titleCell">
                <span>网管课</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已上课次/总课次</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                    font-size: 18px;
                    color: #f56c6c;
                    top: 2px;
                    position: relative;
                  "
                  ></i>
                </el-tooltip>
              </div> </template
          ></el-table-column>
          <!-- <el-table-column
            align="center"
            prop="activityId"
            label="活动编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="addMemo"
            label="活动名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="分部"
          ></el-table-column>
          <el-table-column align="center" label="学员信息">
            <template slot-scope="scope">
              {{ scope.row.username }}
              <copy-text>{{ scope.row.userId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="teacherName"
            label="指导老师"
          ></el-table-column>

          <el-table-column align="center" label="付费类型">
            <template slot-scope="scope">
              <span v-if="scope.row.vipFlag">
                {{ scope.row.categoryName }}
              </span>
              <span v-if="scope.row.practiceFlag">
                网管课
              </span>
              <span v-if="scope.row.memberFlag">学练宝</span>

              <span
                v-if="
                  !scope.row.vipFlag &&
                    !scope.row.practiceFlag &&
                    !scope.row.memberFlag
                "
                >--</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="付费课资格">
            <template slot-scope="scope">
              <span v-if="scope.row.vipFlag || scope.row.practiceFlag">
                <span v-if="!scope.row.memberFlag"
                  >{{ scope.row.totalCourseNum - scope.row.subCourseNum }}/{{
                    scope.row.totalCourseNum
                  }}</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="赠送类型">
            <template slot-scope="scope">
              <span v-if="scope.row.giveVipFlag">
                {{ scope.row.giveCategoryName }}
              </span>
              <span v-if="scope.row.givePracticeFlag">
                网管课
              </span>
              <span v-if="scope.row.giveMemberFlag">学练宝</span>

              <span
                v-if="
                  !scope.row.giveVipFlag &&
                    !scope.row.givePracticeFlag &&
                    !scope.row.giveMemberFlag
                "
                >--</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="赠送课资格">
            <template slot-scope="scope">
              <span v-if="scope.row.giveVipFlag || scope.row.givePracticeFlag">
                <span v-if="!scope.row.giveMemberFlag"
                  >{{
                    scope.row.totalGiveCourseNum - scope.row.subGiveCourseNum
                  }}/{{ scope.row.totalGiveCourseNum }}</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="musicTheoryNum"
            label="是否退费"
          >
            <template slot-scope="scope">
              {{ scope.row.returnFee ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="actualPrice"
            label="支付金额"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="subNoCoursePrice"
            label="剩余排课金额"
          ></el-table-column> -->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="gotoDetail(scope.row)"
                  >详情</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :saveKey="'courseCreditials'"
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>

    <el-dialog :visible.sync="detailVisible" title="查看详情" width="900px">
      <detail v-if="detailVisible" :userId="selectUserId" />
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { querySumPage } from "./api";
import detail from "./detail.vue";
export default {
  name: "credentials",
  components: {
    pagination,
    detail
  },
  data() {
    return {
      searchForm: {
        search: null,
        organId: null,
        hasSubCourse: null,
        returnFee: null
      },
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      detailVisible: false,
      selectUserId: null
    };
  },
  mounted() {
    // 获取分部
    this.$store.dispatch("setBranchs");
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await querySumPage({
          page: this.rules.page,
          rows: this.rules.limit,
          ...this.searchForm
        });
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (e) {}
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.rules = {
        ...this.rules,
        page: 1
      };
      this.$refs.searchForm.resetFields();
      this.search();
    },
    gotoDetail(row) {
      // console.log(row, "121212", row.userId);
      this.selectUserId = row.userId;
      this.detailVisible = true;
    }
  }
};
</script>

<style lang="scss"></style>