GCLS_Page_TC/src/views/wordcard/cread.vue

<template>
  <div class="cread" v-loading="loading">
    <Header v-if="!userID" />
    <div class="go-back-box" :class="[userID ? 'go-back-box-user' : '']" v-if="!isPreview">
      <a v-if="!userID" class="go-back" :class="[editCardflag ? '' : 'go-back-preview']" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        返回
      </a>
      <template v-if="editCardflag">
        <div class="name-box">
          <label>卡片名称</label>
          <el-input v-model="saveName"></el-input>
        </div>
        <div class="btn-box">
          <el-button small @click="addCard"><i class="el-icon-plus"></i>增加卡片</el-button>
          <el-upload
            ref="upload"
            :action="url"
            accept=".xlsx,.xls"
            :limit="9999"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :show-file-list="false"
            class="btn"
            style="margin: 0 8px"
          >
            <el-button>通过模版导入</el-button>
          </el-upload>
          <el-button type="primary" plain small @click="save">结束编辑并保存</el-button>
        </div>
      </template>
      <template v-else>
        <h3>{{ saveName }}</h3>
        <div class="btn-box">
          <el-button @click="changeRowLength">{{ showRoeText[showRowLength] }}</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>
      </template>
    </div>
    <div
      class="content"
      :class="[editCardflag ? '' : 'content-flex content-flex-' + showRowLength]"
      :style="{ minHeight: innerHeight - 172 + 'px' }"
    >
      <div v-for="(item, index) in newEditTable" :key="index" :class="[editCardflag ? '' : 'item-flex']">
        <writeTable
          :editCardflag="editCardflag"
          :dataConfig="writeTableData"
          :data="item"
          :pageNumber="index + 1"
          :totalNumber="showRowLength"
          :isPreview="true"
          @handleDelItem="handleDelItem"
        />
      </div>
    </div>
    <!-- <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">
        <img
          class="left"
          src="../../assets/teacherdev/creadCad-left.png"
          alt=""
          @click="changepreviewIndex('remove')"
        />
        <div class="word_main">
          <div class="word_main_table">
            <writeTable
              :type="typeIndex"
              :dataConfig="newEditTable"
              :data="newEditTable[previewIndex]"
              :pageNumber="previewIndex + 1"
              :totalNumber="newEditTable.length"
              :isPreview="true"
              :showLeft="showLeft"
              @changeShowLeft="changeShowLeft"
              ref="writeTable"
            />
          </div>
        </div>
        <img class="right" src="../../assets/teacherdev/creadCad-right.png" alt="" @click="changepreviewIndex('add')" />
      </div>
    </div> -->
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from '@/components/Header';
import { getLogin, LearnWebSI, getHZChineseInfo, getContentFile } from '@/api/api';
import writeTable from './writeTableNew.vue';
import { getToken } from '@/utils/auth';
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
import canvg from 'canvg';
import cnchar from 'cnchar';
import 'cnchar-radical';

