oa-system/src/components/OP/RoyaltyRecogn.vue

<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 disabled @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 style="width:120px" disabled @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 style="width:120px" disabled 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
                            style="width:250px"
                            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 style="width:120px" filterable v-model="countersign" placeholder="请选择人员">
                                <el-option v-for="(item,index) in countersignarr" :key="index" :label="item.lable" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="80px" label="是否发放">
                            <el-select style="width:120px" filterable v-model="grant" placeholder="请选择人员">
                                <el-option v-for="(item,index) in grantarr" :key="index" :label="item.lable" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <div style="margin-left: 10px;">
                            <el-button @click="ComputeRoyalties" type="primary">查 询</el-button>
                            <!-- <el-button @click="derivelist" type="primary">导出提成列表</el-button> -->
                            <el-button @click="RoyaltyConfirmByUser" 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-column
                    prop="price"
                    label="是否确认"
                    width="80">
                    <template slot-scope="scope">
                        {{ scope.row.isConfirm==1?'已确认':'未确认'}}
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="price"
                    label="是否发放"
                    width="80">
                    <template slot-scope="scope">
                        {{ scope.row.isSeed==1?'已发放':'未发放'}}
                    </template>
                    </el-table-column>
                </el-table>
                <div class="numpice">
                    该时间段提成总额：&nbsp;{{ 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]);
                    }
                },{
                    text: '最近一年',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            cost:0,
            value:'',
            values:'',
            depvalue:'',
            depvalues:'',
            uservalue:'',
            uservalues:'',
            value2:[],
            CorporationOption:[],
            depOption:[],
            userOption:[],
            tableData: [],
            numpices:0,
            multipleSelection: [],
            countersign:-1,
            countersignarr:[
                {
                    lable:'全部',
                    value:-1
                 },
                {
                    lable:'未确认',
                    value:0
                },
                {
                    lable:'已确认',
                    value:1
                },
            ],
            grant:-1,
            grantarr:[
                {
                    lable:'全部',
                    value:-1
                },
                {
                    lable:'未发放',
                    value:0
                },
                {
                    lable:'已发放',
                    value:1
                },
            ],
        }
    },
    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;
                }
            }
            for(let j=0;j<this.depOption.length;j++){
                if(this.depvalues==this.depOption[j].depName){
                    this.depvalue=this.depOption[j].depId
                }
            }
            this.depchange(this.depvalue)
        },
        //部门切换
        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;
                    that.uservalue=that.uservalues;
                }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/QueryRoyaltyInfo"
            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]),
                    confirm:that.countersign,
                    send:that.grant
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.tableData=res.data.data.list;
                    that.numpices=res.data.data.costPrice;
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //提成确认
        RoyaltyConfirmByUser(){
            if (this.multipleSelection.length==0) {
                this.$message({
                    message:"请选中数据",
                    type: 'warning'
                });
                return
            }
            let dataarr=[];
            for(let i=0;i<this.multipleSelection.length;i++){
                dataarr.push(this.multipleSelection[i].id);
            }
            var url = "/api/Financial/RoyaltyConfirmByUser"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    data:dataarr,
                    state:1,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
    },
    created(){
    },
    mounted(){
        this.uservalues = 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;
    flex-wrap: wrap;
}
.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>