feat[litemall-admin] 订单详情新增打印 (#274)

litemall-admin/src/main.js

@@ -20,6 +20,10 @@ import * as filters from './filters' // global filters
 
 import permission from '@/directive/permission/index.js' // 权限判断指令
 
+import Print from '@/utils/print' // 打印
+
+Vue.use(Print)
+
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })

litemall-admin/src/utils/print.js

@@ -0,0 +1,135 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+
+  this.init();
+};
+Print.prototype = {
+  init: function () {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function (obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function () {
+    var str = "",
+      styles = document.querySelectorAll('style,link');
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute('checked', "checked")
+        } else {
+          inputs[k].removeAttribute('checked')
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute('value', inputs[k].value)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == 'select-one') {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == 'OPTION') {
+            if (child[i].selected == true) {
+              child[i].setAttribute('selected', "selected")
+            } else {
+              child[i].removeAttribute('selected')
+            }
+          }
+        }
+      }
+    }
+
+    return this.dom.outerHTML;
+  },
+
+  writeIframe: function (content) {
+    var w, doc, iframe = document.createElement('iframe'),
+      f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    var _this = this
+    iframe.onload = function(){
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+    function (obj) {
+      return obj instanceof HTMLElement;
+    } :
+    function (obj) {
+      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+};
+const MyPlugin = {}
+MyPlugin.install = function (Vue, options) {
+  // 4. 添加实例方法
+  Vue.prototype.$print = Print
+}
+export default MyPlugin

litemall-admin/src/views/mall/order.vue

@@ -48,61 +48,66 @@
 
     <!-- 订单详情对话框 -->
     <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">
-
-      <el-form :data="orderDetail" label-position="left">
-        <el-form-item label="订单编号">
-          <span>{{ orderDetail.order.orderSn }}</span>
-        </el-form-item>
-        <el-form-item label="订单状态">
-          <el-tag>{{ orderDetail.order.orderStatus | orderStatusFilter }}</el-tag>
-        </el-form-item>
-        <el-form-item label="订单用户">
-          <span>{{ orderDetail.user.nickname }}</span>
-        </el-form-item>
-        <el-form-item label="用户留言">
-          <span>{{ orderDetail.order.message }}</span>
-        </el-form-item>
-        <el-form-item label="收货信息">
-          <span>（收货人）{{ orderDetail.order.consignee }}</span>
-          <span>（手机号）{{ orderDetail.order.mobile }}</span>
-          <span>（地址）{{ orderDetail.order.address }}</span>
-        </el-form-item>
-        <el-form-item label="商品信息">
-          <el-table :data="orderDetail.orderGoods" border fit highlight-current-row>
-            <el-table-column align="center" label="商品名称" prop="goodsName" />
-            <el-table-column align="center" label="商品编号" prop="goodsSn" />
-            <el-table-column align="center" label="货品规格" prop="specifications" />
-            <el-table-column align="center" label="货品价格" prop="price" />
-            <el-table-column align="center" label="货品数量" prop="number" />
-            <el-table-column align="center" label="货品图片" prop="picUrl">
-              <template slot-scope="scope">
-                <img :src="scope.row.picUrl" width="40">
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-form-item>
-        <el-form-item label="费用信息">
-          <span>
-            (实际费用){{ orderDetail.order.actualPrice }}元 =
-            (商品总价){{ orderDetail.order.goodsPrice }}元 +
-            (快递费用){{ orderDetail.order.freightPrice }}元 -
-            (优惠减免){{ orderDetail.order.couponPrice }}元 -
-            (积分减免){{ orderDetail.order.integralPrice }}元
-          </span>
-        </el-form-item>
-        <el-form-item label="支付信息">
-          <span>（支付渠道）微信支付</span>
-          <span>（支付时间）{{ orderDetail.order.payTime }}</span>
-        </el-form-item>
-        <el-form-item label="快递信息">
-          <span>（快递公司）{{ orderDetail.order.shipChannel }}</span>
-          <span>（快递单号）{{ orderDetail.order.shipSn }}</span>
-          <span>（发货时间）{{ orderDetail.order.shipTime }}</span>
-        </el-form-item>
-        <el-form-item label="收货信息">
-          <span>（确认收货时间）{{ orderDetail.order.confirmTime }}</span>
-        </el-form-item>
-      </el-form>
+      <section ref="print">
+        <el-form :data="orderDetail" label-position="left">
+          <el-form-item label="订单编号">
+            <span>{{ orderDetail.order.orderSn }}</span>
+          </el-form-item>
+          <el-form-item label="订单状态">
+            <el-tag>{{ orderDetail.order.orderStatus | orderStatusFilter }}</el-tag>
+          </el-form-item>
+          <el-form-item label="订单用户">
+            <span>{{ orderDetail.user.nickname }}</span>
+          </el-form-item>
+          <el-form-item label="用户留言">
+            <span>{{ orderDetail.order.message }}</span>
+          </el-form-item>
+          <el-form-item label="收货信息">
+            <span>（收货人）{{ orderDetail.order.consignee }}</span>
+            <span>（手机号）{{ orderDetail.order.mobile }}</span>
+            <span>（地址）{{ orderDetail.order.address }}</span>
+          </el-form-item>
+          <el-form-item label="商品信息">
+            <el-table :data="orderDetail.orderGoods" border fit highlight-current-row>
+              <el-table-column align="center" label="商品名称" prop="goodsName" />
+              <el-table-column align="center" label="商品编号" prop="goodsSn" />
+              <el-table-column align="center" label="货品规格" prop="specifications" />
+              <el-table-column align="center" label="货品价格" prop="price" />
+              <el-table-column align="center" label="货品数量" prop="number" />
+              <el-table-column align="center" label="货品图片" prop="picUrl">
+                <template slot-scope="scope">
+                  <img :src="scope.row.picUrl" width="40">
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+          <el-form-item label="费用信息">
+            <span>
+              (实际费用){{ orderDetail.order.actualPrice }}元 =
+              (商品总价){{ orderDetail.order.goodsPrice }}元 +
+              (快递费用){{ orderDetail.order.freightPrice }}元 -
+              (优惠减免){{ orderDetail.order.couponPrice }}元 -
+              (积分减免){{ orderDetail.order.integralPrice }}元
+            </span>
+          </el-form-item>
+          <el-form-item label="支付信息">
+            <span>（支付渠道）微信支付</span>
+            <span>（支付时间）{{ orderDetail.order.payTime }}</span>
+          </el-form-item>
+          <el-form-item label="快递信息">
+            <span>（快递公司）{{ orderDetail.order.shipChannel }}</span>
+            <span>（快递单号）{{ orderDetail.order.shipSn }}</span>
+            <span>（发货时间）{{ orderDetail.order.shipTime }}</span>
+          </el-form-item>
+          <el-form-item label="收货信息">
+            <span>（确认收货时间）{{ orderDetail.order.confirmTime }}</span>
+          </el-form-item>
+        </el-form>
+      </section>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="orderDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="printOrder">打 印</el-button>
+      </span>
     </el-dialog>
 
     <!-- 发货对话框 -->
@@ -138,7 +143,7 @@
 </template>
 
 <script>
-import { listOrder, shipOrder, refundOrder, detailOrder } from '@/api/order'
+import { detailOrder, listOrder, refundOrder, shipOrder } from '@/api/order'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 import checkPermission from '@/utils/permission' // 权限判断函数
 
@@ -289,6 +294,10 @@ export default {
         excel.export_json_to_excel2(tHeader, this.list, filterVal, '订单信息')
         this.downloadLoading = false
       })
+    },
+    printOrder() {
+      this.$print(this.$refs.print)
+      this.orderDialogVisible = false
     }
   }
 }