From 563c60ab9d465e275bf18b57fde7b51c4bc020da Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期三, 29 十一月 2023 15:32:56 +0800
Subject: [PATCH] 出入库明细单打印功能调整,新引入三方库:html2Canvas,jsPdf,vue-office

---
 src/views/overview/AddOverviewDialog.vue             |   17 +
 src/router/product/index.js                          |    9 +
 package-lock.json                                    |  222 +++++++++++++++++++++++++++++++
 src/views/reportForm/inboundOutboundDetail/index.vue |   16 +
 package.json                                         |    4 
 src/views/reportForm/outboundDetail/index.vue        |   23 ++-
 src/views/overview/previewExcel.vue                  |  101 ++++++++++++++
 7 files changed, 370 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7686237..979de2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,18 @@
       "name": "crm-web",
       "version": "0.1.0",
       "dependencies": {
+        "@vue-office/excel": "^1.4.7",
         "axios": "^1.4.0",
         "core-js": "^3.8.3",
         "docx-preview": "^0.1.18",
         "downloadjs": "^1.4.7",
         "element-ui": "^2.15.13",
+        "html2canvas": "^1.4.1",
         "js-cookie": "^3.0.5",
+        "jspdf": "^2.5.1",
         "vue": "^2.6.14",
+        "vue-cropper": "^0.6.4",
+        "vue-demi": "^0.13.11",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
       },
@@ -1749,7 +1754,6 @@
       "version": "7.22.10",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.10.tgz",
       "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2295,6 +2299,12 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -2353,6 +2363,22 @@
       "dev": true,
       "dependencies": {
         "@types/node": "*"
+      }
+    },
+    "node_modules/@vue-office/excel": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/@vue-office/excel/-/excel-1.4.7.tgz",
+      "integrity": "sha512-ouwgxE0tDp9amNx/itQLNmWIi9EmRpEJZ64YWOIuN65InYu+77qU6xi13iJvt1wvwtfQ3GN7aNUqWzMU8KLOjg==",
+      "hasInstallScript": true,
+      "peerDependencies": {
+        "@vue/composition-api": "^1.7.1",
+        "vue": "^2.0.0 || >=3.0.0",
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
       }
     },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
@@ -3427,6 +3453,17 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.15",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.15.tgz",
@@ -3572,6 +3609,14 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
+    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -3726,6 +3771,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmmirror.com/buffer/-/buffer-5.7.1.tgz",
@@ -3806,6 +3862,31 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz",
       "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==",
       "dev": true
+    },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -4345,6 +4426,14 @@
       },
       "peerDependencies": {
         "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
       }
     },
     "node_modules/css-loader": {
@@ -4926,6 +5015,12 @@
       "engines": {
         "node": ">= 4"
       }
+    },
+    "node_modules/dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
     },
     "node_modules/domutils": {
       "version": "2.8.0",
@@ -5894,6 +5989,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
@@ -6421,6 +6521,18 @@
       },
       "peerDependencies": {
         "webpack": "^5.20.0"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
       }
     },
     "node_modules/htmlparser2": {
@@ -6960,6 +7072,23 @@
       },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
       }
     },
     "node_modules/jszip": {
@@ -8522,6 +8651,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -9260,6 +9395,15 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
@@ -9387,8 +9531,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-      "dev": true
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -9557,6 +9700,15 @@
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.3.0.tgz",
       "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
       "dev": true
+    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
@@ -10103,6 +10255,15 @@
       "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
       "dev": true
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
+      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
@@ -10247,6 +10408,15 @@
       "dev": true,
       "engines": {
         "node": ">= 0.4"
+      }
+    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
     "node_modules/svg-tags": {
@@ -10439,6 +10609,14 @@
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
     },
     "node_modules/text-table": {
       "version": "0.2.0",
@@ -10722,6 +10900,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
@@ -10765,6 +10951,36 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-cropper": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.6.4.tgz",
+      "integrity": "sha512-U3bm17Li/Xwfw2t3pr8/hFE/tYhvwIWqepHK9IFC1TnX1KFd64VyfCD9nMBhPY91RyvMC6jSQgT/DyDNKuTpIQ=="
+    },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
diff --git a/package.json b/package.json
index 5b40fc3..4799391 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,18 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@vue-office/excel": "^1.4.7",
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "docx-preview": "^0.1.18",
     "downloadjs": "^1.4.7",
     "element-ui": "^2.15.13",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
+    "jspdf": "^2.5.1",
     "vue": "^2.6.14",
     "vue-cropper": "^0.6.4",
+    "vue-demi": "^0.13.11",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },
diff --git a/src/router/product/index.js b/src/router/product/index.js
index 61dafed..ffbae30 100644
--- a/src/router/product/index.js
+++ b/src/router/product/index.js
@@ -6,6 +6,7 @@
 const productCategory = (resolve) => require(["@/views/productManage/productCategory/index"], resolve) // 浜у搧绫诲埆
 const productList = (resolve) => require(["@/views/productManage/productCategory/ProductList"], resolve) // 浜у搧绫诲埆-浜у搧
 const overviewList = (resolve) => require(["@/views/overview/OverviewListView"], resolve) // 姒傝堪-浜у搧鍒楄〃
