1.0.79 增加新版发卡

examples/App.vue

@@ -3,6 +3,9 @@
     <div class="row">
       <div class="col-md-2">
         <ul class="nav nav-pills nav-stacked">
+          <li>
+            <a href="#/desktop/writeEpc-example">EPC发卡</a>
+          </li>
           <li>
             <router-link :to="{ path: '/desktop/input-number-example'}">数字输入</router-link>
           </li>

examples/print/src/WriteEpcExample.vue

@@ -0,0 +1,43 @@
+<template>
+  <h1>EPC发卡</h1>
+  <div class="form-group">
+    <label>EPC</label>
+    <input
+      v-model="epc"
+      type="text"
+      class="form-control"
+      placeholder="发卡数据"
+    />
+  </div>
+
+  <button class="btn btn-default" @click="writeEpc">发卡</button>
+
+  <WriteEpc ref="writeEpc" v-model:visible="writeEpcVisible" />
+</template>
+
+<script>
+import WriteEpc from '@/print/write-epc.js';
+
+export default {
+  components: {
+    WriteEpc,
+  },
+
+  data: function () {
+    return {
+      writeEpcVisible: false,
+      epc: '012345678901234567890123',
+    };
+  },
+
+  methods: {
+    writeEpc: function () {
+      this.writeEpcVisible = true;
+      this.$refs.writeEpc.writeSingleEpc(this.epc);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

examples/route/index.js

@@ -28,6 +28,7 @@ const InfoWindowExample = () => import(/* webpackChunkName: "info-window" */ '..
 const DocGeneratorSelected = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/DocGeneratorSelected.vue');
 const SearchInput = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/SearchInput.vue');
 const SearchInputExample = () => import(/* webpackChunkName: "doc-generator-selected" */ '../search-input/SearchInputExample.vue');
+const WriteEpcExample = () => import('../print/src/WriteEpcExample.vue');
 
 export default {
   routes: [
@@ -66,6 +67,9 @@ export default {
         /** 打印控件 */
         { path: 'print-example', component: PrintExample },
 
+        /** 发卡控件 */
+        { path: 'writeEpc-example', component: WriteEpcExample },
+
         /** 扫描仪控件 */
         { path: 'scanner-example', component: ScannerExample },
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pc-component-v3",
-  "version": "1.0.77",
+  "version": "1.0.79",
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {

packages/components.js

@@ -27,6 +27,8 @@ import SearchAutoCompleteWidget from './info/search-auto-complete-widget.js';
 
 import PrintEpc from './print/print-epc.js';
 import PrintWidget from './print/print-widget.js';
+import WriteEpc from './print/write-epc.js';
+
 
 // import Pagination from './pagination/index.js';
 
@@ -46,6 +48,7 @@ import JsUtil from './common/JsUtil.js';
 
 import ModalFix from './modal/src/ModalFix.js';
 import PrintUtil from './print/src/PrintUtil.js';
+import WriteEpcUtil from './print/src/WriteEpcUtil.js';
 
 export {
   Loading,
@@ -72,6 +75,7 @@ export {
   MultiSearchWidget,
   SearchAutoCompleteWidget,
   PrintEpc,
+  WriteEpc,
   PrintWidget,
   TreeViewNode,
   ClientOrganization,
@@ -90,4 +94,5 @@ export {
   ProcessReportResource,
   CssUtil,
   JsUtil,
+  WriteEpcUtil,
 };

packages/print/src/WriteEpc.vue

@@ -0,0 +1,259 @@
+/**
+ * EPC 打印界面
+ */
+
+<template>
+  <div>
+    <!-- 打印结果模态框 -->
+    <Modal v-model:show="modal" title="发卡机发卡">
+      <div class="form-horizontal">
+        <div class="form-group epc-container">
+          <label class="col-sm-2 epc-label">EPC</label>
+          <div style="width: 84%">
+            <input
+              v-model="lastWriteEpc"
+              type="text"
+              class="form-control"
+              placeholder="EPC"
+            />
+          </div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="btn btn-default m-button"
+        @click="writeSingleEpc(lastWriteEpc)"
+      >
+        写入
+      </button>
+
+      <button
+        type="button"
+        class="btn btn-default m-button"
+        @click="restoreEpc"
+      >
+        重置
+      </button>
+
+      <button type="button" class="btn btn-default m-button" @click="readEpc">
+        读取
+      </button>
+
+      <div
+        v-if="printResult != null && printResult.command == 'write'"
+        :class="
+          printResult.errorCode === 0
+            ? 'alert alert-success'
+            : 'alert alert-danger'
+        "
+        role="alert"
+      >
+        <p v-if="printResult.errorCode === 0">
+          操作成功 EPC：{{ lastWriteEpc }} 写入成功
+        </p>
+        <p v-else-if="printResult.errorCode === 1">
+          操作失败 {{ printResult.errorMessage }} 请先重置EPC。
+        </p>
+        <p v-else>
+          操作失败 {{ printResult.errorMessage }} 待写入EPC：{{
+            lastWriteEpc
+          }}
+        </p>
+      </div>
+
+      <div
+        v-if="printResult != null && printResult.command == 'restore'"
+        :class="
+          printResult.errorCode === 0
+            ? 'alert alert-success'
+            : 'alert alert-danger'
+        "
+        role="alert"
+      >
+        <p>
+          {{ printResult.errorCode === 0 ? "操作成功" : "操作失败" }}
+          {{ printResult.errorMessage }}
+        </p>
+      </div>
+
+      <div
+        v-if="printResult != null && printResult.command == 'read'"
+        :class="
+          printResult.errorCode === 0
+            ? 'alert alert-success'
+            : 'alert alert-danger'
+        "
+        role="alert"
+      >
+        <p style="word-wrap: break-word">
+          {{ printResult.errorCode === 0 ? "操作成功" : "操作失败" }},{{
+            printResult.epcs && printResult.epcs.length > 0
+              ? `读取到 ${printResult.tagCount} 个标签：${printResult.epcs}`
+              : printResult.errorMessage
+          }}
+        </p>
+      </div>
+    </Modal>
+    <Loading v-if="loading" />
+  </div>
+</template>
+
+<script>
+import WriteEpcUtil from './WriteEpcUtil.js';
+import Modal from '../../modal/src/Modal.vue';
+import Loading from '../../loading/src/Loading.vue';
+
+export default {
+  name: 'WriteEpc',
+
+  components: {
+    Modal,
+    Loading,
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:visible'],
+
+  data: function () {
+    return {
+      lastWriteEpc: '', // 最后写入的EPC
+      // 打印结果
+      printResult: {
+        command: '', // 指令
+        success: true, // 是否操作成功
+        message: '', // 操作不成功的消息
+        tagCount: 0, // 标签读取的数量
+        epcs: '', // 读取的标签信息
+        epc: '', // 打印的EPC
+      },
+      loading: false,
+    };
+  },
+
+  computed: {
+    modal: {
+      get() {
+        return this.visible;
+      },
+      set(value) {
+        this.$emit('update:visible', value);
+      },
+    },
+  },
+
+  methods: {
+    /**
+     * EPC 发卡
+     * @param epc 待操作的EPC的内容
+     */
+    writeSingleEpc: function (epc) {
+      let _self = this;
+
+      _self.modal = false;
+      _self.lastWriteEpc = epc;
+
+      let promise = WriteEpcUtil.writeSingleEpc(epc);
+
+      _self.loading = true;
+      promise.then(
+        successData => {
+          _self.loading = false;
+          successData.command = 'write';
+          _self.printResult = successData;
+          _self.modal = true;
+        },
+        errorData => {
+          _self.loading = false;
+          errorData.command = 'write';
+          _self.printResult = errorData;
+          _self.modal = true;
+        },
+      );
+    },
+
+    /**
+     * 恢复EPC
+     */
+    restoreEpc: function () {
+      let _self = this;
+
+      _self.modal = true;
+
+      let promise = WriteEpcUtil.resetTag();
+      _self.loading = true;
+      promise.then(
+        successData => {
+          _self.loading = false;
+          successData.command = 'restore';
+          _self.printResult = successData;
+          _self.modal = true;
+        },
+        errorData => {
+          _self.loading = false;
+          errorData.command = 'restore';
+          _self.printResult = errorData;
+          _self.modal = true;
+        },
+      );
+    },
+
+    /**
+     * 读取EPC
+     */
+    readEpc: function () {
+      let _self = this;
+
+      _self.modal = true;
+
+      let promise = WriteEpcUtil.readEpc();
+      _self.loading = true;
+      promise.then(
+        successData => {
+          _self.loading = false;
+          successData.command = 'read';
+          if (successData.errorCode === 0) {
+            successData.tagCount = successData.data.length;
+            successData.epcs = successData.data.join();
+          }
+          _self.printResult = successData;
+        },
+        errorData => {
+          _self.loading = false;
+          errorData.command = 'read';
+          _self.printResult = errorData;
+        },
+      );
+    },
+
+    /**
+     * 显示模态框
+     */
+    show: function () {
+      this.modal = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.m-button {
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+.epc-container {
+  display: flex;
+  align-items: center;
+}
+.epc-label {
+  margin-bottom: 0;
+  width: 80px;
+  text-align: center;
+}
+</style>

packages/print/src/WriteEpcUtil.js

@@ -0,0 +1,136 @@
+
+/**
+ * node-red EPC 发卡程序
+ */
+import Uuid from '../../common/Uuid.js';
+
+
+export default {
+  webSocket: '',     // websocket对象
+
+  socketUrl: 'ws://127.0.0.1:10092',  //  websocket客户端地址
+
+
+  /**
+   * 打印单张EPC
+   */
+  writeSingleEpc: function (epc) {
+    if (epc == null || epc.length == 0) {
+      let promise = new Promise((resolve, reject) => {
+        reject({
+          success: false,
+          errorMessage: '数据中没有此EPC的定义',
+        });
+
+      });
+      return promise;
+    }
+
+    var _self = this;
+    var commandData = {
+      id: Uuid.createUUID(),
+      command: 'writeEpc',
+      data: epc,
+      lockTag:true,
+    };
+
+    var commandStr = JSON.stringify(commandData);
+    let promise = new Promise((resolve, reject) => {
+      _self.connectNodeRed(resolve, reject, commandStr);
+    });
+
+    return promise;
+  },
+
+
+  readEpc: function () {
+    var _self = this;
+    var commandData = {
+      id: Uuid.createUUID(),
+      command: 'readEpc',
+    };
+
+    var commandStr = JSON.stringify(commandData);
+    var promise = new Promise((resolve, reject) => {
+      _self.connectNodeRed(resolve, reject, commandStr, null);
+    });
+
+    return promise;
+  },
+
+  /**
+   * 恢复标签，清除密码区域
+   */
+  resetTag: function () {
+    var _self = this;
+    var commandData = {
+      id: Uuid.createUUID(),
+      command: 'resetTag',
+    };
+
+    var commandStr = JSON.stringify(commandData);
+    var promise = new Promise((resolve, reject) => {
+      _self.connectNodeRed(resolve, reject, commandStr, null);
+    });
+
+    return promise;
+  },
+
+  // 连接node red的websocket
+  connectNodeRed: function (resolve, reject, commandStr) {
+    var _self = this;
+
+    _self.webSocket = new WebSocket(this.socketUrl);
+
+    _self.webSocket.onopen = function (event) {
+      console.log('打印 Websocket 连接成功。');
+      if (commandStr != null && commandStr.length > 0) {
+        _self.sendCommand(commandStr);
+      } else {
+        _self.close();
+      }
+    };
+
+    _self.webSocket.onclose = function (event) {
+      console.log('打印 Websocket 断开连接。');
+    };
+
+    _self.webSocket.onerror = function (event) {
+      console.log('打印 Websocket 出错。');
+      _self.close();
+      reject({
+        success: false,
+        message: '打印 Websocket 出错。' + event.data,
+      });
+    };
+
+    _self.webSocket.onmessage = function (event) {
+      var data = JSON.parse(event.data);
+      console.log(data);
+      resolve(data);
+      _self.close();
+    };
+  },
+
+
+  /**
+   * WebSocket 发送指令
+   * @param {指令} command 
+   */
+  sendCommand: function (command) {
+    if (this.webSocket) {
+      this.webSocket.send(command);
+    }
+  },
+
+  /**
+   * 关闭Websocket
+   */
+  close: function () {
+    if (this.webSocket) {
+      this.webSocket.close();
+      this.webSocket = null;
+    };
+  },
+};
+

packages/print/write-epc.js

@@ -0,0 +1,8 @@
+
+import WriteEpc from './src/WriteEpc.vue';
+
+WriteEpc.install = function(Vue) {
+  Vue.component(WriteEpc.name, WriteEpc);
+};
+
+export default WriteEpc;