|
|
|
<template>
|
|
|
|
<div class="stat-shop">
|
|
|
|
<layout-body>
|
|
|
|
<p slot="title">服务费账单</p>
|
|
|
|
<layout-filter class="box-filter" :inline="true" :col="1">
|
|
|
|
<filter-item :label="filters.dateRange.label">
|
|
|
|
<Date-picker v-model="filters.dateRange.model" type="datetimerange"
|
|
|
|
:placeholder="filters.dateRange.label" format="yyyy-MM-dd" @on-change="dateRange">
|
|
|
|
</Date-picker>
|
|
|
|
<div class="quick">
|
|
|
|
<a href="javascript:;" @click="() => { changeLimit(0); }">今日</a>
|
|
|
|
<a href="javascript:;" @click="() => { changeLimit(1); }">昨天</a>
|
|
|
|
<a href="javascript:;" @click="() => { changeLimit(7); }">近7天</a>
|
|
|
|
<a href="javascript:;" @click="() => { changeLimit(30); }">近30天</a>
|
|
|
|
</div>
|
|
|
|
</filter-item>
|
|
|
|
<p slot="title">交易服务明细</p>
|
|
|
|
<layout-filter ref="filter" :model="filters" class="box-filter" :inline="true" :col="1">
|
|
|
|
<filter-item label="起止时间">
|
|
|
|
<Date-picker
|
|
|
|
v-model="filters.createTime.model"
|
|
|
|
type="datetimerange"
|
|
|
|
format="yyyy-MM-dd"
|
|
|
|
placeholder="选择日期和时间"
|
|
|
|
@on-change="createTimeChange"
|
|
|
|
></Date-picker>
|
|
|
|
<div class="quick">
|
|
|
|
<a
|
|
|
|
href="javascript:;"
|
|
|
|
@click="
|
|
|
|
() => {
|
|
|
|
timeFlag(1);
|
|
|
|
}
|
|
|
|
"
|
|
|
|
>今天</a
|
|
|
|
>
|
|
|
|
<a
|
|
|
|
href="javascript:;"
|
|
|
|
@click="
|
|
|
|
() => {
|
|
|
|
timeFlag(2);
|
|
|
|
}
|
|
|
|
"
|
|
|
|
>昨天</a
|
|
|
|
>
|
|
|
|
<a
|
|
|
|
href="javascript:;"
|
|
|
|
@click="
|
|
|
|
() => {
|
|
|
|
timeFlag(3);
|
|
|
|
}
|
|
|
|
"
|
|
|
|
>最近7天</a
|
|
|
|
>
|
|
|
|
<a
|
|
|
|
href="javascript:;"
|
|
|
|
@click="
|
|
|
|
() => {
|
|
|
|
timeFlag(4);
|
|
|
|
}
|
|
|
|
"
|
|
|
|
>最近30天</a
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Select v-model.trim="filters.withdrawStatus.model" :placeholder="filters.withdrawStatus.label">
|
|
|
|
<Option v-for="option in filters.withdrawStatus.options" :key="option.value" :value="option.value">{{
|
|
|
|
option.label
|
|
|
|
}}</Option>
|
|
|
|
</Select>
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Input v-model.trim="filters.targetAccount.model" :placeholder="filters.targetAccount.label" />
|
|
|
|
</div>
|
|
|
|
</filter-item>
|
|
|
|
<filter-item>
|
|
|
|
<div class="select-container">
|
|
|
|
<Input v-model.trim="filters.orderCode.model" :placeholder="filters.orderCode.label" />
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Input v-model.trim="filters.sku.model" :placeholder="filters.sku.label" />
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Input v-model.trim="filters.productName.model" :placeholder="filters.productName.label" />
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Select v-model.trim="filters.clearingType.model" :placeholder="filters.clearingType.label">
|
|
|
|
<Option v-for="option in filters.clearingType.options" :key="option.value" :value="option.value">{{
|
|
|
|
option.label
|
|
|
|
}}</Option>
|
|
|
|
</Select>
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Select v-model.trim="filters.subClearingType.model" :placeholder="filters.subClearingType.label">
|
|
|
|
<Option v-for="option in filters.subClearingType.options" :key="option.value" :value="option.value">{{
|
|
|
|
option.label
|
|
|
|
}}</Option>
|
|
|
|
</Select>
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Button type="primary" @click="search">查询</Button>
|
|
|
|
<Button type="primary" @click="reset">全部</Button>
|
|
|
|
<Button>导出</Button>
|
|
|
|
</div>
|
|
|
|
</filter-item>
|
|
|
|
</layout-filter>
|
|
|
|
<layout-tab>
|
|
|
|
<Tabs :value="activate" :animated="false" @on-click="switchTab">
|
|
|
|
<Tab-pane label="全部" name="all"></Tab-pane>
|
|
|
|
<Tab-pane :label="revenueTabLabel" name="REVENUE"></Tab-pane>
|
|
|
|
<Tab-pane :label="expendTabLabel" name="EXPEND"></Tab-pane>
|
|
|
|
</Tabs>
|
|
|
|
</layout-tab>
|
|
|
|
<layout-list>
|
|
|
|
<Table border :columns="tableCols" :data="tableData"></Table>
|
|
|
|
<Page
|
|
|
|
:total="pageData.total"
|
|
|
|
:current="pageData.current"
|
|
|
|
:page-size="pageData.pageSize"
|
|
|
|
show-total
|
|
|
|
@on-change="pageChange"
|
|
|
|
></Page>
|
|
|
|
</layout-list>
|
|
|
|
</layout-body>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
import moment from 'moment';
|
|
|
|
import { TransactionList } from './store';
|
|
|
|
import FinanceService from 'services/finance/finance-service';
|
|
|
|
import { ShopAccountList } from './store';
|
|
|
|
import moment from "moment";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return ShopAccountList.call(this);
|
|
|
|
}, watch: {
|
|
|
|
date() {
|
|
|
|
this.loadData();
|
|
|
|
return TransactionList.call(this);
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.financeService = new FinanceService();
|
|
|
|
this.search();
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
revenueTabLabel() {
|
|
|
|
return `收入`;
|
|
|
|
},
|
|
|
|
day(newDay) {
|
|
|
|
const curDay = moment().format('YYYY-MM-DD');
|
|
|
|
if (newDay === this.beginTime || !newDay) {
|
|
|
|
return;
|
|
|
|
expendTabLabel() {
|
|
|
|
return `支出`;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
filterValues() {
|
|
|
|
const values = {
|
|
|
|
pageNo: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
};
|
|
|
|
const fields = this.filters;
|
|
|
|
const keysMap = {
|
|
|
|
beginTime: 'beginTime',
|
|
|
|
endTime: 'endTime',
|
|
|
|
timeFlag: 'timeFlag',
|
|
|
|
withdrawStatus: 'withdrawStatus',
|
|
|
|
targetAccount: 'targetAccount',
|
|
|
|
orderCode: 'orderCode',
|
|
|
|
sku: 'sku',
|
|
|
|
productName: 'productName',
|
|
|
|
clearingType: 'clearingType',
|
|
|
|
subClearingType: 'subClearingType',
|
|
|
|
};
|
|
|
|
|
|
|
|
if (this.activate !== 'all') {
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
values.clearingType = ClearingTypeName2Id[this.activate];
|
|
|
|
}
|
|
|
|
this.dateRange = newDay !== this.curDay ? [newDay, curDay] : [newDay, newDay];
|
|
|
|
|
|
|
|
if (this.enableFilter) {
|
|
|
|
_.each(keysMap, (val, key) => {
|
|
|
|
values[key] = fields[val].model;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return values;
|
|
|
|
},
|
|
|
|
switchTab(name) {
|
|
|
|
this.$router.replace({
|
|
|
|
name: `finance.withdraw.transactionlist`,
|
|
|
|
query: {
|
|
|
|
tab: name,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
search() {
|
|
|
|
let params = {};
|
|
|
|
this.enableFilter = true;
|
|
|
|
params = this.filterValues();
|
|
|
|
this.list(params);
|
|
|
|
this.pageData.current = 1;
|
|
|
|
},
|
|
|
|
reset() {
|
|
|
|
let params = {};
|
|
|
|
this.enableFilter = false;
|
|
|
|
params = this.filterValues();
|
|
|
|
this.list(params);
|
|
|
|
this.pageData.current = 1;
|
|
|
|
},
|
|
|
|
dateRange(newDate) {
|
|
|
|
this.beginTime = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
|
|
|
|
this.endTime = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
|
|
|
|
this.day = (this.beginTime === this.endTime) === this.today ? '' : this.beginTime;
|
|
|
|
timeFlag(flag) {
|
|
|
|
let params = {};
|
|
|
|
this.enableFilter = false;
|
|
|
|
params = this.filterValues();
|
|
|
|
params.timeFlag = flag;
|
|
|
|
this.list(params);
|
|
|
|
this.pageData.current = 1;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
createTimeChange(time) {
|
|
|
|
if (!_.isArray(time)) {
|
|
|
|
time = time.split(' - ');
|
|
|
|
}
|
|
|
|
if ((time[0] + '').length) {
|
|
|
|
this.filters.beginTime.model = moment(time[0]).format('YYYY-MM-DD');
|
|
|
|
this.filters.endTime.model = moment(time[1]).format('YYYY-MM-DD');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
pageChange(page) {
|
|
|
|
const params = this.filterValues();
|
|
|
|
params.pageNo = page;
|
|
|
|
this.pageData.current = page;
|
|
|
|
this.list(params);
|
|
|
|
},
|
|
|
|
list(params) {
|
|
|
|
this.financeService.shopWithdrawAccountList(params).then(ret => {
|
|
|
|
this.tableData = _.get(ret, 'data.records', []);
|
|
|
|
this.pageData.total = _.get(ret, 'data.totalCount', 0);
|
|
|
|
this.pageData.current = _.get(ret, 'data.pageNo', 0) + 1;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
getDetailById(id) {
|
|
|
|
this.$router.push({
|
|
|
|
name: 'finance.withdraw.transaction-detail',
|
|
|
|
params: {
|
|
|
|
id,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
...
|
...
|
@@ -146,7 +327,9 @@ export default { |
|
|
|
|
|
|
|
.select-container {
|
|
|
|
display: inline-block;
|
|
|
|
width: 220px;
|
|
|
|
width: 200px;
|
|
|
|
margin-right: 15px;
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -154,4 +337,14 @@ export default { |
|
|
|
padding-left: 6px;
|
|
|
|
padding-right: 6px;
|
|
|
|
}
|
|
|
|
</style> |
|
|
\ No newline at end of file |
|
|
|
|
|
|
|
.action-column {
|
|
|
|
.cell-action-row {
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
