transaction list page supports filtering and searching, transaction add page supports setting default value by query parameters

2026-05-15 15:37:33 +08:00 · 2021-01-02 23:30:18 +08:00
parent 67808bd4af
commit efaf411902
11 changed files with 616 additions and 31 deletions
@@ -0,0 +1,125 @@
+<template>
+    <f7-sheet style="height:auto" :opened="show"
+              @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-page-content>
+            <div class="display-flex padding justify-content-space-between align-items-center">
+                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+            </div>
+            <div class="padding-horizontal padding-bottom">
+                <p class="no-margin-top margin-bottom-half" v-if="hint">{{ hint }}</p>
+                <slot></slot>
+                <f7-list no-hairlines inline-labels class="no-margin-top margin-bottom">
+                    <f7-list-input
+                        :label="$t('Begin Time')"
+                        type="datetime-local"
+                        class="date-range-sheet-time-item"
+                        :value="currentMinDate"
+                        @input="currentMinDate = $event.target.value"
+                    >
+                    </f7-list-input>
+
+                    <f7-list-input
+                        :label="$t('End Time')"
+                        type="datetime-local"
+                        class="date-range-sheet-time-item"
+                        :value="currentMaxDate"
+                        @input="currentMaxDate = $event.target.value"
+                    >
+                    </f7-list-input>
+                </f7-list>
+                <f7-button large fill
+                           :class="{ 'disabled': !currentMinDate || !currentMaxDate }"
+                           :text="$t('Continue')"
+                           @click="confirm">
+                </f7-button>
+                <div class="margin-top text-align-center">
+                    <f7-link  @click="cancel" :text="$t('Cancel')"></f7-link>
+                </div>
+            </div>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'minTime',
+        'maxTime',
+        'title',
+        'hint',
+        'show'
+    ],
+    data() {
+        const self = this;
+        let minDate = self.$utilities.getTodayFirstUnixTime();
+        let maxDate = self.$utilities.getUnixTime(new Date());
+
+        if (self.minTime) {
+            minDate = self.minTime;
+        }
+
+        if (self.maxTime) {
+            maxDate = self.maxTime;
+        }
+
+        return {
+            currentMinDate: self.$utilities.formatUnixTime(minDate, 'YYYY-MM-DDTHH:mm'),
+            currentMaxDate: self.$utilities.formatUnixTime(maxDate, 'YYYY-MM-DDTHH:mm')
+        }
+    },
+    watch: {
+        'currentMinDate': function (newValue) {
+            if (!newValue) {
+                this.currentMinDate = this.$utilities.formatDate(new Date(), 'YYYY-MM-DDTHH:mm');
+            }
+        },
+        'currentMaxDate': function (newValue) {
+            if (!newValue) {
+                this.currentMaxDate = this.$utilities.formatDate(new Date(), 'YYYY-MM-DDTHH:mm');
+            }
+        }
+    },
+    methods: {
+        onSheetOpen() {
+            if (this.minTime) {
+                this.currentMinDate = this.$utilities.formatUnixTime(this.minTime, 'YYYY-MM-DDTHH:mm');
+            }
+
+            if (this.maxTime) {
+                this.currentMaxDate = this.$utilities.formatUnixTime(this.maxTime, 'YYYY-MM-DDTHH:mm');
+            }
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        confirm() {
+            if (!this.currentMinDate || !this.currentMaxDate) {
+                return;
+            }
+
+            const minUnixTime = this.$utilities.getMinuteFirstUnixTime(this.currentMinDate);
+            const maxUnixTime = this.$utilities.getMinuteLastUnixTime(this.currentMaxDate);
+
+            if (minUnixTime < 0 || maxUnixTime < 0) {
+                this.$toast('Date is too early');
+                return;
+            }
+
+            this.$emit('dateRange:change', minUnixTime, maxUnixTime);
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        }
+    }
+}
+</script>
+
+<style>
+.date-range-sheet-time-item input[type="datetime-local"] {
+    max-width: inherit;
+}
+
+.list .date-range-sheet-time-item > .item-content {
+    padding-left: 0;
+}
+</style>