blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-13 15:15:53 +08:00
Code Issues Releases Wiki Activity

fix: Calculator popover style. (#547)

Browse Source 
* fix: Calculator popover style.

* fixed global styles in common table.

Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com>
This commit is contained in:
Edwin Betancourt 2020-11-28 01:33:52 -04:00 committed by GitHub
parent 0bd71c4d4d
commit 89904a5d94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 224 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/ADempiere/Field/popover/calculator/buttons.js Normal file
View 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
}
}
]

278
src/components/ADempiere/Field/popover/calculator.vue → src/components/ADempiere/Field/popover/calculator/index.vue
View File

@ -3,74 +3,93 @@
<el-button type="text" :disabled="fieldAttributes.readonly" @click="focusCalc"> <el-button type="text" :disabled="fieldAttributes.readonly" @click="focusCalc">
<i class="el-icon-s-operation el-icon--right" /> <i class="el-icon-s-operation el-icon--right" />
</el-button> </el-button>
<el-dropdown-menu slot="dropdown" class="dropdown-calc"> <el-dropdown-menu slot="dropdown" class="dropdown-calc">
<el-input <el-input
ref="calculatorInput" ref="calculatorInput"
v-model="calcValue" v-model="calcValue"
class="calc-input" class="calculator-input"
size="mini"
readonly
@keydown.native="calculateValue" @keydown.native="calculateValue"
@keyup.enter.native="changeValue" @keyup.enter.native="changeValue"
> >
<template slot="append">{{ valueToDisplay }}</template> <!--
<template slot="append">
{{ valueToDisplay }}
</template>
-->
</el-input> </el-input>
<el-table <el-table
ref="calculator" ref="calculator"
:data="tableData" :data="tableData"
style="width: 100%" style="width: 100%"
border border
size="mini"
:show-header="false" :show-header="false"
:span-method="spanMethod" :span-method="spanMethod"
class="calc-table" class="calculator-table"
@cell-click="sendValue" @cell-click="sendValue"
> >
<el-table-column <el-table-column
align="center" align="center"
prop="row1" prop="row1"
height="50" height="15"
width="50" width="35"
> >
<template slot-scope="{ row, column }"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="row2" prop="row2"
height="50" height="15"
width="50" width="35"
> >
<template slot-scope="{ row, column }"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="row3" prop="row3"
height="50" height="15"
width="50" width="35"
> >
<template slot-scope="{ row, column }"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="row4" prop="row4"
height="50" height="15"
width="50" width="35"
> >
<template slot-scope="{ row, column }"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="row5" prop="row5"
height="50" height="15"
width="50" width="35"
> >
<template slot-scope="{ row, column }"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -80,6 +99,7 @@
<script> <script>
import { ID, INTEGER } from '@/utils/ADempiere/references' import { ID, INTEGER } from '@/utils/ADempiere/references'
import buttons from './buttons.js'
export default { export default {
name: 'FieldCalc', name: 'FieldCalc',
@ -96,113 +116,12 @@ export default {
data() { data() {
return { return {
calcValue: this.fieldValue, calcValue: this.fieldValue,
valueToDisplay: '', valueToDisplay: ''
tableData: [{ }
row1: { },
type: 'operator', computed: {
value: '%' tableData() {
}, return buttons
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
}
}]
} }
}, },
watch: { watch: {
@ -212,9 +131,11 @@ export default {
}, },
methods: { methods: {
sendValue(row, column) { 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)) { 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) const result = this.calculationValue(this.calcValue, event)
if (!this.isEmptyValue(result)) { if (!this.isEmptyValue(result)) {
this.valueToDisplay = result this.valueToDisplay = result
@ -222,15 +143,15 @@ export default {
this.valueToDisplay = '...' this.valueToDisplay = '...'
} }
} }
if (row[column.property].type === 'clear') { if (type === 'clear') {
if (row[column.property].value === 'C') { if (value === 'C') {
this.calcValue = this.calcValue.slice(0, -1) this.calcValue = this.calcValue.slice(0, -1)
} else if (row[column.property].value === 'AC') { } else if (value === 'AC') {
this.calcValue = '' this.calcValue = ''
this.valueToDisplay = '' this.valueToDisplay = ''
} }
} }
if (row[column.property].value === '=') { if (value === '=') {
this.changeValue() this.changeValue()
} }
}, },
@ -263,46 +184,37 @@ export default {
// this.$children[0].visible = false // this.$children[0].visible = false
// }) // })
}, },
spanMethod({ row, column, rowIndex, columnIndex }) { spanMethod({ row, column }) {
if (rowIndex === 1) { const button = row[column.property]
if (row[column.property].value === '+') { const { value } = button
return { if (this.isEmptyValue(value)) {
rowspan: 2, return {
colspan: 1 rowspan: 0,
} colspan: 0
} }
} else if (rowIndex === 2) { }
if (this.isEmptyValue(row[column.property].value)) { if (['+', '='].includes(value)) {
return { return {
rowspan: 0, rowspan: 2,
colspan: 0 colspan: 1
}
} }
} else if (rowIndex === 3) { }
if (row[column.property].value === '=') { if (value === '0') {
return { return {
rowspan: 2, rowspan: 1,
colspan: 1 colspan: 2
}
}
} 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
}
} }
} }
return {
rowspan: 1,
colspan: 1
}
}, },
isDisabled(row, column) { isDisabled(row, column) {
// Integer or ID // Integer or ID
const isInteger = [ID.id, INTEGER.id].includes(this.fieldAttributes.displayType) const isInteger = [ID.id, INTEGER.id].includes(this.fieldAttributes.displayType)
const value = row[column.property].value const { value } = row[column.property]
if (isInteger && value === ',') { if (isInteger && value === ',') {
return true return true
} }
@ -322,16 +234,50 @@ export default {
} }
} }
</script> </script>
<style> <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 { .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #ffffff !important; background-color: #ffffff !important;
} }
.calc-table .el-table__body-wrapper > table {
.calculator-table .el-table__body-wrapper > table {
border-spacing: 5px; 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; border-radius: 5px;
cursor: pointer; 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> </style>