baoshi-was/resources/views/process/index.blade.php

@extends('layouts.app')
@section('title')二次加工管理@endsection

@section('content')
<span id="nav2">
    @component('process.menu')@endcomponent
</span>
<div class="d-none" id="process">
    <div class="container-fluid mt-3">
        <div>
            <form  method="GET" action="{{url('process/')}}" style="margin-top: 1%" id="optionSubmit">
                   <table class="table  table-sm table-bordered text-nowrap ">
                       <tr v-if="isBeingFilterConditions">
                           <td colspan="10">
                               <div class="col" style="padding:0">
                                   <a  href="{{url('process')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                               </div></td>
                       </tr>
                       <tr>
                           <td>
                               <span class="text-muted">每页显示记录：</span>
                           </td>
                           <td  colspan="9">
                               <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>
                       </tr>
                       <tr>
                           <td rowspan="2" >
                               <span class="text-muted">根据条件过滤：</span>
                           </td>
                           <td >
                               <label for="date_start" style="width: 35px">时间：</label>
                               <input id="date_start" name="date_start" v-model="filterData.date_start" type="date" class="form-control-sm ">
                           </td>
                           <td >
                               <label>&nbsp;客&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户&nbsp;：</label>
                               <input type="text" class="form-control-sm tooltipTarget" placeholder="查找"
                                      style="width:70px" {{--@input="owner_seek"--}}
                                      title="输入关键词快速定位下拉列表，回车确定">
                               <select name="owner_id" v-model="filterData.owner_id" @change="submit" class="form-control-sm tooltipTarget">
                                   <option >    </option>
                                   <option v-for="owner in owners" :value="owner.id">@{{owner.name}}</option>
                               </select>
                           </td>
                           <td>
                               <label for="wms_code">单据号：</label>
                               <input id="wms_code" name="wms_code" v-model="filterData.wms_code" class="form-control-sm">
                           </td>
                           <td colspan="6"></td>
                       </tr>
                       <tr>
                           <td >
                               <label for="date_end" style="width: 35px"></label>
                               <input id="date_end" name="date_end" v-model="filterData.date_end" type="date" class="form-control-sm ">
                           </td>
                           <td>
                               <label>商品条码：</label>
                               <input name="commodity_barcode" v-model="filterData.commodity_barcode" class="form-control-sm">
                           </td>
                           <td >
                               <label for="status">&nbsp;状&nbsp;&nbsp;态&nbsp;：</label>
                               <select id="status" name="status" v-model="filterData.status" @change="submit" class="form-control-sm tooltipTarget">
                                   <option >    </option>
                                   <option value="待接单">待接单</option>
                                   <option value="待加工">待加工</option>
                                   <option value="驳回">驳回</option>
                                   <option value="加工中">加工中</option>
                                   <option value="待验收">待验收</option>
                                   <option value="已完成">已完成</option>
                               </select>
                           </td>
                           <td colspan="6"></td>
                       </tr>
                       <tr>
                           <td>
                               <span class="text-muted">操作选定记录：</span>
                           </td>
                           <td colspan="9">
                               <span class="dropdown">
                                        <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData>0?'btn-dark text-light':'']"
                                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                                            导出Excel
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" @click="processExport(1)" href="javascript:">导出勾选内容</a>
                                            <a class="dropdown-item" @click="processExport(2)" href="javascript:">导出所有页</a>
                                        </div>
                                    </span>
                               <input hidden type="submit" >
                           </td>
                       </tr>
                   </table>
           </form>
        </div>
        <div>
            <table class="table table-striped table-sm text-nowrap table-hover">
                <tr>
                    <th>
                        <label for="all">
                            <input id="all" type="checkbox" @click="checkAll($event)">全选
                        </label>
                    </th>
                    <th>序号</th>
                    <th >操作</th>
                    <th>任务号</th>
                    <th>货主</th>
                    <th>单据类型</th>
                    <th>单据号</th>
                    <th>加工类型</th>
                    <th>预期数量</th>
                    <th class="text-center">教程</th>
                    <th>单价</th>
                    <th>提交日期</th>
                    <th>商品编码</th>
                    <th>商品名称 </th>
                    <th>实际数量</th>
                    <th>状态</th>
                </tr>
                <tr v-for="(processOne,i) in processes" :id="processOne.id">
                    <td>
                        <input class="checkItem" type="checkbox" :value="processOne.id" v-model="checkData">
                    </td>
                    <td class="text-muted">@{{ i+1 }}</td>
                    <td >
                        <p v-if="!processOne.openProcessHour && processOne.status=='驳回'" class="text-muted">已驳回</p>
                        <p v-if="!processOne.openProcessHour && processOne.status=='已完成'" class="text-success">已完成</p>
                        <button v-if="!processOne.openProcessHour && processOne.status=='待接单'" @click="processReject(processOne.id)" class="btn-sm btn-outline-dark pull-left">驳回</button>
                        <button v-if="!processOne.openProcessHour && processOne.status=='待接单'"  @click="processReceive(processOne.id)" class="btn-sm btn-outline-primary pull-left">接单</button>
                        <button v-if="(processOne.status=='加工中' || processOne.status=='待加工') && !processOne.openProcessHour"
                                class="btn-sm btn-outline-info pull-left" @click="openProcessHour(processOne.id);processOne.openProcessHour=true;processOne.detailFolding=false">登记工时</button>
                        <button v-if="processOne.openProcessHour" @click="closeProcessHour(processOne.id);processOne.openProcessHour=false" class="btn-sm btn-dark pull-left">收起登记工时</button>
                        <button v-if="!processOne.openProcessHour && processOne.status=='待验收'" @click="processAccomplish(processOne.id)" class="btn-sm btn-outline-success pull-left">完成</button>
                    </td>
                    <td class="text-muted">@{{ processOne.code }}</td>
                    <td class="text-muted">@{{ processOne.owner_name }}</td>
                    <td class="text-muted">@{{ processOne.bill_type }}</td>
                    <td class="text-muted">@{{ processOne.wms_code }}</td>
                    <td >@{{ processOne.process_method_name }}</td>
                    <td>@{{ processOne.amount }}</td>
                    <td>
                        <div class="text-center">
                            <div v-if=" processOne.tutorials.length>1">
                            <a href="javascript:;" @click="processOne.detailFolding=true;processOne.openProcessHour=false;closeProcessHour(processOne.id)" v-if="!processOne.detailFolding">@{{processOne.tutorials.length}}个教程，点击展开明细</a>
                            <button class="btn-sm btn-outline-dark pull-left" href="javascript:;" @click="processOne.detailFolding=false" v-else>收起编辑</button>
                            <table class="table table-sm" v-if="processOne.detailFolding">
                                <tr>
                                    <th>标题</th>
                                    <th>货主</th>
                                    <th>操作</th>
                                    <th>创建时间</th>
                                </tr>
                                <tr v-for="(tutorial,i) in processOne.tutorials">
                                    <td class="text-info">@{{tutorial.name}}</td>
                                    <td >@{{tutorial.owner_name}}</td>
                                    <td>@can('二次加工管理-教程管理')@endcan</td>
                                    <td >@{{tutorial.created_at}}</td>
                                </tr>
                                <tr>
                                    <td  colspan="4">
                                        <button class="btn btn-info pull-left">新增或编辑关联教程</button>
                                    </td>
                                </tr>
                            </table>
                            </div>
                            <div v-if="processOne.tutorials.length==1 && !processOne.detailFolding">
                                <a v-for="tutorial in processOne.tutorials" class="text-info">@{{tutorial.name}}</a>
                                <button class="btn-sm btn-outline-info pull-right">改</button>
                                <button  class="btn-sm btn-outline-dark pull-right" >删</button>
                            </div>
                        </div>
                    </td>
                    <td class="text-muted">@{{ processOne.unit_price }}</td>
                    <td>@{{ processOne.created_at }}</td>
                    <td class="text-muted">@{{ processOne.commodity_barcode }}</td>
                    <td class="text-muted">@{{ processOne.commodity_name }}</td>
                    <td>@{{ processOne.completed_amount }}</td>
                    <td class="text-muted">@{{ processOne.status }}</td>
                </tr>
                <tr v-if="processDailyParticipants.length>0">
                    <td colspan="2"></td>
                    <td colspan="16">
                        <table class="table-sm table-bordered table-condensed">
                            <tr class="bg-success">
                                <td>日期</td><td>当日产量</td>
                                <td>当日剩余</td>
                                <td colspan="2">操作</td>
                                <td>参与者</td>
                                <td>开始时间</td>
                                <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>
                            <tr  v-for="processDaily in processDailyParticipants" :id="'processDaily'+processDaily.id">
                                <td v-if="processDaily.rowspan" :rowspan="processDaily.rowspan"><p v-if="processDailies[processDaily.id]">@{{ processDailies[processDaily.id].time }}</p></td>
                                <td v-if="processDaily.rowspan"  :rowspan="processDaily.rowspan"><p v-if="processDailies[processDaily.id]">@{{ processDailies[processDaily.id].output }}</p></td>
                                <td v-if="processDaily.rowspan" :rowspan="processDaily.rowspan"><p v-if="processDailies[processDaily.id]">@{{ processDailies[processDaily.id].remain }}</p></td>
                                <td v-if="processDaily.rowspan" :rowspan="processDaily.rowspan">
                                    <button v-if="isAddProcessDailyParticipant" class="btn btn-sm btn-info" @click="addProcessDailyParticipant(processDaily.id);isAddProcessDailyParticipant=false;">新增</button>
                                    <button v-if="!isAddProcessDailyParticipant" class="btn btn-sm btn-info" @click="addProcessDailyParticipant(processDaily.id);isAddProcessDailyParticipant=true;">取消</button>
                                </td>
                                <td></td>
                                <td>@{{ processDaily.user_name }}</td>
                                <td>@{{ processDaily.started_at }}</td>
                                <td>@{{ processDaily.ended_at }}</td>
                                <td>@{{ processDaily.hour_price }}</td>
                                <td>@{{ processDaily.unit_price }}</td>
                                <td>@{{ processDaily.dinner_duration }}</td>
                                <td>@{{ processDaily.hour_count }}</td>
                                <td>@{{ processDaily.remark }}</td>
                                <td>@{{ processDaily.hour }}</td>
                                <td>@{{ processDaily.diff }}</td>
                                <td>@{{ processDaily.billingHour }}</td>
                                <td>@{{ processDaily.unit_count }}</td>
                                <td>审核</td>
                                <td>详情</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>


