baoshi-was/resources/views/personnel/checking-in/clockAudit.blade.php

@extends('layouts.app')
@section('title')打卡审核-人事管理@endsection
@section('content')
    <div class="container-fluid" id="list">
        <div class="card col-md visible-on">
            <div class="card-body p-0">
                <div v-if="userDutyChecks&&userDutyChecks.length>=1">
                    <table class="table table-striped table-bordered text-nowrap"  v-for="day in date" >
                        <thead class="thead-light" >
                        <tr class="text-center">
                            <th v-if="day==0" colspan="11">@{{ day | toDate}}</th>
                            <th v-if="day==-1" colspan="11">@{{ day | toDate}}</th>
                            <th v-if="day==-2" colspan="11">@{{ day | toDate}}</th>
                        </tr>
                        <tr>
                            <td>序号</td>
                            <td>姓名</td>
                            @can('人事管理-门卫审核')<td>门卫审核</td>@endcan
                            <td>组长审核</td>
                            <td >打卡时间</td>
                            <td>打卡类型</td>
                            <td>手机号</td>、
                            <td>劳务所</td>
                            <td>工作组</td>
                            <td>异常</td>
                            <td>合计工时</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(userDutyCheck,i) in userDutyChecks" v-if="whichDay(userDutyCheck.checked_at)==day">
                            <td>@{{ i+1 }}</td>
                            <td ><span v-if="userDutyCheck.user_detail">@{{ userDutyCheck.user_detail.full_name }}</span></td>
                            @can('人事管理-门卫审核')<td>
                                <span v-if="userDutyCheck.type=='登入'">
                                <b v-if="userDutyCheck.verify_user_id" class="text-success">已审核</b>
                                <button v-else @click="storeClockAudit(userDutyCheck.id,userDutyCheck.type)" class="btn btn-primary w-80">审核</button>
                                </span>
                            </td>@endcan
                            <td>
                                <span v-if="userDutyCheck.type=='登入'">
                                <b v-if="userDutyCheck.group_user_id" class="text-success">已审核</b>
                                    @can('人事管理-组长审核')
                                        <button v-else @click="storeGroupAudit(userDutyCheck.id,userDutyCheck.type)" class="btn btn-primary w-80">组长审核</button>
                                    @endcan
                                </span>
                            </td>
                            <td>@{{ userDutyCheck.checked_at.substring(11,16) }}</td>
                            <td>
                                @can('人事管理-审核类型')
                                    <button v-if="!userDutyCheck.isChangingType" class="btn btn-sm btn-outline-secondary text-center" @click="dutyCheckType($event,userDutyCheck)" :data_id="userDutyCheck.id">@{{ userDutyCheck.type }}</button>
                                    <select v-else v-model="userDutyCheck.type" :data_id="userDutyCheck.id"
                                            @change="isException(userDutyCheck.id,userDutyCheck.user_id,userDutyCheck.checked_at,userDutyCheck.type)" class="form-control" style="width: 100px">
                                        <option value="登入">登入</option>
                                        <option value="登出">登出</option>
                                    </select>
                                @else
                                    <span class="text-center">@{{ userDutyCheck.type }}</span>
                                @endcan
                            </td>
                            <td  class="text-muted"><span v-if="userDutyCheck.user_detail">@{{ userDutyCheck.user_detail.mobile_phone }}</span></td>
                            <td ><span v-if="userDutyCheck.userLabor">@{{ userDutyCheck.userLabor.labor_company.name }}</span></td>
                            <td class="font-weight-bold"><span v-if="userDutyCheck.user_workgroup">
                                @{{ userDutyCheck.user_workgroup.name }}</span></td>
                            <td>@{{ userDutyCheck.exception }}</td>
                            <td>@{{ userDutyCheck.duration_man_hour }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-center" v-else><h3>暂无任何打卡记录！</h3></div>
            </div>
        </div>
    </div>

@endsection

@section('lastScript')
    <script>

        new Vue({
            el:"#list",
            data:{
                date:[0,-1,-2],
                dateStr:'',
                userDutyChecks:[
                        @foreach($userDutyChecks as $userDutyCheck)
                    {id:'{{$userDutyCheck->id}}',user_id:'{{$userDutyCheck->user_id}}',
                        checked_at:'{{$userDutyCheck->checked_at}}',
                        isChangingType:false,
                        type:'{{$userDutyCheck->type}}',verify_user_id:'{{$userDutyCheck->verify_user_id}}',group_user_id:'{{$userDutyCheck->group_user_id}}',
                        exception:'',duration_man_hour:'',@if($userDutyCheck->userWorkgroup)user_workgroup:{!! $userDutyCheck->userWorkgroup !!}, @endif
                            @if($userDutyCheck->userDetail)user_detail:{!! $userDutyCheck->userDetail !!}, @endif
                            @if($userDutyCheck->userLabor)userLabor:{!! $userDutyCheck->userLabor !!}, @endif},
                    @endforeach
                ],
                permittingWorkgroups:{!! $permittingWorkgroups !!},
            },
            {{--mounted(){--}}
            {{--    initEcho();--}}
            {{--    this.permittingWorkgroups.forEach(function(workgroup){--}}
            {{--        Echo.channel('{{$laravelEchoPrefix}}'+workgroup.token).listen('ClockinEvent',(e)=>{--}}
            {{--            window.location.reload();--}}
            {{--        });--}}
            {{--        Echo.channel('{{$laravelEchoPrefix}}'+workgroup.token).listen('ClockoutEvent',(e)=>{--}}
            {{--            window.location.reload();--}}
            {{--        });--}}
            {{--    });--}}
            {{--},--}}
            methods:{
                // 打卡类型修改
                dutyCheckType:function (e,userDutyCheck) {
                    let target = $(e.target);
                    userDutyCheck.isChangingType=true;
                    let select = target.next('select');
                    select.focus();
                },
                updateDutyCheckType:function (id,type) {
                    let _this = this;
                    let ajaxUrl= '{{url("personnel/checking-in/updateDutyCheckType")}}';
                    axios.post(ajaxUrl,{'id':id,'type':type}).then(function (response) {
                        if(response.data.success){
                            _this.userDutyChecks.every(function (userDutyCheck) {
                                if (userDutyCheck.id==id){
                                    userDutyCheck.type=response.data.data.type;
                                    userDutyCheck.isChangingType=false;
                                    return false;
                                }
                                return true;
                            });
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('打卡类型修改成功');
                        }else{
                            tempTip.setDuration(3000);
                            tempTip.show('打卡类型修改失败!'+response.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('打卡类型修改失败!网络异常：'+err);
                    });
                },
                whichDay(dateStr){
                    let nowDate=new Date();
                    let targetDate=new Date(dateStr);
                    if(nowDate.getMonth()!=targetDate.getMonth()){
                        if (new Date(targetDate.setDate(targetDate.getDate()+1))==nowDate){
                            return -1;
                        }
                        if (new Date(targetDate.setDate(targetDate.getDate()+2))==nowDate){
                            return -2;
                        }
                    }
                    let diffOfDays=targetDate.getDate()-nowDate.getDate();
                    return diffOfDays;
                },
                store(id,type,url){

                },
                //门卫审核
                storeClockAudit(id,type){
                    let url='{{url("personnel/checking-in/storeClockAudit")}}';
                    let _this=this;
                    axios.post(url,{id:id,type:type})
                        .then(function (response) {
                            if (!response.data.success){
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.data);
                                return;
                            }
                            _this.userDutyChecks.every(function (userDutyCheck) {
                                if (userDutyCheck.id==id){
                                    userDutyCheck.verify_user_id=response.data.data;
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess('审核通过！');
                                    return false
                                }
                                return true;
                            });
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('审核失败！网络错误：'+err);
                    });
                },
                //组长打卡审核
                storeGroupAudit(id,type){
                    let url='{{url("personnel/checking-in/storeGroupAudit")}}';
                    let _this=this;
                    axios.post(url,{id:id,type:type})
                        .then(function (response) {
                            if (!response.data.success){
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.data);
                                return;
                            }
                            _this.userDutyChecks.every(function (userDutyCheck) {
                                if (userDutyCheck.id==id){
                                    userDutyCheck.group_user_id=response.data.data;
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess('审核通过！');
                                    return false
                                }
                                return true;
                            });
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('审核失败！网络错误：'+err);
                    });
                },
                isException(id,user_id,checked_at,type){
                    let _this=this;
                    _this.updateDutyCheckType(id,type);
                    axios.post('{{url("personnel/checking-in/isException")}}',{id:id,user_id:user_id,checked_at:checked_at,type:type})
                        .then(function (response) {
                            _this.userDutyChecks.every(function (userDutyCheck) {
                                if (userDutyCheck.id==id){
                                    userDutyCheck.exception=response.data.exception;
                                    userDutyCheck.duration_man_hour=response.data.duration_man_hour;
                                    return false
                                }
                                return true;
                            });
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('校验失败！网络错误：'+err);
                    });
                }
            },
            filters:{
                toDate:function(val){
                    let dd = new Date();
                    dd.setDate(dd.getDate()+val);//获取AddDayCount天后的日期
                    let y = dd.getFullYear();
                    let m = dd.getMonth()+1;//获取当前月份的日期
                    let d = dd.getDate();
                    return  y+'-'+(m<10?'0'+m:m)+'-'+d;
                }
            }
        });
    </script>
@endsection