baoshi-was/resources/views/storeOut/storeOutReview/index.blade.php

@extends('layouts.app')
@section('title','出库复核')
@section('head')
    <style>
        /*查询容器*/
        .select-wrapper {
            margin: 30px 20px;
            width: 100%;
            height: 50px;
            font-size: 32px;
            line-height: 50px;
        }

        .select-wrapper > div {
            float: left;
            margin-left: 30px;
        }

        table {
            margin: 10px;
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: auto;
            vertical-align: text-top;
            border: rgb(245, 245, 245) solid 1px;
        }

        /*表头*/
        table .header {
            background-color: rgb(250, 250, 250);
            font-weight: bold;
            font-size: 16px;
            position: -webkit-sticky;
            position: sticky;
            top: 10px;
        }

        /*table .body .action .more-action {*/

        /*}*/

        table .body .action .more-action:focus + .more-action-list {
            display: block !important;
            /*background-color: red;*/
        }

        table .body .action .more-action + .more-action-list {
            display: none;
            position: absolute;
            margin-left: 50px;
        }

        table .body .action .more-action-list .more-action-item {
            display: block;
        }

        table tr {
            border-bottom: rgb(239, 239, 239) solid 1px;
        }

        .info-wrapper {
            min-width: 768px;
            overflow: hidden;
        }

        .commodity-all-wrapper {
            max-height: 300px;
            margin-bottom: 10px;
            overflow: scroll;
        }

        .commodity-all-wrapper::-webkit-scrollbar {
            width: 0;
        }

        .reviewed-commodity-wrapper {
            max-height: 300px;
            margin-bottom: 10px;
        }

        .reviewed-commodity-wrapper .commodity-list-wrapper {
            float: left;
            width: 70%;
            height: 380px;

        }

        /*新箱号*/
        .reviewed-commodity-wrapper .commodity-list-wrapper .new-box-wrapper {
            height: 80px;
        }

        .new-box-wrapper label {
            line-height: 80px;
            margin-left: 50px;
            font-size: 30px;
            font-weight: bold;
        }

        .new-box-wrapper input {
            font-size: 30px;
        }

        .new-box-wrapper button {
            font-size: 25px;
            margin-left: 20px;
            margin-bottom: 12px;
        }

        .reviewed-commodity-wrapper .commodity-list-wrapper .commodity-list {
            overflow: scroll;
            height: 300px;
        }

        .reviewed-commodity-wrapper .commodity-list-wrapper .commodity-list::-webkit-scrollbar {
            width: 0;
        }

        .reviewed-commodity-wrapper .commodity-info {
            float: left;
            width: 30%;
        }

        .commodity-info .info-item {
            font-size: 18px;
            width: 100%;
            display: block;
            margin: 5px 0;
        }

        .commodity-info .info-item label {
            display: inline-block;
            width: 100px;
            text-align: right;
        }

        .commodity-info .info-item input {
            vertical-align: top;

        }

        .review-status-wrapper {
            height: 75px;
            margin-bottom: 10px;
        }

        .review-status-wrapper .review-status-item {

        }

        .review-status-wrapper .review-status-item .description {
            font-size: 16px;
        }

        .review-status-wrapper .review-status-item .commodity-total-number,
        .review-status-wrapper .review-status-item .commodity-packed-number,
        .review-status-wrapper .review-status-item .commodity-unpacked-number,
        .review-status-wrapper .review-status-item .commodity-scan-number {
            font-size: 30px;
            font-weight: bold;
            display: inline-block;
            width: 100px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin-top: 20px;
            margin-left: 20px;
        }

        .review-status-wrapper .review-status-item .commodity-total-number {
            background-color: rgb(235, 199, 13);
        }

        .review-status-wrapper .review-status-item .commodity-packed-number {
            background-color: rgb(118, 191, 226);
        }

        .review-status-wrapper .review-status-item .commodity-unpacked-number {
            background-color: rgb(237, 9, 9);
        }

        .review-status-wrapper .review-status-item .commodity-scan-number {
            background-color: rgb(25, 230, 48);
        }

        .button-list {
            height: 75px;
            margin-bottom: 10px;
        }

        .button-list button {
            float: left;
            margin: 3px 25px;
            width: 100px;
        }
    </style>
