src/views/personal/card/index.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>发卡记录</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="answer-header">
        <div class="sel-box">
          <el-cascader @change="_QueryData(1)" size="small" class="sel" clearable placeholder="选择班级"
            v-model="query.classId" :options="gradeList" :props="props" :show-all-levels="false"></el-cascader>
          <el-input placeholder="请输入学生姓名" v-model="query.studentName" class="input-with-select"
            @keyup.enter.native="_QueryData(2)">
            <el-button slot="append" icon="el-icon-search" @click="_QueryData(2)"></el-button>
          </el-input>
          <el-input placeholder="请输入学生学号" v-model="query.studentCode" class="input-with-select"
            @keyup.enter.native="_QueryData(3)">
            <el-button slot="append" icon="el-icon-search" @click="_QueryData(3)"></el-button>
          </el-input>
          <el-button type="primary" round @click="_QueryData(4)">筛选</el-button>
        </div>
      </div>
      <el-empty :image-size="100" v-if="!tableData.length && !loading" description="暂无数据"></el-empty>
      <div v-else class="table-box" v-loading="loading">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" label="答题器编码" prop="clickerSn"></el-table-column>
          <el-table-column align="center" label="班级">
            <template slot-scope="scope">
              <span v-for="item in scope.row.classList" :key="item.classCode">{{
                item.className
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学生姓名" prop="studentName"></el-table-column>
          <el-table-column align="center" label="学号" prop="studentCode"></el-table-column>
          <el-table-column align="center" label="类型">
            <template slot-scope="scope">
              {{ scope.row.operationType == 0 ? "发卡" : "补卡" }}
            </template></el-table-column>
          <el-table-column align="center" label="描述">
            <template slot-scope="scope">
              {{
                scope.row.operationType == 0
                ? "--"
                : scope.row.reason == 0
                  ? "丢失"
                  : scope.row.reason == 1 ? "损坏" : "换班"
              }}
            </template></el-table-column>
          <el-table-column align="center" label="操作时间" prop="modifiedTime"></el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination small="" layout="total,prev, pager, next" :hide-on-single-page="true" :total="total"
            @current-change="changePage" :current-page="page" :page-size="size">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      props: { multiple: false },
      query: {
        classId: "",
        studentName: "",
        studentCode: "",
      },
      gradeList: [],
      tableData: [],
      page: 1,
      size: 20,
      total: 0,
    };
  },
  created() {
    this._QueryGradeList();
    this._QueryData();
  },
  methods: {
    // 查找班级
    async _QueryGradeList() {
      this.loading = true;
      const { data, status, info } = await this.$request.gradeList();
      if (status === 0) {
        if (!!data.list) {
          this.gradeList =
            data.list?.map((item) => {
              let gradeList = {
                value: item.grade,
                label: item.gradeName,
              };
              gradeList.children =
                item.classList?.map((items) => {
                  return {
                    value: items.id,
                    label: items.className,
                  };
                }) || [];
              return gradeList;
            }) || [];
        }
      } else {
        this.$message.error(info);
      }
    },
    changePage(page) {
      this.page = page;
      this._QueryData(4);
    },
    async _QueryData(type) {
      let query = {};
      query.gradeName = this.query.gradeName;
      if (type == 1) {
        query.classId = this.query.classId[1] ? this.query.classId[1] : "";
        this.query.studentCode = "";
        this.query.studentName = "";
      } else if (type == 2) {
        query.studentName = this.query.studentName;
        this.query.classId = "";
        this.query.studentCode = "";
      } else if (type == 3) {
        query.studentCode = this.query.studentCode;
        this.query.classId = "";
        this.query.studentName = "";
      } else {
        query = { ...this.query };
      }
      this.loading = true;
      const { data, status, info } = await this.$request.cardList({
        ...query,
        page: this.page,
        size: 20,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = data.list || [];
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.table-box {
  padding: 0 20px;
}
</style>