@epxing/business 0.0.0-stage → 5.3.0-beta.1

package/dist/src/views/ExcelPreviewPage.vue.js

@@ -0,0 +1,572 @@
+import { __vitePreload as __epxPackagePreload } from "../../_virtual/preload-helper.js";
+import component from "@epxing/core/src/mixins/component";
+const _sfc_main = {
+  name: "epx-excel-preview-page",
+  mixins: [component],
+  navConfigs: {
+    flag: false
+  },
+  // 打印 HTML 时把 PDF 页渲染成图片的倍率，越大越清晰也越慢
+  printScale: 3,
+  // 浏览器打不开 PDF 时，是否改用 HTML / 图片打印。
+  // 默认关：excel 报表走 HTML，版式可能与服务端 PDF 有出入
+  htmlPrintFlag: false,
+  printGuideText: "当前浏览器不支持按原版式打印。可点右上角「⋯」选择「在浏览器中打开」后再打印，或下载 PDF 后自行打印。",
+  data() {
+    return {
+      reportInfo: {},
+      reportHtml: "",
+      reportStyle: "",
+      pdfUrl: "",
+      pdfName: "",
+      printUrl: "",
+      numPages: [],
+      loading: true,
+      printLoading: false,
+      donwloadPdfLoading: false,
+      downloadWordLoading: false,
+      donwloadExcelLoading: false
+    };
+  },
+  computed: {
+    showOperates() {
+      const {
+        printOperates,
+        downloadPdfFlag = true,
+        downloadWordFlag = true,
+        downloadExcelFlag = true,
+        printFlag = true
+      } = this.$query;
+      if (printOperates) {
+        return printOperates;
+      } else {
+        const operates = [];
+        if (downloadPdfFlag) operates.push("downloadPdf");
+        if (downloadWordFlag) operates.push("downloadWord");
+        if (downloadExcelFlag) operates.push("downloadExcel");
+        if (printFlag) operates.push("print");
+        return operates;
+      }
+    }
+  },
+  watch: {
+    // PDF 一到手就把打印 iframe 载好，点打印能立刻弹出打印对话框。
+    // 只对能内联渲染 PDF 的浏览器这么做——微信内置浏览器一载入就会弹下载框
+    pdfUrl(url) {
+      if (!url || !this.canPrintInFrame()) return;
+      if (!this.showOperates.includes("print")) return;
+      this.loadPrintFrame().catch(() => {
+      });
+    }
+  },
+  methods: {
+    getReportInfo() {
+      const {
+        code = this.$query.code
+      } = this.$configs;
+      this.loading = true;
+      this.$http.find({
+        entityId: "FM_FORM",
+        "scope.CODE": code
+      }).then((data) => {
+        this.reportInfo = data.data;
+        if (data.data.TYPE === "excelReport") {
+          this.previewExcel();
+        } else if (data.data.TYPE === "wordReport") {
+          this.previewWord();
+        } else {
+          this.previewForm();
+        }
+        if (this.showOperates.includes("print") || this.showOperates.includes("downloadPdf")) {
+          this.exportPdf();
+        }
+      }).catch((err) => {
+        this.loading = false;
+        this.$message.error(err.message);
+      });
+    },
+    loadEditor() {
+      return Promise.all([__epxPackagePreload(() => import(
+        /* webpackChunkName: "canvas-editor" */
+        "@hufe921/canvas-editor"
+      ), true ? [] : void 0, import.meta.url), __epxPackagePreload(() => import(
+        /* webpackChunkName: "canvas-editor-plugin-docx" */
+        "@hufe921/canvas-editor-plugin-docx"
+      ), true ? [] : void 0, import.meta.url)]).then(([CanvasEditor, docxPluginModule]) => {
+        this.CanvasEditor = CanvasEditor;
+        const Editor = CanvasEditor.Editor;
+        const EditorMode = CanvasEditor.EditorMode;
+        const docxPlugin = docxPluginModule.default;
+        return {
+          Editor,
+          EditorMode,
+          docxPlugin
+        };
+      });
+    },
+    previewExcel() {
+      const {
+        params: queryParams = {}
+      } = this.$query;
+      const {
+        params = {}
+      } = this.$configs;
+      const {
+        code = this.$query.code
+      } = this.$configs;
+      const _params = this.$formatParams(params);
+      this.$http.save({
+        action: "preview",
+        entityId: "FM_FORM",
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }).then((data) => {
+        this.reportHtml = data.content;
+        this.reportStyle = data.style || "";
+        const head = document.getElementsByTagName("head")[0];
+        const style = document.createElement("style");
+        style.type = "text/css";
+        if (style.styleSheet) {
+          style.styleSheet.cssText = data.style;
+        } else {
+          style.appendChild(document.createTextNode(data.style));
+        }
+        head.appendChild(style);
+        this.loading = false;
+      }).catch((err) => {
+        this.loading = false;
+        this.$message.error(err.message);
+      });
+    },
+    previewWord() {
+      const {
+        params: queryParams = {}
+      } = this.$query;
+      const {
+        params = {}
+      } = this.$configs;
+      const _params = this.$formatParams(params, this.formData);
+      const {
+        code = this.$query.code
+      } = this.$configs;
+      this.$http.save({
+        action: "transferWord",
+        entityId: "FM_FORM",
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }).then(async (data) => {
+        const {
+          data: editorData = {
+            header: [],
+            main: [],
+            footer: []
+          },
+          options = {}
+        } = data ? JSON.parse(data) : {};
+        editorData.main.forEach((item) => {
+        });
+        for (const item of editorData.main) {
+          if (item.extension && item.value && (item.extension.fieldType === "photo" || item.extension.fieldType === "signature")) {
+            item.type = "image";
+            const {
+              data: base64,
+              width,
+              height
+            } = await this.$util.urlToBase64(this.$util.getFileUrl(item.value));
+            item.value = base64;
+            item.width = item.extension.imageWidth || width;
+            item.height = item.extension.imageHeight || height;
+          }
+        }
+        const printEditorElement = document.createElement("div");
+        this.loadEditor(async ({
+          Editor,
+          EditorMode,
+          docxPlugin
+        }) => {
+          this.printEditor = new Editor(printEditorElement, {
+            mode: EditorMode.PRINT,
+            ...editorData
+          }, options);
+          this.printEditor.use(docxPlugin);
+          const {
+            printPixelRatio,
+            width,
+            height
+          } = options;
+          const base64List = await this.printEditor.command.getImage({
+            pixelRatio: printPixelRatio,
+            mode: EditorMode.PRINT
+          });
+          const {
+            jsPDF
+          } = await __epxPackagePreload(async () => {
+            const {
+              jsPDF: jsPDF2
+            } = await import("jspdf");
+            return {
+              jsPDF: jsPDF2
+            };
+          }, true ? [] : void 0, import.meta.url);
+          const doc = new jsPDF({
+            unit: "px",
+            format: [width, height]
+          });
+          base64List.map((base64, index) => {
+            doc.addImage(base64, "PNG", 0, index, width, height);
+            if (index !== base64List.length - 1) {
+              doc.addPage();
+            }
+          });
+          const url = doc.output("bloburi");
+          this.pdfDoc = doc;
+          this.pdfUrl = url;
+          this.$util.usePlugin("pdf").then((pdf) => {
+            this.pdfjs = pdf;
+            this.pdfjs.getDocument({
+              url,
+              cMapUrl: "/cmaps/",
+              cMapPacked: true
+            }).promise.then((pdf2) => {
+              this.pdfDoc = pdf2;
+              this.numPages = this.pdfDoc.numPages;
+              this.$nextTick(() => {
+                this.loading = false;
+                this.renderPage(1);
+              });
+            });
+          });
+        });
+      }).catch((err) => {
+        this.loading = false;
+        this.$message.error(err.message);
+      });
+    },
+    previewForm() {
+      const {
+        params: queryParams = {}
+      } = this.$query;
+      const {
+        params = {}
+      } = this.$configs;
+      const _params = this.$formatParams(params);
+      const {
+        code = this.$query.code
+      } = this.$configs;
+      this.$http.save({
+        action: "exportPdf",
+        entityId: "FM_FORM",
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }, {
+        responseType: "blob"
+      }).then(({
+        blob,
+        filename
+      }) => {
+        const that = this;
+        const url = window.URL.createObjectURL(blob);
+        this.$util.usePlugin("pdf").then((pdf) => {
+          this.pdfjs = pdf;
+          this.pdfjs.getDocument({
+            url,
+            cMapUrl: "/cmaps/",
+            cMapPacked: true
+          }).promise.then((pdf2) => {
+            this.pdfDoc = pdf2;
+            this.numPages = this.pdfDoc.numPages;
+            that.$nextTick(() => {
+              that.loading = false;
+              that.renderPage(1);
+            });
+          });
+        });
+        this.loading = false;
+      }).catch((err) => {
+        this.loading = false;
+        this.$message.error(err.message);
+      });
+    },
+    renderPage(num) {
+      this.pdfDoc.getPage(num).then((page) => {
+        const canvas = this.$refs["canvas" + num][0];
+        let scale = 1;
+        const ctx = canvas.getContext("2d");
+        const initViewport = page.getViewport({
+          scale: 1
+        });
+        scale = Math.ceil(this.$refs.container.offsetWidth / initViewport.width);
+        const viewport = page.getViewport({
+          scale
+        });
+        const viewportElem = document.querySelector("meta[name=viewport]");
+        viewportElem.setAttribute("content", "width=device-width");
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        canvas.style.width = "100%";
+        const renderContext = {
+          canvasContext: ctx,
+          viewport
+        };
+        page.render(renderContext);
+        if (this.numPages > num) {
+          this.renderPage(num + 1);
+        }
+      });
+    },
+    closeContentMenu(event) {
+      event.preventDefault();
+      return false;
+    },
+    exportExcel() {
+      const {
+        params: queryParams = {}
+      } = this.$query;
+      const {
+        params = {}
+      } = this.$configs;
+      const _params = this.$formatParams(params);
+      const {
+        code = this.$query.code
+      } = this.$configs;
+      this.downloadExcelLoading = true;
+      this.$http.save({
+        action: "exportExcel",
+        entityId: "FM_FORM",
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }, {
+        responseType: "blob"
+      }).then(({
+        blob,
+        filename
+      }) => {
+        var a = document.createElement("a");
+        document.body.appendChild(a);
+        const objectUrl = URL.createObjectURL(blob);
+        a.href = objectUrl;
+        a.download = filename;
+        a.click();
+        window.URL.revokeObjectURL(objectUrl);
+        document.body.removeChild(a);
+        this.downloadExcelLoading = false;
+      }).catch((err) => {
+        this.$message.error(err.message);
+        this.downloadExcelLoading = false;
+      });
+    },
+    exportPdf() {
+      if (this.reportInfo.TYPE === "wordReport") return Promise.resolve();
+      const {
+        params: queryParams = {}
+      } = this.$query;
+      const {
+        params = {}
+      } = this.$configs;
+      const _params = this.$formatParams(params);
+      const {
+        code = this.$query.code
+      } = this.$configs;
+      return this.$http.save({
+        action: "exportPdf",
+        entityId: "FM_FORM",
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }, {
+        responseType: "blob"
+      }).then(({
+        blob,
+        filename
+      }) => {
+        const url = window.URL.createObjectURL(blob);
+        this.pdfUrl = url;
+        this.pdfName = filename;
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    print() {
+      if (this.printLoading) return Promise.resolve();
+      this.printLoading = true;
+      return this.ensurePdf().then(() => {
+        if (this.canPrintInFrame() && this.pdfUrl) {
+          return this.loadPrintFrame().then(() => {
+            this.$refs.iframe.contentWindow.print();
+            return true;
+          });
+        }
+        const {
+          htmlPrintFlag = this.$options.htmlPrintFlag
+        } = this.$configs;
+        if (htmlPrintFlag && !this.$isMobile) return this.printAsHtml();
+        return false;
+      }).then((printed) => {
+        if (printed) return;
+        return this.guidePrint();
+      }).catch((err) => {
+        this.$message.error(err.message);
+      }).finally(() => {
+        this.printLoading = false;
+      });
+    },
+    // 能不能走隐藏 iframe 打印那份 PDF：取决于浏览器是否内置 PDF 渲染
+    canPrintInFrame() {
+      return !this.$isMobile && this.$util.canPreviewPdfInline();
+    },
+    // 浏览器打不了这份 PDF 时的引导：去系统浏览器打印（版式与预览完全一致），
+    // 或者下载下来自己打印。微信内置浏览器右上角「⋯」就有「在浏览器中打开」
+    guidePrint() {
+      if (!this.pdfUrl) throw new Error("打印文件尚未生成，请稍后重试");
+      const guideText = this.$configs.printGuideText || this.$options.printGuideText;
+      return this.$confirm(guideText, "打印", {
+        confirmButtonText: "下载 PDF",
+        cancelButtonText: "知道了",
+        type: "warning"
+      }).then(() => {
+        this.openPdfFile();
+      }).catch(() => {
+      });
+    },
+    // 打印纯 HTML，返回是否真的打印了（浏览器没有打印栈时为 false）
+    printAsHtml() {
+      return this.buildPrintHtml().then((html) => html ? this.$util.printHtml(html) : false);
+    },
+    // 组装打印文档：excel 报表本来就是 HTML，其余类型用 pdf.js 把每页画成图片
+    buildPrintHtml() {
+      const {
+        printScale = this.$options.printScale
+      } = this.$configs;
+      const title = this.reportInfo.NAME || this.$component.title || "报表";
+      const head = '<meta charset="utf-8"><title>' + title + "</title><style>@page{margin:8mm}body{margin:0}img{display:block;width:100%;page-break-after:always}img:last-of-type{page-break-after:auto}</style>";
+      if (this.reportInfo.TYPE === "excelReport") {
+        if (!this.reportHtml) return Promise.resolve("");
+        return Promise.resolve("<!doctype html><html><head>" + head + "<style>" + this.reportStyle + "</style></head><body>" + this.reportHtml + "</body></html>");
+      }
+      return this.$util.pdfDocToImages(this.pdfDoc, printScale).then((images) => {
+        if (!images.length) return "";
+        const body = images.map((src) => '<img src="' + src + '">').join("");
+        return "<!doctype html><html><head>" + head + "</head><body>" + body + "</body></html>";
+      });
+    },
+    // 打印用的 PDF 预览时已预取，这里只做兜底补取
+    ensurePdf() {
+      if (this.pdfUrl) return Promise.resolve();
+      if (this.reportInfo.TYPE === "wordReport") return Promise.resolve();
+      this.pdfPromise = this.pdfPromise || this.exportPdf();
+      return this.pdfPromise;
+    },
+    // 把 PDF 交给隐藏 iframe 并等它真正加载完。
+    // 同一份文件只加载一次，预载和点击打印共用同一个 Promise
+    loadPrintFrame() {
+      if (this.printFrameUrl === this.pdfUrl && this.printFramePromise) return this.printFramePromise;
+      const iframe = this.$refs.iframe;
+      if (!iframe) return Promise.reject(new Error("打印组件未就绪"));
+      this.printFrameUrl = this.pdfUrl;
+      const loading = new Promise((resolve, reject) => {
+        let timer = null;
+        const onLoad = () => {
+          clearTimeout(timer);
+          iframe.removeEventListener("load", onLoad);
+          resolve();
+        };
+        const load = () => {
+          iframe.addEventListener("load", onLoad);
+          timer = setTimeout(() => {
+            iframe.removeEventListener("load", onLoad);
+            reject(new Error("打印文件加载超时，请重试"));
+          }, 3e4);
+          this.printUrl = this.pdfUrl;
+        };
+        if (this.printUrl === this.pdfUrl) {
+          this.printUrl = "";
+          this.$nextTick(load);
+        } else {
+          load();
+        }
+      });
+      this.printFramePromise = loading.catch((err) => {
+        this.printFrameUrl = "";
+        this.printFramePromise = null;
+        throw err;
+      });
+      return this.printFramePromise;
+    },
+    openPdfFile() {
+      const a = document.createElement("a");
+      document.body.appendChild(a);
+      a.href = this.pdfUrl;
+      a.download = this.pdfName || this.reportInfo.NAME;
+      a.click();
+      document.body.removeChild(a);
+    },
+    downloadPdf() {
+      this.openPdfFile();
+    },
+    downloadWord() {
+      this.downloadWordLoading = true;
+      if (this.reportInfo.TYPE === "wordReport") {
+        this.printEditor.command.executeExportDocx({
+          filename: this.reportInfo.NAME
+        });
+        this.downloadWordLoading = false;
+      } else {
+        const {
+          params: queryParams = {}
+        } = this.$query;
+        const {
+          params = {}
+        } = this.$configs;
+        const _params = this.$formatParams(params);
+        const {
+          code = this.$query.code
+        } = this.$configs;
+        this.$http.save({
+          action: "exportWord",
+          entityId: "FM_FORM",
+          code,
+          id: this.$query.id,
+          ...queryParams,
+          ..._params
+        }, {
+          responseType: "blob"
+        }).then(({
+          blob,
+          filename
+        }) => {
+          var a = document.createElement("a");
+          document.body.appendChild(a);
+          const objectUrl = URL.createObjectURL(blob);
+          a.href = objectUrl;
+          a.download = filename;
+          a.click();
+          window.URL.revokeObjectURL(objectUrl);
+          document.body.removeChild(a);
+          this.downloadWordLoading = false;
+        }).catch((err) => {
+          this.$message.error(err.message);
+          this.downloadWordLoading = false;
+        });
+      }
+    }
+  },
+  mounted() {
+  },
+  created() {
+    this.getReportInfo();
+  },
+  beforeUnmount() {
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/src/views/ExportFilePage.js

@@ -0,0 +1,20 @@
+import BasePageVue from "@epxing/components/src/base-page/BasePage.vue";
+const _sfc_main = {
+  name: "epx-export-file-page",
+  extends: BasePageVue,
+  items: [
+    {
+      id: "nav",
+      title: "导航",
+      contentType: "header"
+    },
+    {
+      id: "export",
+      title: "导出",
+      contentType: "export-file"
+    }
+  ]
+};
+export {
+  _sfc_main as default
+};

package/dist/src/views/ExportPage.js

@@ -0,0 +1,20 @@
+import BasePageVue from "@epxing/components/src/base-page/BasePage.vue";
+const _sfc_main = {
+  name: "epx-export-page",
+  extends: BasePageVue,
+  items: [
+    {
+      id: "nav",
+      title: "导航",
+      contentType: "header"
+    },
+    {
+      id: "export",
+      title: "导出",
+      contentType: "export"
+    }
+  ]
+};
+export {
+  _sfc_main as default
+};