add image (#548)

src/components/ADempiere/Form/BarcodeReader/fieldsList.js

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

src/components/ADempiere/Form/BarcodeReader/index.vue

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

src/components/ADempiere/Form/PriceChecking/fieldsList.js

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

src/components/ADempiere/Form/PriceChecking/index.vue

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

src/components/ADempiere/Form/index.vue

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

src/layout/components/Settings/index.vue

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

src/router/modules/ADempiere/staticRoutes.js

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

src/store/modules/user.js

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

src/views/ADempiere/Form/index.vue

@@ -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-main style="padding-right: 0px !important; padding-bottom: 0px !important;">
-      <el-row :gutter="20">
+      <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%;