msyj-admin-local/src/modules/main/components/CheckDataResult.vue

<template>
  <Modal
    class="check-data-result"
    v-model="modalIsShow"
    title="校验详情"
    :mask-closable="false"
    width="800"
    @on-visible-change="visibleChange"
  >
    <Table
      ref="TableList"
      :columns="columns"
      :data="students"
      disabled-hover
      border
    ></Table>

    <div class="part-page">
      <Page
        :current="current"
        :total="total"
        :page-size="size"
        show-total
        show-elevator
        @on-change="toPage"
      ></Page>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "check-data-result",
  props: {
    content: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      students: [],
      columns: [
        {
          type: "index",
          title: "序号",
          width: 80,
          align: "center",
          indexMethod: row => {
            return (this.current - 1) * this.size + row._index + 1;
          }
        },
        {
          title: "姓名",
          key: "studentName",
          width: 100
        },
        {
          title: "考号",
          key: "examNumber",
          width: 120
        },
        {
          title: "错误原因",
          key: "errorMessage"
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          className: "table-action",
          render: (h, param) => {
            let actions = [];
            actions.push({
              icon: "ios-paper",
              attrs: {
                title: "查看"
              },
              action: () => {
                this.toView(param.row);
              }
            });

            return h("div", this.$tableIconAction(h, actions));
          }
        }
      ],
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0
    };
  },
  methods: {
    visibleChange(visible) {
      if (visible) {
        this.toPage(1);
      } else {
        this.$emit("on-close");
      }
    },
    toPage(page) {
      this.current = page;
      this.students = this.content.slice((page - 1) * this.size, this.size);
    },
    toView(row) {
      window.open(
        this.getRouterPath({
          name: "StudentScore",
          query: {
            examNumber: row.examNumber
          }
        })
      );
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    }
  }
};
</script>