GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/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.Bookanswer && type == 'upload_control_chs'">
          <template
            v-if="
              curQue.Bookanswer.file_name.indexOf('png') != -1 ||
                curQue.Bookanswer.file_name.indexOf('jpg') != -1 ||
                curQue.Bookanswer.file_name.indexOf('jpeg') != -1
            "
          >
            <el-image
              style="width: 100%; height: 100%"
              :src="curQue.Bookanswer.file_url"
              :fit="'contain'"
              :preview-src-list="[curQue.Bookanswer.file_url]"
            >
            </el-image>
            <!-- <img :src="curQue.Bookanswer.file_url" alt="" /> -->
          </template>
          <template
            v-else-if="curQue.Bookanswer.file_name.indexOf('pdf') != -1"
          >
            <iframe
              :src="curQue.Bookanswer.newpath"
              id="ifm"
              width="100%"
              height="100%"
            ></iframe>
            <!-- <pdf
              ref="pdf"
              :src="curQue.Bookanswer.fileRelativePath"
              v-for="i in curQue.Bookanswer.numPages"
              :key="i"
              :page="i"
            >
            </pdf> -->
          </template>
        </template>
        <template
          v-else-if="curQue.data && type == 'upload_control_preview_chs'"
        >
          <template
            v-if="
              curQue.data.file_name.indexOf('png') != -1 ||
                curQue.data.file_name.indexOf('jpg') != -1 ||
                curQue.data.file_name.indexOf('jpeg') != -1
            "
          >
            <el-image
              style="width: 100%; height: 100%"
              :src="curQue.data.id"
              :fit="'contain'"
              :preview-src-list="[curQue.data.id]"
            >
            </el-image>
            <!-- <img :src="curQue.data.id" alt="" /> -->
          </template>
          <template
            v-else-if="curQue.Bookanswer.file_name.indexOf('pdf') != -1"
          >
            <iframe
              :src="curQue.Bookanswer.newpath"
              id="ifm"
              width="100%"
              height="100%"
            ></iframe>
            <!-- <pdf
              ref="pdf"
              :src="curQue.Bookanswer.fileRelativePath"
              v-for="i in curQue.Bookanswer.numPages"
              :key="i"
              :page="i"
            >
            </pdf> -->
          </template>
        </template>
        <template v-else>
          <div
            style="display: flex; height: 40px"
            v-if="type == 'upload_control_chs' && TaskModel != 'ANSWER'"
          >
            <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.Bookanswer">
        <div
          v-if="type == 'upload_control_chs'"
          class="remove"
          :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']"
          @click="remove"
        >
          <img src="../../../assets/adult/red_remove.png" alt="" />
        </div>
        <div
          v-if="type == 'upload_control_chs'"
          class="remove zoom-in"
          @click="showIframe = true"
        >
          <i class="el-icon-zoom-in"></i>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="showIframe"
      :show-close="true"
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      width="1000px"
      class="login-dialog"
      v-if="showIframe"
    >
      <iframe
        :src="curQue.Bookanswer.newpath"
        id="ifms"
        width="100%"
        height="600px"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import UploadView from "../common/UploadView.vue";
import pdf from "vue-pdf";
import { getToken, getConfig } from "../../../utils/auth";
const Base64 = require("js-base64").Base64;

export default {
  components: {
    UploadView,
    pdf
  },
  props: ["curQue", "fn_data", "type", "TaskModel"],
  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,
      file_preview_url: "",
      showIframe: 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.Bookanswer.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.TaskModel || this.TaskModel != "ANSWER") {
        if (this.curQue.Bookanswer) {
          this.data = null;
          this.curQue.Bookanswer = 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];
      this.curQue.Bookanswer = fileList[0].response.file_info_list[0];
      if (this.curQue.Bookanswer.file_name.indexOf("pdf") != -1) {
        this.curQue.Bookanswer = fileList[0].response.file_info_list[0];
        let path =
          `${this.file_preview_url}/onlinePreview?url=` +
          Base64.encode(this.curQue.Bookanswer.file_url);
        this.curQue.Bookanswer.newpath = path;
        // this.curQue.Bookanswer.fileRelativePath =
        //   process.env.VUE_APP_BASE_API +
        //   this.curQue.Bookanswer.file_relative_path;
        // this.getNumPages();
      } else {
        let path =
          `${this.file_preview_url}/onlinePreview?url=` +
          Base64.encode(
            this.curQue.data.id
              ? this.curQue.data.id
              : this.curQue.Bookanswer.file_url
          );
        this.curQue.Bookanswer.newpath = path;
      }
      this.$forceUpdate();
    },
    // 获取pdf的页数
    getNumPages() {
      let _this = this;
      let loadingTask = pdf.createLoadingTask(
        _this.curQue.Bookanswer.fileRelativePath
      );
      loadingTask.promise
        .then(pdff => {
          _this.numPages = pdff.numPages;
          _this.curQue.Bookanswer.numPages = pdff.numPages;
          this.$forceUpdate();
        })
        .catch(err => {
          console.error("pdf 加载失败", err);
        });
    },
    initcurQue() {
      let data = JSON.parse(JSON.stringify(this.data_structure));
      this.changeCurQue(data);
    },
    handleData() {
      let _this = this;
      let single = null;
      if (this.curQue.data) {
        let path =
          `${this.file_preview_url}/onlinePreview?url=` +
          Base64.encode(this.curQue.data.file_url);
        this.curQue.data.newpath = path;
        single = JSON.parse(JSON.stringify(this.curQue.data));
      } else {
        single = null;
      }

      if (!this.curQue.Bookanswer) {
        this.$set(this.curQue, "Bookanswer", single);
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let data = JSON.parse(getConfig());
    this.file_preview_url = data.doc_preview_service_address;
    this.handleData();
  },
  //生命周期 - 挂载完成（可以访问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: 15px 0 15px 15px;
  // background: #f7f7f7;
  // border: 1px solid rgba(0, 0, 0, 0.1);
  .dv {
    display: flex;
    align-items: center;
    width: 72px;
    flex-flow: wrap;
    padding: 60px 0;
    .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;
      &.notAllow {
        cursor: not-allowed;
      }
      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: 10px;
    .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>