474 lines
14 KiB
Vue
474 lines
14 KiB
Vue
<template>
|
|
<div>
|
|
<div style="text-align: center">
|
|
<b>{{ $t('form.pos.title') }}</b>
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.title') }}
|
|
</div>
|
|
|
|
<el-collapse v-model="activeName" accordion>
|
|
<el-collapse-item :title="$t('form.pos.optionsPoinSales.salesOrder.title')" name="salesOrder">
|
|
<el-row :gutter="12" style="padding-right: 10px;">
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="isEmptyValue($route.query.action) ? 'cursor: not-allowed; text-align: center !important; color: gray;' : blockOption"
|
|
@click="newOrder"
|
|
>
|
|
<i class="el-icon-news" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.newOrder') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<el-popover
|
|
placement="right"
|
|
width="800"
|
|
trigger="click"
|
|
>
|
|
<orders-list
|
|
:parent-metadata="metadata"
|
|
/>
|
|
<p
|
|
slot="reference"
|
|
:style="blockOption"
|
|
>
|
|
<svg-icon icon-class="list" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.ordersHistory') }}
|
|
</p>
|
|
</el-popover>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="generateImmediateInvoice"
|
|
>
|
|
<i class="el-icon-document-add" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.generateImmediateInvoice') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="completePreparedOrder"
|
|
>
|
|
<i class="el-icon-success" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.completePreparedOrder') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="reverseSalesTransaction"
|
|
>
|
|
<i class="el-icon-error" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.cancelSaleTransaction') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="createWithdrawal"
|
|
>
|
|
<i class="el-icon-document-remove" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.createPos') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="printOrder"
|
|
>
|
|
<i class="el-icon-printer" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.print') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="createNewCustomerReturnOrder"
|
|
>
|
|
<i class="el-icon-refresh-left" />
|
|
<br>
|
|
Crear Nueva Orden de Devolución
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="deleteOrder"
|
|
>
|
|
<i class="el-icon-close" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.salesOrder.cancelOrder') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item :title="$t('form.pos.optionsPoinSales.cashManagement.title')" name="cashManagement">
|
|
<el-row :gutter="12" style="padding-right: 10px;">
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
>
|
|
<i class="el-icon-sell" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.cashManagement.cashOpening') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
>
|
|
<i class="el-icon-money" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.cashManagement.cashwithdrawal') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<p
|
|
:style="blockOption"
|
|
@click="cashClosing"
|
|
>
|
|
<i class="el-icon-sold-out" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.cashManagement.closeBox') }}
|
|
</p>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item :title="$t('form.pos.optionsPoinSales.generalOptions.title')" name="generalOptions">
|
|
<el-row :gutter="12" style="padding-right: 10px;">
|
|
<!--
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<el-popover
|
|
placement="right"
|
|
width="400"
|
|
trigger="click"
|
|
>
|
|
<el-form label-position="top" label-width="10px" @submit.native.prevent="notSubmitForm">
|
|
<field
|
|
:key="typeDocumentMetadata.columnName"
|
|
:metadata-field="typeDocumentMetadata"
|
|
:v-model="typeDocumentMetadata.value"
|
|
style="padding-left: 0px; padding-right: 0px;"
|
|
/>
|
|
</el-form>
|
|
<p slot="reference" :style="blockOption">
|
|
<i class="el-icon-document-copy" />
|
|
<br>
|
|
Cambiar Tipo de Documento
|
|
</p>
|
|
</el-popover>
|
|
</el-card>
|
|
</el-col>
|
|
-->
|
|
|
|
<el-col :span="size">
|
|
<el-card shadow="hover">
|
|
<el-dropdown trigger="click" style="padding-top: 8px; color: black;" @command="changePos">
|
|
<p
|
|
:style="blockOption"
|
|
>
|
|
<i class="el-icon-mobile-phone" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.generalOptions.changePos') }}
|
|
</p>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item
|
|
v-for="item in sellingPointsList"
|
|
:key="item.uuid"
|
|
:command="item"
|
|
>
|
|
{{ item.name }}
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-card shadow="hover">
|
|
<el-popover
|
|
v-model="isShowProductsPriceList"
|
|
placement="right"
|
|
width="800"
|
|
trigger="manual"
|
|
>
|
|
<list-product-price
|
|
v-if="isShowProductsPriceList"
|
|
:is-selectable="false"
|
|
popover-name="isShowPopoverMenu"
|
|
/>
|
|
|
|
<div
|
|
slot="reference"
|
|
:style="blockOption"
|
|
@click="isShowProductsPriceList = !isShowProductsPriceList"
|
|
>
|
|
<svg-icon icon-class="shopping" />
|
|
<br>
|
|
{{ $t('form.pos.optionsPoinSales.generalOptions.listProducts') }}
|
|
</div>
|
|
</el-popover>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import OrdersList from '@/components/ADempiere/Form/VPOS/OrderList/index'
|
|
import ListProductPrice from '@/components/ADempiere/Form/VPOS/ProductInfo/productList'
|
|
import {
|
|
requestPrintOrder,
|
|
requestGenerateImmediateInvoice,
|
|
requestCompletePreparedOrder,
|
|
requestReverseSalesTransaction,
|
|
requestCreateWithdrawal,
|
|
requestCreateNewCustomerReturnOrder,
|
|
requestCashClosing,
|
|
requestDeleteOrder
|
|
} from '@/api/ADempiere/form/point-of-sales.js'
|
|
|
|
export default {
|
|
name: 'Options',
|
|
components: {
|
|
ListProductPrice,
|
|
OrdersList
|
|
},
|
|
props: {
|
|
metadata: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: ''
|
|
}
|
|
},
|
|
computed: {
|
|
isShowProductsPriceList: {
|
|
get() {
|
|
return this.$store.state['pointOfSales/listProductPrice'].productPrice.isShowPopoverMenu
|
|
},
|
|
set(isShowed) {
|
|
if (!this.isEmptyValue(this.$route.query.pos)) {
|
|
this.$store.commit('showListProductPrice', {
|
|
attribute: 'isShowPopoverMenu',
|
|
isShowed
|
|
})
|
|
}
|
|
}
|
|
},
|
|
isShowOrdersList: {
|
|
get() {
|
|
return this.$store.getters.getListOrder.isShowPopover
|
|
},
|
|
set(value) {
|
|
if (!this.isEmptyValue(this.$route.query.pos)) {
|
|
this.$store.commit('showListOrders', value)
|
|
}
|
|
}
|
|
},
|
|
sellingPointsList() {
|
|
return this.$store.getters.getSellingPointsList
|
|
},
|
|
currentPOS() {
|
|
return this.$store.getters.getCurrentPOS
|
|
},
|
|
pointOfSalesId() {
|
|
const currentPOS = this.currentPOS
|
|
if (!this.isEmptyValue(currentPOS)) {
|
|
return currentPOS.id
|
|
}
|
|
return undefined
|
|
},
|
|
blockOption() {
|
|
if (!this.isEmptyValue(this.$route.query.pos)) {
|
|
return 'cursor: pointer; text-align: center !important; color: black'
|
|
}
|
|
return 'cursor: not-allowed; text-align: center !important; color: gray;'
|
|
},
|
|
size() {
|
|
const size = this.$store.getters.getWidthLeft
|
|
return 24 / size
|
|
}
|
|
},
|
|
methods: {
|
|
notSubmitForm(event) {
|
|
event.preventDefault()
|
|
return false
|
|
},
|
|
changePos(posElement) {
|
|
this.$store.dispatch('setCurrentPOS', posElement)
|
|
this.newOrder()
|
|
},
|
|
newOrder() {
|
|
this.$store.dispatch('findOrderServer', {})
|
|
|
|
const pos = this.pointOfSalesId || this.$route.query.pos
|
|
this.$router.push({
|
|
params: {
|
|
...this.$route.params
|
|
},
|
|
query: {
|
|
pos
|
|
}
|
|
}).catch(error => {
|
|
console.info(`VPOS/Options component (New Order): ${error.message}`)
|
|
}).finally(() => {
|
|
const { templateBusinessPartner } = this.currentPOS
|
|
|
|
this.$store.commit('updateValuesOfContainer', {
|
|
containerUuid: this.metadata.containerUuid,
|
|
attributes: [{
|
|
columnName: 'UUID',
|
|
value: undefined
|
|
},
|
|
{
|
|
columnName: 'ProductValue',
|
|
value: undefined
|
|
},
|
|
{
|
|
columnName: 'C_BPartner_ID',
|
|
value: templateBusinessPartner.id
|
|
},
|
|
{
|
|
columnName: 'DisplayColumn_C_BPartner_ID',
|
|
value: templateBusinessPartner.name
|
|
},
|
|
{
|
|
columnName: ' C_BPartner_ID_UUID',
|
|
value: templateBusinessPartner.uuid
|
|
}]
|
|
})
|
|
|
|
// TODO: Set order with POS Terminal default values
|
|
// this.order = {
|
|
// documentType: {},
|
|
// documentStatus: {},
|
|
// salesRepresentative: this.currentPOS.salesRepresentative
|
|
//
|
|
this.$store.dispatch('listOrderLine', [])
|
|
})
|
|
},
|
|
printOrder() {
|
|
requestPrintOrder({
|
|
orderUuid: this.$route.query.action
|
|
})
|
|
},
|
|
generateImmediateInvoice() {
|
|
// TODO: Add BPartner
|
|
const { uuid: posUuid, id: posId } = this.getCurrentPOS
|
|
requestGenerateImmediateInvoice({
|
|
posId,
|
|
posUuid
|
|
})
|
|
},
|
|
completePreparedOrder() {
|
|
requestCompletePreparedOrder({
|
|
orderUuid: this.$route.query.action
|
|
})
|
|
},
|
|
reverseSalesTransaction() {
|
|
// TODO: Add BPartner
|
|
requestReverseSalesTransaction({
|
|
orderUuid: this.$route.query.action
|
|
})
|
|
},
|
|
createWithdrawal() {
|
|
const { uuid: posUuid, id: posId } = this.getCurrentPOS
|
|
// TODO: Add BParner, C_BankAccount_ID (caja), CashTransferBankAccount_ID, PAY_C_BankAccount_ID
|
|
requestCreateWithdrawal({
|
|
posId,
|
|
posUuid
|
|
})
|
|
},
|
|
createNewCustomerReturnOrder() {
|
|
requestCreateNewCustomerReturnOrder({
|
|
orderUuid: this.$route.query.action
|
|
})
|
|
},
|
|
cashClosing() {
|
|
const { uuid: posUuid, id: posId } = this.getCurrentPOS
|
|
requestCashClosing({
|
|
posId,
|
|
posUuid
|
|
})
|
|
},
|
|
deleteOrder() {
|
|
requestDeleteOrder({
|
|
orderUuid: this.$route.query.action
|
|
})
|
|
this.newOrder()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-button--text {
|
|
border-color: transparent;
|
|
color: black;
|
|
background: transparent;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.el-button--text:hover, .el-button--text:focus {
|
|
color: #46a6ff !important;
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
.el-col :hover {
|
|
background-color: rgba(209, 233, 255, 0.719);
|
|
}
|
|
.title-of-option {
|
|
cursor: pointer;
|
|
text-align: center !important;
|
|
}
|
|
</style>
|