<template>
|
<div class='man_pop'>
|
<div class="nav">
|
<span>支出明细</span>
|
<el-button type="primary" size="medium" @click="$router.go(-1)">返回</el-button>
|
</div>
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键字" style="width: 380px" >
|
<el-input style="width:280px" size="small" v-model="bar.expenditureKeyWord" placeholder="请输入操作人、备注关键词进行查找"></el-input>
|
</el-form-item>
|
<el-form-item label="金额排序">
|
<el-radio-group v-model="bar.sort" size="medium">
|
<el-radio-button label="1">升序</el-radio-button>
|
<el-radio-button label="2">降序</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item>
|
<div class="block">
|
<span class="demonstration">操作时间</span>
|
<el-date-picker
|
v-model="bar.date"
|
type="daterange"
|
range-separator="至"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch">查询</el-button>
|
<el-button @click="Reset" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="add">
|
<el-button
|
type="primary"
|
size="small"
|
@click="tradeExport"
|
>导出
|
</el-button>
|
</div>
|
<div class="tab">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
>
|
</v-tool-table>
|
</div>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
<div class="total-num">当前页总计：<span class="num">¥{{current}}</span> 合计：<span class="num">¥{{total}}</span></div>
|
</div>
|
</template>
|
|
<script>
|
import {mapState} from "vuex";
|
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
bar:{
|
expenditureKeyWord:'',
|
sort:'',
|
date:''
|
},
|
total:0,
|
current:0,
|
trs: [
|
{text: "序号", val: "index", width: "50px"},
|
{text: "支出金额", val: "amount" },
|
{text: "操作人", val: "operationUserName"},
|
{text: "备注", val: "remark"},
|
{text: "操作时间", val: "createAt"},
|
],
|
tds: [],
|
paged: {page: 0, total: 0, r: 0, limit: 10},
|
search: {},
|
};
|
},
|
|
methods: {
|
|
//查询
|
onSearch() {
|
this.paged.page = 1
|
this.init()
|
},
|
|
//充值
|
Reset() {
|
this.bar.expenditureKeyWord = "",
|
this.bar.sort = '',
|
this.bar.date = ""
|
this.onSearch()
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
tradeExport(){
|
let v = {
|
changeType:2,
|
userId:this.id,
|
expenditureKeyWord:this.bar.expenditureKeyWord,
|
sort:this.bar.sort,
|
endTime:this.bar.date?this.bar.date[1]:'',
|
startTime:this.bar.date?this.bar.date[0]:'',
|
}
|
this.$api.post('user/wallet/trade/export',v,e=>{
|
console.log(e)
|
location.href = e
|
})
|
},
|
userTotal(){
|
let v = {
|
changeType:2,
|
userId:this.id,
|
}
|
this.$api.post('user/wallet/trade/user/total',v,e=>{
|
console.log(e)
|
this.total = e
|
})
|
},
|
// 获取数据
|
init() {
|
let v = {
|
changeType:2,
|
userId:this.id,
|
expenditureKeyWord:this.bar.expenditureKeyWord,
|
sort:this.bar.sort,
|
endTime:this.bar.date?this.bar.date[1]:'',
|
startTime:this.bar.date?this.bar.date[0]:'',
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
}
|
|
this.$api.post('user/wallet/trade/page',v,e=>{
|
this.tds = e.records
|
let num = 0
|
this.tds.map((item,index)=>{
|
item.index = index+1
|
num+=item.amount
|
})
|
this.current = num
|
this.paged.total = e.total
|
})
|
},
|
},
|
created() {
|
console.log(this.$route.query.id)
|
if(this.$route.query.id){
|
this.id = this.$route.query.id
|
this.init()
|
this.userTotal()
|
}
|
},
|
mounted() {
|
this.Authorization = 'Bearer ' + demo.$session.get('token') || ''
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.man_pop {
|
overflow-y: auto;
|
.total-num{
|
.num {
|
font-size:16px;
|
font-weight: 700;
|
color: #F56C6C;
|
margin-right: 60px;
|
}
|
}
|
.tab {
|
margin-bottom: 10px;
|
}
|
}
|
.nav {
|
padding: 20px 0;
|
span {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
font-weight: 700;
|
margin-right: 30px;
|
}
|
}
|
.add {
|
text-align: right;
|
padding-bottom: 20px;
|
}
|
|
.dialog-box {
|
display: flex;
|
justify-content: center;
|
}
|
|
.text-link {
|
cursor: pointer;
|
margin-left: 20px;
|
color: #409EFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
