GCLS_Page_Book_Component_NPC/src/components/Adult/preview/UploadControlView.vue

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
    <div style="display: flex">
      <UploadView
        :changeFillId="changeFillId"
        :accept="accept"
        :filleNumber="1"
        :fileList="curQue.fileList"
      />
      <div class="uploadBtn" @click="downLoad">
        <img
          style="width: 24px; height: 24px"
          src="../../../assets/adult/download.png"
          alt=""
        />
        下载表格
      </div>
    </div>

    <div class="dv" v-loading="loading">
      <div class="main">
        <div class="content">
          <template v-if="curQue.data">
            <template
              v-if="
                curQue.data.file_name.indexOf('png') != -1 ||
                curQue.data.file_name.indexOf('jpg') != -1
              "
            >
              <img :src="curQue.data.file_url" alt="" />
            </template>
            <template v-else-if="curQue.data.file_name.indexOf('pdf') != -1">
              <pdf
                ref="pdf"
                :src="curQue.data.fileRelativePath"
                v-for="i in curQue.data.numPages"
                :key="i"
                :page="i"
              >
              </pdf>
            </template>
          </template>
        </div>
      </div>
      <div class="remove" @click="remove">
        <img src="../../../assets/adult/red_remove.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import UploadView from "../common/UploadView.vue";
import pdf from "vue-pdf";
import { getToken } from "@/utils/auth";

export default {
  components: {
    UploadView,
    pdf,
  },
  props: ["curQue", "fn_data"],
  data() {
    return {
      uploadType: "",
      fileList: [],
      data: null,
      numPages: null,
      accept: ".png,.jpg,.pdf",
      data_structure: {
        type: "recordHZ_inputPY_chs",
        name: "读汉字写拼音",
        title: "",
        option: [
          {
            number: "",
            con: "",
            answer: "",
          },
        ],
      },
      loading: false,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    //   下载表格
    downLoad() {
      let userInfor = JSON.parse(getToken());
      let UserCode = "",
        UserType = "",
        SessionID = "";
      if (userInfor) {
        UserCode = userInfor.user_code;
        UserType = userInfor.user_type;
        SessionID = userInfor.session_id;
      }
      let FileID = this.curQue.data.file_id;
      let data = {
        SessionID,
        UserCode,
        UserType,
        FileID,
      };
      location.href =
        process.env.VUE_APP_BASE_API +
        `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
    },
    remove() {
      this.data = null;
      this.curQue.data = null;
      this.curQue.fileList = [];
      this.$message.success("删除成功")

    },
    changeFillId(fileList, item, index) {
      this.curQue.fileList = fileList;
      this.curQue.data = fileList[0].response.file_info_list[0];
      if (this.curQue.data.file_name.indexOf("pdf" != -1)) {
        this.curQue.data = fileList[0].response.file_info_list[0];
        this.curQue.data.fileRelativePath =
          process.env.VUE_APP_BASE_API + this.curQue.data.file_relative_path;
        this.getNumPages();
      }
    },
    // 获取pdf的页数
    getNumPages() {
      let _this = this;
      let loadingTask = pdf.createLoadingTask(
        _this.curQue.data.fileRelativePath
      );
      loadingTask.promise
        .then((pdff) => {
          _this.numPages = pdff.numPages;
          _this.curQue.data.numPages = pdff.numPages;
          this.$forceUpdate();

        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
    initcurQue() {
      let data = JSON.parse(JSON.stringify(this.data_structure));
      this.changeCurQue(data);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Textdes {
  padding: 24px 0 24px 24px;
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  .dv {
    display: flex;
    align-items: center;
    .remove {
      width: 40px;
      height: 39px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 32px;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
  .uploadBtn {
    width: 141px;
    height: 39px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 150%;
    color: #000000;
    margin-left: 16px;
    cursor: pointer;
    img {
      margin-right: 13px;
    }
  }
  .main {
    margin-top: 23px;
    width: 477px;
    height: 292px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
      width: 445px;
      height: 260px;
      border-radius: 4px;
      box-sizing: border-box;
      background: linear-gradient(0deg, #ebebeb, #ebebeb);
      overflow-y: scroll;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
</style>