mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
add image (#548)
This commit is contained in:
parent
273b10141f
commit
0bd71c4d4d
19
src/components/ADempiere/Form/BarcodeReader/fieldsList.js
Normal file
19
src/components/ADempiere/Form/BarcodeReader/fieldsList.js
Normal file
@ -0,0 +1,19 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
300
src/components/ADempiere/Form/BarcodeReader/index.vue
Normal file
300
src/components/ADempiere/Form/BarcodeReader/index.vue
Normal file
@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoaded"
|
||||
style="height: 100% !important;"
|
||||
>
|
||||
<el-container style="height: 100% !important;">
|
||||
<!-- <el-main> -->
|
||||
<img
|
||||
fit="contain"
|
||||
:src="backgroundForm"
|
||||
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 }}
|
||||
<field
|
||||
ref="ProductValue"
|
||||
:key="field.columnName"
|
||||
:metadata-field="field"
|
||||
:v-model="field.defaultValue"
|
||||
class="product-value"
|
||||
/>
|
||||
</template>
|
||||
</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="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-price amount">
|
||||
{{ formatPrice(productPrice.grandTotal, productPrice.currency.iSOCode) }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- </el-main> -->
|
||||
</el-container>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
key="form-loading"
|
||||
v-loading="!isLoaded"
|
||||
:element-loading-text="$t('notifications.loading')"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(255, 255, 255, 0.8)"
|
||||
class="loading-panel"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formMixin from '@/components/ADempiere/Form/formMixin.js'
|
||||
import fieldsList from './fieldsList.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'
|
||||
|
||||
export default {
|
||||
name: 'BarcodeReader',
|
||||
mixins: [
|
||||
formMixin
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
fieldsList,
|
||||
productPrice: {},
|
||||
organizationBackground: '',
|
||||
currentImageOfProduct: '',
|
||||
search: 'sad',
|
||||
input: '',
|
||||
unsubscribe: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
organizationImagePath() {
|
||||
return this.$store.getters.corporateBrandingImage
|
||||
},
|
||||
defaultImage() {
|
||||
return require('@/image/ADempiere/priceChecking/no-image.jpg')
|
||||
},
|
||||
backgroundForm() {
|
||||
if (this.isEmptyValue(this.currentImageOfProduct)) {
|
||||
return this.organizationBackground
|
||||
}
|
||||
return this.currentImageOfProduct
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.unsubscribe = this.subscribeChanges()
|
||||
},
|
||||
mounted() {
|
||||
this.getImage()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unsubscribe()
|
||||
},
|
||||
methods: {
|
||||
async getImage(imageName = '') {
|
||||
let isSetOrg = false
|
||||
if (this.isEmptyValue(imageName)) {
|
||||
if (!this.isEmptyValue(this.organizationBackground)) {
|
||||
return this.organizationBackground
|
||||
}
|
||||
isSetOrg = true
|
||||
imageName = this.organizationImagePath
|
||||
}
|
||||
// the name of the image plus the height and width of the container is sent
|
||||
const imageBuffer = await requestImage({
|
||||
file: imageName,
|
||||
width: 750,
|
||||
height: 380
|
||||
}).then(responseImage => {
|
||||
const arrayBufferAsImage = buildImageFromArrayBuffer({
|
||||
arrayBuffer: responseImage
|
||||
})
|
||||
if (isSetOrg) {
|
||||
this.organizationBackground = arrayBufferAsImage
|
||||
return arrayBufferAsImage
|
||||
}
|
||||
|
||||
this.currentImageOfProduct = arrayBufferAsImage
|
||||
return arrayBufferAsImage
|
||||
})
|
||||
return imageBuffer
|
||||
},
|
||||
focusProductValue() {
|
||||
this.$refs.ProductValue[0].$children[0].$children[0].$children[1].$children[0].focus()
|
||||
},
|
||||
formatPercent,
|
||||
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
|
||||
|
||||
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) {
|
||||
if (this.isEmptyValue(basePrice) || this.isEmptyValue(taxRate)) {
|
||||
return 0
|
||||
}
|
||||
return (basePrice * taxRate) / 100
|
||||
},
|
||||
getGrandTotal(basePrice, taxRate) {
|
||||
if (this.isEmptyValue(basePrice)) {
|
||||
return 0
|
||||
}
|
||||
return basePrice + this.getTaxAmount(basePrice, taxRate)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.background-price-checking {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: inherit;
|
||||
z-index: 0;
|
||||
// color: white;
|
||||
// opacity: 0.5;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
color: #32363a;
|
||||
font-size: 30px;
|
||||
float: right;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.product-price-base, .product-tax {
|
||||
font-size: 30px;
|
||||
float: right;
|
||||
}
|
||||
.product-price {
|
||||
padding-top: 15px;
|
||||
font-size: 50px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.inquiry-form {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
width: 100%;
|
||||
top: 10%;
|
||||
z-index: 1;
|
||||
}
|
||||
.inquiry-product {
|
||||
position: absolute;
|
||||
right: 20%;
|
||||
width: 100%;
|
||||
top: 33%;
|
||||
.amount {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.price-inquiry {
|
||||
input {
|
||||
color: #606266 !important;
|
||||
font-size: 100% !important;
|
||||
}
|
||||
}
|
||||
.product-value {
|
||||
float: right;
|
||||
padding-right: 0% !important;
|
||||
z-index: 0;
|
||||
.el-form-item__label {
|
||||
font-size: 15px !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background: white;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
margin-left: 10px;
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
</style>
|
@ -13,6 +13,7 @@ export default [
|
||||
handleActionKeyPerformed: true,
|
||||
isDisplayed: true,
|
||||
isReadOnly: false
|
||||
// componentPath: 'FieldSelect'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -2,11 +2,12 @@
|
||||
<div
|
||||
v-if="isLoaded"
|
||||
style="height: 100% !important;"
|
||||
@click="focusProductValue"
|
||||
>
|
||||
<el-container style="height: 100% !important;">
|
||||
<img
|
||||
fit="contain"
|
||||
:src="backgroundForm"
|
||||
:src="defaultImageLogo"
|
||||
class="background-price-checking"
|
||||
>
|
||||
<el-main>
|
||||
@ -101,6 +102,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
|
||||
@ -154,7 +158,7 @@ export default {
|
||||
subscribeChanges() {
|
||||
return this.$store.subscribe((mutation, state) => {
|
||||
// console.log(mutation.type.length)
|
||||
if ((mutation.type === 'updateValueOfField' || mutation.type === 'addFocusGained') && mutation.payload.columnName === 'ProductValue') {
|
||||
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) {
|
||||
|
@ -21,6 +21,21 @@ export default {
|
||||
switch (this.metadata.fileName) {
|
||||
case 'PriceChecking':
|
||||
form = import('@/components/ADempiere/Form/PriceChecking')
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'showNavar',
|
||||
value: true
|
||||
})
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'showMenu',
|
||||
value: false
|
||||
})
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'tagsView',
|
||||
value: false
|
||||
})
|
||||
break
|
||||
case 'BarcodeReader':
|
||||
form = import('@/components/ADempiere/Form/BarcodeReader')
|
||||
break
|
||||
case 'VPOS':
|
||||
form = import('@/components/ADempiere/Form/VPOS')
|
||||
|
BIN
src/image/ADempiere/priceChecking/todoagro.png
Normal file
BIN
src/image/ADempiere/priceChecking/todoagro.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.5 MiB |
@ -18,6 +18,11 @@
|
||||
<el-switch v-model="showContextMenu" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>show Title</span>
|
||||
<el-switch v-model="isShowTitleForm" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('settings.fixedHeader') }}</span>
|
||||
<el-switch v-model="fixedHeader" class="drawer-switch" />
|
||||
@ -63,6 +68,14 @@ export default {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
isShowTitleForm: {
|
||||
get() {
|
||||
return this.$store.getters.getIsShowTitleForm
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit('changeShowTitleForm', val)
|
||||
}
|
||||
},
|
||||
isShowJob() {
|
||||
return this.$store.getters.language === 'zh'
|
||||
},
|
||||
@ -148,6 +161,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDisplatedTitle() {
|
||||
this.$store.commit('changeShowTitleForm', !this.isShowTitleForm)
|
||||
},
|
||||
themeChange(val) {
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'theme',
|
||||
|
@ -64,6 +64,38 @@ const staticRoutes = [
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/PriceChecking',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '/PriceChecking',
|
||||
component: () => import('@/views/ADempiere/Form'),
|
||||
name: 'PriceChecking',
|
||||
meta: {
|
||||
title: 'PriceChecking',
|
||||
isIndex: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/BarcodeReader',
|
||||
component: Layout,
|
||||
hidden: false,
|
||||
children: [
|
||||
{
|
||||
path: '/BarcodeReader',
|
||||
component: () => import('@/views/ADempiere/Form'),
|
||||
name: 'BarcodeReader',
|
||||
meta: {
|
||||
title: 'BarcodeReader',
|
||||
isIndex: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
@ -117,9 +117,7 @@ const actions = {
|
||||
reject(logInResponse)
|
||||
return
|
||||
}
|
||||
|
||||
const { result: token } = logInResponse
|
||||
|
||||
commit('SET_TOKEN', token)
|
||||
setToken(token)
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<el-container
|
||||
v-if="isLoaded"
|
||||
key="form-loaded"
|
||||
class="view-base"
|
||||
:class="showNavar ? 'view-base' : 'show-header-view-base'"
|
||||
style="height: 84vh;"
|
||||
>
|
||||
<el-header
|
||||
@ -15,8 +15,8 @@
|
||||
:panel-type="panelType"
|
||||
/>
|
||||
</el-header>
|
||||
<el-main style="padding-right: 10px !important;">
|
||||
<el-row :gutter="20">
|
||||
<el-main style="padding-right: 0px !important; padding-bottom: 0px !important;">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card
|
||||
class="content-collapse"
|
||||
@ -60,6 +60,7 @@
|
||||
<form-panel
|
||||
:metadata="{
|
||||
...formMetadata,
|
||||
fileName: fromFileName,
|
||||
title: formTitle
|
||||
}"
|
||||
/>
|
||||
@ -101,6 +102,9 @@ export default {
|
||||
formTitle() {
|
||||
return this.formMetadata.name || this.$route.meta.title
|
||||
},
|
||||
fromFileName() {
|
||||
return this.formMetadata.fileName || this.$route.meta.title
|
||||
},
|
||||
getterForm() {
|
||||
return this.$store.getters.getForm(this.formUuid)
|
||||
},
|
||||
@ -115,6 +119,9 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
showNavar() {
|
||||
return this.$store.state.settings.showNavar
|
||||
},
|
||||
isShowTitleForm() {
|
||||
return this.$store.getters.getIsShowTitleForm
|
||||
}
|
||||
@ -172,8 +179,13 @@ export default {
|
||||
.view-base {
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 84px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.show-header-view-base {
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 26px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view-loading {
|
||||
padding: 100px 100px;
|
||||
height: 100%;
|
||||
|
Loading…
x
Reference in New Issue
Block a user