examcloud-admin-web/src/modules/examwork/view/examInfo.vue

<template>
  <div>
    <section class="content" style="margin-top: -10px;">
      <div class="box box-info">
        <!-- 正文信息 -->
        <div class="box-body">
          <el-form
            :inline="true"
            :model="formSearch"
            label-position="right"
            label-width="70px"
          >
            <el-form-item label="考试名称" class="pull-left">
              <el-input
                v-model="formSearch.name"
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="类型" class="pull-left">
              <el-select
                v-model="formSearch.examType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in examTypeList"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="pull-right buttonframe">
              <el-button
                v-if="rolePrivileges.search_exam"
                size="small"
                type="primary"
                icon="search"
                @click="searchForm"
                >查询
              </el-button>
              <el-button
                v-if="rolePrivileges.add_exam"
                size="small"
                type="primary"
                icon="plus"
                @click="addExamInfoDialog"
                >新增
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 弹出窗口 -->
          <el-dialog
            title="请选择考试类型："
            size="small"
            :visible.sync="examInfoDialog"
          >
            <el-button type="primary" @click="toTradition">传统考试</el-button>
            <el-button type="primary" @click="toOnline">网络考试</el-button>
            <el-button type="primary" @click="toPractice">练习考试</el-button>
            <el-button type="primary" @click="toOffline">离线考试</el-button>
            <el-button type="primary" @click="toPrint">
              分布式印刷考试</el-button
            >
            <div slot="footer" class="dialog-footer">
              <el-button @click="examInfoDialog = false;">取 消</el-button>
            </div>
          </el-dialog>

          <!-- 页面列表 -->
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            :data="tableData"
            border
            style="width: 100%;text-align:center;"
            @selection-change="selectChange"
          >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="id" width="80" label="ID"> </el-table-column>
            <el-table-column prop="name" width="180" label="考试名称">
            </el-table-column>
            <el-table-column width="100" label="考试类型">
              <template slot-scope="scope">
                <div>
                  <span>{{ getExamType(scope.row.examType) }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="beginTime" width="170" label="开始时间">
            </el-table-column>
            <el-table-column prop="endTime" width="170" label="结束时间">
            </el-table-column>
            <el-table-column prop="updateTime" width="170" label="更新时间">
            </el-table-column>
            <el-table-column width="80" label="状态">
              <template slot-scope="scope">
                <div>
                  <span>
                    <el-tag :type="getTag(scope.row.enable)">
                      {{ getEnable(scope.row.enable) }}
                    </el-tag>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    v-if="rolePrivileges.update_exam"
                    size="mini"
                    type="info"
                    @click="editExamInfoDialog(scope.row);"
                  >
                    修改
                  </el-button>
                  <el-button
                    v-if="
                      !scope.row.enable &&
                        rolePrivileges.change_exam_availability
                    "
                    size="mini"
                    type="success"
                    @click="enableById(scope.row);"
                  >
                    <i class="fa fa-check" aria-hidden="true"></i>启用
                  </el-button>
                  <el-button
                    v-else-if="rolePrivileges.change_exam_availability"
                    size="mini"
                    type="warning"
                    @click="disableById(scope.row);"
                  >
                    <i class="fa fa-close" aria-hidden="true"></i>禁用
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="page pull-right">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<style>
.page {
  margin-top: 10px;
}

.buttonframe {
  margin-left: 20px;
}

.el-table th > .cell {
  text-align: center;
}

.el-textarea__inner {
  resize: none;
}
</style>
<script>
import { CORE_API, EXAM_WORK_API, EXAM_TYPE } from "@/constants/constants.js";
import { mapState } from "vuex";

export default {
  data() {
    return {
      rolePrivileges: {
        search_exam: false,
        add_exam: false,
        del_exam: false,
        update_exam: false,
        change_exam_availability: false,
        exam_course_setting: false,
        exam_org_setting: false
      },
      formSearch: {
        name: "",
        examType: ""
      },
      loading: false,
      examTypeList: EXAM_TYPE,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      formLabelWidth: "120px",
      examInfoDialog: false,
      examId: "",
      selectedExamIds: [],
      button: {}
    };
  },
  computed: {
    ...mapState({ user: state => state.user }),
    examIds() {
      var examIds = "";
      for (let examId of this.selectedExamIds) {
        if (!examIds) {
          examIds += examId;
        } else {
          examIds += "," + examId;
        }
      }
      return examIds;
    }
  },

  methods: {
    selectChange(row) {
      this.selectedExamIds = [];
      row.forEach((element, index) => {
        console.log(index);
        this.selectedExamIds.push(element.id);
      });
      console.log(this.selectedExamIds);
    },
    getTag(status) {
      if (status == true) {
        return "success";
      } else if (status == false) {
        return "danger";
      }
      return status;
    },
    getEnable(enable) {
      if (enable == true) {
        return "启用";
      } else if (enable == false) {
        return "禁用";
      }
      return enable;
    },
    enableById(row) {
      this.$confirm("是否启用该考试？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var url = EXAM_WORK_API + "/exam/enable/" + row.id;
        this.$http
          .put(url, {})
          .then(response => {
            console.log(response);
            this.$notify({
              type: "success",
              message: "开启成功！"
            });
            this.searchForm();
          })
          .catch(response => {
            if (response.status == 500) {
              this.$notify({
                showClose: true,
                message: response.body.desc,
                type: "error"
              });
            }
          });
      });
    },
    disableById(row) {
      this.$confirm("是否禁用该考试？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(() => {
        var url = EXAM_WORK_API + "/exam/disable/" + row.id;
        this.$http
          .put(url, {})
          .then(response => {
            console.log(response);
            this.$notify({
              type: "success",
              message: "禁用成功！"
            });
            this.searchForm();
          })
          .catch(response => {
            if (response.status == 500) {
              this.$notify({
                showClose: true,
                message: response.body.desc,
                type: "error"
              });
            }
          });
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchForm();
    },
    //查询方法
    searchForm() {
      var param = new URLSearchParams(this.formSearch);
      var url =
        EXAM_WORK_API +
        "/exam/queryPage/" +
        (this.currentPage - 1) +
        "/" +
        this.pageSize +
        "?" +
        param;
      this.loading = true;
      this.$http.get(url).then(response => {
        console.log(response);
        this.tableData = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    addExamInfoDialog() {
      this.examInfoDialog = true;
      this.examId = "";
    },
    editExamInfoDialog(row) {
      if (row.examType == "ONLINE") {
        this.$router.push({ path: "/examwork/onlineExam/" + row.id });
      } else if (row.examType == "TRADITION") {
        this.$router.push({ path: "/examwork/traditionExam/" + row.id });
      } else if (row.examType == "PRACTICE") {
        this.$router.push({ path: "/examwork/practiceExam/" + row.id });
      } else if (row.examType == "OFFLINE") {
        this.$router.push({ path: "/examwork/offlineExam/" + row.id });
      } else if (row.examType == "PRINT_EXAM") {
        this.$router.push({ path: "/examwork/printExam/" + row.id });
      }
    },
    showExamCourseSettingsDialog(row) {
      this.$router.push({ path: "/examwork/examCourseSettings/" + row.id });
    },
    showExamOrgSettingsDialog(row) {
      this.$router.push({ path: "/examwork/examOrgSettings/" + row.id });
    },
    toTradition() {
      this.$router.push({
        path: "/examwork/traditionExam/add"
      });
    },
    toOnline() {
      this.$router.push({
        path: "/examwork/onlineExam/add"
      });
    },
    toPractice() {
      this.$router.push({
        path: "/examwork/practiceExam/add"
      });
    },
    toOffline() {
      this.$router.push({
        path: "/examwork/offlineExam/add"
      });
    },
    toPrint() {
      this.$router.push({
        path: "/examwork/printExam/add"
      });
    },
    getExamType(examType) {
      for (let tempExamType of this.examTypeList) {
        if (tempExamType.value == examType) {
          return tempExamType.label;
        }
      }
    },
    initPrivileges() {
      let params = new URLSearchParams({
        privilegeCodes: Object.keys(this.rolePrivileges).toString()
      });
      let url = CORE_API + "/rolePrivilege/checkPrivileges?" + params;
      this.$http.post(url).then(response => {
        this.rolePrivileges = response.data;
      });
    }
  },
  //初始化查询
  created() {
    this.initPrivileges();
    this.searchForm();
  }
};
</script>