frontend-admin/src/features/examwork/ExamManagement/ExamManagement.vue

<template>
  <div class="exam-management">
    <div class="part-box-head">
      <div class="part-box-head-left"><h1>批次管理</h1></div>
    </div>
    <div class="part-filter">
      <div class="part-filter-form">
        <el-form :model="form" inline>
          <el-form-item label="批次名称">
            <el-input
              v-model.trim="form.name"
              placeholder="输入批次名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <ExamTypeSelect v-model="form.mode"></ExamTypeSelect>
          </el-form-item>
          <el-form-item label="状态">
            <StateSelect v-model="form.enableState"></StateSelect>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleCurrentChange(0)"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div class="part-filter-form-action">
          <el-button type="primary" icon="icon icon-add" @click="add"
            >新增</el-button
          >
          <el-button type="primary" icon="icon icon-copy" @click="copy"
            >复制</el-button
          >
        </div>
      </div>
    </div>

    <el-table ref="table" :data="tableData">
      <el-table-column type="selection" width="42" />
      <el-table-column width="100" label="ID">
        <span slot-scope="scope">{{ scope.row.id }}</span>
      </el-table-column>
      <el-table-column width="200" label="批次编码">
        <span slot-scope="scope">{{ scope.row.code }}</span>
      </el-table-column>
      <el-table-column width="200" label="批次名称">
        <span slot-scope="scope">{{ scope.row.name }}</span>
      </el-table-column>
      <el-table-column label="模式">
        <span slot-scope="scope">{{ scope.row.mode | modeFilter }}</span>
      </el-table-column>
      <el-table-column width="120" label="状态">
        <span slot-scope="scope">{{
          scope.row.enable | zeroOneEnableDisableFilter
        }}</span>
      </el-table-column>
      <el-table-column width="100" label="开始时间">
        <span slot-scope="scope">{{
          scope.row.startTime | datetimeFilter
        }}</span>
      </el-table-column>
      <el-table-column width="100" label="结束时间">
        <span slot-scope="scope">{{ scope.row.endTime | datetimeFilter }}</span>
      </el-table-column>
      <el-table-column width="100" label="监考状态">
        <span slot-scope="scope">{{
          scope.row.monitorStatus | monitorStatusFilter
        }}</span>
      </el-table-column>
      <el-table-column width="100" label="算分进度">
        <span slot-scope="scope">
          <div class="text-center">{{ scope.row.progress }}%</div>
          <el-progress
            type="line"
            :show-text="false"
            :stroke-width="12"
            :percentage="scope.row.progress"
          ></el-progress
        ></span>
      </el-table-column>
      <el-table-column width="120" label="更新人">
        <span slot-scope="scope">{{ scope.row.updateName }}</span>
      </el-table-column>
      <el-table-column width="100" label="更新时间">
        <span slot-scope="scope">{{
          scope.row.updateTime | datetimeFilter
        }}</span>
      </el-table-column>
      <el-table-column :context="_self" label="操作" width="210" fixed="right">
        <div slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="toggleEnableExam(scope.row)"
          >
            {{ !scope.row.enable | booleanEnableDisableFilter }}
          </el-button>
          <el-button size="mini" type="primary" plain @click="edit(scope.row)">
            编辑
          </el-button>
          <div class="mb-2"></div>
          <el-button
            size="mini"
            type="primary"
            plain
            @click="editActivities(scope.row)"
            v-if="scope.row.mode === 'TOGETHER'"
          >
            场次设置
          </el-button>
          <span v-if="scope.row.mode === 'TOGETHER'" class="ml-2"></span>
          <el-badge
            :value="scope.row.scoreStatus === 'NEED_CALCULATE' ? 'new' : ''"
          >
            <el-button
              size="mini"
              type="primary"
              @click="reCalcBtn(scope.row)"
              plain
              :loading="scope.row.scoreStatus === 'CALCULATING'"
            >
              {{
                scope.row.scoreStatus === "CALCULATING"
                  ? "正在算分"
                  : "重新算分"
              }}
            </el-button>
          </el-badge>
          <el-button
            size="mini"
            type="primary"
            plain
            @click="syncExam(scope.row)"
            >同步</el-button
          >
        </div>
      </el-table-column>
    </el-table>
    <div class="part-page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200, 300]"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
    <CopyExamDialog ref="theDialog" :exam="selected" @reload="searchForm" />
  </div>
</template>

<script>
import StateSelect from "@/components/StateSelect";
import ExamTypeSelect from "@/components/ExamTypeSelect";
import {
  searchExams,
  toggleEnableExam,
  reCalcExam,
  syncCloudMarkExam,
} from "@/api/examwork-exam";
import CopyExamDialog from "./CopyExamDialog";

export default {
  name: "ExamManagement",
  components: {
    StateSelect,
    ExamTypeSelect,
    CopyExamDialog,
  },
  data() {
    return {
      form: {
        orgId: "",
        roleCode: "",
        loginName: "",
        name: "",
        enableState: null,
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      selected: null,
    };
  },
  created() {
    this.searchForm();
  },
  // activated() {
  //   console.log("im activated");
  // },
  // deactivated() {
  //   console.log("im deactivated");
  // },
  beforeRouteEnter(to, from, next) {
    if (from.name === "ExamEdit") {
      next((vm) => vm.$nextTick(() => vm.searchForm()));
    } else {
      next();
    }
  },
  methods: {
    async searchForm() {
      const res = await searchExams({
        enable: this.form.enableState,
        name: this.form.name,
        mode: this.form.mode,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
      if (this.total > 0 && this.tableData.length === 0) {
        this.handleCurrentChange(this.currentPage - 1);
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchForm();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.searchForm();
    },
    add() {
      this.$router.push("/exam/edit/");
    },
    edit(exam) {
      this.$router.push("/exam/edit/" + exam.id);
    },
    async toggleEnableExam(exam) {
      await toggleEnableExam({
        id: exam.id,
        enable: exam.enable === 0 ? 1 : 0,
      });
      this.searchForm();
    },
    async copy() {
      let rows = this.$refs.table.selection;
      if (rows.length !== 1) {
        this.$notify({
          type: "warning",
          title: rows.length === 0 ? "请选择一个批次" : "请仅选择一个批次",
        });
        return;
      }
      this.selected = rows[0];
      this.$refs.theDialog.openDialog();
    },
    editActivities(exam) {
      window.sessionStorage.setItem(
        "examInfo",
        JSON.stringify({ examName: exam.name, examCode: exam.code })
      );
      this.$router.push({
        name: "ActivityManagement",
        params: { examId: exam.id },
      });
    },
    reCalcBtn(exam) {
      this.$confirm(
        `<div>批次ID：${exam.id}</div><div>批次名称：${exam.name}</div>`,
        "是否重新计算该批次成绩?",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          reCalcExam(exam.id);
          this.$message({
            type: "success",
            message: "重新算分任务已启动!",
          });
        })
        .catch(() => {});
    },
    async syncExam(exam) {
      await syncCloudMarkExam({
        examId: exam.id,
        yunMarkExamId: exam.yunMarkExamId,
      });
      this.$message.success("操作成功！");
    },
  },
};
</script>