|
|
@@ -0,0 +1,393 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="royaltypg-all">
|
|
|
+ <div class="royaltypg-hand">
|
|
|
+ <el-form label-width="50px">
|
|
|
+ <div class="royaltypg-hand-search">
|
|
|
+ <el-form-item label="公司">
|
|
|
+ <el-select @change="Corporationchange" v-model="value" placeholder="请选择公司">
|
|
|
+ <el-option v-for="(iten,index) in CorporationOption" :key="index" :label="iten.companyName" :value="iten.companyId"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门">
|
|
|
+ <el-select @change="depchange" v-model="depvalue" placeholder="请选择部门">
|
|
|
+ <el-option v-for="(item,index) in depOption" :key="index" :label="item.depName" :value="item.depId"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="人员">
|
|
|
+ <el-select filterable v-model="uservalue" placeholder="请选择人员">
|
|
|
+ <el-option v-for="(item,index) in userOption" :key="index" :label="item.cnName" :value="item.id"></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>
|
|
|
+ <div style="margin-left: 10px;">
|
|
|
+ <el-button @click="ComputeRoyalties" type="primary">查 询</el-button>
|
|
|
+ <el-button @click="derivelist" type="primary">导出提成列表</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="royaltypg-table">
|
|
|
+ <el-table
|
|
|
+ height="750"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ style="width: 100%">
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="序号"
|
|
|
+ width="50">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="teamName"
|
|
|
+ label="团名"
|
|
|
+ width="400">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="visitDate"
|
|
|
+ label="结束日期"
|
|
|
+ width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{processingdate(scope.row.visitDate)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="teamLvStr"
|
|
|
+ label="级别"
|
|
|
+ width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="temp"
|
|
|
+ label="提成明细">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ title="明细"
|
|
|
+ width="700"
|
|
|
+ trigger="hover">
|
|
|
+ <div class="temp-ul">
|
|
|
+ <div class="temp-li" v-for="(item,index) in scope.row.chiArr" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="reference">{{scope.row.temp}}</span>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="price"
|
|
|
+ label="提成金额 "
|
|
|
+ width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ processingprice(scope.row.price)+ ' 元' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="numpice">
|
|
|
+ 该时间段提成总额： {{ numpices }} 元
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+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:'',
|
|
|
+ values:'',
|
|
|
+ depvalue:'',
|
|
|
+ depvalues:'',
|
|
|
+ uservalue:'',
|
|
|
+ value2:[],
|
|
|
+ CorporationOption:[],
|
|
|
+ depOption:[],
|
|
|
+ userOption:[],
|
|
|
+ tableData: [],
|
|
|
+ currentPage4: 4,
|
|
|
+ numpices:0,
|
|
|
+ multipleSelection: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //处理日期
|
|
|
+ processingdate(vals){
|
|
|
+ vals=vals+""
|
|
|
+ return vals.split(' ')[0]
|
|
|
+ },
|
|
|
+ //处理金额
|
|
|
+ processingprice(val){
|
|
|
+ if(Number(val)){
|
|
|
+ return val.toFixed(2);
|
|
|
+ }else{
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ addcost:debounce(function(){
|
|
|
+ this.cost++
|
|
|
+ console.log(this.cost)
|
|
|
+ },1000,true),
|
|
|
+ //获取公司
|
|
|
+ daraSource(){
|
|
|
+ var url = "/api/register/daraSource"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer '
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ if(res.data.code==200){
|
|
|
+ that.CorporationOption=res.data.data;
|
|
|
+ for (let i = 0; i < that.CorporationOption.length; i++) {
|
|
|
+ if(that.values==that.CorporationOption[i].companyName){
|
|
|
+ that.value=that.CorporationOption[i].companyId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.Corporationchange(that.value);
|
|
|
+ console.log(that.CorporationOption)
|
|
|
+ }else{
|
|
|
+ that.$message({
|
|
|
+ message: res.data.msg,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //导出
|
|
|
+ derivelist(){
|
|
|
+ if(this.uservalue==""||this.value2.length<=0){
|
|
|
+ this.$message({
|
|
|
+ message:"请选择查询条件",
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var url = "/api/Financial/ExportRoyaltyExcel"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer '
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ userId:that.uservalue,
|
|
|
+ startDate:that.getdate(this.value2[0]),
|
|
|
+ endDate:that.getdate(this.value2[1])
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ if(res.data.code==200){
|
|
|
+ window.open(res.data.data.url);
|
|
|
+ that.$message({
|
|
|
+ message: res.data.msg,
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ that.$message({
|
|
|
+ message: res.data.msg,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //公司切换
|
|
|
+ Corporationchange(val){
|
|
|
+ this.depOption=[];
|
|
|
+ this.depvalue='';
|
|
|
+ this.userOption=[];
|
|
|
+ this.uservalue='';
|
|
|
+ for(let i=0;i<this.CorporationOption.length;i++){
|
|
|
+ if(val==this.CorporationOption[i].companyId){
|
|
|
+ this.depOption=this.CorporationOption[i].subDep;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.depOption);
|
|
|
+ for(let j=0;j<this.depOption.length;j++){
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //部门切换
|
|
|
+ depchange(val){
|
|
|
+ this.userOption=[];
|
|
|
+ this.uservalue='';
|
|
|
+ this.QueryUserByDepart(val)
|
|
|
+ },
|
|
|
+ //获取员工
|
|
|
+ QueryUserByDepart(val){
|
|
|
+ var url = "/api/System/QueryUserByDepart"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer '
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ departId:val,
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ if(res.data.code==200){
|
|
|
+ that.userOption=res.data.data
|
|
|
+ }else{
|
|
|
+ that.$message({
|
|
|
+ message: res.data.msg,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //table 多选
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ console.log(val);
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+ //处理时间
|
|
|
+ getdate(val){
|
|
|
+ var date=new Date(val);
|
|
|
+ var y=date.getFullYear();
|
|
|
+ var m=date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1;
|
|
|
+ var d=date.getDate()<10?'0'+date.getDate():date.getDate();
|
|
|
+ return y+'-'+m+'-'+d
|
|
|
+ },
|
|
|
+ //提成结算
|
|
|
+ ComputeRoyalties(){
|
|
|
+ if(this.uservalue==""||this.value2.length<=0){
|
|
|
+ this.$message({
|
|
|
+ message:"请选择查询条件",
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.tableData=[];
|
|
|
+ var url = "/api/Financial/ComputeRoyalties"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer '
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ userId:that.uservalue,
|
|
|
+ startDate:that.getdate(this.value2[0]),
|
|
|
+ endDate:that.getdate(this.value2[1])
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ if(res.data.code==200){
|
|
|
+ that.tableData=res.data.data.resultArr;
|
|
|
+ that.numpices=res.data.data.totalPrice;
|
|
|
+ }else{
|
|
|
+ that.$message({
|
|
|
+ message: res.data.msg,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.uservalue = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
|
|
|
+ this.depvalues = JSON.parse(localStorage.getItem('userinif')).userInfo.depName;
|
|
|
+ this.values = JSON.parse(localStorage.getItem('userinif')).userInfo.companyName;
|
|
|
+ this.daraSource();
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.royaltypg-all{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.temp-li{
|
|
|
+ border-top: 1px solid #EBEEF5;
|
|
|
+ border-right: 1px solid #EBEEF5;
|
|
|
+ border-left: 1px solid #EBEEF5;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.temp-li:nth-last-child(1){
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
+}
|
|
|
+.numpice{
|
|
|
+ text-align: right;
|
|
|
+ font-size:14px ;
|
|
|
+ color: #555;
|
|
|
+}
|
|
|
+</style>
|
