1
0
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:
Elsio Sanchez 2020-11-28 01:32:52 -04:00 committed by GitHub
parent 273b10141f
commit 0bd71c4d4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 405 additions and 8 deletions

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

View 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>

View File

@ -13,6 +13,7 @@ export default [
handleActionKeyPerformed: true,
isDisplayed: true,
isReadOnly: false
// componentPath: 'FieldSelect'
}
}
]

View File

@ -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) {

View File

@ -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')

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

View File

@ -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',

View File

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

View File

@ -117,9 +117,7 @@ const actions = {
reject(logInResponse)
return
}
const { result: token } = logInResponse
commit('SET_TOKEN', token)
setToken(token)

View File

@ -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%;