字词卡片分页

src/views/wordcard/cread.vue

@@ -32,7 +32,17 @@
       <template v-else>
         <h3>{{ saveName }}</h3>
         <div class="btn-box">
-          <el-button @click="changeRowLength">{{ showRoeText[showRowLength] }}</el-button>
+          <!-- <el-button @click="changeRowLength">{{ showRoeText[showRowLength] }}</el-button> -->
+          <el-button small @click="handleSureFilt" v-if="filtCardflag">类举</el-button>
+          <el-button
+            small
+            @click="
+              filtCardflag = true;
+              showRowLength = newEditTable.length > 4 ? 6 : newEditTable.length;
+            "
+            v-else
+            >筛选</el-button
+          >
           <el-button small @click="editCardflag = true"><i class="el-icon-edit"></i>编辑</el-button>
           <el-button small @click="download2"><img src="../../assets/teacherdev/word-eyes.png" alt="" />打印</el-button>
         </div>
@@ -41,9 +51,13 @@
     <div
       class="content"
       :class="[editCardflag ? '' : 'content-flex content-flex-' + showRowLength]"
-      :style="{ minHeight: innerHeight - 172 + 'px' }"
+      :style="{ minHeight: innerHeight - 220 + 'px' }"
     >
-      <div v-for="(item, index) in newEditTable" :key="index" :class="[editCardflag ? '' : 'item-flex']">
+      <div
+        v-for="(item, index) in filtCardflag ? newEditTable : filtTableShow"
+        :key="index"
+        :class="[editCardflag ? '' : 'item-flex']"
+      >
         <writeTable
           :editCardflag="editCardflag"
           :dataConfig="writeTableData"
@@ -52,9 +66,23 @@
           :totalNumber="showRowLength"
           :isPreview="true"
           @handleDelItem="handleDelItem"
+          :filtCardflag="filtCardflag"
+          :filtId="filtId"
+          :filtTable="filtTable"
         />
       </div>
     </div>
+    <el-pagination
+      background
+      :current-page="currentPage"
+      :page-size="showRowLength"
+      :page-sizes="[1, 2, 3, 4, 6]"
+      :total="filtTable.length"
+      layout="total, prev, pager, next, sizes, jumper"
+      @size-change="(val) => handleSizeChange(val, 'showRowLength', 'currentPage')"
+      @current-change="(val) => handleCurrentChange(val, 'currentPage')"
+      v-if="!filtCardflag"
+    />
     <!-- <div class="preview_dv" v-if="isPreview" :style="{ top: userID ? '0' : '' }">
       <img class="close" src="../../assets/teacherdev/creadCad-close.png" alt="" @click="closepreviewEvent" />
       <el-button type="primary" class="print-btn" small @click="download2">打印</el-button>
@@ -153,6 +181,11 @@ export default {
         5: '两行三列',
       },
       innerHeight: window.innerHeight,
+      filtCardflag: true, // 筛选状态
+      filtTable: [], // 筛选卡片
+      filtTableShow: [], //分页后的筛选卡片
+      filtId: [], // 筛选卡片id数组
+      currentPage: 1,
     };
   },
   //计算属性 类似于data概念
@@ -192,6 +225,7 @@ export default {
           cixing: '',
           hideHanzi: false,
         },
+        id: Math.random().toString(36).substring(2, 10),
       });
     },
     // 删除一条卡片
