|
|
@@ -0,0 +1,320 @@
|
|
|
+@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">
|
|
|
+ <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></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>@{{ 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.receiveTaskNo,item.reservationNo,item.asnNo)" type="button"
|
|
|
+ class="btn btn-primary" data-toggle="modal"
|
|
|
+ data-target="#staticBackdrop">
|
|
|
+ 查看明细
|
|
|
+ </button>
|
|
|
+ </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">
|
|
|
+ <div class="modal-content modal-xl">
|
|
|
+ <div class="modal-header modal-xl">
|
|
|
+ <h5 class="modal-title" id="staticBackdropLabel">明细</h5>
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true">×</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body modal-xl">
|
|
|
+ <!-- Scrollable modal -->
|
|
|
+ <div class="modal-dialog modal-xl modal-dialog-scrollable">
|
|
|
+ <table class="table table-striped table-bordered table-hover text-nowrap waybill-table"
|
|
|
+ style="background: #fff;" id="table_inner">
|
|
|
+ <tr v-for="(item,i) in resData.itemDetail" :key="i">
|
|
|
+ <td class="td-warm text-muted"><span>@{{ i+1 }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.receiveTaskNo }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.asnNo }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.reservationNo }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.descr }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.sku }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.expectedQty }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.receivedQty }}</span></td>
|
|
|
+ <td class="td-warm text-muted"><span>@{{ item.unfinishedReceiveQty }}</span></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </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: {
|
|
|
+ timer: null,
|
|
|
+ resData: {
|
|
|
+ details: {
|
|
|
+ data: [],
|
|
|
+ total: null,
|
|
|
+ current: 1,
|
|
|
+ pages: null,
|
|
|
+ size: 50,
|
|
|
+ },
|
|
|
+ itemDetail: null,
|
|
|
+ },
|
|
|
+ searchSelects: {
|
|
|
+ owners: {!! $owners !!},
|
|
|
+ statuses: ['创建', '进行中', '完成', '超时完成'],
|
|
|
+ },
|
|
|
+ selectTr: null,
|
|
|
+ search: {
|
|
|
+ customerId: null,
|
|
|
+ receiveTaskNo: null,
|
|
|
+ reservationNo: null,
|
|
|
+ status: null,
|
|
|
+ asnNo: null,
|
|
|
+ createSingleStartTime: null,
|
|
|
+ createSingleEndTime: null,
|
|
|
+ finishedReceiveTime: null,
|
|
|
+ receivePerson: null,
|
|
|
+ },
|
|
|
+ size: 50,
|
|
|
+ current: 1,
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let url = this.getBaseUrl() + `/api/receiveBoard/formList?size=${this.size}¤t=${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: 'customerName', value: '货主'},
|
|
|
+ {name: 'receiveTaskNo', value: '收货任务号'},
|
|
|
+ {name: 'reservationNo', value: '预约号'},
|
|
|
+ {name: 'status', value: '状态'},
|
|
|
+ {name: 'asnNo', value: 'ASN单号'},
|
|
|
+ {name: 'createSingleTime', value: '开单时间'},
|
|
|
+ {name: 'finishedReceiveTime', value: '完成收货时间'},
|
|
|
+ {name: 'receivePerson', value: '收货员'},
|
|
|
+ {name: 'expectancyAmount', value: ' 预期数'},
|
|
|
+ {name: 'receivedAmount', value: '已收数'},
|
|
|
+ {name: 'unfinishedReceiveAmount', value: '未收数'},
|
|
|
+ {name: 'receiveConsumeDuration', value: '收货时间'},
|
|
|
+ {name: 'action', value: '查看明细'},
|
|
|
+
|
|
|
+ ];
|
|
|
+ new Header({
|
|
|
+ el: "table",
|
|
|
+ name: "details",
|
|
|
+ column: column,
|
|
|
+ data: this.resData.details.data,
|
|
|
+ restorationColumn: 'addtime',
|
|
|
+ fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
|
|
|
+ }).init();
|
|
|
+ let column2 = [
|
|
|
+ {name: 'receiveTaskNo', value: '收货任务号'},
|
|
|
+ {name: 'asnNo', value: 'ASN号'},
|
|
|
+ {name: 'reservationNo', value: '预约号'},
|
|
|
+ {name: 'descr', value: '商品名称'},
|
|
|
+ {name: 'sku', value: 'SKU'},
|
|
|
+ {name: 'expectedQty', value: '预期数'},
|
|
|
+ {name: 'receivedQty', value: '已收数(上架)'},
|
|
|
+ {name: 'unfinishedReceiveQty', value: '未收数'},
|
|
|
+ ];
|
|
|
+ new Header({
|
|
|
+ el: "table_inner",
|
|
|
+ name: "details",
|
|
|
+ column: column2,
|
|
|
+ data: this.resData.details.data,
|
|
|
+ restorationColumn: 'addtime',
|
|
|
+ fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
|
|
|
+ }).init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getPageResult(url) {
|
|
|
+ tempTip.showSuccess('开始查询,请稍后!');
|
|
|
+ axios.post(url, this.getSearch()).then(res => {
|
|
|
+ tempTip.showSuccess('查询成功!');
|
|
|
+ if (res.data.data === undefined) {
|
|
|
+ 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() {
|
|
|
+ let search = Object.assign({}, this.search);
|
|
|
+ search.startTime += ' 00:00:00';
|
|
|
+ search.endTime += ' 23:59:59';
|
|
|
+ console.log(search);
|
|
|
+ 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}¤t=${this.current}`
|
|
|
+ this.getPageResult(url);
|
|
|
+ },
|
|
|
+ showDetail(receiveTaskNo, reservationNo, asnNo) {
|
|
|
+ let url = this.getBaseUrl() + `/api/receiveBoard/receiveDetail?receiveTaskNo=${receiveTaskNo}&reservationNo=${reservationNo}&asnNo=${asnNo}`
|
|
|
+ tempTip.showSuccess('开始查询,请稍后!');
|
|
|
+ axios.get(url, this.getSearch()).then(res => {
|
|
|
+ tempTip.showSuccess('查询成功!');
|
|
|
+ if (res.data.data === undefined) {
|
|
|
+ this.resData.itemDetail = null;
|
|
|
+ } else {
|
|
|
+ this.resData.itemDetail = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+@endsection
|