import FileSaver from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
    writeTable,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      saveName: '',
      typeIndex: 0,
      loading: false,
      writeTableData: null,
      isPreview: false,
      previewIndex: 0,
      saveShow: false,
      hzDetailList: null,
      userID: this.$route.query.userID ? this.$route.query.userID : '',
      editCardflag: this.$route.query.id ? false : true, // 是否编辑卡片
      newEditTable: [
        // {
        //   borderColor: '#243C97',
        //   fontColor: '#243C97',
        //   fontAlign: 'left',
        //   label: '',
        //   headerCon: '',
        //   left: {
        //     fileList: [],
        //     con: '',
        //   },
        //   right: {
        //     definition: '',
        //     collocation: '',
        //     exampleSent: '',
        //     hz_info: [],
        //     pinyin: '',
        //     audio_file: '',
        //     cixing: '',
        //   },
        // },
      ],
      showLeft: true,
      showRowLength: 1, // 一页展示几个，有一行一列，一行两列，一行三列和两行两列
      showRoeText: {
        1: '一行一列',
        2: '一行两列',
        3: '一行三列',
        4: '两行两列',
        5: '两行三列',
      },
      innerHeight: window.innerHeight,
    };
  },
  //计算属性 类似于data概念
  computed: {
    url() {
      let userInfo = getToken()
        ? JSON.parse(getToken())
        : sessionStorage.getItem('GCLS_Token_Tc')
        ? JSON.parse(sessionStorage.getItem('GCLS_Token_Tc'))
        : null;
      if (!userInfo) return `${process.env.VUE_APP_BASE_API}/GCLSFileServer/WebFileUpload`;
      return `${process.env.VUE_APP_BASE_API}/GCLSFileServer/WebFileUpload?AccessToken=${userInfo.access_token}&SecurityLevel=Mid"`;
    },
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    addCard() {
      this.newEditTable.push({
        borderColor: '#243C97',
        fontColor: '#243C97',
        fontAlign: 'left',
        label: '',
        headerCon: '',
        left: {
          fileList: [],
          con: '',
        },
        right: {
          definition: '',
          collocation: '',
          exampleSent: '',
          hz_info: [],
          pinyin: '',
          audio_file: '',
          cixing: '',
          hideHanzi: false,
        },
      });
    },
    // 删除一条卡片
    handleDelItem(index) {
      this.newEditTable.splice(index, 1);
    },

    // 返回上一页
    goBack() {
      this.$router.push({
        path: '/wordcard/table',
      });
    },
    // 保存
    save() {
      if (!this.saveName || !this.saveName.trim()) {
        this.$message.warning('请填写卡片名称');
        return;
      }
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      let text = '';
      this.newEditTable.forEach((items) => {
        text += items.left.con.trim() + '\n';
      });
      if (this.$route.query.id) {
        // 编辑
        let Mname = 'tr_tool-wsc_manager-UpdateMyWordSentenceCard';
        LearnWebSI(Mname, {
          id: this.$route.query.id,
          name: this.saveName,
          type: this.typeIndex == 0 ? 'WORD' : 'SENTENCE',
          text: text,
          content: JSON.stringify(this.newEditTable),
          update_scope: 0,
        })
          .then((res) => {
            this.loading.close();
            this.loading = false;
            this.editCardflag = false;
            this.$message.success('保存成功');
            this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
          })
          .catch((res) => {
            this.loading.close();
            this.loading = false;
          });
      } else {
        // 新建
        let Mname = 'tr_tool-wsc_manager-CreateMyWordSentenceCard';
        LearnWebSI(Mname, {
          name: this.saveName,
          type: this.typeIndex == 0 ? 'WORD' : 'SENTENCE',
          text: text,
          content: JSON.stringify(this.newEditTable),
          app_user_id: this.userID,
        })
          .then((res) => {
            this.$router.replace({
              path: '/wordcard/cread',
              query: {
                id: res.id,
                userID: this.userID,
              },
            });
            this.loading.close();
            this.loading = false;
            this.editCardflag = false;
            this.$message.success('保存成功');
            this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
          })
          .catch((res) => {
            this.loading.close();
            this.loading = false;
          });
      }
    },

    // 字句详情
    getdetai() {
      this.loading = true;
      let Mname = 'tr_tool-wsc_manager-GetWordSentenceCard';
      LearnWebSI(Mname, {
        id: this.$route.query.id,
      })
        .then((res) => {
          console.log(789);
          this.saveName = res.name;
          this.newEditTable = JSON.parse(res.content);
          this.loading = false;
          this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 预览
    previewEvent() {
      this.previewIndex = 0;
      this.showLeft = true;
      this.isPreview = true;
    },
    // 关闭预览
    closepreviewEvent() {
      this.isPreview = false;
    },
    changepreviewIndex(type) {
      if (type == 'add') {
        if (this.previewIndex == this.newEditTable.length - 1) {
          this.$message.warning('当前已经是最后一页');
          return;
        }
        this.previewIndex++;
      } else {
        if (this.previewIndex == 0) {
          this.$message.warning('当前已经是第一页');
          return;
        }
        this.previewIndex--;
      }
      this.$refs.writeTable.changeRota();
      this.showLeft = true;

      this.$forceUpdate();
    },
    changeShowLeft() {
      this.showLeft = !this.showLeft;
    },
    download2() {
      this.$nextTick(() => {
        if (this.newEditTable) {
          let str = JSON.stringify(this.newEditTable);
          localStorage.setItem('newEditTable', str);
          this.$router.replace({
            path: '/wordcard/printNew',
            query: {
              userID: this.userID,
              id: this.$route.query.id,
            },
          });
        }
      });
    },
    async handleSuccess(res, file, fileList) {
      if (res.status !== 1) {
        this.$message.error(res.message);
        return;
      }
      let file_id = file.response.file_info_list[0].file_id;
      this.loading = true;
      // 通过 fileList 的 response 判断是否已全部完成上传
      this.loading = true;
      this.$refs.upload.clearFiles();
      await LearnWebSI('tr_tool-wsc_manager-ParseWordSentenceCardImportFile', {
        file_id: file_id,
      })
        .then((res) => {
          this.loading = false;
          this.$message.success('导入成功');
          res.content_json_text.forEach((items) => {
            if (
              items.headerCon ||
              items.label ||
              items.left.con ||
              items.right.cixing ||
              items.right.collocation ||
              items.right.definition ||
              items.right.exampleSent ||
              items.right.pinyin
            ) {
              items.borderColor = '#243C97';
              items.fontAlign = 'left';
              items.fontColor = '#243C97';
              let con = items.left.con.trim();
              if (con) {
                let MethodName = 'hz_resource_manager-GetMultHZStrokesContent';
                let data = {
                  hz_str: con,
                };
                getLogin(MethodName, data)
                  .then((res) => {
                    this.loading = false;
                    for (let key in res) {
                      if (key != 'status' && key != ',' && res[key]) {
                        res[key] = JSON.parse(res[key]);
                      }
                    }
                    let hzDetailList = res;
                    let hz_list = [];
                    con.split('').forEach((items) => {
                      let res = JSON.parse(JSON.stringify(hzDetailList[items]));
                      let obj = {
                        con: items,
                        hzDetail: {
                          hz_json: res,
                        },
                      };
                      hz_list.push(obj);
                    });
                    items.right.hz_info = hz_list;
                    let MethodName = 'tool-TextToVoiceFile';
                    if (con) {
                      let datas = {
                        text: con,
                      };
                      getLogin(MethodName, datas).then((res) => {
                        if (res.status === 1) {
                          items.right.audio_file = res.file_id;
                        }
                      });
                    }
                  })
                  .catch(() => {
                    this.loading = false;
                  });
              }
              this.newEditTable.push(items);
            }
          });
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handleExceed(files) {
      this.$message.warning(`当前限制选择 9999 个文件，本次选择了 ${files.length} 个文件`);
    },
    changeRowLength() {
      if (this.showRowLength === 5) {
        this.showRowLength = 1;
      } else {
        this.showRowLength++;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
    if (this.$route.query.cachesType == 'pop') {
      this.saveName = '';
      this.typeIndex = 0;
      this.loading = false;
      this.newEditTable = [
        // {
        //   borderColor: '#243C97', // 卡片边框颜色
        //   fontColor: '#243C97', // 字体颜色
        //   fontAlign: 'left', // 页眉对齐方式
        //   label: '', // 标签内容
        //   headerCon: '', // 页眉内容
        //   left: {
        //     fileList: [], // 上传文件
        //     con: '', // 字词卡片内容（即卡片显示的字词）
        //   },
        //   right: {
        //     definition: '', // 释义
        //     collocation: '', // 搭配
        //     exampleSent: '', // 例句
        //     hz_info: [], // 汉字笔顺等内容
        //     pinyin: '', // 拼音
        //     audio_file: '', // 字词生成的音频
        //     cixing: '', // 词性
        //   },
        // },
      ];
      this.previewIndex = 0;
      this.saveShow = false;
      this.showLeft = true;
      this.editCardflag = this.$route.query.id ? false : true;
      this.isPreview = false;
      if (this.$route.query.id) {
        // 需要请求详情接口
        this.getdetai();
      }
    }
  },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.cread {
  min-height: 100%;
  position: relative;
  background: #f2f2f2;
  .go-back-box {
    width: 1200px;
    display: flex;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    margin: 20px auto;
    // position: fixed;
    // top: 83px;
    // left: 50%;
    // margin-left: -610px;
    // z-index: 1000;
    border: 1px solid rgba(0, 0, 0, 0.15);
    &-user {
      top: 19px;
    }
    h3 {
      font-size: 24px;
      font-weight: 500;
      line-height: 150%;
      flex: 1;
      text-align: center;
    }
    img {
      width: 20px;
      margin-right: 6px;
    }
    .el-button {
      padding: 8px 16px;
      height: 40px;
      line-height: 24px;
    }
  }
  .go-back {
    display: flex;
    color: #333;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    padding: 0 16px 0 0;
    align-items: center;
    cursor: pointer;
    &-preview {
      width: 184px;
    }
    .el-icon-arrow-left {
      font-size: 16px;
      margin-right: 8px;
    }
  }
  .name-box {
    flex: 1;
    display: flex;
    align-items: center;
    label {
      color: #4e5969;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      margin-right: 16px;
    }
    .el-input {
      width: 227px;
      border-radius: 2px;
      background: #f2f3f5;
    }
  }
  .btn-box {
    display: flex;

    i {
      margin-right: 8px;
      font-size: 16px;
    }
  }
  .content {
    // padding-top: 88px;
    &-flex {
      display: flex;
      width: 1470px;
      margin: 0 auto;
      flex-flow: wrap;
      gap: 50px 120px;
      justify-content: center;
      align-content: center;
      padding: 10px 0;
      &-3,
      &-4 {
        gap: 50px 80px;
        .item-flex {
          width: 350px !important;
        }
      }
      &-2,
      &-4,
      &-5 {
        justify-content: start;
      }
      &-1 {
        width: 500px;
      }
      &-2 {
        width: 920px;
      }
      &-4 {
        width: 780px;
      }
      &-5 {
        width: 1120px;
        gap: 50px 80px;
        .item-flex {
          width: 320px !important;
        }
      }
    }
    .item-flex {
      width: 400px;
      flex-shrink: 0;
    }
  }
}
.preview_dv {
  position: absolute;
  left: 0;
  top: 64px;
  width: 100%;
  min-height: calc(100% - 64px);
  background: #f2f2f2;
  > img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    top: 24px;
    right: 31px;
  }
  .print-btn {
    cursor: pointer;
    position: absolute;
    top: 24px;
    left: 31px;
  }
  .preview_main {
    padding: 24px 0;
    width: 740px;
    display: flex;
    align-items: center;
    height: 450px;
    position: absolute;
    top: 50%;
    margin-top: -225px;
    left: 50%;
    margin-left: -370px;
    > div {
      margin: 0 24px;
    }
    img {
      width: 48px;
      height: 48px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.cread {
  .name-box {
    .el-input__inner {
      border-radius: 2px;
      background: #f2f3f5;
      border: none;
    }
  }
  .btn-box {
    .el-button {
      span {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>