oa-system/src/components/Finance/Payroll.vue

<template>
    <div>
        <div class="payroll-all">
            <div class="payroll-head">
                <div class="payroll-head-li">
                    <el-date-picker
                    v-model="value2"
                    type="month"
                    placeholder="选择月"
                    @change="PickTime()">
                    </el-date-picker>
                </div>
                <div class="payroll-head-li">
                    <el-button type="primary" @click="addsalary()">新增</el-button>
                    <el-button type="primary">c</el-button>
                    <el-button type="primary">四川公司工资单</el-button>
                    <el-button type="primary">纽茵公司工资单</el-button>
                </div>
            </div>
            <div class="payroll-table">
                <template>
                    <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                        <el-table-column
                            prop="yearMonth"
                            label="年月"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="员工"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="startDate"
                            label="起止日期"
                            width="220">
                            <template slot-scope="scope">
                                <div class="sub-box">{{scope.row.startDate+'~'+scope.row.endDate}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="should"
                            label="应发合计"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="totalDeductions"
                            label="扣款合计"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="税前合计	"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="withholdingTax"
                            label="代缴个税"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="afterTax"
                            label="税后合计"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="lastUpdateUserName"
                            label="最后操作人"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="lastUpdateDt"
                            label="最后时间"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="操 作">
                            <!-- eslint-disable-next-line -->
                            <template slot-scope="scope">
                                <el-button type="text" @click="SalaryDetails(scope.$index, scope.row)">Dialog</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <el-dialog top="3.5vh" title="薪资详细信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <div class="payroll-inif">
                        <el-form-item label="员工" :label-width="formLabelWidth">
                            <el-select size="medium" style="height:36px" :disabled="disabled" v-model="salaryinif.userId" filterable placeholder="请选择">
                                <el-option
                                  v-for="item in userlist"
                                  :key="item.id"
                                  :label="item.cnName"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                        </el-form-item>
                        <el-form-item label="年月" :label-width="formLabelWidth">
                            <el-date-picker @change="Rangetime()" v-model="salaryinif.yearMonth" size="medium" type="month" placeholder="选择月"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="工资日期起" :label-width="formLabelWidth">
                            <el-date-picker v-model="salaryinif.startDate" size="medium" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="工资日期止" :label-width="formLabelWidth">
                            <el-date-picker v-model="salaryinif.endDate" size="medium" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="基本工资" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.basic"></el-input-number>
                        </el-form-item>
                        <el-form-item label="绩效工资" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.floats"></el-input-number>
                        </el-form-item>
                        <el-form-item label="岗位津贴" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.postAllowance"></el-input-number>
                        </el-form-item>
                        <el-form-item label="服装洗理补贴" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.garmentWashSubsidies"></el-input-number>
                        </el-form-item>
                        <el-form-item label="通讯补贴" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.communicationSubsidies"></el-input-number>
                        </el-form-item>
                        <el-form-item label="交通补贴" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.trafficSubsidies"></el-input-number>
                        </el-form-item>
                        <el-form-item label="保密费" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.informationSecurityFee"></el-input-number>
                        </el-form-item>
                        <el-form-item label="操作奖金" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.operationBonus"></el-input-number>
                        </el-form-item>
                        <el-form-item label="其他补贴" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.otherSubsidies"></el-input-number>
                        </el-form-item>
                        <el-form-item label="部门集体团建费" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.groupCost"></el-input-number>
                        </el-form-item>
                        <el-form-item label="过节费" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.specialAllowance"></el-input-number>
                        </el-form-item>
                        <el-form-item label="代扣保险" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.withholdingInsurance"></el-input-number>
                        </el-form-item>
                        <el-form-item label="代扣公积金" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.reservedFunds"></el-input-number>
                        </el-form-item>
                        <el-form-item label="代缴个税" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.withholdingTax"></el-input-number>
                        </el-form-item>
                        <el-form-item label="餐补" :label-width="formLabelWidth">
                            <el-input-number :precision="2" size="medium" :controls="false" v-model="salaryinif.mealsupplement"></el-input-number>
                        </el-form-item>
                    </div>
                    <div class="leave-inif">
                        <el-form-item label="事假" :label-width="formLabelWidth">
                            <span>{{salaryinif.somethingFalse}} (共 0 小时)</span>
                        </el-form-item>
                        <el-form-item label="病假" :label-width="formLabelWidth">
                            <span>{{salaryinif.sickLeave}} (共 0 小时)</span>
                        </el-form-item>
                        <el-form-item label="迟到" :label-width="formLabelWidth">
                            <span>{{salaryinif.lateTo}} (30分钟以下共次，30分钟以上共次，60分钟以上共次，2小时以上共次)</span>
                        </el-form-item>
                        <el-form-item label="早退" :label-width="formLabelWidth">
                            <span>{{salaryinif.leaveEarly}} (10分钟以下共次，10-30分钟共次，30-60分钟共次，1小时以上共次)</span>
                        </el-form-item>
                        <el-form-item label="旷工" :label-width="formLabelWidth">
                            <span>{{salaryinif.absenteeism}} (共 0 小时)</span>
                        </el-form-item>
                        <el-form-item label="未打卡" :label-width="formLabelWidth">
                            <span>{{salaryinif.notPunch}} (未打卡共次)</span>
                        </el-form-item>
                    </div>
                    <div class="salary-payments">
                        <el-form-item label="其他扣款" :label-width="formLabelWidth">
                            <span>{{salaryinif.otherDeductions}}</span>
                        </el-form-item>
                        <el-form-item label="应发合计" :label-width="formLabelWidth">
                            <span>{{salaryinif.should}}</span>
                        </el-form-item>
                        <el-form-item label="扣款合计" :label-width="formLabelWidth">
                            <span>{{salaryinif.totalDeductions}}</span>
                        </el-form-item>
                        <el-form-item label="税前合计" :label-width="formLabelWidth">
                            <span>{{salaryinif.afterTax}}</span>
                        </el-form-item>
                        <el-form-item label="税后合计" :label-width="formLabelWidth">
                            <span>{{salaryinif.afterTax}}</span>
                        </el-form-item>
                    </div>
                    <div class="remark-box">
                        <el-form-item label="备注" :label-width="formLabelWidth">
                            <el-input :rows="1" type="textarea" v-model="salaryinif.remark"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button v-if="disabled" type="primary" @click="salaryAD('修改')">确认修改</el-button>
                    <el-button v-if="preserve" type="primary" @click="salaryAD('新增')">保 存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        userlist:[],
        loginuserid:'',
        value2:'',
        tableData: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        disabled:true,
        preserve:'',
        //薪资详细
        salaryinif:{
            userId:"",//员工Id
            name:"",//姓名
            yearMonth:"",//年月
            startDate:"",//工资日期 起
            endDate:"",//工资日期 止
            basic:"",//基本工资
            floats:"",//绩效工资
            postAllowance:"",//岗位津贴
            garmentWashSubsidies:"",//服装洗理补贴
            communicationSubsidies:"",// 通讯补贴
            trafficSubsidies:"",// 交通补贴
            informationSecurityFee:"",// 保密费
            operationBonus:"",// 操作奖金
            specialAllowance:"",// 特殊津贴
            otherSubsidies:"",// 其他补贴
            withholdingInsurance:"",// 代扣保险
            mealsupplement:"",// 餐补
            reservedFunds:"",// 代扣公积金
            groupCost:"",// 部门集体团建费
            sickLeave:"",// 病假
            somethingFalse:"",//  事假
            lateTo:"",//  迟到 
            leaveEarly:"",//   早退  
            absenteeism:"",//旷工 
            notPunch:"",//未打卡 
            otherDeductions:"",//其他扣款 
            should:"",//应发合计 
            totalDeductions:"",//扣款合计 
            totalRealHair:"",//实发合计 
            withholdingTax:"",//代扣个税 
            afterTax:"",//税后工资 
            isLock:"",//锁定标识 
            lastUpdateUserId:"",//最后操作人 
            lastUpdateUserName:"",//最后操作人Name 
            lastUpdateDt:"",//最后操作时间 
            remark:"",//备注 
        },
        form: {
          name: '',
          region: '',
        },
        formLabelWidth: '120px'
      }
    },
    methods:{
        Rangetime(){
            console.log('2023-10' instanceof Date)
            console.log(this.salaryinif.startDate instanceof Date)
        },
        getnewDate(){
            let nowDate = new Date()
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate()
            }
            console.log(date.year + '-' + date.month)
            this.value2=date.year + '-' + date.month;
            this.GetWageSheetList();
        },
        //获取员工
        GetWageSheetBasicsDataSource(){
            var url = "/api/PersonnelModule/GetWageSheetBasicsDataSource"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                }
            }).then(function (res) {
                if(res.data.code==200){
                    console.log(res.data.data.userNames)
                    that.userlist=res.data.data.userNames
                   
                }else{
                    that.$message({
                        message: '加载失败！原因：'+res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //薪资列表
        GetWageSheetList(){
            var url = "/api/PersonnelModule/GetWageSheetList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    yearMonth: that.value2,
                }
            }).then(function (res) {
                that.tableData=[];
                if(res.data.code==200){
                    console.log(res)
                    that.tableData=res.data.data;
                    console.log( that.tableData)
                }else{
                    that.$message({
                        message: '加载失败！原因：'+res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //日期处理（日）
        TimeProcessingri(val){
            if(val instanceof Date){
                let newsyear=val.getFullYear();
                let newsMonth=val.getMonth() + 1;
                let newsday=val.getDate();
                if((val.getMonth() + 1)<10){
                    newsMonth='0'+newsMonth
                }else{
                    newsMonth=val.getMonth() + 1
                }
                return newsyear+ '-' +newsMonth+ '-' + newsday;
            }else{
                return val
            }
        },
        //日期处理（月）
        TimeProcessingyue(val){
            if(val instanceof Date){
                let newsyear=val.getFullYear();
                let newsMonth=val.getMonth() + 1;
                if((val.getMonth() + 1)<10){
                    newsMonth='0'+newsMonth
                }else{
                    newsMonth=val.getMonth() + 1
                }
                return newsyear+ '-' +newsMonth;
            }else{
                return val
            }
            
        },
        //时间切换
        PickTime(){
            let newyear=this.value2.getFullYear();
            let newMonth=this.value2.getMonth() + 1;
            if((this.value2.getMonth() + 1)<10){
                newMonth='0'+newMonth
            }else{
                newMonth=this.value2.getMonth() + 1
            }
            this.value2=newyear+ '-' +newMonth;
            console.log(this.value2)
            this.GetWageSheetList();
        },
        //薪资详细
        SalaryDetails(index, row){
            this.dialogFormVisible = true;
            this.disabled=true;
            this.preserve=false;
            console.log(row.id)
            var url = "/api/PersonnelModule/GetWageSheetById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    id: row.id,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    console.log(res)
                    that.salaryinif=res.data.data;
                }else{
                    that.$message({
                        message: '加载失败！原因：'+res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //薪资(新增，修改)API
        PostWageSheetAddOrEdit(inif){
            console.log(inif)
            var url = "/api/PersonnelModule/PostWageSheetAddOrEdit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    status:inif.statuss,
                    createUserId:that.loginuserid,
                    userId:that.salaryinif.userId,
                    id:inif.ids,
                    remark:that.salaryinif.remark,
                    yearMonth:that.TimeProcessingyue(that.salaryinif.yearMonth),
                    startDate:that.TimeProcessingri(that.salaryinif.startDate),
                    endDate:that.TimeProcessingri(that.salaryinif.endDate),
                    basic:that.salaryinif.basic,
                    floats:that.salaryinif.floats,
                    postAllowance:that.salaryinif.postAllowance,
                    garmentWashSubsidies:that.salaryinif.garmentWashSubsidies,
                    communicationSubsidies:that.salaryinif.communicationSubsidies,
                    trafficSubsidies:that.salaryinif.trafficSubsidies,
                    informationSecurityFee:that.salaryinif.informationSecurityFee,
                    operationBonus:that.salaryinif.operationBonus,
                    specialAllowance:that.salaryinif.specialAllowance,
                    otherSubsidies:that.salaryinif.otherSubsidies,
                    withholdingInsurance:that.salaryinif.withholdingInsurance,
                    mealsupplement:that.salaryinif.mealsupplement,
                    reservedFunds:that.salaryinif.reservedFunds,
                    groupCost:that.salaryinif.groupCost,
                    sickLeave:that.salaryinif.sickLeave,
                    somethingFalse:that.salaryinif.somethingFalse,
                    lateTo:that.salaryinif.lateTo,
                    leaveEarly:that.salaryinif.leaveEarly,
                    absenteeism:that.salaryinif.absenteeism,
                    notPunch:that.salaryinif.notPunch,
                    otherDeductions:that.salaryinif.otherDeductions,
                    should:that.salaryinif.should,
                    totalDeductions:that.salaryinif.totalDeductions,
                    totalRealHair:that.salaryinif.totalRealHair,
                    withholdingTax:that.salaryinif.withholdingTax,
                    afterTax:that.salaryinif.afterTax,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    console.log(res)
                }else{
                    that.$message({
                        message: '加载失败！原因：'+res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //薪资(新增，修改)
        salaryAD(text){
            this.dialogFormVisible = false;
            let inifadd={
                statuss:'',
                userIds:'',
                ids:''
            }
            if(text=='新增'){
                inifadd.statuss=1;
                inifadd.userIds=0;
                inifadd.ids=0;
                this.PostWageSheetAddOrEdit(inifadd)
            }else if(text=='修改'){
                inifadd.statuss=2;
                inifadd.userIds=this.salaryinif.userId;
                inifadd.ids=this.salaryinif.id;
                this.PostWageSheetAddOrEdit(inifadd)
            }
            
        },
        //新增薪资
        addsalary(){
            this.dialogFormVisible = true;
            this.disabled=false;
            this.preserve=true;
            this.salaryinif={};
        }
    },
    mounted(){
        this.GetWageSheetBasicsDataSource()
        this.loginuserid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.getnewDate();
    }
}
</script>
<style>
.payroll-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.payroll-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.payroll-head{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.payroll-inif{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 80px;
}
.payroll-inif .el-form-item{
    width: 350px;
}
.payroll-inif .el-input-number--medium{
    width: 218px;
}
.payroll-inif .el-form-item{
    margin-bottom: 2px;
}
.payroll-inif .el-input--medium .el-input__inner{
    text-align: left;
}
.leave-inif{
    margin: 0 80px;
}
.leave-inif .el-form-item{
    margin-bottom: 0px;
}
.salary-payments{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 80px;
}
.salary-payments .el-form-item{
    margin-bottom: 0px;
    font-size: 17px;
    font-weight: 600;
}
.payroll-all .el-dialog__body{
    padding: 16px 20px;
}
.remark-box{
    margin: 0 80px;
}
.payroll-inif .el-input--medium {
    width: 218px;
}
</style>