blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-13 15:15:53 +08:00
Code Issues Releases Wiki Activity

barcode Reader (#550)

Browse Source
This commit is contained in:
Elsio Sanchez 2020-12-01 19:36:57 -04:00 committed by GitHub
parent ed461de521
commit 1e40283c4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 210 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/user.js
View File

@ -11,14 +11,16 @@ import {
*/ */
export function login({ export function login({
userName, userName,
password password,
token
}) { }) {
return requestRest({ return requestRest({
url: '/user/login', url: '/user/login',
method: 'post', method: 'post',
data: { data: {
username: userName, username: userName,
password password,
token
} }
}) })
} }

19
src/components/ADempiere/Form/BarcodeReader/fieldsList.js
View File

@ -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
}
}
]

41
src/components/ADempiere/Form/BarcodeReader/fieldsListBarCode.js Normal file
View File

@ -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
}
}
]

206
src/components/ADempiere/Form/BarcodeReader/index.vue
View File

@ -2,64 +2,63 @@
<div <div
v-if="isLoaded" v-if="isLoaded"
style="height: 100% !important;" style="height: 100% !important;"
@click="focusProductValue"
> >
<el-container style="height: 100% !important;"> <el-container style="height: 100% !important;">
<!-- <el-main> -->
<img <img
fit="contain" fit="contain"
:src="backgroundForm" :src="defaultImageLogo"
class="background-price-checking" class="background-price-checking"
> >
<el-form <el-main>
key="form-loaded" <el-form
class="inquiry-form" key="form-loaded"
label-position="top" class="inquiry-form"
label-width="10px" label-position="top"
@submit.native.prevent="notSubmitForm" label-width="10px"
> @submit.native.prevent="notSubmitForm"
<template v-for="(field) in fieldsList"> >
---------------------------------------------------{{ field }} {{ typeof field.values }}
<field <field
v-for="(field) in fieldsList"
ref="ProductValue" ref="ProductValue"
:key="field.columnName" :key="field.columnName"
:metadata-field="field" :metadata-field="field"
:v-model="field.defaultValue" :v-model="field.value"
class="product-value" class="product-value"
/> />
</template> </el-form>
</el-form>
<div class="inquiry-product"> <div class="inquiry-product">
<el-row v-if="!isEmptyValue(productPrice)" :gutter="20"> <el-row v-if="!isEmptyValue(productPrice)" :gutter="20">
<el-col style="padding-left: 0px; padding-right: 0%;"> <el-col style="padding-left: 0px; padding-right: 0%;">
<div class="product-description"> <div class="product-description">
{{ productPrice.productName }} {{ productPrice.productDescription }} {{ productPrice.productName }} {{ productPrice.productDescription }}
</div> </div>
<br><br><br> <br><br><br>
<div class="product-price-base"> <div class="product-price-base">
Precio Base Precio Base
<span class="amount"> <span class="amount">
{{ formatPrice(productPrice.priceBase, productPrice.currency.iSOCode) }} {{ formatPrice(productPrice.priceBase, productPrice.currency.iSOCode) }}
</span> </span>
</div> </div>
<br><br><br> <br><br><br>
<div class="product-tax"> <div class="product-tax">
{{ productPrice.taxName }} {{ productPrice.taxName }}
<span class="amount"> <span class="amount">
{{ formatPrice(productPrice.taxAmt, productPrice.currency.iSOCode) }} {{ formatPrice(productPrice.taxAmt, productPrice.currency.iSOCode) }}
</span> </span>
</div> </div>
<br><br><br> <br><br><br>
<div class="product-price amount"> <div class="product-price amount">
{{ formatPrice(productPrice.grandTotal, productPrice.currency.iSOCode) }} {{ formatPrice(productPrice.grandTotal, productPrice.currency.iSOCode) }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- </el-main> --> </el-main>
</el-container> </el-container>
</div> </div>
<div <div
@ -75,8 +74,8 @@
<script> <script>
import formMixin from '@/components/ADempiere/Form/formMixin.js' import formMixin from '@/components/ADempiere/Form/formMixin.js'
import fieldsList from './fieldsList.js' import fieldsList from './fieldsListBarCode.js'
import { requestGetProductPrice } from '@/api/ADempiere/form/price-checking.js' // import { requestGetProductPrice } from '@/api/ADempiere/form/price-checking.js'
import { formatPercent, formatPrice } from '@/utils/ADempiere/valueFormat.js' import { formatPercent, formatPrice } from '@/utils/ADempiere/valueFormat.js'
import { buildImageFromArrayBuffer } from '@/utils/ADempiere/resource.js' import { buildImageFromArrayBuffer } from '@/utils/ADempiere/resource.js'
import { requestImage } from '@/api/ADempiere/persistence.js' import { requestImage } from '@/api/ADempiere/persistence.js'
@ -86,6 +85,18 @@ export default {
mixins: [ mixins: [
formMixin formMixin
], ],
props: {
metadata: {
type: Object,
default: () => {
return {
uuid: 'Bar-code-Reader',
containerUuid: 'Bar-code-Reader',
fieldsList
}
}
}
},
data() { data() {
return { return {
fieldsList, fieldsList,
@ -93,7 +104,6 @@ export default {
organizationBackground: '', organizationBackground: '',
currentImageOfProduct: '', currentImageOfProduct: '',
search: 'sad', search: 'sad',
input: '',
unsubscribe: () => {} unsubscribe: () => {}
} }
}, },
@ -104,6 +114,9 @@ export default {
defaultImage() { defaultImage() {
return require('@/image/ADempiere/priceChecking/no-image.jpg') return require('@/image/ADempiere/priceChecking/no-image.jpg')
}, },
defaultImageLogo() {
return require('@/image/ADempiere/priceChecking/todoagro.png')
},
backgroundForm() { backgroundForm() {
if (this.isEmptyValue(this.currentImageOfProduct)) { if (this.isEmptyValue(this.currentImageOfProduct)) {
return this.organizationBackground return this.organizationBackground
@ -156,57 +169,57 @@ export default {
formatPrice, formatPrice,
subscribeChanges() { subscribeChanges() {
return this.$store.subscribe((mutation, state) => { return this.$store.subscribe((mutation, state) => {
console.log(mutation.type) // if ((mutation.type === 'updateValueOfField' || mutation.type === 'addActionKeyPerformed') && mutation.payload.columnName === 'ProductValue') {
if ((mutation.type === 'addActionKeyPerformed') && mutation.payload.columnName === 'ProductValue') { // // cleans all values except column name 'ProductValue'
// cleans all values except column name 'ProductValue' // this.search = mutation.payload.value
this.search = mutation.payload.value // if (!this.isEmptyValue(this.search) && this.search.length >= 4) {
if (this.search.length) { // requestGetProductPrice({
requestGetProductPrice({ // searchValue: mutation.payload.value
searchValue: mutation.payload.value // })
}) // .then(productPrice => {
.then(productPrice => { // console.log(productPrice)
const { product, taxRate, priceStandard: priceBase } = productPrice // const { product, taxRate, priceStandard: priceBase } = productPrice
const { rate } = taxRate // const { rate } = taxRate
const { imageURL: image } = product // const { imageURL: image } = product
this.productPrice = { // this.productPrice = {
productName: product.name, // productName: product.name,
productDescription: product.description, // productDescription: product.description,
priceBase, // priceBase,
priceStandard: productPrice.priceStandard, // priceStandard: productPrice.priceStandard,
priceList: productPrice.priceList, // priceList: productPrice.priceList,
priceLimit: productPrice.priceLimit, // priceLimit: productPrice.priceLimit,
taxRate: rate, // taxRate: rate,
image, // image,
taxName: taxRate.name, // taxName: taxRate.name,
taxIndicator: taxRate.taxIndicator, // taxIndicator: taxRate.taxIndicator,
taxAmt: this.getTaxAmount(priceBase, rate), // taxAmt: this.getTaxAmount(priceBase, rate),
grandTotal: this.getGrandTotal(priceBase, rate), // grandTotal: this.getGrandTotal(priceBase, rate),
currency: productPrice.currency // currency: productPrice.currency
} // }
}) // })
.catch(error => { // .catch(error => {
this.$message({ // this.$message({
type: 'info', // type: 'info',
message: error.message, // message: error.message,
showClose: true // showClose: true
}) // })
this.productPrice = {} // this.productPrice = {}
}) // })
.finally(() => { // .finally(() => {
this.$store.commit('updateValueOfField', { // this.$store.commit('updateValueOfField', {
containerUuid: this.containerUuid, // containerUuid: this.containerUuid,
columnName: 'ProductValue', // columnName: 'ProductValue',
value: '' // value: ''
}) // })
this.search = '' // this.search = ''
this.currentImageOfProduct = '' // this.currentImageOfProduct = ''
if (this.isEmptyValue(this.productPrice.image)) { // if (this.isEmptyValue(this.productPrice.image)) {
this.getImage(this.productPrice.image) // this.getImage(this.productPrice.image)
} // }
}) // })
} // }
} // }
}) })
}, },
getTaxAmount(basePrice, taxRate) { getTaxAmount(basePrice, taxRate) {
@ -230,7 +243,6 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
float: inherit; float: inherit;
z-index: 0;
// color: white; // color: white;
// opacity: 0.5; // opacity: 0.5;
} }
@ -256,7 +268,7 @@ export default {
right: 5%; right: 5%;
width: 100%; width: 100%;
top: 10%; top: 10%;
z-index: 1; z-index: 0;
} }
.inquiry-product { .inquiry-product {
position: absolute; position: absolute;

51
src/components/ADempiere/Form/PriceChecking/index.vue
View File

@ -9,6 +9,7 @@
fit="contain" fit="contain"
:src="defaultImage" :src="defaultImage"
class="background-price-checking" class="background-price-checking"
style="z-index: 2;"
> >
<el-main> <el-main>
<el-form <el-form
@ -28,7 +29,7 @@
/> />
</el-form> </el-form>
<div class="inquiry-product"> <div class="inquiry-product" style="z-index: 4;">
<el-row v-if="!isEmptyValue(productPrice)" :gutter="20"> <el-row v-if="!isEmptyValue(productPrice)" :gutter="20">
<el-col style="padding-left: 0px; padding-right: 0%;"> <el-col style="padding-left: 0px; padding-right: 0%;">
<div class="product-description"> <div class="product-description">
@ -37,7 +38,7 @@
<br><br><br> <br><br><br>
<div class="product-price-base"> <div class="product-price-base">
Precio Base {{ $t('form.priceChecking.basePrice') }}
<span class="amount"> <span class="amount">
{{ formatPrice(productPrice.priceBase, productPrice.currency.iSOCode) }} {{ formatPrice(productPrice.priceBase, productPrice.currency.iSOCode) }}
</span> </span>
@ -53,7 +54,17 @@
<br><br><br> <br><br><br>
<div class="product-price amount"> <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> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -87,11 +98,14 @@ export default {
], ],
data() { data() {
return { return {
messageError: true,
fieldsList, fieldsList,
productPrice: {}, productPrice: {},
organizationBackground: '', organizationBackground: '',
currentImageOfProduct: '', currentImageOfProduct: '',
search: 'sad', search: 'sad',
resul: '',
load: '',
unsubscribe: () => {} unsubscribe: () => {}
} }
}, },
@ -154,41 +168,43 @@ export default {
formatPrice, formatPrice,
subscribeChanges() { subscribeChanges() {
return this.$store.subscribe((mutation, state) => { return this.$store.subscribe((mutation, state) => {
// console.log(mutation.type.length)
if ((mutation.type === 'updateValueOfField' || mutation.type === 'addActionKeyPerformed') && mutation.payload.columnName === 'ProductValue') { if ((mutation.type === 'updateValueOfField' || mutation.type === 'addActionKeyPerformed') && mutation.payload.columnName === 'ProductValue') {
// cleans all values except column name 'ProductValue' // cleans all values except column name 'ProductValue'
this.search = mutation.payload.value this.search = mutation.payload.value
if (this.search.length >= 6) { if (!this.isEmptyValue(this.search) && this.search.length >= 4) {
requestGetProductPrice({ requestGetProductPrice({
searchValue: mutation.payload.value searchValue: mutation.payload.value
}) })
.then(productPrice => { .then(productPrice => {
this.messageError = true
const { product, taxRate, priceStandard: priceBase } = productPrice const { product, taxRate, priceStandard: priceBase } = productPrice
const { rate } = taxRate const { rate } = taxRate
const { imageURL: image } = product const { imageURL: image } = product
this.productPrice = { this.productPrice = {
currency: productPrice.currency,
image,
grandTotal: this.getGrandTotal(priceBase, rate),
productName: product.name, productName: product.name,
productDescription: product.description, productDescription: product.description,
priceBase, priceBase,
priceStandard: productPrice.priceStandard, priceStandard: productPrice.priceStandard,
priceList: productPrice.priceList, priceList: productPrice.priceList,
priceLimit: productPrice.priceLimit, priceLimit: productPrice.priceLimit,
schemaCurrency: productPrice.schemaCurrency,
schemaGrandTotal: this.getGrandTotal(productPrice.schemaPriceStandard, rate),
schemaPriceStandard: productPrice.schemaPriceStandard,
schemaPriceList: productPrice.schemaPriceList,
schemaPriceLimit: productPrice.schemaPriceLimit,
taxRate: rate, taxRate: rate,
image,
taxName: taxRate.name, taxName: taxRate.name,
taxIndicator: taxRate.taxIndicator, taxIndicator: taxRate.taxIndicator,
taxAmt: this.getTaxAmount(priceBase, rate), taxAmt: this.getTaxAmount(priceBase, rate)
grandTotal: this.getGrandTotal(priceBase, rate),
currency: productPrice.currency
} }
}) })
.catch(error => { .catch(() => {
this.$message({ this.messageError = false
type: 'info', this.timeMessage()
message: error.message,
showClose: true
})
this.productPrice = {} this.productPrice = {}
}) })
.finally(() => { .finally(() => {
@ -207,6 +223,11 @@ export default {
} }
}) })
}, },
timeMessage() {
setTimeout(() => {
this.messageError = true
}, 2000)
},
getTaxAmount(basePrice, taxRate) { getTaxAmount(basePrice, taxRate) {
if (this.isEmptyValue(basePrice) || this.isEmptyValue(taxRate)) { if (this.isEmptyValue(basePrice) || this.isEmptyValue(taxRate)) {
return 0 return 0

4
src/lang/ADempiere/en.js
View File

@ -396,6 +396,10 @@ export default {
keyLayout: { keyLayout: {
noProducto: 'No product available. Back to top' noProducto: 'No product available. Back to top'
} }
},
priceChecking: {
messageError: 'This Product Not Available',
basePrice: 'Base price'
} }
} }
} }

4
src/lang/ADempiere/es.js
View File

@ -371,6 +371,10 @@ export default {
keyLayout: { keyLayout: {
noProducto: 'No hay producto disponible Regresar al Principio' noProducto: 'No hay producto disponible Regresar al Principio'
} }
},
priceChecking: {
messageError: 'Este Producto No Disponible',
basePrice: 'Precio Base'
} }
} }
} }

1
src/router/modules/ADempiere/staticRoutes.js
View File

@ -92,6 +92,7 @@ const staticRoutes = [
component: () => import('@/views/ADempiere/Form'), component: () => import('@/views/ADempiere/Form'),
name: 'BarcodeReader', name: 'BarcodeReader',
meta: { meta: {
icon: 'search',
title: 'BarcodeReader', title: 'BarcodeReader',
isIndex: true isIndex: true
} }

6
src/store/modules/user.js
View File

@ -103,14 +103,16 @@ const actions = {
userName, userName,
password, password,
roleUuid, roleUuid,
organizationUuid organizationUuid,
token
}) { }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login({ login({
userName, userName,
password, password,
roleUuid, roleUuid,
organizationUuid organizationUuid,
token
}) })
.then(logInResponse => { .then(logInResponse => {
if ([13, 500].includes(logInResponse.code)) { if ([13, 500].includes(logInResponse.code)) {

6
src/utils/ADempiere/apiConverts/core.js
View File

@ -265,6 +265,12 @@ export function convertProductPrice(productPriceToConvert) {
product: convertProduct( product: convertProduct(
productPriceToConvert.product 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, priceList: productPriceToConvert.price_list,
priceStandard: productPriceToConvert.price_standard, priceStandard: productPriceToConvert.price_standard,
priceLimit: productPriceToConvert.price_limit, priceLimit: productPriceToConvert.price_limit,

2
src/views/ADempiere/Form/index.vue
View File

@ -15,7 +15,7 @@
:panel-type="panelType" :panel-type="panelType"
/> />
</el-header> </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-row>
<el-col :span="24"> <el-col :span="24">
<el-card <el-card