union-question-web/src/modules/question/components/FolderQuestionManageDialog.vue

<template>
  <div>
    <el-dialog
      :visible.sync="modalIsShow"
      title="文件夹管理"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      custom-class="folder-question-manage-dialog"
      @opened="dialogOpened"
    >
      <div class="folder-question">
        <div class="folder-list">
          <question-folder
            ref="QuestionFolder"
            is-edit
            @selected="folderFilterSelected"
          ></question-folder>
        </div>
        <div class="question-list">
          <el-form class="part-filter-form" :inline="true" :model="filter">
            <el-form-item label="课程名称">
              <course-select v-model="filter.courseId"> </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="属性">
              <property-tree-select
                v-model="filter.propertyIdList"
                :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-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
              >
            </div>
            <div></div>
          </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">
              <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="题型" 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>
      </div>

      <div slot="footer"></div>
    </el-dialog>

    <!-- QuestionEditDialog -->
    <question-edit-dialog
      ref="QuestionEditDialog"
      :question="curQuestion"
      @modified="getList"
    ></question-edit-dialog>
    <!-- QuestionPreviewDialog -->
    <question-preview-dialog
      ref="QuestionPreviewDialog"
      :question="curQuestion"
    ></question-preview-dialog>
    <!-- QuestionFolderDialog -->
    <question-folder-dialog
      ref="QuestionFolderDialog"
      :is-edit="false"
      @selected="folderSelected"
    ></question-folder-dialog>
  </div>
</template>

<script>
import {
  classifyQuestionPageListApi,
  deleteQuestionApi,
  moveQuestionApi,
  copyQuestionApi,
} from "../api";
import QuestionFolder from "./QuestionFolder.vue";
import QuestionEditDialog from "./QuestionEditDialog.vue";
import QuestionPreviewDialog from "./QuestionPreviewDialog.vue";
import QuestionFolderDialog from "./QuestionFolderDialog.vue";
import PropertyTreeSelect from "../components/PropertyTreeSelect.vue";

export default {
  name: "FolderQuestionManageDialog",
  components: {
    QuestionFolder,
    QuestionEditDialog,
    QuestionPreviewDialog,
    QuestionFolderDialog,
    PropertyTreeSelect,
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        classifyId: null,
        courseId: "",
        questionType: "",
        sourceDetailId: "",
        propertyIdList: [],
      },
      curFolderAction: "",
      questionList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      curQuestion: {},
      curActionQids: [],
      curFolder: {},
      curMoveType: "",
      selectedQuestionIds: [],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    dialogOpened() {
      this.filter = {
        classifyId: null,
        courseId: "",
        questionType: "",
        sourceDetailId: "",
        propertyIdList: [],
      };
      this.$refs.QuestionFolder.selectDefaultNode();
    },
    toPage(page) {
      this.currentPage = page;
      this.getList();
    },
    async getList() {
      this.selectedQuestionIds = [];
      this.loading = true;
      let data = {
        ...this.filter,
        curPage: this.currentPage,
        pageSize: this.pageSize,
      };
      data.propertyIdList = data.propertyIdList.join();
      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);
    },
    folderFilterSelected(folder) {
      console.log(folder);
      if (!folder) return;

      this.curFolder = folder;
      this.filter = {
        classifyId: folder.id,
        courseId: "",
        questionType: "",
        sourceDetailId: "",
        propertyIdList: [],
      };
      this.toPage(1);
    },
    toViewQuestion(row) {
      console.log(row);
      this.curQuestion = row;
      this.$refs.QuestionPreviewDialog.open();
    },
    toEditQuestion(row) {
      const courseInfo = {
        courseId: row.course.id,
        courseCode: row.course.code,
        courseName: row.course.name,
      };
      let curQuestion = {
        ...row,
        ...courseInfo,
      };
      if (curQuestion.subQuestions && curQuestion.subQuestions.length) {
        curQuestion.subQuestions = curQuestion.subQuestions.map((q) => {
          return { ...q, ...courseInfo };
        });
      }
      this.curQuestion = curQuestion;
      this.$refs.QuestionEditDialog.open();
    },
    toMoveQuestion(row) {
      this.curActionQids = [row.id];
      this.curFolderAction = "move";
      this.$refs.QuestionFolderDialog.open();
    },
    toCopyQuestion(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.curActionQids.join(), folder.id).catch(
          () => {}
        );
      } else {
        res = await copyQuestionApi(this.curActionQids.join(), 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.deleteQuestion([row.id]);
    },
    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();
    },
    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);
    },
    toAddFolder() {
      this.curFolder = { parentId: this.filter.classifyId };
      this.$refs.ModifyFolder.open();
    },
  },
};
</script>