mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
330 lines
8.9 KiB
Vue
330 lines
8.9 KiB
Vue
<!--
|
|
ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
|
|
Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
|
|
Contributor(s): Edwin Betancourt edwinBetanc0urt@hotmail.com www.erpya.com
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
|
-->
|
|
<template>
|
|
<el-card class="box-card" style="padding: 1%;">
|
|
<div slot="header" class="clearfix">
|
|
<span>
|
|
{{ $t('field.field') }}
|
|
<b> {{ fieldAttributes.name }} </b>
|
|
</span>
|
|
</div>
|
|
<el-form ref="form" label-position="top" label-width="120px" @submit.native.prevent="notSubmitForm">
|
|
<el-form-item label="Valor">
|
|
<el-input
|
|
ref="calculatorInput"
|
|
v-model="calcValue"
|
|
class="calculator-input"
|
|
size="mini"
|
|
readonly
|
|
@keydown.native="calculateValue"
|
|
@keyup.enter.native="changeValue"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
ref="calculator"
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
border
|
|
size="mini"
|
|
:show-header="false"
|
|
:span-method="spanMethod"
|
|
class="calculator-table"
|
|
@cell-click="sendValue"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
prop="row1"
|
|
height="15"
|
|
width="45"
|
|
>
|
|
<template slot-scope="{ row, column }">
|
|
<el-button type="text" :disabled="isDisabled(row, column)">
|
|
{{ row.row1.value }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="row2"
|
|
height="15"
|
|
width="45"
|
|
>
|
|
<template slot-scope="{ row, column }">
|
|
<el-button type="text" :disabled="isDisabled(row, column)">
|
|
{{ row.row2.value }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="row3"
|
|
height="15"
|
|
width="45"
|
|
>
|
|
<template slot-scope="{ row, column }">
|
|
<el-button type="text" :disabled="isDisabled(row, column)">
|
|
{{ row.row3.value }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="row4"
|
|
height="15"
|
|
width="45"
|
|
>
|
|
<template slot-scope="{ row, column }">
|
|
<el-button type="text" :disabled="isDisabled(row, column)">
|
|
{{ row.row4.value }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="row5"
|
|
height="15"
|
|
width="45"
|
|
>
|
|
<template slot-scope="{ row, column }">
|
|
<el-button type="text" :disabled="isDisabled(row, column)">
|
|
{{ row.row5.value }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { ID, INTEGER } from '@/utils/ADempiere/references'
|
|
import buttons from './buttons.js'
|
|
|
|
export default {
|
|
name: 'FieldCalc',
|
|
props: {
|
|
fieldAttributes: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
fieldValue: {
|
|
type: Number,
|
|
default: undefined
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
calcValue: this.valueField,
|
|
valueToDisplay: ''
|
|
}
|
|
},
|
|
computed: {
|
|
tableData() {
|
|
return buttons
|
|
},
|
|
valueField() {
|
|
return this.$store.getters.getValueOfField({
|
|
parentUuid: this.fieldAttributes.parentUuid,
|
|
containerUuid: this.fieldAttributes.containerUuid,
|
|
columnName: this.fieldAttributes.columnName
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
valueField(value) {
|
|
console.log(value)
|
|
},
|
|
fieldValue(value) {
|
|
this.calcValue = value
|
|
}
|
|
},
|
|
created() {
|
|
this.calcValue = this.valueField
|
|
},
|
|
methods: {
|
|
sendValue(row, column) {
|
|
const button = row[column.property]
|
|
const { value, type } = button
|
|
const isAcceptedType = ['result', 'clear'].includes(type)
|
|
if (!isAcceptedType && !this.isDisabled(row, column)) {
|
|
this.isEmptyValue(this.calcValue) ? this.calcValue = value : this.calcValue += value
|
|
const result = this.calculationValue(this.calcValue, event)
|
|
if (!this.isEmptyValue(result)) {
|
|
this.valueToDisplay = result
|
|
} else {
|
|
this.valueToDisplay = '...'
|
|
}
|
|
}
|
|
if (type === 'clear') {
|
|
if (value === 'C') {
|
|
this.calcValue = this.calcValue.slice(0, -1)
|
|
} else if (value === 'AC') {
|
|
this.calcValue = ''
|
|
this.valueToDisplay = ''
|
|
}
|
|
}
|
|
if (value === '=') {
|
|
this.changeValue()
|
|
}
|
|
},
|
|
changeValue() {
|
|
const newValue = Number(this.valueToDisplay)
|
|
let isSendCallout = true
|
|
const isSendToServer = true
|
|
const isChangedOldValue = false
|
|
if (this.fieldAttributes.isAdvancedQuery) {
|
|
isSendCallout = false
|
|
}
|
|
|
|
const sendParameters = {
|
|
parentUuid: this.fieldAttributes.parentUuid,
|
|
containerUuid: this.fieldAttributes.containerUuid,
|
|
field: this.fieldAttributes,
|
|
panelType: this.fieldAttributes.panelType,
|
|
columnName: this.fieldAttributes.columnName,
|
|
newValue,
|
|
isAdvancedQuery: this.fieldAttributes.isAdvancedQuery,
|
|
isSendToServer,
|
|
isSendCallout,
|
|
isChangedOldValue
|
|
}
|
|
if (this.fieldAttributes.panelType === 'form') {
|
|
this.$store.commit('updateValueOfField', {
|
|
containerUuid: this.fieldAttributes.containerUuid,
|
|
columnName: this.fieldAttributes.columnName,
|
|
value: newValue
|
|
})
|
|
}
|
|
this.$store.dispatch('notifyFieldChange', {
|
|
...sendParameters
|
|
})
|
|
.finally(() => {
|
|
this.clearVariables()
|
|
this.$children[0].visible = false
|
|
this.$store.commit('changeShowRigthPanel', false)
|
|
this.$store.commit('changeShowOptionField', false)
|
|
if (!this.isEmptyValue(this.$route.query.fieldColumnName)) {
|
|
this.$router.push({
|
|
name: this.$route.name,
|
|
query: {
|
|
...this.$route.query,
|
|
typeAction: '',
|
|
fieldColumnName: ''
|
|
}
|
|
}, () => {})
|
|
}
|
|
})
|
|
},
|
|
spanMethod({ row, column }) {
|
|
const button = row[column.property]
|
|
const { value } = button
|
|
if (this.isEmptyValue(value)) {
|
|
return {
|
|
rowspan: 0,
|
|
colspan: 0
|
|
}
|
|
}
|
|
if (['+', '='].includes(value)) {
|
|
return {
|
|
rowspan: 2,
|
|
colspan: 1
|
|
}
|
|
}
|
|
if (value === '0') {
|
|
return {
|
|
rowspan: 1,
|
|
colspan: 2
|
|
}
|
|
}
|
|
|
|
return {
|
|
rowspan: 1,
|
|
colspan: 1
|
|
}
|
|
},
|
|
isDisabled(row, column) {
|
|
// Integer or ID
|
|
const isInteger = [ID.id, INTEGER.id].includes(this.fieldAttributes.displayType)
|
|
const { value } = row[column.property]
|
|
if (isInteger && value === ',') {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
calculateValue(event) {
|
|
const result = this.calculationValue(this.valueField, event)
|
|
if (!this.isEmptyValue(result)) {
|
|
this.valueToDisplay = result
|
|
} else {
|
|
this.valueToDisplay = '...'
|
|
}
|
|
},
|
|
focusCalc() {
|
|
this.$refs.calculatorInput.focus()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.calculator-input > .el-input__inner,
|
|
.calculator-input .el-input__inner {
|
|
border-radius: 0px !important;
|
|
}
|
|
|
|
.calculator-input {
|
|
width: 202px;
|
|
font-size: 16px;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
/* row color with hover */
|
|
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.calculator-table .el-table__body-wrapper > table {
|
|
border-spacing: 5px;
|
|
}
|
|
|
|
/* Button shadow and border */
|
|
.calculator-table .el-table__body tr > td {
|
|
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.calculator-table th, .calculator-table td,
|
|
.calculator-table > th, .calculator-table > td {
|
|
padding: 0px !important;
|
|
height: 0px !important;
|
|
padding-left: 0px !important;
|
|
}
|
|
|
|
.calculator-table .el-table .cell {
|
|
padding-right: 5px !important;
|
|
padding-left: 5px !important;
|
|
}
|
|
.calculator-table .el-table > .cell, .calculator-table .el-table .cell {
|
|
padding-left: 0px !important;
|
|
}
|
|
.calculator-table .el-table th.is-leaf, .el-table td {
|
|
border-bottom: 0px solid #dfe6ec !important;
|
|
}
|
|
</style>
|