SEEC-BOK-FRONTEND/src/components/QuestionCard/PrimaryQuestionCard.vue

<template>
  <el-card v-if="questionVO!==undefined" class="primary-question-card" shadow="hover">
    <template #header>
      <!--      <el-space>-->
      <el-space style="display: flex">
        <span><strong>S/N: </strong>{{ curNum + 1 }} / {{ totalNum }}</span>
        <span style="margin-left: 20px"><strong>题目类型: </strong>{{ questionVO.type }}</span>
        <span style="margin-left: 20px"><strong>知识点: </strong></span>
        <div>
          <!--知识点插槽，用于更新题目卡片中可能存在的知识点改变差异-->
          <slot name="knowledgeId">
            <!--知识点显示内容-->
            <el-tooltip
                v-if="questionVO.knowledgeId && questionVO.knowledgeId.length !== 0"
                v-for="item in questionVO.knowledgeId"
                effect="dark"
                placement="bottom">
              <template #content>
                {{ map(item) }}
              </template>
              <el-tag effect="dark" style="margin-right: 2px">{{ item }}</el-tag>
            </el-tooltip>
            <span v-else>null</span>
          </slot>
        </div>
        <el-button type="text" circle @click="isAllShow=!isAllShow"><strong>{{ isAllShowText }}</strong></el-button>
        <slot name="button">
          <!--按钮插槽，用于不同的卡片更换不同的按钮-->
          <el-button type="primary" icon="el-icon-edit" circle @click="updateQuestion"/>
          <el-button v-if="isDelete === false" type="danger" icon="el-icon-delete" circle @click="deleteQuestion"/>
          <el-button v-else type="success" icon="el-icon-delete" circle @click="recoverQuestion"/>
        </slot>
      </el-space>
      <!--      </el-space>-->
    </template>
    <!--题目内容部分-->
    <div class="primary-question-card-body">
      <!--题干部分-->
      <!--题干-题目描述部分-->
      <slot name="stem">
        <MarkdownText :raw="'<strong>题目: </strong>'+questionVO.stem"></MarkdownText>
      </slot>
      <!--题干-题目答案部分-->
      <div v-show="isAllShow">
        <!--单选题和多选题答案-->
        <slot name="choiceOption"
              v-if="questionVO.type==='choice' || questionVO.type==='multiple_choice'">
          <choice-option :question-v-o="questionVO"/>
        </slot>
        <!--todo：其他若干答案显示组件替代这里的div-->
        <div class="bQuestion-card-body-blanks" v-if="questionVO.type === 'blank'">
          <div v-for="index in Object.keys(questionVO.blanks).length">
            <div class="correct_answer">
              __{{ index }}__: {{ questionVO.blanks['__' + index + '__'] }}
            </div>
          </div>
        </div>
        <div class="bQuestion-card-body-true_false" v-if="questionVO.type === 'true_false'">
          <div class="correct_answer"> {{ questionVO.answer }}</div>
        </div>
      </div>
    </div>
    <el-divider v-show="isAllShow"></el-divider>
    <!--题目解析部分-->
    <div class="primary-question-card-analysis" v-show="isAllShow">
      <!--题目解析-题目信息部分-->
      <div class="analysis-block">
        <el-row>
          <slot name="keypoint">
            <el-col :span="6" style="text-align: left">
              <strong>关键词: </strong>{{ questionVO.keyPoints ? questionVO.keyPoints : '无' }}
            </el-col>
          </slot>
          <slot name="difficulty">
            <el-col :span="6" style="text-align: left">
              <strong>题目难度: </strong>{{ questionVO.weight }}/5
            </el-col>
          </slot>
          <slot name="tag">
            <el-col :span="12" style="text-align: left">
              <span><strong>标签: </strong></span>
              <span v-if="questionVO.tags && questionVO.tags.length !== 0">
                <el-tag v-for="(item, index) in questionVO.tags" effect="dark">
                  {{ item }}
                </el-tag>
              </span>
              <span v-else>
              <span><el-tag effect="dark">无</el-tag></span>
            </span>
            </el-col>
          </slot>
        </el-row>
      </div>
      <!--题目解析-正确答案-->
      <div class="analysis-block" style="text-align: left">
        <!--单选、多选、判断、简单-->
        <slot name="answer1"
              v-if="questionVO.type === 'choice' ||
                questionVO.type === 'multiple_choice' ||
                questionVO.type === 'true_false' ||
                questionVO.type === 'short_answer'">
          <MarkdownText :raw="'<strong>正确答案: </strong>'+questionVO.answer"></MarkdownText>
        </slot>
        <!--todo: 简答-->
      </div>
      <!--题目解析-解析部分-->
      <div class="analysis-block" style="text-align: left">
        <!--单选、多选、判断-->
        <slot name="analysis1"
              v-if="questionVO.type === 'choice' ||
              questionVO.type === 'multiple_choice' ||
              questionVO.type === 'true_false'">
          <MarkdownText :raw="'<strong>解析: </strong>'+questionVO.analysis"></MarkdownText>
        </slot>
        <!--填空-->
        <div v-if="questionVO.type === 'blank' && questionVO.analysis.length > 5">
          <MarkdownText :raw="'<strong>解析: </strong>'+questionVO.analysis"></MarkdownText>
        </div>
        <!--简答-->
        <div v-if="questionVO.type === 'short_answer' && questionVO.analysis.length > 5">
          <MarkdownText :raw="'<strong>解析: </strong>'+questionVO.analysis"></MarkdownText>
        </div>
      </div>
    </div>
    <el-divider v-show="isAllShow"></el-divider>
    <!--题目操作记录部分-->
    <div class="primary-question-card-record" v-show="isAllShow">
      <!--题目当前状态-->
      <div class="record-block">
        <el-row>
          <el-col :span="3">
            <div><strong>状态: </strong>{{ questionVO.state }}</div>
          </el-col>
          <el-col :span="5">
            <div><strong>审核人: </strong>{{ checkedUserName }}</div>
          </el-col>
        </el-row>
      </div>
      <!--题目历史操作记录-->
      <div class="record-block" v-if="recordList.length !== 0">
        <el-table :data="recordTable" style="width: 100%;background-color: transparent" height="100">
          <el-table-column prop="序号" label="序号" width="240"/>
          <el-table-column prop="操作时间" label="操作时间" width="320"/>
          <el-table-column prop="操作人" label="操作人" width="240"/>
          <el-table-column prop="操作类型" label="操作类型" width="240"/>
          <el-table-column prop="备注" label="备注"/>
        </el-table>
      </div>
      <div class="record-block" v-else>
        <p>No Record!</p>
      </div>
    </div>
  </el-card>

  <!--  <el-drawer-->
  <!--    title="更新题目"-->
  <!--    :before-close="handleClose"-->
  <!--    v-model="dialog"-->
  <!--    direction="rtl"-->
  <!--    custom-class="question-drawer"-->
  <!--    ref="drawer"-->
  <!--    size="35%"-->
  <!--  >-->
  <!--    <QuestionUpdater :question="questionVO" @closeDialog="closeDialog"/>-->
  <!--  </el-drawer>-->

