管理后台时间筛选

src/main/java/com/izouma/nineth/utils/JpaUtils.java

@@ -96,9 +96,11 @@ public class JpaUtils {
                                 .toLocalDateTime((String) list.get(0), "yyyy-MM-dd HH:mm:ss");
                         and.add(criteriaBuilder.greaterThanOrEqualTo(root.get(property), start));
                     } else if (list.size() == 2) {
+                        LocalDateTime start = DateTimeUtils
+                                .toLocalDateTime((String) list.get(0), "yyyy-MM-dd HH:mm:ss");
                         LocalDateTime end = DateTimeUtils
                                 .toLocalDateTime((String) list.get(1), "yyyy-MM-dd HH:mm:ss");
-                        and.add(criteriaBuilder.lessThanOrEqualTo(root.get(property), end));
+                        and.add(criteriaBuilder.between(root.get(property), start, end));
                     }
                 } else if (value instanceof String && Pattern
                         .matches("^\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2},\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2}$", (String) value)) {

src/main/vue/src/components/CreatedAtPicker.vue

@@ -0,0 +1,71 @@
+<template>
+    <el-date-picker
+        v-model="date"
+        type="datetimerange"
+        :picker-options="pickerOptions"
+        range-separator="至"
+        :start-placeholder="`${name}开始时间`"
+        :end-placeholder="`${name}结束时间`"
+        align="right"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :default-time="['00:00:00', '23:59:59']"
+        @change="changeSelect"
+    >
+    </el-date-picker>
+</template>
+
+<script>
+export default {
+    props: ['value', 'name'],
+    data() {
+        return {
+            date: '',
+            pickerOptions: {
+                shortcuts: [
+                    {
+                        text: '最近一周',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date();
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    },
+                    {
+                        text: '最近一个月',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date();
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    },
+                    {
+                        text: '最近三个月',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date();
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        changeSelect(val) {
+            this.$emit('input', val);
+        }
+    },
+    watch: {
+        value() {
+            if (this.value) {
+                this.date = this.value;
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped></style>

src/main/vue/src/components/MinterFilter.vue

@@ -0,0 +1,100 @@
+<template>
+    <el-select
+        v-model="minterId"
+        filterable
+        remote
+        reserve-keyword
+        placeholder="请输入铸造者"
+        :remote-method="searchMinter"
+        :loading="searchingMinter"
+        @change="changeSelect"
+        :disabled="disabled"
+        clearable
+    >
+        <el-option
+            v-for="item in minters"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"
+            class="minter-item"
+        >
+            <el-image :src="item.avatar" fit="cover" class="avatar"></el-image>
+            <div class="content">
+                <div class="name">{{ item.nickname }}</div>
+                <div class="id">#{{ item.id }}</div>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+<script>
+export default {
+    props: {
+        value: {},
+        disabled: {
+            default() {
+                return false;
+            }
+        }
+    },
+    data() {
+        return {
+            minters: [],
+            minterId: null,
+            searchingMinter: false,
+            selected: null
+        };
+    },
+    created() {
+        this.$http.post('/user/all', { size: 30, query: { hasRole: 'ROLE_MINTER' } }, { body: 'json' }).then(res => {
+            this.minters = res.content;
+        });
+    },
+    methods: {
+        searchMinter(query) {
+            this.searchingMinter = true;
+            this.$http
+                .post('/user/all', { search: query, size: 30, query: { hasRole: 'ROLE_MINTER' } }, { body: 'json' })
+                .then(res => {
+                    this.minters = res.content;
+                    this.searchingMinter = false;
+                });
+        },
+        changeSelect(val) {
+            this.$emit('input', val);
+        }
+    },
+    watch: {
+        value(val) {
+            if (this.minterId !== val) {
+                this.minterId = val;
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.minter-item {
+    .flex();
+    height: 44px;
+    .avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+    }
+    .content {
+        margin-left: 10px;
+        line-height: 1;
+        .flex-col();
+        justify-content: center;
+        .name {
+            font-size: 14px;
+            color: @text2;
+        }
+        .id {
+            font-size: 12px;
+            color: @text3;
+            margin-top: 5px;
+        }
+    }
+}
+</style>

src/main/vue/src/main.js

@@ -16,8 +16,10 @@ import DistrictChoose from '@/components/DistrictChoose';
 import Formatters from '@/mixins/formatters';
 import PageTitle from '@/components/PageTitle';
 import MinterSelect from '@/components/MinterSelect';
+import MinterFilter from '@/components/MinterFilter';
 import ObjectUpload from '@/components/ObjectUpload';
 import CollectionSearch from '@/components/CollectionSearch';
+import CreatedAtPicker from '@/components/CreatedAtPicker';
 
 import 'normalize.css/normalize.css';
 import './styles/element_theme/index.css';
@@ -58,8 +60,10 @@ Vue.component('crop-upload', CropUpload);
 Vue.component('district-choose', DistrictChoose);
 Vue.component('page-title', PageTitle);
 Vue.component('minter-select', MinterSelect);
+Vue.component('minter-filter', MinterFilter);
 Vue.component('object-upload', ObjectUpload);
 Vue.component('collection-search', CollectionSearch);
+Vue.component('created-at-picker', CreatedAtPicker);
 Vue.mixin(Formatters);
 Vue.prototype.$theme = theme;
 console.log(theme);

src/main/vue/src/views/AirDropList.vue

@@ -15,6 +15,7 @@
             </el-button> -->
         </page-title>
         <div class="filters-container">
+            <created-at-picker v-model="createdAt" name="创建" @input="getData" style="margin-right: 10px"></created-at-picker>
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -90,7 +91,8 @@ export default {
             typeOptions: [
                 { label: '藏品', value: 'asset' },
                 { label: '兑换券', value: 'coupon' }
-            ]
+            ],
+            createdAt: ''
         };
     },
     computed: {
@@ -107,7 +109,7 @@ export default {
             return '';
         },
         beforeGetData() {
-            return { search: this.search, query: { del: false } };
+            return { search: this.search, query: { del: false, createdAt: this.createdAt } };
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;

src/main/vue/src/views/BlindBoxList.vue

@@ -21,6 +21,7 @@
             </el-button> -->
         </page-title>
         <div class="filters-container">
+            <minter-filter v-model="minterId" @input="getData"></minter-filter>
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -119,7 +120,8 @@ export default {
                 { label: '官方', value: 'OFFICIAL' },
                 { label: '用户铸造', value: 'USER' },
                 { label: '转让', value: 'TRANSFER' }
-            ]
+            ],
+            minterId: ''
         };
     },
     computed: {
@@ -143,7 +145,7 @@ export default {
             return '';
         },
         beforeGetData() {
-            return { search: this.search, query: { del: false, type: 'BLIND_BOX' } };
+            return { search: this.search, query: { del: false, type: 'BLIND_BOX', minterId: this.minterId } };
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;

src/main/vue/src/views/CollectionList.vue

@@ -21,6 +21,8 @@
             </el-button> -->
         </page-title>
         <div class="filters-container">
+            <created-at-picker v-model="createdAt" @input="getData" name="创建" style="margin-right:10px"></created-at-picker>
+            <minter-filter v-model="minterId" @input="getData"></minter-filter>
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -148,7 +150,9 @@ export default {
                 { label: '转让', value: 'TRANSFER' }
             ],
             sort: { sort: 'desc' },
-            sortStr: 'sort,desc'
+            sortStr: 'sort,desc',
+            createdAt: '',
+            minterId: ''
         };
     },
     computed: {
@@ -174,7 +178,7 @@ export default {
         beforeGetData() {
             return {
                 search: this.search,
-                query: { del: false, source: 'OFFICIAL' }
+                query: { del: false, source: 'OFFICIAL', createdAt: this.createdAt, minterId: this.minterId }
             };
         },
         toggleMultipleMode(multipleMode) {

src/main/vue/src/views/CouponList.vue

@@ -21,6 +21,7 @@
             </el-button> -->
         </page-title>
         <div class="filters-container">
+            <created-at-picker v-model="expiration" @input="getData" name="到期" style="margin-right: 10px"></created-at-picker>
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -99,7 +100,8 @@ export default {
             multipleMode: false,
             search: '',
             url: '/coupon/all',
-            downloading: false
+            downloading: false,
+            expiration: ''
         };
     },
     computed: {
@@ -109,7 +111,7 @@ export default {
     },
     methods: {
         beforeGetData() {
-            return { search: this.search, query: { del: false } };
+            return { search: this.search, query: { del: false, expiration: this.expiration } };
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;

src/main/vue/src/views/OrderList.vue

@@ -21,7 +21,7 @@
             </el-button>
         </page-title>
         <div class="filters-container">
-            <el-select v-model="status" placeholder="筛选状态" clearable @change="getData">
+            <el-select v-model="status" placeholder="筛选状态" clearable @change="getData" style="margin-right: 10px">
                 <el-option
                     v-for="item in statusOptions"
                     :key="item.value"
@@ -29,6 +29,7 @@
                     :label="item.label"
                 ></el-option>
             </el-select>
+            <created-at-picker v-model="createdAt" @input="getData" name="下单" style="margin-right:10px"></created-at-picker>
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -129,7 +130,8 @@ export default {
                 { label: '微信', value: 'WEIXIN' },
                 { label: '支付宝', value: 'ALIPAY' }
             ],
-            status: null
+            status: null,
+            createdAt: ''
         };
     },
     computed: {
@@ -153,7 +155,7 @@ export default {
             return '';
         },
         beforeGetData() {
-            return { search: this.search, query: { del: false, status: this.status } };
+            return { search: this.search, query: { del: false, status: this.status, createdAt: this.createdAt } };
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;