|
@@ -0,0 +1,172 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
|
|
|
+ <UploadView
|
|
|
+ :changeFillId="changeFillId"
|
|
|
+ :accept="accept"
|
|
|
+ :filleNumber="1"
|
|
|
+ :fileList="curQue.fileList"
|
|
|
+ :type="type"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import UploadView from "../common/UploadView.vue";
|
|
|
+import pdf from "vue-pdf";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ UploadView,
|
|
|
+ pdf,
|
|
|
+ },
|
|
|
+ props: ["curQue", "changeCurQue", "type"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ uploadType: "",
|
|
|
+ fileList: [],
|
|
|
+ data: null,
|
|
|
+ numPages: null,
|
|
|
+ accept: ".pdf",
|
|
|
+ data_structure: {
|
|
|
+ type: "upload_pdf_chs",
|
|
|
+ name: "上传pdf",
|
|
|
+ title: "",
|
|
|
+ fileList: [],
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ remove() {
|
|
|
+ // this.data = null;
|
|
|
+ // this.curQue.data = null;
|
|
|
+ // this.curQue.fileList = [];
|
|
|
+ // this.$message.success("删除成功");
|
|
|
+ },
|
|
|
+ changeFillId(fileList, item, index) {
|
|
|
+ this.curQue.fileList = JSON.parse(JSON.stringify(fileList));
|
|
|
+ if (fileList.length > 0) {
|
|
|
+ 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) => {
|
|
|
+ this.$message.success("pdf 加载失败", err);
|
|
|
+ this.data = null;
|
|
|
+ this.curQue.data = null;
|
|
|
+ this.curQue.fileList = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ initcurQue() {
|
|
|
+ let data;
|
|
|
+ data = JSON.parse(JSON.stringify(this.data_structure));
|
|
|
+ this.changeCurQue(data);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {
|
|
|
+ if (!this.curQue) {
|
|
|
+ this.initcurQue();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成(可以访问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>
|