client-wms-v5/src/print/PrintedPurchaseOrder.vue

<template>
  <div class="container-fluid">
    <Navbar title="已打印" :is-go-back="true" />
    <div class="flex-container" style="margin-top: 10px">
      <div class="flex-header">
        <div class="form-inline">
          <PrintWidget
            ref="printWidget"
            :printer-localstorage-id="'#InventoryPrinterPrinter'"
            @selected-printer-name="getPrintName"
          />
          <div class="form-group">
            <label>采购订单号</label>
            <input
              v-model="documentNo"
              autocomplete="off"
              type="text"
              placeholder="输入采购订单号"
              class="form-control"
            />
          </div>
          <div class="form-group">
            <label>存货名称</label>
            <input
              v-model="inventoryName"
              autocomplete="off"
              type="text"
              placeholder="输入存货档案名称"
              class="form-control"
            />
          </div>
          <div class="form-group">
            <label>存货编码</label>
            <input
              v-model="inventoryCode"
              autocomplete="off"
              type="text"
              placeholder="输入存货档案编码"
              class="form-control"
            />
          </div>
          <div class="form-group">
            <label>规格型号</label>
            <input
              v-model="inventoryType"
              autocomplete="off"
              type="text"
              placeholder="输入规格型号"
              class="form-control m-form-control"
            />
          </div>
        </div>
        <div class="form-inline" style="margin-top: 10px">
          <button
            type="button"
            class="btn btn-primary"
            @click="loadPrintedInventoryInstance"
          >
            查询
          </button>
          <!-- <button type="button"
                            class="btn btn-primary"
                            @click="printInvoice">打印发货单</button> -->
          <button type="button" class="btn btn-primary" @click="printBarCode">
            打印条码
          </button>
          <button type="button" class="btn btn-primary" @click="printPdf">
            打印PDF
          </button>
        </div>
      </div>
      <div class="flex-content">
        <table
          v-if="inventoryInstances.length > 0"
          id="myTable"
          class="table table-bordered"
        >
          <thead>
            <tr>
              <th>
                <input
                  id="checkAll"
                  v-model="checkAll"
                  autocomplete="off"
                  type="checkbox"
                  @click="checkedAll($event)"
                />
              </th>
              <th>序号</th>
              <th>订单编号</th>
              <th>存货名称</th>
              <th>存货编码</th>
              <th>规格型号</th>
              <th>创建日期</th>
              <th>打印日期</th>
              <th>条码</th>
              <th>包装内物料数量</th>
              <th>订单数量</th>
              <th>打印状态</th>
            </tr>
          </thead>
          <tbody id="table-notPrint">
            <tr v-for="(item, index) in inventoryInstances" :key="item.id">
              <td>
                <input
                  :id="item"
                  v-model="checkboxModel"
                  autocomplete="off"
                  type="checkbox"
                  :value="item"
                /><label :for="item" />
              </td>
              <td>
                {{
                  (pagination.current_page - 1) * pagination.per_page +
                    1 +
                    index
                }}
              </td>
              <td>{{ item.purchaseOrderDocumentNo }}</td>
              <td>{{ item.inventoryName }}</td>
              <td>{{ item.inventoryCode }}</td>
              <td>{{ item.inventoryType }}</td>
              <td>{{ item.createDate }}</td>
              <td>{{ item.printedDate }}</td>
              <td>{{ item.barCode }}</td>
              <td>{{ item.printQuantity }}</td>
              <td>{{ item.quantity }}</td>
              <td>已打印</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="flex-footer">
        <VueBootstrapPagination
          :pagination="pagination"
          :callback="loadPrintedInventoryInstance"
        />
      </div>

      <Modal v-model:show="modal">
        <ProcessReportResult :process-report-result="processReportResult" />
        <template #header>执行结果</template>
      </Modal>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';






import InventoryInstancePrintResource from '../api/wms/InventoryInstancePrintResource.js';

import { PrintUtil } from 'pc-component-v3';


