@things-factory/operato-wms 3.7.2 → 3.7.7

package/client/pages/order/reverse-kitting-order/reverse-kitting-order-detail.js

@@ -1,6 +1,8 @@
 import '@things-factory/biz-ui'
+import '@things-factory/barcode-ui'
 import '@things-factory/grist-ui'
 import '@things-factory/product-ui'
+import '../../order/reverse-kitting-order/reverse-kitting-pallet-label-popup'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
@@ -26,6 +28,12 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
           flex-direction: column;
           overflow-x: auto;
         }
+        .form-container {
+          display: flex;
+        }
+        .form-container > form {
+          flex: 1;
+        }
         .container {
           flex: 1;
           display: flex;
@@ -80,6 +88,7 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
       inventoryGristConfig: Object,
       inventoryData: Object,
       _bizplaces: Object,
+      _bizplace: Object,
       _bizplaceId: String,
       _bizplaceName: String,
       locationSortingRules: Object,
@@ -99,24 +108,28 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
 
   render() {
     return html`
-      <form name="reverseKittingOrder" class="multi-column-form" autocomplete="off">
-        <fieldset>
-          <legend>${i18next.t('title.reverse_kitting_no')}: ${this._reverseKittingNo}</legend>
-          <label>${i18next.t('label.company')}</label>
-          <input type="hidden" name="bizplaceId" value="${this._bizplaceId}" />
-          <input
-            readonly
-            type="text"
-            name="bizplaceName"
-            value="${this._bizplaceName}"
-            @click="${this._openBizplacesSelector.bind(this)}"
-          />
-
-          ${this._reverseKittingNo != 'new'
-            ? html`<label>${i18next.t('label.status')}</label><input readonly type="text" name="status" />`
-            : ''}
-        </fieldset>
-      </form>
+      <div class="form-container">
+        <form name="reverseKittingOrder" class="multi-column-form" autocomplete="off">
+          <fieldset>
+            <legend>${i18next.t('title.reverse_kitting_no')}: ${this._reverseKittingNo}</legend>
+            <label>${i18next.t('label.company')}</label>
+            <input type="hidden" name="bizplaceId" value="${this._bizplaceId}" />
+            <input
+              readonly
+              type="text"
+              name="bizplaceName"
+              value="${this._bizplaceName}"
+              @click="${this._openBizplacesSelector.bind(this)}"
+            />
+
+            ${!this._newOrder
+              ? html`<label>${i18next.t('label.status')}</label><input readonly type="text" name="status" />`
+              : ''}
+          </fieldset>
+        </form>
+
+        ${!this._newOrder ? html`<barcode-tag bcid="qrcode" .value=${this._reverseKittingNo}></barcode-tag>` : ''}
+      </div>
       <div class="container">
         <div class="grist">
           <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.target_products')}</h2>
@@ -188,12 +201,19 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
             ...CommonButtonStyles.activate
           }
         ]
+      } else if (this._status === ORDER_STATUS.EXECUTING.value) {
+        actions.push({
+          title: i18next.t('button.lot_label_print'),
+          action: this._openLotLabelPrintPopup.bind(this),
+          ...CommonButtonStyles.label
+        })
       }
     }
 
     return {
       title: i18next.t('title.reverse_kitting_order_detail'),
       actions,
+      printable: { accept: ['preview'], content: this },
       help: 'operato-wms/reverse-kitting-order/reverse-kitting-order-detail'
     }
   }
@@ -203,6 +223,8 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
     if (this.active) {
       if (changes.resourceId) {
         this._reverseKittingNo = changes.resourceId
+      } else {
+        this._reverseKittingNo = 'new'
       }
 
       this._newOrder = this._reverseKittingNo == 'new' ? true : false
@@ -226,7 +248,7 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
   }
 
   _configureInventoryGrist() {
-    let editable = this._bizplaceId ? true : false
+    let editable = this._bizplaceId ? (this._newOrder ? true : false) : false
 
     this.inventoryGristConfig = {
       pagination: { infinite: true },
@@ -304,6 +326,7 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
           },
           width: 250
         },
+        { name: 'batchId', hidden: true },
         {
           type: 'string',
           name: 'productSKU',
@@ -452,9 +475,11 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
     if (!response.errors) {
       const bizplaces = response.data.partnersBizplaces.items
       if (bizplaces.length == 1) {
+        this._bizplace = bizplaces[0]
         this._bizplaceId = bizplaces[0].id
         this._bizplaceName = bizplaces[0].name
       } else {
+        this._bizplace = null
         this._bizplaceId = ''
         this._bizplaceName = ''
       }
@@ -481,6 +506,8 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
                 description
               }
               orderReverseKittings {
+                id
+                name
                 set
                 targetType
                 targetBatchId
@@ -535,6 +562,7 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
             return {
               ...orderReverseKitting,
               ...orderReverseKitting.inventory,
+              orderReverseKittingId: orderReverseKitting.id,
               productSKU: orderReverseKitting.inventory.product.sku,
               productName: orderReverseKitting.inventory.product.name,
               productCombination: this.displayProductCombination(JSON.parse(orderReverseKitting.operationGuide))
@@ -838,40 +866,77 @@ class ReverseKittingOrderDetail extends connect(store)(localize(i18next)(PageVie
     )
   }
 
+  _openLotLabelPrintPopup() {
+    const _pallets = {
+      records: this.inventoryData.records.map(record => {
+        const operationGuide = JSON.parse(record.operationGuide)
+        let qty = operationGuide.data.productCombinationSets?.length || 0
+
+        return {
+          id: record.orderReverseKittingId,
+          palletId: record.palletId,
+          batchId: record.batchId,
+          product: record.product,
+          qty,
+          printQty: qty,
+          packingType: record.packingType,
+          bizplace: this._bizplace
+        }
+      })
+    }
+    openPopup(
+      html` <reverse-kitting-pallet-label-popup .pallets="${_pallets}"></reverse-kitting-pallet-label-popup> `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.lot_label')
+      }
+    )
+  }
+
   _openProductCombinations(columns, data, column, record, rowIndex) {
-    if (record.inventory.product.id) {
-      openPopup(
-        html`
-          <product-combination-selection-popup
-            .productId="${record.inventory.product.id}"
-            .packingType="${record.packingType}"
-            .packingSize="${record.packingSize}"
-            .bizplaceId="${this._bizplaceId}"
-            @selected="${e => {
-              const operationGuide = { data: { ...e.detail } }
-
-              this.inventoryGrist.dirtyData.records = this.inventoryGrist.dirtyData.records.map(item => {
-                if (item.id == record.id) {
-                  item.operationGuide = operationGuide
-                  item.productCombination = this.displayProductCombination(operationGuide)
-                }
+    if (this._newOrder) {
+      if (record.inventory.product.id) {
+        openPopup(
+          html`
+            <product-combination-selection-popup
+              .productId="${record.inventory.product.id}"
+              .packingType="${record.packingType}"
+              .packingSize="${record.packingSize}"
+              .bizplaceId="${this._bizplaceId}"
+              @selected="${e => {
+                let operationGuide = { data: { ...e.detail } }
+                let productCombinationSets = operationGuide.data.productCombinationSets.map(item => {
+                  return {
+                    ...item,
+                    qty: item.qty * record.qty
+                  }
+                })
+                operationGuide.data.productCombinationSets = productCombinationSets
+
+                this.inventoryGrist.dirtyData.records = this.inventoryGrist.dirtyData.records.map(item => {
+                  if (item.id == record.id) {
+                    item.operationGuide = operationGuide
+                    item.productCombination = this.displayProductCombination(operationGuide)
+                  }
 
-                return item
-              })
+                  return item
+                })
 
-              this.inventoryData = {
-                ...this.inventoryData,
-                records: [...this.inventoryGrist.dirtyData.records]
-              }
-            }}"
-          ></product-combination-selection-popup>
-        `,
-        {
-          backdrop: true,
-          size: 'large',
-          title: `${record.productSKU}`
-        }
-      )
+                this.inventoryData = {
+                  ...this.inventoryData,
+                  records: [...this.inventoryGrist.dirtyData.records]
+                }
+              }}"
+            ></product-combination-selection-popup>
+          `,
+          {
+            backdrop: true,
+            size: 'large',
+            title: `${record.productSKU}`
+          }
+        )
+      }
     }
   }
 

package/client/pages/order/reverse-kitting-order/reverse-kitting-order-list.js

@@ -122,12 +122,7 @@ class ReverseKittingOrderList extends localize(i18next)(PageView) {
           icon: 'reorder',
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
-              const status = record.status
-              if (status === ORDER_STATUS.REJECTED.value) {
-                navigate(`rejected_vas_order/${record.name}`) // 1. move to rejected detail page
-              } else {
-                navigate(`reverse_kitting_order_detail/${record.name}`)
-              }
+              navigate(`reverse_kitting_order_detail/${record.name}`)
             }
           }
         },

package/client/pages/order/reverse-kitting-order/reverse-kitting-pallet-label-popup.js

@@ -0,0 +1,239 @@
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { DirectPrinter } from '@things-factory/barcode-base'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, store } from '@things-factory/shell'
+import { isMobileDevice } from '@things-factory/utils'
+
+import { PALLET_LABEL_SETTING_KEY } from '../../constants'
+
+class ReverseKittingPalletLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
+  static get properties() {
+    return {
+      config: Object,
+      data: Object,
+      pallets: Object,
+      _palletLabel: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--main-section-background-color);
+        }
+        .grist {
+          background-color: var(--main-section-background-color);
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
+        data-grist {
+          overflow-y: hidden;
+          flex: 1;
+        }
+        .button-container {
+          padding: var(--button-container-padding);
+          margin: var(--button-container-margin);
+          text-align: var(--button-container-align);
+          background-color: var(--button-container-background);
+          height: var(--button-container-height);
+        }
+      `
+    ]
+  }
+
+  firstUpdated() {
+    this.config = {
+      pagination: { infinite: true },
+      rows: { selectable: { multiple: true }, appendable: false },
+      list: { fields: ['batchId', 'palletQty', 'printQty'] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'batchId',
+          header: i18next.t('field.batch_id'),
+          width: 150
+        },
+        {
+          type: 'object',
+          name: 'product',
+          header: i18next.t('field.product'),
+          width: 250
+        },
+        {
+          type: 'integer',
+          name: 'qty',
+          header: i18next.t('field.qty'),
+          width: 80
+        },
+        {
+          type: 'integer',
+          name: 'printQty',
+          header: i18next.t('field.print_qty'),
+          record: { editable: true },
+          width: 80
+        }
+      ]
+    }
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  render() {
+    return html`
+      <div class="grist">
+        <data-grist
+          id="grist"
+          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+          .config=${this.config}
+          .data="${this.data}"
+        ></data-grist>
+      </div>
+
+      <div class="button-container">
+        <mwc-button raised @click="${this._printLabel.bind(this)}" label="${i18next.t('button.print')}"></mwc-button>
+      </div>
+    `
+  }
+
+  updated(changeProps) {
+    if (changeProps.has('pallets')) {
+      if (this.pallets && this.pallets.records && this.pallets.records.length) {
+        this.data = {
+          records: this.pallets.records.map(record => {
+            return {
+              ...record,
+              startSeq: 1
+            }
+          })
+        }
+      }
+    }
+  }
+
+  async _printLabel() {
+    try {
+      let labelId = this._palletLabel && this._palletLabel.id
+      let dateStr = new Date().toJSON().slice(0, 10).replace(/-/g, '/')
+      let _targetRows = this._validate()
+      const palletRuleType = 'vas_pallet_id' // pallet id rule type
+      const targets = _targetRows.map(target => {
+        return {
+          id: target.id,
+          printQty: target.printQty
+        }
+      })
+
+      const response = await client.query({
+        query: gql`
+          query generateReverseKittingPalletId($targets: [PalletInfo], $type: String!) {
+            generateReverseKittingPalletId(targets: $targets, type: $type) {
+              product {
+                sku
+                name
+                type
+                description
+                movement
+                auxUnit1
+                auxValue1
+              }
+              bizplace {
+                name
+              }
+              batchId
+              batchIdRef
+              packingType
+              palletId
+              remark
+            }
+          }
+        `,
+        variables: { targets, type: palletRuleType }
+      })
+
+      if (!response.errors) {
+        const results = response.data.generateReverseKittingPalletId
+
+        for (let i = 0; i < results.length; i++) {
+          let searchParams = new URLSearchParams()
+
+          searchParams.append('pallet', results[i].palletId)
+          searchParams.append('batch', results[i].batchId)
+          searchParams.append('product', results[i].product?.name)
+          searchParams.append('sku', results[i].product?.sku)
+          searchParams.append('auxUnit1', results[i].product?.auxUnit1)
+          searchParams.append('auxValue1', results[i].product?.auxValue1)
+          searchParams.append('type', results[i].product?.type)
+          searchParams.append('description', results[i].product?.description)
+          searchParams.append('packing', results[i].packingType)
+          searchParams.append('customer', results[i].bizplace?.name)
+          searchParams.append('date', dateStr)
+          searchParams.append('remark', results[i].remark)
+          searchParams.append('batchRef', results[i].batchIdRef)
+          searchParams.append('expirationDate', '')
+          try {
+            const response = await fetch(`label-command/${labelId}?${searchParams.toString()}`, {
+              method: 'GET'
+            })
+
+            if (response.status !== 200) {
+              throw `Error : Can't get label command from server (response: ${response.status})`
+            }
+
+            let command = await response.text()
+
+            if (!this.printer) {
+              this.printer = new DirectPrinter()
+            }
+
+            await this.printer.print(command)
+          } catch (ex) {
+            delete this.printer
+            throw ex
+          }
+        }
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  _validate() {
+    let _targetRows = this.dataGrist.selected.length > 0 ? this.dataGrist.selected : this.dataGrist.dirtyData.records
+    if (!_targetRows.every(row => row.printQty)) throw new Error(i18next.t('text.print_qty_is_empty'))
+    return _targetRows
+  }
+
+  stateChanged(state) {
+    let palletLabelSetting = state.dashboard[PALLET_LABEL_SETTING_KEY]
+    this._palletLabel = (palletLabelSetting && palletLabelSetting.board) || {}
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('reverse-kitting-pallet-label-popup', ReverseKittingPalletLabelPopup)