barcode Reader (#550)
							parent
							
								
									ed461de521
								
							
						
					
					
						commit
						1e40283c4e
					
				|  | @ -11,14 +11,16 @@ import { | |||
|  */ | ||||
| export function login({ | ||||
|   userName, | ||||
|   password | ||||
|   password, | ||||
|   token | ||||
| }) { | ||||
|   return requestRest({ | ||||
|     url: '/user/login', | ||||
|     method: 'post', | ||||
|     data: { | ||||
|       username: userName, | ||||
|       password | ||||
|       password, | ||||
|       token | ||||
|     } | ||||
|   }) | ||||
| } | ||||
|  |  | |||
|  | @ -1,19 +0,0 @@ | |||
| export default [ | ||||
|   // Product Code
 | ||||
|   { | ||||
|     elementColumnName: 'ProductValue', | ||||
|     isFromDictionary: true, | ||||
|     value: '', | ||||
|     overwriteDefinition: { | ||||
|       size: 24, | ||||
|       sequence: 10, | ||||
|       cssClassName: 'price-inquiry', | ||||
|       inputSize: 'large', | ||||
|       handleFocusGained: true, | ||||
|       handleFocusLost: true, | ||||
|       handleActionKeyPerformed: true, | ||||
|       isDisplayed: true, | ||||
|       isReadOnly: true | ||||
|     } | ||||
|   } | ||||
| ] | ||||
|  | @ -0,0 +1,41 @@ | |||
| export default [ | ||||
|   // Product Code
 | ||||
|   { | ||||
|     elementColumnName: 'ProductValue', | ||||
|     isFromDictionary: true, | ||||
|     overwriteDefinition: { | ||||
|       size: 24, | ||||
|       sequence: 10, | ||||
|       cssClassName: 'price-inquiry', | ||||
|       inputSize: 'large', | ||||
|       handleFocusGained: true, | ||||
|       handleFocusLost: true, | ||||
|       handleActionKeyPerformed: true | ||||
|     } | ||||
|   }, | ||||
|   // bar code reader
 | ||||
|   { | ||||
|     columnName: 'UPC', | ||||
|     tableName: 'M_Product', | ||||
|     isFromDictionary: true, | ||||
|     overwriteDefinition: { | ||||
|       size: 24, | ||||
|       sequence: 10, | ||||
|       handleActionPerformed: true, | ||||
|       handleContentSelection: true, | ||||
|       handleActionKeyPerformed: true | ||||
|     } | ||||
|   }, | ||||
|   { | ||||
|     columnName: 'Value', | ||||
|     tableName: 'M_Product', | ||||
|     isFromDictionary: true, | ||||
|     overwriteDefinition: { | ||||
|       size: 24, | ||||
|       sequence: 10, | ||||
|       handleActionPerformed: true, | ||||
|       handleContentSelection: true, | ||||
|       handleActionKeyPerformed: true | ||||
|     } | ||||
|   } | ||||
| ] | ||||
|  | @ -2,64 +2,63 @@ | |||
|   <div | ||||
|     v-if="isLoaded" | ||||
|     style="height: 100% !important;" | ||||
|     @click="focusProductValue" | ||||
|   > | ||||
|     <el-container style="height: 100% !important;"> | ||||
|       <!-- <el-main> --> | ||||
|       <img | ||||
|         fit="contain" | ||||
|         :src="backgroundForm" | ||||
|         :src="defaultImageLogo" | ||||
|         class="background-price-checking" | ||||
|       > | ||||
|       <el-form | ||||
|         key="form-loaded" | ||||
|         class="inquiry-form" | ||||
|         label-position="top" | ||||
|         label-width="10px" | ||||
|         @submit.native.prevent="notSubmitForm" | ||||
|       > | ||||
|         <template v-for="(field) in fieldsList"> | ||||
|           ---------------------------------------------------{{ field }} {{ typeof field.values }} | ||||
|       <el-main> | ||||
|         <el-form | ||||
|           key="form-loaded" | ||||
|           class="inquiry-form" | ||||
|           label-position="top" | ||||
|           label-width="10px" | ||||
|           @submit.native.prevent="notSubmitForm" | ||||
|         > | ||||
|           <field | ||||
|             v-for="(field) in fieldsList" | ||||
|             ref="ProductValue" | ||||
|             :key="field.columnName" | ||||
|             :metadata-field="field" | ||||
|             :v-model="field.defaultValue" | ||||
|             :v-model="field.value" | ||||
|             class="product-value" | ||||
|           /> | ||||
|         </template> | ||||
|       </el-form> | ||||
|         </el-form> | ||||
| 
 | ||||
|       <div class="inquiry-product"> | ||||
|         <el-row v-if="!isEmptyValue(productPrice)" :gutter="20"> | ||||
|           <el-col style="padding-left: 0px; padding-right: 0%;"> | ||||
|             <div class="product-description"> | ||||
|               {{ productPrice.productName }} {{ productPrice.productDescription }} | ||||
|             </div> | ||||
|             <br><br><br> | ||||
|         <div class="inquiry-product"> | ||||
|           <el-row v-if="!isEmptyValue(productPrice)" :gutter="20"> | ||||
|             <el-col style="padding-left: 0px; padding-right: 0%;"> | ||||
|               <div class="product-description"> | ||||
|                 {{ productPrice.productName }} {{ productPrice.productDescription }} | ||||
|               </div> | ||||
|               <br><br><br> | ||||
| 
 | ||||
|             <div class="product-price-base"> | ||||
|               Precio Base | ||||
|               <span class="amount"> | ||||
|                 {{ formatPrice(productPrice.priceBase, productPrice.currency.iSOCode) }} | ||||
|               </span> | ||||
|             </div> | ||||
|             <br><br><br> | ||||
|               <div class="product-price-base"> | ||||
|                 Precio Base | ||||
|                 <span class="amount"> | ||||
|                   {{ formatPrice(productPrice.priceBase, productPrice.currency.iSOCode) }} | ||||
|                 </span> | ||||
|               </div> | ||||
|               <br><br><br> | ||||
| 
 | ||||
|             <div class="product-tax"> | ||||
|               {{ productPrice.taxName }} | ||||
|               <span class="amount"> | ||||
|                 {{ formatPrice(productPrice.taxAmt, productPrice.currency.iSOCode) }} | ||||
|               </span> | ||||
|             </div> | ||||
|             <br><br><br> | ||||
|               <div class="product-tax"> | ||||
|                 {{ productPrice.taxName }} | ||||
|                 <span class="amount"> | ||||
|                   {{ formatPrice(productPrice.taxAmt, productPrice.currency.iSOCode) }} | ||||
|                 </span> | ||||
|               </div> | ||||
|               <br><br><br> | ||||
| 
 | ||||
|             <div class="product-price amount"> | ||||
|               {{ formatPrice(productPrice.grandTotal, productPrice.currency.iSOCode) }} | ||||
|             </div> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|       </div> | ||||
|       <!-- </el-main> --> | ||||
|               <div class="product-price amount"> | ||||
|                 {{ formatPrice(productPrice.grandTotal, productPrice.currency.iSOCode) }} | ||||
|               </div> | ||||
|             </el-col> | ||||
|           </el-row> | ||||
|         </div> | ||||
|       </el-main> | ||||
|     </el-container> | ||||
|   </div> | ||||
|   <div | ||||
|  | @ -75,8 +74,8 @@ | |||
| 
 | ||||
| <script> | ||||
| import formMixin from '@/components/ADempiere/Form/formMixin.js' | ||||
| import fieldsList from './fieldsList.js' | ||||
| import { requestGetProductPrice } from '@/api/ADempiere/form/price-checking.js' | ||||
| import fieldsList from './fieldsListBarCode.js' | ||||
| // import { requestGetProductPrice } from '@/api/ADempiere/form/price-checking.js' | ||||
| import { formatPercent, formatPrice } from '@/utils/ADempiere/valueFormat.js' | ||||
| import { buildImageFromArrayBuffer } from '@/utils/ADempiere/resource.js' | ||||
| import { requestImage } from '@/api/ADempiere/persistence.js' | ||||
|  | @ -86,6 +85,18 @@ export default { | |||
|   mixins: [ | ||||
|     formMixin | ||||
|   ], | ||||
|   props: { | ||||
|     metadata: { | ||||
|       type: Object, | ||||
|       default: () => { | ||||
|         return { | ||||
|           uuid: 'Bar-code-Reader', | ||||
|           containerUuid: 'Bar-code-Reader', | ||||
|           fieldsList | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       fieldsList, | ||||
|  | @ -93,7 +104,6 @@ export default { | |||
|       organizationBackground: '', | ||||
|       currentImageOfProduct: '', | ||||
|       search: 'sad', | ||||
|       input: '', | ||||
|       unsubscribe: () => {} | ||||
|     } | ||||
|   }, | ||||
|  | @ -104,6 +114,9 @@ export default { | |||
|     defaultImage() { | ||||
|       return require('@/image/ADempiere/priceChecking/no-image.jpg') | ||||
|     }, | ||||
|     defaultImageLogo() { | ||||
|       return require('@/image/ADempiere/priceChecking/todoagro.png') | ||||
|     }, | ||||
|     backgroundForm() { | ||||
|       if (this.isEmptyValue(this.currentImageOfProduct)) { | ||||
|         return this.organizationBackground | ||||
|  | @ -156,57 +169,57 @@ export default { | |||
|     formatPrice, | ||||
|     subscribeChanges() { | ||||
|       return this.$store.subscribe((mutation, state) => { | ||||
|         console.log(mutation.type) | ||||
|         if ((mutation.type === 'addActionKeyPerformed') && mutation.payload.columnName === 'ProductValue') { | ||||
|           // cleans all values except column name 'ProductValue' | ||||
|           this.search = mutation.payload.value | ||||
|           if (this.search.length) { | ||||
|             requestGetProductPrice({ | ||||
|               searchValue: mutation.payload.value | ||||
|             }) | ||||
|               .then(productPrice => { | ||||
|                 const { product, taxRate, priceStandard: priceBase } = productPrice | ||||
|                 const { rate } = taxRate | ||||
|                 const { imageURL: image } = product | ||||
|         // if ((mutation.type === 'updateValueOfField' || mutation.type === 'addActionKeyPerformed') && mutation.payload.columnName === 'ProductValue') { | ||||
|         //   // cleans all values except column name 'ProductValue' | ||||
|         //   this.search = mutation.payload.value | ||||
|         //   if (!this.isEmptyValue(this.search) && this.search.length >= 4) { | ||||
|         //     requestGetProductPrice({ | ||||
|         //       searchValue: mutation.payload.value | ||||
|         //     }) | ||||
|         //       .then(productPrice => { | ||||
|         //         console.log(productPrice) | ||||
|         //         const { product, taxRate, priceStandard: priceBase } = productPrice | ||||
|         //         const { rate } = taxRate | ||||
|         //         const { imageURL: image } = product | ||||
| 
 | ||||
|                 this.productPrice = { | ||||
|                   productName: product.name, | ||||
|                   productDescription: product.description, | ||||
|                   priceBase, | ||||
|                   priceStandard: productPrice.priceStandard, | ||||
|                   priceList: productPrice.priceList, | ||||
|                   priceLimit: productPrice.priceLimit, | ||||
|                   taxRate: rate, | ||||
|                   image, | ||||
|                   taxName: taxRate.name, | ||||
|                   taxIndicator: taxRate.taxIndicator, | ||||
|                   taxAmt: this.getTaxAmount(priceBase, rate), | ||||
|                   grandTotal: this.getGrandTotal(priceBase, rate), | ||||
|                   currency: productPrice.currency | ||||
|                 } | ||||
|               }) | ||||
|               .catch(error => { | ||||
|                 this.$message({ | ||||
|                   type: 'info', | ||||
|                   message: error.message, | ||||
|                   showClose: true | ||||
|                 }) | ||||
|                 this.productPrice = {} | ||||
|               }) | ||||
|               .finally(() => { | ||||
|                 this.$store.commit('updateValueOfField', { | ||||
|                   containerUuid: this.containerUuid, | ||||
|                   columnName: 'ProductValue', | ||||
|                   value: '' | ||||
|                 }) | ||||
|                 this.search = '' | ||||
|                 this.currentImageOfProduct = '' | ||||
|                 if (this.isEmptyValue(this.productPrice.image)) { | ||||
|                   this.getImage(this.productPrice.image) | ||||
|                 } | ||||
|               }) | ||||
|           } | ||||
|         } | ||||
|         //         this.productPrice = { | ||||
|         //           productName: product.name, | ||||
|         //           productDescription: product.description, | ||||
|         //           priceBase, | ||||
|         //           priceStandard: productPrice.priceStandard, | ||||
|         //           priceList: productPrice.priceList, | ||||
|         //           priceLimit: productPrice.priceLimit, | ||||
|         //           taxRate: rate, | ||||
|         //           image, | ||||
|         //           taxName: taxRate.name, | ||||
|         //           taxIndicator: taxRate.taxIndicator, | ||||
|         //           taxAmt: this.getTaxAmount(priceBase, rate), | ||||
|         //           grandTotal: this.getGrandTotal(priceBase, rate), | ||||
|         //           currency: productPrice.currency | ||||
|         //         } | ||||
|         //       }) | ||||
|         //       .catch(error => { | ||||
|         //         this.$message({ | ||||
|         //           type: 'info', | ||||
|         //           message: error.message, | ||||
|         //           showClose: true | ||||
|         //         }) | ||||
|         //         this.productPrice = {} | ||||
|         //       }) | ||||
|         //       .finally(() => { | ||||
|         //         this.$store.commit('updateValueOfField', { | ||||
|         //           containerUuid: this.containerUuid, | ||||
|         //           columnName: 'ProductValue', | ||||
|         //           value: '' | ||||
|         //         }) | ||||
|         //         this.search = '' | ||||
|         //         this.currentImageOfProduct = '' | ||||
|         //         if (this.isEmptyValue(this.productPrice.image)) { | ||||
|         //           this.getImage(this.productPrice.image) | ||||
|         //         } | ||||
|         //       }) | ||||
|         //   } | ||||
|         // } | ||||
|       }) | ||||
|     }, | ||||
|     getTaxAmount(basePrice, taxRate) { | ||||
|  | @ -230,7 +243,6 @@ export default { | |||
|     width: 100%; | ||||
|     height: 100%; | ||||
|     float: inherit; | ||||
|     z-index: 0; | ||||
|     // color: white; | ||||
|     // opacity: 0.5; | ||||
|   } | ||||
|  | @ -256,7 +268,7 @@ export default { | |||
|     right: 5%; | ||||
|     width: 100%; | ||||
|     top: 10%; | ||||
|     z-index: 1; | ||||
|     z-index: 0; | ||||
|   } | ||||
|   .inquiry-product { | ||||
|     position: absolute; | ||||
|  |  | |||
|  | @ -9,6 +9,7 @@ | |||
|         fit="contain" | ||||
|         :src="defaultImage" | ||||
|         class="background-price-checking" | ||||
|         style="z-index: 2;" | ||||
|       > | ||||
|       <el-main> | ||||
|         <el-form | ||||
|  | @ -28,7 +29,7 @@ | |||
|           /> | ||||
|         </el-form> | ||||
| 
 | ||||
|         <div class="inquiry-product"> | ||||
|         <div class="inquiry-product" style="z-index: 4;"> | ||||
|           <el-row v-if="!isEmptyValue(productPrice)" :gutter="20"> | ||||
|             <el-col style="padding-left: 0px; padding-right: 0%;"> | ||||
|               <div class="product-description"> | ||||
|  | @ -37,7 +38,7 @@ | |||
|               <br><br><br> | ||||
| 
 | ||||
|               <div class="product-price-base"> | ||||
|                 Precio Base | ||||
|                 {{ $t('form.priceChecking.basePrice') }} | ||||
|                 <span class="amount"> | ||||
|                   {{ formatPrice(productPrice.priceBase, productPrice.currency.iSOCode) }} | ||||
|                 </span> | ||||
|  | @ -53,7 +54,17 @@ | |||
|               <br><br><br> | ||||
| 
 | ||||
|               <div class="product-price amount"> | ||||
|                 {{ formatPrice(productPrice.grandTotal, productPrice.currency.iSOCode) }} | ||||
|                 <span style="float: right;"> {{ formatPrice(productPrice.grandTotal, productPrice.currency.iSOCode) }} </span> <br> | ||||
|                 {{ formatPrice(productPrice.schemaGrandTotal, productPrice.schemaCurrency.iSOCode) }} | ||||
|               </div> | ||||
|             </el-col> | ||||
|           </el-row> | ||||
|         </div> | ||||
|         <div class="inquiry-product" style="z-index: 4;"> | ||||
|           <el-row v-if="!messageError" :gutter="20"> | ||||
|             <el-col style="padding-left: 0px; padding-right: 0%;"> | ||||
|               <div class="product-price amount"> | ||||
|                 {{ $t('form.priceChecking.messageError') }} | ||||
|               </div> | ||||
|             </el-col> | ||||
|           </el-row> | ||||
|  | @ -87,11 +98,14 @@ export default { | |||
|   ], | ||||
|   data() { | ||||
|     return { | ||||
|       messageError: true, | ||||
|       fieldsList, | ||||
|       productPrice: {}, | ||||
|       organizationBackground: '', | ||||
|       currentImageOfProduct: '', | ||||
|       search: 'sad', | ||||
|       resul: '', | ||||
|       load: '', | ||||
|       unsubscribe: () => {} | ||||
|     } | ||||
|   }, | ||||
|  | @ -154,41 +168,43 @@ export default { | |||
|     formatPrice, | ||||
|     subscribeChanges() { | ||||
|       return this.$store.subscribe((mutation, state) => { | ||||
|         // console.log(mutation.type.length) | ||||
|         if ((mutation.type === 'updateValueOfField' || mutation.type === 'addActionKeyPerformed') && mutation.payload.columnName === 'ProductValue') { | ||||
|           // cleans all values except column name 'ProductValue' | ||||
|           this.search = mutation.payload.value | ||||
|           if (this.search.length >= 6) { | ||||
|           if (!this.isEmptyValue(this.search) && this.search.length >= 4) { | ||||
|             requestGetProductPrice({ | ||||
|               searchValue: mutation.payload.value | ||||
|             }) | ||||
|               .then(productPrice => { | ||||
|                 this.messageError = true | ||||
|                 const { product, taxRate, priceStandard: priceBase } = productPrice | ||||
|                 const { rate } = taxRate | ||||
|                 const { imageURL: image } = product | ||||
| 
 | ||||
|                 this.productPrice = { | ||||
|                   currency: productPrice.currency, | ||||
|                   image, | ||||
|                   grandTotal: this.getGrandTotal(priceBase, rate), | ||||
|                   productName: product.name, | ||||
|                   productDescription: product.description, | ||||
|                   priceBase, | ||||
|                   priceStandard: productPrice.priceStandard, | ||||
|                   priceList: productPrice.priceList, | ||||
|                   priceLimit: productPrice.priceLimit, | ||||
|                   schemaCurrency: productPrice.schemaCurrency, | ||||
|                   schemaGrandTotal: this.getGrandTotal(productPrice.schemaPriceStandard, rate), | ||||
|                   schemaPriceStandard: productPrice.schemaPriceStandard, | ||||
|                   schemaPriceList: productPrice.schemaPriceList, | ||||
|                   schemaPriceLimit: productPrice.schemaPriceLimit, | ||||
|                   taxRate: rate, | ||||
|                   image, | ||||
|                   taxName: taxRate.name, | ||||
|                   taxIndicator: taxRate.taxIndicator, | ||||
|                   taxAmt: this.getTaxAmount(priceBase, rate), | ||||
|                   grandTotal: this.getGrandTotal(priceBase, rate), | ||||
|                   currency: productPrice.currency | ||||
|                   taxAmt: this.getTaxAmount(priceBase, rate) | ||||
|                 } | ||||
|               }) | ||||
|               .catch(error => { | ||||
|                 this.$message({ | ||||
|                   type: 'info', | ||||
|                   message: error.message, | ||||
|                   showClose: true | ||||
|                 }) | ||||
|               .catch(() => { | ||||
|                 this.messageError = false | ||||
|                 this.timeMessage() | ||||
|                 this.productPrice = {} | ||||
|               }) | ||||
|               .finally(() => { | ||||
|  | @ -207,6 +223,11 @@ export default { | |||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     timeMessage() { | ||||
|       setTimeout(() => { | ||||
|         this.messageError = true | ||||
|       }, 2000) | ||||
|     }, | ||||
|     getTaxAmount(basePrice, taxRate) { | ||||
|       if (this.isEmptyValue(basePrice) || this.isEmptyValue(taxRate)) { | ||||
|         return 0 | ||||
|  |  | |||
|  | @ -396,6 +396,10 @@ export default { | |||
|       keyLayout: { | ||||
|         noProducto: 'No product available. Back to top' | ||||
|       } | ||||
|     }, | ||||
|     priceChecking: { | ||||
|       messageError: 'This Product Not Available', | ||||
|       basePrice: 'Base price' | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  |  | |||
|  | @ -371,6 +371,10 @@ export default { | |||
|       keyLayout: { | ||||
|         noProducto: 'No hay producto disponible Regresar al Principio' | ||||
|       } | ||||
|     }, | ||||
|     priceChecking: { | ||||
|       messageError: 'Este Producto No Disponible', | ||||
|       basePrice: 'Precio Base' | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  |  | |||
|  | @ -92,6 +92,7 @@ const staticRoutes = [ | |||
|         component: () => import('@/views/ADempiere/Form'), | ||||
|         name: 'BarcodeReader', | ||||
|         meta: { | ||||
|           icon: 'search', | ||||
|           title: 'BarcodeReader', | ||||
|           isIndex: true | ||||
|         } | ||||
|  |  | |||
|  | @ -103,14 +103,16 @@ const actions = { | |||
|     userName, | ||||
|     password, | ||||
|     roleUuid, | ||||
|     organizationUuid | ||||
|     organizationUuid, | ||||
|     token | ||||
|   }) { | ||||
|     return new Promise((resolve, reject) => { | ||||
|       login({ | ||||
|         userName, | ||||
|         password, | ||||
|         roleUuid, | ||||
|         organizationUuid | ||||
|         organizationUuid, | ||||
|         token | ||||
|       }) | ||||
|         .then(logInResponse => { | ||||
|           if ([13, 500].includes(logInResponse.code)) { | ||||
|  |  | |||
|  | @ -265,6 +265,12 @@ export function convertProductPrice(productPriceToConvert) { | |||
|     product: convertProduct( | ||||
|       productPriceToConvert.product | ||||
|     ), | ||||
|     schemaCurrency: convertCurrency( | ||||
|       productPriceToConvert.schema_currency | ||||
|     ), | ||||
|     schemaPriceLimit: productPriceToConvert.schema_price_limit, | ||||
|     schemaPriceList: productPriceToConvert.schema_price_list, | ||||
|     schemaPriceStandard: productPriceToConvert.schema_price_standard, | ||||
|     priceList: productPriceToConvert.price_list, | ||||
|     priceStandard: productPriceToConvert.price_standard, | ||||
|     priceLimit: productPriceToConvert.price_limit, | ||||
|  |  | |||
|  | @ -15,7 +15,7 @@ | |||
|         :panel-type="panelType" | ||||
|       /> | ||||
|     </el-header> | ||||
|     <el-main style="padding-right: 0px !important; padding-bottom: 0px !important;"> | ||||
|     <el-main style="padding-right: 0px !important; padding-bottom: 0px !important;padding-top: 0px !important;padding-left: 0px !important;"> | ||||
|       <el-row> | ||||
|         <el-col :span="24"> | ||||
|           <el-card | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 Elsio Sanchez
						Elsio Sanchez