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>教程</th>
                    <th>单价</th>
                    <th>提交日期</th>
                    <th>商品编码</th>
                    <th>商品名称 </th>
                    <th>实际数量</th>
                    <th>状态</th>
                </tr>
                <tr v-for="(processOne,i) in processes">
                    <td>
                        <input class="checkItem" type="checkbox" :value="processOne.id" v-model="checkData">
                    </td>
                    <td class="text-muted">@{{ i+1 }}</td>
                    <td>操作</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 && processOne.tutorialCount>1">
                            <a href="javascript:;" @click="processOne.detailFolding=true">@{{processOne.tutorialCount}}个货主，点击展开明细</a>
                            <table class="table table-sm">
                                <tr>
                                    <th>标题</th>
                                    <th>货主</th>
                                    <th>操作</th>
                                    <th>创建时间</th>
                                </tr>
                                <tr v-for="tutorial 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 v-if="processOne.detailFolding && processOne.tutorialCount>1">
                                    <td colspan="8" class="text-center">
                                        <a href="javascript:;" @click="processOne.detailFolding=false">点击收起明细</a>
                                    </td>
                                </tr>
                            </table>
                            </div>
                            <div v-if="processOne.tutorialCount>0 && ! processOne.detailFolding">
                                <a v-for="tutorial in processOne.tutorials" class="text-info">@{{tutorial.name}}</a>
                                <button  class="btn 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>
            </table>
        </div>
    </div>
</div>


@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#process",
            data:{
                processes:[
                    @foreach($processes as $processOne)
                    {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 !!}',tutorialCount:'{{count($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},
                    @endforeach
                ],
                owners:[
                    @foreach($owners as $owner)
                    {!! $owner !!},
                    @endforeach
                ],
                checkData:[],
                filterData:{paginate:50,date_start:'',date_end:'',owner_id:'',commodity_barcode:'',wms_code:'',status:''},
            },
            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(){
                    var 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 = [];
                    }
                },
                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;
                    }
                }
            },
        });
    </script>
@endsection