feat(用户道具流水): 搜索功能参数调整
This commit is contained in:
hzj
parent
81a77fbf87
commit
e1fd24328e
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<!-- 选择内容 -->
|
||||
<div class="filter-item">
|
||||
<el-autocomplete
|
||||
v-model="listQuery.origin"
|
||||
@ -11,16 +12,21 @@
|
||||
@select="handleSelect"
|
||||
@clear="handleSelect"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="el-icon-edit el-input__icon"
|
||||
/>
|
||||
<i slot="suffix" class="el-icon-edit el-input__icon" />
|
||||
<template slot-scope="{ item }">
|
||||
<span :label="item.name">{{ item.name }}</span>
|
||||
<div :key="item.value" :value="item.value" style="font-size:12px; color:#d8d0d0">{{ item.value }}</div>
|
||||
<div
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
style="font-size:12px; color:#d8d0d0"
|
||||
>
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</div>
|
||||
|
||||
<!-- 道具ID -->
|
||||
<el-input
|
||||
v-model.trim="listQuery.propsId"
|
||||
v-number
|
||||
@ -28,13 +34,18 @@
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
|
||||
<!-- 购买人ID -->
|
||||
<div class="filter-item">
|
||||
<account-input v-model="listQuery.buyerId" placeholder="购买人ID" />
|
||||
</div>
|
||||
|
||||
<!-- 接收人ID -->
|
||||
<div class="filter-item">
|
||||
<account-input v-model="listQuery.receiverId" placeholder="接收人ID" />
|
||||
</div>
|
||||
|
||||
<!-- 时间范围 -->
|
||||
<div class="filter-item">
|
||||
<el-date-picker
|
||||
v-model="rangeDate"
|
||||
@ -46,6 +57,8 @@
|
||||
end-placeholder="创建日期结束"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 搜索按钮 -->
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
@ -54,8 +67,9 @@
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
@ -63,19 +77,46 @@
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<!-- 流水ID -->
|
||||
<!-- <el-table-column prop="id" label="流水ID" align="center" /> -->
|
||||
|
||||
<!-- 购买人 -->
|
||||
<el-table-column label="购买人" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<user-table-exhibit :user-profile="scope.row.buyerUserProfile" :query-details="true" />
|
||||
<user-table-exhibit
|
||||
:user-profile="scope.row.buyerUserProfile"
|
||||
:query-details="true"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="propsCandy" label="金额" align="center" min-width="100" />
|
||||
|
||||
<!-- 金额 -->
|
||||
<el-table-column
|
||||
prop="propsCandy"
|
||||
label="金额"
|
||||
align="center"
|
||||
min-width="100"
|
||||
/>
|
||||
|
||||
<!-- 接收人信息 -->
|
||||
<el-table-column label="接收人" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<user-table-exhibit :user-profile="scope.row.receiverUserProfile" :query-details="true" />
|
||||
<user-table-exhibit
|
||||
:user-profile="scope.row.receiverUserProfile"
|
||||
:query-details="true"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="propsOriginDesc" label="来源描述" align="center" min-width="200" />
|
||||
|
||||
<!-- 来源 -->
|
||||
<el-table-column
|
||||
prop="propsOriginDesc"
|
||||
label="来源描述"
|
||||
align="center"
|
||||
min-width="200"
|
||||
/>
|
||||
|
||||
<!-- 封面 -->
|
||||
<el-table-column label="封面" align="center" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
@ -84,14 +125,37 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="propsId" label="道具ID" align="center" min-width="200" />
|
||||
<el-table-column prop="propsName" label="道具名称" align="center" min-width="200" />
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="200">
|
||||
|
||||
<!-- 道具ID -->
|
||||
<el-table-column
|
||||
prop="propsId"
|
||||
label="道具ID"
|
||||
align="center"
|
||||
min-width="200"
|
||||
/>
|
||||
|
||||
<!-- 道具名称 -->
|
||||
<el-table-column
|
||||
prop="propsName"
|
||||
label="道具名称"
|
||||
align="center"
|
||||
min-width="200"
|
||||
/>
|
||||
|
||||
<!-- 创建时间 -->
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTime | dateFormat }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
@ -100,28 +164,28 @@
|
||||
@pagination="renderData"
|
||||
/>
|
||||
|
||||
<!-- 用户详情组件 -->
|
||||
<user-deatils-drawer
|
||||
v-if="userDeatilsDrawer"
|
||||
:user-id="thatSelectedUserId"
|
||||
@close="userDeatilsDrawer=false"
|
||||
@close="userDeatilsDrawer = false"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userPropsTable } from '@/api/user'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import { pickerOptions } from '@/constant/el-const'
|
||||
import { propsOrigins } from '@/constant/type'
|
||||
import { userPropsTable } from "@/api/user";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import { pickerOptions } from "@/constant/el-const";
|
||||
import { propsOrigins } from "@/constant/type";
|
||||
export default {
|
||||
name: 'UserPropsTable',
|
||||
name: "UserPropsTable",
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
thatRow: {},
|
||||
userDeatilsDrawer: false,
|
||||
thatSelectedUserId: '',
|
||||
thatSelectedUserId: "",
|
||||
pickerOptions,
|
||||
propsOrigins,
|
||||
list: [],
|
||||
@ -130,15 +194,15 @@ export default {
|
||||
listQuery: {
|
||||
cursor: 1,
|
||||
limit: 20,
|
||||
startCreateDate: '',
|
||||
endCreateDate: '',
|
||||
buyerAccount: '',
|
||||
receiverAccount: '',
|
||||
origin: ''
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
buyerAccount: "",
|
||||
receiverAccount: "",
|
||||
origin: ""
|
||||
},
|
||||
listLoading: true,
|
||||
rangeDate: ''
|
||||
}
|
||||
rangeDate: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
rangeDate: {
|
||||
@ -146,59 +210,68 @@ export default {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.length > 0) {
|
||||
this.listQuery.startCreateDate = newVal[0]
|
||||
this.listQuery.endCreateDate = newVal[1]
|
||||
return
|
||||
this.listQuery.startTime = newVal[0];
|
||||
this.listQuery.endTime = newVal[1];
|
||||
return;
|
||||
}
|
||||
this.listQuery.startCreateDate = ''
|
||||
this.listQuery.endCreateDate = ''
|
||||
this.listQuery.startTime = "";
|
||||
this.listQuery.endTime = "";
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.renderData(true)
|
||||
this.renderData(true);
|
||||
},
|
||||
methods: {
|
||||
handleImageUrl(row) {
|
||||
return row.propsCover ? row.propsCover : ''
|
||||
return row.propsCover ? row.propsCover : "";
|
||||
},
|
||||
renderData(isReset) {
|
||||
const that = this
|
||||
const that = this;
|
||||
if (isReset === true) {
|
||||
that.listQuery.cursor = 1
|
||||
that.listQuery.cursor = 1;
|
||||
}
|
||||
that.listLoading = true
|
||||
that.listLoading = true;
|
||||
userPropsTable(that.listQuery).then(res => {
|
||||
const { body } = res
|
||||
that.total = body.total || 0
|
||||
that.list = body.records
|
||||
that.listLoading = false
|
||||
})
|
||||
const { body } = res;
|
||||
that.total = body.total || 0;
|
||||
that.list = body.records;
|
||||
that.listLoading = false;
|
||||
});
|
||||
},
|
||||
queryUserDetails(userId) {
|
||||
this.userDeatilsDrawer = true
|
||||
this.thatSelectedUserId = userId
|
||||
this.userDeatilsDrawer = true;
|
||||
this.thatSelectedUserId = userId;
|
||||
},
|
||||
handleSearch() {
|
||||
if (this.listQuery.origin !== '') {
|
||||
const origins = this.propsOrigins.filter(this.createFilter(this.listQuery.origin))
|
||||
this.listQuery.origin = origins.length > 0 ? origins[0].value : this.listQuery.origin
|
||||
if (this.listQuery.origin !== "") {
|
||||
const origins = this.propsOrigins.filter(
|
||||
this.createFilter(this.listQuery.origin)
|
||||
);
|
||||
this.listQuery.origin =
|
||||
origins.length > 0 ? origins[0].value : this.listQuery.origin;
|
||||
}
|
||||
this.renderData(true)
|
||||
this.renderData(true);
|
||||
},
|
||||
querySearch(queryString, cb) {
|
||||
var restaurants = this.propsOrigins
|
||||
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
|
||||
cb(results)
|
||||
var restaurants = this.propsOrigins;
|
||||
var results = queryString
|
||||
? restaurants.filter(this.createFilter(queryString))
|
||||
: restaurants;
|
||||
cb(results);
|
||||
},
|
||||
handleSelect(item) {
|
||||
this.renderData(true)
|
||||
this.renderData(true);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => {
|
||||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0) || (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)
|
||||
}
|
||||
return restaurant => {
|
||||
return (
|
||||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >=
|
||||
0 ||
|
||||
restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user