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> -->

      <div class="search-box">
        <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> -->
            <property-tree-select
              v-model="filter.questionProperty"
              :course-id="filter.courseId"
            ></property-tree-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="toPage(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="right-btns">
          <tool-tip-btn
            name="shititongji"
            content="试题统计"
            @click="toStatistics"
          ></tool-tip-btn>
          <tool-tip-btn
            name="tixingguanli"
            content="题型管理"
            @click="toSourceDetailManage"
          ></tool-tip-btn>
        </div>
      </div>
      <!-- <div class="part-box-action"> -->
      <!-- <div> -->
      <!-- <el-button
            type="primary"
            plain
            icon="el-icon-data-analysis"
            @click="toStatistics"
            >试题统计</el-button
          > -->
      <!-- <el-button
            v-if="authButtons.includes('import_test_paper-safe')"
            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-position"
            @click="toBatchMove"
            >移动</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-copy-document"
            @click="toBatchCopy"
            >复制</el-button
          >
          <el-button
            type="danger"
            plain
            icon="el-icon-circle-close"
            @click="toBatchDelete"
            >删除</el-button
          > -->
      <!-- <el-button
            type="primary"
            plain
            icon="el-icon-folder-opened"
            @click="toAddFolder"
            >新建文件夹</el-button
          > -->
      <!-- <el-button
            v-if="!gptQuestionEnable"
            type="primary"
            icon="el-icon-circle-plus-outline"
            plain
            @click="toCreateQuestion"
            >创建试题</el-button
          >
          <el-dropdown v-if="gptQuestionEnable">
            <el-button type="primary" plain icon="el-icon-circle-plus-outline"
              >创建试题</el-button
            >
            <el-dropdown-menu slot="dropdown" class="action-dropdown">
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="toCreateQuestion"
                  >手动创建</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="toGPTQuestion"
                  >AI命题</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
      <!-- <el-button
            type="primary"
            plain
            icon="el-icon-upload2"
            @click="toImportQuestion"
            >批量导入</el-button
          > -->
      <!-- </div> -->
      <!-- </div> -->
    </div>

    <div class="folder-question">
      <div class="folder-list" :class="{ collapse: treeCollapse }">
        <question-folder
          ref="QuestionFolder"
          is-edit
          @selected="folderFilterSelected"
        ></question-folder>
      </div>
      <div class="collapse-icon-box">
        <div class="icon-circle" @click="treeCollapse = !treeCollapse">
          <i class="el-icon-arrow-right" v-if="treeCollapse"></i>
          <i class="el-icon-arrow-left" v-else></i>
        </div>
      </div>
      <div class="question-list">
        <div class="icon-btn-group">
          <!-- <svg-btn
            name="xinzeng"
            @click="toCreateQuestion"
            v-if="!gptQuestionEnable"
            >创建试题</svg-btn
          > -->
          <el-dropdown>
            <svg-btn name="xinzeng">创建试题</svg-btn>
            <el-dropdown-menu slot="dropdown" class="action-dropdown">
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="toCreateQuestion"
                  >手动创建</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  v-if="authButtons.includes('import_test_paper-ai')"
                  size="mini"
                  type="primary"
                  plain
                  @click="toGPTQuestion"
                  >AI命题</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <svg-btn name="daoru" @click="toImportQuestion">批量导入</svg-btn>

          <svg-btn name="yidong" @click="toBatchMove">移动</svg-btn>
          <svg-btn name="fuzhi" @click="toBatchCopy">复制</svg-btn>
          <svg-btn name="shanchu" @click="toBatchDelete">删除</svg-btn>
        </div>
        <el-table
          v-loading="loading"
          element-loading-text="加载中"
          :data="questionList"
          @selection-change="tableSelectChange"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <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="medium"
                  type="text"
                  class="normal"
                  @click="toEditQuestion(scope.row)"
                  >编辑</el-button
                >
                <el-dropdown>
                  <el-button type="text" size="medium" class="normal">
                    更多<i class="el-icon-arrow-down 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>
    </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>
    <!-- GptQuestionDialog -->
    <gpt-question-dialog
      ref="GptQuestionDialog"
      :course="{
        courseId: curCourse.id,
        courseCode: curCourse.code,
        courseName: curCourse.name,
      }"
      @modified="getList"
    ></gpt-question-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
