baoshi-was/resources/views/rejected/rejectedPushTask/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 ml-4 mt-3" data-toggle="tooltip" data-placement="top" title="选择全部">
                <input @change="checkAllBtn()" v-model="checkAll" type="checkbox" class="form-check-input"
                       id="checkAll">
                <label class="form-check-label" for="checkAll">选择全部</label>
            </div>
            <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">
                <select class="form-control selectpicker" title="货主" v-model="search.ownerId">
                    <option v-for="item of selectData.owners" :value="item.id">@{{ item.name }}</option>
                </select>
            </div>

            <div class="form-group m-2">
                <select class="form-control selectpicker" title="类型" v-model="search.type">
                    <option value="正品">正品</option>
                    <option value="次品">次品</option>
                </select>
            </div>

            <div class="form-group m-2">
                <select class="form-control selectpicker" title="类型" v-model="search.status">
                    <option selected value="创建">创建</option>
                    <option value="等待下载">等待下载</option>
                    <option value="已下载">已下载</option>
                    <option value="部分推单">部分推单</option>
                    <option value="已推单">已推单</option>
                    <option value="部分入库">部分入库</option>
                    <option value="已入库">已入库</option>
                </select>
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-info" @click="searchData()">查询</button>
            </div>
            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-info" @click="stopStoreUp()">批量停止攒单</button>
            </div>
        </div>
        <!--            表格-->
        <table class="table table-striped table-bordered table-hover card-body td-min-width-80" id="table">
            <tr v-for="(item,i) in details.data" @click="selectTr===i+1?selectTr=0:selectTr=i+1"
                :class="selectTr===i+1?'focusing' : ''">
                <td>
                    <input class="checkItem" type="checkbox" v-model="item.checked">
                    <span>@{{ i+1 }}</span>
                </td>
                <td class="td-warm text-muted"><span>@{{ item.id }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.type }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.status }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.asnNos }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.ownerName }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.storeUpHour }}</span></td>
                <td class="td-warm text-muted">
                    <span>
                        @{{ item.orderAmount }}
                          <button @click="showPackageDetail(item.id)" type="button"
                                  class="btn btn-sm btn-primary" data-toggle="modal"
                                  data-target="#staticBackdropShowPackageDetail">查看明细</button>
                    </span>
                </td>
                <td class="td-warm text-muted">
                    <span>
                        @{{ item.commodityAmount }}
                        <button @click="showCommodityDetail(item.id)" type="button"
                                class="btn btn-sm btn-primary" data-toggle="modal"
                                data-target="#staticBackdropShowCommodityDetail">查看明细</button>
                    </span>
                </td>
                <td class="td-warm text-muted"><span>
                         <button v-if="item.status == '创建'&&item.orderAmount>0&&item.commodityAmount>0"
                                 @click="stopStoreUp(item.id)" type="button"
                                 class="btn btn-success">停止攒单
                         </button>
                           <button v-if="item.status != '创建'"
                                   @click="downExcel(item.id)" type="button"
                                   class="btn btn-success">导出EXCEL
                         </button>
                    </span></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===details.pages?'disabled':''">
                    <button class="page-link" @click="pagination('next')">下一页</button>
                </li>
            </ul>
        </nav>

        <!-- Modal -->
        <div class="modal fade" id="staticBackdropShowPackageDetail" tabindex="-1" aria-labelledby="staticBackdropLabel"
             aria-hidden="true">
            <div class="modal-dialog " style="max-width: 100% !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 ">
                        <!-- Scrollable modal -->
                        <div class="modal-dialog  modal-dialog-scrollable" style="max-width: 100% !important;">
                            <table class="table table-sm"
                                   style="background: #fff;" id="tablePackage">
                                <tr v-for="(item,i) in resData.packageDetail.data" :key="i">
                                    <td class="td-warm text-muted"><span>@{{ i+1 }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.rejectedPushTaskHeaderId }}</span>
                                    </td>
                                    <td class="td-warm text-muted"><span>@{{ item.createdAt }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.checkedNumbers }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.ownerName }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.orderNumber }}</span></td>
                                    <td class="td-warm text-muted  text-truncate"
                                        style="max-width: 60px;">
                                        <span>@{{ item.sender }}</span>
                                    </td>
                                    <td class="td-warm text-muted  text-truncate"
                                        style="max-width: 150px;"><span>@{{ item.mobileSender }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.logisticNumber }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.logisticNumberReturn }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.logisticName }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.feeCollected }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.loadedStatus }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.barcodeGoods }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.nameGoods }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.amount }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.idQualityLabel }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.remark }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.orderRemark }}</span></td>
                                </tr>
                            </table>
                        </div>

                        <nav aria-label="...">
                            <ul class="pagination">
                                <li class="page-item" :class="resData.packageDetail.current===1?'disabled':''">
                                    <button class="page-link" @click="packagePagination('pre')">上一页</button>
                                </li>
                                <li class="page-item"
                                    :class="resData.packageDetail.current===resData.packageDetail.pages?'disabled':''">
                                    <button class="page-link" @click="packagePagination('next')">下一页</button>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="staticBackdropShowCommodityDetail" tabindex="-1"
             aria-labelledby="staticBackdropLabel"
             aria-hidden="true">
            <div class="modal-dialog " 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 ">
                        <!-- Scrollable modal -->
                        <div class="modal-dialog  modal-dialog-scrollable">
                            <table class="table table-sm"
                                   style="background: #fff;" id="tableCommodity">
                                <tr v-for="(item,i) in resData.commodityDetail.data" :key="i">
                                    <td class="td-warm text-muted"><span>@{{ i+1 }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.rejectedPushTaskHeaderId }}</span>
                                    </td>
                                    <td class="td-warm text-muted"><span>@{{ item.sku }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.nameGoods }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.amount }}</span></td>
                                    <td class="td-warm text-muted"><span>@{{ item.idQualityLabel }}</span></td>
                                </tr>
                            </table>
                        </div>
                        <nav aria-label="...">
                            <ul class="pagination">
                                <li class="page-item" :class="resData.commodityDetail.current===1?'disabled':''">
                                    <button class="page-link" @click="commodityPagination('pre')">上一页</button>
                                </li>
                                <li class="page-item"
                                    :class="resData.commodityDetail.current===resData.commodityDetail.pages?'disabled':''">
                                    <button class="page-link" @click="commodityPagination('next')">下一页</button>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                resData: {
                    packageDetail: {
                        data: [],
                        total: null,
                        current: 1,
                        pages: null,
                        size: 50,
                    },
                    commodityDetail: {
                        data: [],
                        total: null,
                        current: 1,
                        pages: null,
                        size: 50,
                    }

                },
                submitData: {
                    type: null,
                    warehouseId: null,
                    allowMixed: null,
                    volume: null,
                    loadWeight: null,
                    createAmount: null,
                },
                selectData: {
                    owners: {!! $owners !!}
                },
                checkAll: false,
                selectTr: 0,
                details: {
                    data: [],
                    total: null,
                    current: 1,
                    pages: null,
                    size: 50,
                },
                search: {
                    ownerId: null,
                    type: null,
                    status: '创建',
                    ownerIdList: {!! $ownerIds !!}
                },
                size: 50,
                current: 1,
            },
            created() {
                let url = this.getBaseUrl() + `/api/wms/rejectedPushTask/list?size=${this.size}&current=${this.current}`;
                this.getPageResult(url);
            },
            mounted: function () {
                $('#list').removeClass('d-none');
                $(".up").slideUp();
                let column = [
                    {name: 'row_num', value: '序号'},
                    {name: 'id', value: '推单任务编号'},
                    {name: 'type', value: '任务类型'},
                    {name: 'status', value: '状态'},
                    {name: 'asnNos', value: 'ASN单号'},
                    {name: 'ownerName', value: '货主'},
                    {name: 'storeUpHour', value: '积攒时间'},
                    {name: 'orderAmount', value: '订单数'},
                    {name: 'commodityAmount', value: '商品数'},
                    {name: 'action', value: '操作'},
                ];
                new Header({
                    el: "table",
                    name: "details",
                    column: column,
                    data: this.details.data,
                    restorationColumn: 'addtime',
                    isCheckAllBox: false,
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();

                let columnPackage = [
                    {name: 'id', value: '序号'},
                    {name: 'rejectedPushTaskHeaderId', value: '推单任务号'},
                    {name: 'createdAt', value: '日期'},
                    {name: 'checkedNumbers', value: '审核号'},
                    {name: 'ownerName', value: '客户名称'},
                    {name: 'orderNumber', value: '订单号'},
                    {name: 'sender', value: '姓名'},
                    {name: 'mobileSender', value: '手机'},
                    {name: 'logisticNumber', value: '原单单号'},
                    {name: 'logisticNumberReturn', value: '退回单号'},
                    {name: 'logisticName', value: '退回公司'},
                    {name: 'feeCollected', value: '到付费用'},
                    {name: 'loadedStatus', value: '是否入库'},
                    {name: 'barcodeGoods', value: '商品条码'},
                    {name: 'nameGoods', value: '商品名称'},
                    {name: 'amount', value: '商品数量'},
                    {name: 'idQualityLabel', value: '质量状态'},
                    {name: 'remark', value: '备注'},
                    {name: 'orderRemark', value: '退单备注'},
                ];
                new Header({
                    el: "tablePackage",
                    name: "details",
                    column: columnPackage,
                    data: this.resData.packageDetail.data,
                    restorationColumn: 'addtime',
                    isCheckAllBox: false,

                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();

                let columnCommodity = [
                    {name: 'id', value: '序号'},
                    {name: 'rejectedPushTaskHeaderId', value: '推单任务号'},
                    {name: 'sku', value: 'SKU'},
                    {name: 'nameGoods', value: '商品名称'},
                    {name: 'amount', value: '商品数量'},
                    {name: 'idQualityLabel', value: '质量状态'},
                ];
                new Header({
                    el: "tableCommodity",
                    name: "details",
                    column: columnCommodity,
                    data: this.resData.commodityDetail.data,
                    restorationColumn: 'addtime',
                    isCheckAllBox: false,
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                packagePagination(flag) {
                    console.log(flag);
                    if (flag === 'pre' && this.resData.packageDetail.current > 1) {
                        this.resData.packageDetail.current--;
                    } else if (flag === 'next' && this.resData.packageDetail.current < this.resData.packageDetail.pages) {
                        this.resData.packageDetail.current++;
                    }
                    this.showPackageDetail(this.resData.packageDetail.data[0].rejectedPushTaskHeaderId);
                },
                commodityPagination(flag) {
                    console.log(flag);
                    if (flag === 'pre' && this.resData.commodityDetail.current > 1) {
                        this.resData.commodityDetail.current--;
                    } else if (flag === 'next' && this.resData.commodityDetail.current < this.resData.commodityDetail.pages) {
                        this.resData.commodityDetail.current++;
                    }
                    this.showCommodityDetail(this.resData.commodityDetail.data[0].rejectedPushTaskHeaderId);
                },
                showCommodityDetail(id) {
                    let url = this.getBaseUrl() + `/api/wms/rejectedPushTask/commodity/list?size=${this.resData.commodityDetail.size}&current=${this.resData.commodityDetail.current}&rejectedPushTaskId=${id}`
                    tempTip.showSuccess('开始查询,请稍后!');
                    axios.get(url).then(res => {
                        tempTip.showSuccess('查询成功!');
                        if (res.data.code !== 200) {
                            tempTip.show('接口异常!');
                            this.resData.commodityDetail.data = [];
                            this.resData.commodityDetail.total = 0
                            this.resData.commodityDetail.current = 1
                            this.resData.commodityDetail.pages = 0
                            this.resData.commodityDetail.size = 50;
                        } else {
                            this.resData.commodityDetail.data = res.data.data.list;
                            this.resData.commodityDetail.total = res.data.data.page.total;
                            this.resData.commodityDetail.current = res.data.data.page.pageNum;
                            this.resData.commodityDetail.pages = res.data.data.page.pages
                            this.resData.commodityDetail.size = res.data.data.page.pageSize;
                        }
                    });
                },
                showPackageDetail(id) {
                    let url = this.getBaseUrl() + `/api/wms/rejectedPushTask/package/list?size=${this.resData.packageDetail.size}&current=${this.resData.packageDetail.current}&rejectedPushTaskId=${id}`
                    tempTip.showSuccess('开始查询,请稍后!');
                    axios.get(url).then(res => {
                        tempTip.showSuccess('查询成功!');
                        if (res.data.code !== 200) {
                            tempTip.show('接口异常!');
                            this.resData.packageDetail.data = [];
                            this.resData.packageDetail.total = 0
                            this.resData.packageDetail.current = 1
                            this.resData.packageDetail.pages = 0
                            this.resData.packageDetail.size = 50;
                        } else {
                            this.resData.packageDetail.data = res.data.data.list;
                            this.resData.packageDetail.total = res.data.data.page.total;
                            this.resData.packageDetail.current = res.data.data.page.pageNum;
                            this.resData.packageDetail.pages = res.data.data.page.pages
                            this.resData.packageDetail.size = res.data.data.page.pageSize;
                        }
                    });
                },
                checkAllBtn() {
                    for (let item of this.details.data) {
                        item.checked = this.checkAll;
                    }
                },
                stopStoreUp(id = null) {
                    let idList = null
                    let url = this.getBaseUrl() + `/api/wms/rejectedPushTask/stopStoreUp/`;

                    if (id == null) {
                        let filter = this.details.data.filter(i => i.checked === true);
                        if (filter.length === 0) {
                            tempTip.show("选中的元素为空");
                            return;
                        }
                        idList = filter.map(i => i.id);
                    } else {
                        idList = [id];
                    }
                    axios.post(url, {idList}).then(res => {
                        if (res.data.code !== 200) {
                            tempTip.show(res.data.message);
                        } else {
                            tempTip.showSuccess('修改状态成功!');
                            this.searchData();
                        }
                    });
                },
                getPageResult(url) {
                    tempTip.showSuccess('开始查询,请稍后!');
                    axios.post(url, this.getSearch()).then(res => {
                        if (res.data.code !== 200) {
                            tempTip.show('接口异常!');
                            this.details.data = [];
                            this.details.total = 0
                            this.details.current = 1
                            this.details.pages = 0
                            this.details.size = 50;
                        } else {
                            tempTip.showSuccess('查询成功!');
                            this.details.data = res.data.data.list;
                            this.details.total = res.data.data.page.total;
                            this.details.current = res.data.data.page.pageNum;
                            this.details.pages = res.data.data.page.pages
                            this.details.size = res.data.data.page.pageSize;
                        }
                    });
                },
                getSearch() {
                    return Object.assign({}, this.search);
                },
                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:8118'
                    } else if (env === 'production') {
                        url = 'https://swms.baoshi56.com'
                    }
                    return url;
                },
                pagination(flag) {
                    if (flag === 'pre' && this.current > 1) {
                        this.current--;
                    } else if (flag === 'next' && this.current < this.details.pages) {
                        this.current++;
                    }
                    let url = this.getBaseUrl() + `/api/wms/rejectedPushTask/list?size=${this.size}&current=${this.current}`;
                    this.getPageResult(url);
                },

                downExcel(id) {
                    let url = this.getBaseUrl();
                    url += `/api/wms/rejectedPushTask/export/create?rejectedPushTaskId=${id}`;
                    axios.get(url).then(res => {
                        if (res.data.code === 200) {
                            let filename = res.data.data;
                            let downUrl = this.getBaseUrl() + `/api/wms/rejectedPushTask/export/download?filename=${filename}`;
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link.href = downUrl;
                            link.download = `${filename}.xlsx`;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            tempTip.showSuccess('导出成功!');
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.data);
                        }
                    })
                }
            },

        });
    </script>
@endsection