顺丰快递面单，组合打印

.env

@@ -1,3 +1,9 @@
+VUE_APP_SF_EXPRESS_APPID=LZKJ38MQCGN
+VUE_APP_SF_EXPRESS_APPNAME=RP4
+
 VUE_APP_C_LODOP_WS=localhost:8000|localhost:18000
 VUE_APP_C_LODOP_HTTP=localhost:8000|localhost:18000
 VUE_APP_C_LODOP_HTTPS=localhost.lodop.net:8443
+
+# 顺丰签名
+VUE_APP_C_LODOP_LICENSES='顺丰科技有限公司_A8014B09DC3900222D3047E9942A8F3504D_順豐科技有限公司_EA15AFAF29B939797009E405CDEB043768A|THIRD LICENSE__Sf Technology Co., Ltd._F5BD5E2D3083D6F7FA2FF6C5DFEB3740F52'

.env.development

@@ -10,5 +10,8 @@ VUE_APP_BASE_API_V2='http://10.250.11.48:3030'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES=true
+
+# 顺丰调试环境
+VUE_APP_SF_EXPRESS_ENV=pro
 # 1仅预览，否则为正常内容
 VUE_APP_C_LODOP_POINT_PREVIEW=1

.env.production

@@ -27,3 +27,5 @@ VUE_APP_BASE_API_V2='http://124.112.64.166:2020'
 
 VUE_APP_BASE_API='/prod-api/'
 
+VUE_APP_SF_EXPRESS_ENV=pro
+

src/api/prescription/prescriptionAudit.js

@@ -19,6 +19,14 @@ export function selectOrderDetail(query) {
   })
 }
 
+export function getExpressRecordParams(data) {
+  return request({
+    url: '/yfc-admin/prescriptionManage/expressSfPrint',
+    method: 'post',
+    data,
+  });
+}
+
 
 // 释放待审核处方
 export function releaseOrder(query) {

src/api/prescription/prescriptionCore.js

@@ -152,3 +152,12 @@ export function addNum(id) {
 
   })
 }
+
+// 获取快递面单参数
+export function getExpressRecordParams(id, type = 'sf') {
+  return request({
+    url: '/yfc-admin/prescriptionManage/expressSfPrint',
+    method: 'post',
+    data: {prescriptionCoreId: id}
+  })
+}

src/components/print/express_75.vue

