union-question-web/src/modules/paper/components/SelectQuestionDialog.vue

<template>
  <el-dialog
    class="select-question-dialog"
    :visible.sync="modalIsShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    fullscreen
    @open="visibleChange"
  >
    <div slot="title" class="box-justify">
      <h3>选择试题</h3>
      <el-button size="mini" type="primary" @click="confirm">确定</el-button>
    </div>

    <el-tabs
      v-model="tabType"
      class="part-box"
      type="card"
      @tab-click="tabChange"
    >
      <el-tab-pane name="1">
        <span slot="label">试题筛选</span>

        <div class="part-filter">
          <div class="part-filter-form">
            <el-form class="part-filter-form" :inline="true" :model="filter">
              <el-form-item label="题型">
                <source-detail-select
                  v-model="filter"
                  :course-id="filter.courseId"
                  :disabled="disabledSourceDetail"
                >
                </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>
        </div>

        <el-table :data="questions">
          <el-table-column
            width="60"
            type="index"
            :index="indexMethod"
            label="编号"
          >
          </el-table-column>
          <el-table-column label="题干">
            <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="160" fixed="right">
            <div v-if="!scope.row.disabled" slot-scope="scope">
              <el-button
                v-if="scope.row.selected"
                size="mini"
                type="danger"
                @click="toDelete(scope.row)"
              >
                删除
              </el-button>
              <el-button
                v-else
                size="mini"
                type="primary"
                plain
                @click="toSelect(scope.row)"
              >
                添加
              </el-button>
            </div>
          </el-table-column>
        </el-table>

        <div class="part-page">
          <el-pagination
            background
            :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"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          <span>已选试题</span>
          <span class="color-primary">({{ curSelectedQuestions.length }})</span>
        </span>

        <el-table :data="curSelectedQuestions" border>
          <el-table-column width="60" type="index" label="编号">
          </el-table-column>
          <el-table-column label="题干">
            <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="200">
            <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="160" fixed="right">
            <div slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="toDeleteSelected(scope.row)"
              >
                删除
              </el-button>
            </div>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer"></div>

    <question-preview-dialog
      ref="QuestionPreviewDialog"
      :topic="curQuestion"
    ></question-preview-dialog>
  </el-dialog>
</template>

<script>
import QuestionPreviewDialog from "../../question/components/QuestionPreviewDialog";
import PropertyTreeSelect from "../../question/components/PropertyTreeSelect.vue";
import { questionPageListApi } from "../../question/api";
import { deepCopy } from "@/plugins/utils";

export default {
  name: "SelectQuestionDialog",
  components: { QuestionPreviewDialog, PropertyTreeSelect },
  props: {
    courseId: {
      type: [String, Number],
      default: "",
    },
    sourceDetail: {
      type: Object,
      default() {
        return {
          questionType: "",
          sourceDetailId: "",
        };
      },
    },
    disabledSourceDetail: {
      type: Boolean,
      default: false,
    },
    selectedQuestionIds: {
      type: Array,
      default() {
        return [];
      },
    },
    disabledQuestionIds: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        courseId: "",
        questionType: "",
        sourceDetailId: "",
        questionBody: "",
        questionProperty: [],
      },
      tabType: "1",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      questions: [],
      curSelectedQuestions: [],
      curSelectedQuestionIds: [],
      curQuestion: {},
    };
  },
  methods: {
    initData() {
      this.filter = Object.assign({}, this.filter, {
        courseId: this.courseId,
        questionType: this.sourceDetail.questionType,
        sourceDetailId: this.sourceDetail.sourceDetailId,
      });

      this.curSelectedQuestions = [];
      this.curSelectedQuestionIds = [];
      this.toPage(this.currentPage);
    },
    visibleChange() {
      this.initData();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      let data = {
        ...this.filter,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      };
      data.questionProperty = data.questionProperty.join();
      const res = await questionPageListApi(data).catch(() => {});
      this.questions = res.data.content.map((item) => {
        return {
          ...item,
          selected: this.curSelectedQuestionIds.includes(item.id),
          disabled: this.disabledQuestionIds.includes(item.id),
        };
      });
      this.total = res.total;
    },
    indexMethod(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1;
    },
    toPage(val) {
      this.currentPage = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    tabChange(val) {
      if (val.name === "1") {
        this.questions.forEach((item) => {
          item.selected = this.curSelectedQuestionIds.includes(item.id);
        });
      }
    },
    toViewQuestion(row) {
      this.curQuestion = row;
      this.$refs.QuestionPreviewDialog.open();
    },
    toSelect(row) {
      row.selected = true;
      this.curSelectedQuestions.push({ ...row });
      this.updateSelectedQuestionIds();
    },
    toDelete(row) {
      row.selected = false;
      this.toDeleteSelected(row);
    },
    toDeleteSelected(row) {
      const pos = this.curSelectedQuestions.findIndex(
        (item) => item.id === row.id
      );
      this.curSelectedQuestions.splice(pos, 1);

      this.updateSelectedQuestionIds();
    },
    updateSelectedQuestionIds() {
      this.curSelectedQuestionIds = this.curSelectedQuestions.map(
        (item) => item.id
      );
    },
    confirm() {
      this.$emit("confirm", deepCopy(this.curSelectedQuestions));
      this.cancel();
    },
  },
};
</script>