添加打印

src/App.vue

@@ -28,7 +28,7 @@ export default {
     return {
       dir: "ltr",
       userAgentTipShow: false,
-      timeOut: null
+      timeOut: null,
     };
   },
   created() {
@@ -45,21 +45,15 @@ export default {
     } else {
       this.handleUserAgentRoot();
     }
-    window.addEventListener(
-        'click',()=>{
-            sessionStorage.setItem('lastClickTime',new Date().getTime())
-        }
-    )
-    window.addEventListener(
-        'mousewheel',()=>{
-            sessionStorage.setItem('lastClickTime',new Date().getTime())
-        }
-    )
-    window.addEventListener(
-        'mousemove',()=>{
-            sessionStorage.setItem('lastClickTime',new Date().getTime())
-        }
-    )
+    window.addEventListener("click", () => {
+      sessionStorage.setItem("lastClickTime", new Date().getTime());
+    });
+    window.addEventListener("mousewheel", () => {
+      sessionStorage.setItem("lastClickTime", new Date().getTime());
+    });
+    window.addEventListener("mousemove", () => {
+      sessionStorage.setItem("lastClickTime", new Date().getTime());
+    });
   },
   methods: {
     // 判断是否为chrome浏览器
@@ -76,30 +70,33 @@ export default {
       this.userAgentTipShow = false;
     },
     // 是否超时
-    isTimeOut(){
-        clearInterval(this.timeOut)
-        let dataConfig = JSON.parse(getConfig());
-        if(dataConfig.user_connection_timeout_duration){
-            this.timeOut = setInterval(()=>{
-                let lastClickTime = sessionStorage.getItem('lastClickTime')*1
-                let nowTime = new Date().getTime()
-                if(nowTime - lastClickTime > 1000 * dataConfig.user_connection_timeout_duration){
-                    clearInterval(this.timeOut)
-                    removeSession("SysList");
-                    removeToken();
-                    Cookies.remove("JSESSIONID");
-                    this.userShow = false;
-                    this.userMessage = null;
-                    sessionStorage.removeItem("useragent_root_close");
-                    window.location.href = dataConfig.sys_home_url
-                }
-            })
-        }
+    isTimeOut() {
+      clearInterval(this.timeOut);
+      let dataConfig = JSON.parse(getConfig());
+      if (dataConfig.user_connection_timeout_duration) {
+        this.timeOut = setInterval(() => {
+          let lastClickTime = sessionStorage.getItem("lastClickTime") * 1;
+          let nowTime = new Date().getTime();
+          if (
+            nowTime - lastClickTime >
+            1000 * dataConfig.user_connection_timeout_duration
+          ) {
+            clearInterval(this.timeOut);
+            removeSession("SysList");
+            removeToken();
+            Cookies.remove("JSESSIONID");
+            this.userShow = false;
+            this.userMessage = null;
+            sessionStorage.removeItem("useragent_root_close");
+            window.location.href = dataConfig.sys_home_url;
+          }
+        });
       }
+    },
   },
-  mounted(){
-    sessionStorage.setItem('lastClickTime',new Date().getTime())
-    this.isTimeOut()
+  mounted() {
+    sessionStorage.setItem("lastClickTime", new Date().getTime());
+    this.isTimeOut();
   },
 };
 </script>

src/permission.js

@@ -72,4 +72,4 @@ router.beforeEach(async (to, from, next) => {
 router.afterEach(() => {
   // finish progress bar
   NProgress.done()
-})
+})

src/router/index.js

@@ -127,7 +127,14 @@ const routes = [{
 
   path: '/wordcard/cread',
   component: () =>
-    import('@/views/wordcard/cread')
+    import('@/views/wordcard/cread'),
+  meta: { title: '创建词汇卡片', keepAlive: true }
+},
+{
+
+  path: '/wordcard/print',
+  component: () =>
+    import('@/views/wordcard/print')
 },
 {
 

src/views/wordcard/cread.vue

@@ -149,7 +149,6 @@
         </div>
       </div>
       <div
-        style="display: none"
         class="word_main"
         id="pdfDom"
         ref="pdfDom"
@@ -407,20 +406,28 @@ export default {
       });
     },
     download2() {
-      var printBox = document.getElementById("pdfDom");
-      // var printBox = document.getElementsByClassName("pdfDom")[0];
-      //拿到打印的区域的html内容
-      var newContent = printBox.innerHTML;
-      //将旧的页面储存起来，当打印完成后返给给页面。
-      var oldContent = document.body.innerHTML;
-      //赋值给body
-      document.body.innerHTML = newContent;
-      //执行window.print打印功能
-      window.print();
-      // 重新加载页面，以刷新数据。以防打印完之后，页面不能操作的问题
-      window.location.reload();
-      document.body.innerHTML = oldContent;
-      return false;
+      this.$nextTick(() => {
+        if (this.writeTableData) {
+          let str = JSON.stringify(this.writeTableData);
+          localStorage.setItem("writeTableData", str);
+          this.$router.replace("/wordcard/print");
+        }
+      });
+
+      // var printBox = document.getElementById("pdfDom");
+      // // var printBox = document.getElementsByClassName("pdfDom")[0];
+      // //拿到打印的区域的html内容
+      // var newContent = printBox.innerHTML;
+      // //将旧的页面储存起来，当打印完成后返给给页面。
+      // var oldContent = document.body.innerHTML;
+      // //赋值给body
+      // document.body.innerHTML = newContent;
+      // //执行window.print打印功能
+      // window.print();
+      // // 重新加载页面，以刷新数据。以防打印完之后，页面不能操作的问题
+      // window.location.reload();
+      // document.body.innerHTML = oldContent;
+      // return false;
     },
     changepreviewIndex(type) {
       if (type == "add") {
@@ -947,12 +954,7 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    if (this.$route.query.id) {
-      // 需要请求详情接口
-      this.getdetai();
-    }
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   //生命周期-创建之前
@@ -968,7 +970,38 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {
+    if (this.$route.query.cachesType == "pop") {
+      this.saveName = "";
+      this.typeIndex = 0;
+      this.from = {
+        content: "",
+        BoxbgType: 0,
+        fontSize: "center",
+        playStorkes: true,
+        StorkesUnfold: true,
+        writeBoxNumber: "0", //书写行
+        miaoRedBoxNumber: "0", //描红格
+        lastNullrow: "0", //文本末空行数
+        miaoRedBgcolor: "#E1E1E1", //描红底色
+        writeColor: "#000000", //书写颜色
+        borderColor: "#D65353", //边框颜色
+        fontColor: "#000000", //文字颜色
+      };
+      this.loading = false;
+      this.writeTableData = null;
+      this.isCread = false;
+      this.isPreview = false;
+      this.previewIndex = 0;
+      this.htmlTitle = "1";
+      this.saveShow = false;
+      this.writetableShow = true;
+      if (this.$route.query.id) {
+        // 需要请求详情接口
+        this.getdetai();
+      }
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/wordcard/print.vue

@@ -0,0 +1,346 @@
+<template>
+  <div class="none_writeTable writeTable" v-if="dataConfig">
+    <div
+      class="none_word_main_table"
+      v-for="(data, indexT) in dataConfig.result"
+      :key="indexT"
+    >
+      <div class="writeTop">
+        <div
+          class="writeTop-row"
+          v-for="(itemR, indexR) in data"
+          :key="indexR"
+          :style="{ marginBottom: dataConfig.marginBottom }"
+        >
+          <div
+            class="writeTop-item"
+            :class="[indexI !== 0 ? 'writeTop-item-noLeft' : '']"
+            v-for="(itemI, indexI) in itemR"
+            :key="indexI"
+            :style="{
+              width: dataConfig.width,
+              height: dataConfig.width,
+              borderColor: dataConfig.borderColor,
+            }"
+          >
+            <template
+              v-if="
+                itemI &&
+                itemI.con &&
+                !itemI.write &&
+                !itemI.answer &&
+                !itemI.miaoRed
+              "
+            >
+              <Strockplay
+                v-if="'writeTop-item-' + indexT + '-' + indexR + '-' + indexI"
+                className="adult-strockplay"
+                :strokePlayColor="dataConfig.borderColor"
+                :Book_text="itemI.con"
+                :playStorkes="false"
+                :strokeColor="dataConfig.fontColor"
+                :palyWidth="dataConfig.playWidth"
+                :BoxbgType="dataConfig.BoxbgType"
+                :targetDiv="
+                  'writeTop-item-' +
+                  indexT +
+                  '-' +
+                  indexR +
+                  '-' +
+                  indexI +
+                  itemI.con
+                "
+              />
+            </template>
+            <template v-else-if="itemI && itemI.answer">
+              <StrockplayredlineTable
+                :Book_text="itemI.con"
+                :playStorkes="false"
+                :strokeColorgray="dataConfig.miaoRedBgcolor"
+                :strokeColor="dataConfig.fontColor"
+                :strokeNumber="itemI.answer"
+                :curItem="itemI.hzDetail"
+                :BoxbgType="dataConfig.BoxbgType"
+                :targetDiv="
+                  'write-item-miaohong-' +
+                  indexT +
+                  '-' +
+                  indexR +
+                  '-' +
+                  indexI +
+                  itemI.con
+                "
+                :targetDivGray="
+                  'write-item-miaohong-gray-' +
+                  indexT +
+                  '-' +
+                  indexR +
+                  '-' +
+                  indexI +
+                  itemI.con
+                "
+              />
+            </template>
+            <template v-else-if="itemI && itemI.miaoRed">
+              <Strockred
+                v-if="'write-item-' + indexT + '-' + indexR + '-' + indexI"
+                className="adult-strockplay"
+                :strokePlayColor="dataConfig.borderColor"
+                :Book_text="itemI.con"
+                :curItem="itemI.hzDetail"
+                :hanzicolor="dataConfig.miaoRedBgcolor"
+                :drawingColor="dataConfig.writeColor"
+                :BoxbgType="dataConfig.BoxbgType"
+                :targetDiv="
+                  'write-item-' +
+                  indexT +
+                  '-' +
+                  indexR +
+                  '-' +
+                  indexI +
+                  itemI.con
+                "
+              />
+            </template>
+            <div
+              v-else-if="itemI"
+              class="tian-div"
+              @click="freeWrite(itemI, indexR, indexI)"
+            >
+              <svg-icon
+                icon-class="tian"
+                className="tian"
+                v-if="dataConfig.BoxbgType == 0"
+                :style="{ color: '#DEDEDE' }"
+              />
+              <svg-icon
+                icon-class="mi"
+                className="tian"
+                v-if="dataConfig.BoxbgType == 1"
+                :style="{ color: '#DEDEDE' }"
+              />
+              <img
+                v-if="itemI && itemI.strokes_image_url"
+                :src="itemI.strokes_image_url"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="writeBottom">
+        <span>BLCUP 全球国际中文教学云平台</span>
+        <b>{{ indexT + 1 + "/" + dataConfig.result.length }}</b>
+        <a>www.chinesedu.com</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import StrockplayredlineTable from "../../components/corpus/StrockplayredlineTable.vue";
+import Strockplay from "../../components/corpus/Strockplay.vue";
+import Strockred from "../../components/corpus/Strockred.vue";
+import FreewriteLettle from "../../components/corpus/FreewriteLettle.vue";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    StrockplayredlineTable,
+    Strockplay,
+    Strockred,
+    FreewriteLettle,
+  },
+  //props: ["dataConfig", "data", "indexT", "totalNumber", "type", "none"],
+  data() {
+    //这里存放数据
+    return {
+      ifFreeShow: false,
+      activeIndex: null,
+      activeColIndex: null,
+      dataConfig: null,
+      loading: false,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    download2() {
+      this.loading.close();
+      document.getElementsByTagName("body")[0].style.zoom = 2;
+      //执行window.print打印功能
+      window.print();
+      this.$message({
+        message: "操作成功",
+        type: "success",
+      });
+      document.getElementsByTagName("body")[0].style.zoom = 1;
+      this.$router.replace({
+        path: "/wordcard/cread",
+        query: { cachesType: "push" },
+      });
+      return false;
+    },
+    changePraShow() {
+      this.ifFreeShow = false;
+    },
+    closeifFreeShow(data, rowIndex, colIndex) {
+      this.ifFreeShow = false;
+      this.$forceUpdate();
+    },
+    freeWrite(item, row, col) {
+      this.ifFreeShow = true;
+      this.activeIndex = row;
+      this.activeColIndex = col;
+      //   this.currentHz = this.curQue.option[indexs].rightOption[rightindex].con;
+      if (item) {
+        this.currenHzData = item;
+      } else {
+        this.currenHzData = {};
+      }
+    },
+    ExerciseChangeCurQue(answer, rowIndex, colIndex) {
+      if (answer) {
+        this.data[rowIndex][colIndex].strokes_image_url =
+          answer.strokes_image_url;
+        this.data[rowIndex][colIndex].history = answer.history;
+        this.$forceUpdate();
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    this.loading = this.$loading({
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+    });
+    let writeTableData = localStorage.getItem("writeTableData");
+    if (writeTableData) {
+      _this.dataConfig = JSON.parse(writeTableData);
+      setTimeout(() => {
+        _this.download2();
+      }, 1000);
+    }
+  },
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+.none_writeTable {
+  width: 540px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  .writeTop {
+    padding-top: 0;
+  }
+}
+
+.writeTable {
+  background: #ffffff;
+  box-sizing: border-box;
+  .writeTop {
+    height: 760px;
+    .writeTop-row {
+      display: flex;
+      justify-content: center;
+      .writeTop-item {
+        border: 1px solid #de4444;
+        &.writeTop-item-noLeft {
+          border-left: none;
+        }
+      }
+    }
+  }
+  .writeBottom {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 0 38px;
+    box-sizing: border-box;
+    position: relative;
+    span {
+      font-weight: 500;
+      font-size: 10px;
+      line-height: 14px;
+      color: #000000;
+      opacity: 0.2;
+    }
+    b {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 14px;
+      color: #000000;
+      width: 60px;
+      text-align: center;
+      position: absolute;
+      left: 50%;
+      margin-left: -30px;
+      top: 0px;
+    }
+    a {
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 14px;
+      color: #000000;
+      opacity: 0.2;
+    }
+  }
+  .tian-div {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .tian {
+      width: 100%;
+      height: 100%;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+  .practiceBox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100100;
+    width: 100%;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.19);
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+    &.practiceBoxStrock {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 0px;
+    }
+  }
+}
+</style>

src/views/wordcard/table.vue

@@ -21,6 +21,7 @@
                   path: '/wordcard/cread',
                   query: {
                     id: item.id,
+                    cachesType: 'pop',
                   },
                 })
               "
@@ -43,11 +44,14 @@
               />
             </el-popconfirm>
           </div>
-          <p v-if="data.total_count==0">
-            <img src="../../assets/teacherdev/nodata.png" style="width:1200px" />
+          <p v-if="data.total_count == 0">
+            <img
+              src="../../assets/teacherdev/nodata.png"
+              style="width: 1200px"
+            />
           </p>
         </div>
-        <div class="page" v-if="data.total_count>0">
+        <div class="page" v-if="data.total_count > 0">
           <el-pagination
             background
             @current-change="handleCurrentChange"
@@ -94,6 +98,7 @@ export default {
     Startcread() {
       this.$router.push({
         path: "/wordcard/cread",
+        query: { cachesType: "pop" },
       });
     },
     deleteOne(id, index) {

src/views/wordcard/writeTable.vue

@@ -218,7 +218,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    console.log(this.data);
+  },
   //生命周期-创建之前
   beforeCreated() {},
   //生命周期-挂载之前
@@ -238,7 +240,7 @@ export default {
 <style lang="scss" scoped>
 .none_writeTable {
   width: 794px !important;
-  height: 1157px !important;
+  height: 1147px !important;
   display: flex;
   justify-content: center;
   align-items: center;