jinql
/
vue-element-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Point of Sale Guide (#905) 

* Point of Sale Guide

* Point of Sale Guide

* complete point-of-sale quick guide

* minimal change

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
pull/3759/head
Elsio Sanchez 2021-06-04 17:18:13 -04:00 committed by GitHub
parent 71a61f1cb1
commit 831efe72e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 224 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ADempiere/Form/VPOS/Collection/index.vue
View File

@ -89,7 +89,7 @@
style="float: right; display: flex; line-height: 10px;"
:disabled="isDisabled"
>
<el-row>
<el-row id="fieldListCollection">
<el-col v-for="(field, index) in fieldsList" :key="index" :span="8">
<!-- Add selected currency symbol -->
<field-definition
@ -104,7 +104,7 @@
</el-form>
</div>
</el-card>
<samp style="float: right;padding-right: 10px;">
<samp id="buttonCollection" style="float: right;padding-right: 10px;">
<el-button type="danger" icon="el-icon-close" @click="exit" />
<el-button type="info" icon="el-icon-minus" :disabled="isDisabled" @click="undoPatment" />
<el-button type="primary" :disabled="validPay || addPay || isDisabled" icon="el-icon-plus" @click="addCollectToList(paymentBox)" />
@ -115,6 +115,7 @@
<el-main style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
<type-collection
v-if="!updateOrderPaymentPos"
id="cardCollection"
:is-add-type-pay="listPayments"
:currency="pointOfSalesCurrency"
:list-types-payment="fieldsList[2]"
@ -132,7 +133,7 @@
/>
</el-main>
<!-- Collection container bottom panel -->
<el-footer height="auto" style="padding-left: 0px; padding-right: 0px;">
<el-footer id="infoInvoce" height="auto" style="padding-left: 0px; padding-right: 0px;">
<el-row :gutter="24" style="background-color: rgb(245, 247, 250);">
<el-col :span="24">
<span>

86
src/components/ADempiere/Form/VPOS/Guide/steps.js Normal file
View File

@ -0,0 +1,86 @@
import language from '@/lang'
const steps = [
{
element: '#ProductValue',
popover: {
title: language.t('form.productInfo.codeProduct'),
description: language.t('form.guideSteps.productValue.description'),
position: 'bottom'
}
},
{
element: '#BusinessPartner',
popover: {
title: language.t('form.pos.order.BusinessPartnerCreate.businessPartner'),
position: 'bottom'
}
},
{
element: '#linesOrder',
popover: {
title: language.t('form.guideSteps.linesTable.title'),
position: 'top'
}
},
{
element: '#buttonPanelLeftPos',
popover: {
title: language.t('form.guideSteps.buttonPanelLeftPos.title'),
position: 'right'
}
},
{
element: '#toolPoint',
popover: {
title: language.t('form.guideSteps.toolsPoint.title'),
position: 'bottom'
}
},
{
element: '#point',
popover: {
title: language.t('form.pos.title'),
position: 'right'
}
},
{
element: '#buttonPanelRightPos',
popover: {
title: language.t('form.guideSteps.buttonPanelRightPos.title'),
position: 'left'
}
},
{
element: '#fieldListCollection',
popover: {
title: language.t('form.guideSteps.fieldListCollection.title'),
position: 'left'
},
panel: 'Collection'
},
{
element: '#buttonCollection',
popover: {
title: language.t('form.guideSteps.buttonCollection.title'),
position: 'left'
},
panel: 'Collection'
},
{
element: '#cardCollection',
popover: {
title: language.t('form.guideSteps.cardCollection.title'),
position: 'left'
},
panel: 'Collection'
},
{
element: '#infoInvoce',
popover: {
title: language.t('form.guideSteps.infoInvoce.title'),
position: 'top'
},
panel: 'Collection'
}
]
export default steps

30
src/components/ADempiere/Form/VPOS/Order/index.vue
View File

@ -34,6 +34,7 @@
>
<product-info
v-if="field.columnName === 'ProductValue'"
id="ProductValue"
:key="field.columnName"
:metadata="field"
/>
@ -41,6 +42,7 @@
</el-col>
<el-col :span="isEmptyValue(currentOrder) ? 9 : 7" :style="styleTab">
<business-partner
id="BusinessPartner"
:parent-metadata="{
name: panelMetadata.name,
containerUuid: panelMetadata.containerUuid,
@ -78,6 +80,7 @@
<el-container style="background: white; padding: 0px; height: 100% !important;">
<el-main style="padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px;">
<el-table
id="linesOrder"
ref="linesTable"
v-shortkey="shortsKey"
:data="listOrderLine"
@ -172,19 +175,21 @@
<el-footer :class="classOrderFooter">
<div class="keypad">
<el-button type="primary" icon="el-icon-top" :disabled="isDisabled" @click="arrowTop" />
<el-button type="primary" icon="el-icon-bottom" :disabled="isDisabled" @click="arrowBottom" />
<el-button v-show="isValidForDeleteLine(listOrderLine)" type="danger" icon="el-icon-delete" :disabled="isDisabled" @click="deleteOrderLine(currentOrderLine)" />
<el-button
v-show="isValidForDeleteLine(listOrderLine)"
type="success"
icon="el-icon-bank-card"
@click="openCollectionPanel"
>
{{ labelButtonCollections }}
</el-button>
<span id="toolPoint">
<el-button type="primary" icon="el-icon-top" :disabled="isDisabled" @click="arrowTop" />
<el-button type="primary" icon="el-icon-bottom" :disabled="isDisabled" @click="arrowBottom" />
<el-button v-show="isValidForDeleteLine(listOrderLine)" type="danger" icon="el-icon-delete" :disabled="isDisabled" @click="deleteOrderLine(currentOrderLine)" />
<el-button
v-show="isValidForDeleteLine(listOrderLine)"
type="success"
icon="el-icon-bank-card"
@click="openCollectionPanel"
>
{{ labelButtonCollections }}
</el-button>
</span>
<br>
<p>
<p id="point">
<el-dropdown
v-if="!isEmptyValue(currentPointOfSales)"
trigger="click"
@ -295,6 +300,7 @@
</div>
<div v-if="!isMobile" :style="classButtomRight">
<el-button
id="buttonPanelRightPos"
:circle="true"
type="primary"
:icon="isShowedPOSKeyLayout ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"

1
src/components/ADempiere/Form/VPOS/templateDevice/desktop.vue
View File

@ -29,6 +29,7 @@
</el-aside>
<div style="width: 36px;padding-top: 30vh; z-index: 100;">
<el-button
id="buttonPanelLeftPos"
:circle="true"
type="primary"
:icon="isShowedPOSOptions ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"

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

@ -509,6 +509,48 @@ export default {
grandTotalConverted: 'Grand Total Converted',
quantityAvailable: 'Quantity Avalible',
upc: 'UPC / EAN'
},
guideSteps: {
productValue: {
description: 'Search for the product by Product Code, Name or UPC'
},
businessPartner: {
description: 'Show Business Partner Information'
},
linesTable: {
title: 'Order Lines',
description: 'Order Product Listing'
},
buttonPanelLeftPos: {
title: 'Show Left Panel',
description: 'Display the Point of Sale Options panel'
},
point: {
description: 'Displays the current point of sale'
},
buttonPanelRightPos: {
title: 'Show Right Panel',
description: 'Displays the catalog panel'
},
fieldListCollection: {
title: 'Collection Fields',
description: 'Field Group which has. Amount, Currency, Payment Type, Bank, Reference No. and Date'
},
buttonCollection: {
title: 'Collection Tools',
description: 'Composed of a set of buttons that allows you to add, delete and process'
},
cardCollection: {
title: 'Payment Panel',
description: 'In this panel you can see a list with the cards of the added payments'
},
infoInvoce: {
title: 'Invoice Detail',
description: 'Invoice information with total amount, pending, change'
},
toolsPoint: {
title: 'Point of Sale Tools'
}
}
}
}

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

