paper-library-font/src/modules/record/components/DocumentDetailDialog.vue

<template>
  <div>
    <el-dialog
      class="document-detail-dialog page-dialog"
      :visible.sync="modalIsShow"
      title="查看详情"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      @open="visibleChange"
    >
      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="90px"
          inline
        >
          <el-form-item prop="collegeName" label="学院：">
            <college-select
              v-model="filter.collegeName"
              placeholder="学院"
              :exam-id="task.examId"
              style="width: 100%"
            ></college-select>
          </el-form-item>
          <el-form-item prop="majorName" label="专业：">
            <major-select
              v-model="filter.majorName"
              :college-name="filter.collegeName"
              :exam-id="task.examId"
              cascader
              placeholder="专业"
              style="width: 100%"
            ></major-select>
          </el-form-item>
          <el-form-item prop="clazzName" label="班级：">
            <class-select
              v-model="filter.clazzName"
              :major-name="filter.majorName"
              :exam-id="task.examId"
              cascader
              placeholder="班级"
            ></class-select>
          </el-form-item>
          <el-form-item label="绑定状态：">
            <el-select v-model="filter.isBind" placeholder="绑定状态" clearable>
              <el-option
                v-for="(val, key) in BOUND_TYPE"
                :key="key"
                :value="key * 1"
                :label="val"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任课老师：">
            <el-input
              v-model.trim="filter.teacher"
              placeholder="任课老师"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="教学班：">
            <el-input
              v-model.trim="filter.teachClass"
              placeholder="教学班"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="考场：">
            <el-input
              v-model.trim="filter.examRoom"
              placeholder="考场"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名/学号：">
            <el-input
              style="width: 142px"
              v-model.trim="filter.param"
              placeholder="姓名/学号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="起止成绩：">
            <el-input-number
              style="width: 100px"
              v-model="filter.minScore"
              :min="0"
              :max="999"
              :step="1"
              step-strictly
              :controls="false"
              placeholder="成绩"
            ></el-input-number>
            <span class="el-input-split"></span>
            <el-input-number
              style="width: 100px"
              v-model="filter.maxScore"
              :min="0"
              :max="999"
              :step="1"
              step-strictly
              :controls="false"
              placeholder="成绩"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="起止图片张数：">
            <el-input-number
              style="width: 100px"
              v-model="filter.minBindCount"
              :min="0"
              :max="999"
              :step="1"
              step-strictly
              :controls="false"
              placeholder="图片张数"
            ></el-input-number>
            <span class="el-input-split"></span>
            <el-input-number
              style="width: 100px"
              v-model="filter.maxBindCount"
              :min="0"
              :max="999"
              :step="1"
              step-strictly
              :controls="false"
              placeholder="图片张数"
            ></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="toPage(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="part-box-action">
          <el-button
            type="success"
            icon="el-icon-upload"
            :loading="loading"
            @click="toDownload"
            >批量下载</el-button
          >
        </div>
      </div>

      <div class="part-box part-box-pad mb-0">
        <el-table
          ref="TableList"
          :data="dataList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column prop="studentName" label="姓名"></el-table-column>
          <el-table-column
            prop="studentCode"
            label="学号"
            width="120"
          ></el-table-column>
          <el-table-column prop="courseCodeName" label="课程名称（代码）">
            <template slot-scope="scope">
              {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
            </template>
          </el-table-column>
          <el-table-column prop="teacher" label="任课老师"></el-table-column>
          <el-table-column prop="teachClass" label="教学班"></el-table-column>
          <el-table-column prop="collegeName" label="学院"></el-table-column>
          <el-table-column prop="majorName" label="专业"></el-table-column>
          <el-table-column prop="className" label="班级"></el-table-column>
          <el-table-column prop="examRoom" label="考场"></el-table-column>
          <el-table-column
            prop="score"
            label="成绩"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="120"
          ></el-table-column>
          <el-table-column class-name="action-column" label="图片" width="80">
            <template slot-scope="scope">
              <el-button
                class="btn-primary"
                type="text"
                @click="toDetail(scope.row)"
              >
                <span class="cont-link">{{ scope.row.bindCount }}</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="part-page">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :current-page="current"
            :total="total"
            :page-size="size"
            @current-change="toPage"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- ArchivesDetailStudentDialog -->
    <archives-detail-student-dialog
      ref="ArchivesDetailStudentDialog"
      :student="curRow"
    ></archives-detail-student-dialog>
  </div>
</template>

<script>
import { documentDetialListPage, documentDetialDownload } from "../api";
import { BOUND_TYPE } from "@/constants/enumerate";
import ArchivesDetailStudentDialog from "./ArchivesDetailStudentDialog.vue";
import { downloadByApi } from "@/plugins/download";

export default {
  name: "document-detail-dialog",
  components: { ArchivesDetailStudentDialog },
  props: {
    task: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        paperScanTaskId: "",
        collegeName: "",
        majorName: "",
        clazzName: "",
        isBind: "",
        teacher: "",
        teachClass: "",
        examRoom: "",
        param: "",
        minScore: undefined,
        maxScore: undefined,
        minBindCount: undefined,
        maxBindCount: undefined,
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
      multipleSelection: [],
      BOUND_TYPE,
      loading: false,
    };
  },
  methods: {
    visibleChange() {
      this.filter.paperScanTaskId = this.task.paperScanTaskId;
      this.dataList = [];
      this.toPage(1);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size,
      };
      const data = await documentDetialListPage(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.studentId);
    },
    async toDownload() {
      if (this.loading) return;
      this.loading = true;

      const res = await downloadByApi(() => {
        return documentDetialDownload(this.filter);
      }).catch((e) => {
        this.$message.error(e || "下载失败，请重新尝试！");
      });
      this.loading = false;

      if (!res) return;
      this.$message.success("下载成功！");
    },
    toDetail(row) {
      if (!row.bindCount) return;

      this.curRow = {
        ...row,
        paperScanTaskId: this.task.paperScanTaskId,
        semesterId: this.task.semesterId,
      };
      this.$refs.ArchivesDetailStudentDialog.open();
    },
  },
};
</script>