teachcloud-print-web/src/modules/exam/components/createExamAndPrintTask/InfoPrintTask.vue

<template>
  <div class="info-print-task">
    <p class="tips-info mb-2">
      考试需要命题老师提交完整的考务数据，每个卷袋表示一个考场，人数字段为应考人数，备份数量为该考场试卷题卡备用数量
    </p>
    <el-form ref="modalFormComp" label-position="top">
      <el-form-item label="考试时间：" required>
        <el-date-picker
          v-model="createDate"
          type="date"
          value-format="timestamp"
          placeholder="考试日期"
          style="width: 150px"
          @change="timeChange"
        >
        </el-date-picker>
        <el-time-picker
          is-range
          v-model="createTime"
          range-separator="至"
          start-placeholder="考试开始时间"
          end-placeholder="考试结束时间"
          placeholder="选择时间范围"
          value-format="timestamp"
          @change="timeChange"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="考试对象：" required></el-form-item>
    </el-form>

    <div class="part-box">
      <div class="box-justify mb-2">
        <p>
          共{{ packageInfos.packageCount }}个卷袋，{{
            packageInfos.studentCount
          }}个考生，共印试卷{{ packageInfos.paperCount }}份（正式{{
            packageInfos.paperReleaseCount
          }}份，备用{{ packageInfos.paperBackupCount }}份）
        </p>
        <el-button type="primary" @click="toAdd" :disabled="cannotAdd"
          >新增考试对象</el-button
        >
      </div>
      <el-table ref="TableList" :data="tableData" border>
        <el-table-column type="index" width="50" label="卷袋序号">
        </el-table-column>
        <el-table-column prop="className" label="考试对象"> </el-table-column>
        <el-table-column prop="studentCount" label="人数" width="60">
        </el-table-column>
        <el-table-column prop="printHouseName" label="印刷室">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.printHouseId"
              placeholder="请选择"
              @change="() => printHouseChange(scope.row)"
            >
              <el-option
                v-for="room in printHouses"
                :key="room.houseId"
                :value="room.houseId"
                :label="room.houseName"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in extendFields"
          :key="item.code"
          :label="item.name"
        >
          <div slot-scope="scope">
            <el-input
              v-model="scope.row.extends[item.code]"
              placeholder="请输入"
              clearable
            ></el-input>
          </div>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              class="btn-danger"
              type="text"
              @click="toDelete(scope.row)"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ModifyPrintTask -->
    <modify-print-task
      ref="ModifyPrintTask"
      :instance="curRow"
      :print-houses="printHouses"
      :class-list="unusedClassList"
      :extend-fields="extendFields"
      @modified="modified"
    ></modify-print-task>
  </div>
</template>

<script>
import { calcSum, getTimeDatestamp } from "@/plugins/utils";
import { examRuleDetail } from "../../../base/api";
import { listTaskPrintHouse, listTaskApplyClass } from "../../api";
import ModifyPrintTask from "./ModifyPrintTask";

