baoshi-was/resources/views/store/receivingDashboard/receivingTableList/index.blade.php

@extends('layouts.app')
@section('title')收货表单@endsection
@section('content')
    <div class="d-none" id="list">
        <!--查询            -->
        <div class="row m-3" style="background-color: #fff;">
            <div class="form-group m-2">
                <select class="form-control selectpicker" title="分页大小" v-model="size">
                    <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>
            </div>
            <div class="form-group m-2" style="max-width: 200px !important;">
                <select v-model="search.customerId" class="selectpicker form-control" title="选择货主"
                        data-actions-box="true"
                        data-live-search="true"
                        data-live-search-placeholder="搜索"
                >
                    <option v-for="(v,k) of searchSelects.owners" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="货主">
                <input v-model="search.receiveTaskNo" class="form-control" type="text" step="01" placeholder="收货任务号">
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="货主">
                <input v-model="search.reservationNo" class="form-control" type="text" step="01" placeholder="预约号">
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="货主">
                <select v-model="search.status" class="selectpicker form-control" title="选择状态"
                        data-actions-box="true"
                        data-live-search="true"
                        data-live-search-placeholder="搜索"
                >
                    <option v-for="v of searchSelects.statuses" :value="v" :key="v.id">@{{ v }}</option>
                </select>
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="货主">
                <input v-model="search.asnNo" class="form-control" type="text" step="01" placeholder="ASN号">
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="起始日期">
                <input v-model="search.createSingleStartTime" class="form-control" type="date" step="01">
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="截止日期">
                <input v-model="search.createSingleEndTime" class="form-control" type="date" step="01">
            </div>
            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-info" @click="searchData()">查询</button>
            </div>
        </div>
        <!--            表格-->
        <table class="table table-striped table-bordered table-hover text-nowrap waybill-table td-min-width-80"
               style="background: #fff;" id="table">
