增加出库管理导出功能

src/views/holding/holding2_look.vue

@@ -30,12 +30,12 @@
             <span>{{ myData.status }}</span>
           </div>
         </div>
-                  <div class="explain">
-            <p><span>出库说明：</span>{{ myData.description }}</p>
-          </div>
-          <div class="explain">
-            <p><span>审核说明：</span>{{ myData.reason }}</p>
-          </div>
+        <div class="explain">
+          <p><span>出库说明：</span>{{ myData.description }}</p>
+        </div>
+        <div class="explain">
+          <p><span>审核说明：</span>{{ myData.reason }}</p>
+        </div>
 
         <!-- 表格 -->
         <div class="table">
@@ -54,7 +54,7 @@
             style="width: 100%"
           >
             <el-table-column
-            :resizable="false"
+              :resizable="false"
               type="selection"
               :selectable="selectable"
               width="55"
@@ -63,33 +63,161 @@
             <el-table-column label="缩略图" width="160" :resizable="false">
               <template #default="{ row }">
                 <div class="smimg">
-                  <img :src="baseURL + row.thumb" alt="" :onerror='defaultImg'/>
+                  <img
+                    :src="baseURL + row.thumb"
+                    alt=""
+                    :onerror="defaultImg"
+                  />
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="registerNum" label="总登记号" width="235" :resizable="false">
+            <el-table-column
+              prop="registerNum"
+              label="总登记号"
+              width="235"
+              :resizable="false"
+            >
             </el-table-column>
-            <el-table-column prop="name" label="藏品名称" :resizable="false"> </el-table-column>
-            <el-table-column prop="goodsTypeId" label="类别" width="180" :resizable="false">
+            <el-table-column prop="name" label="藏品名称" :resizable="false">
             </el-table-column>
-            <el-table-column prop="integrity" label="完残程度" width="180" :resizable="false">
+            <el-table-column
+              prop="goodsTypeId"
+              label="类别"
+              width="180"
+              :resizable="false"
+            >
             </el-table-column>
-            <el-table-column prop="status" label="状态" width="180" :resizable="false">
+            <el-table-column
+              prop="integrity"
+              label="完残程度"
+              width="180"
+              :resizable="false"
+            >
             </el-table-column>
-            <el-table-column prop="outPath" label="出库位置" width="300" :resizable="false">
+            <el-table-column
+              prop="status"
+              label="状态"
+              width="180"
+              :resizable="false"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="outPath"
+              label="出库位置"
+              width="300"
+              :resizable="false"
+            >
             </el-table-column>
           </el-table>
         </div>
         <!-- 最下面的按钮 -->
         <div class="button">
+          <el-button type="primary" @click="myExport">导 出</el-button>
           <el-button @click="$router.go(-1)">返回</el-button>
         </div>
       </div>
     </div>
+        <!-- 点击导出显示的界面 -->
+        <div class="export" v-if="isShow">
+          <div id="myPdfCon">
+            <div class="info">
+              <div>
+                <h4>出库编号：</h4>
+                <span>{{ myData.num }}</span>
+              </div>
+              <div>
+                <h4>出库人员：</h4>
+                <span>{{ myData.realName }}</span>
+              </div>
+              <div>
+                <h4>出库类型：</h4>
+                <span>{{ myData.type }}</span>
+              </div>
+              <div>
+                <h4>审核结果：</h4>
+                <span>{{ myData.status }}</span>
+              </div>
+            </div>
+            <div class="explain">
+              <p><span>出库说明：</span>{{ myData.description }}</p>
+            </div>
+            <div class="explain">
+              <p><span>审核说明：</span>{{ myData.reason }}</p>
+            </div>
+            <!-- 表格 -->
+            <div class="table">
+              <div class="title">
+                <h3>藏品信息</h3>
+              </div>
+              <el-table
+                @selection-change="handleSelectionChange"
+                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+                :data="tableData"
+                border
+                style="width: 100%"
+              >
+                <el-table-column label="缩略图" width="160" :resizable="false">
+                  <template #default="{ row }">
+                    <div class="smimg" style="text-align: center;">
+                      <img
+                        style="max-width:70px; max-height:70px;"
+                        :src="baseURL + row.thumb"
+                        alt=""
+                        :onerror="defaultImg"
+                      />
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="registerNum"
+                  label="总登记号"
+                  width="235"
+                  :resizable="false"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="藏品名称"
+                  :resizable="false"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="goodsTypeId"
+                  label="类别"
+                  width="180"
+                  :resizable="false"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="integrity"
+                  label="完残程度"
+                  width="180"
+                  :resizable="false"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="status"
+                  label="状态"
+                  width="180"
+                  :resizable="false"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="outPath"
+                  label="出库位置"
+                  width="300"
+                  :resizable="false"
+                >
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </div>
   </div>
 </template>
 
 <script>
+import htmlToPdf from '@/utils/htmlToPdf'
 import { getDetailById, goodsReturn } from '@/apis/holding2'
 import axios from '@/utils/request'
 import TabList from '@/components/tabLeft.vue'