</template>

<script>
import MarkdownText from "@/components/MarkdownText";
import {map} from "@/utils/knowledgeMapper";
import {toMyDate} from "@/utils/dateConvertor";
import QuestionUpdater from "@/components/QuestionUpdater";
import store from "@/store";
import ChoiceOption from "@/components/QuestionCard/AnswerDisplay/ChoiceDisplay/index";
import {ElDivider} from "element-plus";
import {h, resolveComponent} from "vue";

export default {
  name: "PrimaryQuestionCard",
  components: {
    MarkdownText,
    QuestionUpdater,

    ChoiceOption,
  },
  props: {
    questionVO: Object,
    curNum: Number,
    totalNum: Number,
  },
  data() {
    return {
      isAllShow: false,
      isAllRecord: false,
      isDelete: false,
      dialog: false,
      checkedUserName: '',
      recordList: [],
      recordNameDict: {},

      spacer: h(ElDivider, {direction: 'vertical'})
    }
  },
  methods: {
    toMyDate,
    map,
    expand() {
      if (!this.isAllShow) {
        this.isAllShow = true;
      }
    },
    withdraw() {
      if (this.isAllShow) {
        this.isAllShow = false;
      }
    },
    updateQuestion() {
      this.$emit("update");
    },
    handleClose() {
      this.$confirm('此操作将丢失填写信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialog = false;
      })
    },
    closeDialog() {
      this.dialog = false;
    },
    deleteQuestion() {
      this.$confirm('此操作将删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.questionVO.lastModifiedTime = new Date();
        this.questionVO.state = "DELETING";
        let record = {
          userId: store.state.user.id,
          operationType: "Delete",
        }
        this.$api.updateQuestion(this.questionVO)
            .then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.isDelete = true;
              record.questionId = res.data.result.id;
              record.time = new Date();
              this.$api.createRecord(record)
                  .then(res1 => {
                    console.log(res1);
                  }).catch(err1 => {
                console.log(err1);
              })
            }).catch(error => {
          console.log(error);
          this.$notify.error({
            title: '错误',
            message: '删除失败'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    recoverQuestion() {
      alert("Delete successfully!");
    },

  },
  computed: {
    reversedRecordList() {
      return this.recordList.reverse();
    },
    recordTable() {
      let recordTable1 = [];
      let length = this.recordList.length;
      for (let i = 0; i < length; i++) {
        let recordDict = {};
        recordDict["序号"] = i + 1;
        recordDict["操作时间"] = this.toMyDate(this.recordList[length - i - 1].time);
        recordDict["操作人"] = this.recordNameDict[this.recordList[length - i - 1].userId];
        recordDict["操作类型"] = this.recordList[length - i - 1].operationType;
        recordDict["备注"] = this.recordList[length - i - 1].remark;
        recordTable1.push(recordDict);
      }
      return recordTable1;
    },

    isAllShowText() {
      return this.isAllShow ? "收起" : "展开";
    },
  },
  mounted() {
    if (this.questionVO.checkedUserId) {
      this.$api.getUserById(this.questionVO.checkedUserId) // 异步函数1：根据用户ID获得用户名称
          .then(res => {
            if (res.data.result.name) {
              this.checkedUserName = res.data.result.name;
            }
          }).catch(err => {
        console.log(err);
      })
    }

    this.$api.getRecordByQid(this.questionVO.id) // 异步函数2：根据题目id获得ope_record
        .then(res1 => {
          let tempList = res1.data.result.content;
          this.recordList = tempList;
          for (let record of tempList) { //这里换成this.recordList是没问题的
            if (!this.recordNameDict[record.userId]) {
              this.$api.getUserById(record.userId) //异步函数3：根据记录中的用户ID获得其name
                  .then(res2 => {
                    if (res2.data.result.name) {
                      this.recordNameDict[record.userId] = res2.data.result.name;
                    }
                  }).catch(err2 => {
                console.log(err2);
              })
            }
          }
        }).catch(err1 => {
      console.log(err1);
    });
  },
  emits: ["update"],
}
</script>

<style>
.primary-question-card {
  margin: 20px;
  font-size: 18px;
  background-color: #eef7f2;
}

.primary-question-card-body {
  text-align: left;
  /*margin-left: 32px;*/
  font-size: 20px;
  font-family: "Songti SC";
}

p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.bQuestion-card-body-options {
  margin-top: 10px;
  font-size: 18px;
}

.underline-correct-answer {
  font-family: "Kaiti SC";
  font-size: 22px;
  color: #f1939c;
  font-weight: bold;
  text-decoration: underline;
}

.correct_answer {
  font-family: "Kaiti SC";
  font-size: 21px;
  color: #f1939c;
  font-weight: bold;
}

.analysis-block {
  /*margin-bottom: 10px;*/
}

.fail-check-option {
  padding: 5px;
  width: 100%;
}

.record-block {
  margin-bottom: 10px;
}

</style>