From 8fb281df7bb93d918c2bf75f29405fa9ce53bad8 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 26 Nov 2021 16:36:23 +0800
Subject: [PATCH] +pdf预览插件
---
src/page/index/top/userSManual.vue | 239 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 236 insertions(+), 3 deletions(-)
diff --git a/src/page/index/top/userSManual.vue b/src/page/index/top/userSManual.vue
index 35554eb..be0ecc0 100644
--- a/src/page/index/top/userSManual.vue
+++ b/src/page/index/top/userSManual.vue
@@ -1,10 +1,243 @@
<template>
- <div>用户手册</div>
+ <div class="userSManual">
+ <!-- {{ form.link }} -->
+ <basic-container id="PDFmain">
+ <!-- <embed :src="form.link" type="application/pdf" width="800" height="800" /> -->
+ <!-- <object
+ :data="form.link"
+ type="application/pdf"
+ width="800"
+ height="800"
+ ></object> -->
+ <iframe
+ id="PDFmainIFRAM"
+ src="/pfd/build/generic/web/viewer.html"
+ width="100%"
+ height="100%"
+ >
+ </iframe>
+ </basic-container>
+ <div class="userSManual_upBut" :style="{ display: userSManual_upBut }">
+ <el-button type="primary" round @click="openUps">上传用户手册</el-button>
+ </div>
+ <el-dialog
+ title="上传用户手册"
+ append-to-body
+ :visible.sync="openUp"
+ width="70%"
+ >
+ <avue-form
+ :option="option"
+ v-model="form"
+ @submit="handleSubmit"
+ :upload-before="uploadBefore"
+ :upload-after="uploadAfter"
+ ></avue-form>
+ </el-dialog>
+ </div>
</template>
<script>
-export default {};
+import { mapGetters } from "vuex";
+import { add, getDetails } from "@/api/resource/attach";
+export default {
+ data() {
+ return {
+ openUp: false,
+ userSManual_upBut: "none",
+ index: 0,
+ link: "",
+ option: {
+ tabs: true,
+ tabsActive: 1,
+ group: [
+ {
+ label: "保安服务企业技术交流群二维码信息",
+ prop: "info",
+ column: [
+ {
+ label: "用户手册",
+ type: "upload",
+ // listType: "picture-img",
+ propsHttp: {
+ res: "data",
+ url: "link",
+ },
+ // canvasOption: {
+ // text: " ",
+ // ratio: 0.1,
+ // },
+ action: "/api/blade-resource/oss/endpoint/put-file",
+ // action: "/api/blade-resource/oss/endpoint/put-file-attach",
+ // tip: "只能上传jpg/png用户头像，且不超过500kb",
+ span: 24,
+ row: true,
+ prop: "link",
+ labelWidth: 180,
+ },
+ {
+ label: "首次上传时间",
+ span: 24,
+ row: true,
+ prop: "createTime",
+ labelWidth: 180,
+ type: "datetime",
+ disabled: true,
+ format: "yyyy-MM-dd HH:mm:ss",
+ valueFormat: "yyyy-MM-dd HH:mm:ss",
+ },
+ {
+ label: "上次更新时间",
+ span: 24,
+ row: true,
+ prop: "updateTime",
+ labelWidth: 180,
+ type: "datetime",
+ disabled: true,
+ format: "yyyy-MM-dd HH:mm:ss",
+ valueFormat: "yyyy-MM-dd HH:mm:ss",
+ },
+ ],
+ },
+ ],
+ },
+ form: {},
+ intime: "",
+ };
+ },
+ computed: {
+ ...mapGetters(["userInfo"]),
+ },
+ created() {
+ this.handleWitch();
+ if (this.userInfo.role_name == "administrator") {
+ this.userSManual_upBut = "block";
+ } else {
+ this.userSManual_upBut = "none";
+ }
+ },
+ methods: {
+ openUps() {
+ this.openUp = true;
+ },
+ uploadBefore(file, done, loading, column) {
+ this.link = "";
+ this.form = {};
+ done();
+ },
+ uploadAfter(res, done, loading, column) {
+ this.link = res.link;
+ done();
+ },
+ handleSubmit(form, done) {
+ if (!this.link) {
+ this.$message({
+ message: "请上传后提交",
+ type: "warning",
+ });
+ done();
+ return;
+ }
+ if (this.index === 0) {
+ form["type"] = 10;
+ form["link"] = this.link;
+ // console.log(form);
+ // return;
+ add(form).then(
+ (res) => {
+ if (res.data.success) {
+ this.handleWitch();
+ this.$message({
+ type: "success",
+ message: "用户手册上传成功!",
+ });
+ } else {
+ this.$message({
+ type: "error",
+ message: res.data.msg,
+ });
+ }
+ done();
+ this.link = "";
+ this.form = {};
+ this.openUp = false;
+ },
+ (error) => {
+ window.console.log(error);
+ done();
+ }
+ );
+ }
+ },
+ havepdf() {
+ var pdf = document.getElementById("PDFmainIFRAM").contentWindow;
+ if (pdf.setUrl) {
+ return pdf;
+ } else {
+ return false;
+ }
+ },
+ setUrl(url) {
+ this.intime = setInterval(() => {
+ let havePdf = this.havepdf();
+ if (havePdf) {
+ // console.log("已加载完");
+ havePdf.setUrl(url);
+ // console.log(this.intime, 1);
+ clearInterval(this.intime);
+ // console.log(this.intime, 2);
+ this.intime = "";
+ // console.log(this.intime, 3);
+ } else {
+ // console.log("没加载玩");
+ }
+ // var pdf = document.getElementById("PDFmainIFRAM").contentWindow;
+ // pdf.setUrl(url);
+ }, 500);
+ },
+ handleWitch() {
+ if (this.index === 0) {
+ getDetails(10).then((res) => {
+ const att = res.data.data;
+ if (this.intime) {
+ clearInterval(this.intime);
+ this.setUrl(att.link);
+ } else {
+ this.setUrl(att.link);
+ }
+ this.form = {
+ id: att.id,
+ link: att.link,
+ createTime: att.createTime,
+ updateTime: att.updateTime,
+ };
+ });
+ }
+ },
+ },
+};
</script>
-<style>
+<style lang="scss" scoped>
+.userSManual {
+ width: 100%;
+ height: 97%;
+ // border: 1px solid red;
+ box-sizing: border-box;
+ position: relative;
+ .userSManual_upBut {
+ position: absolute;
+ right: 56px;
+ top: 58px;
+ }
+ #PDFmain {
+ width: 100%;
+ height: 100%;
+ // border: 1px solid red;
+ }
+ .el-card.basic-container__card.is-always-shadow {
+ width: 100%;
+ height: 100%;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3