GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/UploadControl.vue

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
    <template v-if="type == 'upload_control_preview_chs'">
      <UploadView
        :changeFillId="changeFillId"
        :accept="accept"
        :filleNumber="1"
        :fileList="curQue.fileList"
        :type="type"
      />
    </template>
    <div v-else>
      <div class="uploadBtn">
        <img
          style="width: 24px; height: 24px"
          src="../../../assets/adult/uploadview.png"
          alt=""
        />
        上传文件
      </div>
    </div>
    <div class="dv" v-loading="loading" v-if="type == 'upload_control_chs'">
      <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>
    <template v-if="type == 'upload_control_preview_chs'">
      <div class="adult-book-input-item">
        <span class="adult-book-lable">下载：</span>
        <el-radio-group v-model="curQue.is_upload" @change="forupdata">
          <el-radio :label="true">需要</el-radio>
          <el-radio :label="false">不需要</el-radio>
        </el-radio-group>
      </div>
    </template>
    <!-- <div class="adult-book-input-item" v-if="curQue.is_upload">
        <span class="adult-book-lable">上传：</span>
        <Upload
          :changeFillId="changeuploda"
          :datafileList="curQue.upload_list"
          :accept="accept"
          :filleNumber="1"
        />
      </div> -->
  </div>
</template>
<script>
import UploadView from "../common/UploadView.vue";
import Upload from "../common/Upload.vue";

import pdf from "vue-pdf";
export default {
  components: {
    UploadView,
    pdf,
    Upload,
  },
  props: ["curQue", "changeCurQue", "type"],
  data() {
    return {
      uploadType: "",
      fileList: [],
      data: null,
      numPages: null,
      accept: ".png,.jpg,.pdf",
      data_structure: {
        type: "upload_control_chs",
        name: "上传控件",
        title: "",
        fileList: [],
        is_upload: false,
        upload_list: [],
      },
      data_structure2: {
        type: "upload_control_preview_chs",
        name: "上传控件预览查看",
        title: "",
        fileList: [],
        is_upload: false,
      },
      loading: false,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    forupdata() {
      this.$forceUpdate();
    },
    remove() {
      // this.data = null;
      // this.curQue.data = null;
      // this.curQue.fileList = [];
      // this.$message.success("删除成功");
    },
    changeuploda(fileList, item) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            fileID: item.response.file_info_list[0].file_id,
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.upload_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    changeFillId(fileList, item, index) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            file_name: item.response.file_info_list[0].file_name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            fileID: item.response.file_info_list[0].file_id,
            file_relative_path: item.response.file_info_list[0].file_relative_path
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.fileList = JSON.parse(JSON.stringify(articleImgRes));
      if (fileList.length > 0) {
        this.curQue.data = fileList[0]?articleImgRes[0]:fileList[0].file_info_list[0];
        if (this.curQue.data?.file_name.indexOf("pdf") != -1) {
          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) => {
          this.$message.success("pdf 加载失败", err);
          this.data = null;
          this.curQue.data = null;
          this.curQue.fileList = [];
        });
    },

    initcurQue() {
      let data;
      if (this.type == "upload_control_chs") {
        data = JSON.parse(JSON.stringify(this.data_structure));
      } else {
        data = JSON.parse(JSON.stringify(this.data_structure2));
      }
      this.changeCurQue(data);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!this.curQue) {
      this.initcurQue();
    } else {
      if (!this.curQue.is_upload) {
        this.curQue.is_upload = false;
      }
      if (this.type == "upload_control_chs") {
        if (!this.curQue.upload_list) {
          this.curQue.upload_list = [];
        }
      }
    }
  },
  //生命周期 - 挂载完成（可以访问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;

    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>