oa-system/src/components/Finance/royaltypg.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  style="width:200px" @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" @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" 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:300px"
                            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 style="margin-left: 10px;" @click="ComputeRoyalties" type="primary">查 询</el-button>
                            <el-button @click="derivelist" type="primary">导出提成列表</el-button>
                            <el-button @click="RoyaltyConfirmByFin" type="primary">发送通知给国交同事进行提成确认</el-button>
                            <el-button 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="name"
                    label="本团是否亏损或无利润"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="发放月份">
                    </el-table-column> -->
                </el-table>
                <div class="numpice">
                    该时间段提成总额：&nbsp;{{ numpices }} 元
                </div>
                <!-- <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 {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:'',
            depvalue:'',
            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;
                    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;
                }
            }
        },
        //部门切换
        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'
                    });
                }
            })
        },
        //提成通知
        RoyaltyConfirmByFin(){
            var url = "/api/Financial/RoyaltyConfirmByFin"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    startData:that.getdate(this.value2[0]),
                    endData:that.getdate(this.value2[1]),
                    userId:that.uservalue,
                    deparId:that.depvalue,
                    companyId:that.value,
                    computeRoyaltiesList:that.multipleSelection,
                }
            }).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'
                    });
                }
            })
        },
    },
    mounted(){
        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>