teachcloud-print-web/src/modules/analysis/components/ModifyAnalysisBatchPaper.vue

<template>
  <div class="modify-analysis-batch">
    <el-dialog
      class="page-dialog"
      :visible.sync="modalIsShow"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      @opened="visibleChange"
      @closed="dialogClosed"
    >
      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="55px"
          inline
        >
          <el-form-item label="课程：">
            <el-input
              style="width: 100%"
              v-model.trim="filter.courseName"
              placeholder="课程名称"
              clearable
            ></el-input>
          </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="danger" icon="el-icon-delete" @click="toBatchDelete"
            >批量删除</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="toAdd"
            >添加分析试卷</el-button
          >
        </div>
      </div>
      <div class="part-box part-box-pad">
        <el-table
          ref="TableList"
          :data="dataList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            fixed="left"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="semesterName"
            label="学期"
            min-width="210"
          ></el-table-column>
          <el-table-column prop="examName" label="考试" min-width="160">
          </el-table-column>
          <el-table-column prop="courseCode" label="课程(代码)" min-width="120">
            <span slot-scope="scope">
              {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
            </span>
          </el-table-column>
          <el-table-column prop="paperNumber" label="试卷编号">
          </el-table-column>
          <el-table-column prop="paperType" label="试卷类型" width="100">
          </el-table-column>
          <el-table-column prop="teacherName" label="命题老师">
          </el-table-column>
          <el-table-column prop="publishStatus" label="发布状态">
            <template slot-scope="scope">
              <span>{{ scope.row.publishStatus ? "已发布" : "未发布" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            class-name="action-column"
            label="操作"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-if="
                  scope.row.status === 'FINISH_CALCULATE' &&
                  !scope.row.publishStatus
                "
                class="btn-primary"
                type="text"
                @click="toPublish(scope.row)"
                >发布</el-button
              >
              <el-button
                v-if="!scope.row.publishStatus"
                class="btn-danger"
                type="text"
                @click="toDelete(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>
      <div slot="footer"></div>
    </el-dialog>

    <!-- SelectAnalysisPaper -->
    <select-analysis-paper
      ref="SelectAnalysisPaper"
      :batch="instance"
      @modified="getList"
    ></select-analysis-paper>
  </div>
</template>

<script>
import {
  analysisBatchPaperList,
  deleteAnalysisBatchPaper,
  analysisBatchPaperPublish,
} from "../api";
import SelectAnalysisPaper from "./SelectAnalysisPaper.vue";

export default {
  name: "modify-analysis-batch-paper",
  components: { SelectAnalysisPaper },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        batchId: "",
        semesterId: "",
        courseName: "",
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
      multipleSelection: [],
      loading: false,
    };
  },
  computed: {
    title() {
      return `分析试卷管理-${this.instance.batchName}`;
    },
  },
  methods: {
    visibleChange() {
      this.filter = {
        batchId: this.instance.id,
        semesterId: this.instance.semesterId,
        courseName: "",
      };
      this.curRow = {};
      this.toPage(1);
    },
    dialogClosed() {
      this.$emit("closed");
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      this.multipleSelection = [];
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size,
      };
      const data = await analysisBatchPaperList(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toAdd() {
      this.$refs.SelectAnalysisPaper.open();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.id);
    },
    async toBatchDelete() {
      if (!this.multipleSelection.length) {
        this.$message.error("请选择要删除的试卷！");
        return;
      }

      const confirm = await this.$confirm(`确定要删除选中的试卷吗?`, "提示", {
        type: "warning",
      }).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteAnalysisBatchPaper(this.instance.id, this.multipleSelection);
      this.$message.success("删除成功！");
      this.deletePageLastItem();
    },
    async toPublish(row) {
      const confirm = await this.$confirm(
        `确定要发布试卷【${row.paperNumber}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await analysisBatchPaperPublish(this.instance.id, row.id);
      this.$message.success("发布成功！");
      this.getList();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `确定要删除试卷【${row.paperNumber}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteAnalysisBatchPaper(this.instance.id, [row.id]);
      this.$message.success("删除成功！");
      this.deletePageLastItem();
    },
  },
};
</script>