完成小件藏品导出PDF

package-lock.json

@@ -1061,7 +1061,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.4.tgz?cache=0&sync_timestamp=1630618785994&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.15.4.tgz",
       "integrity": "sha1-/RfRa/34eObdAtGXU6OfqKjZyEo=",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -1365,6 +1364,12 @@
       "integrity": "sha1-Y7t9Bn2xB8weRXwwO8JdUR/r9ss=",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.nlark.com/@types/range-parser/download/@types/range-parser-1.2.4.tgz",
@@ -2378,8 +2383,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz",
-      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k=",
-      "dev": true
+      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k="
     },
     "autoprefixer": {
       "version": "9.8.6",
@@ -2568,6 +2572,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.5.1.tgz?cache=0&sync_timestamp=1605123440207&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbase64-js%2Fdownload%2Fbase64-js-1.5.1.tgz",
@@ -2855,6 +2864,11 @@
         "node-releases": "^1.1.75"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npm.taobao.org/buffer/download/buffer-4.9.2.tgz?cache=0&sync_timestamp=1606098159535&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-4.9.2.tgz",
@@ -3030,6 +3044,22 @@
       "integrity": "sha1-FQqvZJpIvuUxEEz+2lf5LOWH9uU=",
       "dev": true
     },
+    "canvg": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.9.tgz",
+      "integrity": "sha512-rDXcnRPuz4QHoCilMeoTxql+fvGqNAxp+qV/KHD8rOiJSAfVjFclbdUNHD2Uqfthr+VMg17bD2bVuk6F07oLGw==",
+      "optional": true,
+      "requires": {
+        "@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"
+      }
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npm.taobao.org/case-sensitive-paths-webpack-plugin/download/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -3909,6 +3939,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.1.tgz",
+      "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
     "css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.nlark.com/css-loader/download/css-loader-3.6.0.tgz",
@@ -4532,6 +4570,12 @@
         }
       }
     },
+    "dompurify": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.3.tgz",
+      "integrity": "sha512-dqnqRkPMAjOZE0FogZ+ceJNM2dZ3V/yNOuFB7+39qpO93hHhfRpHw3heYQC7DPK9FqbQTfBKUJhiSfz4MvXYwg==",
+      "optional": true
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.nlark.com/domutils/download/domutils-1.7.0.tgz?cache=0&sync_timestamp=1630106606599&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdomutils%2Fdownload%2Fdomutils-1.7.0.tgz",
@@ -5699,6 +5743,11 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npm.taobao.org/figgy-pudding/download/figgy-pudding-3.5.2.tgz",
@@ -6390,6 +6439,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.3.2.tgz",
+      "integrity": "sha512-4+zqv87/a1LsaCrINV69wVLGG8GBZcYBboz1JPWEgiXcWoD9kroLzccsBRU/L9UlfV2MAZ+3J92U9IQPVMDeSQ==",
+      "requires": {
+        "css-line-break": "2.0.1",
+        "text-segmentation": "^1.0.2"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.nlark.com/htmlparser2/download/htmlparser2-6.1.0.tgz?cache=0&sync_timestamp=1631386311915&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-6.1.0.tgz",
@@ -7359,6 +7417,21 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jspdf": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.4.0.tgz",
+      "integrity": "sha512-nsZ92YfbNG/EimR1yqmOkxf2D4iJRypBsw7pvP1aPiIEnoGITaLl6XDR/GYA36/R29vMZSBedpEhBCzutSGytA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz",
@@ -8705,8 +8778,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.nlark.com/performance-now/download/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picomatch": {
       "version": "2.3.0",
@@ -9605,6 +9677,15 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
@@ -9769,8 +9850,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz?cache=0&sync_timestamp=1626993001371&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.9.tgz",
-      "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=",
-      "dev": true
+      "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -10070,6 +10150,12 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=",
+      "optional": true
+    },
     "rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-2.7.1.tgz?cache=0&sync_timestamp=1589682814592&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frimraf%2Fdownload%2Frimraf-2.7.1.tgz",
@@ -10775,6 +10861,12 @@
       "integrity": "sha1-g26zyDgv4pNv6vVEYxAXzn1Ho88=",
       "dev": true
     },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
+    },
     "stackframe": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/stackframe/download/stackframe-1.2.0.tgz",
@@ -10973,6 +11065,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "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
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
@@ -11177,6 +11275,14 @@
         }
       }
     },