@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#process",
            data:{
                processes:[
                    @foreach($processes as $processOne)
                    {id:'{{$processOne->id}}',code:'{{$processOne->code}}',owner_name:'{{$processOne->owner_name}}',bill_type:'{{$processOne->bill_type}}'
                        ,wms_code:'{{$processOne->wms_code}}',process_method_name:'{{$processOne->process_method_name}}',amount:'{{$processOne->amount}}'
                        ,tutorials:{!! $processOne->tutorials !!},unit_price:'{{$processOne->unit_price}}',created_at:'{{$processOne->created_at}}'
                        ,commodity_barcode:'{{$processOne->commodity_barcode}}',commodity_name:'{{$processOne->commodity_name}}',
                        completed_amount:'{{$processOne->completed_amount}}',status:'{{$processOne->status}}',detailFolding:false,openProcessHour:false,},
                    @endforeach
                ],
                owners:[
                    @foreach($owners as $owner)
                    {!! $owner !!},
                    @endforeach
                ],
                checkData:[],
                filterData:{paginate:50,date_start:'',date_end:'',owner_id:'',commodity_barcode:'',wms_code:'',status:''},
                processDailies:[],
                processDailyParticipants:[],
                isAddProcessDailyParticipant:true,
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.processes.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            computed:{
                isBeingFilterConditions:function(){
                    for(let key in this.filterData){
                        if(this.filterData[key]){
                            if(key==='paginate')continue;
                            return true
                        }
                    }
                    return false;
                },

            },
            mounted:function () {
                this.initInputs();
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#process').removeClass('d-none');
            },
            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 = $("#optionSubmit");
                    form.submit();
                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.processes.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                //导出excel，因同步问题不使用formData
                processExport(e){
                    let val=e;
                    let data=this.filterData;
                    if (val==1){
                        if (this.checkData&&this.checkData.length<=0){
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('没有勾选任何记录');
                        }else{
                            location.href="{{url('process?checkSign=')}}"+this.checkData;
                        }
                    } else {
                        location.href="{{url('process?checkSign=-1&date_start=')}}"+
                            data.date_start+"&date_end="+data.date_end+"&owner_id="+
                            data.owner_id+"&commodity_barcode="+data.commodity_barcode+"&wms_code="+data.wms_code+
                            "&status="+data.status;
                    }
                },
                //获取登记工时
                openProcessHour(e){
                    let _this=this;
                    axios.post("{{url("process/getDailyParticipant")}}",{id:e})
                        .then(function (response) {
                            let processDailies=response.data;
                            for (let i=0;i<processDailies.length;i++){
                                let processDailyParticipants=processDailies[i].process_daily_participants;
                                if (!processDailyParticipants)continue;
                                for (let j=0;j<processDailyParticipants.length;j++){
                                    let data={};
                                    data['id']=processDailyParticipants[j].id;
                                    data['started_at']=processDailyParticipants[j].started_at;
                                    data['user_name']=processDailyParticipants[j].user_name;
                                    data['ended_at']=processDailyParticipants[j].ended_at;
                                    data['hour_price']=processDailyParticipants[j].hour_price;
                                    data['unit_price']=processDailyParticipants[j].unit_price;
                                    data['dinner_duration']=processDailyParticipants[j].dinner_duration;
                                    data['hour_count']=processDailyParticipants[j].hour_count;
                                    data['remark']=processDailyParticipants[j].remark;
                                    data['hour']=processDailyParticipants[j].hour;
                                    data['diff']=processDailyParticipants[j].diff;
                                    data['billingHour']=processDailyParticipants[j].billingHour;
                                    data['unit_count']=processDailyParticipants[j].unit_count;
                                    data['process_id']=processDailies[i].process_id;
                                    if (!_this.processDailies[processDailies[i].id]){
                                        data['daily']=processDailies[i].id;
                                        data['rowspan']=processDailyParticipants.length;
                                        let obj={};
                                        obj['time']=processDailies[i].time;
                                        obj['output']=processDailies[i].output;
                                        obj['remain']=processDailies[i].remain;
                                        _this.processDailies[processDailies[i].id]=obj;
                                    }
                                    _this.processDailyParticipants.push(data);
                                }
                            }
                            console.log(_this.processDailyParticipants)
                    }).catch(function (err) {
                        console.log(err)
                    });
                },
                //删除工时显示
                closeProcessHour(e){
                    this.processDailies=[];
                    this.processDailyParticipants=[];
                },
                //新增参与人
                addProcessDailyParticipant(e){
                    let html='<tr><td></td><td>@{{ processDaily.user_name}}</td>' +
                        '<td>@{{ processDaily.started_at }}</td><td>@{{ processDaily.ended_at }}</td>' +
                        '<td>@{{ processDaily.hour_price }}</td><td>@{{ processDaily.unit_price }}</td>' +
                        '<td>@{{ processDaily.dinner_duration }}</td><td>@{{ processDaily.hour_count }}</td>' +
                        '<td>@{{ processDaily.remark }}</td><td>@{{ processDaily.hour }}</td>' +
                        '<td>@{{ processDaily.diff }}</td><td>@{{ processDaily.billingHour }}</td>' +
                        '<td>@{{ processDaily.unit_count }}</td><td>审核</td>' +
                        '<td>详情</td></tr>';
                    this.processDailyParticipants.every(function (processDailyParticipant) {
                        if (processDailyParticipant.id==e){
                            processDailyParticipant.rowspan=(processDailyParticipant.rowspan)+1;
                            return false;
                        }
                        return  true;
                    });
                    $("#processDaily"+e).after(html);
                },
                //驳回
                processReject(id){
                    let url="{{url('process/reject')}}"+"/"+id;
                    let _this=this;
                    axios.post(url)
                        .then(function (response) {
                            _this.processes.every(function (process) {
                                if (process.id==response.data.id){
                                    process.status=response.data.status;
                                    return false;
                                }
                                return true;
                            });
                        }).catch(function (err) {
                            console.log(err)
                        })
                },
                //接单
                processReceive(id){
                    let url="{{url('process/receive')}}"+"/"+id;
                    let _this=this;
                    axios.post(url)
                        .then(function (response) {
                            _this.processes.every(function (process) {
                                if (process.id==response.data.id){
                                    process.status=response.data.status;
                                    return false;
                                }
                                return true;
                            });
                        }).catch(function (err) {
                        console.log(err)
                    })
                },
                //完成
                processAccomplish(id){
                    let url="{{url('process/accomplish')}}"+"/"+id;
                    let _this=this;
                    axios.post(url)
                        .then(function (response) {
                            _this.processes.every(function (process) {
                                if (process.id==response.data.id){
                                    process.status=response.data.status;
                                    return false;
                                }
                                return true;
                            });
                        }).catch(function (err) {
                        console.log(err)
                    })
                }
            },
        });
    </script>
@endsection