export default {
  name: "info-print-task",
  components: { ModifyPrintTask },
  props: {
    datas: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modalForm: {
        examStartTime: "",
        examEndTime: "",
        paperNumber: "",
        courseName: "",
        courseCode: ""
      },
      tableData: [],
      curRow: {},
      classList: [],
      validClassList: [],
      unusedClassList: [],
      printHouses: [],
      extendFields: [],
      packageInfos: {
        packageCount: 0,
        studentCount: 0,
        paperCount: 0,
        paperReleaseCount: 0,
        paperBackupCount: 0
      },
      // date-picker
      curCreateTime: [],
      createDate: "",
      createTime: []
    };
  },
  computed: {
    cannotAdd() {
      return !this.unusedClassList.length;
    }
  },
  mounted() {
    this.getExtendFields();
    this.getPrintHouses();

    const curDate = getTimeDatestamp(Date.now());
    const hour = 60 * 60 * 1000;
    this.curCreateTime = [curDate + 8 * hour, curDate + 10 * hour];
    this.createTime = [...this.curCreateTime];
  },
  methods: {
    async initData() {
      this.modalForm = Object.assign(this.modalForm, {
        paperNumber: this.datas.examTask.paperNumber,
        courseName: this.datas.examTask.courseName,
        courseCode: this.datas.examTask.courseCode
      });

      await this.getClassList();

      const data = this.datas.printTask;
      this.tableData =
        data.courseCode === this.datas.examTask.courseCode ? data.list : [];

      if (data.examStartTime && data.examEndTime) {
        this.createTime = [data.examStartTime, data.examEndTime];
        this.createDate = getTimeDatestamp(data.examStartTime);
        this.modalForm.examStartTime = this.createTime[0];
        this.modalForm.examEndTime = this.createTime[1];
      }

      if (this.tableData.length) {
        this.updateUnusedClassList();
      } else {
        this.buildTableData();
      }
      this.updatePackageInfos();
    },
    checkData() {
      if (!this.modalForm.examStartTime || !this.modalForm.examEndTime) {
        this.$message.error("请选择考试时间！");
        return Promise.reject();
      }

      if (!this.tableData.length) {
        this.$message.error("请添加考试对象！");
        return Promise.reject();
      }

      let errorMsg = [];
      this.tableData.forEach(row => {
        let errorFields = [];
        this.extendFields.forEach(field => {
          if (!row.extends[field.code]) {
            errorFields.push(field.name);
          }
        });
        if (errorFields.length) {
          errorMsg.push(
            `考试对象${row.className}中，${errorFields.join("、")}必须填写`
          );
        }
      });
      if (errorMsg.length) {
        this.$message.error(errorMsg.join("。"));
        return Promise.reject();
      }
      return Promise.resolve(true);
    },
    getData() {
      this.tableData.forEach(row => {
        let extendFields = this.extendFields.map(field => {
          let info = { ...field };
          info.value = row.extends[field.code];
          return info;
        });

        row.extendFields = JSON.stringify(extendFields);
        row.examStartTime = this.modalForm.examStartTime;
        row.examEndTime = this.modalForm.examEndTime;
      });

      return {
        printTask: {
          ...this.modalForm,
          list: this.tableData
        }
      };
    },
    updateData() {
      this.$emit("data-change", this.getData());
    },
    buildTableData() {
      this.tableData = this.classList.map(clazz => {
        let data = {
          examPlace: "",
          examRoom: "",
          classId: clazz.id,
          className: clazz.name,
          studentCount: clazz.studentCount,
          printHouseId: clazz.printHouseId,
          printHouseName: clazz.printHouseName,
          extendFields: "",
          ...this.modalForm
        };
        let extendFieldModal = {};
        this.extendFields.forEach(field => {
          extendFieldModal[field.code] = "";
        });
        data.extends = extendFieldModal;
        return data;
      });

      console.log(this.tableData);
    },
    updateUnusedClassList() {
      let usedClassIds = [];
      this.tableData.forEach(row => {
        usedClassIds = [...usedClassIds, ...row.classId.split(",")];
      });

      this.unusedClassList = this.classList.filter(
        item => !usedClassIds.includes(item.id)
      );
    },
    updatePackageInfos() {
      this.packageInfos.packageCount = this.tableData.length;
      this.packageInfos.studentCount = calcSum(
        this.tableData.map(item => item.studentCount)
      );
      this.packageInfos.paperReleaseCount = this.packageInfos.studentCount;
      this.packageInfos.paperBackupCount =
        this.packageInfos.packageCount * this.datas.printPlan.backupCount;
      this.packageInfos.paperCount =
        this.packageInfos.paperReleaseCount +
        this.packageInfos.paperBackupCount;
    },
    async getExtendFields() {
      const examRule = await examRuleDetail();
      this.extendFields = examRule.extendFields
        ? JSON.parse(examRule.extendFields)
        : [];
    },
    async getPrintHouses() {
      this.printHouses = await listTaskPrintHouse();
    },
    async getClassList() {
      this.classList = [];
      if (!this.datas.examTask.courseCode) return;

      const data = await listTaskApplyClass({
        courseCode: this.datas.examTask.courseCode
      });
      if (!data) return;

      this.classList = data.map(item => {
        return {
          id: item.classId,
          name: item.className,
          studentCount: item.studentCount,
          printHouseId: item.printHouseId,
          printHouseName: item.printHouseName
        };
      });
    },
    timeChange() {
      if (!this.createDate || !this.createTime) {
        this.modalForm.examStartTime = null;
        this.modalForm.examEndTime = null;
        return;
      }

      const curDate = getTimeDatestamp(this.createDate);
      const timeDate = getTimeDatestamp(this.createTime[0]);

      this.modalForm.examStartTime = curDate + this.createTime[0] - timeDate;
      this.modalForm.examEndTime = curDate + this.createTime[1] - timeDate;
    },
    printHouseChange(row) {
      const curHouse = this.printHouses.find(
        item => item.houseId === row.printHouseId
      );
      if (curHouse) {
        row.printHouseName = curHouse.houseName;
      }
    },
    toAdd() {
      if (!this.modalForm.examStartTime || !this.modalForm.examEndTime) {
        this.$message.error("请选择考试时间！");
        return;
      }

      if (this.modalForm.examStartTime === this.modalForm.examEndTime) {
        this.$message.error("考试开始时间不能等于考试结束时间！");
        return;
      }

      this.curRow = {
        examPlace: "",
        examRoom: "",
        classId: "",
        className: "",
        studentCount: null,
        printHouseId: null,
        printHouseName: null,
        extendFields: "",
        ...this.modalForm
      };
      let extendFieldModal = {};
      this.extendFields.forEach(field => {
        extendFieldModal[field.code] = "";
      });
      this.curRow.extends = extendFieldModal;
      this.$refs.ModifyPrintTask.open();
    },
    toEdit(row) {
      this.curRow = { ...row };
      this.$refs.ModifyPrintTask.open();
    },
    toDelete(row) {
      this.tableData = this.tableData.filter(
        item => item.classId !== row.classId
      );
      this.updateUnusedClassList();
      this.updatePackageInfos();
    },
    modified(data) {
      this.tableData.push(data);
      this.updateUnusedClassList();
      this.updatePackageInfos();
    }
  }
};
</script>