1
0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-12 22:29:59 +08:00
2021-04-07 15:06:54 -04:00

711 lines
23 KiB
Vue

<template>
<div
v-if="isLoaded"
id="headerContainer"
style="display: -webkit-box; height: 100%"
>
<el-container style="background: white; height: 100%!important;">
<el-header
height="auto"
:style="isShowedPOSKeyLayout ? 'padding-right: 20px; padding-left: 0px;' : 'padding-right: 0px; padding-left: 0px;'"
>
<el-form label-position="top" label-width="10px" @submit.native.prevent="notSubmitForm">
<el-row :gutter="24">
<el-col :span="14" style="padding-left: 0px; padding-right: 0px;">
<template
v-for="(field) in fieldsList"
>
<product-info
v-if="field.columnName === 'ProductValue'"
:key="field.columnName"
:metadata="field"
/>
</template>
</el-col>
<el-col :span="6" style="padding-left: 2px; padding-right: 2px;">
<business-partner
:parent-metadata="{
name: panelMetadata.name,
containerUuid: panelMetadata.containerUuid,
uuid: panelMetadata.uuid,
panelType: panelMetadata.panelType
}"
:is-disabled="isDisabled"
/>
</el-col>
<el-col :span="1" :style="styleTab + 'float: left;'">
<el-tag
v-if="!isEmptyValue(getOrder.documentStatus.value)"
:type="tagStatus(getOrder.documentStatus.value)"
>
<span v-if="!isEmptyValue(getOrder.documentStatus.value)">
{{ getOrder.documentStatus.name }}
</span>
</el-tag>
</el-col>
<el-col :span="2" :style="styleTab + 'float: right;'">
<el-button type="primary" plain :disabled="isEmptyValue(this.$route.query.action)" @click="newOrder">
{{ $t('form.pos.optionsPoinSales.salesOrder.newOrder') }}
</el-button>
</el-col>
</el-row>
</el-form>
</el-header>
<el-main style="background: white; padding: 0px; height: 100% !important; overflow: hidden">
<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
ref="linesTable"
v-loading="updateOrderProcessPos"
v-shortkey="shortsKey"
:data="allOrderLines"
border
style="width: 100%; max-width: 100%; background-color: #FFFFFF; font-size: 14px; overflow: auto; color: #606266;"
highlight-current-row
fit
@current-change="handleCurrentLineChange"
@shortkey.native="shortcutKeyMethod"
>
<el-table-column
v-for="(valueOrder, item, key) in orderLineDefinition"
:key="key"
:column-key="valueOrder.columnName"
:label="valueOrder.label"
:width="valueOrder.isNumeric ? 'auto' : '380'"
:align="valueOrder.isNumeric ? 'right' : 'left'"
>
<template slot-scope="scope">
<span>
{{ displayValue(scope.row, valueOrder) }}
</span>
</template>
</el-table-column>
<el-table-column
label=""
width="120"
>
<template slot-scope="scope">
<el-dropdown trigger="click" @command="changeLine">
<span class="el-dropdown-link">
{{ $t('form.pos.tableProduct.options') }}
<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown" style="padding-bottom: 0px;">
<el-dropdown-item :command="scope.row">
<el-popover
placement="right"
trigger="click"
:title="$t('form.productInfo.productInformation')"
>
<el-form
label-position="top"
label-width="60px"
style="float: right; display: flex; line-height: 30px;"
>
<el-row :gutter="24">
<el-col :span="4">
<div>
<el-avatar shape="square" :size="100" src="https://#" @error="true">
<el-image>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-avatar>
</div>
</el-col>
<el-col :span="10">
{{ $t('form.productInfo.code') }}: <b>{{ currentOrderLine.product.value }}</b><br>
{{ $t('form.productInfo.name') }}: <b>{{ currentOrderLine.product.name }}</b><br>
{{ $t('form.productInfo.description') }}: <b>{{ currentOrderLine.product.description }}</b><br>
</el-col>
<el-col :span="10">
<div style="float: right">
{{ $t('form.productInfo.price') }}:
<b>{{ formatPrice(currentOrderLine.product.priceStandard, currencyPoint.iSOCode) }}</b>
<br>
{{ $t('form.productInfo.taxAmount') }}:
<b>{{ currentOrderLine.taxIndicator }}</b>
<br>
{{ $t('form.productInfo.quantityAvailable') }}:
<b>{{ formatQuantity(currentOrderLine.quantityOrdered) }}</b>
</div>
</el-col>
</el-row>
</el-form>
<el-button slot="reference" type="text" style="display: flex;width: 110%;padding-bottom: 5%;padding-top: 5%;">
<i class="el-icon-info" /> {{ $t('form.productInfo.productInformation') }}
</el-button>
</el-popover>
</el-dropdown-item>
<el-dropdown-item :command="$t('form.pos.tableProduct.editQuantities')">
<el-popover
placement="right"
trigger="click"
:title="$t('form.pos.tableProduct.editQuantities')"
width="600"
@hide="showFieldLine = false"
>
<field-line
:data-line="scope.row"
:show-field="showFieldLine"
:current-line="currentOrderLine"
/>
<el-button
slot="reference"
type="text"
:disabled="isDisabled"
@click="showFieldLine = !showFieldLine"
>
<i class="el-icon-edit" /> {{ $t('form.pos.tableProduct.editQuantities') }}
</el-button>
</el-popover>
</el-dropdown-item>
<el-button type="danger" icon="el-icon-delete" class="delete-buttom" :disabled="isDisabled" plain @click="deleteOrderLine(scope.row)">
{{ $t('form.pos.tableProduct.remove') }}
</el-button>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer class="footer-table">
<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(allOrderLines)" type="danger" icon="el-icon-delete" :disabled="isDisabled" @click="deleteOrderLine(currentOrderLine)" />
<el-button
v-show="isValidForDeleteLine(allOrderLines)"
type="success"
icon="el-icon-bank-card"
@click="openCollectionPanel"
>
{{ labelButtonCollections }}
</el-button>
<br>
<p>
<el-dropdown
trigger="click"
style="padding-top: 8px; color: black;"
@command="changePos"
>
<p>
<i class="el-icon-mobile-phone" />
{{ $t('form.pos.order.pointSale') }}: <b style="cursor: pointer"> {{ namePointOfSales.name }} </b>
</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>
</p>
</div>
<span style="float: right;">
<p class="total">{{ $t('form.pos.order.seller') }}:<b style="float: right;">
{{ getOrder.salesRepresentative.name }}
</b></p>
<p class="total"> {{ $t('form.pos.order.subTotal') }}:<b class="order-info">{{ formatPrice(getOrder.totalLines, currencyPoint.iSOCode) }}</b></p>
<p class="total"> {{ $t('form.pos.order.discount') }}:<b class="order-info">{{ formatPrice(0, currencyPoint.iSOCode) }}</b> </p>
<p class="total"> {{ $t('form.pos.order.tax') }}:<b style="float: right;">{{ getOrderTax(currencyPoint.iSOCode) }}</b> </p>
<p class="total">
<b>
{{ $t('form.pos.order.total') }}:
</b>
<b style="float: right;">
<el-popover
:v-model="seeConversion"
placement="top-start"
>
<convert-amount
v-show="seeConversion"
:convert="multiplyRate"
:amount="getOrder.grandTotal"
:currency="currencyPoint"
/>
<el-button slot="reference" type="text" style="color: #000000;font-weight: 604!important;font-size: 100%;" @click="seeConversion = !seeConversion">
{{ formatPrice(getOrder.grandTotal, currencyPoint.iSOCode) }}
</el-button>
</el-popover>
</b>
</p>
</span>
<span style="float: right;padding-right: 40px;">
<p class="total">{{ $t('form.pos.order.order') }}: <b class="order-info">{{ getOrder.documentNo }}</b></p>
<p class="total">
{{ $t('form.pos.order.date') }}:
<b class="order-info">
{{ orderDate }}
</b>
</p>
<p class="total">{{ $t('form.pos.order.type') }}:<b class="order-info">{{ getOrder.documentType.name }}</b></p>
<p class="total">
{{ $t('form.pos.order.itemQuantity') }}
<b class="order-info">
{{ getItemQuantity }}
</b>
</p>
<p class="total">
{{ $t('form.pos.order.numberLines') }}
<b class="order-info">
{{ numberOfLines }}
</b></p>
</span>
</el-footer>
</el-container>
</el-main>
</el-container>
<div style="position: relative;padding-top: 30vh; z-index: 100;">
<el-button
:circle="true"
type="primary"
:icon="isShowedPOSKeyLayout ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
@click="isShowedPOSKeyLayout = !isShowedPOSKeyLayout"
/>
</div>
</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="view-loading"
/>
</template>
<script>
import formMixin from '@/components/ADempiere/Form/formMixin.js'
import orderLineMixin from './orderLineMixin.js'
import fieldsListOrder from './fieldsListOrder.js'
import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
import BusinessPartner from '@/components/ADempiere/Form/VPOS/BusinessPartner'
import fieldLine from '@/components/ADempiere/Form/VPOS/Order/line/index'
import ProductInfo from '@/components/ADempiere/Form/VPOS/ProductInfo'
import convertAmount from '@/components/ADempiere/Form/VPOS/Collection/convertAmount/index'
export default {
name: 'Order',
components: {
BusinessPartner,
ProductInfo,
convertAmount,
fieldLine
},
mixins: [
formMixin,
orderLineMixin,
posMixin
],
data() {
return {
fieldsList: fieldsListOrder,
seeConversion: false,
showFieldLine: false
}
},
computed: {
shortsKey() {
return {
popoverConvet: ['ctrl', 'x']
}
},
isShowedPOSKeyLayout: {
get() {
return this.$store.getters.getShowPOSKeyLayout
},
set(val) {
this.$store.commit('setShowPOSKeyLayout', val)
}
},
styleTab() {
const isShowedPOSOptions = this.$store.getters.getIsShowPOSOptions
if (this.isShowedPOSKeyLayout || isShowedPOSOptions) {
return 'adding-left: 0px; padding-right: 0px; padding-top: 2.5%;margin-right: 1%;float: right;'
}
return 'padding-left: 0px; padding-right: 0px; padding-top: 2.2%;margin-right: 1%;float: right;'
},
namePointOfSales() {
const currentPOS = this.$store.getters.getCurrentPOS
if (currentPOS && !this.isEmptyValue(currentPOS.name)) {
return currentPOS
}
return {
name: '',
uuid: ''
}
},
sellingPointsList() {
return this.$store.getters.getSellingPointsList
},
orderDate() {
if (this.isEmptyValue(this.getOrder) || this.isEmptyValue(this.getOrder.dateOrdered)) {
return this.formatDate(new Date())
}
return this.formatDate(this.getOrder.dateOrdered)
},
getItemQuantity() {
if (this.isEmptyValue(this.getOrder)) {
return 0
}
const result = this.allOrderLines.map(order => {
return order.quantityOrdered
})
if (!this.isEmptyValue(result)) {
return result.reduce((accumulator, currentValue) => {
return accumulator + currentValue
})
}
return 0
},
numberOfLines() {
if (this.isEmptyValue(this.getOrder)) {
return
}
return this.allOrderLines.length
},
currencyPoint() {
const currency = this.currentPoint
if (!this.isEmptyValue(currency)) {
return currency.priceList.currency
}
return {
uuid: '',
iSOCode: '',
curSymbol: ''
}
},
multiplyRate() {
return this.$store.getters.getMultiplyRate
},
converCurrency() {
return this.$store.getters.getValueOfField({
containerUuid: 'Collection-Convert-Amount',
columnName: 'C_Currency_ID_UUID'
})
},
currencyUuid() {
return this.$store.getters.getValueOfField({
containerUuid: 'Collection-Convert-Amount',
columnName: 'C_Currency_ID_UUID'
})
},
displayeTypeCurrency() {
return this.$store.getters.getValueOfField({
containerUuid: this.containerUuid,
columnName: 'DisplayColumn_C_Currency_ID'
})
},
isDisabled() {
return this.$store.getters.getIsProcessed
},
labelButtonCollections() {
return this.isDisabled ? this.$t('form.pos.order.collections') : this.$t('form.pos.order.collect')
}
},
watch: {
currencyUuid(value) {
if (!this.isEmptyValue(value) && !this.isEmptyValue(this.currentPoint)) {
this.$store.dispatch('conversionDivideRate', {
conversionTypeUuid: this.$store.getters.getCurrentPOS.conversionTypeUuid,
currencyFromUuid: this.currencyPoint.uuid,
currencyToUuid: value
})
}
},
converCurrency(value) {
if (!this.isEmptyValue(value) && !this.isEmptyValue(this.currentPoint)) {
this.$store.dispatch('conversionMultiplyRate', {
containerUuid: 'Order',
conversionTypeUuid: this.$store.getters.getCurrentPOS.conversionTypeUuid,
currencyFromUuid: this.currencyPoint.uuid,
currencyToUuid: value
})
} else {
this.$store.commit('currencyMultiplyRate', 1)
}
},
namePo1intOfSales(value) {
if (!this.isEmptyValue(value)) {
this.$router.push({
query: {
pos: value.id
}
})
}
}
},
mounted() {
if (!this.isEmptyValue(this.$route.query.action)) {
this.$store.dispatch('reloadOrder', { orderUuid: this.$route.query.action })
}
// setTimeout(() => {
// this.currencyDisplaye()
// }, 1500)
},
methods: {
changePos(posElement) {
this.$store.dispatch('setCurrentPOS', posElement)
this.newOrder()
},
openCollectionPanel() {
this.isShowedPOSKeyLayout = !this.isShowedPOSKeyLayout
this.$store.commit('setShowPOSCollection', true)
const orderUuid = this.$route.query.action
this.$store.dispatch('listPayments', { orderUuid })
this.isShowedPOSKeyLaout = !this.isShowedPOSKeyLaout
this.$store.commit('setShowPOSOptions', false)
},
newOrder() {
this.$router.push({
params: {
...this.$route.params
},
query: {
pos: this.currentPoint.id
}
}).catch(() => {
}).finally(() => {
const { templateBusinessPartner } = this.currentPoint
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
}]
})
this.$store.dispatch('setOrder', {
documentType: {},
documentStatus: {
value: ''
},
totalLines: 0,
grandTotal: 0,
salesRepresentative: {},
businessPartner: {
value: '',
uuid: ''
}
})
this.$store.dispatch('listOrderLine', [])
})
},
open() {
if (!this.seeConversion) {
this.seeConversion = true
}
// },
// tenderTypeDisplaye() {
// if (!this.isEmptyValue(this.fieldsList)) {
// const tenderType = this.fieldsList[5].reference
// if (!this.isEmptyValue(tenderType)) {
// this.$store.dispatch('getLookupListFromServer', {
// tableName: tenderType.tableName,
// query: tenderType.query
// })
// .then(response => {
// this.$store.dispatch('tenderTypeDisplaye', response)
// })
// }
// }
// },
// currencyDisplaye() {
// if (!this.isEmptyValue(this.fieldsList)) {
// const currency = this.fieldsList[4].reference
// if (!this.isEmptyValue(currency)) {
// this.$store.dispatch('getLookupListFromServer', {
// tableName: currency.tableName,
// query: currency.query
// })
// .then(response => {
// this.$store.dispatch('currencyDisplaye', response)
// })
// }
// }
}
}
}
</script>
<style scoped>
.delete-buttom {
border: none;
width: 100%;
text-align: left;
}
.el-col-24 {
width: 100%;
padding-right: 0px !important;
padding-left: 0px !important;
}
.el-col-6 {
padding-right: 0px !important;
padding-left: 0px !important;
}
.footer-table {
padding-top: 0px;
padding-right: 9px;
padding-bottom: 0px;
padding-left: 9px;
height: auto !important;
}
.keypad {
float: left;
height: 20%;
padding-top: 25px;
}
.total {
margin-top: 10px;
margin-bottom: 10px
}
.split {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: hidden;
overflow-x: hidden;
height: 100%;
width: 100%;
}
.el-card__body {
padding-top: 0px !important;
padding-right: 0px!important;
padding-bottom: 20px;
padding-left: 10px!important;
height: 100%!important;
}
/* Style of Table */
.el-table {
position: relative;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-width: 100%;
height: 100%;
background-color: #FFFFFF;
font-size: 14px;
color: #606266;
}
.el-card__header {
padding: 0px 20px;
border-bottom: 1px solid #e6ebf5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.el-header {
background: 'white';
color: #333;
line-height: 10px;
}
.el-button--text {
border-color: transparent;
color: #1890ff;
background: transparent;
padding: 0px;
}
.el-aside {
color: #333;
}
.el-row {
margin: 0px!important;
}
.el-tag--medium {
height: 34px;
line-height: 32px;
text-align: center;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.order-header {
padding-left: 10px;
font-size: 13px;
}
.order-info {
float: right;
padding-left: 9px;
}
.transition-box {
z-index: 1;
width: auto;
position: fixed;
bottom: 5%;
right: 5%;
}
</style>