baoman / Ezquiz_Platform

  <template>
    <div>
      <back-box>
        <template slot="title">
          <span>发卡记录</span>
        </template>
      </back-box>
  
      <div class="page-content">
        <div class="answer-header">

          <div class="sel-box">
            <template v-if="role == 'ROLE_XUEXIAO'">
              <el-cascader
                @change="(page = 1), _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="(page = 1), _QueryData(2)"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="(page = 1), _QueryData(2)"
                ></el-button>
              </el-input>
              <el-input
                placeholder="请输入学生学号"
                v-model="query.studentCode"
                class="input-with-select"
                @keyup.enter.native="(page = 1), _QueryData(3)"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="(page = 1), _QueryData(3)"
                ></el-button>
              </el-input>
            </template>
            <template v-if="role == 'ROLE_JITUAN'">
              <el-select
                class="sel2"
                v-model="query.schoolId"
                placeholder="选择学校"
                @change="(page = 1), _QueryData(1)"
              >
                <el-option
                  v-for="item in schoolList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
            <el-select

              class="sel"

              v-model="query.operationType"
              placeholder="选择类型"

            >

              <el-option label="全部" value=""></el-option>
              <el-option label="发卡" :value="0"></el-option>
              <el-option label="补卡" :value="1"></el-option>
            </el-select>
            <div class="d1">
              <el-date-picker
                v-model="query.startDay"
                type="date"
                @change="handleChangeTimeStart"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              ~
              <el-date-picker
                v-model="query.endDay"
                type="date"
                placeholder="选择日期时间"
                @change="handleChangeTimeEnd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>

            <el-button type="primary" round @click="(page = 1), _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>{{ scope.row.classList[0]?.gradeName }}</span>

              </template>
            </el-table-column>

            <el-table-column align="center" label="班级">
              <template slot-scope="scope">

                <span
                  v-for="(item, index) in scope.row.classList"
                  :key="item.classCode"
                  >{{ (index == 0 ? "" : "、") + 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
                    ? "丢失"
                    : "损坏"
                }}
              </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>

        <p class="down" v-if="tableData.length">
          <el-button
            type="primary"
            plain
            round
            icon="fa fa-cloud-download"
            @click="downExl"
            >导出报表</el-button
          >
        </p>

      </div>
    </div>
  </template>
  
  <script>

  import { downloadFile, formatDate } from "utils";

  export default {
    data() {
      return {

        role: "",

        loading: false,
        props: { multiple: false },
        query: {
          classId: "",
          studentName: "",
          studentCode: "",

          operationType: "",
          schoolId: "",
          startDay: "",
          endDay: "",

        },

        schoolList: [],

        gradeList: [],
        tableData: [],
        page: 1,
        size: 20,
        total: 0,
      };
    },

    async created() {
      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;
      this.loading = true;
      if (this.role == "ROLE_XUEXIAO") {
        this._QueryGradeList();
      } else if (this.role == "ROLE_JITUAN") {
        await this._QuerySchool();
      }
  

      this._QueryData();
    },
    methods: {

      handleChangeTimeStart(val) {
        if (this.query.endDay) {
          if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.startDay = "";
          }
        }
      },
      handleChangeTimeEnd(val) {
        if (this.query.startDay) {
          if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.endDay = "";
          }
        }
      },

      // 查找班级
      async _QueryGradeList() {
        this.loading = true;
        const { data, status, info } = await this.$request.gradeList();
        console.log(status);
        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 _QuerySchool() {
        const { data, status, info } = await this.$request.schoolList();
        if (status === 0) {
          this.schoolList =
            data.list?.map((item) => {
              return {
                label: item.schoolName,
                value: item.id,
              };
            }) || [];

          this.schoolList.unshift({
            label: "全部",
            value: "",
          });
          this.query.schoolId = this.schoolList[0].value || "";

        } else {
          this.$message.error(info);
        }
      },

      serQuery(type) {

        let query = {};

        if (this.role == "ROLE_XUEXIAO") {

          delete query.schoolId;

          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 };

            query.classId = this.query.classId[1] ? this.query.classId[1] : "";

          }
        } else if (this.role == "ROLE_JITUAN") {

          query = this.query.schoolId
            ? {
                schoolId: this.query.schoolId,
              }
            : {};
          if (type != 1) {
            this.query.operationType
              ? (query["operationType"] = this.query.operationType)
              : "";
            this.query.startDay ? (query["startDay"] = this.query.startDay) : "";
            this.query.endDay ? (query["endDay"] = this.query.endDay) : "";
          }

        }

        return query;
      },
      async _QueryData(type) {
        let query = this.serQuery(type);

        this.loading = true;
        const { data, status, info } = await this.$request.cardList({
          ...query,
          page: this.page,
          size: 20,
        });
        this.loading = false;
        console.log(status);
        if (status === 0) {
          this.tableData = data.list || [];
          this.total = data.count;
        } else {
          this.$message.error(info);
        }
      },

      async downExl() {

        let query = {};
        this.query.operationType
          ? (query["operationType"] = this.query.operationType)
          : "";
        this.query.startDay ? (query["startDay"] = this.query.startDay) : "";
        this.query.endDay ? (query["endDay"] = this.query.endDay) : "";

        //报表导出
        if (this.exportLoading == true) return;

        this.exportLoading = true;

        const data = await this.$request.exportClickersLog({
          ...query,
        });

        this.exportLoading = false;

        if (data && !data.code) {

          let blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });

          let date = formatDate(new Date().getTime(), "yyyy-MM-dd");
          let name = `发卡记录_${date}.xlsx`;
          downloadFile(name, blob);

        } else {

          this.$message.error(data.info);

        }
      },

    },
  };
  </script>
  
  <style lang="scss" scoped>
  .table-box {
    padding: 0 20px;
  }

  .down {
    padding: 16px 20px;
  }

  .answer-header {
    .sel-box {
      .sel2 {
        width: 300px;
        margin-right: 20px;
      }
      .d1 {
        margin-right: 20px;
      }
    }

  }

  </style>