Browse Source

修改添加更多

zhangwf 5 năm trước cách đây
mục cha
commit
42cf4c0a85

+ 24 - 19
src/views/cnctestlists/cncTestLists.html

@@ -19,27 +19,32 @@
             </el-dropdown>
         </div>
 
-        <div class="content" v-if="pageModel!=null && pageModel.resultSet!=null">
-            <div class="item-test" v-for="(item, index) in pageModel.resultSet" :key="index">
-                <div class="item-left">
-                    <img style="width:22px; height:22px;" src="../../assets/images/test-icon@2x.png" alt="">
-                    <span>{{item.title}}</span>
+        <div class="content" v-if="cncTestCaseList.length>0">
+          <div v-infinite-scroll="getCncTestcaseList"
+               infinite-scroll-disabled="disabled">
+            <div class="item-test" v-for="(item, index) in cncTestCaseList" :key="index">
+              <div class="item-left">
+                <img style="width:22px; height:22px;" src="../../assets/images/test-icon@2x.png" alt="">
+                <span>{{item.title}}</span>
+              </div>
+              <div class="item-right">
+                <span class="project-name">{{item.houseName}}</span>
+                <span class="qr-num">共{{item.questionCount}}题</span>
+                <div class="watch-test" @click="showQRDialog(item.testcaseId)">
+                  <div class="watch-icon">
+                  </div>
+                  <span>查看测试</span>
                 </div>
-                <div class="item-right">
-                    <span class="project-name">{{item.houseName}}</span>
-                    <span class="qr-num">共{{item.questionCount}}题</span>
-                    <div class="watch-test" @click="showQRDialog(item.testcaseId)">
-                        <div class="watch-icon">
-                        </div>
-                        <span>查看测试</span>
-                    </div>
-                    <div class="use-test" @click="useCurrentTest(item)">
-                        <div class="use-icon">
-                        </div>
-                        <span>使用此测试</span>
-                    </div>
+                <div class="use-test" @click="useCurrentTest(item)">
+                  <div class="use-icon">
+                  </div>
+                  <span>使用此测试</span>
                 </div>
+              </div>
             </div>
+          </div>
+          <p class="loading-style" v-if="loadingMore">加载中...</p>
+          <p class="loading-style" v-if="noMore">没有更多了</p>
         </div>
     </main>
     <div class="dialog" v-show="isShowDialog">
@@ -73,4 +78,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

+ 11 - 3
src/views/cnctestlists/cncTestLists.scss

@@ -21,7 +21,7 @@
     justify-content: space-between;
     margin-top: 36px;
     align-items: center;
-    
+
     .create-test-box {
       display: flex;
       flex-direction: row;
@@ -176,6 +176,14 @@
       }
 
     }
+
+    .loading-style{
+      height: 50px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 
 }
