teachcloud-print-web/src/modules/print/components/PrintPlanBkDetail.vue

<template>
  <div>
    <el-dialog
      class="print-plan-detail page-dialog"
      :visible.sync="modalIsShow"
      :title="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="85px"
          inline
        >
          <el-form-item label="学期：">
            <semester-select
              v-model.trim="filter.semesterId"
              placeholder="学期"
              :clearable="false"
            ></semester-select>
          </el-form-item>
          <el-form-item label="考试：">
            <exam-select
              v-model="filter.examId"
              :semester-id="filter.semesterId"
              category="FORMAL"
              :clearable="false"
            ></exam-select>
          </el-form-item>
          <el-form-item label="开课学院：">
            <college-select
              v-model.trim="filter.collegeId"
              :semester-id="filter.semesterId"
              placeholder="开课学院"
              clearable
              @change="facultyChange"
            ></college-select>
          </el-form-item>
          <el-form-item label="课程（代码）：" label-width="110px">
            <course-select
              v-model.trim="filter.courseId"
              :semester-id="filter.semesterId"
              :exam-id="filter.examId"
              placeholder="课程（代码）"
              clearable
            ></course-select>
          </el-form-item>
          <el-form-item label="试卷编号：">
            <paper-number-select
              ref="PaperNumberSelect"
              v-model="filter.paperNumber"
              :print-plan-id="filter.printPlanIdList"
              :exam-id="filter.examId"
              :course-id="filter.courseId"
              placeholder="试卷编号"
              clearable
            ></paper-number-select>
          </el-form-item>
          <el-form-item label="命题老师：">
            <el-input
              v-model.trim="filter.userName"
              placeholder="命题老师"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="校区：">
            <el-input
              v-model.trim="filter.campusName"
              placeholder="校区"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="班级：">
            <el-input
              v-model.trim="filter.className"
              placeholder="班级"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="part-box-action">
          <el-button type="primary" @click="toBatchEdit">批量提交</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"
            :selectable="rowSelectable"
          ></el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="70"
            :index="indexMethod"
          ></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="courseName"
            label="课程（代码）"
            min-width="200"
          >
            <span slot-scope="scope"
              >{{ scope.row.courseName }}（{{ scope.row.courseCode }}）</span
            >
          </el-table-column>
          <el-table-column
            prop="paperNumber"
            label="试卷编号"
            min-width="160"
          ></el-table-column>
          <el-table-column prop="userName" label="命题老师" min-width="100">
            <span slot-scope="scope"
              >{{ scope.row.realName }}（{{ scope.row.loginName }}）</span
            >
          </el-table-column>
          <el-table-column prop="campusName" label="校区" min-width="100">
          </el-table-column>
          <el-table-column prop="className" label="班级" min-width="100">
          </el-table-column>
          <el-table-column prop="statusDisplay" label="状态" width="100">
          </el-table-column>
          <el-table-column
            prop="exposedPaperType"
            label="已曝光类型"
            width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.exposedPaperType"
                >卷{{ scope.row.exposedPaperType }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="unexposedPaperType"
            label="未曝光类型"
            width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.unexposedPaperType"
                >卷{{ scope.row.unexposedPaperType }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            class-name="action-column"
            label="印刷份数"
            width="120"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.totalSubjects"
                class="width-80"
                :min="1"
                :max="99999"
                :step="1"
                step-strictly
                :controls="false"
                :disabled="scope.row.status === 'FINISH'"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            class-name="action-column"
            label="备份份数"
            width="120"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.backupCount"
                class="width-80"
                :min="1"
                :max="99999"
                :step="1"
                step-strictly
                :controls="false"
                :disabled="scope.row.status === 'FINISH'"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            class-name="action-column"
            label="操作"
            width="80"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                class="btn-primary"
                type="text"
                :disabled="scope.row.status === 'FINISH'"
                @click="toEdit(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>
    </el-dialog>
  </div>
</template>

<script>
import { printPlanBkDetailListPage, printPlanBkDetailUpdate } from "../api";

export default {
  name: "print-plan-bk-detail",
  props: {
    plan: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    title() {
      return `印刷计划详情-${this.plan.name}`;
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        semesterId: "",
        examId: "",
        printPlanId: "",
        courseId: "",
        paperNumber: "",
        userName: "",
        capusName: "",
        className: "",
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
      totalInfo: {},
      multipleSelection: [],
    };
  },
  methods: {
    visibleChange() {
      this.filter = {
        semesterId: "",
        examId: "",
        printPlanId: this.plan.id,
        courseId: "",
        paperNumber: "",
        userName: "",
        capusName: "",
        className: "",
      };
      this.size = this.GLOBAL.pageSize;
      this.dataList = [];
      this.totalInfo = {};
      // this.search();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size,
      };
      const data = await printPlanBkDetailListPage(datas);
      this.dataList = data.records.map((item) => {
        if (!item.totalSubjects) item.totalSubjects = undefined;
        if (!item.backupCount) item.backupCount = 1;
        return item;
      });
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    search() {
      this.toPage(1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    rowSelectable(row) {
      return row.status !== "FINISH";
    },
    facultyChange(val) {
      console.log(val);
    },
    toEdit(row) {
      if (row.status === "FINISH") return;
      // if (!row.totalSubjects) {
      //   this.$message.error("请输入印刷份数");
      //   return;
      // }
      this.updateData([row]);
    },
    toBatchEdit() {
      const datas = this.multipleSelection.filter(
        (item) => item.totalSubjects && item.status !== "FINISH"
      );
      if (!datas.length) {
        this.$message.error("当前没有需要提交的数据");
        return;
      }
      this.updateData(this.multipleSelection);
    },
    async updateData(dataList) {
      const datas = {
        printPlanId: this.plan.id,
        list: dataList.map((item) => {
          return {
            examDetailId: item.examDetailId,
            examId: item.examId,
            courseId: item.courseId,
            courseName: item.courseName,
            paperNumber: item.paperNumber,
            totalSubjects: item.totalSubjects,
            backupCount: item.backupCount,
          };
        }),
      };
      const res = await printPlanBkDetailUpdate(datas).catch(() => {});
      if (!res) return;
      this.$message.success("提交成功!");
      this.getList();
    },
  },
};
</script>