GCLS_Page_TC/src/views/wordcard/print.vue

<template>
  <div class="none_writeTable writeTable printTable" 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"
                :curItem="itemI.hzDetail"
                :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() {
      document.getElementsByClassName("printTable")[0].style.zoom = 2;
      //执行window.print打印功能
      window.print();
      this.$message({
        message: "操作成功",
        type: "success",
      });
      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;
    let writeTableData = localStorage.getItem("writeTableData");
    if (writeTableData) {
      _this.dataConfig = JSON.parse(writeTableData);
      setTimeout(() => {
        _this.download2();
      }, 2000);
    }
  },
  //生命周期-创建之前
  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;
  padding-top: 10px;
  .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>