+    "text-segmentation": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
+      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
+      "requires": {
+        "utrie": "^1.0.1"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npm.taobao.org/text-table/download/text-table-0.2.0.tgz",
@@ -11715,6 +11821,21 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
+      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.1"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
+          "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
+        }
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.nlark.com/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1622213136953&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz",

package.json

@@ -12,6 +12,8 @@
     "core-js": "^3.6.5",
     "default-passive-events": "^2.0.0",
     "element-ui": "^2.15.6",
+    "html2canvas": "^1.3.2",
+    "jspdf": "^2.4.0",
     "moment": "^2.29.1",
     "vue": "^2.6.11",
     "vue-json-excel": "^0.3.0",

src/utils/htmlToPdf.js

@@ -0,0 +1,88 @@
+/* eslint-disable */
+import html2canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+
+/**
+ * @param  ele          要生成 pdf 的DOM元素（容器）
+ * @param  padfName     PDF文件生成后的文件名字
+ * */
+
+function downloadPDF (ele, pdfName) {
+  const eleW = ele.offsetWidth// 获得该容器的宽
+  const eleH = ele.offsetHeight// 获得该容器的高
+
+  const eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
+  const eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
+
+  var canvas = document.createElement('canvas')
+  var abs = 0
+
+  const win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
+  const win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
+
+  if (win_out > win_in) {
+    // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
+    abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半
+    // console.log(a, '新abs');
+  }
+
+  canvas.width = eleW * 2 // 将画布宽&&高放大两倍
+  canvas.height = eleH * 2
+
+  var context = canvas.getContext('2d')
+
+  context.scale(2, 2)
+
+  context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
+  // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
+  // translate的时候，要把这个差值去掉
+
+  // html2canvas(element).then( (canvas)=>{ //报错
+  // html2canvas(element[0]).then( (canvas)=>{
+  html2canvas(ele, {
+    dpi: 300,
+    // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
+    useCORS: true // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
+  }).then((canvas) => {
+    var contentWidth = canvas.width
+    var contentHeight = canvas.height
+    // 一页pdf显示html页面生成的canvas高度;
+    var pageHeight = contentWidth / 592.28 * 841.89
+    // 未生成pdf的html页面高度
+    var leftHeight = contentHeight
+    // 页面偏移
+    var position = 0
+    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+    var imgWidth = 595.28
+    var imgHeight = 595.28 / contentWidth * contentHeight
+
+    var pageData = canvas.toDataURL('image/jpeg', 1.0)
+
+    var pdf = new JsPDF('', 'pt', 'a4')
+
+    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+    // 当内容未超过pdf一页显示的范围，无需分页
+    if (leftHeight < pageHeight) {
+      // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
+      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+      // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
+    } else { // 分页
+      while (leftHeight > 0) {
+        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+        leftHeight -= pageHeight
+        position -= 841.89
+        // 避免添加空白页
+        if (leftHeight > 0) {
+          pdf.addPage()
+        }
+      }
+    }
+
+    // 可动态生成
+    pdf.save(pdfName)
+  })
+}
+
+export default {
+  downloadPDF
+}

src/views/collect/collect0.vue

@@ -33,7 +33,7 @@
               >
               </el-option>
             </el-select>
-            <span>藏品名称：</span>
+            <span>藏品名称/质地：</span>
             <el-input
               v-model="mydata.searchKey"
               placeholder="请输入"

src/views/collect/collect0_look.vue

@@ -1,6 +1,61 @@
 <!--  -->
 <template>
   <div class="holding3_look">
