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="题型">
          <question-type-select v-model="filter.quesStructType">
          </question-type-select>
        </el-form-item>
        <el-form-item label="题目内容">
          <el-input v-model="filter.content" placeholder="题目内容"></el-input>
        </el-form-item>
        <el-form-item label="属性名">
          <property-select
            v-model="filter.coursePropertyId"
            :course-id="filter.courseId"
          ></property-select>
        </el-form-item>
        <el-form-item label="一级属性">
          <property-sub-select
            v-model="filter.firstPropertyId"
            :parent-id="filter.coursePropertyId"
            data-type="first"
          ></property-sub-select>
        </el-form-item>
        <el-form-item label="二级属性">
          <property-sub-select
            v-model="filter.secondPropertyId"
            :parent-id="filter.firstPropertyId"
            data-type="second"
          ></property-sub-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
          >
        </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
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column label="题干">
          <template slot-scope="scope">
            <rich-text
              class="row-question-body"
              title="点击查看试题"
              :text-json="scope.row.quesBody"
              @click="toViewQuestion(scope.row)"
            ></rich-text>
          </template>
        </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="题型" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.questionType | questionType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="难度" width="80"> </el-table-column>
        <el-table-column label="使用量" width="80"> </el-table-column>
        <el-table-column label="创建人" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.creator }}</span>
          </template>
        </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-item>
                    <el-button
                      size="mini"
                      type="primary"
                      plain
                      @click="toLinkQuestion(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>

      <el-button type="danger" @click="toRecycle">回收站</el-button>
    </div>

    <!-- QuestionEditDialog -->
    <question-edit-dialog
      ref="QuestionEditDialog"
      :question="curQuestion"
    ></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="isEditFolder"
      @selected="folderSelected"
    ></question-folder-dialog>
    <!-- QuestionImportDialog -->
    <question-import-dialog
      ref="QuestionImportDialog"
      @modified="toPage(1)"
    ></question-import-dialog>
    <!-- ModifyFolder -->
    <modify-folder
      ref="ModifyFolder"
      :instance="curFolder"
      @modified="folderModified"
    ></modify-folder>
  </div>
</template>

<script>
import {
  questionPageListApi,
  deleteQuestionApi,
  moveQuestionApi,
  moveClassifyApi,
  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 ModifyFolder from "../components/ModifyFolder.vue";

export default {
  name: "QuestionMamage",
  components: {
    QuestionStatisticsDialog,
    QuestionSafetySetDialog,
    QuestionFolderDialog,
    QuestionImportDialog,
    QuestionEditDialog,
    QuestionPreviewDialog,
    ModifyFolder,
  },
  data() {
    return {
      filter: {
        classifyId: null,
        courseId: "",
        quesStructType: "",
        content: "",
        coursePropertyId: "",
        firstPropertyId: "",
        secondPropertyId: "",
      },
      folderList: [],
      questionList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      isEditFolder: true,
      curQuestion: {},
      curFolder: {},
      curCourse: {},
      curMoveType: "",
    };
  },
  mounted() {
    // this.toPage(1);
  },
  methods: {
    // async getFolderList() {
    //   const res = await classifyListApi(this.filter.classifyId);
    //   this.folderList = res.data || [];
    // },
    // toFolder(classifyId) {
    //   this.filter.classifyId = classifyId;
    //   this.toPage(1);
    // },
    toPage(page) {
      this.currentPage = page;
      this.getList();
    },
    async getList() {
      this.loading = true;
      const res = await questionPageListApi({
        ...this.filter,
        curPage: this.currentPage,
        pageSize: this.pageSize,
      }).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.folderList = res.data.questionClassifyResultList;
      this.questionList = res.data.questionPageResult.content;
      this.total = res.data.questionPageResult.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();
    },
    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) {
      console.log(row);
      this.curQuestion = row;
      this.$refs.QuestionPreviewDialog.open();
    },
    toEditQuestion(row) {
      console.log(row);
      // todo:编辑试题
      this.curQuestion = row;
      this.$refs.QuestionEditDialog.open();
    },
    toMoveQuestion(row) {
      this.isEditFolder = false;
      this.curMoveType = "question";
      this.curQuestion = row;
      this.$refs.QuestionFolderDialog.open();
    },
    async folderSelected(folder) {
      let res = null;
      if (this.curMoveType === "question") {
        res = await moveQuestionApi(this.curQuestion.id, folder.id).catch(
          () => {}
        );
      } else {
        res = await moveClassifyApi(this.curFolder.id, folder.id).catch(
          () => {}
        );
      }
      if (!res) return;
      this.$message.success("操作成功！");
      this.getList();
    },
    async toCopyQuestion(row) {
      console.log(row);
      const res = await copyQuestionApi(row.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((error) => {
        this.$notify({
          message: error.response.data.desc,
          type: "error",
        });
      });

      if (!res) return;

      this.$notify({
        message: "删除成功",
        type: "success",
      });
      this.getList();
    },
    toLinkQuestion(row) {
      console.log(row);
    },
    toAddFolder() {
      this.curFolder = { parentId: this.filter.classifyId };
      this.$refs.ModifyFolder.open();
    },
    // toEditFolder(row) {
    //   this.curFolder = row;
    //   this.$refs.ModifyFolder.open();
    // },
    // toMoveFolder(row) {
    //   console.log(row);
    //   this.isEditFolder = false;
    //   this.curMoveType = "folder";
    //   this.curFolder = row;
    //   this.$refs.QuestionFolderDialog.open();
    // },
    // async toDeleteFolder(row) {
    //   const confirm = await this.$confirm(`确定要删除选中的文件夹吗?`, "提示", {
    //     type: "warning",
    //   }).catch(() => {});
    //   if (confirm !== "confirm") return;

    //   if (this.loading) return;
    //   this.loading = true;
    //   const res = await deleteClassifyApi(row.id).catch(() => {});
    //   this.loading = false;
    //   if (!res) return;
    //   this.$message.success("操作成功");
    //   await this.getClassifyTree();
    // },
    folderModified() {
      this.getFolderList();
    },
    toRecycle() {
      this.$router.push({
        name: "QuestionRecycle",
      });
    },
  },
};
</script>