@stop
@section('content')
    @include('shared._messages')
    @include('shared._error')
    <div id="list" class="d-none">
        <div class="container-fluid">
            <div class="info-wrapper">
                <div class="select-wrapper">
                    <div class="input-wrapper">
                        <label for="orderno">订单号：</label>
                        <input autofocus @keydown.enter="apiGetOrderDetail()" type="text" id="orderno"
                               v-model="selectParameters.orderno">
                    </div>
                    <div class="input-wrapper">
                        <label for="waveno">波次号：</label>
                        <input @keydown.enter="apiGetOrderDetail()" type="text" id="waveno"
                               v-model="selectParameters.waveno">
                    </div>
                    <div class="input-wrapper">
                        <label for="expressno">快递单号：</label>
                        <input @keydown.enter="apiGetOrderDetail()" type="text" id="expressno"
                               v-model="selectParameters.expressno">
                    </div>
                    <div class="btn-wrapper">
                        <button @click="apiGetOrderDetail()" type="button" class="btn btn-primary btn-lg"
                                id="btn-search">查询
                        </button>
                        <button @click="clearSelectParameters()" type="button" class="btn btn-primary btn-lg">清除
                        </button>
                    </div>
                </div>
                <div class="commodity-all-wrapper">
                    <table class="table  table-bordered table-hover">
                        <tr class="header">
                            <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="(v,k) of orderDetails" @click="clickCurrentDetail(v)">
                            <td>@{{ k+1 }}</td> {{--行号--}}
                            <td>@{{ v.sku }}</td> {{--产品代码--}}
                            <td>@{{ v.skudescrc }}</td> {{--中文描述--}}
                            <td>@{{ v.status_name }}</td> {{--状态--}}
                            <td>@{{ v.packflag }}</td> {{--装箱--}}
                            <td>@{{ v.qty }}</td> {{--分配数--}}
                            <td>@{{ v.packedqty }}</td> {{--复核数--}}
                            <td>@{{ v.qty - v.packedqty }}</td> {{--未复核数--}}
                            <td>@{{ v.lotatt08 }}</td> {{--质量状态--}}
                            <td>-</td> {{--备注--}}
                            <td>@{{ v.location }}</td> {{--拣货库位--}}
                            <td>@{{ v.sku }}</td> {{--英文描述--}}
                            <td>@{{ v.alternate_sku1 }}</td> {{--产品条码--}}
                            <td>操作1 更多</td> {{--操作 --}}
                        </tr>

                    </table>
                </div>
                <div class="reviewed-commodity-wrapper">
                    <div class="commodity-list-wrapper">
                        <!--新箱号-->
                        <div class="new-box-wrapper">
                            <label for="new-box-number">新箱号: </label>
                            <input type="text" class="new-box-input" id="new-box-number">
                            <button class="btn btn-info">清除</button>
                        </div>
                        <div class="commodity-list">
                            <table>
                                <tr class="header">
                                    <td>产品代码</td>
                                    <td>中文描述</td>
                                    <td>英文描述</td>
                                    <td>数量</td>
                                    <td>操作</td>
                                </tr>

                                <tr class="body" v-for="(v,k) of reviewedSkus">
                                    <td>@{{ v.sku }}</td>
                                    <td>@{{ v.skudescrc }}</td>
                                    <td>@{{ v.sku }}</td>
                                    <td>@{{ v.inputQty }}</td>
                                    <td class="action">
                                        <a href="javascript:;">操作1</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="commodity-info">
                        <div class="info-item">
                            <label for="commodity-code">产品编码: </label>
                            <input type="text" id="commodity-code" v-model="currentDetail.alternate_sku1">
                        </div>
                        <div class="info-item">
                            <label for="amount">数量: </label>
                            <input @keydown.enter="reviewSku()" type="number" id="amount" v-model="currentDetail.qty">
                        </div>
                        <div class="info-item">
                            <label for="unit">单位: </label>
                            <input disabled="true" type="text" id="unit" v-model="currentDetail.uom">
                        </div>
                    </div>
                </div>
                <div class="review-status-wrapper row col-8">
                    <div class="review-status-item col">
                        <span class="description">产品总数</span>
                        <span class="commodity-total-number">@{{ reviewStatus.qty }}</span>
                    </div>
                    <div class="review-status-item col">
                        <span class="description">已装箱数</span>
                        <span class="commodity-packed-number">@{{ reviewStatus.packedqty }}</span>
                    </div>
                    <div class="review-status-item col">
                        <span class="description">未装箱数</span>
                        <span class="commodity-unpacked-number">@{{ reviewStatus.unpackedqty }}</span>
                    </div>
                    <div class="review-status-item col">
                        <span class="description">扫描数量</span>
                        <span class="commodity-scan-number">@{{ reviewStatus.scanedqty }}</span>
                    </div>
                </div>
                <div class="button-list">
                    <button class="btn btn-info">装箱完成</button>
                    <button class="btn btn-info">打印装箱单</button>
                    <button class="btn btn-info">装箱标签</button>
                    <button class="btn btn-info">确定</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                selectParameters: {
                    orderno: '',
                    waveno: '',
                    expressno: ''
                },
                orderDetails: [],
                currentDetail: {
                    alternate_sku1: null,
                    qty: 1,
                    uom: null,
                },
                reviewStatus: {
                    qty: 0,
                    packedqty: 0,
                    unpackedqty: 0,
                    scanedqty: 0,
                },
                reviewedSkus: []
            },
            created() {

            },
            mounted() {
                $('#list').removeClass('d-none');
            },
            methods: {
                apiGetOrderDetail() {
                    //查询条件不能为空
                    let preg = '[a-zA-z0-9]+';//包含任意字母，数字
                    if (
                        (!this.selectParameters.orderno.match(preg)) &&
                        (!this.selectParameters.waveno.match(preg)) &&
                        (!this.selectParameters.expressno.match(preg))
                    ) {
                        tempTip.setDuration(3000);
                        tempTip.show("查询条件不能为空");
                        return;
                    }
                    //拼接查询条件
                    let url = '{{ url('apiLocal/storeOut/storeOutReview/apiGetOrderDetail/?') }}';
                    if (this.selectParameters.orderno.match(preg)) {
                        url += ("orderno=" + this.selectParameters.orderno.trim());
                    } else if (this.selectParameters.waveno.match(preg)) {
                        url += ("waveno=" + this.selectParameters.waveno.trim());
                    } else if (this.selectParameters.expressno.match(preg)) {
                        url += ("expressno=" + this.selectParameters.expressno.trim());
                    }
                    document.getElementById('btn-search').disabled = true;
                    tempTip.setDuration(2000);
                    tempTip.showSuccess('查询中请稍后!');
                    axios.get(url).then(res => {
                        if (res.data.success) {
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('成功!');
                            /*orderDetails 赋值*/
                            this.orderDetails = res.data.data;
                            /*reviewStatus 赋值*/
                            this.reviewStatus.qty = this.orderDetails.reduce((sum, item) => sum + Number(item.qty), 0);
                            this.reviewStatus.packedqty = this.orderDetails.reduce((sum, item) => sum + Number(item.packedqty), 0);
                            this.reviewStatus.packedqty = this.reviewStatus.qty - this.reviewStatus.packedqty;
                            /*产品编码自动获取焦点*/
                            document.getElementById('commodity-code').focus();
                        }
                        document.getElementById('btn-search').disabled = false;
                    }).catch(err => {
                        document.getElementById('btn-search').disabled = false;
                        tempTip.setDuration(2000);
                        tempTip.show('系统异常' + err);
                    });
                },
                /*清空查询输入*/
                clearSelectParameters() {
                    this.selectParameters.orderno = '';
                    this.selectParameters.waveno = '';
                    this.selectParameters.expressno = '';
                },
                /*点击选中商品*/
                clickCurrentDetail(currentDetail) {
                    this.currentDetail.alternate_sku1 = currentDetail.alternate_sku1;
                    this.currentDetail.uom = currentDetail.uom;
                    document.getElementById('amount').focus();
                },
                reviewSku() {
                    //查询输入的产品编码
                    let selectedSkuIndex = this.orderDetails.findIndex(item => {
                        return item.alternate_sku1 === this.currentDetail.alternate_sku1;
                    });
                    console.log(selectedSkuIndex);
                    //添加inputQty属性
                    if (selectedSkuIndex !== -1) this.orderDetails[selectedSkuIndex].inputQty = this.currentDetail.qty;

                    if (this.currentDetail.qty === 0) {
                        tempTip.setDuration(2000);
                        tempTip.show('数量不能为0！');
                    } else if (selectedSkuIndex === -1) {
                        tempTip.setDuration(2000);
                        tempTip.show('输入产品编码有误！');
                    } else if (this.currentDetail.qty > (this.orderDetails[selectedSkuIndex].qty - this.orderDetails[selectedSkuIndex].packedqty)) {
                        tempTip.setDuration(2000);
                        tempTip.show('输入数量不能大于未复核数！');
                    } else {
                        this.reviewedSkus.unshift(this.orderDetails[selectedSkuIndex]);//添加到头部
                        tempTip.setDuration(2000);
                        tempTip.showSuccess('成功！');
                        this.orderDetails.splice(selectedSkuIndex, 1);
                    }
                }
            },
            filters: {},
        });
    </script>
@endsection