@@ -237,7 +271,7 @@ export default {
             this.loading = false;
             this.editCardflag = false;
             this.$message.success('保存成功');
-            this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
+            this.showRowLength = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
           })
           .catch((res) => {
             this.loading.close();
@@ -265,7 +299,7 @@ export default {
             this.loading = false;
             this.editCardflag = false;
             this.$message.success('保存成功');
-            this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
+            this.showRowLength = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
           })
           .catch((res) => {
             this.loading.close();
@@ -282,11 +316,15 @@ export default {
         id: this.$route.query.id,
       })
         .then((res) => {
-          console.log(789);
           this.saveName = res.name;
           this.newEditTable = JSON.parse(res.content);
+          this.newEditTable.forEach((item) => {
+            if (!item.hasOwnProperty('id')) {
+              this.$set(item, 'id', Math.random().toString(36).substring(2, 10));
+            }
+          });
           this.loading = false;
-          this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
+          this.showRowLength = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
         })
         .catch((res) => {
           this.loading = false;
@@ -325,9 +363,13 @@ export default {
       this.showLeft = !this.showLeft;
     },
     download2() {
+      if (this.filtTable.length === 0) {
+        this.$message.warning('未选中卡片');
+        return;
+      }
       this.$nextTick(() => {
-        if (this.newEditTable) {
-          let str = JSON.stringify(this.newEditTable);
+        if (this.filtTable) {
+          let str = JSON.stringify(this.filtTable);
           localStorage.setItem('newEditTable', str);
           this.$router.replace({
             path: '/wordcard/printNew',
@@ -424,12 +466,39 @@ export default {
       this.$message.warning(`当前限制选择 9999 个文件，本次选择了 ${files.length} 个文件`);
     },
     changeRowLength() {
-      if (this.showRowLength === 5) {
+      if (this.showRowLength === 4) {
+        this.showRowLength = 6;
+      } else if (this.showRowLength === 6) {
         this.showRowLength = 1;
       } else {
         this.showRowLength++;
       }
     },
+    handleSureFilt() {
+      if (this.filtTable.length === 0) {
+        this.$message.warning('请勾选要类举的卡片');
+        return;
+      }
+      this.filtTable.slice().reverse();
+      this.filtCardflag = false;
+      this.showRowLength = this.filtTable.length > 4 ? 6 : this.filtTable.length;
+      this.getList();
+    },
+    handleSizeChange(val, type, page) {
+      this[type] = val;
+      this[page] = 1;
+      this.getList();
+    },
+    handleCurrentChange(val, type) {
+      this[type] = val;
+      this.getList();
+    },
+    getList() {
+      this.filtTableShow = JSON.parse(JSON.stringify(this.filtTable)).splice(
+        (this.currentPage - 1) * this.showRowLength,
+        this.showRowLength,
+      );
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -589,7 +658,7 @@ export default {
       }
       &-2,
       &-4,
-      &-5 {
+      &-6 {
         justify-content: start;
       }
       &-1 {
@@ -601,7 +670,7 @@ export default {
       &-4 {
         width: 780px;
       }
-      &-5 {
+      &-6 {
         width: 1120px;
         gap: 50px 80px;
         .item-flex {
@@ -657,6 +726,11 @@ export default {
     }
   }
 }
+:deep .el-pagination {
+  text-align: right;
+  width: 1200px;
+  margin: 0 auto;
+}
 </style>
 <style lang="scss">
 .cread {

src/views/wordcard/writeTableNew.vue

@@ -122,6 +122,14 @@
           >
             {{ data.left.con }}
           </h2>
+          <el-checkbox
+            class="filt-check"
+            v-model="isCheck"
+            @change="changeCheck(data.id)"
+            v-if="filtCardflag"
+          ></el-checkbox>
+          <i class="el-icon-zoom-in" v-else></i>
+
           <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
         </div>
         <div
@@ -241,6 +249,13 @@
               <p>例句：{{ data.right.exampleSent }}</p>
             </div>
           </div>
+          <el-checkbox
+            class="filt-check"
+            v-model="isCheck"
+            @change="changeCheck(data.id)"
+            v-if="filtCardflag"
+          ></el-checkbox>
+          <i class="el-icon-zoom-in" v-else></i>
           <a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
         </div>
       </template>
@@ -269,7 +284,18 @@ export default {
     UploadDrag,
     AudioPlay,
   },
-  props: ['isPreview', 'data', 'pageNumber', 'totalNumber', 'editCardflag', 'none', 'is_preview'],
+  props: [
+    'isPreview',
+    'data',
+    'pageNumber',
+    'totalNumber',
+    'editCardflag',
+    'none',
+    'is_preview',
+    'filtCardflag',
+    'filtId',
+    'filtTable',
+  ],
   data() {
     //这里存放数据
     return {
@@ -287,6 +313,7 @@ export default {
       loading: false,
       isFlipped: false,
       showLeft: true,
+      isCheck: this.filtId.indexOf(this.data.id) > -1,
     };
   },
   //计算属性 类似于data概念
@@ -310,6 +337,13 @@ export default {
       },
       deep: true,
     },
+    filtCardflag: {
+      handler: function (val, oldVal) {
+        this.showLeft = true;
+        this.isFlipped = false;
+      },
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -422,6 +456,18 @@ export default {
     changeRota() {
       this.isFlipped = false;
     },
+    changeCheck(id) {
+      if (this.filtId.indexOf(id) > -1) {
+        this.filtTable.splice(this.filtId.indexOf(id), 1);
+        this.filtId.splice(this.filtId.indexOf(id), 1);
+        this.isCheck = false;
+      } else {
+        this.filtId.push(id);
+        this.filtTable.push(this.data);
+        // console.log(this.filtTable.slice().reverse());
+        this.isCheck = true;
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -565,6 +611,25 @@ export default {
       line-height: 1;
       cursor: pointer;
     }
+    .el-icon-zoom-in,
+    .filt-check {
+      position: absolute;
+      left: 8px;
+      bottom: 8px;
+      font-size: 24px;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+      :deep .el-checkbox__inner {
+        width: 24px;
+        height: 24px;
+      }
+      :deep .el-checkbox__inner::after {
+        width: 6px;
+        height: 14px;
+        left: 8px;
+      }
+    }
     .right {
       display: flex;
       align-items: center;
@@ -777,7 +842,7 @@ export default {
       }
     }
   }
-  &-preview-5 {
+  &-preview-6 {
     .writeTop {
       min-height: 282px;
       .left,