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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
    <div
      class="main"
      :style="{ display: type == 'upload_control_chs' ? 'flex' : 'block' }"
    >
      <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>
        <template v-else>
          <div
            style="display: flex; height: 40px"
            v-if="type == 'upload_control_chs'"
          >
            <UploadView
              :changeFillId="changeFillId"
              :accept="accept"
              :filleNumber="1"
              :fileList="curQue.fileList"
              :type="type"
            />
          </div>
        </template>
      </div>
      <div
        class="uploadBtn"
        @click="downLoad"
        v-if="type == 'upload_control_preview_chs' && curQue.is_upload"
      >
        <img
          style="width: 24px; height: 24px"
          src="../../../assets/adult/download.png"
          alt=""
        />
        下载
      </div>
      <div class="dv" v-if="curQue.data">
        <div v-if="type == 'upload_control_chs'" class="remove" @click="remove">
          <img src="../../../assets/adult/red_remove.png" alt="" />
        </div>
      </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", "type"],
  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() {
      if (this.curQue.data) {
        this.data = null;
        this.curQue.data = null;
        this.curQue.fileList = [];
        this.$message.success("删除成功");
        this.$forceUpdate()
      }
    },
    changeFillId(fileList, item, index) {
      this.curQue.fileList = fileList;
      // this.$set(this.curQue,data,fileList[0].response.file_info_list[0])
      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();
      }
      this.$forceUpdate();
    },
    // 获取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 {
  width: 100%;
  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: 96px;
    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;
    cursor: pointer;
    margin-top: 8px;
    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;
    padding: 16px;
    .content {
      width: 445px;
      height: 260px;
      border-radius: 4px;
      box-sizing: border-box;
      background: linear-gradient(0deg, #ebebeb, #ebebeb);
      overflow-y: scroll;
      display: flex;
      justify-content: center;
      align-items: center;
      > img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
</style>