mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
fix: Calculator popover style. (#547)
* fix: Calculator popover style. * fixed global styles in common table. Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com>
This commit is contained in:
Edwin Betancourt
GitHub
parent
0bd71c4d4d
commit
89904a5d94
112
src/components/ADempiere/Field/popover/calculator/buttons.js
Normal file
112
src/components/ADempiere/Field/popover/calculator/buttons.js
Normal file
@ -0,0 +1,112 @@
|
||||
export default [
|
||||
{
|
||||
row1: {
|
||||
type: 'operator',
|
||||
value: '%'
|
||||
},
|
||||
row2: {
|
||||
type: 'operator',
|
||||
value: '/'
|
||||
},
|
||||
row3: {
|
||||
type: 'operator',
|
||||
value: '*'
|
||||
},
|
||||
row4: {
|
||||
type: 'operator',
|
||||
value: '−'
|
||||
},
|
||||
row5: {
|
||||
type: 'clear',
|
||||
value: 'C'
|
||||
}
|
||||
},
|
||||
{
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '7'
|
||||
},
|
||||
row2: {
|
||||
type: 'value',
|
||||
value: '8'
|
||||
},
|
||||
row3: {
|
||||
type: 'value',
|
||||
value: '9'
|
||||
},
|
||||
row4: {
|
||||
type: 'operator',
|
||||
value: '+'
|
||||
},
|
||||
row5: {
|
||||
type: 'clear',
|
||||
value: 'AC'
|
||||
}
|
||||
},
|
||||
{
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '4'
|
||||
},
|
||||
row2: {
|
||||
type: 'value',
|
||||
value: '5'
|
||||
},
|
||||
row3: {
|
||||
type: 'value',
|
||||
value: '7'
|
||||
},
|
||||
row4: {
|
||||
type: 'operator',
|
||||
value: '('
|
||||
},
|
||||
row5: {
|
||||
type: undefined,
|
||||
value: undefined
|
||||
}
|
||||
},
|
||||
{
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '1'
|
||||
},
|
||||
row2: {
|
||||
type: 'value',
|
||||
value: '2'
|
||||
},
|
||||
row3: {
|
||||
type: 'value',
|
||||
value: '3'
|
||||
},
|
||||
row4: {
|
||||
type: 'result',
|
||||
value: '='
|
||||
},
|
||||
row5: {
|
||||
type: 'operator',
|
||||
value: ')'
|
||||
}
|
||||
},
|
||||
{
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '0'
|
||||
},
|
||||
row2: {
|
||||
type: 'operator',
|
||||
value: '.'
|
||||
},
|
||||
row3: {
|
||||
type: 'operator',
|
||||
value: '+/-'
|
||||
},
|
||||
row4: {
|
||||
type: undefined,
|
||||
value: undefined
|
||||
},
|
||||
row5: {
|
||||
type: undefined,
|
||||
value: undefined
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -3,74 +3,93 @@
|
||||
<el-button type="text" :disabled="fieldAttributes.readonly" @click="focusCalc">
|
||||
<i class="el-icon-s-operation el-icon--right" />
|
||||
</el-button>
|
||||
|
||||
<el-dropdown-menu slot="dropdown" class="dropdown-calc">
|
||||
<el-input
|
||||
ref="calculatorInput"
|
||||
v-model="calcValue"
|
||||
class="calc-input"
|
||||
class="calculator-input"
|
||||
size="mini"
|
||||
readonly
|
||||
@keydown.native="calculateValue"
|
||||
@keyup.enter.native="changeValue"
|
||||
>
|
||||
<template slot="append">{{ valueToDisplay }}</template>
|
||||
<!--
|
||||
<template slot="append">
|
||||
{{ valueToDisplay }}
|
||||
</template>
|
||||
-->
|
||||
</el-input>
|
||||
|
||||
<el-table
|
||||
ref="calculator"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
size="mini"
|
||||
:show-header="false"
|
||||
:span-method="spanMethod"
|
||||
class="calc-table"
|
||||
class="calculator-table"
|
||||
@cell-click="sendValue"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row1"
|
||||
height="50"
|
||||
width="50"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">{{ row.row1.value }}</el-button>
|
||||
<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="50"
|
||||
width="50"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">{{ row.row2.value }}</el-button>
|
||||
<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="50"
|
||||
width="50"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">{{ row.row3.value }}</el-button>
|
||||
<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="50"
|
||||
width="50"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">{{ row.row4.value }}</el-button>
|
||||
<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="50"
|
||||
width="50"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">{{ row.row5.value }}</el-button>
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row5.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -80,6 +99,7 @@
|
||||
|
||||
<script>
|
||||
import { ID, INTEGER } from '@/utils/ADempiere/references'
|
||||
import buttons from './buttons.js'
|
||||
|
||||
export default {
|
||||
name: 'FieldCalc',
|
||||
@ -96,113 +116,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
calcValue: this.fieldValue,
|
||||
valueToDisplay: '',
|
||||
tableData: [{
|
||||
row1: {
|
||||
type: 'operator',
|
||||
value: '%'
|
||||
},
|
||||
row2: {
|
||||
type: 'operator',
|
||||
value: '/'
|
||||
},
|
||||
row3: {
|
||||
type: 'operator',
|
||||
value: '*'
|
||||
},
|
||||
row4: {
|
||||
type: 'operator',
|
||||
value: '-'
|
||||
},
|
||||
row5: {
|
||||
type: 'clear',
|
||||
value: 'C'
|
||||
}
|
||||
}, {
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '7'
|
||||
},
|
||||
row2: {
|
||||
type: 'value',
|
||||
value: '8'
|
||||
},
|
||||
row3: {
|
||||
type: 'value',
|
||||
value: '9'
|
||||
},
|
||||
row4: {
|
||||
type: 'operator',
|
||||
value: '+'
|
||||
},
|
||||
row5: {
|
||||
type: 'clear',
|
||||
value: 'AC'
|
||||
}
|
||||
}, {
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '4'
|
||||
},
|
||||
row2: {
|
||||
type: 'value',
|
||||
value: '5'
|
||||
},
|
||||
row3: {
|
||||
type: 'value',
|
||||
value: '7'
|
||||
},
|
||||
row4: {
|
||||
type: 'operator',
|
||||
value: '('
|
||||
},
|
||||
row5: {
|
||||
type: undefined,
|
||||
value: undefined
|
||||
}
|
||||
}, {
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '1'
|
||||
},
|
||||
row2: {
|
||||
type: 'value',
|
||||
value: '2'
|
||||
},
|
||||
row3: {
|
||||
type: 'value',
|
||||
value: '3'
|
||||
},
|
||||
row4: {
|
||||
type: 'result',
|
||||
value: '='
|
||||
},
|
||||
row5: {
|
||||
type: 'operator',
|
||||
value: ')'
|
||||
}
|
||||
}, {
|
||||
row1: {
|
||||
type: 'value',
|
||||
value: '0'
|
||||
},
|
||||
row2: {
|
||||
type: 'operator',
|
||||
value: '.'
|
||||
},
|
||||
row3: {
|
||||
type: 'operator',
|
||||
value: '+/-'
|
||||
},
|
||||
row4: {
|
||||
type: undefined,
|
||||
value: undefined
|
||||
},
|
||||
row5: {
|
||||
type: undefined,
|
||||
value: undefined
|
||||
}
|
||||
}]
|
||||
valueToDisplay: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableData() {
|
||||
return buttons
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -212,9 +131,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
sendValue(row, column) {
|
||||
const isAcceptedType = ['result', 'clear'].includes(row[column.property].type)
|
||||
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 = row[column.property].value : this.calcValue += row[column.property].value
|
||||
this.isEmptyValue(this.calcValue) ? this.calcValue = value : this.calcValue += value
|
||||
const result = this.calculationValue(this.calcValue, event)
|
||||
if (!this.isEmptyValue(result)) {
|
||||
this.valueToDisplay = result
|
||||
@ -222,15 +143,15 @@ export default {
|
||||
this.valueToDisplay = '...'
|
||||
}
|
||||
}
|
||||
if (row[column.property].type === 'clear') {
|
||||
if (row[column.property].value === 'C') {
|
||||
if (type === 'clear') {
|
||||
if (value === 'C') {
|
||||
this.calcValue = this.calcValue.slice(0, -1)
|
||||
} else if (row[column.property].value === 'AC') {
|
||||
} else if (value === 'AC') {
|
||||
this.calcValue = ''
|
||||
this.valueToDisplay = ''
|
||||
}
|
||||
}
|
||||
if (row[column.property].value === '=') {
|
||||
if (value === '=') {
|
||||
this.changeValue()
|
||||
}
|
||||
},
|
||||
@ -263,46 +184,37 @@ export default {
|
||||
// this.$children[0].visible = false
|
||||
// })
|
||||
},
|
||||
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (rowIndex === 1) {
|
||||
if (row[column.property].value === '+') {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
}
|
||||
spanMethod({ row, column }) {
|
||||
const button = row[column.property]
|
||||
const { value } = button
|
||||
if (this.isEmptyValue(value)) {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
} else if (rowIndex === 2) {
|
||||
if (this.isEmptyValue(row[column.property].value)) {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
if (['+', '='].includes(value)) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
}
|
||||
} else if (rowIndex === 3) {
|
||||
if (row[column.property].value === '=') {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
}
|
||||
}
|
||||
} else if (rowIndex === 4) {
|
||||
if (row[column.property].value === '0') {
|
||||
return {
|
||||
rowspan: 1,
|
||||
colspan: 2
|
||||
}
|
||||
} else if (this.isEmptyValue(row[column.property].value)) {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
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].value
|
||||
const { value } = row[column.property]
|
||||
if (isInteger && value === ',') {
|
||||
return true
|
||||
}
|
||||
@ -322,16 +234,50 @@ export default {
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.calc-table .el-table__body-wrapper > table {
|
||||
|
||||
.calculator-table .el-table__body-wrapper > table {
|
||||
border-spacing: 5px;
|
||||
}
|
||||
.calc-table .el-table__body tr > td {
|
||||
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
|
||||
|
||||
/* 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>
|
||||
Loading…
x
Reference in New Issue
Block a user