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

<template>
  <div>
    <LinkTitlesCustom
      :currentPaths="['考试管理', '考试信息', '学习中心设置']"
    />
    <section class="content">
      <div class="box-body">
        <el-form
          :model="formSearch"
          :inline="true"
          label-position="right"
          label-width="80px"
        >
          <el-form-item label="学习中心">
            <el-select
              class="select"
              :remote-method="getOrgList4Search"
              :loading="loadingOrg4Search"
              remote
              filterable
              clearable
              v-model="formSearch.orgId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgList4Search"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="d-block">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="resetPageAndSearch"
              >查询</el-button
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="showAddOrgSetting"
              >新增</el-button
            >
            <el-button size="small" type="primary" @click="back"
              >返 回</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 页面列表 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%;text-align:center;"
          v-loading="loading4FormSearch"
        >
          <el-table-column prop="id" width="80" label="ID"></el-table-column>
          <el-table-column
            prop="orgCode"
            label="学习中心代码"
          ></el-table-column>
          <el-table-column
            prop="orgName"
            label="学习中心名称"
          ></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 width="110" label="是否可以考试">
            <span slot-scope="scope">
              <span v-if="!scope.row.examLimit">
                <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 prop="updateTime" width="155" label="更新时间">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="scope.row.examLimit"
                  size="mini"
                  type="primary"
                  plain
                  icon="el-icon-edit"
                  @click="updateExamLimit(scope.row)"
                >
                  开考
                </el-button>
                <el-button
                  v-else
                  size="mini"
                  type="primary"
                  plain
                  icon="el-icon-edit"
                  @click="updateExamLimit(scope.row)"
                >
                  禁考
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  icon="el-icon-edit"
                  @click="showUpdateOrgSetting(scope.row)"
                >
                  编辑
                </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"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

        <!-- 新增 -->
        <el-dialog
          title="新增学习中心考试设置"
          size="tiny"
          :visible.sync="addOrgSettingDialog"
        >
          <el-form
            :model="orgSetting"
            :rules="orgSettingRules"
            ref="addOrgSettingForm"
            label-position="right"
            :inline="true"
            inline-message
          >
            <el-row>
              <el-form-item label="学习中心" prop="orgId" label-width="120px">
                <el-select
                  class="select"
                  :remote-method="getOrgList4InsertOrUpdate"
                  :loading="loadingOrg4InsertOrUpdate"
                  remote
                  filterable
                  clearable
                  v-model="orgSetting.orgId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in orgList4InsertOrUpdate"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                label="考试时间"
                prop="orgSettingDatetimeRange"
                label-width="120px"
              >
                <el-date-picker
                  v-model="orgSettingDatetimeRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="是否可以考试" label-width="120px">
                <el-radio-group v-model="orgSetting.examLimit" class="input">
                  <el-radio label="true">否</el-radio>
                  <el-radio label="false">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <div style="text-align:center;">
                <el-button type="primary" @click="addOrgSetting"
                  >确 定</el-button
                >
                <el-button @click="addOrgSettingDialog = false"
                  >取 消</el-button
                >
              </div>
            </el-row>
          </el-form>
        </el-dialog>

        <!-- 修改 -->
        <el-dialog
          title="修改学习中心考试设置"
          size="tiny"
          :visible.sync="updateOrgSettingDialog"
        >
          <el-form
            :model="orgSetting"
            :rules="orgSettingRules"
            ref="updateOrgSettingForm"
            label-position="right"
            :inline="true"
            inline-message
          >
            <el-row>
              <el-form-item label="学习中心" prop="orgId" label-width="120px">
                <el-select
                  class="select"
                  :remote-method="getOrgList4InsertOrUpdate"
                  :loading="loadingOrg4InsertOrUpdate"
                  remote
                  filterable
                  clearable
                  :disabled="true"
                  v-model="orgSetting.orgId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in orgList4InsertOrUpdate"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                label="考试时间"
                prop="orgSettingDatetimeRange"
                label-width="120px"
              >
                <el-date-picker
                  v-model="orgSettingDatetimeRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="是否可以考试" label-width="120px">
                <el-radio-group v-model="orgSetting.examLimit" class="input">
                  <el-radio label="true">否</el-radio>
                  <el-radio label="false">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <div style="margin-left:30%">
                <el-button type="primary" @click="updateOrgSetting"
                  >确 定</el-button
                >
                <el-button @click="updateOrgSettingDialog = false"
                  >取 消</el-button
                >
              </div>
            </el-row>
          </el-form>
        </el-dialog>
      </div>
    </section>
  </div>
</template>

<script>
import { CORE_API, EXAM_WORK_API } from "@/constants/constants.js";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";