+        <!-- 导出pdf的盒子，平时不显示，点击导出之后显示 -->
+        <div class="myPdf" v-if="isShow">
+          <div id="myPdfCon">
+            <img :src="baseURL+myObj.thumb" alt="" />
+                    <div class="title">
+            <h3>{{ myObj.name }}</h3>
+            <div v-if="myObj.status==='保管中'">保管中</div>
+            <div v-else-if="myObj.status==='已提用'" style="background-color: #ccc;">已提用</div>
+            <div v-else style="background-color: #85ce61;">已注销</div>
+          </div>
+          <div class="info">
+            <div class="row">
+              <div><span>藏品名称：</span>{{ myObj.name }}</div>
+              <div><span>总登记号：</span>{{ myObj.registerNum }}</div>
+            </div>
+            <div class="row">
+              <div><span>编号类型：</span>{{ myObj.numTypeId }}</div>
+              <div><span>藏品编号：</span>{{ myObj.num }}</div>
+            </div>
+            <div class="row">
+              <div><span>原名：</span>{{ myObj.primitiveName }}</div>
+              <div><span>年代：</span>{{ myObj.age }}</div>
+            </div>
+            <div class="row">
+              <div><span>文物类别：</span>{{ myObj.goodsTypeName }}</div>
+              <div><span>文物质地：</span>{{ myObj.texture }}</div>
+            </div>
+            <div class="row">
+              <div><span>数量类型：</span>{{ myObj.amountType}}</div>
+              <div><span>具体数量：</span>{{ myObj.amount }}</div>
+            </div>
+            <div class="row">
+              <div><span>通长：</span>{{ myObj.length }}</div>
+              <div><span>通宽：</span>{{ myObj.width }}</div>
+              <div><span>通高：</span>{{ myObj.height }}</div>
+            </div>
+            <div class="row">
+              <!-- <div><span>文物类别：</span>{{myObj.goodsTypeName}}</div> -->
+              <div><span>具体质量：</span>{{ myObj.quality }}</div>
+              <div><span>完残程度：</span>{{ myObj.integrity }}</div>
+            </div>
+            <div class="row">
+              <div><span>完残状况：</span>{{ myObj.repairRemark }}</div>
+            </div>
+            <div class="row">
+              <!-- <div><span>文物价格：</span>1111</div> -->
+            </div>
+            <div class="row">
+              <div><span>保存状态：</span>{{ myObj.repair }}</div>
+              <div><span>入藏时间范围：</span>{{ myObj.checkInScope }}</div>
+            </div>
+          </div>
+        </div>
+
+        </div>
     <TabList/>
     <div class="right">
       <div class="top">
@@ -12,6 +67,10 @@
         </el-breadcrumb>
       </div>
       <div class="conten">
+                <div class="daochu">
+          <el-button size="small" @click="exPdf">导 出</el-button>
+        </div>
+
         <div class="conten_left">
           <img :src="baseURL+myObj.thumb" alt="" />
         </div>
@@ -54,7 +113,7 @@
               <div><span>完残程度：</span>{{ myObj.integrity }}</div>
             </div>
             <div class="row">
-              <!-- <div><span>文物价格：</span>1111</div> -->
+              <div><span>完残状况：</span>{{ myObj.repairRemark }}</div>
             </div>
             <div class="row">
               <div><span>保存状态：</span>{{ myObj.repair }}</div>
@@ -106,6 +165,7 @@
 </template>
 
 <script>
+import htmlToPdf from '@/utils/htmlToPdf'
 import { getFileList } from '../../apis/holding'
 import axios from '@/utils/request'
 import TabList from '@/components/tabLeft2.vue'
@@ -116,6 +176,7 @@ export default {
   data () {
     // 这里存放数据
     return {
+      isShow: false,
       // 服务器前缀地址
       baseURL: '',
       myObj: [],
@@ -142,6 +203,14 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击导出
+    exPdf () {
+      this.isShow = true
+      setTimeout(() => {
+        htmlToPdf.downloadPDF(document.querySelector('#myPdfCon'), this.myObj.name)
+        this.isShow = false
+      }, 100)
+    },
     // 获取附件列表
     async getFileList () {
       const res = await getFileList(this.myObj.id, this.resource)
@@ -182,6 +251,70 @@ body .el-table::before {
 }
 //@import url(); 引入公共css类
 .holding3_look {
+      .title {
+        display: flex;
+        border-bottom: 2px solid #ccc;
+        height: 40px;
+        align-items: center;
+        margin: 0 20px;
+        h3 {
+          font-size: 20px;
+          color: black;
+          margin: 0 25px 0 35px;
+        }
+        & > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 50px;
+          height: 20px;
+          background-color: #40a9ff;
+          color: #fff;
+          font-size: 13px;
+          border-radius: 5px;
+        }
+      }
+      .info {
+        margin: 20px 0 0 55px;
+        width: 90%;
+        // margin-bottom: 60px;
+        .row {
+          display: flex;
+          & > div {
+            padding-left: 20px;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            height: 43px;
+            border: 1px solid #ccc;
+            font-size: 16px;
+            color: black;
+            span {
+              font-weight: 700;
+            }
+          }
+        }
+      }
+  .myPdf{
+    z-index: 999;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    #myPdfCon {
+      &>img {
+        max-width: 800px;
+        max-height: 320px;
+      }
+      padding: 20px 0;
+      background-color: #fff;
+      text-align: center;
+      margin: 100px auto;
+      width: 1000px;
+    }
+      }
   .mydown {
     color: #40a9ff;
   }
@@ -205,6 +338,12 @@ body .el-table::before {
     }
   }
   .conten {
+    position: relative;
+    .daochu {
+      position: absolute;
+      right: 130px;
+      top: 12px;
+    }
     display: flex;
     flex-wrap: wrap;
     flex: 1;
@@ -226,49 +365,6 @@ body .el-table::before {
     .conten_right {
       flex: 1;
       height: 400px;
-      .title {
-        display: flex;
-        border-bottom: 2px solid #ccc;
-        height: 40px;
-        align-items: center;
-        margin: 0 20px;
-        h3 {
-          font-size: 20px;
-          color: black;
-          margin: 0 25px 0 35px;
-        }
-        & > div {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 50px;
-          height: 20px;
-          background-color: #40a9ff;
-          color: #fff;
-          font-size: 13px;
-          border-radius: 5px;
-        }
-      }
-      .info {
-        margin: 20px 0 0 55px;
-        width: 90%;
-        // margin-bottom: 60px;
-        .row {
-          display: flex;
-          & > div {
-            padding-left: 20px;
-            flex: 1;
-            height: 43px;
-            line-height: 43px;
-            border: 1px solid #ccc;
-            font-size: 16px;
-            color: black;
-            span {
-              font-weight: 700;
-            }
-          }
-        }
-      }
     }
     .conten_bot {
       position: relative;

src/views/holding/holding0_DiaEdit.vue

@@ -145,6 +145,11 @@
         </el-form-item>
       </div>
       <div class="row">
+         <el-form-item label="完残状况：">
+          <el-input v-model="ruleForm.repairRemark" placeholder="请输入"></el-input>
+        </el-form-item>
+      </div>
+      <div class="row">
         <el-form-item label="数量类型：">
           <el-select
             v-model="ruleForm.amountType"
@@ -321,6 +326,7 @@ export default {
       baseURL: '',
       token: '',
       ruleForm: {
+        repairRemark: '',
         age: '', // 年代
         amount: '', // 数量
         amountType: '', // 数量类型， 0：单件， 1：一套多件

src/views/holding/holding0_Dialog.vue

@@ -144,6 +144,13 @@
           </el-select>
         </el-form-item>
       </div>
+
+      <div class="row">
+         <el-form-item label="完残状况：">
+          <el-input v-model="ruleForm.repairRemark" placeholder="请输入"></el-input>
+        </el-form-item>
+      </div>
+
       <div class="row">
         <el-form-item label="数量类型：">
           <el-select
@@ -323,6 +330,7 @@ export default {
       baseURL: '',
       token: '',
       ruleForm: {
+        repairRemark: '', // 完残状况
         age: '', // 年代
         amount: '', // 数量
         amountType: '', // 数量类型， 0：单件， 1：一套多件

src/views/holding/holding0_audit_Dia.vue

@@ -42,6 +42,9 @@
         <div><span>具体质量：</span>{{ myObj.quality }}</div>
         <div><span>完残程度：</span>{{ myObj.integrity }}</div>
       </div>
+            <div class="row">
+                <div><span>完残状况：</span>{{ myObj.repairRemark }}</div>
+            </div>
       <div class="row">
         <div><span>保存状态：</span>{{ myObj.repair }}</div>
         <div><span>入藏时间范围：</span>{{ myObj.checkInScope }}</div>

src/views/holding/holding3.vue

@@ -33,7 +33,7 @@
               >
               </el-option>
             </el-select>
-            <span>藏品名称：</span>
+            <span>藏品名称/质地：</span>
             <el-input
               v-model="mydata.searchKey"
               placeholder="请输入"

src/views/holding/holding3_look.vue

@@ -1,7 +1,76 @@
 <!--  -->
 <template>
   <div class="holding3_look">
-    <TabList :ind='3'/>
+    <!-- 导出pdf的盒子，平时不显示，点击导出之后显示 -->
+    <div class="myPdf" v-if="isShow">
+      <div id="myPdfCon">
+        <img :src="baseURL + myObj.thumb" alt="" />
+        <div class="title">
+          <h3>{{ myObj.name }}</h3>
+          <div v-if="myObj.status === '已入库'">已入库</div>
+          <div
+            v-else-if="myObj.status === '待入库'"
+            style="background-color: #ccc"
+          >
+            待入库
+          </div>
+          <div v-else style="background-color: #85ce61">已出库</div>
+        </div>
+        <div class="info">
+          <div class="row">
+            <div><span>藏品名称：</span>{{ myObj.name }}</div>
+            <div><span>总登记号：</span>{{ myObj.registerNum }}</div>
+          </div>
+          <div class="row">
+            <div><span>编号类型：</span>{{ myObj.numTypeId }}</div>
+            <div><span>藏品编号：</span>{{ myObj.num }}</div>
+          </div>
+          <div class="row">
+            <div><span>原名：</span>{{ myObj.primitiveName }}</div>
+            <div><span>年代：</span>{{ myObj.age }}</div>
+          </div>
+          <div class="row">
+            <div><span>文物类别：</span>{{ myObj.goodsTypeName }}</div>
+            <div><span>文物质地：</span>{{ myObj.texture }}</div>
+          </div>
+          <div class="row">
+            <div><span>数量类型：</span>{{ myObj.amountType }}</div>
+            <div><span>具体数量：</span>{{ myObj.amount }}</div>
+          </div>
+          <div class="row">
+            <div><span>通长：</span>{{ myObj.length }}</div>
+            <div><span>通宽：</span>{{ myObj.width }}</div>
+            <div><span>通高：</span>{{ myObj.height }}</div>
+          </div>
+          <div class="row">
+            <!-- <div><span>文物类别：</span>{{myObj.goodsTypeName}}</div> -->
+            <div><span>具体质量：</span>{{ myObj.quality }}</div>
+            <div><span>完残程度：</span>{{ myObj.integrity }}</div>
+          </div>
+
+            <div class="row">
+                <div><span>完残状况：</span>{{ myObj.repairRemark }}</div>
+            </div>
+
+          <div class="row">
+            <!-- <div><span>文物价格：</span>1111</div> -->
+          </div>
+          <div class="row">
+            <div><span>保存状态：</span>{{ myObj.repair }}</div>
+            <div><span>入藏时间范围：</span>{{ myObj.checkInScope }}</div>
+          </div>
+          <div class="row">
+            <div>
+              <span>入库位置：</span>{{ rukuTxt ? rukuTxt : "-" }}
+            </div>
+            <div>
+              <span>出库位置：</span>{{ myObj.outPath ? myObj.outPath : "-" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <TabList :ind="3" />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -12,15 +81,24 @@
         </el-breadcrumb>
       </div>
       <div class="conten">
+        <div class="daochu">
+          <el-button size="small" @click="exPdf">导 出</el-button>
+        </div>
+
         <div class="conten_left">
-          <img :src="baseURL+myObj.thumb" alt="" />
+          <img :src="baseURL + myObj.thumb" alt="" />
         </div>
         <div class="conten_right">
           <div class="title">
             <h3>{{ myObj.name }}</h3>
-            <div v-if="myObj.status==='已入库'">已入库</div>
-            <div v-else-if="myObj.status==='待入库'" style="background-color: #ccc;">待入库</div>
-            <div v-else style="background-color: #85ce61;">已出库</div>
+            <div v-if="myObj.status === '已入库'">已入库</div>
+            <div
+              v-else-if="myObj.status === '待入库'"
+              style="background-color: #ccc"
+            >
+              待入库
+            </div>
+            <div v-else style="background-color: #85ce61">已出库</div>
           </div>
           <div class="info">
             <div class="row">
@@ -40,7 +118,7 @@
               <div><span>文物质地：</span>{{ myObj.texture }}</div>
             </div>
             <div class="row">
-              <div><span>数量类型：</span>{{ myObj.amountType}}</div>
+              <div><span>数量类型：</span>{{ myObj.amountType }}</div>
               <div><span>具体数量：</span>{{ myObj.amount }}</div>
             </div>
             <div class="row">
@@ -54,35 +132,45 @@
               <div><span>完残程度：</span>{{ myObj.integrity }}</div>
             </div>
             <div class="row">
-              <!-- <div><span>文物价格：</span>1111</div> -->
+                <div><span>完残状况：</span>{{ myObj.repairRemark }}</div>
             </div>
             <div class="row">
               <div><span>保存状态：</span>{{ myObj.repair }}</div>
               <div><span>入藏时间范围：</span>{{ myObj.checkInScope }}</div>
             </div>
             <div class="row">
-              <div><span>入库位置：</span>
-                     <el-cascader
-                    v-if="myObj.location&&myObj.location.length===3"
-                    placeholder=""
-                    disabled
-                    style="width:80%"
-                    :props="{value:'id',label:'name'}"
-                    v-model="myObj.location"
-                    :options="options"
-                  ></el-cascader>
-                  <i v-else>-</i>
+              <div>
+                <span>入库位置：</span>
+                <el-cascader
+                  ref="cascaderAddr"
+                  v-if="myObj.location && myObj.location.length === 3"
+                  placeholder=""
+                  disabled
+                  style="width: 80%"
+                  :props="{ value: 'id', label: 'name' }"
+                  v-model="myObj.location"
+                  :options="options"
+                ></el-cascader>
+                <i v-else>-</i>
+              </div>
+              <div>
+                <span>出库位置：</span>{{ myObj.outPath ? myObj.outPath : "-" }}
               </div>
-              <div><span>出库位置：</span>{{myObj.outPath?myObj.outPath:'-'}}</div>
             </div>
           </div>
         </div>
+
         <div class="conten_bot">
           <div class="resource">
             <div class="select">
               <h3>数字资源</h3>
               <el-select v-model="resource" placeholder="请选择">
-                <el-option v-for="item in affix" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                <el-option
+                  v-for="item in affix"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
               </el-select>
             </div>
             <!-- 表格 -->
@@ -92,27 +180,38 @@
               border
               style="width: 100%"
             >
-              <el-table-column label="缩略图" width="160" v-if="this.resource==='img'">
-                <template #default='{row}'>
+              <el-table-column
+                label="缩略图"
+                width="160"
+                v-if="this.resource === 'img'"
+              >
+                <template #default="{ row }">
                   <div class="smimg">
-                    <img :src="baseURL+row.filePath" alt="" />
+                    <img :src="baseURL + row.filePath" alt="" />
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column prop="name" label="附件名称" > </el-table-column>
+              <el-table-column prop="name" label="附件名称"> </el-table-column>
               <!-- <el-table-column prop="address" label="附件说明" ></el-table-column> -->
               <!-- <el-table-column prop="name" label="上传人" width="360"> </el-table-column> -->
-              <el-table-column prop="updateTime" label="上传时间" width="360"> </el-table-column>
+              <el-table-column prop="updateTime" label="上传时间" width="360">
+              </el-table-column>
               <el-table-column label="操作" width="360">
-                <template #default='{row}'>
-                  <a :href="baseURL+row.filePath" :download="baseURL+row.filePath" target='_blank' class="mydown" >下 载</a>
+                <template #default="{ row }">
+                  <a
+                    :href="baseURL + row.filePath"
+                    :download="baseURL + row.filePath"
+                    target="_blank"
+                    class="mydown"
+                    >下 载</a
+                  >
                 </template>
               </el-table-column>
             </el-table>
           </div>
           <!-- 底部的返回按钮 -->
           <div class="btn">
-            <el-button @click='$router.go(-1)'>返 回</el-button>
+            <el-button @click="$router.go(-1)">返 回</el-button>
           </div>
         </div>
       </div>
@@ -121,8 +220,9 @@
 </template>
 
 <script>
+import htmlToPdf from '@/utils/htmlToPdf'
 import { getTreeList } from '@/apis/statistics0'
-import { getFileList } from '../../apis/holding'
+import { getFileList } from '@/apis/holding'
 import axios from '@/utils/request'
 import TabList from '@/components/tabLeft.vue'
 export default {
@@ -132,13 +232,14 @@ export default {
   data () {
     // 这里存放数据
     return {
+      rukuTxt: '',
+      isShow: false,
       options: [],
       // 服务器前缀地址
       baseURL: '',
       myObj: [],
       // 表格数据
-      tableData: [
-      ],
+      tableData: [],
       resource: 'video',
       affix: [
         { label: '高清图片', value: 'img' },
@@ -159,12 +260,26 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击导出
+    exPdf () {
+      this.isShow = true
+      // 获取入库位置文本
+      if (this.$refs.cascaderAddr) {
+        const thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()
+        const txt = thsAreaCode[0].pathLabels.join('/')
+        this.rukuTxt = txt
+      }
+      setTimeout(() => {
+        htmlToPdf.downloadPDF(document.querySelector('#myPdfCon'), this.myObj.name)
+        this.isShow = false
+      }, 100)
+    },
     // 获取附件列表
     async getFileList () {
       const res = await getFileList(this.myObj.id, this.resource)
       // console.log(666, res)
       this.tableData = res.data
-      this.tableData.forEach(v => {
+      this.tableData.forEach((v) => {
         v.updateTime = v.updateTime.slice(0, 10)
       })
     }
@@ -202,10 +317,87 @@ body {
   overflow: auto;
 }
 body .el-table::before {
-    z-index: inherit;
+  z-index: inherit;
 }
 //@import url(); 引入公共css类
 .holding3_look {
+  .title {
+    display: flex;
+    border-bottom: 2px solid #ccc;
+    height: 40px;
+    align-items: center;
+    margin: 0 20px;
+    h3 {
+      font-size: 20px;
+      color: black;
+      margin: 0 25px 0 35px;
+    }
+    & > div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 20px;
+      background-color: #40a9ff;
+      color: #fff;
+      font-size: 13px;
+      border-radius: 5px;
+    }
+  }
+  .info {
+    margin: 20px 0 0 55px;
+    width: 90%;
+    // margin-bottom: 60px;
+    .row {
+      /deep/.el-input__inner {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        background-color: transparent;
+        border: none;
+        font-size: 16px;
+        color: black;
+      }
+      /deep/.el-input__suffix-inner {
+        display: none;
+      }
+      display: flex;
+      align-items: center;
+      & > div {
+        padding-left: 20px;
+        flex: 1;
+        height: 38px;
+        display: flex;
+        align-items: center;
+        border: 1px solid #ccc;
+        font-size: 16px;
+        color: black;
+        span {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  .myPdf {
+    z-index: 999;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    #myPdfCon {
+      &>img {
+        max-width: 800px;
+        max-height: 320px;
+      }
+      padding: 20px 0;
+      background-color: #fff;
+      text-align: center;
+      margin: 100px auto;
+      width: 1000px;
+    }
+  }
   .mydown {
     color: #40a9ff;
   }
@@ -229,6 +421,12 @@ body .el-table::before {
     }
   }
   .conten {
+    position: relative;
+    .daochu {
+      position: absolute;
+      right: 130px;
+      top: 12px;
+    }
     display: flex;
     flex-wrap: wrap;
     flex: 1;
@@ -250,63 +448,11 @@ body .el-table::before {
     .conten_right {
       flex: 1;
       height: 400px;
-      .title {
-        display: flex;
-        border-bottom: 2px solid #ccc;
-        height: 40px;
-        align-items: center;
-        margin: 0 20px;
-        h3 {
-          font-size: 20px;
-          color: black;
-          margin: 0 25px 0 35px;
-        }
-        & > div {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 50px;
-          height: 20px;
-          background-color: #40a9ff;
-          color: #fff;
-          font-size: 13px;
-          border-radius: 5px;
-        }
-      }
-      .info {
-        margin: 20px 0 0 55px;
-        width: 90%;
-        // margin-bottom: 60px;
-        .row {
-      /deep/.el-input__inner{
-        padding: 0;
-        background-color: transparent;
-        border: none;
-        font-size: 16px;
-        color: black;      }
-      /deep/.el-input__suffix-inner{
-        opacity: 0;
-      }
-          display: flex;
-          & > div {
-            padding-left: 20px;
-            flex: 1;
-            height: 43px;
-            line-height: 43px;
-            border: 1px solid #ccc;
-            font-size: 16px;
-            color: black;
-            span {
-              font-weight: 700;
-            }
-          }
-        }
-      }
     }
     .conten_bot {
       position: relative;
 
-      .btn{
+      .btn {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
@@ -315,18 +461,18 @@ body .el-table::before {
       height: 250px;
       width: 100%;
       .resource {
-        /deep/.el-table{
+        /deep/.el-table {
           max-height: 190px;
           overflow: auto;
         }
-          .smimg{
-            text-align: center;
-    height: 40px;
-    img {
-      width: 40px;
-      height: 40px;
-    }
-  }
+        .smimg {
+          text-align: center;
+          height: 40px;
+          img {
+            width: 40px;
+            height: 40px;
+          }
+        }
         max-height: 250px;
         // overflow: auto;
         width: 97%;