+const previewExcel = (resolve) => require(["@/views/overview/previewExcel"], resolve) // 姒傝堪-浜у搧鍒楄〃
 const reorderRules = (resolve) => require(["@/views/productManage/reorderRules/index"], resolve) // 閲嶈璐ц鍒�
 
 const appconfig = [
@@ -58,6 +59,14 @@
     }
   },
   {
+    path: "/overview/previewExcel",
+    name: "previewExcel",
+    component: previewExcel,
+    meta: {
+      title: "棰勮Excel"
+    }
+  },
+  {
     path: "/productManage/reorderRules",
     name: "reorderRules",
     component: reorderRules,
diff --git a/src/views/overview/AddOverviewDialog.vue b/src/views/overview/AddOverviewDialog.vue
index cb3b72c..50a1b04 100644
--- a/src/views/overview/AddOverviewDialog.vue
+++ b/src/views/overview/AddOverviewDialog.vue
@@ -902,11 +902,18 @@
       await printReceipts(this.editCommonConfig.infomation.id).then((res) => {
         console.log(res)
         if (res.code === 200) {
-          this.$message.success("鎵撳嵃鎴愬姛")
-          const link = document.createElement('a');
-          link.href = res.data;
-          link.download = '鍑哄簱鍗�.xlsx';
-          link.click();
+          // this.$message.success("鎵撳嵃鎴愬姛")
+          // const link = document.createElement('a');
+          // link.href = res.data;
+          // link.download = '鍑哄簱鍗�.xlsx';
+          // link.click();
+          this.$router.push({
+            name:"previewExcel",
+            params:{
+              url:res.data,
+              baseOperationType:this.editConfig.infomation.baseOperationType||undefined,
+            }
+          })
         }
       })
     }