export default {
  components: { LinkTitlesCustom },
  data() {
    return {
      examId: null,
      loading4FormSearch: false,
      formSearch: {
        examId: null,
        orgId: ""
      },
      loadingOrg4Search: false,
      orgList4Search: [],

      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,

      orgSetting: {
        examId: null,
        orgId: null,
        beginTime: null,
        endTime: null,
        examLimit: "false",
        properties: {
          CAN_UPLOAD_ATTACHMENT: "true"
        }
      },
      orgSettingDatetimeRange: [],
      addOrgSettingDialog: false,
      updateOrgSettingDialog: false,
      orgList4InsertOrUpdate: [],
      loadingOrg4InsertOrUpdate: false,
      orgSettingRules: {
        orgId: [
          { required: true, message: "请选择学习中心", trigger: "blur,change" }
        ]
      }
    };
  },
  methods: {
    getOrgList4Search(name) {
      this.loadingOrg4Search = true;
      var url = CORE_API + "/org/query?" + new URLSearchParams({ name: name });
      this.$httpWithMsg
        .get(url)
        .then(response => {
          this.orgList4Search = response.data;
          this.loadingOrg4Search = false;
        })
        .catch(response => {
          console.log(response);
          this.loadingOrg4Search = false;
        });
    },
    getOrgList4InsertOrUpdate(name) {
      this.loadingOrg4InsertOrUpdate = true;
      var url = CORE_API + "/org/query?" + new URLSearchParams({ name: name });
      this.$httpWithMsg
        .get(url)
        .then(response => {
          this.orgList4InsertOrUpdate = response.data;
          this.loadingOrg4InsertOrUpdate = false;
        })
        .catch(response => {
          console.log(response);
          this.loadingOrg4InsertOrUpdate = false;
        });
    },
    updateExamLimit(row) {
      row.examLimit = !row.examLimit;
      let url = EXAM_WORK_API + "/exam/examOrgSettings";
      this.$httpWithMsg.post(url, row).then(response => {
        row.updateTime = response.data.updateTime;
      });
    },
    updateOrgSetting() {
      if (!this.orgSettingDatetimeRange) {
        this.orgSetting.beginTime = null;
        this.orgSetting.endTime = null;
      } else {
        this.orgSetting.beginTime = this.orgSettingDatetimeRange[0];
        this.orgSetting.endTime = this.orgSettingDatetimeRange[1];
      }

      this.$refs.updateOrgSettingForm.validate(valid => {
        if (valid) {
          let url = EXAM_WORK_API + "/exam/examOrgSettings";
          this.$httpWithMsg.post(url, this.orgSetting).then(response => {
            console.log(response);
            this.$notify({
              type: "success",
              message: "保存成功"
            });
            this.search();
            this.updateOrgSettingDialog = false;
          });
        } else {
          return false;
        }
      });
    },
    addOrgSetting() {
      if (!this.orgSettingDatetimeRange) {
        this.orgSetting.beginTime = null;
        this.orgSetting.endTime = null;
      } else {
        this.orgSetting.beginTime = this.orgSettingDatetimeRange[0];
        this.orgSetting.endTime = this.orgSettingDatetimeRange[1];
      }
      this.$refs.addOrgSettingForm.validate(valid => {
        if (valid) {
          let url = EXAM_WORK_API + "/exam/examOrgSettings";
          this.$httpWithMsg.put(url, this.orgSetting).then(response => {
            console.log(response);
            this.$notify({
              type: "success",
              message: "保存成功"
            });
            this.search();
            this.addOrgSettingDialog = false;
          });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$router.push({ path: "/examwork/examInfo" });
    },
    getCanUpload(row) {
      if (row.properties.CAN_UPLOAD_ATTACHMENT === null) {
        if (Date.now() > row.endTime) {
          return "不允许";
        } else {
          return "允许";
        }
      } else {
        return row.properties.CAN_UPLOAD_ATTACHMENT == "true"
          ? "允许"
          : "不允许";
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
    showUpdateOrgSetting(row) {
      this.orgSetting.examId = row.examId;
      this.orgSetting.beginTime = row.beginTime;
      this.orgList4InsertOrUpdate = [{ id: row.orgId, name: row.orgName }];
      this.orgSetting.orgId = row.orgId;
      this.orgSetting.endTime = row.endTime;
      this.orgSetting.examLimit = row.examLimit ? "true" : "false";
      this.orgSetting.properties.CAN_UPLOAD_ATTACHMENT =
        row.properties.CAN_UPLOAD_ATTACHMENT;
      if (row.beginTime && row.endTime) {
        this.orgSettingDatetimeRange = [row.beginTime, row.endTime];
      }
      this.updateOrgSettingDialog = true;
    },
    showAddOrgSetting() {
      this.orgSetting.examId = this.examId;
      this.orgSetting.beginTime = null;
      this.orgList4InsertOrUpdate = [];
      this.orgSetting.orgId = null;
      this.orgSetting.endTime = null;
      this.orgSetting.properties.CAN_UPLOAD_ATTACHMENT = "true";
      this.orgSettingDatetimeRange = [];
      this.addOrgSettingDialog = true;
    },

    resetPageAndSearch() {
      this.currentPage = 1;
      this.search();
    },
    search() {
      let param = new URLSearchParams(this.formSearch);
      let url =
        EXAM_WORK_API +
        "/exam/getExamOrgSettingsList/" +
        (this.currentPage - 1) +
        "/" +
        this.pageSize +
        "?" +
        param;
      this.loading4FormSearch = true;
      this.$httpWithMsg
        .get(url)
        .then(response => {
          console.log(response);
          this.tableData = response.data.list;
          this.total = response.data.total;
          this.loading4FormSearch = false;
        })
        .catch(response => {
          console.log(response);
          this.loading4FormSearch = false;
        });
    },
    init() {
      this.search();
    }
  },
  created() {
    this.examId = this.$route.params.id;
    this.formSearch.examId = this.examId;
    this.init();
  }
};
</script>
<style scoped></style>