入库管理打印物品详情

index.html

@@ -252,4 +252,6 @@
   </body>
   <script src="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.js"></script>
   <script src="./static/tinymce4.7.5/tinymce.min.js"></script>
+  <script src="print.js"></script>
+  <link rel="stylesheet" type="text/css" href="print.css">
 </html>

package-lock.json

@@ -9083,6 +9083,11 @@
         "utila": "~0.4"
       }
     },
+    "print-js": {
+      "version": "1.0.63",
+      "resolved": "https://registry.npm.taobao.org/print-js/download/print-js-1.0.63.tgz",
+      "integrity": "sha1-3pJYw9+/Jz7YwCET0JJA8JwxQW0="
+    },
     "printj": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/printj/download/printj-1.1.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "moment": "^2.24.0",
     "normalize.css": "^8.0.0",
     "nprogress": "^0.2.0",
+    "print-js": "^1.0.63",
     "v-charts": "^1.19.0",
     "v-distpicker": "^1.0.20",
     "vue": "^2.5.2",

src/router/index.js

@@ -49,6 +49,12 @@ export const asyncRouterMap = [
       meta: { title: '入库管理', icon: 'product-list' },
     },
       {
+        path: 'printDetail',
+        name: 'printDetail',
+        component: () => import('@/views/inv/PrintDetail'),
+        meta: { title: '打印详情', icon: 'product-list' },
+      },
+      {
         path: 'warehouseAdmin',
         name: 'warehouseAdmin',
         component: () => import('@/views/inv/warehouseAdmin'),

src/views/inv/PrintDetail.vue

+
+<template>
+  <div class="app-container" >
+    <!-- 搜索栏 -->
+    <el-card class="filter-container"
+             shadow="never">
+      <div id="printJS-form">
+        <el-form :model="formData" >
+          <el-table
+            :data="formData.tableData"
+            ref="formData"
+            class="print_table">
+            <el-table-column
+              prop="goodsName"
+              label="物品名称">
+            </el-table-column>
+            <el-table-column
+              prop="goodsNo"
+              label="型号">
+            </el-table-column>
+            <el-table-column
+              prop="categoryName"
+              label="物品类别">
+            </el-table-column>
+            <el-table-column
+              prop="inboundNum"
+              label="数量">
+            </el-table-column>
+            <el-table-column
+              prop="price"
+              label="价格（元）">
+            </el-table-column>
+            <el-table-column
+              prop="supplierName"
+              label="供应商">
+            </el-table-column>
+          </el-table>
+        </el-form>
+      </div>
+      <div class="print_btn">
+        <el-button type="primary" size="large" @click="print">打 印</el-button>
+        <el-button  size="large" @click="goBack">返回</el-button>
+      </div>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+import print from 'print-js'
+export default {
+  name: 'PrintDetail',
+  components: {},
+  data() {
+    return {
+      formData:{
+        tableData:[]
+      }
+    }
+  },
+  mounted() {
+    console.log("this.$route.params.list",this.$route.params.list,typeof(this.$route.params.list))
+    if(this.$route.params.list){
+      this.formData.tableData = this.$route.params.list
+    }else {
+      this.$router.go(-1)
+    }
+
+  },
+  methods: {
+    goBack(){
+      this.$router.go(-1);//返回上一层
+    },
+    print(){
+      // this.$print(this.$refs.formData)
+      printJS({ printable: 'printJS-form', type: 'html', documentTitle: '入库物品详情' })
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.app-container{
+  width: 70%;
+  margin: 0 auto;
+  @media print {
+    width: 100%;
+    text-align: center;
+    page-break-after: always;
+    .print_table{
+      width:100%;
+      text-align: center;
+    }
+  }
+  .print_table{
+    width:100%;
+  }
+  .print_btn{
+    margin: 50px 0;
+    text-align: center;
+  }
+}
+</style>

src/views/inv/StockAdmin.vue

@@ -37,7 +37,11 @@
                            width="50"></el-table-column>
           <el-table-column label="物品名称"
                            align="center">
-            <template slot-scope="scope">{{scope.row.vorList | getName}}</template>
+            <template slot-scope="scope">
+              <div class="ellipsis" >
+              {{scope.row.vorList | getName}}
+              </div>
+             </template>
           </el-table-column>
           <el-table-column label="总数量"
                            align="center">
@@ -199,7 +203,10 @@ export default {
     },
     // 查看
     handleView(row) {
-      this.$refs.detail.show(row)
+     this.$router.push({
+       name: 'printDetail',
+       params: {list: row.vorList}
+     })
     },
     // 修改/
     handleUpdate(row){
@@ -255,4 +262,13 @@ export default {
   .input-width {
     width: 180px;
   }
+  .ellipsis{
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
 </style>