mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
Changing order table options (#862)
* corrections of errors in post services * fix order line * change option in table * minimal changes * minimal changes * remove commnet Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
This commit is contained in:
Elsio Sanchez
GitHub
parent
52da6e1a5b
commit
8c445f59d6
@ -87,7 +87,7 @@
|
|||||||
:key="key"
|
:key="key"
|
||||||
:column-key="valueOrder.columnName"
|
:column-key="valueOrder.columnName"
|
||||||
:label="valueOrder.label"
|
:label="valueOrder.label"
|
||||||
:width="valueOrder.isNumeric ? 'auto' : '380'"
|
:width="!valueOrder.isNumeric ? valueOrder.size : valueOrder.size"
|
||||||
:align="valueOrder.isNumeric ? 'right' : 'left'"
|
:align="valueOrder.isNumeric ? 'right' : 'left'"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@ -97,102 +97,68 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label=""
|
:label="$t('form.pos.tableProduct.options')"
|
||||||
width="120"
|
width="180"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-dropdown trigger="click" @command="changeLine">
|
<el-popover
|
||||||
<span class="el-dropdown-link">
|
v-if="!isEmptyValue(listOrderLine)"
|
||||||
{{ $t('form.pos.tableProduct.options') }}
|
placement="right"
|
||||||
<i class="el-icon-arrow-down el-icon--right" />
|
trigger="click"
|
||||||
</span>
|
:title="$t('form.productInfo.productInformation')"
|
||||||
<el-dropdown-menu slot="dropdown" style="padding-bottom: 0px;">
|
>
|
||||||
<el-dropdown-item
|
<el-form
|
||||||
:command="{
|
label-position="top"
|
||||||
...scope.row,
|
style="float: right; display: flex; line-height: 30px;"
|
||||||
option: $t('form.productInfo.productInformation')
|
>
|
||||||
}"
|
<el-row :gutter="24">
|
||||||
>
|
<el-col :span="4">
|
||||||
<el-popover
|
<div>
|
||||||
v-if="!isEmptyValue(currentLineOrder)"
|
<el-avatar shape="square" :size="100" src="https://#" @error="true">
|
||||||
placement="right"
|
<el-image>
|
||||||
trigger="click"
|
<div slot="error" class="image-slot">
|
||||||
:title="$t('form.productInfo.productInformation')"
|
<i class="el-icon-picture-outline" />
|
||||||
>
|
|
||||||
<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>
|
</div>
|
||||||
</el-col>
|
</el-image>
|
||||||
<el-col :span="10">
|
</el-avatar>
|
||||||
{{ $t('form.productInfo.code') }}: <b>{{ currentLineOrder.product.value }}</b><br>
|
</div>
|
||||||
{{ $t('form.productInfo.name') }}: <b>{{ currentLineOrder.product.name }}</b><br>
|
</el-col>
|
||||||
{{ $t('form.productInfo.description') }}: <b>{{ currentLineOrder.product.description }}</b><br>
|
<el-col :span="10">
|
||||||
</el-col>
|
{{ $t('form.productInfo.code') }}: <b>{{ scope.row.product.value }}</b><br>
|
||||||
<el-col :span="10">
|
{{ $t('form.productInfo.name') }}: <b>{{ scope.row.product.name }}</b><br>
|
||||||
<div style="float: right">
|
{{ $t('form.productInfo.description') }}: <b>{{ scope.row.product.description }}</b><br>
|
||||||
{{ $t('form.productInfo.price') }}:
|
</el-col>
|
||||||
<b>{{ formatPrice(currentLineOrder.product.priceStandard, pointOfSalesCurrency.iSOCode) }}</b>
|
<el-col :span="10">
|
||||||
<br>
|
<div style="float: right">
|
||||||
{{ $t('form.productInfo.taxAmount') }}:
|
{{ $t('form.productInfo.price') }}:
|
||||||
<b>{{ currentLineOrder.taxIndicator }}</b>
|
<b>{{ formatPrice(scope.row.product.priceStandard, pointOfSalesCurrency.iSOCode) }}</b>
|
||||||
<br>
|
<br>
|
||||||
{{ $t('form.productInfo.quantityAvailable') }}:
|
{{ $t('form.productInfo.taxAmount') }}:
|
||||||
<b>{{ formatQuantity(currentLineOrder.quantityOrdered) }}</b>
|
<b>{{ scope.row.taxIndicator }}</b>
|
||||||
</div>
|
<br>
|
||||||
</el-col>
|
{{ $t('form.productInfo.quantityAvailable') }}:
|
||||||
</el-row>
|
<b>{{ formatQuantity(scope.row.quantityOrdered) }}</b>
|
||||||
</el-form>
|
</div>
|
||||||
<el-button slot="reference" type="text" style="display: flex;width: 110%;padding-bottom: 5%;padding-top: 5%;">
|
</el-col>
|
||||||
<i class="el-icon-info" /> {{ $t('form.productInfo.productInformation') }}
|
</el-row>
|
||||||
</el-button>
|
</el-form>
|
||||||
</el-popover>
|
<el-button slot="reference" type="primary" icon="el-icon-info" size="mini" style="margin-right: 3%;" />
|
||||||
</el-dropdown-item>
|
</el-popover>
|
||||||
<el-dropdown-item
|
<el-popover
|
||||||
:command="{
|
placement="right"
|
||||||
...scope.row,
|
trigger="click"
|
||||||
option: $t('form.pos.tableProduct.editQuantities')
|
:title="$t('form.pos.tableProduct.editQuantities')"
|
||||||
}"
|
width="600"
|
||||||
>
|
@hide="showFieldLine = false"
|
||||||
<el-popover
|
>
|
||||||
placement="right"
|
<field-line
|
||||||
trigger="click"
|
:data-line="scope.row"
|
||||||
:title="$t('form.pos.tableProduct.editQuantities')"
|
:show-field="showFieldLine"
|
||||||
width="600"
|
:current-line="currentLineOrder"
|
||||||
@hide="showFieldLine = false"
|
/>
|
||||||
>
|
<el-button slot="reference" type="success" icon="el-icon-edit" size="mini" style="margin-right: 3%;" @click="showEditLine(scope.row)" />
|
||||||
<field-line
|
</el-popover>
|
||||||
:data-line="scope.row"
|
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteOrderLine(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>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -465,8 +431,8 @@ export default {
|
|||||||
return this.currentOrder.lineOrder
|
return this.currentOrder.lineOrder
|
||||||
},
|
},
|
||||||
currentLineOrder() {
|
currentLineOrder() {
|
||||||
console.log(this.$store.state['pointOfSales/orderLine/index'].line)
|
const line = this.$store.state['pointOfSales/orderLine/index'].line
|
||||||
return this.$store.state['pointOfSales/orderLine/index'].line
|
return line
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -557,6 +523,10 @@ export default {
|
|||||||
this.currentOrderLine = this.listOrderLine[this.currentTable]
|
this.currentOrderLine = this.listOrderLine[this.currentTable]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
showEditLine(line) {
|
||||||
|
this.$store.commit('setLine', line)
|
||||||
|
this.showFieldLine = !this.showFieldLine
|
||||||
|
},
|
||||||
arrowBottom() {
|
arrowBottom() {
|
||||||
const top = this.listOrderLine.length - 1
|
const top = this.listOrderLine.length - 1
|
||||||
if (this.currentTable < top) {
|
if (this.currentTable < top) {
|
||||||
|
|||||||
@ -153,8 +153,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
showField(value) {
|
showField(value) {
|
||||||
if (value && this.isEmptyValue(this.metadataList) && (this.dataLine.uuid === this.currentLine.uuid)) {
|
if (value && this.isEmptyValue(this.metadataList) && (this.dataLine.uuid === this.$store.state['pointOfSales/orderLine/index'].line.uuid)) {
|
||||||
this.setFieldsList()
|
|
||||||
this.metadataList = this.setFieldsList()
|
this.metadataList = this.setFieldsList()
|
||||||
this.isLoadedField = true
|
this.isLoadedField = true
|
||||||
}
|
}
|
||||||
|
|||||||
@ -29,27 +29,32 @@ export default {
|
|||||||
lineDescription: {
|
lineDescription: {
|
||||||
columnName: 'LineDescription',
|
columnName: 'LineDescription',
|
||||||
label: this.$t('form.pos.tableProduct.product'),
|
label: this.$t('form.pos.tableProduct.product'),
|
||||||
isNumeric: false
|
isNumeric: false,
|
||||||
|
size: '380'
|
||||||
},
|
},
|
||||||
currentPrice: {
|
currentPrice: {
|
||||||
columnName: 'CurrentPrice',
|
columnName: 'CurrentPrice',
|
||||||
label: this.$t('form.productInfo.price'),
|
label: this.$t('form.productInfo.price'),
|
||||||
isNumeric: true
|
isNumeric: true,
|
||||||
|
size: 'auto'
|
||||||
},
|
},
|
||||||
quantityOrdered: {
|
quantityOrdered: {
|
||||||
columnName: 'QtyOrdered',
|
columnName: 'QtyOrdered',
|
||||||
label: this.$t('form.pos.tableProduct.quantity'),
|
label: this.$t('form.pos.tableProduct.quantity'),
|
||||||
isNumeric: true
|
isNumeric: true,
|
||||||
|
size: '100px'
|
||||||
},
|
},
|
||||||
discount: {
|
discount: {
|
||||||
columnName: 'Discount',
|
columnName: 'Discount',
|
||||||
label: '% ' + this.$t('form.pos.order.discount'),
|
label: '% ' + this.$t('form.pos.order.discount'),
|
||||||
isNumeric: true
|
isNumeric: true,
|
||||||
|
size: '110px'
|
||||||
},
|
},
|
||||||
grandTotal: {
|
grandTotal: {
|
||||||
columnName: 'GrandTotal',
|
columnName: 'GrandTotal',
|
||||||
label: 'Total',
|
label: 'Total',
|
||||||
isNumeric: true
|
isNumeric: true,
|
||||||
|
size: 'auto'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
currentOrderLine: {
|
currentOrderLine: {
|
||||||
@ -119,12 +124,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
updateOrderLine(line) {
|
updateOrderLine(line) {
|
||||||
let {
|
let quantity, price, discountRate
|
||||||
currentPrice: price,
|
|
||||||
discount: discountRate,
|
|
||||||
quantityOrdered: quantity
|
|
||||||
} = this.currentOrderLine
|
|
||||||
|
|
||||||
switch (line.columnName) {
|
switch (line.columnName) {
|
||||||
case 'QtyEntered':
|
case 'QtyEntered':
|
||||||
quantity = line.value
|
quantity = line.value
|
||||||
@ -155,7 +155,8 @@ export default {
|
|||||||
discount: response.discountRate
|
discount: response.discountRate
|
||||||
})
|
})
|
||||||
this.fillOrderLine(response)
|
this.fillOrderLine(response)
|
||||||
this.reloadOrder(true)
|
this.$store.dispatch('reloadOrder', { orderUuid: this.$store.getters.posAttributes.currentPointOfSales.currentOrder.uuid })
|
||||||
|
this.$store.dispatch('currentLine', response)
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error(error.message)
|
console.error(error.message)
|
||||||
@ -167,11 +168,12 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
deleteOrderLine(lineSelection) {
|
deleteOrderLine(lineSelection) {
|
||||||
|
console
|
||||||
requestDeleteOrderLine({
|
requestDeleteOrderLine({
|
||||||
orderLineUuid: lineSelection.uuid
|
orderLineUuid: lineSelection.uuid
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.reloadOrder(true)
|
this.$store.dispatch('reloadOrder', { orderUuid: this.$store.getters.posAttributes.currentPointOfSales.currentOrder.uuid })
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error(error.message)
|
console.error(error.message)
|
||||||
@ -203,6 +205,9 @@ export default {
|
|||||||
return this.formatPrice(row.grandTotal, currency)
|
return this.formatPrice(row.grandTotal, currency)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
productPrice(price, discount) {
|
||||||
|
return price / discount * 100
|
||||||
|
},
|
||||||
handleCurrentLineChange(rowLine) {
|
handleCurrentLineChange(rowLine) {
|
||||||
this.$store.dispatch('currentLine', rowLine)
|
this.$store.dispatch('currentLine', rowLine)
|
||||||
if (!this.isEmptyValue(rowLine)) {
|
if (!this.isEmptyValue(rowLine)) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user