QuestionList.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-22 17:56:05
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-01-15 13:47:35
 * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="myBody" class="add-question flex">
    <div class="text flex">
      <div class="left">
        目前有<span>{{ questionNum || 0 }}</span
        >道题
        <!-- <span class="warn">温馨提示：发布课程前需要进行考试设置</span> -->
      </div>
      <div class="right">{{ courseName }}</div>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          >导入</el-button
        >
      </el-col>
    </el-row>

    <div class="table flex" v-loading="loading">
      <div class="th flex">
        <div class="left">序号</div>
        <div class="type">题目类型</div>
        <div class="middle">题目名称</div>
        <div class="right">操作</div>
      </div>
      <div class="td-wrapper">
        <div
          v-for="(item, index) in questionList"
          :key="item.subjectId"
          class="td flex"
        >
          <div class="left">{{ index + 1 }}</div>
          <div class="type">{{ topicTypeArr[item.topicType] }}</div>
          <div class="middle zzz">
            {{ item.topicTitle }}
          </div>
          <div class="right">
            <div>
              <el-button
                @click="edit(item.subjectId)"
                icon="el-icon-edit"
                type="text"
                >修改</el-button
              >
              <el-button
                @click="deleteLesson(item.subjectId)"
                icon="el-icon-delete"
                type="text"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="rightNum flex">

       <div class="left">录入考题</div>
      <div class="middle flex">
        <div class="left-text">答对题目大于</div>
        <div>
          <el-input
            v-model="rightNum"
            style="width: 60px"
            size="mini"
          ></el-input>
        </div>
        <div>为合格</div>
      </div>
      <div class="right">
        <el-button
          @click="saveRightNum"
          icon="el-icon-check"
          size="mini"
          type="success"
          >保存</el-button
        >
      </div>
    </div> -->

    <!-- 设备导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="
          upload.url +
          '?updateSupport=' +
          upload.updateSupport +
          '&bankId=' +
          upload.bankId
        "
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备数据-->
          <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownload(upload)"
            >下载模板</el-button
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getQuestion,
  deleteQuestion,
  changeLesson,
  getLessonById,
} from "@/api/educationPlanExam/lessonsProgram";
import { listSubject, delSubject } from "@/api/educationPlanExam/subject";
import { getBank } from "@/api/educationPlanExam/questionBank";
import { getToken } from "@/utils/auth";
export default {
  name: "AnswerLesson",
  props: {
    bankId: {
      type: Number,
    },
  },
  components: {},
  data() {
    return {
      // 当前课程的第几题，调一遍接口
      questionNum: null,
      // 答对几道题
      rightNum: 0,
      questionList: [],
      loading: false,
      courseName: "",
      // 是否显示弹出层
      open: false,
      // 设备导入参数
      upload: {
        //题库id
        bankId: 0,
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/subject/import",
      },
      queryParams: {
        bankId: 0,
      },
      topicTypeArr: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
      },
    };
  },
  // watch: {
  //   visible(newValue) {
  //     if (newValue) {
  //       this.$nextTick(() => {
  //         this.saveBody();
  //       });
  //     }
  //   },
  // },

  created() {
    console.log("this.bankId", this.bankId);
    if (this.bankId) {
      this.getQuestion({ bankId: this.bankId });
      // 获取只题目正确几题算过关
      this.getLessonById(this.bankId);
    }
  },
  methods: {
    // 文件下载处理
    handleDownload(row) {
      const a = document.createElement("a");
      a.setAttribute("download", "试题导入模板");
      a.setAttribute("target", "_blank");
      a.setAttribute(
        "href",
        "http://36.138.181.113:8091/dangerManage/profile/upload/2022/kaoshi/shitimoban.xlsx"
      );
      a.click();
    },

    /** 导入按钮操作 */
    handleImport() {
      this.upload.bankId = this.bankId;
      this.upload.title = "题目导入";
      this.upload.open = true;
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getQuestion({ bankId: this.bankId });
      // this.getList();
      this.$parent.$parent.$parent.getList();
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg);
      });
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },

    save() {
      console.log("QuestionList");
    },
    saveAndNext() {
      this.$parent.$parent.componentsNumChange(3);
    },
    getQuestion(bankId) {
      return listSubject(bankId).then((res) => {
        this.questionList = res.rows.map((item) => {
          return {
            topicType:item.topicType,
            subjectId: item.subjectId,
            topicTitle: item.topicTitle,
          };
        });
        this.questionNum = res.total;
        return true;
      });
    },
    getLessonById(bankId) {
      getBank(bankId).then((res) => {
        // console.log(res);
        // this.rightNum = res.data.qualifiedNum;
        this.courseName = res.data.bankName;
      });
    },
    edit(subjectId) {
      this.$emit("update:subjectId", subjectId);
      this.$parent.$parent.componentsNumChange(3);
    },
    deleteLesson(subjectId) {
      this.$confirm("请确定删除该题", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          return delSubject(subjectId);
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          return this.getQuestion({ bankId: this.bankId });
        })
        .finally(() => {
          this.loading = false;
          // 课程列表重置一下
          this.$parent.$parent.$parent.getList();
        });
    },
    saveRightNum() {
      if (this.rightNum > this.questionList.length) {
        this.$message({
          message: "答对题目数应小于等于考试题目总数",
          type: "warning",
        });
        return;
      }
      changeLesson({
        bankId: this.bankId,
        qualifiedNum: this.rightNum,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "答题合格数修改成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.add-question {
  width: 100%;
  height: 550px;
  // overflow: hidden;
  flex-direction: column;
  padding-bottom: 7px;
  margin-bottom: 20px;
  border-bottom: 1px solid #bbbbbb00;

  .text {
    margin-top: 13px;
    margin-bottom: 32px;
    justify-content: space-between;
    height: 28px;
    .left {
      line-height: 28px;
      color: #101010;
      font-size: 14px;
      .warn {
        display: inline-flex;
        font-size: 12px;
        color: red;
        margin-left: 10px;
      }
    }

    .right {
      width: 411px;
      line-height: 28px;
      background: #1d84ff;
      padding-right: 5px;
      color: #fff;
      text-align: right;
    }
  }
  .table {
    flex: 1;
    height: 0;

    flex-direction: column;
    .th {
      width: 100%;
      height: 70px;
      line-height: 70px;
      background: #f5f5f5;
      color: #606266;

      > div {
        height: 100%;
      }
      .left {
        width: 15%;
        text-align: center;
      }
      .type {
        width: 10%;
        text-align: center;
      }
      .middle {
        width: 50%;
        padding-left: 50px;
      }
      .right {
        width: 25%;
        text-align: center;
      }
    }
    .td-wrapper {
      flex: 1;
      overflow-y: auto;
      // 这样子元素才能有滚动条
      .td {
        height: 68px;
        line-height: 68px;
        box-sizing: border-box;
        border-bottom: 1px solid #bbbbbb;
        &:last-child {
          border-bottom: none;
        }
        > div {
          height: 100%;
        }
        .left {
          width: 15%;
          text-align: center;
        }
        .type {
          width: 10%;
          text-align: center;
        }
        .middle {
          width: 50%;
          padding-left: 50px;
        }
        .right {
          width: 25%;
          text-align: center;
        }
      }
    }
  }
  .rightNum {
    margin-top: 5px;
    height: 55px;
    box-sizing: border-box;
    border: 1px solid #bbbbbb;
    line-height: 55px;
    > .left {
      width: 140px;
      background: #0bab0c;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
    > .middle {
      > div {
        margin-right: 5px;
      }
      .left-text {
        margin-left: 10px;
      }
      .middle {
        margin-right: 20px;
      }
    }
    .right {
      margin-left: 20px;
    }
    // background: black;
  }
}
</style>