import {
  // questionPageListApi,
  deleteQuestionApi,
  moveQuestionApi,
  copyQuestionApi,
  checkGptQuestionEnableApi,
  aiQuestionConfirmApi,
  classifyQuestionPageListApi,
  getAiNums,
} 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";
import GptQuestionDialog from "../components/GptQuestionDialog.vue";
import { mapActions, mapGetters } from "vuex";
import { USER_SIGNIN } from "../../portal/store/user";
import QuestionFolder from "@/modules/question/components/QuestionFolder.vue";

export default {
  name: "QuestionMamage",
  components: {
    QuestionStatisticsDialog,
    QuestionSafetySetDialog,
    QuestionFolderDialog,
    QuestionImportDialog,
    QuestionEditDialog,
    QuestionPreviewDialog,
    FolderQuestionManageDialog,
    PropertyTreeSelect,
    QuestionImportEdit,
    GptQuestionDialog,
    QuestionFolder,
  },
  data() {
    return {
      treeCollapse: true,
      filter: {
        courseId: "",
        questionType: "",
        sourceDetailId: "",
        questionBody: "",
        // questionProperty: [],
        questionProperty: [],

        classifyId: "",
        // courseId: "",
        // questionType: "",
        // sourceDetailId: "",
        // questionProperty: [],
      },
      curFolderAction: "",
      folderList: [],
      questionList: [],
      selectedQuestionIds: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      curQuestion: {},
      curFolder: {},
      curCourse: {},
      curMoveType: "",
      questionImportData: {},
      gptQuestionEnable: false,
      curActionQids: [],
      aiWarningMsg: "",
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    ...mapGetters(["authButtons"]),
  },
  mounted() {
    this.$refs.QuestionFolder.selectDefaultNode();

    this.checkGptEnable();
    this.toPage(1);
  },
  methods: {
    folderFilterSelected(folder) {
      console.log("left tree choose folder:", folder);
      if (!folder) return;

      this.curFolder = folder;
      this.filter = {
        classifyId: folder.id,
        courseId: "",
        questionType: "",
        sourceDetailId: "",
        questionProperty: [],
      };
      this.toPage(1);
    },
    ...mapActions([USER_SIGNIN]),
    async checkGptEnable() {
      const res = await checkGptQuestionEnableApi();
      // this.gptQuestionEnable = res.data;
      if (res.data) {
        let result = await getAiNums({
          rootOrgId: this.$store.state.user.rootOrgId,
        });
        if (result?.data?.leftCount == 0) {
          this.aiWarningMsg =
            "AI命题出题包已经用完，请联系教务处老师购买试题包后再出题";
        }
        console.log("result", result);
      } else {
        this.aiWarningMsg = "未开通AI命题功能，请联系教务处老师进行开通";
      }
    },
    toPage(page) {
      this.currentPage = page;
      this.getList();
    },
    async getList() {
      this.loading = true;
      this.selectedQuestionIds = [];
      let data = {
        ...this.filter,
        // pageNumber: this.currentPage,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      };
      // data.questionProperty = data.questionProperty.join();
      data.questionProperty = data.questionProperty.join();
      // const res = await questionPageListApi(data).catch(() => {});
      const res = await classifyQuestionPageListApi(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);
    },
    tableSelectChange(selections) {
      this.selectedQuestionIds = selections.map((item) => item.id);
    },
    courseChange(val) {
      this.curCourse = val || {};
    },
    toStatistics() {
      if (!this.filter.courseId) {
        this.$message.error("请先选择课程！");
        return;
      }
      // this.$refs.QuestionStatisticsDialog.open();
      this.$router.push({
        name: "QuestionTypeStatistics",
        query: {
          courseId: this.filter.courseId,
          courseName: this.curCourse.name,
        },
      });
    },
    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();
      // this.questionImportData = {
      //   importData: {
      //     courseId: 9,
      //     courseName: "化学",
      //   },
      // };
      // this.$refs.QuestionImportEdit.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.curActionQids = [row.id];
      this.curFolderAction = "move";
      this.$refs.QuestionFolderDialog.open();
    },
    toCopyQuestion(row) {
      // this.curQuestion = row;
      this.curActionQids = [row.id];
      this.curFolderAction = "copy";
      this.$refs.QuestionFolderDialog.open();
    },
    async folderSelected(folder) {
      if (folder.id === this.curFolder.id && this.curFolderAction === "move") {
        this.$message.error("内容就在当前当前文件中");
        return;
      }
      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 (this.curFolderAction === "move") {
        res = await moveQuestionApi(this.curActionQids.join(), folder.id).catch(
          () => {}
        );
      } else {
        res = await copyQuestionApi(this.curActionQids.join(), folder.id).catch(
          () => {}
        );
      }

      if (!res) return;
      this.$message.success("操作成功！");
      this.getList();
    },
    async deleteQuestion(ids) {
      this.loading = true;
      const res = await deleteQuestionApi(ids.join()).catch(() => {});
      this.loading = false;
      if (!res) return;

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

      this.deleteQuestion([row.id]);
    },
    toBatchMove() {
      if (!this.selectedQuestionIds.length) {
        this.$message.error("请选择试题！");
        return;
      }
      this.curActionQids = [...this.selectedQuestionIds];
      this.curFolderAction = "move";
      this.$refs.QuestionFolderDialog.open();
    },
    toBatchCopy() {
      if (!this.selectedQuestionIds.length) {
        this.$message.error("请选择试题！");
        return;
      }
      this.curActionQids = [...this.selectedQuestionIds];
      this.curFolderAction = "copy";
      this.$refs.QuestionFolderDialog.open();
    },
    async toBatchDelete() {
      if (!this.selectedQuestionIds.length) {
        this.$message.error("请选择试题！");
        return;
      }

      const confirm = await this.$confirm("确认删除选中试题吗?", "提示", {
        type: "warning",
      }).catch(() => {});
      if (confirm !== "confirm") return;

      this.deleteQuestion(this.selectedQuestionIds);
    },
    toRecycle() {
      this.$router.push({
        name: "QuestionRecycle",
      });
    },
    toAddFolder() {
      this.$refs.FolderQuestionManageDialog.open();
    },
    questionImported(data) {
      if (data.importType !== "word") {
        this.getList();
        return;
      }
      console.log("questionImported data", data);
      this.questionImportData = data;
      this.$refs.QuestionImportEdit.open();
    },
    async toGPTQuestion() {
      // if (this.aiWarningMsg) {
      //   this.$message.error(this.aiWarningMsg);
      //   return;
      // }
      if (!this.filter.courseId) {
        this.$message.error("请先选择课程！");
        return;
      }
      if (!this.user.aiQuestionConfirm) {
        const confirm = await this.$confirm(
          `请务必仔细阅读本协议内容，若您不同意本协议的任何内容，将无法使用该功能，AI命题功能借助AI工具来辅助出题，提高出题效率，减轻命题老师工作量，并不确保出题的正确性及适用性，请在出题后务必仔细检查核对，以免将有问题的试题加入试卷，用于考试。`,
          "提示",
          {
            type: "warning",
          }
        ).catch(() => {});
        if (confirm !== "confirm") return;
        await aiQuestionConfirmApi();
        this.USER_SIGNIN(
          Object.assign({}, this.user, { aiQuestionConfirm: true })
        );
      }

      this.$refs.GptQuestionDialog.open();
    },
  },
};
</script>
<style lang="scss" scoped>
.question-manage {
  .question-list {
    :deep(.row-question-body) {
      img {
        max-height: 100px;
        width: auto !important;
      }
    }
  }
  .collapse-icon-box {
    width: 0;
    position: relative;
    overflow: visible;
    .icon-circle {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #6d5ff6;
      position: absolute;
      left: 50%;
      top: 30px;
      transform: translateX(-50%) translateY(-50%);
      cursor: pointer;
      background-color: #6d5ff6;

      i {
        font-size: 10px;
        color: #fff;
      }
    }
  }
  .folder-question {
    min-height: calc(100vh - 306px);
  }
  .search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right-btns {
      display: flex;
      align-items: center;
    }
  }
}
</style>
<style lang="scss">
@media screen and (max-width: 1366px) {
  .question-manage {
    .part-filter-form {
      .el-form-item {
        // width: 180px !important;
      }
    }
  }
}
</style>