msyj-admin-local/src/modules/main/StudentScore.vue

<template>
  <div class="student-score">
    <div class="part-box part-box-filter">
      <Form ref="FilterForm" label-position="left" inline>
        <FormItem v-if="IS_INSPECTION">
          <Select
            v-model="filter.workId"
            @on-change="workChange"
            placeholder="工作文件夹"
            style="width: 150px"
          >
            <Option
              v-for="(work, windex) in works"
              :key="windex"
              :value="work.id"
              :label="work.name"
            ></Option>
          </Select>
        </FormItem>
        <FormItem>
          <Select
            v-model="filter.subject"
            @on-change="subjecChange"
            placeholder="科目"
            style="width: 100px;"
            clearable
          >
            <Option
              v-for="(item, index) in subjects"
              :key="index"
              :value="item.subject"
              :label="item.name"
            ></Option>
          </Select>
        </FormItem>
        <FormItem v-if="IS_INSPECTION">
          <Select v-model="filter.questionId" placeholder="考区">
            <Option
              v-for="area in areas"
              :key="area.id"
              :value="area.id"
              :label="area.areaName"
            ></Option>
          </Select>
        </FormItem>

        <FormItem>
          <Select
            v-model="filter.type"
            placeholder="号码类型"
            style="width: 100px"
          >
            <Option
              v-for="(val, key) in CODE_TYPE"
              :key="key"
              :value="key"
              :label="val"
            ></Option>
          </Select>
        </FormItem>
        <FormItem>
          <Input
            v-model.trim="filter.number"
            placeholder="输入号码"
            clearable
          ></Input>
        </FormItem>
        <FormItem>
          <Input
            v-model.trim="filter.studentName"
            placeholder="输入姓名"
            clearable
          ></Input>
        </FormItem>
        <FormItem>
          <Button
            class="btn-form-search"
            size="small"
            type="primary"
            @click="toSearch"
            >查询</Button
          >
        </FormItem>
      </Form>
    </div>

    <div class="student-score-content" v-if="curStudent.name">
      <div class="score-content-head">
        <h1 class="score-content-title">{{ curStudent.name }}</h1>
        <p class="score-content-info">
          <span>考号：</span><span>{{ curStudent.examNumber }}</span>
        </p>
        <p class="score-content-tscore">
          <span>总分：</span><span>{{ curStudent.sumScore }}</span>
        </p>
      </div>
      <div class="score-content-body">
        <image-action-list
          :data="curStudent.scores"
          :column-number="curStudent.scores.length"
          loop
          ref="ImageActionList"
        ></image-action-list>

        <table :class="['table', `table-column-${curStudent.scores.length}`]">
          <tr>
            <td
              class="color-dark"
              v-for="(score, sindex) in curStudent.scores"
              :key="sindex"
            >
              {{ score.level || "空" }}
            </td>
          </tr>
          <tr>
            <td
              class="color-error"
              v-for="(score, sindex) in curStudent.scores"
              :key="sindex"
            >
              {{ score.score ? score.score + "分" : "空" }}
            </td>
          </tr>
        </table>
      </div>
    </div>

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

<script>
import { studentScoreList, workList, subjectList, areaList } from "@/api";
import { CODE_TYPE } from "@/constants/enumerate";
import ImageActionList from "./components/ImageActionList";

export default {
  name: "student-score",
  components: { ImageActionList },
  data() {
    return {
      filter: {
        workId: this.$route.params && this.$route.params.workId,
        subject: "",
        questionId: "",
        type: "examNumber",
        number: "",
        studentName: ""
      },
      CODE_TYPE,
      IS_INSPECTION: false,
      works: [],
      subjects: [],
      areas: [],
      current: 1,
      total: 0,
      size: 1,
      curStudent: { name: "" },
      students: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      this.IS_INSPECTION =
        this.$ls.get("user", { role: "" }).role === "INSPECTION";
      if (this.IS_INSPECTION) {
        await this.getWorkList();
        this.filter.workId = this.works[0].id;
        this.workChange();
        this.getAreaList();
      } else {
        await this.getSubjects();
        this.filter.subject = this.subjects[0].subject;
      }
    },
    async getWorkList() {
      this.works = await workList();
    },
    async getSubjects() {
      const data = await subjectList(this.filter.workId);
      this.subjects = data.filter(item => item.enable);
    },
    async getAreaList() {
      const data = await areaList({
        workId: this.filter.workId,
        subject: this.filter.subject
      });
      this.areas = data.map(item => {
        return {
          id: item.id,
          areaName: item.areaName,
          areaCode: item.areaCode
        };
      });
    },
    async toSearch() {
      if (!this.filter.number && !this.filter.studentName) {
        this.$Message.error("号码和姓名必须填写一个");
        return;
      }
      const data = await studentScoreList(this.filter);
      if (!data.length) {
        this.$Message.error("无此考生");
        return;
      }
      data.map(student => {
        student.scores.map(score => {
          score.title = score.subjectName;
        });
      });
      this.students = data;
      this.total = this.students.length;
      this.toPage(1);
    },
    toPage(page) {
      this.current = page;
      this.curStudent = this.students[page - 1] || {};
    },
    workChange() {
      this.filter.subject = null;
      this.filter.questionId = null;
      const curWork = this.works.find(item => item.id === this.filter.workId);
      this.subjects = curWork.subjects;
      this.filter.subject = this.subjects[0].subject;
    },
    subjecChange() {
      if (this.IS_INSPECTION) {
        this.filter.questionId = null;
        this.getAreaList();
      }
    }
  }
};
</script>