打印

ghs/src/views/order/list.vue

@@ -50,30 +50,7 @@
 
       <!-- 操作 -->
       <template #slot-column-option="{scope}">
-        <template >
-          <div style="display: flex">
-            <div v-for="res in scope.row.buttonList" >
-              <el-button v-if="res.type=='item'&&res.show==1&&res.disable==0" size="small">改花材</el-button>
-              <el-button v-if="res.type=='item'&&res.show==1&&res.disable==1" size="small" disabled>改花材</el-button>
-
-              <el-button v-if="res.type=='send'&&res.show==1&&res.disable==0" @click.stop="shipDrawFn(scope.row)" size="mini" type="primary" plain >发货</el-button>
-              <el-button v-if="res.type=='send'&&res.show==1&&res.disable==1" disabled size="mini" plain >发货</el-button>
-
-              <el-popover v-if="res.type=='selfGet'&&res.show==1&&res.disable==0" style="margin-left:14px;" placement="top" width="160" :ref="'popover-' + scope.row.id">
-                <p>确认已自取？</p>
-                <div style="text-align: right; margin: 0">
-                  <el-button size="mini" type="text" @click.stop="selfGetCancel(scope.row.id)">取消</el-button>
-                  <el-button type="primary" size="mini" @click.stop="noSendShipFn(scope.row)">确定</el-button>
-                </div>
-                <el-button slot="reference" size="mini" type="primary" plain @click.stop="">自取</el-button>
-              </el-popover>
-              <el-button v-if="res.type=='selfGet'&&res.show==1&&res.disable==1" style="margin-left:14px;" size="small" disabled>自取</el-button>
-
-              <el-button v-if="res.type=='print'&&res.show==1&&res.disable==0" @click.stop="printOrder(scope.row)" size="mini" type="primary" plain style="margin-left:14px;">打印</el-button>
-              <el-button v-if="res.type=='print'&&res.show==1&&res.disable==1" disabled size="mini" type="primary" plain style="margin-left:14px;">打印</el-button>
-            </div>
-          </div>
-        </template>
+        <el-button @click.stop="printOrder(scope.row)" size="mini" type="primary" plain >打印</el-button>
       </template>
     </x-crud>
     <!-- 用户详情 -->
@@ -140,6 +117,7 @@
 import SelOrder from './components/sel-order';
 import OrderDetail from './components/order-detail';
 import { getLodop } from '@/utils/lodop';
+import {hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
 export default {
   components: {
     SelOrder,
@@ -207,25 +185,21 @@ export default {
       this.$store.dispatch('getUsage');
     },
     printOrder(e){
-      this.$service.order.info({ id: e.id }).then(res => {
-        this.orderData = res;
-        this.$nextTick(() => {
-          let LODOP = getLodop();
-          LODOP.SET_PRINT_STYLE('FontSize', 13);
-          LODOP.SET_PRINT_STYLE('Bold', 1);
-          LODOP.ADD_PRINT_TEXT(10, 10, 790, 30, `纯彩花艺销售单`);
-          LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
-          LODOP.SET_PRINT_STYLE('FontSize', 10);
-          LODOP.ADD_PRINT_HTM(
-              35,
-              10,
-              790,
-              600,
-              document.querySelector('.print-html-box').innerHTML
-          );
-          LODOP.PREVIEW();
-        });
-      });
+      hiprint.init();
+      // 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
+      // 想要实现拖拽设计页面,请往下看 '自定义设计'
+      var hiprintTemplate = new hiprint.PrintTemplate();
+      var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
+      //文本
+      panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
+      //条形码
+      panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
+      //二维码
+      panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
+      //长文本
+      panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
+      //打印
+      hiprintTemplate.print({})
     },
     //取消自取
     selfGetCancel(id) {
@@ -354,14 +328,12 @@ export default {
             },
             op: {
               visible: true, // 是否显示
-              // 同 element-ui Table-column Attributes
               props: {
                 width: 220,
                 align: 'center',
                 fixed: 'right',
                 label: '操作'
               },
-              // 布局，请移步 `layout`
               layout: ['slot-column-option']
             }
           })