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

/**
 * EPC 打印界面
 */

<template>
  <div>
    <!-- 打印结果模态框 -->
    <Modal
      v-model:show="modal"
      title="发卡机发卡"
    >
      <div class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">EPC</label>
          <div class="col-sm-10">
            <input v-model="lastWriteEpc" type="text" class="form-control" placeholder="EPC" />
          </div>
        </div>
      </div>
      

      <div
        v-if="printResult != null && printResult.command == 'restore'"
        class="alert alert-danger"
        role="alert"
      >
        {{ printResult.success ? '操作成功' : '操作失败' }},{{ printResult.message }}
      </div>

      <button
        type="button"
        class="btn btn-default m-button"
        @click="printSingleEpc(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="alert alert-danger"
        role="alert"
      >
        {{ printResult.success ? '操作成功' : '操作失败' }},{{ printResult.message }}待写入EPC：{{ lastWriteEpc }}
      </div>
      
      <div
        v-if="printResult != null && printResult.command == 'read'"
        class="alert alert-info"
        role="alert"
      >
        {{ printResult.success ? '操作成功' : '操作失败' }},读取到{{ printResult.tagCount }}个标签,{{ printResult.epcs }}
      </div>
    </Modal>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import PrintEpcUtil from './PrintEpcUtil.js';
import Modal from '../../modal/src/Modal.vue';
import Loading from '../../loading/src/Loading.vue';

export default {
  name: 'PrintEpc',

  components: {
    Modal, Loading,
  },

  props: {
    'printerName':
    {
      type: String,
      default: '',
    },
    '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: {
    /**
         * 打印PrintPages
         */
    printPrintPages: function (printPages) {
      let _self = this;

      if (printPages == null || printPages.length == 0) {
        this.printResult.command = 'write';
        this.printResult.success = false;
        this.printResult.message = '无可打印的数据。';

        this.modal = true;
        return;
      }

      if (printPages.length > 1) {
        this.printResult.command = 'write';
        this.printResult.success = false;
        this.printResult.message = '使用发卡机发卡，每次只能发一个标签，打印程序收到了' + printPages.length + '个标签数据。';

        this.modal = true;
        return;
      }

      let printPage = printPages[0];
      let epc = null;
      for (let index = 0; index < printPage.printItems.length; index++) {
        if (printPage.printItems[index].displayType == 'EPC') {
          epc = printPage.printItems[index].content;
        }
      }


      this.printSingleEpc(epc);
    },

    /**
         * 打印单张EPC
         * @param epc 待打印的EPC的内容
         */
    printSingleEpc: function (epc) {
      let _self = this;

      _self.lastWriteEpc = epc;
      _self.modal = false;

      let promise = PrintEpcUtil.printSingleEpc(this.printerName, epc);

      _self.loading=true;
      promise.then(successData => {
        _self.loading=false;
        if (successData.success == false) {
          successData.command = 'write';
          _self.printResult = successData;
          _self.modal = true;
        }
      }, errorData => {
        _self.loading=false;
        if (errorData.success == false) {
          errorData.command = 'write';
          _self.printResult = errorData;
          _self.modal = true;
        }
      });
    },

    /**
         * 恢复EPC
         */
    restoreEpc: function () {
      let _self = this;

      _self.modal = true;

      let promise = PrintEpcUtil.resetTag(this.printerName);

      promise.then(successData => {
        successData.command = 'restore';
        _self.printResult = successData;
        _self.modal = true;
      }, errorData => {
        errorData.command = 'restore';
        _self.printResult = errorData;
        _self.modal = true;
      });
    },

    /**
         * 读取EPC
         */
    readEpc: function () {
      let _self = this;

      _self.modal = true;

      let promise = PrintEpcUtil.readEpc(this.printerName);

      promise.then(successData => {
        successData.command = 'read';
        _self.printResult = successData;
      }, errorData => {
        errorData.command = 'read';
        _self.printResult = errorData;
      });
    },

    /**
     * 显示模态框
     */
    show: function () {
      this.modal = true;
    },
  },
};
</script>

<style scoped>
  .m-button{
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
</style>