baoshi-was/resources/views/process/checking-in/missionAudit.blade.php

@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('process.menu')@endcomponent
        @component('process.checking-in.menuChecking-in')@endcomponent
    </div>

    <div class="container-fluid card" id="list">
        <div class="card-header">
            <form method="GET" action="{{url('process/checking-in/missionAudit')}}" id="form">
                <table class="table-sm text-nowrap table-bordered" style="width: 100%">
                    <tbody>
                    <tr v-if="isBeingFilterConditions">
                        <td colspan="4">
                            <div class="col" style="padding:0">
                                <a  href="{{url('process/checking-in/missionAudit')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                            </div></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <span class="text-muted">每页显示记录：</span>
                        </td>
                        <td colspan="3">
                            <select name="paginate" v-model="filterData.paginate" class="tooltipTarget form-control-sm" style="vertical-align: middle" @change="submit">
                                <option value="50">50行</option>
                                <option value="100">100行</option>
                                <option value="200">200行</option>
                                <option value="500">500行</option>
                                <option value="1000">1000行</option>
                            </select></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="width: 200px">
                            <span class="text-muted">根据条件过滤：</span>
                        </td>
                        <td class="col" style="width: 300px">
                            <div class="col p-0">
                                <label class="form-check-label col-2 pull-left p-0">日期：</label>
                                <input v-model="filterData.start_date" name="start_date" type="date" class="form-control-sm m-0 col-7" style="width: 130px">
                            </div>
                            <input v-model="filterData.end_date" name="end_date" type="date" class="form-control-sm col-7 offset-md-2 mt-2" style="width: 130px">
                        </td>
                        <td style="width: 300px">
                            <label class="form-check-label">姓名</label>
                            <input v-model="filterData.full_name" name="full_name" class="form-control-sm" type="text">
                        </td>
                        <td style="width: 300px">
                            <label class="form-check-label">电话</label>
                            <input v-model="filterData.mobile_phone" name="mobile_phone" class="form-control-sm" type="text">
                        </td>
                        <td><input hidden type="submit"></td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead class="thead-light">
                <tr>
                    <td>序号</td>
                    <td>日期</td>
                    <td>姓名</td>
                    <td>电话</td>
                    <td>劳务所</td>
                    <td>登记工时</td>
                    <td>打卡工时</td>
                    <td>工时差</td>
                    <td>计费工时</td>
                    <td>计件数量</td>
                    <td>查看</td>
                    <td>审核</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(processDailyParticipant,i) in processDailyParticipants">
                    <td>@{{ i+1 }}</td>
                    <td><p v-if="processDailyParticipant.process_daily">
                            @{{ processDailyParticipant.process_daily.date }}</p></td>
                    <td><p v-if="processDailyParticipant.user_detail">
                            @{{ processDailyParticipant.user_detail.full_name }}</p></td>
                    <td><p v-if="processDailyParticipant.user_detail">
                            @{{ processDailyParticipant.user_detail.mobile_phone }}</p></td>
                    <td><p v-if="processDailyParticipant.user_detail">
                            @{{ processDailyParticipant.user_detail.user_labor_company }}</p></td>
                    <td>@{{ processDailyParticipant.hour_count }}</td>
                    <td class="text-danger">@{{ processDailyParticipant.hour }}</td>
                    <td class="text-danger">@{{ processDailyParticipant.diff }}</td>
                    <td class="text-danger">@{{ processDailyParticipant.billingHour }}</td>
                    <td>@{{ processDailyParticipant.unit_count }}</td>
                    <td><button v-if="processDailyParticipant.user_detail" @click="showUserDetail(processDailyParticipant.user_id)" class="btn btn-info">查看</button></td>
                    <td><b v-if="processDailyParticipant.status=='已审核'" class="text-success">已审核</b>
                        <button v-else class="btn btn-primary" @click="storeMissionAudit(processDailyParticipant.id)">审核</button>
                    </td>
                </tr>
                </tbody>
            </table>
            {{$processDailyParticipants->appends($request)->links()}}
        </div>
    </div>
@endsection

@section('lastScript')
<script>
    new Vue({
        el:"#list",
        data:{
            processDailyParticipants:[
                @foreach($processDailyParticipants as $processDailyParticipant)
                {!! $processDailyParticipant !!},
                @endforeach
            ],
            filterData:{paginate:50,start_date:'',end_date:'',full_name:'',mobile_phone:''}
        },
        mounted:function () {
            this.initInputs();
        },
        computed:{
            isBeingFilterConditions:function(){
                for(let key in this.filterData){
                    if(this.filterData[key]){
                        if(key==='paginate')continue;
                        return true
                    }
                }
                return false;
            },

        },
        methods:{
            //回显条件参数
            initInputs:function(){
                let data=this;
                let uriParts =decodeURI(location.href).split("?");
                if(uriParts.length>1){
                    let params = uriParts[1].split('&');
                    params.forEach(function(paramPair){
                        let pair=paramPair.split('=');
                        let key = pair[0], val = pair[1];
                        $('input[name="'+key+'"]').val(val);
                        $('select[name="'+key+'"]').val(val);
                        decodeURI(data.filterData[key]=val);
                    });
                }
            },
            //提交表单
            submit:function(){
                let form = $("#form");
                form.submit();
            },
            //提交审核
            storeMissionAudit(id){
                let _this=this;
                axios.post('{{url("process/storeMissionAudit")}}',{id:id})
                    .then(function (response) {
                        if (response.data.error){
                            tempTip.setDuration(3000);
                            tempTip.show('审核失败：'+response.data.error);
                            return;
                        }
                        _this.processDailyParticipants.every(function (processDailyParticipant) {
                            if (processDailyParticipant.id==id){
                                processDailyParticipant.status="已审核";
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('审核通过！');
                                return false;
                            }
                            return  true;
                        });
                    }).catch(function (err) {
                    tempTip.setDuration(3000);
                    tempTip.show('审核失败!网络错误：' + err);
                    });
            },
            showUserDetail(user_id){
                window.open("{{url('maintenance/userLabor')}}/"+user_id);
            }
        },
    });
</script>
@endsection