@ -484,6 +484,48 @@ export default {
grandTotalConverted: 'Gran Total Convertido',
quantityAvailable: 'Cantidad Disponible',
upc: 'Código de Barras'
},
guideSteps: {
productValue: {
description: 'Busca el producto segun su Codigo, Nombre o UPC'
},
businessPartner: {
description: 'Mostrar Informacion del Socio de Negocios'
},
linesTable: {
title: 'Lineas de la Orden',
description: 'Listado de los Producto de la orden'
},
buttonPanelLeftPos: {
title: 'Mostrar Panel Izquierdo',
description: 'Despliega el panel de Opciones del Punto de Venta'
},
point: {
description: 'Muestra el punto de venta actual'
},
buttonPanelRightPos: {
title: 'Mostrar Panel Derecho',
description: 'Despliega el panel de catalogo'
},
fieldListCollection: {
title: 'Campos de la Cobranza',
description: 'Grupo de Campo el cual posee. Monto, Moneda, Tipo de pago, Banco, Nro Referencia y Fecha'
},
buttonCollection: {
title: 'Herramientas de la Cobranza',
description: 'Compuesta por un conjunto de botonera que posee agregar, eliminar y porcesar'
},
cardCollection: {
title: 'Panel de Pago',
description: 'En este panel aparece un listado con las tarjeta de los pagos agregados'
},
infoInvoce: {
title: 'Detalle de la Factura',
description: 'Informacion de la Factura con el monto total, pendiente, cambio'
},
toolsPoint: {
title: 'Herramientas del Punto de Venta'
}
}
}
}

76
src/layout/components/Navbar.vue
View File

@ -14,53 +14,13 @@
<search id="header-search" class="right-menu-item" style="padding-top: 10px;" />
<badge style="padding-top: 6px;" />
</div>
<!--
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<error-log class="errLog-container right-menu-item hover-effect" />
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="Global Size" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/profile/index">
<el-dropdown-item>
{{ $t('navbar.profile') }}
</el-dropdown-item>
</router-link>
<router-link to="/">
<el-dropdown-item>
{{ $t('navbar.dashboard') }}
</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item>
{{ $t('navbar.github') }}
</el-dropdown-item>
</a>
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
<el-dropdown-item>Docs</el-dropdown-item>
</a>
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">{{ $t('navbar.logOut') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
-->
<div class="right-menu">
<template v-if="device!=='mobile'">
<el-tooltip v-if="showGuide" content="Guia" placement="top-start">
<el-button icon="el-icon-info" type="text" style="color: black;font-size: larger" @click.prevent.stop="guide" />
</el-tooltip>
<search id="header-search" class="right-menu-item" />
<badge />
<badge id="badge-navar" />
<error-log class="errLog-container right-menu-item hover-effect" />
<screenfull id="screenfull" class="right-menu-item hover-effect" />
@ -106,6 +66,9 @@ import LangSelect from '@/components/LangSelect'
import Search from '@/components/HeaderSearch'
import Badge from '@/components/ADempiere/Badge'
import { getImagePath } from '@/utils/ADempiere/resource.js'
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from '@/components/ADempiere/Form/VPOS/Guide/steps'
export default {
components: {
@ -122,13 +85,27 @@ export default {
data() {
return {
user: {},
isMenuMobile: false
isMenuMobile: false,
driver: null
}
},
computed: {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
isShowedPOSKeyLaout() {
return this.$store.getters.getShowPOSKeyLayout
},
showCollection() {
return this.$store.getters.getShowCollectionPos
},
showGuide() {
const typeViews = this.$route.meta.type
if (!this.isEmptyValue(typeViews) && typeViews === 'form') {
return true
}
return false
},
...mapGetters([
'sidebar',
'avatar',
@ -148,7 +125,16 @@ export default {
return uri
}
},
mounted() {
this.driver = new Driver()
},
methods: {
guide(value) {
const stepsPos = steps.filter(steps => this.isEmptyValue(steps.panel))
value = this.showCollection && this.isShowedPOSKeyLaout ? steps : stepsPos
this.driver.defineSteps(value)
this.driver.start()
},
handleOpen(key, keyPath) {
console.log(key, keyPath)
},