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

<template>
  <div class="preview-business-detail">
    <el-dialog
      :visible.sync="modalIsShow"
      title="详情数据"
      top="10px"
      width="940px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @open="visibleChange"
    >
      <div class="part-box part-box-pad part-box-border part-box-gray">
        <el-form ref="modalFormComp" class="form-info" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="印刷计划：">
                <span>{{ modalForm.printPlanName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="卷袋号：">
                <span>{{ modalForm.packageCode }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="考试日期：">
                <span>{{ modalForm.examDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考试时间：">
                <span>{{ modalForm.examTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="考点：">
                <span>{{ modalForm.examPlace }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考场：">
                <span>{{ modalForm.examRoom }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="课程（代码）：">
                <span>{{ modalForm.courseNameCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="试卷编号：">
                <span>{{ modalForm.paperNumber }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="part-box">
        <div class="box-justify mb-2">
          <el-button type="primary" @click="toPage(1)">查询</el-button>
          <el-button type="primary" @click="toAdd">新增</el-button>
        </div>
        <el-table border ref="TableList" :data="dataList">
          <el-table-column
            type="index"
            label="序号"
            width="50"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column prop="courseNameCode" label="课程（代码）">
          </el-table-column>
          <el-table-column
            prop="paperNumber"
            label="试卷编码"
          ></el-table-column>
          <el-table-column prop="examPlace" label="考点"> </el-table-column>
          <el-table-column prop="examRoom" label="考场"> </el-table-column>
          <el-table-column prop="studentCode" label="学号"> </el-table-column>
          <el-table-column prop="studentName" label="姓名"> </el-table-column>
          <el-table-column class-name="action-column" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                class="btn-primary"
                type="text"
                @click="toPreview(scope.row)"
                >查看详情</el-button
              >
              <el-button
                class="btn-danger"
                type="text"
                @click="toDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <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 slot="footer"></div>
    </el-dialog>

    <!-- PreviewBusinessStudentDetail -->
    <preview-business-student-detail
      :instance="curRow"
      ref="PreviewBusinessStudentDetail"
    ></preview-business-student-detail>
    <!-- ModifyBusinessStudent -->
    <modify-business-student
      ref="ModifyBusinessStudent"
      :instance="curRow"
      @modified="getList"
    ></modify-business-student>
  </div>
</template>

<script>
import { businessDataDetailListPageById, businessDeleteStudent } from "../api";
import PreviewBusinessStudentDetail from "./PreviewBusinessStudentDetail";
import ModifyBusinessStudent from "./ModifyBusinessStudent.vue";

const initModalForm = {
  id: "",
  courseNameCode: "",
  examDetailCourseIds: "",
  examEndTime: "",
  examStartTime: "",
  examDate: "",
  examTime: "",
  examPlace: "",
  examRoom: "",
  packageCode: null,
  paperNumber: "",
  printPlanId: "",
  printPlanName: "",
  totalSubjects: 0,
};

export default {
  name: "preview-business-detail",
  components: { PreviewBusinessStudentDetail, ModifyBusinessStudent },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      modalForm: {},
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
    };
  },
  methods: {
    visibleChange() {
      if (this.instance.id !== this.modalForm.id) this.toPage(1);

      this.modalForm = this.$objAssign(initModalForm, this.instance);
    },
    async getList() {
      const datas = {
        examDetailId: this.instance.id,
        pageNumber: this.current,
        pageSize: this.size,
      };
      const data = await businessDataDetailListPageById(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toAdd() {
      this.curRow = { examDetailId: this.instance.id };
      this.$refs.ModifyBusinessStudent.open();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `确定要删除考生【${row.studentName}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await businessDeleteStudent(row.id);
      this.$message.success("删除成功！");
      this.deletePageLastItem();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toPreview(row) {
      this.curRow = row;
      this.$refs.PreviewBusinessStudentDetail.open();
    },
  },
};
</script>