Skip to content

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

修改提成数据

parent daac12bf
Hide whitespace changes
Inline Side-by-side
Showing with 493 additions and 474 deletions
src/components/administrative/CommissionDetail.vue
View file @ 8df9c3cf
<template> <template>
<div class="commissionDetails commissionDetails-box"> <div class="commissionDetails commissionDetails-box">
<div class="query-box"> <div class="query-box">
<ul> <ul>
<li> <li>
<input type="button" class="normalBtn" value="导出" @click="exportExcel"> <input type="button" class="normalBtn" value="导出" @click="exportExcel">
</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'
var FileSaver = require('file-saver') var FileSaver = require('file-saver')
export default { export default {
data() { data() {
return { 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: "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,
currentPage: 1, currentPage: 1,
columns: [], columns: [],
remoteLoading: false, remoteLoading: false,
total: 0, total: 0,
dataList: [], dataList: [],
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: {
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.otherMoney.toFixed(2),
'额外扣除':x.backMoney.toFixed(2),
'应发提成':x.sumMoney.toFixed(2),
'收客数':x.peopleCount,
'单签证人数':x.visaPeopleCount,
'所属期数':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){
let data = JSON.parse(JSON.stringify(this.dataListTwo))
let dataListTwo = JSON.parse(JSON.stringify(this.dataListTwo))
if (filters.bName!='' && filters.bName!='__all__'){
data = data.filter(item => item.bName.indexOf(filters.bName)!=-1);
}
if (filters.departmentName!=''){
data = data.filter(item => item.departmentName.indexOf(filters.departmentName)!=-1);
}
if (filters.createByStr!=''){
data = data.filter(item => item.createByStr.indexOf(filters.createByStr)!=-1);
}
if ((filters.bName === '' || filters.bName==='__all__') && filters.departmentName === '' && filters.createByStr === ''){
data = dataListTwo
}
this.dataList = data
},
customCompFunc(params) {
if (params.type === "see") {
this.getInfo(params.data)
}
}, },
getCompanyList() { methods: {
//获取公司列表 exportExcel() {
this.apipost( const defaultCellStyle = {
"admin_get_BranchGetList", '!cols': [{
this.getCompanyMsg, wpx: 60
res => { }, {
if (res.data.resultCode == 1) { wpx: 200
let data = res.data.data; }, {
data.forEach(x => { wpx: 60
x.disabled = false; }, {
}); wpx: 150
if(this.userInfo.RB_Branch_id!=0){ }, {
this.CompanyList = data.filter(x=>{ wpx: 60
if(x.BName==this.userInfo.BranchName){ }]
return x };
}else const wopts = {
return false bookType: 'xlsx',
}) bookSST: false,
}else{ type: 'binary',
this.CompanyList = data; 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.otherMoney.toFixed(2),
'额外扣除': x.backMoney.toFixed(2),
'应发提成': x.sumMoney.toFixed(2),
'收客数': x.peopleCount,
'单签证人数': x.visaPeopleCount,
'所属期数': 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;
} }
this.initColums();
} else {
}
}, },
err => {} filterMethod(filters) {
); let data = JSON.parse(JSON.stringify(this.dataListTwo))
}, let dataListTwo = JSON.parse(JSON.stringify(this.dataListTwo))
initColums() { if (filters.bName != '' && filters.bName != '__all__') {
this.isReady = false; data = data.filter(item => item.bName.indexOf(filters.bName) != -1);
let that = this; }
let companyList = []; if (filters.departmentName != '') {
this.CompanyList.forEach(x => { data = data.filter(item => item.departmentName.indexOf(filters.departmentName) != -1);
let item = {}; }
item.label = x.BName; if (filters.createByStr != '') {
item.value = x.BName; data = data.filter(item => item.createByStr.indexOf(filters.createByStr) != -1);
companyList.push(item); }
}); if ((filters.bName === '' || filters.bName === '__all__') && filters.departmentName === '' && filters.createByStr === '') {
let company = {} data = dataListTwo
if(this.disabledCPSelect) { }
company = { this.dataList = data
field: "bName", },
title: "公司", customCompFunc(params) {
width: 40, if (params.type === "see") {
titleAlign: "left", this.getInfo(params.data)
columnAlign: "left", }
isResize: true, },
}; getCompanyList() {
} else { //获取公司列表
company = { this.apipost(
field: "bName", "admin_get_BranchGetList",
title: "公司", this.getCompanyMsg,
width: 40, res => {
titleAlign: "left", if (res.data.resultCode == 1) {
columnAlign: "left", let data = res.data.data;
isResize: true, data.forEach(x => {
result: "", x.disabled = false;
filterMultiple: false, });
filters: companyList, if (this.userInfo.RB_Branch_id != 0) {
type: "select" this.CompanyList = data.filter(x => {
}; if (x.BName == this.userInfo.BranchName) {
} return x
let department = { } else
field: "departmentName", return false
title: "部门", })
width: 80, } else {
titleAlign: "left", this.CompanyList = data;
columnAlign: "left", }
isResize: true, this.initColums();
result: "", } else {}
filterMultiple: false, },
filters: companyList, err => {}
type: "text" );
}; },
let userName = { initColums() {
field: "createByStr", this.isReady = false;
title: "姓名", let that = this;
titleAlign: "left", let companyList = [];
columnAlign: "left", this.CompanyList.forEach(x => {
isResize: true, let item = {};
width: 80, item.label = x.BName;
formatter: function(rowData, rowIndex, pagingIndex, field) { item.value = x.BName;
if(rowData.leaveStr&&rowData.leaveStr!='') companyList.push(item);
return `<div>${rowData.createByStr}<span style="color:red;display:inline-block">(${rowData.leaveStr})</span></div>` });
else let company = {}
return `<div>${rowData.createByStr}</div>` if (this.disabledCPSelect) {
} company = {
}; field: "bName",
let commissionMoney = { title: "公司",
field: "commissionMoney", width: 40,
title: "提成金额", titleAlign: "left",
titleAlign: "left", columnAlign: "left",
columnAlign: "left", isResize: true,
isResize: true, };
width: 80, } else {
orderBy: "", company = {
formatter: function(rowData, rowIndex, pagingIndex, field) { field: "bName",
return `<span>${rowData.commissionMoney.toFixed(2)}</span>` title: "公司",
} width: 40,
}; titleAlign: "left",
let otherMoney = { columnAlign: "left",
field: "otherMoney", isResize: true,
title: "额外奖励", result: "",
titleAlign: "left", filterMultiple: false,
columnAlign: "left", filters: companyList,
isResize: true, type: "select"
width: 80, };
orderBy: "", }
formatter: function(rowData, rowIndex, pagingIndex, field) { let department = {
return `<span>${rowData.otherMoney.toFixed(2)}</span>` field: "departmentName",
} title: "部门",
}; width: 80,
let backMoney = { titleAlign: "left",
field: "backMoney", columnAlign: "left",
title: "额外扣除", isResize: true,
titleAlign: "left", result: "",
columnAlign: "left", filterMultiple: false,
isResize: true, filters: companyList,
width: 80, type: "text"
orderBy: "", };
formatter: function(rowData, rowIndex, pagingIndex, field) { let userName = {
return `<span>${rowData.backMoney.toFixed(2)}</span>` field: "createByStr",
} title: "姓名",
}; titleAlign: "left",
let sumMoney = { columnAlign: "left",
title: "应发提成", isResize: true,
field: "sumMoney", width: 80,
titleAlign: "left", formatter: function (rowData, rowIndex, pagingIndex, field) {
columnAlign: "left", if (rowData.leaveStr && rowData.leaveStr != '')
isResize: true, return `<div>${rowData.createByStr}<span style="color:red;display:inline-block">(${rowData.leaveStr})</span></div>`
width: 80, else
orderBy: "", return `<div>${rowData.createByStr}</div>`
formatter: function(rowData, rowIndex, pagingIndex, field) { }
return `<span style='color:red'>${(rowData.otherMoney+rowData.commissionMoney-rowData.backMoney).toFixed(2)}</span>` };
} let commissionMoney = {
}; field: "commissionMoney",
let peopleCount = { title: "提成金额",
field: "peopleCount", titleAlign: "left",
title: "收客人数", columnAlign: "left",
titleAlign: "left", isResize: true,
columnAlign: "left", width: 80,
isResize: true, orderBy: "",
width: 80, formatter: function (rowData, rowIndex, pagingIndex, field) {
orderBy: "", return `<span>${rowData.commissionMoney.toFixed(2)}</span>`
formatter: function(rowData, rowIndex, pagingIndex, field) { }
return `<span style='color:blue'>${rowData.peopleCount+rowData.visaPeopleCount}人</span>` };
} let otherMoney = {
}; field: "otherMoney",
let visaPeopleCount = { title: "额外奖励",
field: "visaPeopleCount", titleAlign: "left",
title: "单签证人数", columnAlign: "left",
titleAlign: "left", isResize: true,
columnAlign: "left", width: 80,
isResize: true, orderBy: "",
width: 80, formatter: function (rowData, rowIndex, pagingIndex, field) {
formatter: function(rowData, rowIndex, pagingIndex, field) { return `<span>${rowData.otherMoney.toFixed(2)}</span>`
if(rowData.visaPeopleCount>0) }
return `<span style='color:orange'>${rowData.visaPeopleCount}人</span>` };
else let backMoney = {
return '' field: "backMoney",
} title: "额外扣除",
}; titleAlign: "left",
let periods = { columnAlign: "left",
field: "periods", isResize: true,
title: "期数", width: 80,
titleAlign: "left", orderBy: "",
columnAlign: "left", formatter: function (rowData, rowIndex, pagingIndex, field) {
isResize: true, return `<span>${rowData.backMoney.toFixed(2)}</span>`
width: 80, }
formatter: function(rowData, rowIndex, pagingIndex, field) { };
if(rowData.periods!=that.stringPerons) let sumMoney = {
return `<div style='height:40px;line-height:40px;color:#f1f1f1;background: red;margin: 0 -5px;;padding-left: 10px;'>${rowData.periods}</div>` title: "应发提成",
else field: "sumMoney",
return rowData.periods titleAlign: "left",
} columnAlign: "left",
}; isResize: true,
let remark = { width: 80,
field: "remark", orderBy: "",
title: "销售留言", formatter: function (rowData, rowIndex, pagingIndex, field) {
titleAlign: "left", return `<span style='color:red'>${(rowData.otherMoney+rowData.commissionMoney-rowData.backMoney).toFixed(2)}</span>`
columnAlign: "left", }
isResize: true, };
width: 200, let peopleCount = {
formatter: function(rowData, rowIndex, pagingIndex, field) { field: "peopleCount",
if(rowData.remark) title: "收客人数",
return `<div class="outDiv"> titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
orderBy: "",
formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span style='color:blue'>${rowData.peopleCount}人</span>`
}
};
let visaPeopleCount = {
field: "visaPeopleCount",
title: "单签证人数",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
formatter: function (rowData, rowIndex, pagingIndex, field) {
if (rowData.visaPeopleCount > 0)
return `<span style='color:orange'>${rowData.visaPeopleCount}人</span>`
else
return ''
}
};
let periods = {
field: "periods",
title: "期数",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
formatter: function (rowData, rowIndex, pagingIndex, field) {
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>`
else
return rowData.periods
}
};
let remark = {
field: "remark",
title: "销售留言",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 200,
formatter: function (rowData, rowIndex, pagingIndex, field) {
if (rowData.remark)
return `<div class="outDiv">
<div class="toolDiv"> <div class="toolDiv">
<div class="triangle_border_up"> <div class="triangle_border_up">
</div>${rowData.remark}</div>${rowData.remark}</div>` </div>${rowData.remark}</div>${rowData.remark}</div>`
else else
return '' 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(otherMoney);
this.columns.push(backMoney);
this.columns.push(sumMoney);
this.columns.push(peopleCount);
this.columns.push(visaPeopleCount);
this.columns.push(periods);
this.columns.push(remark);
this.columns.push(opera);
this.isReady = true;
},
sortChange(param) {
if(param.sumMoney==''){
if(param.BName!=''){
this.msg.OrderStr='RB_Branch_Id '+param.bName
}
if(param.commissionMoney!=''){
this.msg.OrderStr='CommissionMoney '+param.commissionMoney
}
if(param.peopleCount!=''){
this.msg.OrderStr='PeopleCount '+param.peopleCount
}
if(param.backMoney!=''){
this.msg.OrderStr='BackMoney '+param.backMoney
}
if(param.otherMoney!=''){
this.msg.OrderStr='OtherMoney '+param.otherMoney
}
this.getList();
}else{
let d=JSON.parse(JSON.stringify(this.dataList))
this.dataList = this.orderBy(d, ["sumMoney"], param.sumMoney).results;
}
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList() {
this.loading = true;
if(this.userInfo.RB_Branch_id!=0){
this.msg.RB_Branch_Id=this.userInfo.RB_Branch_id
}
this.apipost( }
"sellcommission_GetDetailsList", };
this.msg, let opera = {
res => { title: "操作",
this.loading = false; titleAlign: "left",
if (res.data.resultCode == 1) { columnAlign: "left",
this.dataList = res.data.data.pageData; width: 80,
this.total = res.data.data.count; isResize: false,
this.dataList.forEach(x=>{ componentName: "commission-table-operation"
x.sumMoney=x.commissionMoney+x.otherMoney-x.backMoney };
}) this.columns = [];
this.dataListTwo = JSON.parse(JSON.stringify(this.dataList)) this.columns.push(company);
} else { this.columns.push(department);
this.Error(res.data.message); this.columns.push(userName);
} this.columns.push(commissionMoney);
this.columns.push(otherMoney);
this.columns.push(backMoney);
this.columns.push(sumMoney);
this.columns.push(peopleCount);
this.columns.push(visaPeopleCount);
this.columns.push(periods);
this.columns.push(remark);
this.columns.push(opera);
this.isReady = true;
}, },
null sortChange(param) {
); if (param.sumMoney == '') {
}, if (param.BName != '') {
//切换排序 this.msg.OrderStr = 'RB_Branch_Id ' + param.bName
handleClick(tab, event) { }
if (this.activeName == "first") { if (param.commissionMoney != '') {
// this.commonName='姓名' this.msg.OrderStr = 'CommissionMoney ' + param.commissionMoney
this.msg.OrderStr = "UserId"; }
} else { if (param.peopleCount != '') {
// this.commonName='公司名' this.msg.OrderStr = 'PeopleCount ' + param.peopleCount
this.msg.OrderStr = "RB_Branch_Id"; }
} if (param.backMoney != '') {
this.getList(); this.msg.OrderStr = 'BackMoney ' + param.backMoney
}, }
//跳转 if (param.otherMoney != '') {
getInfo(item) { this.msg.OrderStr = 'OtherMoney ' + param.otherMoney
var dateStr = item.periods; }
var year = dateStr.substring(0, 4); this.getList();
var month = dateStr.substring(4, 6); } else {
let d = JSON.parse(JSON.stringify(this.dataList))
this.dataList = this.orderBy(d, ["sumMoney"], param.sumMoney).results;
}
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList() {
this.loading = true;
if (this.userInfo.RB_Branch_id != 0) {
this.msg.RB_Branch_Id = this.userInfo.RB_Branch_id
}
this.apipost(
"sellcommission_GetDetailsList",
this.msg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count;
this.dataList.forEach(x => {
x.sumMoney = x.commissionMoney + x.otherMoney - x.backMoney
})
this.dataListTwo = JSON.parse(JSON.stringify(this.dataList))
} else {
this.Error(res.data.message);
}
},
null
);
},
//切换排序
handleClick(tab, event) {
if (this.activeName == "first") {
// this.commonName='姓名'
this.msg.OrderStr = "UserId";
} else {
// this.commonName='公司名'
this.msg.OrderStr = "RB_Branch_Id";
}
this.getList();
},
//跳转
getInfo(item) {
var dateStr = item.periods;
var year = dateStr.substring(0, 4);
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,
blank:'y' blank: 'y'
}
});
} }
}); },
} mounted() {
}, this.msg.pageSize = 10000; //不分页
mounted() { this.msg.ParentId = this.$route.query.ParentId;
this.msg.pageSize = 10000; //不分页 if (this.$route.query.companyID) {
this.msg.ParentId = this.$route.query.ParentId; this.companyID = this.$route.query.companyID;
if(this.$route.query.companyID) { this.msg.RB_Branch_Id = this.$route.query.companyID;
this.companyID = this.$route.query.companyID; this.msg.Periods = this.$route.query.periods;
this.msg.RB_Branch_Id = this.$route.query.companyID; this.disabledCPSelect = true
this.msg.Periods = this.$route.query.periods;
this.disabledCPSelect = true
}
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.userInfo = this.getLocalStorage();
this.getList();
this.getCompanyList();
},
created(){
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>`,
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);
} }
} 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.userInfo = this.getLocalStorage();
this.getList();
this.getCompanyList();
},
created() {
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>`,
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> <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 {
display: block;
} }
.commissionDetails .v-table-body-cell:hover .outDiv .toolDiv{ .commissionDetails .v-table-body-cell {
display: block; overflow: initial;
cursor: pointer;
} }
.commissionDetails .v-table-body-cell{
overflow: initial; .commissionDetails .toolDiv {
cursor: pointer; position: absolute;
top: 25px;
background: #303133;
color: #fff;
z-index: 20000;
padding: 4px 15px;
max-width: 220px;
white-space: normal;
border-radius: 4px;
word-wrap: break-word;
display: none;
} }
.commissionDetails .toolDiv{
position: absolute; .commissionDetails .outDiv {
top: 25px; position: relative;
background: #303133;
color: #fff;
z-index: 20000;
padding: 4px 15px;
max-width: 220px;
white-space: normal;
border-radius: 4px;
word-wrap:break-word;
display: none;
} }
.commissionDetails .outDiv{
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