@focus-teach/ui 1.0.0

package/.history/packages/wrong-drawer/src/index_20230613104626.vue

@@ -0,0 +1,459 @@
+<template>
+    <div class="wrong-drawer">
+      <ft-drawer>
+        <div class="screen">
+          <ft-radio
+            v-show="termList.length"
+            label="学期"
+            :options="termList"
+            :defaultValue="indexParam.termType"
+            :props="{
+              label: 'label',
+              id: 'termType',
+            }"
+            @radio-click="termClick"
+          ></ft-radio>
+          <ft-radio
+            v-show="clazzGradeList.length"
+            :label="i18n.banJi"
+            :options="clazzGradeList"
+            :defaultValue="indexParam.classId"
+            :props="{
+              label: 'className',
+              id: 'classId',
+            }"
+            @radio-click="classClick"
+          ></ft-radio>
+          <ft-radio
+            v-show="errorRateList.length"
+            :label="i18n.deFenLv"
+            :options="errorRateList"
+            :defaultValue="indexParam.errorRate"
+            :props="{
+              label: 'name',
+              id: 'id',
+            }"
+            @radio-click="rateClick"
+          ></ft-radio>
+        </div>
+        <div>
+          <ft-tabs
+            :options="tabList"
+            :activeName="activeTab"
+            @click="tabClick"
+            type="border-card"
+          ></ft-tabs>
+          <div v-if="chapterList && chapterList.length">
+            <el-table
+              :key="activeTab"
+              <el-table
+              :key="activeTab"
+              :data="chapterList"
+              style="width: 100%; margin-bottom: 20px"
+              :row-key="
+                indexParam.knowledgeSource == 'RESOURCE' ? 'paperResourceId' : (indexParam.knowledgeSource == 'CHAPTER' ?  'courseId' : 'klId')
+              "
+              border
+              stripe
+              :default-expand-all="
+                (indexParam.knowledgeSource == 'RESOURCE' || indexParam.knowledgeSource == 'CHAPTER') ? true : false
+              "
+              :tree-props="{
+                children:
+                  indexParam.knowledgeSource == 'RESOURCE'
+                    ? 'semesterNodeDtoList'
+                    : (indexParam.knowledgeSource == 'CHAPTER'
+                    ? 'chapters'
+                    : 'knowledgeList'),
+                hasChildren:
+                  indexParam.knowledgeSource == 'RESOURCE'
+                    ? 'semesterNodeDtoList.length>0'
+                    : (indexParam.knowledgeSource == 'CHAPTER'
+                    ? 'chapters.length>0'
+                    : 'knowledgeList.length>0'),
+              }"
+            >
+              <el-table-column
+                :prop="
+                  indexParam.knowledgeSource == 'RESOURCE'
+                    ? 'semesterNodeName'
+                    : (indexParam.knowledgeSource == 'CHAPTER'
+                    ? 'courseName'
+                    : 'klName')
+                "
+                :label="
+                  indexParam.knowledgeSource == 'RESOURCE' ? i18n.shiJuan : (indexParam.knowledgeSource == 'CHAPTER' ? i18n.zhangJie : i18n.zhiShiDian)
+                "
+              >
+              </el-table-column>
+              <el-table-column prop="mistakeCount" :label="i18n.cuoTiShu" width="92">
+              </el-table-column>
+              <el-table-column :label="i18n.caoZuo" width="88">
+                <template slot-scope="scope">
+                  <div class="check-wrong-detail" @click="clickCell(scope.row)">
+                    {{ i18n.chaKan }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <ft-empty
+            v-show="chapterList.length == 0"
+            :message="i18n.zanWuShuJu"
+          >
+            <img class="empty-img" :src="host +'/assets/prepare-course/list/img/empty.fcdd9ba5.png'" alt="" />
+          </ft-empty>
+        </div>
+      </ft-drawer>
+    </div>
+  </template>
+  <script>
+  import infiniteScroll from "vue-infinite-scroll";
+  import {
+    Loading,
+    Tabs,
+    TabPane,
+    Table,
+    TableColumn,
+    Tooltip,
+  } from "element-ui";
+  import {
+    getUserOperate,
+    getMistakeIndex,
+    getMistakeData,
+  } from "../../../api/index";
+  
+  export default {
+    name: "FtWrongDrawer",
+    // import引入的组件需要注入到对象中才能使用
+    components: {
+      [Loading.name]: Loading,
+      [Tabs.name]: Tabs,
+      [TabPane.name]: TabPane,
+      [Table.name]: Table,
+      [TableColumn.name]: TableColumn,
+      [Tooltip.name]: Tooltip,
+    },
+    directives: { infiniteScroll },
+    props:{
+      leftInfo:{
+        type: Object
+      },
+      i18n:{
+        type: Object
+      },
+    },
+    data() {
+      // 这里存放数据
+      return {
+        host: window.location.origin,
+        activeTab: "RESOURCE",
+        tabList: [
+          { name: "RESOURCE", label: this.i18n.anShiJuan},
+          { id: "CHAPTER", label: this.i18n.anZhangJie },
+          { id: "KNOWLEDGE", label: this.i18n.anZhiShiDian },
+        ],
+        //首次请求
+        isLoading: true,
+        //是否正在加载题目数据
+        loadingBankData: false,
+        //加载题目数据是否失败
+        loadingError: false,
+        //数据集合
+        chapterList: [],
+        //班级列表
+        clazzGradeList: [],
+        //错误率列表
+        errorRateList: [],
+        termList: [], //学期列表
+        //index接口请求参数
+        defaultIndexParam: {
+          subjectId: "", //科目id
+          gradeId: "", //年级id
+          classId: "", //班级id
+          errorRate: 0, //错误率id，默认全部
+          knowledgeSource: "RESOURCE", //当前错题集查询类型，默认为 CHAPTER
+          // order: 0, //排序，0：更新时间倒序，1：更新时间正序
+          // orderQuote: 0, //排序，0：使用次数倒序，1：使用次数正序
+        },
+        //index接口请求参数
+        indexParam: {},
+        isFirstIndex: true, //首次加载该题库
+              //按试卷开始时间
+        paperStartTime: "",
+        //按试卷结束时间
+        paperEndTime: "",
+      };
+    },
+    //监控data中的数据变化
+    watch: {
+      "$store.state.resourceInfo": function (n, o) {
+        if (this.isFirstIndex) {
+          this.isFirstIndex = false;
+          this.requestMistakeIndexData();
+        }
+      },
+    },
+    methods: {
+      tabClick(value) {
+        this.activeTab = value
+        //处理indexParam
+        this.indexParam.knowledgeSource = value;
+        this.requestBankData();
+      },
+      termClick(termType, item) {
+        console.log('termClick', termType, item)
+        let dic = {
+          termType: item.termType,
+          termBeginTime: item.termBeginTime || "",
+          termEndTime: item.termEndTime || "",
+        };
+        this.$emit(
+          "changeMistakeIndexParam",
+          "selectedTermType",
+          JSON.stringify(dic)
+        );
+      },
+      classClick(classId) {
+        let dic = { classId: classId };
+        this.$emit(
+          "changeMistakeIndexParam",
+          "selectedClazz",
+          JSON.stringify(dic)
+        );
+      },
+      rateClick(id) {
+        let dic = { errorRate: id };
+        this.$emit(
+          "changeMistakeIndexParam",
+          "selectedRate",
+          JSON.stringify(dic)
+        );
+      },
+      formatter(data) {
+        console.log("formater", data);
+        data.klName = data.klName.replace(/&amp;/g, "&");
+        console.log(data.klName);
+        return data.klName;
+      },
+      //
+      setListener() {
+        let _this = this;
+        //改变indexParam参数，重新请求index接口
+        this.$off("changeMistakeIndexParam"); //避免重复响应同一事件
+        this.$on("changeMistakeIndexParam", function (action, msg) {
+          console.log("action is...", msg);
+          if (action == "retryRequest") {
+            //加载失败后的重新请求 || 删除题目后刷新题目数据
+            _this.requestBankData();
+            return;
+          }
+          let dic = JSON.parse(msg);
+          for (let key in dic) {
+            let value = dic[key];
+            _this.indexParam[key] = value;
+          }
+          //请求题目数据
+          _this.requestBankData();
+        });
+      },
+      //切换tab
+      clickResourceTab() {
+        let _this = this;
+        //处理indexParam
+        _this.indexParam.knowledgeSource = _this.activeTab;
+        _this.requestBankData();
+      },
+      /*
+       **请求题库首页数据
+       * 只在首次进入该页面时请求
+       */
+      requestMistakeIndexData() {
+        let _this = this;
+        _this.loadingError = false;
+        _this.goRequestMistakeIndexData();
+      },
+      //首次进入该页面时请求获取用户信息
+      goRequestMistakeIndexData() {
+        let _this = this;
+        var prepareInfo = this.leftInfo;
+        if (prepareInfo && prepareInfo.subjectId) {
+          var subjectId = prepareInfo.subjectId;
+          _this.indexParam["subjectId"] = subjectId;
+          let dom = document.getElementById("wrong-drawer-slot-id");
+          let loadingInstance = Loading.service({
+            target: dom,
+            text: _this.i18n.jiaZaiZhong,
+          });
+          getMistakeIndex(
+            {
+              subjectId: subjectId,
+            },
+            (res) => {
+              this.$nextTick(() => {
+                // 以服务的方式调用的 Loading 需要异步关闭
+                loadingInstance.close();
+              });
+              _this.isLoading = false;
+              if (typeof res === "string") res = JSON.parse(res);
+              if (res && res.code == 0) {
+                //取班级数组
+                _this.clazzGradeList = res.value.clazzGradeList;
+                //首次默认取第一个班级数据
+                if (_this.indexParam.classId.length == 0) {
+                  _this.indexParam.classId =
+                    (_this.clazzGradeList.length &&
+                      _this.clazzGradeList[0].classId) ||
+                    "";
+                  _this.indexParam.gradeId =
+                    (_this.clazzGradeList.length &&
+                      _this.clazzGradeList[0].gradeId) ||
+                    "";
+                }
+                //取错误率数组
+                _this.errorRateList = res.value.errorRateList;
+                _this.termList = res.value.termList?res.value.termList:[]; //学期列表
+                _this.setPaperTime();//按试卷查看需要获取学期的开始和结束时间
+                _this.termList.forEach((item) => {
+                item.label = item.termType == "-1"
+                              ? "全部"
+                              : item.termType == "1"
+                              ? "第一学期"
+                              : item.termType == "2"
+                              ? "第二学期"
+                              : "";
+                });
+                let curTerm = this.termList.filter((item) => item.checked)[0] || {}; //当前学期
+                _this.indexParam.termType = curTerm.termType;
+                _this.indexParam.termBeginTime = curTerm.termBeginTime;
+                _this.indexParam.termEndTime = curTerm.termEndTime;
+                //处理indexParam
+                _this.indexParam.subjectId = subjectId;
+                _this.requestBankData();
+              } else {
+                _this.loadingError = true;
+              }
+            }
+          );
+        }
+      },
+      //按试卷查看，学期选择全部的时候，需要开始时间和结束时间
+      setPaperTime(){
+        if(this.termList && this.termList.length > 0){
+          this.termList.forEach(item => {
+            if(item.termType == 1){
+              this.paperStartTime = item.termBeginTime;
+            }else if(item.termType == 2){
+              this.paperEndTime = item.termEndTime;
+            }
+          });
+        }
+      },
+      /*
+       **请求题库数据
+       * 筛选条件时请求
+       */
+      requestBankData() {
+        let _this = this;
+        let dom = document.getElementById("wrong-drawer-slot-id");
+        let loadingInstance = Loading.service({
+          target: dom,
+          text: _this.i18n.jiaZaiZhong,
+        });
+        _this.loadingError = false;
+        _this.loadingBankData = true;
+        const { teachMaterialId = ""} = this.leftInfo;
+        _this.indexParam.teachMaterialId = teachMaterialId;
+        if(_this.indexParam.termType == -1){//如果是整个学期
+            if(_this.indexParam.knowledgeSource == 'RESOURCE'){//如果是按试卷
+              _this.indexParam.termBeginTime = _this.paperStartTime
+              _this.indexParam.termEndTime = _this.paperEndTime
+            }else{//如果不是按试卷
+              _this.indexParam.termBeginTime = ""
+              _this.indexParam.termEndTime = ""
+          }
+        }
+        getMistakeData(_this.indexParam, (res) => {
+          _this.$nextTick(() => {
+            // 以服务的方式调用的 Loading 需要异步关闭
+            loadingInstance.close();
+          });
+          _this.loadingBankData = false;
+          if (typeof res === "string") res = JSON.parse(res);
+          if (res && res.code == 0) {
+            //取出题目数据
+            _this.loadingError = false;
+            var tempChapterList = res.value.chapterList;
+            tempChapterList = JSON.parse(
+              JSON.stringify(tempChapterList).replace(/&amp;/g, "&")
+            );
+            if (_this.indexParam.knowledgeSource == "CHAPTER") {
+              for (let index = 0; index < tempChapterList.length; index++) {
+                const element = tempChapterList[index];
+                element["courseId"] = "temp" + index;
+                element["courseName"] =
+                  element.teachMaterialName + "    " + element.classificationName;
+                element["mistakeCount"] = element.misCount;
+                if (
+                  element.enTeachMaterialId &&
+                  element.chapters &&
+                  element.chapters.length > 0
+                ) {
+                  //递归将chapters里面的item都赋上 enTeachMaterialId
+                  _this.addTeachMaterialIdForData(
+                    element.chapters,
+                    element.enTeachMaterialId
+                  );
+                }
+              }
+            }
+            _this.chapterList = tempChapterList;
+          } else {
+            //请求题目数据报错
+            _this.loadingError = true;
+            _this.chapterList = [];
+          }
+        });
+      },
+      //为子元素添加 enTeachMaterialId
+      addTeachMaterialIdForData(arr, currentTeachMaterialId) {
+        for (let index = 0; index < arr.length; index++) {
+          const element = arr[index];
+          element["enTeachMaterialId"] = currentTeachMaterialId;
+          if (element.chapters && element.chapters.length > 0) {
+            this.addTeachMaterialIdForData(
+              element.chapters,
+              currentTeachMaterialId
+            );
+          }
+        }
+      },
+      //点击查看按钮
+      clickCell(row) {
+        console.log("clickCell---", row);
+        let dic = {
+          activeIndex: 2,
+          currentIndexParam: this.indexParam,
+          currentSearchItem: row,
+        };
+        this.$emit("eventbus-emit", "changeDrawerType","changeDrawerType",JSON.stringify(dic))
+      },
+    },
+    computed: {},
+    created() {
+      let _this = this;
+      _this.indexParam = _this.defaultIndexParam;
+    },
+    mounted() {
+      let _this = this;
+      if (!this.host.includes("teach.focusteach.com")) {
+        this.host = "http://teach.focusteach.com:8085"
+      }
+      _this.setListener();
+      _this.requestMistakeIndexData();
+    },
+  };
+  </script>
+  <style scoped lang="scss">
+    @import "./index.scss";
+  </style>