@@ -0,0 +1,96 @@
+<script>
+import {sf_express_print} from '@/tools/print.tool';
+import {getExpressRecordParams} from '@/api/prescription/prescriptionAudit';
+
+export default {
+  name: 'print_express_75',
+  props: {
+    id: {type: [String, Number], required: true},
+  },
+  data() {
+    return {
+      loaded: false,
+      preview: true,
+      total: 1,
+
+      tag: `print-preview_${Date.now()}`,
+      paper: '顺丰快递面单',
+
+      model: null,
+      device: null,
+      printing: false,
+    };
+  },
+  computed: {
+    loading() {
+      return !this.loaded || !this.preview;
+    },
+  },
+  mounted() {
+    this.print(true);
+  },
+  methods: {
+    async print(preview = false) {
+      try {
+        await this.getModel();
+        if (preview) {
+
+        } else {
+          this.printing = true;
+          await sf_express_print(this.model);
+        }
+      } catch (e) {}
+      this.printing = false;
+      this.loaded = true;
+    },
+    complete() {
+      this.$message.success(`开始打印`);
+      this.$emit('close', true);
+    },
+
+    async getModel() {
+      if (this.model) return this.model;
+      return getExpressRecordParams({prescriptionCoreId: this.id}).then((res) => {
+        console.log(res);
+        this.model = res.data;
+        return this.model;
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="print-preview" v-loading="loading">
+    <!--    <div class="top" :style="{backgroundColor: preview ? '#f0f0f0' : 'transparent'}"></div>-->
+    <!--    <iframe :id="tag" @load="delay"></iframe>-->
+    <div style="display: flex; align-items: center; justify-content: space-evenly;">
+      <el-button style="width: 100%;" type="primary" :loading="printing" @click="printing = true;print()">
+        打印
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.print-preview {
+  margin: auto;
+  width: 559px + 100px;
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 40px;
+  }
+
+  iframe {
+    border: none;
+    width: 100%;
+    flex: auto;
+  }
+
+  > div {
+    flex: none;
+  }
+}
+</style>

src/tools/object.js

@@ -28,3 +28,12 @@ export function transformNestedObjectToFlat(model, separator = '_') {
 
   return result;
 }
+
+export function withResolvers() {
+  let resolve, reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return {promise, resolve, reject};
+}

src/tools/print.tool.js

@@ -1,3 +1,84 @@
+/**
+ * [顺丰] 顺丰面单打印实例
+ * @typedef {Object} sf_express_instance
+ * @property {string} version - 实例的版本号。
+ * @property {sf_express_instance_print_function} print - 打印信息的方法。
+ * @property {sf_express_instance_devices_function} devices - 获取打印机设备的方法。
+ */
+
+/**
+ * [顺丰] 打印信息的方法的类型定义。
+ * @callback sf_express_instance_print_function
+ * @param {object} data - 要打印的数据。
+ * @param {Object} [options] - 打印选项（可选）。
+ * @param {'PRINT' | 'PREVIEW'} [options.lodopFn="PRINT"] - 打印类型。
+ * @param {boolean} [options.allPreview=false] - 预览全部面单
+ * @returns {Promise<void>}
+ */
+
+/**
+ * [顺丰] 打印设备的方法的类型定义。
+ * @callback sf_express_instance_devices_function
+ * @param {string} [name] - 打印机名称前缀。
+ * @returns {Promise<{name: string; index: number}[]>}
+ */
+
+
+import {withResolvers} from '@/tools/object';
+
+/**
+ * 获取顺丰打印实例
+ * @param options
+ * @param {string?} options.appid 合作伙伴编码（即顾客编码）
+ * @param {string?} options.appname 打印机设备名称（即设备名称）
+ * @param {'pro' | 'sbox'?} options.env 环境
+ * @returns {Promise<sf_express_instance>}
+ */
+let sf_express = async function (options = {}) {
+  const module = await import('@/libs/print/SCPPrint-2.7.js');
+
+  const {promise: load, resolve, reject} = withResolvers();
+
+  const instance = new module.default({
+    partnerID: options.appid || process.env.VUE_APP_SF_EXPRESS_APPID,
+    env: options.env || process.env.VUE_APP_SF_EXPRESS_ENV || (process.env.NODE_ENV === 'development' ? 'sbox' : 'pro'),
+    notips: false,
+    callback(result) {
+      if (result.code === 1) resolve(instance);
+      else reject({code: result.code, message: result.msg});
+    },
+  });
+
+  try {
+    const instance = await load;
+    sf_express = () => Promise.resolve(instance);
+  } catch (e) {}
+  return instance;
+};
+
+/**
+ *
+ * @type {sf_express_instance_print_function}
+ */
+export async function sf_express_print(data, options = {}) {
+  const instance = await sf_express(options);
+  const {promise: loadDevices, resolve, reject} = withResolvers();
+
+  instance['getPrinters']((result) => {
+    if (result.code === 1) {
+      const devices = Array.isArray(result.printers) ? result.printers : [];
+      resolve(devices);
+    } else reject({message: result.msg, code: result.code});
+  });
+
+  const devices = await loadDevices;
+
+  const device = devices.find(device => device.name.startsWith(process.env.VUE_APP_SF_EXPRESS_APPNAME));
+
+  if (device) instance['setPrinter'](device.index);
+  await instance.print(data);
+}
+
 let c_lodop = async function (options = {}) {
   const module = await import('@/libs/print/CLodop.js');
 
@@ -45,3 +126,4 @@ export async function getDevice(...priority) {
 export default function (options = {}) {
   return c_lodop(options);
 }
+

src/views/rescription/prescriptionCore/printContainer.vue

@@ -2,6 +2,7 @@
 import Print_tag_80_50 from '@/components/print/tag_80_50.vue';
 import Print_recipe_a5 from '@/components/print/recipe_A5.vue';
 import Print_ticket_72 from '@/components/print/ticket_72.vue';
+import Print_express_75 from '@/components/print/express_75.vue';
 import {updatePrintStatus} from '@/api/prescription/prescriptionCore';
 
 export default {
@@ -9,7 +10,7 @@ export default {
   props: {
     id: {type: [String, Number], required: true},
   },
-  components: {Print_ticket_72, Print_recipe_a5, Print_tag_80_50},
+  components: {Print_express_75, Print_ticket_72, Print_recipe_a5, Print_tag_80_50},
   data() {
     return {
       selected: 0,
@@ -65,6 +66,9 @@ export default {
       <el-tab-pane label="药品清单" name="2">
         <print_ticket_72 ref="print2" :id="id" :style="style" @click="$event && update(2)"></print_ticket_72>
       </el-tab-pane>
+      <el-tab-pane label="快递单" name="3">
+        <print_express_75 ref="print3" :id="id" :style="style" @click="$event && update()"></print_express_75>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>