@@ -240,7 +248,7 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
-     
+
 
       .dialog-title {
         width: 100%;
@@ -261,7 +269,7 @@
         overflow-y: auto;
         padding-left: 30px;
         padding-right: 15px;
-        
+
         .qr-item {
           width: 100%;
           margin-top: 19px;

+ 165 - 142
src/views/cnctestlists/cncTestLists.vue

@@ -2,149 +2,172 @@
 </template>
 
 <script>
-import HeaderMain from "../../components/HeaderMain";
-import api from "../../api/editor";
-export default {
-  components: {
-    HeaderMain
-  },
-  data() {
-    return {
-      cncTestDetailSingle: null,
-      houseList: [],
-      value: "",
-      isShowDialog: false,
-      pageModel: null,
-      loading: true,
-      currentProject: "所属项目",
-      currentProjectHouseId: "",
-      fullscreenLoading: false
-    };
-  },
-  created() {
-    this.houseList = [];
-    this.fullscreenLoading = true;
-    api.houseList().then(res => {
-      if (res.success) {
-        this.houseList = res.list;
-      }
-    });
-    this.getCncTestcaseList();
-  },
-  filters: {
-    transtion(val) {
-      return String.fromCharCode(64 + parseInt(val));
-    },
-    currentOptionNum(section) {
-      var chnNumChar = [
-        "零",
-        "一",
-        "二",
-        "三",
-        "四",
-        "五",
-        "六",
-        "七",
-        "八",
-        "九"
-      ];
-      var chnUnitChar = ["", "十", "百", "千", "万", "亿", "万亿", "亿亿"];
-      var strIns = "",
-        chnStr = "";
-      var unitPos = 0;
-      var zero = true;
-      while (section > 0) {
-        var v = section % 10;
-        if (v === 0) {
-          if (!zero) {
-            zero = true;
-            chnStr = chnNumChar[v] + chnStr;
-          }
-        } else {
-          zero = false;
-          strIns = chnNumChar[v];
-          strIns += chnUnitChar[unitPos];
-          chnStr = strIns + chnStr;
-        }
-        unitPos++;
-        section = Math.floor(section / 10);
-      }
-      if (chnStr.indexOf("一十") == 0) {
-        chnStr = chnStr.substr(1);
-      }
-      return "题目" + chnStr;
-    }
-  },
-  methods: {
-    getCncTestcaseList() {
-      let data = {
-        houseId: this.currentProjectHouseId,
-        pageNo: 1,
-        pageSize: 20,
-        uid: ""
-      };
-      api.cncTestcaseList(data).then(res => {
-        if (res.success) {
-          this.pageModel = res.pageModel;
-        }
-        this.fullscreenLoading = false;
-      });
-    },
-    cncTestDetail(testcaseId) {
-      let that = this;
-      let data = {
-        testcaseId
-      };
-      api.cncTestDetail(data).then(res => {
-        if (res.success) {
-          that.cncTestDetailSingle = res.single;
-        }
-        that.loading = false;
-      });
-    },
-    showQRDialog(testcaseId) {
-      this.isShowDialog = true;
-      this.loading = true;
-      this.cncTestDetail(testcaseId);
-    },
-    close() {
-      this.isShowDialog = false;
-      this.cncTestDetailSingle = null;
-    },
-    handleCommand(command) {
-      this.houseList.forEach(element => {
-        if (element.houseId === command) {
-          this.currentProject = element.houseName;
-          this.currentProjectHouseId = element.houseId;
-          this.fullscreenLoading = true;
-          this.getCncTestcaseList();
-          return true;
-        } else {
-          this.currentProjectHouseId = "";
-          return false;
-        }
-      });
-    },
-    useCurrentTest(item) {
-      let data = {
-        creator: "admin",
-        ownHouseName: item.houseName,
-        questionCount: item.questionCount,
-        title: item.title,
-        testcaseId: item.testcaseId,
-        jsonString:
-          '{"pages":[{"elements":[]}],"createDate":1566357290066,"type":"h5","_id":"5d5cb72addd4fa1c047df1d5","title":"标题","description":"描述","canvasHeight":1334,"canvasWidth":750,"bgc":"#B1C096","btnColor":"#5f8a61","cover":"","animatedNameGlobal":"","bodyBackgroundColor":"rgba(255,255,255,0)","animatedNameBackgroundGlobal":"","backgroundAudio":"","loginId":"caodd@elab-plus.com","__v":0}'
-      };
-      let that = this;
-      api.createTest(data).then(res => {
-        if (res.success) {
-          that.$router.push({ path: "/h5editor", query: { itemId: res.id ,testcaseId:item.testcaseId} });
+    import HeaderMain from "../../components/HeaderMain";
+    import api from "../../api/editor";
+
+    export default {
+        components: {
+            HeaderMain
+        },
+        data() {
+            return {
+                cncTestDetailSingle: null,
+                houseList: [],
+                value: "",
+                isShowDialog: false,
+                pageModel: null,
+                cncTestCaseList:[],
+                loading: true,
+                currentProject: "所属项目",
+                currentProjectHouseId: "",
+                fullscreenLoading: false,
+                loadingMore:false,
+                count: 0,
+                pageNo:1,
+            };
+        },
+        created() {
+            this.houseList = [];
+            this.fullscreenLoading = true;
+            api.houseList().then(res => {
+                if (res.success) {
+                    this.houseList = res.list;
+                }
+            });
+            this.cncTestCaseList = [];
+            this.getCncTestcaseList();
+        },
+        filters: {
+            transtion(val) {
+                return String.fromCharCode(64 + parseInt(val));
+            },
+            currentOptionNum(section) {
+                var chnNumChar = [
+                    "零",
+                    "一",
+                    "二",
+                    "三",
+                    "四",
+                    "五",
+                    "六",
+                    "七",
+                    "八",
+                    "九"
+                ];
+                var chnUnitChar = ["", "十", "百", "千", "万", "亿", "万亿", "亿亿"];
+                var strIns = "",
+                    chnStr = "";
+                var unitPos = 0;
+                var zero = true;
+                while (section > 0) {
+                    var v = section % 10;
+                    if (v === 0) {
+                        if (!zero) {
+                            zero = true;
+                            chnStr = chnNumChar[v] + chnStr;
+                        }
+                    } else {
+                        zero = false;
+                        strIns = chnNumChar[v];
+                        strIns += chnUnitChar[unitPos];
+                        chnStr = strIns + chnStr;
+                    }
+                    unitPos++;
+                    section = Math.floor(section / 10);
+                }
+                if (chnStr.indexOf("一十") == 0) {
+                    chnStr = chnStr.substr(1);
+                }
+                return "题目" + chnStr;
+            }
+        },
+        computed: {
+            noMore() {
+                return this.count <= this.cncTestCaseList.length
+            },
+            disabled() {
+                return this.loadingMore || this.noMore
+            }
+        },
+        methods: {
+            getCncTestcaseList() {
+                let data = {
+                    houseId: this.currentProjectHouseId,
+                    pageNo: this.pageNo++,
+                    pageSize: 20,
+                };
+                this.loadingMore = true;
+                api.cncTestcaseList(data).then(res => {
+                    if (res.success) {
+                        this.pageModel = res.pageModel;
+                        res.pageModel.resultSet.forEach((item, index) => {
+                            this.cncTestCaseList.push(item);
+                        });
+                        this.count = res.pageModel.rowTotal;
+                        this.loadingMore = false;
+                    }
+                    this.fullscreenLoading = false;
+                });
+            },
+            cncTestDetail(testcaseId) {
+                let that = this;
+                let data = {
+                    testcaseId
+                };
+                api.cncTestDetail(data).then(res => {
+                    if (res.success) {
+                        that.cncTestDetailSingle = res.single;
+                    }
+                    that.loading = false;
+                });
+            },
+            showQRDialog(testcaseId) {
+                this.isShowDialog = true;
+                this.loading = true;
+                this.cncTestDetail(testcaseId);
+            },
+            close() {
+                this.isShowDialog = false;
+                this.cncTestDetailSingle = null;
+            },
+            handleCommand(command) {
+                this.currentProjectHouseId = "";
+                for (let i = 0; i < this.houseList.length; i++) {
+                     let element = this.houseList[i];
+                    if (element.houseId === command) {
+                        this.currentProject = element.houseName;
+                        this.currentProjectHouseId = element.houseId;
+                        this.fullscreenLoading = true;
+                        this.cncTestCaseList = [];
+                        this.getCncTestcaseList();
+                        break;
+                    }
+                }
+            },
+            useCurrentTest(item) {
+                let data = {
+                    creator: "admin",
+                    ownHouseName: item.houseName,
+                    questionCount: item.questionCount,
+                    title: item.title,
+                    testcaseId: item.testcaseId,
+                    jsonString:
+                        '{"pages":[{"elements":[]}],"createDate":1566357290066,"type":"h5","_id":"5d5cb72addd4fa1c047df1d5","title":"标题","description":"描述","canvasHeight":1334,"canvasWidth":750,"bgc":"#B1C096","btnColor":"#5f8a61","cover":"","animatedNameGlobal":"","bodyBackgroundColor":"rgba(255,255,255,0)","animatedNameBackgroundGlobal":"","backgroundAudio":"","loginId":"caodd@elab-plus.com","__v":0}'
+                };
+                let that = this;
+                api.createTest(data).then(res => {
+                    if (res.success) {
+                        that.$router.push({path: "/h5editor", query: {itemId: res.id, testcaseId: item.testcaseId}});
+                    }
+                });
+            }
+        },
+        destroyed() {
+            this.pageNo = 1;
+            this.cncTestCaseList=[];
         }
-      });
-    }
-  }
-};
+    };
 </script>
 <style lang="scss" scoped>
-@import "./cncTestLists.scss";
+  @import "./cncTestLists.scss";
 </style>