|
@@ -1,25 +1,209 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="royaltypg-all">
|
|
|
- 提成
|
|
|
- <el-button @click="addcost" type="primary">主要按钮</el-button>
|
|
|
+ <div class="royaltypg-hand">
|
|
|
+ <el-form label-width="50px">
|
|
|
+ <div class="royaltypg-hand-search">
|
|
|
+ <el-form-item label="公司">
|
|
|
+ <el-select v-model="value" placeholder="请选择公司">
|
|
|
+ <el-option v-for="(iten,index) in corporationArr" :key="index" :label="iten.companyName" :value="iten.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门">
|
|
|
+ <el-select v-model="value" placeholder="请选择部门">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="人员">
|
|
|
+ <el-select v-model="value" placeholder="请选择人员">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value2"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="80px" label="发放统计">
|
|
|
+ <el-select v-model="value" placeholder="请选择人员">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="margin-left: 10px;">
|
|
|
+ <el-button @click="addcost" type="primary">主要按钮</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="royaltypg-table">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="序号"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="团名"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="结束日期"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="级别"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="提成明细"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="提成金额 "
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="本团是否亏损或无利润"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="发放月份">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="block">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage4"
|
|
|
+ :page-sizes="[100, 200, 300, 400]"
|
|
|
+ :page-size="100"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="400">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import {throttle} from '../../store/statice'
|
|
|
import {debounce} from '../../store/statice'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近一周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近一个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
cost:0,
|
|
|
+ value:'',
|
|
|
+ value2:[],
|
|
|
+ corporationArr:[],
|
|
|
+ tableData: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }],
|
|
|
+ currentPage4: 4
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
addcost:debounce(function(){
|
|
|
this.cost++
|
|
|
console.log(this.cost)
|
|
|
- },1000,true)
|
|
|
+ },1000,true),
|
|
|
+ //获取公司
|
|
|
+ GetAuth() {
|
|
|
+ var url = "/api/System/GetAuth"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + that.token
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ pageSize:10,
|
|
|
+ currentPage: 1,
|
|
|
+ moduleId:17
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ that.corporationArr=res.data.data.companyDataResult;
|
|
|
+ }else{
|
|
|
+ that.$message({
|
|
|
+ message:res.data.msg,
|
|
|
+ duration:1000,
|
|
|
+ type:"error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(function (error) {
|
|
|
+ that.$message.error('加载失败,稍后尝试,如若失败请联系信息部!');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.GetAuth()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -30,6 +214,22 @@ export default {
|
|
|
box-shadow: 0 0 5px #0005;
|
|
|
border-radius: 10px;
|
|
|
height: 100%;
|
|
|
+
|
|
|
min-height: 830px;
|
|
|
}
|
|
|
+.royaltypg-hand-search{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+}
|
|
|
+.royaltypg-hand-search .el-form-item{
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+}
|
|
|
+.royaltypg-table{
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.royaltypg-all .block{
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
</style>
|