Skip to content

S
SuperMan
Commit 3bea95b2 authored by youjie's avatar youjie
Browse files
Options

跟换 table 组件

parent 801a6138
Show whitespace changes
Inline Side-by-side
Showing with 452 additions and 522 deletions
src/components/administrative/CommissionDetail.vue
View file @ 3bea95b2
<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,23 +7,105 @@ ...@@ -7,23 +7,105 @@
</li> </li>
</ul> </ul>
</div> </div>
<template v-if="isReady"> <div v-if="isReady" v-loading='loading'>
<el-table
ref="multipleTable"
:data="dataList"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column prop="bName" label="公司"></el-table-column>
<el-table-column prop="departmentName" label="部门"></el-table-column>
<el-table-column
label="姓名">
<template slot-scope="scope">
<div v-if="scope.row.leaveStr && scope.row.leaveStr != ''">{{scope.row.createByStr}}<span style="color:red;display:inline-block">({{scope.row.leaveStr}})</span></div>
<div v-else>{{scope.row.createByStr}}</div>
</template>
</el-table-column>
<el-table-column
label="提成金额">
<template slot-scope="scope">
<span>{{scope.row.commissionMoney.toFixed(2)}}</span>
</template>
</el-table-column>
<el-table-column
label="额外奖励">
<template slot-scope="scope">
<span>{{scope.row.otherMoney.toFixed(2)}}</span>
</template>
</el-table-column>
<el-table-column
label="额外扣除">
<template slot-scope="scope">
<span>{{scope.row.backMoney.toFixed(2)}}</span>
</template>
</el-table-column>
<el-table-column
label="应发提成">
<template slot-scope="scope">
<span style='color:red'>{{(scope.row.otherMoney+scope.row.commissionMoney-scope.row.backMoney).toFixed(2)}}</span>
</template>
</el-table-column>
<el-table-column
label="收客人数">
<template slot-scope="scope">
<span style='color:blue'>{{scope.row.peopleCount}}人</span>
</template>
</el-table-column>
<el-table-column
label="单签证人数">
<template slot-scope="scope">
<span style='color:orange'>{{scope.row.visaPeopleCount}}人</span>
</template>
</el-table-column>
<el-table-column
label="期数">
<template slot-scope="scope">
<div v-if="scope.row.periods != stringPerons" style='height:40px;line-height:40px;color:#f1f1f1;background: red;margin: 0 -5px;;padding-left: 10px;'>{{scope.row.periods}}</div>
<template v-else>{{scope.row.periods}}</template>
</template>
</el-table-column>
<el-table-column
label="销售留言">
<template slot-scope="scope">
<div v-if="scope.row.remark" class="outDiv">
<div class="toolDiv">
<div class="triangle_border_up">
</div>{{scope.row.remark}}</div>{{scope.row.remark}}</div>
<template v-else>''</template>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="primary" size='mini' icon="el-icon-view" circle @click="getInfo(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<!-- <div style="padding-bottom:15px">
<el-pagination background
layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
</el-pagination>
</div> -->
<!--
<v-table is-horizontal-resize column-width-drag <v-table is-horizontal-resize column-width-drag
style="width:100%" :columns="columns" :table-data="dataList" style="width:100%" :columns="columns" :table-data="dataList"
:filter-method="filterMethod" :total="total" :pageSize="msg.pageSize" :filter-method="filterMethod" :total="total" :pageSize="msg.pageSize"
:pageIndex="msg.pageIndex" :handleCurrentChange="handleCurrentChange" :pageIndex="msg.pageIndex" :handleCurrentChange="handleCurrentChange"
:multiple-sort="multipleSort" :is-loading="loading" sort-always :multiple-sort="multipleSort" :is-loading="loading" sort-always
@sort-change="sortChange" @on-custom-comp="customCompFunc"></v-table> @sort-change="sortChange" @on-custom-comp="customCompFunc"></v-table>
</template> -->
</div>
<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",
...@@ -177,6 +259,7 @@ export default { ...@@ -177,6 +259,7 @@ export default {
item.value = x.BName; item.value = x.BName;
companyList.push(item); companyList.push(item);
}); });
console.log(companyList,'-------')
let company = {} let company = {}
if (this.disabledCPSelect) { if (this.disabledCPSelect) {
company = { company = {
...@@ -201,159 +284,6 @@ export default { ...@@ -201,159 +284,6 @@ export default {
type: "select" type: "select"
}; };
} }
let department = {
field: "departmentName",
title: "部门",
width: 80,
titleAlign: "left",
columnAlign: "left",
isResize: true,
result: "",
filterMultiple: false,
filters: companyList,
type: "text"
};
let userName = {
field: "createByStr",
title: "姓名",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
formatter: function (rowData, rowIndex, pagingIndex, field) {
if (rowData.leaveStr && rowData.leaveStr != '')
return `<div>${rowData.createByStr}<span style="color:red;display:inline-block">(${rowData.leaveStr})</span></div>`
else
return `<div>${rowData.createByStr}</div>`
}
};
let commissionMoney = {
field: "commissionMoney",
title: "提成金额",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
orderBy: "",
formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span>${rowData.commissionMoney.toFixed(2)}</span>`
}
};
let otherMoney = {
field: "otherMoney",
title: "额外奖励",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
orderBy: "",
formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span>${rowData.otherMoney.toFixed(2)}</span>`
}
};
let backMoney = {
field: "backMoney",
title: "额外扣除",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
orderBy: "",
formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span>${rowData.backMoney.toFixed(2)}</span>`
}
};
let sumMoney = {
title: "应发提成",
field: "sumMoney",
titleAlign: "left",
columnAlign: "left",
isResize: true,
width: 80,
orderBy: "",
formatter: function (rowData, rowIndex, pagingIndex, field) {
return `<span style='color:red'>${(rowData.otherMoney+rowData.commissionMoney-rowData.backMoney).toFixed(2)}</span>`
}
};
let peopleCount = {
field: "peopleCount",
title: "收客人数",
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="triangle_border_up">
</div>${rowData.remark}</div>${rowData.remark}</div>`
else
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; this.isReady = true;
}, },
sortChange(param) { sortChange(param) {
...@@ -484,11 +414,11 @@ export default { ...@@ -484,11 +414,11 @@ 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;
...@@ -497,18 +427,18 @@ export default { ...@@ -497,18 +427,18 @@ export default {
/*透明 透明 灰*/ /*透明 透明 灰*/
position: absolute; position: absolute;
top: -5px; 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;
...@@ -521,19 +451,19 @@ export default { ...@@ -521,19 +451,19 @@ export default {
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 { .commissionDetails-box .el-button.is-circle {
padding: 5px !important; 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%;
} }
</style> </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