铸造者筛选

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,6 +16,7 @@ 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';
@@ -59,6 +60,7 @@ 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);

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

@@ -21,7 +21,8 @@
             </el-button> -->
         </page-title>
         <div class="filters-container">
-            <created-at-picker v-model="createdAt" @input="getData"></created-at-picker>
+            <created-at-picker v-model="createdAt" @input="getData" style="margin-right: 10px"></created-at-picker>
+            <minter-filter v-model="minterId" @input="getData"></minter-filter>
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -121,7 +122,8 @@ export default {
                 { label: '用户铸造', value: 'USER' },
                 { label: '转让', value: 'TRANSFER' }
             ],
-            createdAt: ''
+            createdAt: '',
+            minterId: ''
         };
     },
     computed: {
@@ -145,7 +147,10 @@ export default {
             return '';
         },
         beforeGetData() {
-            return { search: this.search, query: { del: false, type: 'BLIND_BOX', createdAt: this.createdAt } };
+            return {
+                search: this.search,
+                query: { del: false, type: 'BLIND_BOX', createdAt: this.createdAt, minterId: this.minterId }
+            };
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;

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

@@ -21,7 +21,8 @@
             </el-button> -->
         </page-title>
         <div class="filters-container">
-            <created-at-picker v-model="createdAt" @input="getData"></created-at-picker>
+            <created-at-picker v-model="createdAt" @input="getData" style="margin-right:10px"></created-at-picker>
+            <minter-filter v-model="minterId" @input="getData"></minter-filter>
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -127,9 +128,10 @@
 import { mapState } from 'vuex';
 import pageableTable from '@/mixins/pageableTable';
 import SortableHeader from '../components/SortableHeader.vue';
+import MinterSelect from '../components/MinterSelect.vue';
 
 export default {
-    components: { SortableHeader },
+    components: { SortableHeader, MinterSelect },
     name: 'CollectionList',
     mixins: [pageableTable],
     data() {
@@ -150,7 +152,8 @@ export default {
             ],
             sort: { sort: 'desc' },
             sortStr: 'sort,desc',
-            createdAt: ''
+            createdAt: '',
+            minterId: ''
         };
     },
     computed: {
@@ -174,7 +177,10 @@ export default {
             return '';
         },
         beforeGetData() {
-            return { search: this.search, query: { del: false, source: 'OFFICIAL', createdAt: this.createdAt } };
+            return {
+                search: this.search,
+                query: { del: false, source: 'OFFICIAL', createdAt: this.createdAt, minterId: this.minterId }
+            };
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;