@focus-teach/ui 1.0.0

package/.history/packages/wrong-detail/src/index_20230613120803.vue

@@ -0,0 +1,568 @@
+<!--右侧抽屉-->
+<template>
+    <ft-drawer>
+      <ft-exam-header
+        :childTitle="childTitle"
+        :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="quoteAllWrongQuestions"
+        >
+          <i class="icon-add" style="margin-right: 4px"></i>
+          {{ i18n.xuanZeQuanBu }}
+        </div>
+      </div>
+      <div
+        v-infinite-scroll="changeCurrentPage"
+        :infinite-scroll-disabled="!hasMore"
+        infinite-scroll-distance="40"
+      >
+        <ft-header :options="sortList" @sort="headerSort" default-sort="scoreRate" v-show="itemInfoList.length">
+          {{ i18n.gong }}{{ totalRecord }}{{ i18n.daoTiMu }}
+        </ft-header>
+        <div id="wrong-detail-drawer-slot-id">
+          <ft-question
+            v-show="!loadingBankData && !loadingError && itemInfoList.length > 0"
+            v-for="(item, index) in itemInfoList"
+            :key="item.itemId"
+            :itemInfo="item"
+            :itemIndex="index + 1"
+            :fromWrong="true"
+            :studentsList="item.studentsList"
+            :mistakeContent="i18n.deFenLv+'：' + (item.scoreRate ? item.scoreRate + '%' : '')"
+            :scoreContent="i18n.cuoWuRenShu+'：' + (item.studentsList.length) + i18n.ren"
+            :examItemList="itemList"
+            :pointNames="item.pointNames ? getPointNamesStr(item.pointNames) : '--'"
+            :klNames="item.klNames ? getNamesStr(item.klNames) : '--'"
+            :skill="(item.basicSkills && item.basicSkills.length) ? getNamesStr(item.basicSkills) : '--'"
+            :answer="item.answer || '--'"
+            :analysis="item.analysis || '--'"
+            :itemCategoryName="item.categoryName"
+            :topicName="item.topicName"
+            :difficultyId="difficultyIdList[item.difficultyId]"
+            :difficultyName="item.difficultyName"
+            :audioFileId="item.audioFileId"
+            :itemFromType="item.itemFromType"
+            :content="item.content"
+            :updateTime="getUpdateTime(item.updateTime)"
+            :itemInfoId="item.itemId"
+            :rootItemInfoId="item.rootItemInfoId"
+            :itemSourceType="item.itemSourceType"
+            @showAnswer="getAnswer"
+            @getContent="getContent"
+            @choiceOrRemoveQuestion="choiceOrRemoveQuestion"
+            @toShowAudio="toShowAudio"
+            :fromType ='fromType'
+            :variantList="itemList"
+          ></ft-question>
+          <ft-error v-show="!loadingBankData && loadingError">
+            <img class="error-img" :src="host + '/assets/prepare-course/list/img/error.7e494464.png'" alt="" />
+          </ft-error>
+        </div>
+      </div>  
+    </ft-drawer>
+  </template>
+  
+  <script>
+  import infiniteScroll from "vue-infinite-scroll";
+  import { Loading } from "element-ui";
+  import { getMistakeItems,  getWrongQuestion, getQuestion } from "../../../api/index";
+  import { formatDate } from "../../../utils/common";
+  export default {
+    name: "FtWrongDetail",
+    // import引入的组件需要注入到对象中才能使用
+    components: {
+      [Loading.name]: Loading,
+    },
+    directives: { infiniteScroll },
+    props: {
+      //请求的参数，包含了当前所选择的信息
+      currentIndexParam: {
+        type: Object,
+        require: true,
+      },
+      //点击的当前的章节 || 知识点
+      currentSearchItem: {
+        type: Object,
+        default: {},
+      },
+      itemList:{
+        type: Array,
+        default:[]
+      },
+      fromType:{
+        typeof:String,
+        default:''
+      },
+      i18n:{
+        type:Object
+      }
+    },
+    data() {
+      // 这里存放数据
+      return {
+        host: window.location.origin,
+        //首次请求
+        isLoading: true,
+        //是否正在加载题目数据
+        loadingBankData: false,
+        //加载题目数据是否失败
+        loadingError: false,
+        //题目数据集合
+        itemInfoList: [],
+        //分页信息
+        pageInfo: {},
+        //题目总数
+        totalRecord: undefined,
+        //接口请求参数
+        requestParam: {},
+        currPage: 0, //当前页面
+        pageError: false,
+        loading: false,
+        hasMore: true,
+        isChangePage: false,
+        mainTitle: "",
+        childTitle: "",
+        itemsList: [], //左侧题目集合
+        isAddAll: true, // true：全部引用 || false：非全部引用
+        wrongIdsList: [], //右侧错题题库的题目id集合
+        isCheckingStatus: false, //是否正在检查按钮状态
+        sortList: [
+          {
+            label: "得分率",
+            key: "scoreRate",
+            sortOrder: true,
+          },
+          {
+            label: "错误人数",
+            key: "mistakeCount",
+          },
+          {
+            label: "更新时间",
+            key: "updateTime",
+          },
+        ],
+        difficultyIdList:{
+          1:'Xm4FWr0dncw',
+          2:'VKs9wA1QAqk',
+          3:'CQrZsSwiESg',
+          4:'79udksVCTQ0',
+          5:'KfqHpbiMBXg'
+        },
+      };
+    },
+    //监控data中的数据变化
+    watch: {
+      itemList: function (n, o) {
+        this.itemsList = n;
+        console.log('jiantingitemlist',this.itemsList)
+        this.judgeButtonStatus();
+      },
+      wrongIdsList: function (n, o) {
+        this.wrongIdsList = n;
+        this.judgeButtonStatus();
+      },
+    },
+    methods: {
+      goBack() {
+        let dic = {
+          activeIndex: 1,
+        };
+        this.$emit("eventbus-emit","changeDrawerType","changeDrawerType",JSON.stringify(dic))
+      },
+      quoteAllWrongQuestions() {
+        if (!this.isAddAll) {
+          return;
+        }
+        this.$emit("addAllQuestion",this.itemInfoList)
+      },
+      headerSort(item) {
+        console.log(item.key,item.sortOrder);
+        if(item.key == 'updateTime'){
+          let dic = { mistakeOrderByFieldEnum: "updateTime",orderBy: item.sortOrder ? 1 :2 };
+          this.$emit("changeMistakeDetailIndexParam", "changeOrder", JSON.stringify(dic));
+        } else if(item.key == 'mistakeCount'){
+          let dic = { mistakeOrderByFieldEnum: "mistakeCount",orderBy: item.sortOrder ? 1 :2 };
+          this.$emit("changeMistakeDetailIndexParam", "changeOrder", JSON.stringify(dic));
+        } else {
+          let dic = { mistakeOrderByFieldEnum: "errorRate",orderBy: item.sortOrder ? 1 :2 };
+          this.$emit("changeMistakeDetailIndexParam", "changeOrder", JSON.stringify(dic));
+        }
+  
+      },
+      getContent(itemInfo){
+          let currentItem = this.itemInfoList.find(
+          (item) => item.itemId == itemInfo.itemId
+        );
+        getWrongQuestion({ itemId: itemInfo.itemId }, (res) => {
+          this.$set(currentItem, "content", res.data.value.html);
+        });
+      },
+      //选题 || 移除
+      choiceOrRemoveQuestion(itemInfo, isAdd) {
+        this.$emit("choiceOrRemoveQuestion",itemInfo,isAdd)
+      },
+      getUpdateTime(timeStr) {
+        var oneTime = new Date(timeStr).getTime();
+        var date = new Date(oneTime);
+        return formatDate(date, "yyyy-MM-dd hh:mm");
+      },
+      toShowAudio(itemInfo,itemIndex){
+        let dic = {
+          questionIndex: itemIndex,
+          fileId: itemInfo.audioFileId,
+        };
+        EventBus.$emit("toShowAudio", "toShowAudio", JSON.stringify(dic));
+      },
+      getAnswer(itemInfo) {
+        let _this = this;
+        let currentItem = this.itemInfoList.find(
+          (item) => item.itemId == itemInfo.itemId
+        );
+        if (
+          (itemInfo.itemType == "3" || itemInfo.itemType == "6") &&
+          itemInfo.correctAnswer &&
+          itemInfo.correctAnswer.length > 0
+        ) {
+          getQuestion({ itemId: itemInfo.correctAnswer }, (res) => {
+            if (!res) {
+              return;
+            }
+            //取出题目数据
+            this.$set(currentItem, "answer", res.data);
+          });
+        } else if (itemInfo.itemType == 7) {
+          var answerArr = itemInfo.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", itemInfo.correctAnswer);
+        }
+        if (itemInfo.itemAnalysis && itemInfo.itemAnalysis.length > 0) {
+          getQuestion({ itemId: itemInfo.itemAnalysis }, (res) => {
+            if (!res) {
+              return;
+            }
+            //取出题目数据
+            this.$set(currentItem, "analysis", res.data);
+          });
+        }
+      },
+      getPointNamesStr(tempArr) {
+        if (tempArr.length == 1) {
+          return tempArr[0].pointName;
+        } else {
+          var tempStr = "";
+          for (let index = 0; index < tempArr.length; index++) {
+            tempStr += tempArr[index].pointName;
+            if (index != tempArr.length - 1) {
+              tempStr += ",";
+            }
+          }
+          return tempStr;
+        }
+      },
+      //知识点
+      getNamesStr(tempArr) {
+        if (tempArr.length == 1) {
+          return tempArr[0];
+        } else {
+          var tempStr = "";
+          for (let index = 0; index < tempArr.length; index++) {
+            tempStr += tempArr[index];
+            if (index != tempArr.length - 1) {
+              tempStr += ",";
+            }
+          }
+          return tempStr;
+        }
+      },
+      judgeButtonStatus() {
+        if (this.isCheckingStatus) {
+          return;
+        }
+        console.log("judgeButtonStatus---111---", this.itemsList);
+        console.log("judgeButtonStatus---222---", this.wrongIdsList);
+        this.isCheckingStatus = true;
+        this.isAddAll = false;
+        if ((this.fromType == 'variant' && this.itemsList.length == 10) || this.wrongIdsList.length == 0) {
+          this.isCheckingStatus = false;
+          return;
+        }
+        if (
+          this.itemsList.length == 0 ||
+          this.itemsList.length < this.wrongIdsList.length
+        ) {
+          this.isCheckingStatus = false;
+          this.isAddAll = true;
+          return;
+        }
+        let tempItemIds = [];
+        this.itemsList.forEach((element) => {
+          tempItemIds.push(this.fromType='variant' ? element.variantItemId : element.itemId);
+        });
+        console.log("judgeButtonStatus---333---", tempItemIds);
+        this.wrongIdsList.forEach((element) => {
+          if (tempItemIds.indexOf(element) < 0) {
+            this.isAddAll = true;
+            this.isCheckingStatus = false;
+            return;
+          }
+        });
+        this.isCheckingStatus = false;
+      },
+      setListener() {
+        let _this = this;
+        //改变 requestParam 参数，重新请求index接口
+        this.$off("changeMistakeDetailIndexParam"); //避免重复响应同一事件
+        this.$on("changeMistakeDetailIndexParam", function (action, msg) {
+          if (action == "retryRequest") {
+            //加载失败后的重新请求 || 删除题目后刷新题目数据
+            _this.requestParam["page"] = 1;
+            console.log("retryRequest---:", _this.requestParam);
+            _this.requestBankData();
+            return;
+          }
+          let dic = JSON.parse(msg);
+          console.log("changeMistakeItems---:", dic);
+          for (let key in dic) {
+            let value = dic[key];
+            _this.requestParam[key] = value;
+          }
+          _this.requestParam["page"] = 1;
+          //请求题目数据
+          _this.requestBankData();
+        });
+      },
+      /*
+       **请求题库数据
+       * 筛选条件时请求
+       */
+      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,
+        });
+        getMistakeItems(_this.requestParam, (res) => {
+          _this.loadingBankData = false;
+          _this.loading = false;
+          this.$nextTick(() => {
+            // 以服务的方式调用的 Loading 需要异步关闭
+            loadingInstance.close();
+          });
+          if (typeof res === "string") res = JSON.parse(res);
+          if (res && res.code == 0) {
+            //将所有错题id数据存在
+            //_this.$store.commit("saveWrongQuestionsIdList", res.value.itemIdList);
+            _this.wrongIdsList = res.value.itemIdList
+            //取出题目数据
+            _this.loadingError = false;
+            _this.itemInfoList = res.value.outList;
+            _this.mainTitle = res.value.mainTitle;
+            _this.childTitle = res.value.childTitle;
+            _this.totalRecord = res.value.page.totalRecord;
+            _this.currPage = res.value.page.currentPage;
+            if (_this.itemInfoList.length >= _this.totalRecord) {
+              _this.hasMore = false;
+            } else {
+              _this.hasMore = true;
+            }
+            _this.pageInfo = {
+              currPage: res.value.page.currentPage,
+              totalPage: res.value.page.totalPage,
+              perPage: res.value.page.perPageInt,
+            };
+          } else {
+            //请求题目数据报错
+            _this.loadingError = true;
+            _this.itemInfoList = [];
+            _this.pageInfo = {};
+          }
+        });
+      },
+      //改变右侧栏宽度
+      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";
+        };
+      },
+      //改变当前页
+      changeCurrentPage() {
+        let _this = this;
+        if (_this.itemInfoList.length >= _this.totalRecord) {
+          _this.hasMore = false;
+          return;
+        }
+        if (_this.currPage == 0 || _this.isChangePage) {
+          return;
+        }
+        _this.isChangePage = true;
+        let dic = _this.requestParam;
+        dic["page"] = _this.currPage + 1;
+        _this.requestPageBank(dic);
+      },
+      /*
+       **请求题库数据
+       * 筛选条件时请求
+       */
+      requestPageBank(param) {
+        let _this = this;
+        _this.pageError = false;
+        _this.loading = true;
+        let dom = document.getElementById("wrong-detail-drawer-slot-id");
+        let loadingInstance = Loading.service({
+          target: dom,
+          text: _this.i18n.jiaZaiZhong,
+        });
+        getMistakeItems(param, (res) => {
+          _this.loading = false;
+          if (typeof res === "string") res = JSON.parse(res);
+          if (res && res.code == 0) {
+            //将所有错题id数据存在
+            // _this.$store.commit("saveWrongQuestionsIdList", res.value.itemIdList);
+            _this.wrongIdsList = res.value.itemIdList
+            //取出题目数据
+            _this.pageError = false;
+            _this.currPage = res.value.page.currentPage;
+            _this.totalRecord = res.value.page.totalRecord;
+            _this.mainTitle = res.value.mainTitle;
+            _this.childTitle = res.value.childTitle;
+            _this.itemInfoList = _this.itemInfoList.concat(res.value.outList);
+            if (_this.itemInfoList.length >= _this.totalRecord) {
+              _this.hasMore = false;
+            } else {
+              _this.hasMore = true;
+            }
+            loadingInstance.close()
+          } else {
+            //请求题目数据报错
+            _this.pageError = true;
+          }
+          _this.isChangePage = false;
+        });
+      },
+    },
+    created() {},
+    mounted() {
+      let _this = this;
+      this.itemsList = this.itemList
+      console.log('jiantingitemlist',this.itemList)
+      _this.requestParam = _this.currentIndexParam;
+      if (_this.requestParam.knowledgeSource == "CHAPTER") {
+        _this.requestParam["teachMaterialId"] =
+          _this.currentSearchItem.enTeachMaterialId;
+        if (_this.currentSearchItem.courseId.indexOf("temp") < 0) {
+          _this.requestParam["courseId"] = _this.currentSearchItem.courseId;
+        }
+        _this.requestParam["termIndex"] = _this.currentSearchItem.termIndex;
+      } else {
+        _this.requestParam["klId"] = _this.currentSearchItem.klId;
+      }
+      _this.requestParam["gradeId"] = _this.currentSearchItem.classificationId;
+      _this.requestParam["mistakeOrderByFieldEnum"] = "errorRate"; //排序字段【errorRate:错误率|updateTime:更新时间】
+      _this.requestParam["orderBy"] = 1; //排序【1:升序、2:降序】
+      _this.setListener();
+      _this.requestBankData();
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .question-quote-all {
+    height: 40px;
+    margin-top: 16px;
+  }
+  
+  .quote-all-question-disable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    float: right;
+    margin-top: 8px;
+    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-top: 8px;
+    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;
+  }
+  
+  .page-contro {
+    width: 100%;
+    height: 40px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 40px;
+    color: #333;
+  }
+  </style>
+