词句卡片逻辑调整

src/views/wordcard/cread.vue

@@ -33,26 +33,24 @@
         <h3>{{ saveName }}</h3>
         <div class="btn-box">
           <el-button small @click="editCardflag = true"><i class="el-icon-edit"></i>编辑</el-button>
-          <el-button small @click="previewEvent"
-            ><img src="../../assets/teacherdev/word-eyes.png" alt="" />预览</el-button
-          >
+          <el-button small @click="download2"><img src="../../assets/teacherdev/word-eyes.png" alt="" />打印</el-button>
         </div>
       </template>
     </div>
-    <div class="content" v-if="!isPreview">
-      <div v-for="(item, index) in newEditTable" :key="index">
+    <div class="content" :class="[editCardflag ? '' : 'content-flex']">
+      <div v-for="(item, index) in newEditTable" :key="index" :class="[editCardflag ? '' : 'item-flex']">
         <writeTable
           :editCardflag="editCardflag"
           :dataConfig="writeTableData"
           :data="item"
           :pageNumber="index + 1"
           :totalNumber="newEditTable.length"
-          :isPreview="isPreview"
+          :isPreview="true"
           @handleDelItem="handleDelItem"
         />
       </div>
     </div>
-    <div class="preview_dv" v-if="isPreview" :style="{ top: userID ? '0' : '' }">
+    <!-- <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>
       <div class="preview_main">
@@ -79,7 +77,7 @@
         </div>
         <img class="right" src="../../assets/teacherdev/creadCad-right.png" alt="" @click="changepreviewIndex('add')" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -117,7 +115,7 @@ export default {
       saveShow: false,
       hzDetailList: null,
       userID: this.$route.query.userID ? this.$route.query.userID : '',
-      editCardflag: true, // 是否编辑卡片
+      editCardflag: this.$route.query.id ? false : true, // 是否编辑卡片
       newEditTable: [
         // {
         //   borderColor: '#243C97',
@@ -454,7 +452,7 @@ export default {
       this.previewIndex = 0;
       this.saveShow = false;
       this.showLeft = true;
-      this.editCardflag = true;
+      this.editCardflag = this.$route.query.id ? false : true;
       this.isPreview = false;
       if (this.$route.query.id) {
         // 需要请求详情接口
@@ -546,6 +544,16 @@ export default {
   }
   .content {
     padding-top: 88px;
+    &-flex {
+      display: flex;
+      width: 1218px;
+      margin: 0 auto;
+      flex-flow: wrap;
+      column-gap: 18px;
+    }
+    .item-flex {
+      width: 600px;
+    }
   }
 }
 .preview_dv {

src/views/wordcard/writeTableNew.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="['writeTable', isPreview ? 'writeTable-preview' : '']" v-if="data">
-    <div class="writeTop" v-bind:class="{ flipped: isFlipped }">
+  <div :class="['writeTable', editCardflag ? '' : 'writeTable-preview']" v-if="data">
+    <div class="writeTop" v-bind:class="{ flipped: isFlipped && !editCardflag }">
       <template v-if="editCardflag">
         <div class="left">
           <div class="header-info">
@@ -225,7 +225,7 @@ export default {
     UploadDrag,
     AudioPlay,
   },
-  props: ['isPreview', 'data', 'pageNumber', 'totalNumber', 'editCardflag', 'none', 'is_preview', 'showLeft'],
+  props: ['isPreview', 'data', 'pageNumber', 'totalNumber', 'editCardflag', 'none', 'is_preview'],
   data() {
     //这里存放数据
     return {
@@ -242,12 +242,22 @@ export default {
       audio_file: '',
       loading: false,
       isFlipped: false,
+      showLeft: true,
     };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {
+    editCardflag: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          this.showLeft = true;
+          this.isFlipped = false;
+        }
+      },
+      deep: true,
+    },
     pageNumber: {
       handler: function (val, oldVal) {
         if (val != oldVal) {
@@ -362,7 +372,7 @@ export default {
     },
     // 翻面
     changeShowLeft() {
-      this.$emit('changeShowLeft');
+      this.showLeft = !this.showLeft;
       this.isFlipped = !this.isFlipped;
     },
     changeRota() {