examcloud-admin-web/src/modules/oe/component/commonForm.vue

<template>
  <el-form :model="form" label-width="120px">
    <el-col :span="6">
      <el-form-item label="考试批次">
        <el-select
          v-model="form.examId"
          filterable
          remote
          :remote-method="getExams"
          @change="changeExam"
          clearable
          @clear="getExams"
          placeholder="请选择考试批次"
          size="small"
        >
          <el-option
            v-for="item in examList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="学习中心">
        <el-select
          v-if="currentPagePrivileges.ORG_FIND_ALL"
          v-model="form.orgId"
          filterable
          remote
          :remote-method="getOrgs"
          @change="getCourses"
          clearable
          @clear="getOrgs"
          placeholder="全部"
          size="small"
        >
          <el-option
            v-for="item in orgList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input
          size="small"
          v-model="orgName"
          v-if="!currentPagePrivileges.ORG_FIND_ALL"
          :disabled="true"
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="课程">
        <el-select
          v-model="form.courseId"
          clearable
          placeholder="全部"
          size="small"
        >
          <el-option
            v-for="item in courseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="课程层次">
        <el-select
          v-model="form.courseLevel"
          clearable
          placeholder="不限"
          size="small"
        >
          <el-option
            v-for="item in courseLevels"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="姓名">
        <el-input size="small" v-model="form.studentName" placeholder="姓名">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="身份证号">
        <el-input
          size="small"
          v-model="form.identityNumber"
          placeholder="身份证号"
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="学号">
        <el-input size="small" v-model="form.studentCode" placeholder="学号">
        </el-input>
      </el-form-item>
    </el-col>
    <slot></slot>
  </el-form>
</template>
<script>
import { COURSE_LEVELS } from "../constants/constants";
import { mapState } from "vuex";
export default {
  props: ["form", "getExamCondition"],
  data() {
    return {
      examList: [],
      courseList: [],
      orgList: [],
      courseLevels: COURSE_LEVELS,
      currentPagePrivileges: {
        ORG_FIND_ALL: false //查询所有学习中心
      },
      orgName: ""
    };
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    getExams(examName) {
      if (!examName) {
        examName = "";
      }
      this.getExamCondition.params.name = examName;
      this.$http
        .get("/api/ecs_exam_work/exam/queryByNameLike", {
          params: this.getExamCondition.params
        })
        .then(response => {
          var examList = response.data;
          if (this.getExamCondition.filterCondition == "IS_FACE_ENABLE") {
            examList = examList.filter(function(e) {
              //查询开启人脸识别的
              return e.properties["IS_FACE_ENABLE"] == "true";
            });
          } else if (this.getExamCondition.filterCondition == "OVERDUE") {
            //缺考登记
            examList = examList.filter(function(e) {
              var now = new Date().getTime();
              var endTime = new Date(e.endTime).getTime();
              return now > endTime; //查询考试结束时间已过期的
            });
          }
          this.examList = examList;
        });
    },
    getOrgs(orgName) {
      if (!orgName) {
        orgName = "";
      }
      var rootOrgId = this.user.rootOrgId;
      this.$http
        .get("/api/ecs_core/org/query", {
          params: {
            name: orgName,
            rootOrgId: rootOrgId,
            enable: true
          }
        })
        .then(response => {
          this.orgList = response.data;
        });
    },
    changeExam(examId) {
      this.examList.forEach(exam => {
        if (exam.id == examId) {
          this.form.examType = exam.examType;
        }
      });
      this.getCourses();
    },
    getCourses() {
      this.form.courseId = "";
      this.courseList = [];
      var examId = this.form.examId;
      var orgId = this.form.orgId;
      if (!examId) {
        return false;
      }
      this.$http
        .get("/api/ecs_oe_admin/exam/student/findCoursesByExamIdAndOrgId", {
          params: {
            examId: examId,
            orgId: orgId
          }
        })
        .then(response => {
          this.courseList = response.data;
        });
    }
  },
  created() {
    this.getExams("");
    let params = new URLSearchParams({
      privilegeCodes: Object.keys(this.currentPagePrivileges).toString()
    });
    this.$http
      .post("/api/ecs_core/rolePrivilege/checkPrivileges?" + params)
      .then(response => {
        this.currentPagePrivileges = response.data;
        if (!this.currentPagePrivileges.ORG_FIND_ALL) {
          var userId = this.user.userId;
          this.$http.get("/api/ecs_core/user/" + userId).then(response => {
            this.form.orgId = response.data.orgId;
            this.orgName = response.data.orgName;
          });
        } else {
          this.getOrgs("");
        }
      });
  }
};
</script>