diff --git a/src/views/overview/previewExcel.vue b/src/views/overview/previewExcel.vue
new file mode 100644
index 0000000..07acb3b
--- /dev/null
+++ b/src/views/overview/previewExcel.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div ref="elementToCrop" >
+      <div style="width: 100%;">
+        <vue-office-excel :minRowLength="0"  :src="excel" @rendered="rendered"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+export default {
+  name:"previewExcel",
+  props: {
+  },
+  data() {
+    return {
+      excel: '',//excel鏂囨。鍦板潃
+      cutWidth:200,
+    };
+  },
+  computed: {
+  },
+  created() {
+    if(this.$route.params.baseOperationType!=undefined){
+      this.excel=this.$route.params.url
+      if(this.this.$route.params.baseOperationType===1){
+        this.cutWidth=200
+      }else if(this.this.$route.params.baseOperationType===2){
+        this.cutWidth=315
+      }
+    }
+  },
+  mounted() {
+  },
+  watch: {
+  },
+  methods: {
+    rendered(){
+      console.log("娓叉煋瀹屾垚")
+      if(this.$route.params.baseOperationType!=undefined){
+        this.excel=this.$route.params.url
+        this.cropAndDownload()
+      }
+    },
+    async cropAndDownload() {
+      const elementToCrop = this.$refs.elementToCrop;
+      const canvas = await html2canvas(elementToCrop);
+      const croppedCanvas = document.createElement("canvas");
+      const croppedContext = croppedCanvas.getContext("2d");
+      croppedCanvas.width = canvas.width - this.cutWidth; // 鍘绘帀宸﹀彸鍚�100px
+      croppedCanvas.height = canvas.height - 100; // 鍘绘帀涓婁笅鍚�100px
+      // 鍦ㄦ柊鐨凜anvas涓婄粯鍒惰鍓悗鐨勫浘鍍�
+      croppedContext.drawImage(
+        canvas,
+        50, // 寮�濮嬭鍓殑宸︿晶浣嶇疆
+        20, // 寮�濮嬭鍓殑涓婁晶浣嶇疆
+        croppedCanvas.width, // 瑁佸壀鍚庣殑瀹藉害
+        croppedCanvas.height-300, // 瑁佸壀鍚庣殑楂樺害
+        0, // 鏂癈anvas涓粯鍒剁殑宸︿晶浣嶇疆
+        0, // 鏂癈anvas涓粯鍒剁殑涓婁晶浣嶇疆
+        croppedCanvas.width, // 鏂癈anvas涓粯鍒剁殑瀹藉害
+        croppedCanvas.height // 鏂癈anvas涓粯鍒剁殑楂樺害
+      );
+      // 灏嗚鍓悗鐨凜anvas杞崲涓篋ataURL
+      const croppedImage = croppedCanvas.toDataURL("image/png");
+      // 鏇存柊鏁版嵁锛屼互鍦ㄩ〉闈笂鏄剧ず瑁佸壀鍚庣殑鍥剧墖
+      this.croppedImage = croppedImage;
+      // 鍒涘缓PDF鏂囨。
+      const pdf = new jsPDF({
+        unit:"mm",
+        format:"a4"
+      });
+      // A4
+      const a4Width = 210;
+      const a4Height = 297;
+      // 璁$畻缂╂斁姣斾緥锛岀‘淇漜anvas绛夋瘮渚嬬缉鏀鹃�傚簲A4绾�
+      const scale = Math.min(a4Width / canvas.width, a4Height / canvas.height);
+      // 璁$畻缂╂斁鍚庣殑瀹介珮
+      const scaledWidth = canvas.width * scale;
+      const scaledHeight = canvas.height * scale;
+      // 灏哻anvas鍏冪礌杞崲涓簆ng锛屾彃鍏ュ埌PDF鏂囨。涓�
+      pdf.addImage(croppedImage, "PNG",0,0,scaledWidth,scaledHeight);
+      // 淇濆瓨PDF鏂囨。
+      pdf.save("export.pdf");
+    },
+  },
+  components: {
+    VueOfficeExcel,
+  },
+};
+</script>
+<style scoped lang="scss">
+.vue-office-excel{
+  height: 1000px;
+}
+</style>
diff --git a/src/views/reportForm/inboundOutboundDetail/index.vue b/src/views/reportForm/inboundOutboundDetail/index.vue
index f75ab04..fa95d2b 100644
--- a/src/views/reportForm/inboundOutboundDetail/index.vue
+++ b/src/views/reportForm/inboundOutboundDetail/index.vue
@@ -211,15 +211,17 @@
           page: this.pagerOptions.currPage,
           pageSize: this.pagerOptions.pageSize
         }).then((res) => {
-          if (res.code === 200) {
+          if (res.code === 200&&res.data) {
             res.data.map((item)=>{
                 let dateObject = new Date(item.date);  
                 let formattedDateString = dateObject.toISOString().split('T')[0];  
                 item.date=formattedDateString
             })
-            this.tableList.tableInfomation = res.data
-            this.pagerOptions.totalCount = res.total
+            this.tableList.tableInfomation = res.data||[]
+          }else{
+            this.tableList.tableInfomation = res.data||[]
           }
+          this.pagerOptions.totalCount = res.total
         })
       } else {
         await getHistory({
@@ -228,7 +230,7 @@
           page: this.pagerOptions.currPage,
           pageSize: this.pagerOptions.pageSize
         }).then((res) => {
-          if (res.code === 200) {
+          if (res.code === 200&&res.data) {
             res.data.map((item)=>{
                 if(item.status===""){
                   item.status=4
@@ -237,9 +239,11 @@
                 let formattedDateString = dateObject.toISOString().split('T')[0];  
                 item.date=formattedDateString
             })
-            this.tableList.tableInfomation = res.data?res.data:[]
-            this.pagerOptions.totalCount = res.total
+            this.tableList.tableInfomation = res.data||[]
+          }else{
+            this.tableList.tableInfomation = res.data||[]
           }
+          this.pagerOptions.totalCount = res.total
         })
       }
     },
diff --git a/src/views/reportForm/outboundDetail/index.vue b/src/views/reportForm/outboundDetail/index.vue
index 7040834..e7c63ca 100644
--- a/src/views/reportForm/outboundDetail/index.vue
+++ b/src/views/reportForm/outboundDetail/index.vue
@@ -14,7 +14,7 @@
       </div>
     </div>
     <!-- 缂栬緫 -->
-    <AddOverviewDialog v-if="editConfig.visible" :edit-common-config="editConfig" :add-name="this.$route.params.name" />
+    <AddOverviewDialog :workType="workType" v-if="editConfig.visible" :edit-common-config="editConfig" :add-name="this.$route.params.name" />
   </div>
 </template>
 
@@ -23,7 +23,9 @@
 import { getHistory,getOperationInfo } from "@/api/reportForm/inventoryRwport"
 // import { getProductOperatonList } from "@/api/product/product"
 
-import AddOverviewDialog from "@/views/reportForm/outboundDetail/AddOutboundDetailDialog.vue"
+// import AddOverviewDialog from "@/views/reportForm/outboundDetail/AddOutboundDetailDialog.vue"
+import AddOverviewDialog from "@/views/overview/AddOverviewDialog"
+
 import { getDataByType } from "@/api/data"
 export default {
   name: "outboundDetail",
@@ -33,6 +35,7 @@
   computed: {},
   data() {
     return {
+      workType:2,
       tableList: {},
       showcol: ["鐘舵��"],
       searchOptions: [],
@@ -196,15 +199,17 @@
           page: this.pagerOptions.currPage,
           pageSize: this.pagerOptions.pageSize
         }).then((res) => {
-          if (res.code === 200) {
+          if (res.code === 200&&res.data) {
             res.data.map((item) => {
               let dateObject = new Date(item.date);
               let formattedDateString = dateObject.toISOString().split('T')[0];
               item.date = formattedDateString
             })
-            this.tableList.tableInfomation = res.data
-            this.pagerOptions.totalCount = res.total
+            this.tableList.tableInfomation = res.data||[]
+          }else{
+            this.tableList.tableInfomation = res.data||[]
           }
+          this.pagerOptions.totalCount = res.total
         })
       } else {
         await getHistory({
@@ -213,7 +218,7 @@
           page: this.pagerOptions.currPage,
           pageSize: this.pagerOptions.pageSize
         }).then((res) => {
-          if (res.code === 200) {
+          if (res.code === 200&&res.data) {
             res.data.map((item) => {
               if(item.status===""){
                 item.status=4
@@ -222,9 +227,11 @@
               let formattedDateString = dateObject.toISOString().split('T')[0];
               item.date = formattedDateString
             })
-            this.tableList.tableInfomation = res.data ? res.data : []
-            this.pagerOptions.totalCount = res.total
+            this.tableList.tableInfomation = res.data || []
+          }else{
+            this.tableList.tableInfomation = res.data || []
           }
+          this.pagerOptions.totalCount = res.total
         })
       }
     },

--
Gitblit v1.8.0