export default {
  name: 'PrintedPurchaseOrder',
  components: {
    
  },
  data: function () {
    return {
      inventoryName: '',
      inventoryCode: '',
      inventoryType: '',
      documentNo: '',
      inventoryInstances: [],
      checkboxModel: [], //获取选项框数据
      checkAll: '', //全选,
      reportResult: {},
      pagination: {
        total: 0,
        per_page: 30,
        current_page: 1,
        last_page: 10,
      },
      processReportResult: {},
      loading: false,
      modal: false,
      selectedPrinterTitle:'',
    };
  },
  watch: {
    // 反选
    checkboxModel: {
      handler: function (val, oldVal) {
        console.log(this.checkboxModel.toString());
        if (this.inventoryInstances.length == this.checkboxModel.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      },
      deep: true,
    },
  },
  mounted: function () {
    this.loadPrintedInventoryInstance();
    this.keydown();
  },
  methods: {

    getPrintName:function(value){
      this.selectedPrinterTitle = value;
    },

    /**
     * 打印PDF条码
     * @return {[type]} [description]
     */
    printPdf: function () {
      var _self = this;
      if (_self.checkboxModel.length == 0) {
        Notify.notice('提示', '请至少选择一项打印', false);
        return;
      }
      _self.loading=true;

      var ids = [];
      _self.checkboxModel.forEach(function (item) {
        ids.push(item.id);
      });

      //    ProcessReportResource.runProcessByIds(287681, ids).then(
      //      successData => {
      //        _self.loading=false;
      //        _self.$refs.modal.show = true;
      //        _self.processReportResult = successData;
      //        _self.checkboxModel = [];
      //        _self.loadPrintedInventoryInstance();
      //      },
      //      errorData => {
      //        _self.loading=false;
      //        Common.processException(errorData);
      //      },
      //    );
    },
    loadPrintedInventoryInstance: function () {
      var _self = this;
      var documentNo = _self.documentNo;
      var inventoryName = _self.inventoryName;
      var inventoryCode = _self.inventoryCode;
      var inventoryType = _self.inventoryType;
      // eslint-disable-next-line
      InventoryInstancePrintResource.queryPrintedInventoryInstancePrint(
        true,
        _self.pagination.current_page,
        _self.pagination.per_page,
        inventoryName,
        inventoryCode,
        inventoryType,
      ).then(
        successData1 => {
          if (successData1) {
            _self.inventoryInstances = successData1.inventoryInstancePrintDtos;
            //_self.checkboxModel.splice(0,_self.checkboxModel.length);
            console.log(successData1);
            // 分页相关
            // eslint-disable-next-line
            _self.pagination.total = successData1.totalCount;
            // eslint-disable-next-line
            _self.pagination.last_page =
              successData1.totalCount % _self.pagination.per_page == 0
                ? successData1.totalCount / _self.pagination.per_page
                : Math.floor(
                  successData1.totalCount / _self.pagination.per_page,
                ) + 1;
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    //打印条码
    printBarCode: function () {
      var _self = this;
      let selectedPrinter = this.selectedPrinterTitle;
      if (_self.checkboxModel.length == 0) {
        Notify.notice('提示', '请至少选择一项打印', false);
      } else if (selectedPrinter == null || selectedPrinter.length == 0) {
        Notify.error('提示', '请先选择打印机。', false);
        return;
      } else {
        _self.loading=true;

        var inventoryInstanceIds = [];
        _self.checkboxModel.forEach(function (item) {
          inventoryInstanceIds.push(item.inventoryInstanceId);
        });

        InventoryInstancePrintResource.print(inventoryInstanceIds).then(
          baseListResponse => {
            if (baseListResponse.errorCode == 0) {
              _self.loading=false;
              var contents = [];
              baseListResponse.datas.forEach(function (item) {
                var printItem = {
                  id: null,
                  name: null,
                  content: item,
                };
                if (
                  printItem.content == null ||
                  printItem.content.printItems == null ||
                  printItem.content.printItems.length == 0
                ) {
                  Notify.error('错误', '打印模板无数据，不能打印。');
                  return;
                }
                var content = JSON.stringify(printItem.content);
                if (content == null || content == '' || content == '{}') {
                  Notify.error('错误', '请先选择模板，再点击下载。');
                  return;
                }
                contents.push(printItem.content);
              });
              PrintUtil.printPrintPages(contents, selectedPrinter);
            }
          },
          errorData => {
            _self.loading=false;
            Common.processException(errorData);
          },
        );

        // 延时 2 秒钟再进行打印
        var timer1 = window.setTimeout(function () {
          _self.loadPrintedInventoryInstance();
          _self.checkboxModel = [];
          window.clearTimeout(timer1);
        }, 2000);
      }
    },

    /**
     * 打印发货单
     * @return {[type]} [description]
     */
    printInvoice: function () {
      var _self = this;

      var id = 287680;
      var data = _self.checkboxModel;

      _self.loading=true;

      //    ProcessReportResource.runProcessByIds(_self.checkboxModel).then(
      //      successData1 => {
      //        if (successData1) {
      //          _self.loading=false;
      //          _self.$refs.modal.show = true;
      //          _self.loading=false;
      //          _self.processReportResult = data;
      //        }
      //      },
      //      errorData => {
      //        _self.loading=false;
      //        Common.processException(errorData);
      //      },
      //    );
    },

    checkedAll: function (event) {
      var _self = this;
      if (event.currentTarget.checked) {
        _self.checkboxModel.splice(0, _self.checkboxModel.length);
        _self.inventoryInstances.forEach(function (item) {
          _self.checkboxModel.push(item);
        });
      } else {
        _self.checkboxModel.splice(0, _self.checkboxModel.length);
      }
    },

    // 键盘回车事件
    keydown: function () {
      var _self = this;
      document.onkeydown = function (event) {
        var currentEvent = event || window.event || arguments[0];
        if (currentEvent && currentEvent.keyCode == 13) {
          currentEvent.preventDefault();
          _self.loadPrintedInventoryInstance();
        }
      };
    },
  },
};
</script>

<style scoped>
table.fixed-table tr th {
  text-align: center;
}
.myTable {
  margin-top: 10px;
  border-left: 1px solid #c9c9c9;
  border-top: 1px solid #c9c9c9;
  border-collapse: collapse;
  width: 100%;
}
.myTable th {
  border-right: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  padding: 10px 0px;
  font-size: 18px;
  font-family: "宋体";
  text-align: center;
}

.myTable td {
  border-right: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  background: #fff;
  padding: 6px 0px;
  font-size: 16px;
  line-height: 20px;
  color: #676767;
  text-align: center;
}
.m-form-group {
  margin-bottom: 5px;
  margin-top: 5px;
}

.m-form-label {
  width: 120px;
  text-align: right;
  padding-right: 6px;
}

.m-form-control {
  width: 150px;
}

div.panel {
  margin-top: 15px;
}
tbody > tr:hover {
  background-color: #c0c0c0;
}

input[type="checkbox"] {
  display: none;
}
input#checkAll {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid black;
  border-radius: 2px;
}
input[type="checkbox"] + label {
  width: 1.2em;
  height: 1.2em;
  border: 1px solid black;
  border-radius: 2px;
  position: relative;
}

input[type="checkbox"] + label:hover {
  cursor: pointer;
}

input[type="checkbox"]:checked + label::before {
  font-size: 1.9em;
  content: "\2714";
  background: yellowgreen;
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 3px;
  border: 1px solid black;
  line-height: 10px;
}
</style>