examcloud-admin-web/src/modules/marking/views/MarkGradeMain.vue

<template>
  <div>
    <section class="content">
      <div class="box box-info">
        <div class="box-body">
          <el-form
            :inline="true"
            :model="formSearch"
            label-position="right"
            label-width="90px"
          >
            <el-row :gutter="10">
              <el-col :xs="7" :sm="7" :md="7" :lg="7"></el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7">
                <el-form-item label="姓名" class="pull-left">
                  <el-input
                    placeholder="姓名"
                    v-model="formSearch.studentName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7">
                <el-form-item label="学号" class="pull-left">
                  <el-input
                    placeholder="学号"
                    v-model="formSearch.studentCode"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7">
                <el-form-item label="课程" class="pull-left" style>
                  <el-select
                    :remote-method="getCourses"
                    remote
                    :loading="getCoursesSearchLoading"
                    filterable
                    class="input"
                    v-model="formSearch.courseCode"
                    placeholder="请选择"
                  >
                    <el-option value>请选择</el-option>
                    <el-option
                      v-for="item in courseAllListSelect"
                      :label="item.courseInfo"
                      :value="item.code"
                      :key="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="10">
              <el-col :xs="7" :sm="7" :md="7" :lg="7">
                <el-form-item label="层次" class="pull-left">
                  <el-select
                    class="input"
                    v-model="formSearch.specialtyLevel"
                    placeholder="层次"
                  >
                    <el-option value>请选择</el-option>
                    <el-option
                      v-for="item in specialtyLevels"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7">
                <el-form-item label="学习中心" class="pull-left">
                  <el-select
                    :remote-method="getOrgs"
                    remote
                    :loading="getOrgsSearchLoading"
                    filterable
                    class="input"
                    v-model="formSearch.campusId"
                    placeholder="请选择"
                  >
                    <el-option value>请选择</el-option>
                    <el-option
                      v-for="item in orgList"
                      :id="item.id"
                      :label="item.name"
                      :value="item.id"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7">
                <el-form-item label="采集人" class="pull-left">
                  <el-input
                    placeholder="采集人"
                    v-model="formSearch.info_collector"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <span>
                <el-button
                  size="small"
                  type="primary"
                  icon="search"
                  @click="searchMarkGrade"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="success"
                  icon="caret-left"
                  @click="back"
                  >返回</el-button
                >
              </span>
            </el-form-item>
          </el-form>
          <el-table
            stripe
            v-loading="loading"
            element-loading-text="拼命加载中"
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column label="姓名" width="100" prop="studentName" />
            <el-table-column label="学号" width="100" prop="studentCode" />
            <el-table-column label="课程" width="200" prop="courseName" />
            <el-table-column label="层次" width="80" prop="specialtyLevel" />
            <el-table-column label="专业" width="200" prop="specialtyName" />
            <el-table-column label="年级" width="80" prop="grade" />
            <el-table-column label="采集人" width="80" prop="infoCollector" />
            <el-table-column
              label="客观总分"
              width="100"
              prop="objectiveScore"
            />
            <el-table-column
              label="主观总分"
              width="100"
              prop="subjectiveScore"
            />
            <el-table-column label="试卷总分" width="100" prop="totalScore" />
            <el-table-column label="备注" width="120">
              <template slot-scope="scope">
                <el-popover trigger="hover" name="text" placement="top">
                  <div style="width:200px;">
                    {{ updateRemarkValue(scope.row.studentpaperPk) }}
                  </div>
                  <div slot="reference">
                    <span>
                      {{
                        interceptStr(
                          updateRemarkValue(scope.row.studentpaperPk)
                        )
                      }}
                    </span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="page pull-right">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { CORE_API, DATA_PROCESS_API } from "@/constants/constants";
import { LEVEL_TYPE } from "../constants/constants";
export default {
  data() {
    return {
      formSearch: {
        batchId: "",
        examRecordId: "",
        studentName: "",
        studentCode: "",
        courseCode: "",
        specialtyLevel: "",
        specialtyCode: "",
        remark: "",
        studentPaperPk: "",
        campusId: ""
      },
      specialtyLevels: LEVEL_TYPE,
      tableData: [],
      courseList: [],
      orgList: [],
      examList: [],
      specialtyList: [],
      remarkList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      getOrgsSearchLoading: false,
      getCoursesSearchLoading: false
    };
  },
  computed: {
    ...mapState({ user: state => state.user }),
    courseAllListSelect() {
      let courseSelect = [];
      for (let course of this.courseList) {
        let courseInfo = course.name + "(" + course.code + ")";
        courseSelect.push({ code: course.code, courseInfo: courseInfo });
      }
      return courseSelect;
    },
    getRemarkList() {
      let remarks = [];
      for (let item of this.remarkList) {
        remarks.push({ id: item.studentPaper.studentId, value: item.remark });
      }
      return remarks;
    }
  },
  methods: {
    //查询所有课程
    getCourses(name) {
      this.getCoursesSearchLoading = true;
      this.$http.get(CORE_API + "/course/query?name=" + name).then(response => {
        this.getCoursesSearchLoading = false;
        this.courseList = response.data;
      });
    },
    getOrgs(name) {
      this.getOrgsSearchLoading = true;
      this.$http.get(CORE_API + "/org/query?name=" + name).then(response => {
        this.getOrgsSearchLoading = false;
        this.orgList = response.data;
      });
    },
    getCourseName(code) {
      for (let course of this.courseList) {
        if (course.code == code) {
          return course.name;
        }
      }
    },
    getOrgName(id) {
      for (let org of this.orgList) {
        if (org.id == id) {
          return org.name;
        }
      }
    },
    updateRemarkValue(studentpaperPk) {
      let rList = this.getRemarkList;
      if (rList != []) {
        for (let item of rList) {
          if (item.id == studentpaperPk) {
            return item.value;
          }
        }
      }
    },
    //字符串截取
    interceptStr(str) {
      if (str) {
        let l = str.length;
        if (l > 5) {
          return str.substring(0, 5) + "...";
        } else {
          return str;
        }
      }
    },
    searchMarkGrade() {
      //查询从考务提供接口
      this.loading = true;
      var url =
        DATA_PROCESS_API +
        "/markGrade/all/" +
        (this.currentPage - 1) +
        "/" +
        this.pageSize;
      this.$http
        .get(url, { params: this.formSearch })
        .then(response => {
          console.log("查询的列表集合", response);
          this.tableData = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch(function(response) {
          if (response.status == 500) {
            this.$notify({
              showClose: true,
              message: response.data.desc,
              type: "error"
            });
          }
          this.loading = false;
        });
    },
    levelFormatter(specialtyLevel) {
      var level = "";
      for (let tempLevel of this.specialtyLevels) {
        if (tempLevel.value == specialtyLevel) {
          level = tempLevel.label;
        }
      }
      return level;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchMarkGrade();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchMarkGrade();
    },
    back() {
      this.$router.push({
        path: "/marking/mark_setting_work/grade"
      });
    }
  },
  created() {
    this.formSearch.batchId = parseInt(this.$route.params.examId);
    this.formSearch.rootOrgId = this.user.rootOrgId;
    this.searchMarkGrade();
  }
};
</script>
<style lang="css" scoped>

li {
    list-style-type: none;
}

.searchFrame {
    margin-right: 10px;
    margin-bottom: 10px;
}

.page{
  margin-top: 10px;
}

.el-select{
  width: 165px;
}
</style>