union-question-web/src/modules/question/views/QuestionManage.vue

<template>
  <div class="content question-manage">
    <!-- 正文信息 -->
    <div class="part-box">
      <h2 class="part-box-title">题库列表</h2>

      <el-form class="part-filter-form" :inline="true" :model="filter">
        <el-form-item label="课程名称">
          <course-select v-model="filter.courseId" @change="courseChange">
          </course-select>
        </el-form-item>
        <el-form-item label="题型">
          <source-detail-select v-model="filter" :course-id="filter.courseId">
          </source-detail-select>
        </el-form-item>
        <el-form-item label="题目内容">
          <el-input
            v-model="filter.questionBody"
            placeholder="题目内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="属性">
          <property-tree-select
            v-model="filter.questionProperty"
            :course-id="filter.courseId"
          ></property-tree-select>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="toPage(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="part-box-action">
        <div>
          <el-button
            type="primary"
            plain
            icon="el-icon-data-analysis"
            @click="toStatistics"
            >试题统计</el-button
          >
          <el-button
            type="danger"
            plain
            icon="el-icon-lock"
            @click="toSafetySet"
            >安全设置</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-setting"
            @click="toSourceDetailManage"
            >题型管理</el-button
          >
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            @click="toRecycle"
            >回收站</el-button
          >
        </div>
        <div>
          <el-button
            type="primary"
            plain
            icon="el-icon-folder-opened"
            @click="toAddFolder"
            >新建文件夹</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-circle-plus-outline"
            @click="toCreateQuestion"
            >创建试题</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-upload2"
            @click="toImportQuestion"
            >批量导入</el-button
          >
        </div>
      </div>
    </div>

    <div class="part-box">
      <el-table
        v-loading="loading"
        element-loading-text="加载中"
        :data="questionList"
      >
        <el-table-column label="题干" min-width="200">
          <div slot-scope="scope" @click="toViewQuestion(scope.row)">
            <rich-text
              class="row-question-body"
              title="点击查看试题"
              :text-json="scope.row.quesBody"
            ></rich-text>
          </div>
        </el-table-column>
        <el-table-column label="课程" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.course.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题型" prop="sourceDetailName" width="100">
        </el-table-column>
        <el-table-column label="难度" prop="difficulty" width="80">
        </el-table-column>
        <el-table-column label="使用量" prop="usageAmount" width="80">
        </el-table-column>
        <el-table-column label="创建人" prop="creator" width="120">
        </el-table-column>
        <el-table-column label="创建时间" width="170" prop="creationTime">
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <div class="operate_left">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="toEditQuestion(scope.row)"
                >编辑</el-button
              >
              <el-dropdown>
                <el-button type="primary" size="mini" plain>
                  更多 <i class="el-icon-more el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="action-dropdown">
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      type="primary"
                      plain
                      @click="toMoveQuestion(scope.row)"
                      >移动</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      type="primary"
                      plain
                      @click="toCopyQuestion(scope.row)"
                      >复制</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      type="danger"
                      plain
                      @click="toDeleteQuestion(scope.row)"
                      >删除</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="part-page">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 200, 300]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="toPage"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- QuestionEditDialog -->
    <question-edit-dialog
      ref="QuestionEditDialog"
      :question="curQuestion"
      @modified="getList"
    ></question-edit-dialog>
    <!-- QuestionPreviewDialog -->
    <question-preview-dialog
      ref="QuestionPreviewDialog"
      :question="curQuestion"
    ></question-preview-dialog>
    <!-- QuestionStatisticsDialog -->
    <question-statistics-dialog
      ref="QuestionStatisticsDialog"
      :course-id="filter.courseId"
    ></question-statistics-dialog>
    <!-- QuestionSafetySetDialog -->
    <question-safety-set-dialog
      ref="QuestionSafetySetDialog"
    ></question-safety-set-dialog>
    <!-- QuestionFolderDialog -->
    <question-folder-dialog
      ref="QuestionFolderDialog"
      :is-edit="false"
      @selected="folderSelected"
    ></question-folder-dialog>
    <!-- QuestionImportDialog -->
    <question-import-dialog
      ref="QuestionImportDialog"
      @modified="questionImported"
    ></question-import-dialog>
    <!-- FolderQuestionManageDialog -->
    <folder-question-manage-dialog
      ref="FolderQuestionManageDialog"
    ></folder-question-manage-dialog>
    <!-- QuestionImportEdit -->
    <question-import-edit
      ref="QuestionImportEdit"
      :data="questionImportData"
      @modified="toPage(1)"
    ></question-import-edit>
  </div>
</template>