<!--            v-if="item.asnStatus!=99"-->
            <tr v-for="(item,i) in resData.details.data" :key="i">
                <td class="td-warm text-muted"><span>@{{ i+1 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.customerName }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.receiveTaskNo }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.reservationNo }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.status }}</span></td>
                <td class="td-warm text-muted">
                    <span>@{{ item.asnNo }}</span>
                    <span
                        style="display: inline-block;width: 15px;height: 15px;border-radius: 50%;position: relative;top: 3px; margin-left: 3px;box-shadow: 0 0 3px #211f1f"
                        :style="item.asnStatus!=99?'background-color:#4ed32d':'background-color:#e83939'"></span>
                </td>
                <td class="td-warm text-muted"><span>@{{ item.createSingleTime }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.finishedReceiveTime }}</span></td>
                <td class="td-warm text-muted"><span v-if="item.asnStatus==99">@{{ item.receivePerson }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.expectancyAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.receivedAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.unfinishedReceiveAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.receiveConsumeDuration }}</span></td>
                <td class="td-warm text-muted">
                    <button @click="showDetail(item)" type="button"
                            class="btn btn-primary" data-toggle="modal"
                            data-target="#staticBackdrop">
                        查看明细
                    </button>
                </td>
                <td class="td-warm text-muted">
                    @can('入库管理-实时收货看板-关单')
                    <button v-if="item.asnStatus!=99" @click="closeAsn(item)" type="button"
                            class="btn btn-success">
                        关单
                    </button>
                    @endcan
                </td>
            </tr>
        </table>

        <nav aria-label="..+.">
            <ul class="pagination">
                <li class="page-item" :class="current===1?'disabled':''">
                    <button class="page-link" @click="pagination('pre')">上一页</button>
                </li>
                <li class="page-item" :class="current===resData.details.pages?'disabled':''">
                    <button class="page-link" @click="pagination('next')">下一页</button>
                </li>
            </ul>
        </nav>


        <!-- Modal -->
        <div class="modal fade" id="staticBackdrop" tabindex="-1" aria-labelledby="staticBackdropLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-xl" style="max-width:70% !important;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">明细</h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="modal-dialog-scrollable">
                            <table class="table table-sm text-nowrap"
                                   style="background: #fff;" id="table_inner">
                                <tr v-for="(item,i) in resData.itemDetail" :key="i">
                                    <td class="td-warm text-muted text-center"><span>@{{ i+1 }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.receiveTaskNo }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.asnNo }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.reservationNo }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.descr }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.sku }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.expectedQty }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.receivedQty }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.receivePerson }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.putawayQty }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.putawayPerson }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.unfinishedReceiveQty }}</span></td>
                                </tr>
                            </table>
                            <div style="width: 100%">
                                @can('入库管理-实时收货看板-关单')
                                    <button @click="closeAsnDetail()" type="button" class="btn btn-success float-right" v-if="resData.asnStatus !== '99'">
                                        关单
                                    </button>
                                @endcan
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        /**
         * @Description: 轮询执行方法
         * @param {func} function 需要轮询的方法
         * @param {time} number 轮询间隔,默认1s
         * @param {endTime} number 可轮询时间, 为空时一直轮询
         * @param {immedaite} boolean 第一次是否立即执行
         * @author: XuLijuan
         */
        const pollingFunction = (func, time = 1000, endTime, immediate = false) => {
            immediate && func(); //是否立即执行一次，由实际决定
            const startTime = new Date().getTime();
            const pollTimer = setInterval(() => {
                const nowTime = new Date().getTime();
                if (endTime && nowTime - startTime >= endTime) {
                    pollTimer && clearInterval(pollTimer);
                }
                func();
            }, time);
            return pollTimer;
        };
        let vue = new Vue({
            el: "#list",
            data: {
                user: '{!! $user !!}',
                timer: null,
                resData: {
                    details: {
                        data: [],
                        total: null,
                        current: 1,
                        pages: null,
                        size: 50,
                    },
                    asnStatus: null,
                    asnType:null,
                    customerId:null,
                    asnNo:null,
                    warehouseId:null,
                    receiveTaskNo:null,
                    itemDetail: null,
                },
                searchSelects: {
                    owners: {!! $owners !!},
                    statuses: ['创建', '进行中', '完成', '超时完成'],
                },
                selectTr: null,
                search: {
                    customerId: null,
                    receiveTaskNo: null,
                    reservationNo: null,
                    status: null,
                    asnNo: null,
                    createSingleStartTime: null,
                    createSingleEndTime: null,
                    sign: null,
                },
                closeAsnParam:{
                    asnType:null,
                    customerId:null,
                    asnNo:null,
                    warehouseId:null,
                    user:null,
                },
                size: 50,
                current: 1,
            },
            created() {
                let url = this.getBaseUrl() + `/api/receiveBoard/formList?size=${this.size}&current=${this.current}`
                this.initSearchDate();
                this.getPageResult(url);
            },
            beforeDestroy() {
                clearInterval(this.timer)
            },
            mounted: function () {
                $('#list').removeClass('d-none');
                pollingFunction(this.searchData, 1000 * 30)
                let column = [
                    {name: 'serial', value: '序号', neglect: true},
                    {name: 'customerName', value: '货主', neglect: true},
                    {name: 'receiveTaskNo', value: '收货任务号', neglect: true},
                    {name: 'reservationNo', value: '预约号', neglect: true},
                    {name: 'status', value: '状态', neglect: true},
                    {name: 'asnNo', value: 'ASN单号', neglect: true},
                    {name: 'createSingleTime', value: '开单时间', neglect: true},
                    {name: 'finishedReceiveTime', value: '完成收货时间', neglect: true},
                    {name: 'receivePerson', value: '关单员', neglect: true},
                    {name: 'expectancyAmount', value: ' 预期数', neglect: true},
                    {name: 'receivedAmount', value: '已收数', neglect: true},
                    {name: 'unfinishedReceiveAmount', value: '未收数', neglect: true},
                    {name: 'receiveConsumeDuration', value: '收货耗时', neglect: true},
                    {name: 'action', value: '查看明细', neglect: true},
                    @can('入库管理-实时收货看板-关单')
                    {name: 'closeAsn', value: '关单', neglect: true},
                    @endcan
                ];
                new Header({
                    el: "table",
                    name: "details",
                    column: column,
                    data: this.resData.details.data,
                    restorationColumn: 'addtime',
                    isCheckAllBox:false,
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
                let column2 = [
                    {name: 'serial', value: '序号', neglect: true},
                    {name: 'receiveTaskNo', value: '收货任务号', neglect: true},
                    {name: 'asnNo', value: 'ASN号', neglect: true},
                    {name: 'reservationNo', value: '预约号', neglect: true},
                    {name: 'descr', value: '商品名称', neglect: true},
                    {name: 'sku', value: 'SKU', neglect: true},
                    {name: 'expectedQty', value: '预期数', neglect: true},
                    {name: 'receivedQty', value: '收货数', neglect: true},
                    {name: 'receivePerson', value: '收货人', neglect: true},
                    {name: 'putawayQty',class:"text-danger font-weight-bold", value: '上架数', neglect: true},
                    {name: 'putawayPerson', value: '上架人', neglect: true},
                    {name: 'unfinishedReceiveQty',class:"text-danger font-weight-bold", value: '未收数', neglect: true},
                ];
                new Header({
                    el: "table_inner",
                    name: "details",
                    column: column2,
                    data: this.resData.details.data,
                    restorationColumn: 'addtime',
                    isCheckAllBox:false,
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                getPageResult(url) {
                    axios.post(url, this.getSearch()).then(res => {
                        if (res.data.code !== 200) {
                            this.resData.details.data = [];
                            this.resData.details.total = 0
                            this.resData.details.current = 1
                            this.resData.details.pages = 0
                            this.resData.details.size = 50;
                        } else {
                            this.resData.details.data = res.data.data.list;
                            this.resData.details.total = res.data.data.page.total;
                            this.resData.details.current = res.data.data.page.pageNum;
                            this.resData.details.pages = res.data.data.page.pages
                            this.resData.details.size = res.data.data.page.pageSize;
                        }
                    });
                },
                getSearch() {
                    if (this.search.customerId!=null ||this.search.receiveTaskNo!=null ||this.search.reservationNo!=null
                        ||this.search.status!=null ||this.search.asnNo!=null ||this.search.createSingleStartTime!=null
                        ||this.search.createSingleEndTime!=null){
                        this.search.sign='有筛选';
                    }
                    let search = Object.assign({}, this.search);
                    search.startTime += ' 00:00:00';
                    search.endTime += ' 23:59:59';
                    return search;
                },
                //初始化日期为今天和昨天
                initSearchDate() {
                    let day1 = new Date();
                    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
                    let s1 = day1.getFullYear() + "-" + ((day1.getMonth() + 1) >= 10 ? (day1.getMonth() + 1) : ('0' + (day1.getMonth() + 1))) + "-" + (day1.getDate() >= 10 ? day1.getDate() : ('0' + day1.getDate()));
                    //今天的时间
                    let day2 = new Date();
                    day2.setTime(day2.getTime());
                    let s2 = day2.getFullYear() + "-" + ((day2.getMonth() + 1) >= 10 ? (day2.getMonth() + 1) : ('0' + (day2.getMonth() + 1))) + "-" + (day2.getDate() >= 10 ? day2.getDate() : ('0' + day2.getDate()));
                    this.search.startTime = s1;
                    this.search.endTime = s2;
                },
                searchData() {
                    this.current = 1;
                    this.pagination();
                },
                //根据环境获取不同的url
                getBaseUrl() {
                    let url = null;
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = 'http://127.0.0.1:8116'
                    } else if (env === 'production') {
                        url = 'https://device.baoshi56.com'
                    }
                    return url;
                },
                pagination(flag) {
                    if (flag === 'pre' && this.current > 1) {
                        this.current--;
                    } else if (flag === 'next' && this.current < this.resData.details.pages) {
                        this.current++;
                    }
                    let url = this.getBaseUrl() + `/api/receiveBoard/formList?size=${this.size}&current=${this.current}`
                    this.getPageResult(url);
                },
                showDetail({receiveTaskNo, reservationNo, asnNo,asnStatus,asnType,customerCode,warehouseId}) {
                    let url = this.getBaseUrl() + `/api/receiveBoard/receiveDetail?receiveTaskNo=${receiveTaskNo}&reservationNo=${reservationNo}&asnNo=${asnNo}`
                    axios.get(url, this.getSearch()).then(res => {
                        if (res.data.code !== 200) {
                            this.resData.itemDetail = null;
                        } else {
                            this.resData.asnStatus = asnStatus;
                            this.resData.asnType=asnType;
                            this.resData.customerId=customerCode;
                            this.resData.asnNo=asnNo;
                            this.resData.warehouseId=warehouseId;
                            this.resData.receiveTaskNo=receiveTaskNo;
                            this.resData.itemDetail = res.data.data;
                        }
                    });


                },
                getCloseAsnParam(item){
                    this.closeAsnParam.asnType=item.asnType;
                    this.closeAsnParam.customerId=item.customerCode;
                    this.closeAsnParam.asnNo=item.asnNo;
                    this.closeAsnParam.warehouseId=item.warehouseId;
                    this.closeAsnParam.user=this.user;
                    return Object.assign({}, this.closeAsnParam);
                },
                getCloseAsnDetailParam(){
                    this.closeAsnParam.asnType=this.resData.asnType;
                    this.closeAsnParam.customerId=this.resData.customerId;
                    this.closeAsnParam.asnNo=this.resData.asnNo;
                    this.closeAsnParam.warehouseId=this.resData.warehouseId;
                    this.closeAsnParam.user=this.user;
                    return Object.assign({}, this.closeAsnParam);
                },
                cleanCloseAsnParam(){
                    this.closeAsnParam.asnNo=null;
                    this.closeAsnParam.asnType=null;
                    this.closeAsnParam.customerId=null;
                    this.closeAsnParam.warehouseId=null;
                    this.closeAsnParam.user=null;
                },
                closeAsn(item) {
                    if(!confirm('确定要关闭ASN单号为：“'+item.asnNo+'”的订单吗？')){return};
                    let url = this.getBaseUrl() + `/api/receiveBoard/closeAsn`
                    axios.post(url, this.getCloseAsnParam(item)).then(res => {
                        if (res.data.code !== 200 || !res.data.data) {
                            window.tempTip.setDuration(2000);
                            window.tempTip.show("关单失败!");
                        } else {
                            window.tempTip.setDuration(2000);
                            window.tempTip.showSuccess("关单成功!");
                            this.resData.details.data.forEach(i=>{
                                if (i.receiveTaskNo===item.receiveTaskNo){
                                    i.asnStatus='99';
                                }
                            })
                            this.cleanCloseAsnParam();
                        }
                    });
                },
                closeAsnDetail() {
                    if(!confirm('确定要关闭ASN单号为：“'+this.resData.asnNo+'”的订单吗？')){return};
                    let url = this.getBaseUrl() + `/api/receiveBoard/closeAsn`
                    axios.post(url,this.getCloseAsnDetailParam()).then(res => {
                        if (res.data.code !== 200 || !res.data.data) {
                            window.tempTip.setDuration(2000);
                            window.tempTip.show("关单失败!");
                        } else {
                            window.tempTip.setDuration(2000);
                            window.tempTip.showSuccess("关单成功!");
                            this.resData.details.data.forEach(i=>{
                                if (i.receiveTaskNo===this.resData.receiveTaskNo){
                                    i.asnStatus='99';
                                }
                            })
                            this.cleanCloseAsnParam();
                        }
                    });
                },

            },

        });
    </script>
@endsection