字词卡片

src/views/wordcard/cread.vue

@@ -50,7 +50,14 @@
               v-else
               >筛选</el-button
             >
-            <el-button small @click="editCardflag = true"><i class="el-icon-edit"></i>编辑</el-button>
+            <el-button
+              small
+              @click="
+                editCardflag = true;
+                filtCardflag = false;
+              "
+              ><i class="el-icon-edit"></i>编辑</el-button
+            >
             <el-button small @click="download2"
               ><img src="../../assets/teacherdev/word-eyes.png" alt="" />打印</el-button
             >
@@ -60,18 +67,27 @@
       <div
         class="content"
         :class="[
-          editCardflag ? '' : 'content-flex ',
-          filtCardflag ? 'content-flex-' + showRowLengths : 'content-flex-' + showRowLength,
+          editCardflag
+            ? ''
+            : filtCardflag
+            ? 'content-flex content-flex-' + showRowLengths
+            : 'content-flex content-flex-' + showRowLength,
+
+          ,
         ]"
         :style="{ minHeight: innerHeight - 220 + 'px' }"
       >
         <div
-          v-for="(item, index) in filtCardflag ? filtTableShows : filtTableShow"
+          v-for="(item, index) in filtCardflag ? filtTableShows : editCardflag ? newEditTable : filtTableShow"
           :key="index"
           :class="[editCardflag ? '' : 'item-flex']"
         >
           <writeTable
-            :key="filtCardflag ? currentPages + index : currentPage + index"
+            :key="
+              filtCardflag
+                ? filtId.indexOf(item.id) + currentPages + index
+                : filtId.indexOf(item.id) + currentPage + index
+            "
             :editCardflag="editCardflag"
             :dataConfig="writeTableData"
             :data="item"
@@ -95,7 +111,7 @@
         layout="total, prev, pager, next, sizes, jumper"
         @size-change="(val) => handleSizeChange(val, 'showRowLengths', 'currentPages')"
         @current-change="(val) => handleCurrentChange(val, 'currentPages')"
-        v-if="filtCardflag"
+        v-if="filtCardflag && !editCardflag"
       />
       <el-pagination
         background
@@ -106,7 +122,7 @@
         layout="total, prev, pager, next, sizes, jumper"
         @size-change="(val) => handleSizeChange(val, 'showRowLength', 'currentPage')"
         @current-change="(val) => handleCurrentChange(val, 'currentPage')"
-        v-if="!filtCardflag"
+        v-if="!filtCardflag && !editCardflag"
       />
     </template>
     <el-dialog title="" :visible.sync="showCard" width="100%" class="wordCard-dialog" top="0">
@@ -283,8 +299,12 @@ export default {
       });
     },
     // 删除一条卡片
-    handleDelItem(index) {
+    handleDelItem(index, id) {
       this.newEditTable.splice(index, 1);
+      if (this.filtId.indexOf(id) > -1) {
+        this.filtTable.splice(this.filtId.indexOf(id), 1);
+        this.filtId.splice(this.filtId.indexOf(id), 1);
+      }
     },
 
     // 返回上一页
@@ -324,9 +344,16 @@ export default {
             this.loading.close();
             this.loading = false;
             this.editCardflag = false;
+            this.filtCardflag = true;
             this.$message.success('保存成功');
+            this.currentPage = 1;
+            this.currentPages = 1;
             this.showRowLength = this.filtTable.length > 4 ? 6 : this.filtTable.length;
             this.showRowLengths = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
+            this.filtTableShows = JSON.parse(JSON.stringify(this.newEditTable)).splice(
+              (this.currentPages - 1) * this.showRowLengths,
+              this.showRowLengths,
+            );
           })
           .catch((res) => {
             this.loading.close();
@@ -353,9 +380,16 @@ export default {
             this.loading.close();
             this.loading = false;
             this.editCardflag = false;
+            this.filtCardflag = true;
             this.$message.success('保存成功');
+            this.currentPage = 1;
+            this.currentPages = 1;
             this.showRowLength = this.filtTable.length > 4 ? 6 : this.filtTable.length;
             this.showRowLengths = this.newEditTable.length > 4 ? 6 : this.newEditTable.length;
+            this.filtTableShows = JSON.parse(JSON.stringify(this.newEditTable)).splice(
+              (this.currentPages - 1) * this.showRowLengths,
+              this.showRowLengths,
+            );
           })
           .catch((res) => {
             this.loading.close();
@@ -634,6 +668,10 @@ export default {
       this.showLeft = true;
       this.editCardflag = this.$route.query.id ? false : true;
       this.isPreview = false;
+      this.filtCardflag = false;
+      this.filtTableShow = [];
+      this.filtTableShows = [];
+      this.filtId = [];
       if (this.$route.query.id) {
         // 需要请求详情接口
         this.getdetai();

src/views/wordcard/writeTableNew.vue

@@ -385,7 +385,7 @@ export default {
       }
     },
     handleDelItem() {
-      this.$emit('handleDelItem', this.pageNumber - 1);
+      this.$emit('handleDelItem', this.pageNumber - 1, this.data.id);
     },
     // 获取数据
     handleBlurCon() {