teachcloud-print-web/src/modules/exam/views/StatisticsManage.vue

<template>
  <div class="exam-statistics">
    <div class="part-box part-box-filter part-box-flex">
      <el-form ref="FilterForm" label-position="left" label-width="90px" inline>
        <el-form-item label="学期：">
          <semester-select v-model="filter.semesterId"></semester-select>
        </el-form-item>
        <el-form-item label="考试：">
          <exam-select
            v-model="filter.examId"
            :semester-id="filter.semesterId"
            @change="examChange"
          ></exam-select>
        </el-form-item>
        <el-form-item label="开课学院：">
          <college-select
            v-model.trim="filter.collegeId"
            placeholder="开课学院"
            clearable
            @change="facultyChange"
          ></college-select>
        </el-form-item>
        <el-form-item label="开课部门：">
          <el-select
            v-model="filter.teachingRoomId"
            placeholder="开课部门"
            filterable
            clearable
          >
            <el-option
              v-for="item in teachingRooms"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="完成状态：">
          <el-select
            v-model="filter.status"
            style="width: 142px;"
            placeholder="完成状态"
            clearable
          >
            <el-option
              v-for="(val, key) in FINISH_STATUS"
              :key="key"
              :value="key"
              :label="val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称：">
          <el-input
            v-model.trim="filter.courseName"
            placeholder="课程名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="任课老师：">
          <el-input
            v-model.trim="filter.teacherName"
            placeholder="任课老师"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="checkPrivilege('button', 'select')"
            type="primary"
            @click="toPage(1)"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="part-box-action">
        <el-button
          v-if="checkPrivilege('button', 'Delete')"
          type="danger"
          icon="el-icon-delete"
          :loading="loading"
          @click="toBatDelete"
          >批量删除</el-button
        >
        <el-button
          v-if="checkPrivilege('button', 'Freshen')"
          type="primary"
          icon="el-icon-refresh"
          :loading="loading"
          :disabled="!filter.examId"
          @click="toFresh"
          >刷新数据</el-button
        >
        <el-button
          type="success"
          icon="el-icon-download"
          v-if="checkPrivilege('button', 'import')"
          ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
        >
        <upload-button
          v-if="checkPrivilege('button', 'import')"
          btn-icon="el-icon-circle-plus-outline"
          btn-content="导入"
          btn-type="success"
          :upload-url="uploadUrl"
          :upload-data="uploadData"
          :format="['xls', 'xlsx']"
          accept=".xls,.xlsx"
          :disabled="!filter.examId"
          @valid-error="validError"
          @upload-success="uploadSuccess"
        >
        </upload-button>
      </div>
    </div>
    <div class="part-box part-box-pad">
      <el-table
        ref="TableList"
        :data="dataList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="70"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column
          prop="collegeName"
          label="开课学院"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="teachingRoom"
          label="开课部门"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="courseCode"
          label="课程代码"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="teacher"
          label="任课老师"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="clazzNames"
          label="班级名称"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="printCount"
          label="总印份数"
          width="80"
        ></el-table-column>
        <el-table-column prop="status" label="状态" width="60">
          <span slot-scope="scope">{{ FINISH_STATUS[scope.row.status] }}</span>
        </el-table-column>
        <el-table-column
          class-name="action-column"
          label="操作"
          width="100px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.clazzContent"
              class="btn-primary"
              type="text"
              @click="toDetail(scope.row)"
              >详情</el-button
            ></template
          ></el-table-column
        >
      </el-table>
      <div class="part-page">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :pager-count="5"
          :current-page="current"
          :total="total"
          :page-size="size"
          @current-change="toPage"
          @size-change="pageSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- StatisticsDetailDialog -->
    <statistics-detail-dialog
      :contents="curContents"
      ref="StatisticsDetailDialog"
    ></statistics-detail-dialog>
  </div>
</template>

<script>
import { statisticsList, statisticsDelete, statisticsFreshen } from "../api";
import { organizationFindByTypeList } from "../../base/api";
import UploadButton from "../../../components/UploadButton";
import StatisticsDetailDialog from "../components/StatisticsDetailDialog.vue";

export default {
  name: "exam-statistics",
  components: { UploadButton, StatisticsDetailDialog },
  data() {
    return {
      filter: {
        semesterId: "",
        examId: "",
        collegeId: "",
        teachingRoomId: "",
        courseName: "",
        teacherName: "",
        status: ""
      },
      loading: false,
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
      curContents: [],
      teachingRooms: [],
      multipleSelection: [],
      FINISH_STATUS: { UN_FINISH: "未完成", FINISH: "已完成" },
      // import
      uploadData: {},
      uploadUrl: "/api/admin/statistics/import",
      downloadUrl: "/temps/examStatisticsTemplate.xlsx",
      dfilename: "命题计划导入模板.xlsx"
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      if (!this.checkPrivilege("list", "list")) return;

      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      const data = await statisticsList(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    async getTeachingRooms() {
      this.teachingRooms = await organizationFindByTypeList({
        orgType: "TEACHING_ROOM",
        orgId: this.filter.collegeId,
        auth: false
      });
    },
    facultyChange(val) {
      this.filter.teachingRoomId = "";
      this.teachingRooms = [];

      if (!val) return;
      this.getTeachingRooms();
    },
    examChange() {
      this.uploadData = {
        examId: this.filter.examId
      };
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.id);
    },
    async toBatDelete() {
      if (this.loading) return;

      if (!this.multipleSelection.length) {
        this.$message.error("请选择要删除的数据");
        return;
      }
      const result = await this.$confirm("确定要删除选择的数据吗？", "提示", {
        type: "warning"
      }).catch(() => {});
      if (result !== "confirm") return;

      this.loading = true;
      const data = await statisticsDelete(
        this.multipleSelection
      ).catch(() => {});
      this.loading = false;
      if (!data) return;

      this.$message.success("提交成功！");
      this.toPage(this.current);
    },
    async toFresh() {
      if (!this.filter.examId) {
        this.$message.error("请先选择考试");
        return;
      }

      this.loading = true;
      const data = await statisticsFreshen({
        examId: this.filter.examId
      }).catch(() => {});
      this.loading = false;
      if (!data) return;

      this.$message.success("刷新成功！");
      this.toPage(1);
    },
    toDetail(row) {
      if (!row.clazzContent) {
        this.$message.error("当前无详情展示");
        return;
      }
      this.curContents = JSON.parse(row.clazzContent);
      this.$refs.StatisticsDetailDialog.open();
    },
    // import
    validError(errorData) {
      this.$message.error(errorData.message);
    },
    uploadSuccess() {
      this.$message.success("文件上传成功，后台正在导入！");
      this.getList();
    }
  }
};
</script>