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

<style lang="css">

li {
    list-style-type: none;
}

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

.page{
  margin-top: 10px;
}

.el-tag{
  margin-right: 10px;
}
</style>

<template>
  <div>
    <section class="content">
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">
            <span>评卷快速设置</span>
            <span
              >({{ $route.params.name }}-{{ $route.params.courseCode }}-{{
                $route.params.courseName
              }})</span
            >
          </h3>
          <div class="box-tools pull-right"></div>
        </div>
        <div class="box-body">
          <div class="scroll">
            <el-form
              :inline="true"
              :model="markerSearch"
              label-position="right"
              label-width="50px"
            >
              <el-row :gutter="10" v-if="selectedMarker.length != 0">
                <el-col :xs="30" :sm="30" :md="30" :lg="30">
                  <el-form-item label="已选">
                    <el-tag
                      v-for="tag in selectedMarker"
                      :closable="tagClosable"
                      :close-transition="false"
                      @close="tagClose(tag);"
                      :type="tagType"
                      :key="tag.userId"
                    >
                      {{ tag.name }}
                    </el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="姓名" class="pull-left">
                <el-input
                  placeholder="姓名"
                  v-model="markerSearch.name"
                  @change="searchMarker"
                ></el-input>
              </el-form-item>
              <el-form-item class="pull-right">
                <el-button
                  size="small"
                  type="primary"
                  icon="search"
                  @click="searchMarker"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="check"
                  @click="markerSelect"
                  >确定</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="caret-left"
                  @click="back"
                  >返回</el-button
                >
              </el-form-item>
            </el-form>
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              :data="markerData"
              border
              style="width: 100%"
              @selection-change="selectChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="姓名" width="250" prop="name">
              </el-table-column>
              <el-table-column label="登录名" width="250" prop="loginName">
              </el-table-column>
            </el-table>
            <div class="page pull-right">
              <el-pagination
                background
                @current-change="handleMarkerCurrentChange"
                :current-page="curMarker"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="totalMarker"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {
  CORE_API,
  EXAM_WORK_API,
  MARKING_API,
  DATA_PROCESS_API,
  OE_API
} from "../constants/constants";
import { mapState } from "vuex";
export default {
  data() {
    return {
      markerSearch: {
        name: ""
      },
      markerData: [],
      oldData: [],
      selectedMarker: [],
      oldSelectedMarker: [],
      curMarker: 1,
      totalMarker: 10,
      pageSize: 10,
      loading: true,
      workId: "",
      examId: "",
      examName: "",
      courseCode: "",
      markTasks: {
        workId: "",
        userId: [],
        paperId: ""
      },
      paperId: "",
      tagType: "primary",
      tagClosable: true,
      marked: false,
      progress: 0
    };
  },
  methods: {
    selectChange(val) {
      var selectedMarker = this.selectedMarker;
      val.forEach((element, index) => {
        selectedMarker.push(element);
        this.removeMarkerData(element.userId);
      });
      this.selectedMarker = selectedMarker;
    },
    markerSelect() {
      if (this.selectedIds.length == 0) {
        this.$message.error("请选择评卷员！");
      } else {
        console.log(this.selectedIds);
        this.markTasks = {
          workId: this.workId,
          userIds: this.selectedIds,
          examId: this.examId,
          courseCode: this.courseCode
        };
        this.loading = true;
        this.$http.post(DATA_PROCESS_API + "/markTasks", this.markTasks).then(
          response => {
            this.$notify({
              message: "快速设置成功",
              type: "success"
            });
            this.loading = false;
            this.initMarker();
            this.searchSelectedMarker();
          },
          response => {
            this.$notify({
              message: "快速设置失败",
              type: "error"
            });
            this.loading = false;
            this.initMarker();
            this.searchSelectedMarker();
          }
        );
      }
    },
    filterMarker() {
      var tempData = this.markerData.filter(element => {
        if (this.markerSearch.name) {
          return element.name.includes(this.markerSearch.name);
        } else {
          return true;
        }
      });
      this.markerData = tempData;
      this.totalMarker = tempData.length;
    },
    handleMarkerCurrentChange(val) {
      this.curMarker = val;
      this.searchMarker();
    },
    pagingMarker() {
      var start = (this.curMarker - 1) * this.pageSize;
      var end =
        this.curMarker * this.pageSize < this.totalMarker
          ? this.curMarker * this.pageSize
          : this.totalMarker;
      var tempData = [];
      console.log(`当前页: ${this.curMarker},开始:${start},结束:${end}`);
      for (let i = start; i < end; i++) {
        tempData.push(this.markerData[i]);
      }
      console.log(tempData);
      this.markerData = tempData;
    },
    searchMarker() {
      this.loading = true;
      this.markerData = this.oldData;
      this.filterMarker();
      this.pagingMarker();
      this.loading = false;
    },
    initMarker() {
      this.loading = true;
      this.$http
        .get(
          DATA_PROCESS_API +
            "/markUsers?workId=" +
            this.workId +
            "&courseCode=" +
            this.courseCode
        )
        .then(response => {
          this.markerData = response.data;
          this.oldData = this.markerData.slice(0);
          this.totalMarker = response.data.length;
          this.searchMarker();
          this.loading = false;
        });
    },
    checkMarked() {
      var self = this;
      self.loading = true;
      self.$http
        .get(MARKING_API + "/markWorks/" + self.workId)
        .then(response => {
          self.loading = false;
          if (response.progress > 0) {
            self.marked = true;
            self.progress = response.progress;
          }
        })
        .catch(error => {
          this.$notify({
            message: error.message,
            type: "error"
          });
        });
    },
    searchSelectedMarker() {
      this.loading = true;
      this.$http
        .get(
          DATA_PROCESS_API +
            "/markUsers/assign?workId=" +
            this.workId +
            "&courseCode=" +
            this.courseCode
        )
        .then(response => {
          this.selectedMarker = response.data;
          this.oldSelectedMarker = this.selectedMarker.slice(0);
          this.loading = false;
        });
    },
    back() {
      this.$router.push({
        path:
          "/index/mark_setting_main/" +
          this.$route.params.workId +
          "/" +
          this.$route.params.examId +
          "/" +
          this.$route.params.name
      });
    },
    isOldSelectedMarker(marker) {
      var flag = false;
      for (let tempMarker of this.oldSelectedMarker) {
        if (tempMarker.userId == marker.userId) {
          flag = true;
          break;
        }
      }
      return flag;
    },
    tagClose(tag) {
      this.checkMarked();
      if (this.marked && this.isOldSelectedMarker(tag)) {
        this.$notify({
          message:
            "评卷工作已开始（进度为" +
            this.progress +
            "%），不能删除该评卷员！",
          type: "error"
        });
        return;
      }
      for (let [index, marker] of this.selectedMarker.entries()) {
        if (tag.userId == marker.userId) {
          this.selectedMarker.splice(index, 1);
          this.markerData.push(tag);
          this.oldData.push(tag);
          break;
        }
      }
    },
    removeMarkerData(userId) {
      for (let [index, marker] of this.markerData.entries()) {
        if (userId == marker.userId) {
          this.markerData.splice(index, 1);
          break;
        }
      }
      for (let [index, marker] of this.oldData.entries()) {
        if (userId == marker.userId) {
          this.oldData.splice(index, 1);
          break;
        }
      }
    }
  },
  computed: {
    ...mapState({ user: state => state.user }),
    selectedIds() {
      var selectedIds = [];
      for (let marker of this.selectedMarker) {
        selectedIds.push(marker.userId);
      }
      return selectedIds;
    }
  },
  created() {
    this.workId = this.$route.params.workId;
    this.examId = this.$route.params.examId;
    this.examName = this.$route.params.name;
    this.courseCode = this.$route.params.courseCode;
    this.initMarker();
    this.searchSelectedMarker();
    //校验评卷工作是否开始，如果开始则不能删除评卷员
    this.checkMarked();
  }
};
</script>