Skip to content

S
SuperMan
Commit ea6071fe authored by 罗超's avatar 罗超
Browse files
Options

调整提成详情界面功能

parent 86ce68dc
Show whitespace changes
Inline Side-by-side
Showing with 342 additions and 117 deletions
package.json
View file @ ea6071fe
{ {
"name": "vue0404", "name": "mage",
"version": "1.0.0", "version": "1.0.0",
"description": "A Vue.js project", "description": "MAGE ERP Manager",
"author": "ZK", "author": "VIITTO",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
......
src/components/administrative/CommissionDetail.vue
View file @ ea6071fe
<style>
.ComDetail_nav{margin: 20px 0 0 0 ;background-color: #f5f5f5;margin-bottom:20px;}
.ComDetail_nav li{float: left;font-size: 14px;color: #666666;padding: 15px 20px;cursor: pointer;position: relative;background-color: #f1f1f1;margin-right: 5px}
.ComDetail_nav li._active{background-color:#FFFFFF;color: #333333 }
.ComDetail_nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
.CD_orderNum{
color: #3980C8;
border-bottom: 1px dotted #3980C8;
cursor: pointer;
}
</style>
<template> <template>
<div> <div>
<!-- <ul class="ComDetail_nav clearfix"> <div style="height:20px;"> </div>
<li :class="active==1?'_active':''" @click="active=1,commonName='姓名'">按人排序</li> <div class="query-box">
<li :class="active==2?'_active':''" @click="active=2,commonName='公司名'">按公司排序</li> <ul>
</ul> --> <li>
<el-tabs v-model="activeName" @tab-click="handleClick"> <input type="button" class="normalBtn" value="导出" @click="exportExcel">
<el-tab-pane label="按人排序" name="first"></el-tab-pane> </li>
<el-tab-pane label="按公司排序" name="second"></el-tab-pane> </ul>
</el-tabs> </div>
<table border="0" cellspacing="0" cellpadding="0" class="singeRowTable"> <v-table
<tr> v-if="isReady"
<th width="300">{{commonName}}</th> is-horizontal-resize
<th>提成金额</th> column-width-drag
<th>期数</th> style="width:100%"
<th width="500">备注</th> :columns="columns"
<th>操作</th> :table-data="dataList"
</tr> :filter-method="filterMethod"
<tr v-for="item in dataList"> :total="total"
<td>{{item.createByStr}}</td> :pageSize="msg.pageSize"
<td>{{item.commissionMoney}}</td> :pageIndex="msg.pageIndex"
<td>{{item.periods}}</td> :handleCurrentChange="handleCurrentChange"
<!-- <td>{{item.ruleName}}</td> --> :multiple-sort="multipleSort"
<td></td> :is-loading="loading"
<td> sort-always
<input type="button" @click="getInfo(item)" class="normalBtn" value="详情"/> @sort-change="sortChange"
</td> @on-custom-comp="customCompFunc"
</tr> ></v-table>
</table> <div style="height:20px;"> </div>
<!-- 分页 -->
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
</el-pagination>
</div> </div>
</template> </template>
<script> <script>
export default { import Vue from 'vue'
data(){ import XLSX from 'xlsx'
return{ var FileSaver = require('file-saver')
export default {
data() {
return {
activeName: "first", activeName: "first",
commonName:'姓名', commonName: "姓名",
loading:false, loading: false,
msg:{ msg: {
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
ParentId:0, ParentId: 0,
OrderStr:'UserId' OrderStr: "RB_Branch_Id asc",
BName:-1
}, },
total:0, total: 0,
currentPage: 1, currentPage: 1,
dataList:[] columns: [],
remoteLoading: false,
total: 0,
dataList: [],
isReady: false,
multipleSort: false,
loading: true,
CompanyList:[]
};
},
methods: {
exportExcel(){
const defaultCellStyle = {'!cols': [{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 = []
this.dataList.forEach(x=>{
let obj={
'公司':x.bName,
'部门':x.departmentName,
'员工':x.createByStr,
'提成金额':x.commissionMoney.toFixed(2),
'所属期数':x.periods
}
data.push(obj)
})
wb.Sheets['提成统计'] = XLSX.utils.json_to_sheet(data)
//创建二进制对象写入转换好的字节流
let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" })
FileSaver.saveAs(tmpDown, "提成统计.xls");
},
s2ab (s) {
if (typeof ArrayBuffer !== 'undefined') {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
},
filterMethod(filters){
if(filters.bName=='')
this.msg.BName=-1
else
this.msg.BName=filters.bName
},
customCompFunc(params) {
if (params.type === "see") {
this.getInfo(params.data)
} }
},methods:{ },
getCompanyList() {
//获取公司列表
this.apipost(
"admin_get_BranchGetList",
this.getCompanyMsg,
res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
data.forEach(x => {
x.disabled = false;
});
this.CompanyList = data;
this.initColums();
} else {
}
},
err => {}
);
},
initColums() {
this.isReady = false;
let that = this;
let companyList = [];
this.CompanyList.forEach(x => {
let item = {};
item.label = x.BName;
item.value = x.Id;
companyList.push(item);
});
let company = {
field: "bName",
title: "公司",
width: 40,
titleAlign: "left",
columnAlign: "left",
isResize: true,
// filterMultiple: false,
// filters: companyList,
// result: "",
// type: "select",
orderBy: "asc"
// isFrozen:true
};
let department = {
field: "departmentName",
title: "部门",
width: 80,
titleAlign: "left",
columnAlign: "left",
isResize: true
};
let userName = {
field: "createByStr",
title: "姓名",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80
};
let commissionMoney = {
field: "commissionMoney",
title: "提成金额",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
orderBy: "",
formatter: function(rowData, rowIndex, pagingIndex, field) {
return `<span style='color:red'>${rowData.commissionMoney.toFixed(2)}</span>`
}
};
let periods = {
field: "periods",
title: "期数",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80
};
let remark = {
field: "remark",
title: "备注",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
formatter: function(rowData, rowIndex, pagingIndex, field) {
return ``;
}
};
let opera = {
title: "操作",
titleAlign: "left",
columnAlign: "left",
width: 80,
isResize: false,
componentName: "commission-table-operation"
};
this.columns = [];
this.columns.push(company);
this.columns.push(department);
this.columns.push(userName);
this.columns.push(commissionMoney);
this.columns.push(periods);
this.columns.push(remark);
this.columns.push(opera);
this.isReady = true;
},
sortChange(param) {
// if (param.Royalty != "") {
// this.msg.OrderBy = `Royalty ${param.Royalty}`;
// } else if (param.Initialbalance != "") {
// this.msg.OrderBy = `Initialbalance ${param.Initialbalance}`;
// }
// this.getList();
if(param.BName!=''){
this.msg.OrderStr='RB_Branch_Id '+param.bName
}
if(param.commissionMoney!=''){
this.msg.OrderStr='CommissionMoney '+param.commissionMoney
}
this.getList();
},
handleCurrentChange(val) { handleCurrentChange(val) {
this.msg.pageIndex = val; this.msg.pageIndex = val;
this.getList(); this.getList();
}, },
getList(){ getList() {
this.loading = true; this.loading = true;
this.apipost( this.apipost(
"sellcommission_GetDetailsList", "sellcommission_GetDetailsList",
this.msg, this.msg,
res => { res => {
this.loading = false; this.loading = false;
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;
console.log(this.dataList,'dataList'); console.log(this.dataList, "dataList");
}else{ } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}, },
...@@ -89,39 +253,100 @@ ...@@ -89,39 +253,100 @@
handleClick(tab, event) { handleClick(tab, event) {
if (this.activeName == "first") { if (this.activeName == "first") {
// this.commonName='姓名' // this.commonName='姓名'
this.msg.OrderStr = 'UserId' this.msg.OrderStr = "UserId";
}else { } else {
// this.commonName='公司名' // this.commonName='公司名'
this.msg.OrderStr = 'RB_Branch_Id' this.msg.OrderStr = "RB_Branch_Id";
} }
this.getList(); this.getList();
}, },
//跳转 //跳转
getInfo(item){ getInfo(item) {
var dateStr = item.periods; var dateStr = item.periods;
var year = dateStr.substring(0,4); var year = dateStr.substring(0, 4);
var month = dateStr.substring(4,6); var month = dateStr.substring(4, 6);
var nextMonthFirstDay=new Date(year,month,1); var nextMonthFirstDay = new Date(year, month, 1);
var oneDay=1000*60*60*24; var oneDay = 1000 * 60 * 60 * 24;
var entDay = new Date(nextMonthFirstDay-oneDay).Format("yyyy-MM-dd"); var entDay = new Date(nextMonthFirstDay - oneDay).Format("yyyy-MM-dd");
var startDay = year + '-' + month + '-' + '01'; var startDay = year + "-" + month + "-" + "01";
var userId = item.userId; var userId = item.userId;
this.$router.push({ this.$router.push({
path: 'enrollTotal', path: "enrollTotal",
query: { query: {
EmployeeId:userId, EmployeeId: userId,
starTime:startDay, starTime: startDay,
endTime:entDay, endTime: entDay
} }
}); });
} }
},mounted(){ },
mounted() {
this.msg.pageSize = 10000; //不分页
this.msg.ParentId = this.$route.query.ParentId; this.msg.ParentId = this.$route.query.ParentId;
this.getList(); this.getList();
this.getCompanyList();
},
created(){
Vue.component('commission-table-operation',{
template:`<div style='width:80px;height:40px;background:#fff;text-align:center;position: relative;left:-5px;padding-top: 6px;padding-top:6px;'><el-button type="primary" size='mini' icon="el-icon-view" circle @click="see(rowData,index)"></el-button></div>`,
props:{
rowData:{
type:Object
},
field:{
type:String
},
index:{
type:Number
} }
},
methods:{
see(){
let params = {type:'see',data:this.rowData};
this.$emit('on-custom-comp',params);
}
}
})
} }
</script>
};
</script>
<style>
.ComDetail_nav {
margin: 20px 0 0 0;
background-color: #f5f5f5;
margin-bottom: 20px;
}
.ComDetail_nav li {
float: left;
font-size: 14px;
color: #666666;
padding: 15px 20px;
cursor: pointer;
position: relative;
background-color: #f1f1f1;
margin-right: 5px;
}
.ComDetail_nav li._active {
background-color: #ffffff;
color: #333333;
}
.ComDetail_nav li._active::after {
content: "";
width: 20px;
height: 3px;
background-color: #e95252;
display: inline-block;
position: absolute;
bottom: 0;
left: 38%;
}
.CD_orderNum {
color: #3980c8;
border-bottom: 1px dotted #3980c8;
cursor: pointer;
}
</style>
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