@@ -105,7 +233,7 @@ export default {
       baseURL: '',
       // 小商品id集合数组
       goodsIds: [],
-      // 点击查看显示弹窗
+      // 点击导出显示页面
       isShow: false,
       fromData: {
         textarea: ''
@@ -124,6 +252,23 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击导出
+    myExport () {
+      this.isShow = true
+      setTimeout(() => {
+        const targetDom = document.querySelector('#myPdfCon')
+        targetDom.style.width = targetDom.scrollWidth + 'px'
+        targetDom.style.height = targetDom.scrollHeight + 'px'
+        // const cloneDom = targetDom.cloneNode(true)
+        // cloneDom.style.width = targetDom.scrollWidth + 'px'
+        // cloneDom.style.height = targetDom.scrollHeight + 'px'
+        // cloneDom.style.background = '#FFFFFF'
+        // document.body.appendChild(cloneDom)
+        htmlToPdf.downloadPDF(targetDom, '出库信息')
+
+        this.isShow = false
+      }, 100)
+    },
     myStatus (id) {
       const list = [
         { id: 0, name: '已归还' },
@@ -134,7 +279,9 @@ export default {
     },
     // 点击归还
     goodsReturn () {
-      if (this.goodsIds.length === 0) { return this.$message.warning('至少选中一个!') }
+      if (this.goodsIds.length === 0) {
+        return this.$message.warning('至少选中一个!')
+      }
       this.$confirm('确定归还吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -199,7 +346,9 @@ export default {
     temp = JSON.parse(temp)
     if (temp) {
       const temp2 = temp.role[0]
-      if (temp2 === 'sys_look' || temp2 === 'sys_collect') { this.userAlso = false } // 其他部门人员--征集部主任
+      if (temp2 === 'sys_look' || temp2 === 'sys_collect') {
+        this.userAlso = false
+      } // 其他部门人员--征集部主任
     }
   },
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -212,8 +361,88 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.export {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  #myPdfCon {
+    .table {
+      // max-height: 360px;
+      // overflow: auto;el-table__body-wrapper
+      /deep/.el-table__body-wrapper {
+        // max-width: 1593px;
+        max-height: 100% !important;
+      }
+    }
+    padding: 24px;
+    width: 80%;
+    height: 100%;
+    background-color: #fff;
+    margin: 0 auto;
+  }
+}
 //@import url(); 引入公共css类
 .holding0_result {
+  .info {
+    display: flex;
+    flex-wrap: wrap;
+    & > div {
+      padding-left: 15px;
+      color: black;
+      height: 42px;
+      display: flex;
+      align-items: center;
+      border: 1px solid #ccc;
+      width: 50%;
+    }
+  }
+
+  .explain {
+    border: 1px solid #ccc;
+    color: black;
+    padding: 15px;
+    display: flex;
+    flex-wrap: wrap;
+    span {
+      font-weight: 700;
+    }
+  }
+  .table {
+    // max-height: 360px;
+    // overflow: auto;
+
+    .smimg {
+      // border: 3px solid #ccc;
+      height: 70px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    margin-top: 28px;
+    border: 1px solid #ccc;
+    .title {
+      padding-left: 30px;
+      color: black;
+      height: 50px;
+      line-height: 50px;
+      & > h3 {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        /deep/.el-button {
+          height: 30px;
+          margin-right: 20px;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
   /deep/#mytitle > span {
     font-weight: 800;
   }
@@ -234,71 +463,21 @@ export default {
     }
   }
   .conten {
-    position: relative;
-    flex: 1;
-    background-color: #fff;
-    margin: 20px 20px 40px;
-    padding: 35px;
-    .info {
-      display: flex;
-      flex-wrap: wrap;
-      & > div {
-        padding-left: 15px;
-        color: black;
-        height: 42px;
-        display: flex;
-        align-items: center;
-        border: 1px solid #ccc;
-        width: 50%;
-      }
-    }
-
-    .explain {
-      border: 1px solid #ccc;
-      color: black;
-      padding: 15px;
-      display: flex;
-      flex-wrap: wrap;
-      span {
-        font-weight: 700;
-      }
-    }
     .table {
       // max-height: 360px;
       // overflow: auto;
-      /deep/.el-table__body-wrapper{
+      /deep/.el-table__body-wrapper {
         // max-width: 1593px;
         max-height: 300px;
         overflow-y: auto;
       }
-      .smimg {
-        // border: 3px solid #ccc;
-        height: 70px;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      margin-top: 28px;
-      border: 1px solid #ccc;
-      .title {
-        padding-left: 30px;
-        color: black;
-        height: 50px;
-        line-height: 50px;
-        & > h3 {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          /deep/.el-button {
-            height: 30px;
-            margin-right: 20px;
-            display: flex;
-            align-items: center;
-          }
-        }
-      }
     }
+    position: relative;
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    padding: 35px;
+
     .button {
       position: absolute;
       left: 50%;