<template>
|
<!--
|
作者：luoyiming
|
时间：2020-06-01
|
描述：插件中心-分销-分销订单
|
-->
|
<div class="user">
|
<div class="common-seach-wrap">
|
<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="结算时间">
|
<el-date-picker
|
size="small"
|
style="margin-right: 15px;"
|
v-model="year"
|
type="year"
|
@change="chooseYear"
|
format="yyyy年"
|
value-format="yyyy"
|
placeholder="选择年">
|
</el-date-picker>
|
<el-date-picker
|
size="small"
|
style="margin-right: 15px;"
|
v-model="month"
|
type="month"
|
:default-value="choose"
|
@change="chooseMonth"
|
format="M月"
|
value-format="M"
|
placeholder="选择月">
|
</el-date-picker>
|
<div class="bonus-time-select">
|
<el-select @change="changeWeek" size="small" clearable placeholder="选择周" v-model="week">
|
<el-option key="1" label="第一周" value="1"></el-option>
|
<el-option key="2" label="第二周" value="2"></el-option>
|
<el-option key="3" label="第三周" value="3"></el-option>
|
<el-option key="4" label="第四周" value="4"></el-option>
|
</el-select>
|
<!-- <div class="date-icon">
|
<i class="el-input__icon el-icon-date"></i>
|
</div> -->
|
</div>
|
</el-form-item>
|
<!-- <el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item> -->
|
</el-form>
|
</div>
|
|
<!--添加等级-->
|
<div class="common-level-rail">
|
<el-button size="small" type="primary" @click="addClick" icon="el-icon-plus">新增结算</el-button>
|
</div>
|
|
<!--内容-->
|
<div class="product-content">
|
<div class="table-wrap">
|
<el-table :data="tableData" size="small" border style="width: 100%" v-loading="loading">
|
<el-table-column label="结算周期" width="400">
|
<template slot-scope="scope">
|
<div flex="dir:left cross:center">
|
<el-tag size="small">{{scope.row.bonus_type.text}}</el-tag>
|
<div>{{scope.row.start_time}}~{{scope.row.end_time}}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="order_num" label="订单数"></el-table-column>
|
<el-table-column prop="price" label="分红金额" width="350">
|
<template slot-scope="scope">
|
<div>￥{{scope.row.bonus_price}}({{scope.row.bonus_rate}}%分红比例)</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="股东数" prop="shareholder_num"></el-table-column>
|
<el-table-column label="创建时间" prop="create_time" width="250"></el-table-column>
|
<el-table-column fixed="right" label="操作" width="130">
|
<template slot-scope="scope" v-if="!scope.row.is_top_row">
|
<el-button @click="openDetail(scope.row)" type="text" size="small" v-auth="'/plus/shareholder/bonus/detail'">详情
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!--分页-->
|
<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>
|
<!--新增结算-->
|
<Add :open_add="open_add" :userModel="userModel" @close="closeAddFunc"></Add>
|
<!--查看结算明细-->
|
<BonusLog :open_dialog="open_dialog" :userModel="userModel" @close="closeFunc"></BonusLog>
|
</div>
|
</template>
|
|
<script>
|
import PlusApi from '@/api/plus/shareholder.js';
|
import Add from './dialog/Add.vue';
|
import BonusLog from './dialog/BonusLog.vue';
|
export default {
|
components: {
|
Add,
|
BonusLog
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loading: true,
|
/*列表数据*/
|
tableData: [],
|
/*一页多少条*/
|
pageSize: 20,
|
/*一共多少条数据*/
|
totalDataNumber: 0,
|
/*当前是第几页*/
|
curPage: 1,
|
formInline: {
|
is_settled: '-1',
|
/*用户ID*/
|
user_id: ''
|
},
|
/*是否打开新增结算弹窗*/
|
open_add: false,
|
/*当前编辑的对象*/
|
userModel: {},
|
start_date: '',
|
end_date: '',
|
year: '',
|
month: '',
|
week: '',
|
nowYear: '',
|
nowMonth: '',
|
choose: '',
|
open_dialog: false
|
};
|
},
|
props: {},
|
watch: {
|
$route(to, from) {
|
if (to.query.user_id != null) {
|
this.formInline.user_id = to.query.user_id;
|
} else {
|
this.formInline.user_id = '';
|
}
|
this.curPage = 1;
|
this.getData();
|
}
|
},
|
created() {
|
let date = new Date();
|
this.nowYear = date.getFullYear();
|
this.nowMonth = date.getMonth() + 1;
|
/*获取列表*/
|
this.getData();
|
},
|
methods: {
|
/*选择第几页*/
|
handleCurrentChange(val) {
|
let self = this;
|
self.curPage = val;
|
self.loading = true;
|
self.getData();
|
},
|
|
/*获取数据*/
|
getData() {
|
let self = this;
|
this.start_date = '';
|
this.end_date = '';
|
if((this.year != '' && this.year != null) || (this.month != '' && this.month != null) || (this.week != '' && this.week != null)) {
|
let firstMonth = this.month ? this.month : 1;
|
let lastMonth = this.month ? this.month : 12;
|
if(firstMonth < 10) {
|
firstMonth = '0'+firstMonth
|
}
|
if(lastMonth < 10) {
|
lastMonth = '0'+lastMonth
|
}
|
let firstDay = '01';
|
let lastDay = '31';
|
if(this.week == 1) {
|
firstDay = '01';
|
lastDay = '07';
|
}else if(this.week == 2) {
|
firstDay = '08';
|
lastDay = '14';
|
}else if(this.week == 3) {
|
firstDay = '15';
|
lastDay = '21';
|
}else if(this.week == 4) {
|
firstDay = '22';
|
lastDay = '31';
|
}
|
this.start_date = this.year + '-' + firstMonth + '-' + firstDay;
|
this.end_date = this.year + '-' + lastMonth + '-' + lastDay;
|
}
|
let Params = {
|
page: self.curPage,
|
start_date: this.start_date,
|
end_date: this.end_date,
|
};
|
|
PlusApi.shareholderBonus(Params, true)
|
.then(data => {
|
self.loading = false;
|
self.tableData = data.data.list.data;
|
self.totalDataNumber = data.data.list.total;
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
//搜索
|
onSubmit() {
|
let self = this;
|
self.loading = true;
|
self.is_settled = self.formInline.is_settled;
|
self.getData();
|
},
|
|
/*每页多少条*/
|
handleSizeChange(val) {
|
this.curPage = 1;
|
this.pageSize = val;
|
this.getData();
|
},
|
|
/*打开清单弹窗*/
|
openDetail(e){
|
this.userModel=e;
|
this.open_dialog=true;
|
},
|
|
/*关闭清单弹窗*/
|
closeFunc(){
|
this.open_dialog=false;
|
},
|
|
/*打开新增结算弹窗*/
|
addClick(){
|
this.userModel= {};
|
this.open_add=true;
|
},
|
|
/*关闭新增结算弹窗*/
|
closeAddFunc(e){
|
this.open_add=false;
|
if(e.type=='success'){
|
this.getData();
|
}
|
},
|
chooseYear(e) {
|
this.choose = e;
|
if(e != null && !(this.week != '' && this.week != null && this.month == null)) {
|
this.getData();
|
}else if(e == null && (this.week == null || this.week == '') && (this.month == null || this.month == '')) {
|
this.getData();
|
}
|
},
|
chooseMonth(e) {
|
let that = this;
|
if(e != null) {
|
if(that.year == '' || that.year == null) {
|
that.year = that.nowYear.toString();
|
}
|
}
|
if(that.week != '' && that.week != null && e == null) {
|
return false;
|
}
|
that.getData();
|
},
|
changeWeek(e) {
|
let that = this;
|
if(e != null) {
|
if(that.year == '' || that.year == null) {
|
that.year = that.nowYear.toString();
|
}
|
if(that.month == '' || that.month == null) {
|
that.month = that.nowMonth.toString();
|
}
|
that.getData();
|
}
|
},
|
}
|
};
|
</script>
|
|
<style scoped="">
|
.referee-name{ width: 33.333333%;}
|
|
.bonus-time-select {
|
position: relative;
|
display: inline-block;
|
}
|
|
.bonus-time-select .el-input__inner {
|
padding-left: 30px;
|
}
|
|
.bonus-time-select .date-icon {
|
position: absolute;
|
height: 100%;
|
width: 25px;
|
left: 5px;
|
top: 0;
|
color: #C0C4CC;
|
}
|
|
.bonus-time-select .date-icon .el-icon-date {
|
line-height: 32px;
|
height: 100%;
|
width: 25px;
|
text-align: center;
|
}
|
</style>
|
