Commit 8df9c3cf authored by 罗超's avatar 罗超

修改提成数据

parent daac12bf
<template> <template>
<div class="commissionDetails commissionDetails-box"> <div class="commissionDetails commissionDetails-box">
<div class="query-box"> <div class="query-box">
<ul> <ul>
<li> <li>
...@@ -7,27 +7,11 @@ ...@@ -7,27 +7,11 @@
</li> </li>
</ul> </ul>
</div> </div>
<v-table <v-table v-if="isReady" is-horizontal-resize column-width-drag style="width:100%" :columns="columns" :table-data="dataList" :filter-method="filterMethod" :total="total" :pageSize="msg.pageSize" :pageIndex="msg.pageIndex" :handleCurrentChange="handleCurrentChange" :multiple-sort="multipleSort" :is-loading="loading" sort-always @sort-change="sortChange" @on-custom-comp="customCompFunc"></v-table>
v-if="isReady"
is-horizontal-resize
column-width-drag
style="width:100%"
:columns="columns"
:table-data="dataList"
:filter-method="filterMethod"
:total="total"
:pageSize="msg.pageSize"
:pageIndex="msg.pageIndex"
:handleCurrentChange="handleCurrentChange"
:multiple-sort="multipleSort"
:is-loading="loading"
sort-always
@sort-change="sortChange"
@on-custom-comp="customCompFunc"
></v-table>
<div style="height:20px;"> </div> <div style="height:20px;"> </div>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import XLSX from 'xlsx' import XLSX from 'xlsx'
...@@ -43,8 +27,8 @@ export default { ...@@ -43,8 +27,8 @@ export default {
pageSize: 20, pageSize: 20,
ParentId: 0, ParentId: 0,
OrderStr: "RB_Branch_Id asc", OrderStr: "RB_Branch_Id asc",
BName:-1, BName: -1,
RB_Branch_Id:-1, RB_Branch_Id: -1,
Periods: '' Periods: ''
}, },
total: 0, total: 0,
...@@ -56,42 +40,66 @@ export default { ...@@ -56,42 +40,66 @@ export default {
isReady: false, isReady: false,
multipleSort: false, multipleSort: false,
loading: true, loading: true,
CompanyList:[], CompanyList: [],
dataListTwo: [], dataListTwo: [],
stringPerons:'', stringPerons: '',
userInfo: {}, userInfo: {},
companyID: '', companyID: '',
disabledCPSelect: false disabledCPSelect: false
}; };
}, },
methods: { methods: {
exportExcel(){ exportExcel() {
const defaultCellStyle = {'!cols': [{wpx: 60}, {wpx: 200}, {wpx: 60}, {wpx: 150},{wpx:60}]}; const defaultCellStyle = {
const wopts = { bookType:'xlsx', bookSST:false, type:'binary', defaultCellStyle: defaultCellStyle, showGridLines: true}; '!cols': [{
const wb = { SheetNames: ['提成统计'], Sheets: {}, Props: {} }; wpx: 60
}, {
wpx: 200
}, {
wpx: 60
}, {
wpx: 150
}, {
wpx: 60
}]
};
const wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary',
defaultCellStyle: defaultCellStyle,
showGridLines: true
};
const wb = {
SheetNames: ['提成统计'],
Sheets: {},
Props: {}
};
let data = [] let data = []
this.dataList.forEach(x=>{ this.dataList.forEach(x => {
let obj={ let obj = {
'公司':x.bName, '公司': x.bName,
'部门':x.departmentName, '部门': x.departmentName,
'员工':x.createByStr, '员工': x.createByStr,
'提成金额':x.commissionMoney.toFixed(2), '提成金额': x.commissionMoney.toFixed(2),
'额外奖励':x.otherMoney.toFixed(2), '额外奖励': x.otherMoney.toFixed(2),
'额外扣除':x.backMoney.toFixed(2), '额外扣除': x.backMoney.toFixed(2),
'应发提成':x.sumMoney.toFixed(2), '应发提成': x.sumMoney.toFixed(2),
'收客数':x.peopleCount, '收客数': x.peopleCount,
'单签证人数':x.visaPeopleCount, '单签证人数': x.visaPeopleCount,
'所属期数':x.periods '所属期数': x.periods
} }
data.push(obj) data.push(obj)
}) })
wb.Sheets['提成统计'] = XLSX.utils.json_to_sheet(data) wb.Sheets['提成统计'] = XLSX.utils.json_to_sheet(data)
//创建二进制对象写入转换好的字节流 //创建二进制对象写入转换好的字节流
let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }) let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], {
type: "application/octet-stream"
})
FileSaver.saveAs(tmpDown, "提成统计.xls"); FileSaver.saveAs(tmpDown, "提成统计.xls");
}, },
s2ab (s) { s2ab(s) {
if (typeof ArrayBuffer !== 'undefined') { if (typeof ArrayBuffer !== 'undefined') {
var buf = new ArrayBuffer(s.length); var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf); var view = new Uint8Array(buf);
...@@ -103,19 +111,19 @@ export default { ...@@ -103,19 +111,19 @@ export default {
return buf; return buf;
} }
}, },
filterMethod(filters){ filterMethod(filters) {
let data = JSON.parse(JSON.stringify(this.dataListTwo)) let data = JSON.parse(JSON.stringify(this.dataListTwo))
let dataListTwo = JSON.parse(JSON.stringify(this.dataListTwo)) let dataListTwo = JSON.parse(JSON.stringify(this.dataListTwo))
if (filters.bName!='' && filters.bName!='__all__'){ if (filters.bName != '' && filters.bName != '__all__') {
data = data.filter(item => item.bName.indexOf(filters.bName)!=-1); data = data.filter(item => item.bName.indexOf(filters.bName) != -1);
} }
if (filters.departmentName!=''){ if (filters.departmentName != '') {
data = data.filter(item => item.departmentName.indexOf(filters.departmentName)!=-1); data = data.filter(item => item.departmentName.indexOf(filters.departmentName) != -1);
} }
if (filters.createByStr!=''){ if (filters.createByStr != '') {
data = data.filter(item => item.createByStr.indexOf(filters.createByStr)!=-1); data = data.filter(item => item.createByStr.indexOf(filters.createByStr) != -1);
} }
if ((filters.bName === '' || filters.bName==='__all__') && filters.departmentName === '' && filters.createByStr === ''){ if ((filters.bName === '' || filters.bName === '__all__') && filters.departmentName === '' && filters.createByStr === '') {
data = dataListTwo data = dataListTwo
} }
this.dataList = data this.dataList = data
...@@ -136,19 +144,18 @@ export default { ...@@ -136,19 +144,18 @@ export default {
data.forEach(x => { data.forEach(x => {
x.disabled = false; x.disabled = false;
}); });
if(this.userInfo.RB_Branch_id!=0){ if (this.userInfo.RB_Branch_id != 0) {
this.CompanyList = data.filter(x=>{ this.CompanyList = data.filter(x => {
if(x.BName==this.userInfo.BranchName){ if (x.BName == this.userInfo.BranchName) {
return x return x
}else } else
return false return false
}) })
}else{ } else {
this.CompanyList = data; this.CompanyList = data;
} }
this.initColums(); this.initColums();
} else { } else {}
}
}, },
err => {} err => {}
); );
...@@ -164,7 +171,7 @@ export default { ...@@ -164,7 +171,7 @@ export default {
companyList.push(item); companyList.push(item);
}); });
let company = {} let company = {}
if(this.disabledCPSelect) { if (this.disabledCPSelect) {
company = { company = {
field: "bName", field: "bName",
title: "公司", title: "公司",
...@@ -206,8 +213,8 @@ export default { ...@@ -206,8 +213,8 @@ export default {
columnAlign: "left", columnAlign: "left",
isResize: true, isResize: true,
width: 80, width: 80,
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
if(rowData.leaveStr&&rowData.leaveStr!='') if (rowData.leaveStr && rowData.leaveStr != '')
return `<div>${rowData.createByStr}<span style="color:red;display:inline-block">(${rowData.leaveStr})</span></div>` return `<div>${rowData.createByStr}<span style="color:red;display:inline-block">(${rowData.leaveStr})</span></div>`
else else
return `<div>${rowData.createByStr}</div>` return `<div>${rowData.createByStr}</div>`
...@@ -221,7 +228,7 @@ export default { ...@@ -221,7 +228,7 @@ export default {
isResize: true, isResize: true,
width: 80, width: 80,
orderBy: "", orderBy: "",
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span>${rowData.commissionMoney.toFixed(2)}</span>` return `<span>${rowData.commissionMoney.toFixed(2)}</span>`
} }
}; };
...@@ -233,7 +240,7 @@ export default { ...@@ -233,7 +240,7 @@ export default {
isResize: true, isResize: true,
width: 80, width: 80,
orderBy: "", orderBy: "",
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span>${rowData.otherMoney.toFixed(2)}</span>` return `<span>${rowData.otherMoney.toFixed(2)}</span>`
} }
}; };
...@@ -245,7 +252,7 @@ export default { ...@@ -245,7 +252,7 @@ export default {
isResize: true, isResize: true,
width: 80, width: 80,
orderBy: "", orderBy: "",
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span>${rowData.backMoney.toFixed(2)}</span>` return `<span>${rowData.backMoney.toFixed(2)}</span>`
} }
}; };
...@@ -257,7 +264,7 @@ export default { ...@@ -257,7 +264,7 @@ export default {
isResize: true, isResize: true,
width: 80, width: 80,
orderBy: "", orderBy: "",
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span style='color:red'>${(rowData.otherMoney+rowData.commissionMoney-rowData.backMoney).toFixed(2)}</span>` return `<span style='color:red'>${(rowData.otherMoney+rowData.commissionMoney-rowData.backMoney).toFixed(2)}</span>`
} }
}; };
...@@ -269,8 +276,8 @@ export default { ...@@ -269,8 +276,8 @@ export default {
isResize: true, isResize: true,
width: 80, width: 80,
orderBy: "", orderBy: "",
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span style='color:blue'>${rowData.peopleCount+rowData.visaPeopleCount}人</span>` return `<span style='color:blue'>${rowData.peopleCount}人</span>`
} }
}; };
let visaPeopleCount = { let visaPeopleCount = {
...@@ -280,8 +287,8 @@ export default { ...@@ -280,8 +287,8 @@ export default {
columnAlign: "left", columnAlign: "left",
isResize: true, isResize: true,
width: 80, width: 80,
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
if(rowData.visaPeopleCount>0) if (rowData.visaPeopleCount > 0)
return `<span style='color:orange'>${rowData.visaPeopleCount}人</span>` return `<span style='color:orange'>${rowData.visaPeopleCount}人</span>`
else else
return '' return ''
...@@ -294,8 +301,8 @@ export default { ...@@ -294,8 +301,8 @@ export default {
columnAlign: "left", columnAlign: "left",
isResize: true, isResize: true,
width: 80, width: 80,
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
if(rowData.periods!=that.stringPerons) if (rowData.periods != that.stringPerons)
return `<div style='height:40px;line-height:40px;color:#f1f1f1;background: red;margin: 0 -5px;;padding-left: 10px;'>${rowData.periods}</div>` return `<div style='height:40px;line-height:40px;color:#f1f1f1;background: red;margin: 0 -5px;;padding-left: 10px;'>${rowData.periods}</div>`
else else
return rowData.periods return rowData.periods
...@@ -308,8 +315,8 @@ export default { ...@@ -308,8 +315,8 @@ export default {
columnAlign: "left", columnAlign: "left",
isResize: true, isResize: true,
width: 200, width: 200,
formatter: function(rowData, rowIndex, pagingIndex, field) { formatter: function (rowData, rowIndex, pagingIndex, field) {
if(rowData.remark) if (rowData.remark)
return `<div class="outDiv"> return `<div class="outDiv">
<div class="toolDiv"> <div class="toolDiv">
<div class="triangle_border_up"> <div class="triangle_border_up">
...@@ -343,25 +350,25 @@ export default { ...@@ -343,25 +350,25 @@ export default {
this.isReady = true; this.isReady = true;
}, },
sortChange(param) { sortChange(param) {
if(param.sumMoney==''){ if (param.sumMoney == '') {
if(param.BName!=''){ if (param.BName != '') {
this.msg.OrderStr='RB_Branch_Id '+param.bName this.msg.OrderStr = 'RB_Branch_Id ' + param.bName
} }
if(param.commissionMoney!=''){ if (param.commissionMoney != '') {
this.msg.OrderStr='CommissionMoney '+param.commissionMoney this.msg.OrderStr = 'CommissionMoney ' + param.commissionMoney
} }
if(param.peopleCount!=''){ if (param.peopleCount != '') {
this.msg.OrderStr='PeopleCount '+param.peopleCount this.msg.OrderStr = 'PeopleCount ' + param.peopleCount
} }
if(param.backMoney!=''){ if (param.backMoney != '') {
this.msg.OrderStr='BackMoney '+param.backMoney this.msg.OrderStr = 'BackMoney ' + param.backMoney
} }
if(param.otherMoney!=''){ if (param.otherMoney != '') {
this.msg.OrderStr='OtherMoney '+param.otherMoney this.msg.OrderStr = 'OtherMoney ' + param.otherMoney
} }
this.getList(); this.getList();
}else{ } else {
let d=JSON.parse(JSON.stringify(this.dataList)) let d = JSON.parse(JSON.stringify(this.dataList))
this.dataList = this.orderBy(d, ["sumMoney"], param.sumMoney).results; this.dataList = this.orderBy(d, ["sumMoney"], param.sumMoney).results;
} }
}, },
...@@ -371,8 +378,8 @@ export default { ...@@ -371,8 +378,8 @@ export default {
}, },
getList() { getList() {
this.loading = true; this.loading = true;
if(this.userInfo.RB_Branch_id!=0){ if (this.userInfo.RB_Branch_id != 0) {
this.msg.RB_Branch_Id=this.userInfo.RB_Branch_id this.msg.RB_Branch_Id = this.userInfo.RB_Branch_id
} }
this.apipost( this.apipost(
...@@ -383,8 +390,8 @@ export default { ...@@ -383,8 +390,8 @@ export default {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData; this.dataList = res.data.data.pageData;
this.total = res.data.data.count; this.total = res.data.data.count;
this.dataList.forEach(x=>{ this.dataList.forEach(x => {
x.sumMoney=x.commissionMoney+x.otherMoney-x.backMoney x.sumMoney = x.commissionMoney + x.otherMoney - x.backMoney
}) })
this.dataListTwo = JSON.parse(JSON.stringify(this.dataList)) this.dataListTwo = JSON.parse(JSON.stringify(this.dataList))
} else { } else {
...@@ -424,7 +431,7 @@ export default { ...@@ -424,7 +431,7 @@ export default {
EmployeeId: userId, EmployeeId: userId,
starTime: startDay, starTime: startDay,
endTime: entDay, endTime: entDay,
blank:'y' blank: 'y'
} }
}); });
} }
...@@ -432,36 +439,39 @@ export default { ...@@ -432,36 +439,39 @@ export default {
mounted() { mounted() {
this.msg.pageSize = 10000; //不分页 this.msg.pageSize = 10000; //不分页
this.msg.ParentId = this.$route.query.ParentId; this.msg.ParentId = this.$route.query.ParentId;
if(this.$route.query.companyID) { if (this.$route.query.companyID) {
this.companyID = this.$route.query.companyID; this.companyID = this.$route.query.companyID;
this.msg.RB_Branch_Id = this.$route.query.companyID; this.msg.RB_Branch_Id = this.$route.query.companyID;
this.msg.Periods = this.$route.query.periods; this.msg.Periods = this.$route.query.periods;
this.disabledCPSelect = true this.disabledCPSelect = true
} }
let dt=new Date() let dt = new Date()
this.stringPerons=(dt.getMonth()==0?(dt.getFullYear()-1):dt.getFullYear())+''+(dt.getMonth().toString().length<2?'0':'')+(dt.getMonth()==0?12:dt.getMonth()); this.stringPerons = (dt.getMonth() == 0 ? (dt.getFullYear() - 1) : dt.getFullYear()) + '' + (dt.getMonth().toString().length < 2 ? '0' : '') + (dt.getMonth() == 0 ? 12 : dt.getMonth());
this.userInfo = this.getLocalStorage(); this.userInfo = this.getLocalStorage();
this.getList(); this.getList();
this.getCompanyList(); this.getCompanyList();
}, },
created(){ created() {
Vue.component('commission-table-operation',{ Vue.component('commission-table-operation', {
template:`<div style='border-bottom: 1px solid #e5e5e5;border-left: 1px solid #e5e5e5;width:80px;height:40px;background:#fff;text-align:center;position: relative;left:-5px;padding-top: 6px;padding-top:6px;box-sizing:border-box'><el-button type="primary" size='mini' icon="el-icon-view" circle @click="see(rowData,index)"></el-button></div>`, template: `<div style='border-bottom: 1px solid #e5e5e5;border-left: 1px solid #e5e5e5;width:80px;height:40px;background:#fff;text-align:center;position: relative;left:-5px;padding-top: 6px;padding-top:6px;box-sizing:border-box'><el-button type="primary" size='mini' icon="el-icon-view" circle @click="see(rowData,index)"></el-button></div>`,
props:{ props: {
rowData:{ rowData: {
type:Object type: Object
}, },
field:{ field: {
type:String type: String
}, },
index:{ index: {
type:Number type: Number
} }
}, },
methods:{ methods: {
see(){ see() {
let params = {type:'see',data:this.rowData}; let params = {
this.$emit('on-custom-comp',params); type: 'see',
data: this.rowData
};
this.$emit('on-custom-comp', params);
} }
} }
}) })
...@@ -469,25 +479,29 @@ export default { ...@@ -469,25 +479,29 @@ export default {
}; };
</script> </script>
<style> <style>
.commissionDetails .triangle_border_up{ .commissionDetails .triangle_border_up {
width:0; width: 0;
height:0; height: 0;
border-width:0 5px 5px; border-width: 0 5px 5px;
border-style:solid; border-style: solid;
border-color:transparent transparent #303133;/*透明 透明 灰*/ border-color: transparent transparent #303133;
position:absolute; /*透明 透明 灰*/
top:-5px; position: absolute;
top: -5px;
} }
.commissionDetails .v-table-body-cell:hover .outDiv .toolDiv{ .commissionDetails .v-table-body-cell:hover .outDiv .toolDiv {
display: block; display: block;
} }
.commissionDetails .v-table-body-cell{
.commissionDetails .v-table-body-cell {
overflow: initial; overflow: initial;
cursor: pointer; cursor: pointer;
} }
.commissionDetails .toolDiv{
.commissionDetails .toolDiv {
position: absolute; position: absolute;
top: 25px; top: 25px;
background: #303133; background: #303133;
...@@ -497,15 +511,20 @@ export default { ...@@ -497,15 +511,20 @@ export default {
max-width: 220px; max-width: 220px;
white-space: normal; white-space: normal;
border-radius: 4px; border-radius: 4px;
word-wrap:break-word; word-wrap: break-word;
display: none; display: none;
} }
.commissionDetails .outDiv{
.commissionDetails .outDiv {
position: relative; position: relative;
} }
.commissionDetails-box .el-button.is-circle{padding: 5px !important;}
.commissionDetails-box .el-button.is-circle {
padding: 5px !important;
}
.commissionDetails-box .v-table-body-cell span { .commissionDetails-box .v-table-body-cell span {
display: block; display: block;
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment