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

<template>
  <section class="content">
    <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"
              class="input"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" class="pull-left">
            <el-select
              v-model="formSearch.examType"
              placeholder="请选择"
              clearable
              class="input"
            >
              <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="d-block">
            <el-button
              v-if="rolePrivileges.search_exam"
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="resetPageAndSearchForm"
              >查询
            </el-button>
            <el-button
              v-if="rolePrivileges.add_exam"
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addExamInfoDialog"
              >新增
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 弹出窗口 -->
        <el-dialog
          title="请选择考试类型"
          width="650px"
          :visible.sync="examInfoDialog"
        >
          <div>
            <el-button @click="toTradition">传统考试</el-button>
            <el-button @click="toOnline">网络考试</el-button>
            <el-button @click="toPractice">练习考试</el-button>
            <el-button @click="toOffline">离线考试</el-button>
            <el-button @click="toPrint"> 分布式印刷考试</el-button>
          </div>
          <div style="margin-top: 10px;text-align: center;">
            <el-button type="primary" @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="40"></el-table-column>
          <el-table-column prop="id" width="60" label="ID"> </el-table-column>
          <el-table-column prop="name" label="考试名称"> </el-table-column>
          <el-table-column width="80" label="考试类型">
            <template slot-scope="scope">
              <div>
                <span>{{ getExamType(scope.row.examType) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="beginTime" width="155" label="开始时间">
          </el-table-column>
          <el-table-column prop="endTime" width="155" label="结束时间">
          </el-table-column>
          <el-table-column prop="updateTime" width="155" label="更新时间">
          </el-table-column>
          <el-table-column width="50" label="状态">
            <span slot-scope="scope">
              <span v-if="scope.row.enable">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="启用"
                  placement="left"
                >
                  <i class="el-icon-success" style="color:green;"></i>
                </el-tooltip>
              </span>
              <span v-else>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="禁用"
                  placement="left"
                >
                  <i class="el-icon-error" style="color:red;"></i>
                </el-tooltip>
              </span>
            </span>
          </el-table-column>
          <el-table-column label="操作" width="190">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="rolePrivileges.update_exam"
                  size="mini"
                  plain
                  type="primary"
                  icon="el-icon-edit"
                  @click="editExamInfoDialog(scope.row)"
                >
                  编辑
                </el-button>

                <el-dropdown style="margin-left: 10px;">
                  <el-button type="primary" plain size="mini">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-button
                        v-if="
                          !scope.row.enable &&
                            rolePrivileges.change_exam_availability
                        "
                        size="mini"
                        plain
                        type="primary"
                        icon="el-icon-check"
                        @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"
                        plain
                        type="danger"
                        icon="el-icon-close"
                        @click="disableById(scope.row)"
                      >
                        <i class="fa fa-close" aria-hidden="true"></i>禁用
                      </el-button></el-dropdown-item
                    >
                    <el-dropdown-item>
                      <el-button
                        :disabled="
                          !(
                            rolePrivileges.update_exam &&
                            (scope.row.examType == 'OFFLINE' ||
                              scope.row.examType == 'ONLINE')
                          )
                        "
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        @click="editOrgSettings(scope.row)"
                      >
                        学习中心特殊设置
                      </el-button></el-dropdown-item
                    >
                  </el-dropdown-menu></el-dropdown
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page pull-right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </section>
</template>
<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);
    },
    enableById(row) {
      this.$confirm("是否启用该考试？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = EXAM_WORK_API + "/exam/enable/" + row.id;
        this.$httpWithMsg.put(url, {}).then(response => {
          console.log(response);
          this.$notify({
            type: "success",
            message: "开启成功！"
          });
          this.searchForm();
        });
      });
    },
    disableById(row) {
      this.$confirm("是否禁用该考试？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(() => {
        var url = EXAM_WORK_API + "/exam/disable/" + row.id;
        this.$httpWithMsg.put(url, {}).then(response => {
          console.log(response);
          this.$notify({
            type: "success",
            message: "禁用成功！"
          });
          this.searchForm();
        });
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchForm();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchForm();
    },
    resetPageAndSearchForm() {
      this.currentPage = 1;
      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.$httpWithMsg.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 });
      }
    },
    editOrgSettings(row) {
      if (row.examType == "OFFLINE") {
        this.$router.push({
          path: "/examwork/offlineExamOrgSettings/" + row.id
        });
      } else if (row.examType == "ONLINE") {
        this.$router.push({
          path: "/examwork/onlineExamOrgSettings/" + 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.$httpWithMsg.post(url).then(response => {
        this.rolePrivileges = response.data;
      });
    }
  },
  //初始化查询
  created() {
    this.initPrivileges();
    this.searchForm();
  }
};
</script>
<style scoped>
.input {
  width: 200px;
}
</style>