pc-component-v5/packages/print/src/WriteEpc.vue

/**
 * 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>