@focus-teach/ui 1.0.0

package/.history/packages/exam-detail/src/index_20230613153022.vue

@@ -0,0 +1,546 @@
+<!--右侧抽屉-->
+<template>
+    <ft-drawer>
+        <ft-exam-header :currentPaperItem="currentPaperItem" :mainTitle="mainTitle" @goBack="goBack"></ft-exam-header>
+      <!--   选择全部    -->
+      <div
+        class="question-quote-all"
+        v-show="!loadingBankData && !loadingError && itemInfoList.length > 0"
+      >
+        <div
+          :class="
+            isAddAll ? 'quote-all-question' : 'quote-all-question-disable'
+          "
+          @click="addPaperAllQuestion"
+        >
+          <i class="icon-add" style="margin-right: 4px"></i>
+          {{ i18n.xuanZeQuanBu }}
+        </div>
+      </div>
+      <div v-for="(item, index) in haveTitleCategory" :key="'item' + index">
+        <div class="module-title-box">
+          <div class="module-title-type">
+            <div class="title-name">
+              {{ numberMap.get(index) }}、{{
+                item && item.titleType
+                  ? item.titleType.itemCategoryName
+                  : ""
+              }}
+            </div>
+          </div>
+        </div>
+
+        <ft-exam-question
+          v-for="(subItem, subIndex) in item.subItemList"
+          :key="'subItem' + subIndex"
+          :itemInfo="subItem"
+          :itemId="subItem.itemId"
+          :itemType="subItem.itemType"
+          :itemFromType="subItem.itemFromType"
+          :difficultyId="subItem.difficultyId"
+          :subIndex="subIndex"
+          :titleDesc="subItem.titleDesc"
+          :allItemList="allItemList"
+          :difficults="difficults"
+          :currentItemList="itemsList"
+          :pointNames="subItem.pointNames || '--'"
+          :klNames="subItem.klNames || '--'"
+          :skill="subItem.basicSkillNames || '--'"
+          :answer="subItem.answer || '--'"
+          :analysis="subItem.analysis || '--'"
+          @seeAnswerAnalysis="seeAnswerAnalysis"
+          @choiceOrRemoveQuestion="choiceOrRemoveQuestion"
+          :fromType ='fromPageType'
+          :variantList="itemList"
+        >
+        </ft-exam-question>
+        
+      </div>
+    </ft-drawer>
+</template>
+<script>
+import { Loading, Message } from "element-ui";
+import {
+  getExamInfo,
+  quotePaperQuestion,
+  getItemType,
+  getQuestion,
+  getAnswer,
+} from "../../../api/index";
+import changeNumber from "../../../utils/changNumber";
+import { getUrlKey } from "../../../utils/common";
+
+export default {
+  name: "FtExamDetail",
+  // import引入的组件需要注入到对象中才能使用
+  components: {
+    [Loading.name]: Loading
+  },
+  props: {
+    //请求的参数，包含了当前所选择的信息
+    currentIndexParam: {
+      type: Object,
+      require: true,
+    },
+    //点击的当前试卷
+    currentPaperItem: {
+      type: Object,
+      default: [],
+    },
+    itemList:{
+      type: Array,
+      default:[]
+    },
+    difficults:{
+      type: Array | Object | String
+    },
+    mainItemId:{
+      type:String,
+      default:''
+    },
+    fromType:{
+      typeof:String,
+      default:''
+    },
+    i18n:{
+        type:Object
+    }
+  },
+  data() {
+    // 这里存放数据
+    return {
+      numberMap: null,
+      //首次请求
+      isLoading: true,
+      //是否正在加载题目数据
+      loadingBankData: false,
+      //加载题目数据是否失败
+      loadingError: false,
+      //题目数据集合
+      itemInfoList: [],
+      //分页信息
+      pageInfo: {},
+      //接口请求参数
+      requestParam: {},
+      currPage: 0, //当前页面
+      loading: false,
+      mainTitle: "",
+      itemsList: [], //左侧题目集合
+      paperIdsList: [], //右侧试卷题库的题目id集合
+      allTitleType: [], //题目类别接口的数据
+      recordCategory: {}, //记录题目类别的id的键值对 ，类别id : 序号 ,用于在questionTypeOrder找到不同题目类别的index
+      questionTypeOrder: [], //整理后的一个对象数组
+      allItemList: [], //所有的题目信息
+      isAddAll: true, // true：全部引用 || false：非全部引用
+      isCheckingStatus: false, //是否正在检查按钮状态
+      fromPageType: '', //来源类型
+    };
+  },
+  //监控data中的数据变化
+  watch: {
+    itemList: function (n, o) {
+      console.log('jiantingitemlist')
+      this.itemsList = n;
+      console.log(this.itemsList)
+      this.judgeButtonStatus();
+    },
+    paperIdsList: function (n, o) {
+      this.paperIdsList = n;
+      console.log('paperQuestionsIdList',this.paperIdsList)
+      this.judgeButtonStatus();
+    },
+    haveTitleCategory(){
+        console.log(this.haveTitleCategory);
+    }
+  },
+  computed: {
+    //有题目数据的类型,用于实际的渲染
+    haveTitleCategory() {
+      return this.questionTypeOrder.filter((item) => {
+        return item.subItemList.length != 0;
+      });
+    },
+  },
+  methods: {
+       //选题 || 移除
+    choiceOrRemoveQuestion(itemInfo,isAdd) {
+        this.$emit("choiceOrRemoveQuestion",itemInfo,isAdd)
+    },
+    goBack() {
+      let dic = {
+        activeIndex: 3,
+      };
+      this.$emit("eventbus-emit","changeDrawerType","changeDrawerType",JSON.stringify(dic))
+    },
+    seeAnswerAnalysis(itemInfo) {
+      let currentItem = {};
+      this.haveTitleCategory.forEach((item) => {
+        let res = item.subItemList.find(
+          (temp) => temp.itemId == itemInfo.itemId
+        );
+        if (res) currentItem = res;
+      });
+      getAnswer(
+        {
+          itemId: itemInfo.itemId,
+          itemBankType: 4,
+          itemSourceType: itemInfo.itemSourceType,
+          rootSourceId: itemInfo.rootItemSourceId,
+        },
+        (res) => {
+          if (!res) {
+            return;
+          }
+          if (typeof res === "string") res = JSON.parse(res);
+          if (res.code == 0) {
+            //取出答案与解析
+            this.$set(currentItem, "pointNames", res.value.pointNames);
+            this.$set(currentItem, "klNames", res.value.klNames);
+            this.$set(currentItem, "answer", res.value.correctAnswer);
+            this.$set(
+              currentItem,
+              "basicSkillNames",
+              res.value.basicSkillNames
+            );
+            if (
+              (res.value.itemType == 3 || res.value.itemType == 6) &&
+              res.value.correctAnswer &&
+              res.value.correctAnswer.length > 0
+            ) {
+              getQuestion({ itemId: res.value.correctAnswer }, (res) => {
+                if (!res) {
+                  return;
+                }
+                if (typeof res === "string") res = JSON.parse(res);
+                //取出题目数据
+                this.$set(currentItem, "answer", res.data);
+              });
+            } else if (res.value.itemType == 7) {
+              //组合单选题
+              var answerArr = res.value.correctAnswer.split(",");
+              var fiveArr = [], tempStr = ""; //将组合单选题答案五五放到一个数组展示
+                answerArr && answerArr.length && answerArr.map(function (item, idx) {
+                  if (idx % 5 !== 0 || idx == 0) {
+                    tempStr += item;
+                  } else {
+                    fiveArr.push(tempStr);
+                    tempStr = item;
+                  }
+                  if (idx == answerArr.length - 1) {
+                    fiveArr.push(tempStr);
+                  }
+                });
+              this.$set(currentItem, "answer", fiveArr.join("；"));
+            } else {
+              this.$set(currentItem, "answer", res.value.correctAnswer);
+            }
+            if (res.value.itemAnalysis && res.value.itemAnalysis.length > 0) {
+              getQuestion({ itemId: res.value.itemAnalysis }, (res) => {
+                if (!res) {
+                  return;
+                }
+                //取出题目数据
+                this.$set(currentItem, "analysis", res.data);
+              });
+            }
+          }
+        }
+      );
+    },
+    /*
+     **请求题库数据
+     * 筛选条件时请求
+     */
+    requestBankData() {
+      let _this = this;
+      _this.loadingError = false;
+      _this.loadingBankData = true;
+      _this.loading = true;
+      _this.asyncGetUserOperateDataInfoForBankData();
+    },
+    //筛选条件时请求获取用户信息
+    async asyncGetUserOperateDataInfoForBankData() {
+      let _this = this;
+      let dom = document.getElementById("wrong-detail-drawer-slot-id");
+      let loadingInstance = Loading.service({
+        target: dom,
+        text: _this.i18n.jiaZaiZhong,
+      });
+      var examInfo = await getExamInfo(_this.requestParam);
+      if (examInfo && examInfo.code == 0) {
+        _this.loadingBankData = false;
+        _this.loading = false;
+        this.$nextTick(() => {
+          // 以服务的方式调用的 Loading 需要异步关闭
+          loadingInstance.close();
+        });
+        //将所有试卷题目id数据存在
+        var itemIdList = examInfo.value && examInfo.value.itemList && examInfo.value.itemList.length && examInfo.value.itemList
+          .map((item) => {
+            return item.itemId;
+          })
+          .join(",")
+          .split(",");
+          console.log('savePaperQuestionsIdList',itemIdList)
+        // _this.$store.commit("savePaperQuestionsIdList", itemIdList);
+        _this.paperIdsList = itemIdList
+        //取出题目数据
+        _this.loadingError = false;
+        _this.mainTitle = examInfo.value.exam.resourceName;
+        //如果是从编辑状态进入，为保持之前的顺序allTitleType从layout中获取，否则getItemType接口获取
+        // if (
+        //   examInfo.value.layoutJson &&
+        //   examInfo.value.layoutJson.titleCategory &&
+        //   examInfo.value.layoutJson.titleCategory.length != 0
+        // ) {
+        //   _this.allTitleType = examInfo.value.layoutJson.titleCategory;
+        // } else {
+        //   let categoryRes = await getItemType({ subjectId: _this.subjectId });
+        //   if (categoryRes.code == 0) {
+        //     _this.allTitleType = categoryRes.value;
+        //   }
+        // }
+        //
+        if (
+          examInfo.value.layoutJson &&
+          examInfo.value.layoutJson.haveDataTitleCategory &&
+          examInfo.value.layoutJson.haveDataTitleCategory.length != 0
+        ) {
+          _this.allTitleType = examInfo.value.layoutJson.haveDataTitleCategory;
+        }
+        let categoryRes = await getItemType({ subjectId: _this.subjectId });
+        if (categoryRes.code == 0) {
+          if (_this.allTitleType && _this.allTitleType.length > 0) {
+            let itemCategoryIdArr = _this.allTitleType && _this.allTitleType.length && _this.allTitleType.map((obj) => {
+              return obj.itemCategoryId;
+            });
+            categoryRes.value.forEach((element) => {
+              if (itemCategoryIdArr.indexOf(element.itemCategoryId) < 0) {
+                _this.allTitleType.push(element);
+              }
+            });
+          } else {
+            _this.allTitleType = categoryRes.value;
+          }
+        }
+        //
+        _this.allTitleType.forEach((item, i) => {
+          _this.$set(_this.questionTypeOrder, i, {
+            titleType: item,
+            subItemList: [],
+          });
+          _this.recordCategory[
+            (_this.recordCategory[item.itemCategoryId] = i)
+          ] = item.itemCategoryId;
+        });
+        //设置subitemlist的数据
+        _this.handelShowTitle(examInfo.value.itemList);
+      } else {
+        //请求题目数据报错
+        _this.loadingError = true;
+        _this.itemInfoList = [];
+      }
+    },
+    // 将请求获取到的itemList处理成需要的数据格式,主要目的是为了加上titleDesc
+    handelShowTitle(itemList) {
+      this.itemInfoList = itemList;
+      this.itemInfoList.forEach((item) => {
+        let index = this.recordCategory[item.categoryId];
+        if (index > -1 && index < this.questionTypeOrder.length) {
+          this.questionTypeOrder[index].subItemList.push(item);
+        }
+      });
+      this.filterItemList();
+      this.questionTypeOrder.forEach((item) => {
+        return item.subItemList.forEach((subitem) => {
+          return getQuestion({ itemId: subitem.itemFileId }, (res) => {
+            this.$set(subitem, "titleDesc", res.data);
+          });
+        });
+      });
+    },
+    // 获取所有大题类型下的题目，组成一个数组，过滤出其中的ID，用于在更改大题顺序时候，找出此条小题的顺序,动态更新题号
+    filterItemList() {
+      this.allItemList = [];
+      this.haveTitleCategory.forEach((item) => {
+        this.allItemList = this.allItemList && this.allItemList.length && this.allItemList.concat(item.subItemList);
+      });
+      this.allItemList = this.allItemList && this.allItemList.length && this.allItemList.map((item) => {
+        return item.itemId;
+      }) || [];
+    },
+    //改变右侧栏宽度
+    changeSize(e) {
+      document.onmousemove = (e) => {
+        e.stopPropagation();
+        document.body.style.cursor = "w-resize";
+        let addWidth = this.$refs.drawer.offsetLeft - e.clientX;
+        let curWidth = this.$refs.drawer.offsetWidth;
+        this.$refs.drawer.style.width = `${curWidth + addWidth}px`;
+      };
+      document.onmouseup = (e) => {
+        e.stopPropagation();
+        document.onmousemove = null;
+        document.onmouseup = null;
+        document.body.style.cursor = "default";
+      };
+    },
+    //试卷题目集 - 全部选择
+    addPaperAllQuestion() {
+      let _this = this;
+      if (!_this.isAddAll) {
+        return;
+      }
+      var resourceId = getUrlKey("resourceId");
+      this.$emit("addAllQuestion",resourceId,_this.currentPaperItem.resourceId,this.allItemList)
+    },
+    //判断按钮状态
+    judgeButtonStatus() {
+      if (this.isCheckingStatus) {
+        return;
+      }
+      console.log("paper---judgeButtonStatus---111---", this.itemsList);
+      console.log("paper---judgeButtonStatus---222---", this.paperIdsList);
+      this.isCheckingStatus = true;
+      this.isAddAll = false;
+      if ((this.fromPageType == 'variant' && this.itemsList.length == 10) || this.paperIdsList.length == 0) {
+        this.isCheckingStatus = false;
+        return;
+      }
+      if (
+        this.itemsList.length == 0 ||
+        this.itemsList.length < this.paperIdsList.length
+      ) {
+        this.isCheckingStatus = false;
+        this.isAddAll = true;
+        return;
+      }
+      let tempItemIds = [];
+      this.itemsList.forEach((element) => {
+        tempItemIds.push(this.fromPageType='variant' ? element.variantItemId : element.itemId);
+      });
+      console.log('tempItemIds',tempItemIds)
+      console.log("paper---judgeButtonStatus---333---", tempItemIds);
+      this.paperIdsList.forEach((element) => {
+        if (tempItemIds.indexOf(element) < 0) {
+          this.isAddAll = true;
+          this.isCheckingStatus = false;
+          return;
+        }
+      });
+      this.isCheckingStatus = false;
+    },
+  },
+  created() {
+    this.numberMap = new Map(changeNumber);
+  },
+  mounted() {
+    let _this = this;
+    this.itemsList = this.itemList
+    this.judgeButtonStatus();
+    _this.requestParam["resourceId"] = _this.currentPaperItem.resourceId;
+    _this.requestBankData();
+    this.fromPageType = this.fromType
+  },
+};
+</script>
+
+<style scoped>
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #e7ffef;
+}
+
+.el-tree-node__content:hover {
+  background-color: #e7ffef;
+}
+
+.drawer-continer {
+  position: absolute;
+  padding: 0 16px 0 4px;
+  top: 56px;
+  right: 0px;
+  width: 532px;
+  min-width: 532px;
+  max-width: 936px;
+  height: calc(100% - 56px);
+  background: #ffffff;
+  /* border: 1px solid #e2e2e2; */
+  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.05);
+  transform: rotate(180deg);
+}
+
+.resize {
+  position: absolute;
+  right: -3px;
+  width: 3px;
+  height: 100%;
+  cursor: w-resize;
+}
+
+.drawer-slot {
+  width: 100%;
+  height: 100%;
+  transform: rotate(180deg);
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+}
+
+.page-contro {
+  width: 100%;
+  height: 40px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 40px;
+  color: #333;
+}
+
+.question-quote-all {
+  height: 24px;
+  margin: 20px 0 16px 0;
+}
+
+.quote-all-question-disable {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  float: right;
+  margin-right: 16px;
+  width: 92px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffff;
+  font-family: MicrosoftYaHei;
+  background: #cccccc;
+  cursor: not-allowed;
+}
+
+.quote-all-question {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  float: right;
+  margin-right: 16px;
+  width: 92px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffff;
+  font-family: MicrosoftYaHei;
+  background: #ff9800;
+  cursor: pointer;
+}
+
+.quote-all-question:hover {
+  background: #ff6f00;
+}
+
+.quote-all-question:active {
+  background: #e68a00;
+}
+</style>