✨ 我的钱包-交易记录增加时间段检索功能
This commit is contained in:
ronger
parent
31954866d6
commit
b36c2fdcf4
186
components/common/bank/account/records.vue
Normal file
186
components/common/bank/account/records.vue
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
<template>
|
||||||
|
<el-row>
|
||||||
|
<el-col>
|
||||||
|
<h1>交易记录</h1>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="margin-bottom: 10px;">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="searchDate"
|
||||||
|
type="daterange"
|
||||||
|
align="right"
|
||||||
|
unlink-panels
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始月份"
|
||||||
|
end-placeholder="结束月份"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
@change="searchTransactionRecord">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-table
|
||||||
|
:data="records.records"
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
label="流水号"
|
||||||
|
prop="transactionNo"
|
||||||
|
width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="支付账号">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-popover
|
||||||
|
placement="left"
|
||||||
|
trigger="hover">
|
||||||
|
<el-col style="padding: 5px;">
|
||||||
|
开户银行: {{ scope.row.formBankAccountInfo.bankName }}
|
||||||
|
</el-col>
|
||||||
|
<el-col style="padding: 5px;">
|
||||||
|
银行账号: {{ scope.row.formBankAccountInfo.bankAccount }}
|
||||||
|
</el-col>
|
||||||
|
<el-col style="padding: 5px;">
|
||||||
|
所属用户: {{ scope.row.formBankAccountInfo.accountOwnerName }}
|
||||||
|
</el-col>
|
||||||
|
<el-button slot="reference" type="text">{{ scope.row.formBankAccount }}</el-button>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="收款账号">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-popover
|
||||||
|
placement="right"
|
||||||
|
trigger="hover">
|
||||||
|
<el-col style="padding: 5px;">
|
||||||
|
开户银行: {{ scope.row.toBankAccountInfo.bankName }}
|
||||||
|
</el-col>
|
||||||
|
<el-col style="padding: 5px;">
|
||||||
|
银行账号: {{ scope.row.toBankAccountInfo.bankAccount }}
|
||||||
|
</el-col>
|
||||||
|
<el-col style="padding: 5px;">
|
||||||
|
所属用户: {{ scope.row.toBankAccountInfo.accountOwnerName }}
|
||||||
|
</el-col>
|
||||||
|
<el-button slot="reference" type="text">{{ scope.row.toBankAccount }}</el-button>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="款项"
|
||||||
|
width="180"
|
||||||
|
prop="funds">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="交易时间"
|
||||||
|
width="180"
|
||||||
|
prop="transactionTime">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="金额 (巴旦木)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.formBankAccount === bankAccount" style="color: red;font-weight: bold;">
|
||||||
|
- {{ scope.row.money }}
|
||||||
|
</span>
|
||||||
|
<span v-else style="color: springgreen;font-weight: bold;"> + {{ scope.row.money }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-pagination
|
||||||
|
:hide-on-single-page="true"
|
||||||
|
@current-change="currentChange"
|
||||||
|
:current-page="records.pagination.currentPage"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:page-size="records.pagination.pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="records.pagination.total">
|
||||||
|
</el-pagination>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "records",
|
||||||
|
props: {
|
||||||
|
bankAccount: '',
|
||||||
|
records: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pickerOptions: {
|
||||||
|
shortcuts: [{
|
||||||
|
text: '本月',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setDate(1);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近 30 天',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setMonth(start.getMonth() - 1);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近三个月',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setMonth(start.getMonth() - 3);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近六个月',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setMonth(start.getMonth() - 6);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '今年至今',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date(new Date().getFullYear(), 0);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
searchDate: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
currentChange(page) {
|
||||||
|
let _ts = this;
|
||||||
|
let startDate = _ts.searchDate[0]
|
||||||
|
let endDate = _ts.searchDate[1]
|
||||||
|
let search = {
|
||||||
|
page: page,
|
||||||
|
startDate: startDate,
|
||||||
|
endDate: endDate
|
||||||
|
}
|
||||||
|
_ts.$emit('currentChange', search);
|
||||||
|
},
|
||||||
|
searchTransactionRecord(dates) {
|
||||||
|
this.$emit('searchTransactionRecord', dates);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setMonth(start.getMonth() - 1);
|
||||||
|
let searchDate = [start, end]
|
||||||
|
this.searchDate = searchDate
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row>
|
<el-row>
|
||||||
|
|
||||||
<el-col>
|
<el-col>
|
||||||
<el-col>
|
<el-col>
|
||||||
<h4>所属作品集</h4>
|
<h4>所属作品集</h4>
|
||||||
|
|||||||
172
pages/wallet.vue
172
pages/wallet.vue
@ -11,110 +11,18 @@
|
|||||||
style="font-size: 24px;">巴旦木</span>
|
style="font-size: 24px;">巴旦木</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col>
|
<el-col>
|
||||||
<h1>交易记录</h1>
|
<records :records="records" :bankAccount="bankAccount.bankAccount" @currentChange="handleCurrentChange" @searchTransactionRecord="searchTransactionRecord"></records>
|
||||||
</el-col>
|
|
||||||
<el-col style="margin-bottom: 10px;">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="searchDate"
|
|
||||||
type="daterange"
|
|
||||||
align="right"
|
|
||||||
unlink-panels
|
|
||||||
value-format="yyyy-MM-dd"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始月份"
|
|
||||||
end-placeholder="结束月份"
|
|
||||||
:picker-options="pickerOptions"
|
|
||||||
@change="searchTransactionRecord">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-col>
|
|
||||||
<el-col>
|
|
||||||
<el-table
|
|
||||||
:data="records"
|
|
||||||
style="width: 100%">
|
|
||||||
<el-table-column
|
|
||||||
label="流水号"
|
|
||||||
prop="transactionNo"
|
|
||||||
width="200">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="支付账号">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-popover
|
|
||||||
placement="right"
|
|
||||||
trigger="hover">
|
|
||||||
<el-col style="padding: 5px;">
|
|
||||||
开户银行: {{ scope.row.formBankAccountInfo.bankName }}
|
|
||||||
</el-col>
|
|
||||||
<el-col style="padding: 5px;">
|
|
||||||
银行账号: {{ scope.row.formBankAccountInfo.bankAccount }}
|
|
||||||
</el-col>
|
|
||||||
<el-col style="padding: 5px;">
|
|
||||||
所属用户: {{ scope.row.formBankAccountInfo.accountOwnerName }}
|
|
||||||
</el-col>
|
|
||||||
<el-button slot="reference" type="text">{{ scope.row.formBankAccount }}</el-button>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="收款账号">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-popover
|
|
||||||
placement="right"
|
|
||||||
trigger="hover">
|
|
||||||
<el-col style="padding: 5px;">
|
|
||||||
开户银行: {{ scope.row.toBankAccountInfo.bankName }}
|
|
||||||
</el-col>
|
|
||||||
<el-col style="padding: 5px;">
|
|
||||||
银行账号: {{ scope.row.toBankAccountInfo.bankAccount }}
|
|
||||||
</el-col>
|
|
||||||
<el-col style="padding: 5px;">
|
|
||||||
所属用户: {{ scope.row.toBankAccountInfo.accountOwnerName }}
|
|
||||||
</el-col>
|
|
||||||
<el-button slot="reference" type="text">{{ scope.row.toBankAccount }}</el-button>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="款项"
|
|
||||||
width="180"
|
|
||||||
prop="funds">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="交易时间"
|
|
||||||
width="180"
|
|
||||||
prop="transactionTime">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="金额 (巴旦木)">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span v-if="scope.row.formBankAccount === bankAccount.bankAccount" style="color: red;font-weight: bold;">
|
|
||||||
- {{ scope.row.money }}
|
|
||||||
</span>
|
|
||||||
<span v-else style="color: springgreen;font-weight: bold;"> + {{ scope.row.money }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-col>
|
|
||||||
<el-col>
|
|
||||||
<el-pagination
|
|
||||||
:hide-on-single-page="true"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
:current-page="pagination.currentPage"
|
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
|
||||||
:page-size="pagination.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="pagination.total">
|
|
||||||
</el-pagination>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex';
|
import {mapState} from 'vuex';
|
||||||
|
import Records from "../components/common/bank/account/records";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "wallet",
|
name: "wallet",
|
||||||
|
components: {Records},
|
||||||
fetch({store, error}) {
|
fetch({store, error}) {
|
||||||
return Promise.all([
|
return Promise.all([
|
||||||
store
|
store
|
||||||
@ -128,80 +36,21 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
bankAccount: state => state.wallet.detail.data,
|
bankAccount: state => state.wallet.detail.data,
|
||||||
records: state => state.wallet.list.data.records,
|
records: state => state.wallet.list.data
|
||||||
pagination: state => state.wallet.list.data.pagination
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pickerOptions: {
|
|
||||||
shortcuts: [{
|
|
||||||
text: '本月',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setDate(1);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: '最近 30 天',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setMonth(start.getMonth() - 1);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: '最近三个月',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setMonth(start.getMonth() - 3);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: '最近六个月',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setMonth(start.getMonth() - 6);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: '今年至今',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date(new Date().getFullYear(), 0);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
searchDate: []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSizeChange(pageSize) {
|
handleCurrentChange(search) {
|
||||||
let _ts = this;
|
let _ts = this;
|
||||||
let startDate = _ts.searchDate[0]
|
|
||||||
let endDate = _ts.searchDate[1]
|
|
||||||
_ts.$store.dispatch('wallet/fetchTransactionRecordList', {
|
_ts.$store.dispatch('wallet/fetchTransactionRecordList', {
|
||||||
idUser: _ts.$store.state.oauth.idUser,
|
idUser: _ts.$store.state.oauth.idUser,
|
||||||
startDate: startDate,
|
startDate: search.startDate,
|
||||||
endDate: endDate,
|
endDate: search.endDate,
|
||||||
page: _ts.pagination.currentPage,
|
page: search.page
|
||||||
rows: pageSize
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCurrentChange(page) {
|
|
||||||
let _ts = this;
|
|
||||||
let startDate = _ts.searchDate[0]
|
|
||||||
let endDate = _ts.searchDate[1]
|
|
||||||
_ts.$store.dispatch('wallet/fetchTransactionRecordList', {
|
|
||||||
idUser: _ts.$store.state.oauth.idUser,
|
|
||||||
startDate: startDate,
|
|
||||||
endDate: endDate,
|
|
||||||
page: page,
|
|
||||||
rows: _ts.pagination.pageSize
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
searchTransactionRecord(dates) {
|
searchTransactionRecord(dates) {
|
||||||
@ -217,11 +66,6 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.commit('setActiveMenu', 'wallet');
|
this.$store.commit('setActiveMenu', 'wallet');
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setMonth(start.getMonth() - 1);
|
|
||||||
let searchDate = [start, end]
|
|
||||||
this.searchDate = searchDate
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -58,7 +58,7 @@ export const actions = {
|
|||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获取账户详情
|
// 获取账户交易记录
|
||||||
fetchTransactionRecordList({commit}, params = {}) {
|
fetchTransactionRecordList({commit}, params = {}) {
|
||||||
commit('updateTransactionRecordListFetching', true)
|
commit('updateTransactionRecordListFetching', true)
|
||||||
return this.$axios
|
return this.$axios
|
||||||
@ -66,7 +66,8 @@ export const actions = {
|
|||||||
params: {
|
params: {
|
||||||
idUser: params.idUser,
|
idUser: params.idUser,
|
||||||
startDate: params.startDate,
|
startDate: params.startDate,
|
||||||
endDate: params.endDate
|
endDate: params.endDate,
|
||||||
|
page: params.page || 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user