物流管理添加扫码枪功能

src/views/pda/dispatch/index.vue

@@ -2,10 +2,11 @@
 import {dispatchList} from '@/api/pda';
 import dayjs from 'dayjs';
 import PrintContainer from './printContainer.vue';
+import ScanPanel from '@/views/pda/dispatch/scanPanel.vue';
 
 export default {
   name: 'pda-dispatch',
-  components: {PrintContainer},
+  components: {ScanPanel, PrintContainer},
   data() {
     return {
       queryParams: {
@@ -46,6 +47,7 @@ export default {
         // { name: "煎药已作废", id: 999, key: "---" },
       ],
 
+      showScanPanel: false,
       showPrint: false,
       showPrintId: '',
       showPrintExpressCom: false,
@@ -88,6 +90,20 @@ export default {
     handlePreview(row) {
 
     },
+    openScanPanel() {
+      this.showScanPanel = true;
+      this.$nextTick(() => {
+        const $scan = this.$refs.scan;
+        if ($scan && typeof $scan.open === 'function') return $scan.open();
+      });
+    },
+    closeScanPanel(done) {
+      this.$nextTick(() => {
+        const $scan = this.$refs.scan;
+        if ($scan && typeof $scan.close === 'function') return $scan.close();
+      });
+      done();
+    },
   },
 };
 </script>
@@ -155,6 +171,7 @@ export default {
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button icon="el-icon-printer" size="mini" @click="openScanPanel">扫码枪</el-button>
           </el-form-item>
         </div>
       </div>
@@ -206,6 +223,10 @@ export default {
                        :load-express="showPrintExpressCom"
       />
     </el-dialog>
+
+    <el-dialog title="扫条码打印顺丰快递单" :visible.sync="showScanPanel" :before-close="closeScanPanel" width="60vim">
+      <scan-panel ref="scan"></scan-panel>
+    </el-dialog>
   </div>
 </template>
 

src/views/pda/dispatch/scanPanel.vue

@@ -0,0 +1,119 @@
+<script>
+import {dispatchList} from '@/api/pda';
+import {getExpressRecordParams} from '@/api/prescription/prescriptionAudit';
+import {sf_express_print} from '@/tools/print.tool';
+import dayjs from 'dayjs';
+
+let TAG;
+
+export default {
+  name: 'ScanPanel',
+  data() {
+    return {
+      loading: false,
+      keyword: '',
+      logs: [],
+    };
+  },
+  methods: {
+    async open() {
+      this.nonsupport();
+    },
+    async close() {
+      if (TAG) window.cancelAnimationFrame(TAG);
+      this.logs = [];
+      this.loading = false;
+    },
+    async search() {
+      if (this.loading) return;
+      this.loading = true;
+      const keyword = this.keyword.trim();
+      try {
+
+        let result = await dispatchList({pageNum: 1, pageSize: 1, orderNo: keyword});
+        if (result.code !== 200) throw {message: result.msg};
+
+        let data = result.rows[0];
+        if (!data) throw {message: `未查询到数据`};
+        if (data.expressExecutor !== '顺丰') throw {message: `无法打印，配送方式不是顺丰`};
+
+        result = await getExpressRecordParams({prescriptionCoreId: data.id});
+        if (result.code !== 200) throw {message: result.msg};
+
+        data = result.data;
+        await sf_express_print(data);
+        this.$message.success(`发送打印任务成功`);
+        this.logs.push({
+          time: dayjs().format('HH:mm:ss'),
+          state: 'success', keyword,
+          icon: 'el-icon-check', color: 'green',
+          message: `发送打印任务成功`,
+        });
+      } catch (error) {
+        this.$message.error(error.message);
+        this.logs.push({
+          time: dayjs().format('HH:mm:ss'),
+          state: 'danger', keyword,
+          icon: 'el-icon-close', color: 'red',
+          message: error.message,
+        });
+      }
+      this.$refs.input.focus();
+      this.$refs.main.scrollTop = 0;
+      this.keyword = '';
+      this.loading = false;
+    },
+
+
+    nonsupport() {
+      if (TAG) window.cancelAnimationFrame(TAG);
+      TAG = window.requestAnimationFrame(() => {
+        this.$refs.input.focus();
+        this.nonsupport();
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="header">
+      <el-input ref="input" style="width: 80%;" v-model="keyword" placeholder="请输入或使用扫码枪操作" clearable
+                size="small" :disabled="loading"
+                @keyup.enter.native="search"/>
+    </div>
+    <div class="main" ref="main">
+      <el-timeline reverse>
+        <el-timeline-item
+          v-for="(log, index) in logs"
+          :key="index"
+          :icon="log.icon"
+          :color="log.color"
+          size="large" :type="log.state"
+          :timestamp="log.time" placement="top">
+          [{{ log.keyword }}] {{ log.message }}
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 60vmin;
+}
+
+.header {
+  flex: none;
+  text-align: center;
+}
+
+.main {
+  flex: auto;
+  padding-top: 24px;
+  overflow-y: auto;
+}
+</style>