<script>
import {
  questionPageListApi,
  deleteQuestionApi,
  moveQuestionApi,
  copyQuestionApi,
} from "../api";
import QuestionStatisticsDialog from "../components/QuestionStatisticsDialog.vue";
import QuestionSafetySetDialog from "../components/QuestionSafetySetDialog.vue";
import QuestionFolderDialog from "../components/QuestionFolderDialog.vue";
import QuestionImportDialog from "../components/QuestionImportDialog.vue";
import QuestionEditDialog from "../components/QuestionEditDialog.vue";
import QuestionPreviewDialog from "../components/QuestionPreviewDialog.vue";
import FolderQuestionManageDialog from "../components/FolderQuestionManageDialog.vue";
import PropertyTreeSelect from "../components/PropertyTreeSelect.vue";
import QuestionImportEdit from "../components/QuestionImportEdit.vue";

export default {
  name: "QuestionMamage",
  components: {
    QuestionStatisticsDialog,
    QuestionSafetySetDialog,
    QuestionFolderDialog,
    QuestionImportDialog,
    QuestionEditDialog,
    QuestionPreviewDialog,
    FolderQuestionManageDialog,
    PropertyTreeSelect,
    QuestionImportEdit,
  },
  data() {
    return {
      filter: {
        courseId: "",
        questionType: "",
        sourceDetailId: "",
        questionBody: "",
        questionProperty: [],
      },
      curFolderAction: "",
      folderList: [],
      questionList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      curQuestion: {},
      curFolder: {},
      curCourse: {},
      curMoveType: "",
      questionImportData: {},
    };
  },
  mounted() {
    this.toPage(1);
  },
  methods: {
    toPage(page) {
      this.currentPage = page;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let data = {
        ...this.filter,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      };
      data.questionProperty = data.questionProperty.join();
      const res = await questionPageListApi(data).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.questionList = res.data.content;
      this.total = res.data.totalElements;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.toPage(1);
    },
    courseChange(val) {
      this.curCourse = val || {};
    },
    toStatistics() {
      if (!this.filter.courseId) {
        this.$message.error("请先选择课程！");
        return;
      }
      this.$refs.QuestionStatisticsDialog.open();
    },
    toSafetySet() {
      this.$refs.QuestionSafetySetDialog.open();
    },
    toSourceDetailManage() {
      if (!this.filter.courseId) {
        this.$message.error("请先选择课程！");
        return;
      }
      window.sessionStorage.setItem(
        "courseInfo",
        JSON.stringify(this.curCourse)
      );
      this.$router.push({
        name: "SourceDetailManage",
      });
    },
    toCreateQuestion() {
      if (!this.filter.courseId) {
        this.$message.error("请先选择课程！");
        return;
      }
      this.curQuestion = {
        courseId: this.curCourse.id,
        courseCode: this.curCourse.code,
        courseName: this.curCourse.name,
      };
      this.$refs.QuestionEditDialog.open();
    },
    toImportQuestion() {
      this.$refs.QuestionImportDialog.open();
    },
    toViewQuestion(row) {
      this.curQuestion = row;
      this.$refs.QuestionPreviewDialog.open();
    },
    toEditQuestion(row) {
      this.curQuestion = row;
      this.$refs.QuestionEditDialog.open();
    },
    toMoveQuestion(row) {
      this.curQuestion = row;
      this.curFolderAction = "move";
      this.$refs.QuestionFolderDialog.open();
    },
    toCopyQuestion(row) {
      this.curQuestion = row;
      this.curFolderAction = "copy";
      this.$refs.QuestionFolderDialog.open();
    },
    async folderSelected(folder) {
      let res = null;
      if (this.curFolderAction === "move") {
        res = await moveQuestionApi(this.curQuestion.id, folder.id).catch(
          () => {}
        );
      } else {
        res = await copyQuestionApi(this.curQuestion.id, folder.id).catch(
          () => {}
        );
      }

      if (!res) return;
      this.$message.success("操作成功！");
      this.getList();
    },
    async toDeleteQuestion(row) {
      const confirm = await this.$confirm("确认删除试题吗?", "提示", {
        type: "warning",
      }).catch(() => {});
      if (confirm !== "confirm") return;

      this.loading = true;
      const res = await deleteQuestionApi(row.id).catch(() => {});
      this.loading = false;

      if (!res) return;

      this.$notify({
        message: "删除成功",
        type: "success",
      });
      this.getList();
    },
    toRecycle() {
      this.$router.push({
        name: "QuestionRecycle",
      });
    },
    toAddFolder() {
      this.$refs.FolderQuestionManageDialog.open();
    },
    questionImported(data) {
      if (data.importType === "zip") {
        this.getList();
        return;
      }
      this.questionImportData = data;
      this.$refs.QuestionImportEdit.open();
    },
  },
};
</script>