<template>
|
<div class="ww100">
|
<div class="cash cash_t_common cash_t_brief">
|
<div class="common-form">收支记录</div>
|
<div class="date_section">
|
<div class="mr10">
|
<!-- <el-input v-model="searchForm.search" placeholder="请输入商户名称"></el-input> -->
|
<el-autocomplete class="inline-input" v-model="searchForm.search" :fetch-suggestions="querySearch"
|
placeholder="请输入商户名称"></el-autocomplete>
|
</div>
|
<div class="block mr10">
|
<el-date-picker v-model="searchForm.start_day" type="date" placeholder="开始时间">
|
</el-date-picker>
|
</div>
|
<div class="block mr10">
|
<el-date-picker v-model="searchForm.end_day" type="date" placeholder="结束时间">
|
</el-date-picker>
|
</div>
|
<el-button @click="gotoSearch">搜索</el-button>
|
<el-button @click="gotoExport">导出</el-button>
|
</div>
|
<el-tabs v-model="searchForm.flow_type" @tab-click="handleClick">
|
<el-tab-pane label="全部" name="0"></el-tab-pane>
|
<el-tab-pane label="收入" name="10"></el-tab-pane>
|
<el-tab-pane label="支出" name="20"></el-tab-pane>
|
</el-tabs>
|
<div class="red" style="font-size: 20px; font-weight: bold;" v-if="searchForm.flow_type > 0">总金额：￥{{total_money}}元</div>
|
<template>
|
<el-table :data="tableData" stripe style="width: 100%;margin: 5px 0;">
|
<el-table-column prop="supplier" label="所属商户">
|
<template slot-scope="scope">
|
<span v-if="scope.row.supplier">{{scope.row.supplier.name}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="money" label="金额（元）"></el-table-column>
|
<el-table-column prop="type" label="收支类型">
|
<template slot-scope="scope">
|
<span v-if="scope.row.flow_type == 10" class="red">收入</span>
|
<span v-if="scope.row.flow_type == 20">支出</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="create_time" label="时间"></el-table-column>
|
<el-table-column prop="describe" label="说明"></el-table-column>
|
</el-table>
|
</template>
|
<!--分页-->
|
<div class="pagination">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
background
|
:current-page="curPage"
|
:page-size="pageSize"
|
layout="total, prev, pager, next, jumper"
|
:total="totalDataNumber"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import StatisticsApi from '@/api/statistics.js';
|
import qs from 'qs';
|
export default {
|
components:{
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loading: true,
|
/*一页多少条*/
|
pageSize: 15,
|
/*一共多少条数据*/
|
totalDataNumber: 0,
|
/*当前是第几页*/
|
curPage: 1,
|
tableData: [],
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > Date.now();
|
},
|
},
|
searchForm:{
|
search:'',
|
start_day: '',
|
end_day: '',
|
flow_type:0,
|
},
|
total_money:'',
|
restaurants: [],
|
supplier_list: [],
|
};
|
},
|
created() {
|
/*获取数据*/
|
this.getData();
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
self.loading = true;
|
let Params = self.searchForm;
|
Params.page = self.curPage;
|
Params.list_rows = self.pageSize;
|
StatisticsApi.getSupplierCash(Params, true).then(res => {
|
self.tableData = res.data.list.list.data;
|
self.totalDataNumber = res.data.list.list.total;
|
self.total_money = res.data.list.total_money;
|
self.supplier_list = res.data.supplier_list;
|
self.loading = false;
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
querySearch(queryString, cb) {
|
let self = this;
|
if (self.restaurants.length == 0) {
|
self.supplier_list.forEach((item, index) => {
|
self.restaurants.push({
|
value: item.name
|
})
|
})
|
}
|
var restaurants = this.restaurants;
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
/*切换菜单*/
|
handleClick(tab, event) {
|
let self = this;
|
self.curPage = 1;
|
self.getData();
|
},
|
/*每页多少条*/
|
handleSizeChange(val) {
|
this.curPage = 1;
|
this.pageSize = val;
|
this.getData();
|
},
|
/*选择第几页*/
|
handleCurrentChange(val) {
|
this.curPage = val;
|
this.getData();
|
},
|
gotoSearch(){
|
this.curPage = 1;
|
this.getData();
|
},
|
gotoExport: function() {
|
let baseUrl = window.location.protocol + '//' + window.location.host;
|
window.location.href = baseUrl + '/index.php/shop/statistics.supplier/export?' + qs.stringify(this.searchForm);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.cash_t_common {
|
margin-top: 15px;
|
margin-bottom: 0;
|
box-shadow: initial;
|
}
|
.cash_t_common .cash_t_title {
|
font-size: 16px;
|
font-weight: 600;
|
}
|
|
.cash_t_common .cash-header {
|
padding: 10px 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
|
.cash_t_brief .cash-header {
|
border-bottom: 0;
|
padding-bottom: 0;
|
}
|
|
.cash-header {
|
position: relative;
|
height: 42px;
|
line-height: 42px;
|
padding: 0 15px;
|
border-bottom: 1px solid #f6f6f6;
|
color: #333;
|
border-radius: 2px 2px 0 0;
|
font-size: 14px;
|
}
|
|
.cash_t_brief .cash_t_title {
|
position: relative;
|
padding-left: 10px;
|
}
|
|
.cash_t_brief .cash_t_title::before {
|
content: '';
|
display: inline-block;
|
width: 3px;
|
height: 14px;
|
background-color: #3a8ee6;
|
position: absolute;
|
left: 0;
|
top: 50%;
|
border-radius: 5px;
|
transform: translateY(-50%);
|
}
|
.date_section {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
</style>
|
