mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
code refactor
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<f7-sheet :opened="show" @sheet:closed="onSheetClosed">
|
||||
<f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-toolbar>
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
@@ -11,12 +11,12 @@
|
||||
<f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
|
||||
<f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
|
||||
<f7-icon f7="app_fill" :style="{ color: '#' + colorInfo.color }" @click.native="onColorClicked(colorInfo)">
|
||||
<f7-badge color="default" class="right-bottom-icon" v-if="color && color === colorInfo.color">
|
||||
<f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === colorInfo.color">
|
||||
<f7-icon f7="checkmark_alt"></f7-icon>
|
||||
</f7-badge>
|
||||
</f7-icon>
|
||||
</f7-col>
|
||||
<f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
|
||||
<f7-col v-for="idx in (itemPerRow - row.length)" :key="idx"></f7-col>
|
||||
</f7-row>
|
||||
</f7-block>
|
||||
</f7-page-content>
|
||||
@@ -26,18 +26,26 @@
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'color',
|
||||
'value',
|
||||
'columnCount',
|
||||
'show',
|
||||
'allColorInfos'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
|
||||
return {
|
||||
currentValue: self.value,
|
||||
itemPerRow: self.columnCount || 7
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allColorRows() {
|
||||
const ret = [];
|
||||
let rowCount = -1;
|
||||
|
||||
for (let i = 0; i < this.allColorInfos.length; i++) {
|
||||
if (i % this.columnCount === 0) {
|
||||
if (i % this.itemPerRow === 0) {
|
||||
ret[++rowCount] = [];
|
||||
}
|
||||
|
||||
@@ -51,10 +59,14 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onColorClicked(colorInfo) {
|
||||
this.$emit('color:change', colorInfo.color);
|
||||
this.currentValue = colorInfo.color;
|
||||
this.$emit('input', this.currentValue);
|
||||
},
|
||||
onSheetOpen() {
|
||||
this.currentValue = this.value;
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.$emit('color:closed');
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<f7-sheet :class="{ 'icon-selection-huge-sheet': hugeIconRows }" :opened="show" @sheet:closed="onSheetClosed">
|
||||
<f7-sheet :class="{ 'icon-selection-huge-sheet': hugeIconRows }" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-toolbar>
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
@@ -11,12 +11,12 @@
|
||||
<f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allIconRows" :key="idx">
|
||||
<f7-col class="text-align-center" v-for="iconInfo in row" :key="iconInfo.id">
|
||||
<f7-icon :icon="iconInfo.icon" :style="{ color: '#' + (color || '000000') }" @click.native="onIconClicked(iconInfo)">
|
||||
<f7-badge color="default" class="right-bottom-icon" v-if="icon && icon === iconInfo.id">
|
||||
<f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === iconInfo.id">
|
||||
<f7-icon f7="checkmark_alt"></f7-icon>
|
||||
</f7-badge>
|
||||
</f7-icon>
|
||||
</f7-col>
|
||||
<f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
|
||||
<f7-col v-for="idx in (itemPerRow - row.length)" :key="idx"></f7-col>
|
||||
</f7-row>
|
||||
</f7-block>
|
||||
</f7-page-content>
|
||||
@@ -26,12 +26,20 @@
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'icon',
|
||||
'value',
|
||||
'color',
|
||||
'columnCount',
|
||||
'show',
|
||||
'allIconInfos'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
|
||||
return {
|
||||
currentValue: self.value,
|
||||
itemPerRow: self.columnCount || 7
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allIconRows() {
|
||||
const ret = [];
|
||||
@@ -46,7 +54,7 @@ export default {
|
||||
|
||||
if (!ret[rowCount]) {
|
||||
ret[rowCount] = [];
|
||||
} else if (ret[rowCount] && ret[rowCount].length >= this.columnCount) {
|
||||
} else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
|
||||
rowCount++;
|
||||
ret[rowCount] = [];
|
||||
}
|
||||
@@ -65,10 +73,14 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onIconClicked(iconInfo) {
|
||||
this.$emit('icon:change', iconInfo.id);
|
||||
this.currentValue = iconInfo.id;
|
||||
this.$emit('input', this.currentValue);
|
||||
},
|
||||
onSheetOpen() {
|
||||
this.currentValue = this.value;
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.$emit('icon:closed');
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<f7-sheet class="numpad-sheet" :opened="show" @sheet:closed="onSheetClosed">
|
||||
<f7-sheet class="numpad-sheet" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-page-content class="no-margin no-padding-top">
|
||||
<f7-row class="numpad-values">
|
||||
<span class="numpad-value">{{ currentDisplay }}</span>
|
||||
@@ -48,9 +48,9 @@
|
||||
<span class="numpad-button-text numpad-button-text-normal">0</span>
|
||||
</f7-button>
|
||||
<f7-button class="numpad-button numpad-button-num" @click="backspace" @taphold.native="clear()">
|
||||
<span class="numpad-button-text numpad-button-text-normal">
|
||||
<f7-icon f7="delete_left"></f7-icon>
|
||||
</span>
|
||||
<span class="numpad-button-text numpad-button-text-normal">
|
||||
<f7-icon f7="delete_left"></f7-icon>
|
||||
</span>
|
||||
</f7-button>
|
||||
<f7-button class="numpad-button numpad-button-confirm no-right-border no-bottom-border" fill @click="confirm()">
|
||||
<span :class="{ 'numpad-button-text': true, 'numpad-button-text-confirm': !currentSymbol }">{{ confirmText }}</span>
|
||||
@@ -63,7 +63,7 @@
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'amount',
|
||||
'value',
|
||||
'show'
|
||||
],
|
||||
data() {
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
return {
|
||||
previousValue: '',
|
||||
currentSymbol: '',
|
||||
currentValue: self.getStringValue(self.amount)
|
||||
currentValue: self.getStringValue(self.value)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -94,11 +94,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
amount: function(newValue){
|
||||
this.currentValue = this.getStringValue(newValue);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStringValue(value) {
|
||||
let str = this.$utilities.numericCurrencyToString(value);
|
||||
@@ -225,18 +220,17 @@ export default {
|
||||
this.previousValue = '';
|
||||
this.currentSymbol = '';
|
||||
} else {
|
||||
const amount = this.$utilities.stringCurrencyToNumeric(this.currentValue);
|
||||
this.currentValue = '';
|
||||
const value = this.$utilities.stringCurrencyToNumeric(this.currentValue);
|
||||
|
||||
this.$emit('numpad:change', amount);
|
||||
this.$emit('input', value);
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
},
|
||||
onSheetOpen() {
|
||||
this.currentValue = this.getStringValue(this.value);
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.currentValue = '';
|
||||
this.previousValue = '';
|
||||
this.currentSymbol = '';
|
||||
|
||||
this.$emit('numpad:closed');
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user