index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="考试名称" prop="courseType">
        <el-input
          v-model="queryParams.courseName"
          placeholder="请输入课程名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="考试开始时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.testStartTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        />
      </el-form-item>
      <el-form-item label="考试结束时间" prop="endTime">
        <el-date-picker
          v-model="queryParams.testEndTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="search"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetClick"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:book:add']"
          >新增</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="lessonsList">
      <el-table-column label="序号" align="center" prop="bankNum" width="55" />
      <el-table-column label="课程标题" align="center" prop="courseName" />
      <el-table-column
        label="开始时间"
        align="center"
        prop="testStartTime"
        :formatter="formatter"
      />
      <el-table-column
        label="结束时间"
        align="center"
        prop="testEndTime"
        :formatter="formatter"
      />
      <el-table-column
        label="考试题"
        align="center"
        prop="topicNum"
        width="180"
      >
        <template v-slot="{ row: { topicNum, courseId } }">
          <div class="timuNum">
            <div v-if="topicNum > 0">{{ `已录入${topicNum}题` }}</div>
            <div v-else>未录入</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="答对几题算合格"
        align="center"
        prop="qualifiedNum"
        :formatter="formatter"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template v-slot="{ row: { status, courseId, qualifiedNum } }">
          <!-- <div>{{status}}</div> -->
          <el-button
            :disabled="status == 1"
            v-if="status == 0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="checkQuestion(courseId)"
            >录入考题</el-button
          >
          <el-button
            :disabled="status == 1"
            v-if="status == 0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="changeLesson(courseId)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deletLesson(courseId)"
            >删除</el-button
          >
          <el-button
            :disabled="status == 1"
            v-if="status == 0"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="issueLesson(courseId, qualifiedNum)"
            >发布考试</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Dia
      ref="Dia"
      :componentsNum.sync="componentsNum"
      :courseId.sync="courseId"
      :visible.sync="dilogFlag"
    />
    <el-dialog title="提示" :visible.sync="issue" width="30%">
      <div>123</div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLessons,
  getLessonById,
  issue,
  deleteLesson,
  testPublish,
} from "@/api/educationPlanExam/lessonsProgram.js";
// 获取培训计划
import { getPlanList } from "@/api/educationPlanExam/trainingProgram";
import { mapGetters, mapMutations } from "vuex";

import Dia from "./components/Dia";

export default {
  name: "Book",
  components: {
    Dia,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // courseOptions: [],
      lessonsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataKind: 1,
        courseName: null,
        testStartTime: "",
        testEndTime: "",
      },
      // 表单参数
      form: {},
      // 表单校验

      dilogFlag: false,
      componentsNum: 1,
      // 点击的id，如果是新增为空
      courseId: null,
      issue: false,
    };
  },
  computed: {
    ...mapGetters(["courseOptions"]),
  },
  created() {
    // this.getPlanList();
    this.getList();
  },

  methods: {
    ...mapMutations({ setOptions: "SET_COURSE_OPTIONS" }),
    // 获取课程类别，也就是计划名称
    // getPlanList() {
    //   getPlanList().then((res) => {
    //     const courseOptions = res.data.map((item) => {
    //       return {
    //         planId: item.planId,
    //         planName: item.planName,
    //       };
    //     });
    //     // this.$store.commit("SET_COURSE_OPTIONS");
    //     this.setOptions(courseOptions);
    //   });
    // },

    /** 查询课程列表 */
    getList() {
      this.loading = true;
      getLessons(this.queryParams)
        .then((res) => {
          console.log(res);
          this.lessonsList = res.rows.map((item, index) => {
            return {
              bankNum:
                index +
                1 +
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
              ...item,
            };
          });
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    search() {
      // console.log(this.queryParams);
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.Dia.title = "新增考试试卷";
      this.componentsNum = 1;
      this.courseId = null;
      this.dilogFlag = true;
    },
    changeLesson(courseId) {
      this.$refs.Dia.title = "修改考试试卷";
      this.componentsNum = 1;
      this.courseId = courseId;
      this.dilogFlag = true;
    },

    // 直接查看考题
    checkQuestion(courseId) {
      // 要查看考题的id
      this.courseId = courseId;
      console.log(this.courseId);
      // 2代表列表组件
      this.componentsNum = 2;
      this.dilogFlag = true;
    },
    // 重置
    resetClick() {
      this.reset();
      this.getList();
    },
    // 复位
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        dataKind: 1,
        courseName: null,
        testStartTime: "",
        testEndTime: "",
      };
    },
    deletLesson(courseId) {
      this.$confirm("请确定删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return deleteLesson(courseId);
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.getList();
        })
        .catch(() => {});
    },
    // 发布
    issueLesson(courseId, qualifiedNum) {
      this.$confirm("请确定发布", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 判断是否录入答题合格数
          return getLessonById(courseId);
        })
        .then((res) => {
          if (
            res.data.singleChoiceScore > 0 &&
            res.data.multipleChoiceScore > 0 &&
            res.data.judgmentScore > 0 &&
            res.data.qualifiedNum > 0
          ) {
            return true;
          }
        })
        .then((res) => {
          if (res) {
            // 成功就发布
            // return issue({ courseId });

            return testPublish({ courseId, personnelType: 1 });
          } else {
            this.$message({
              message: "请先在题目列表录入题目分数跟合格分数",
              type: "warning",
            });
          }
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "发布成功",
              type: "success",
            });
            this.getList();
          }
        })
        .catch(() => {});
    },
    formatter(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index);
      if (!cellValue) return "-";
      else return cellValue;
    },
  },
};
</script>
<style lang="scss" scoped>
.down-load {
  color: #0bab0c;
}
.timuNum {
  color: #1d84ff;
  // cursor: pointer;
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-dialog {
  margin-top: 15vh !important;
}
</style>