list.vue 4.6 KB
<template>
	<view style="background: #fff; min-height: calc(100vh - 44px)">
    <view class="search-header">
      <scanlistener
	  v-if="showScanlistener"
	  suffixIcon="scan"
	  v-model="keyword"
	  :placeholder="$t('请扫描自编号')"
	  @iconClick="scanCode"
	  @confirm="searchOrder"
	  @submit="keyword=$event; searchOrder()"></scanlistener>
    </view>
    <view class="scroll">
      <view class="list-row list-header">
        <view class="">{{$t('自编号')}}</view>
        <view class="">{{$t('柜号')}}</view>
        <view class="">{{$t('目的地')}}</view>
        <view class="">{{$t('订单数')}}</view>
        <view class="">{{$t('入仓原因')}}</view>
        <view class="">{{$t('状态')}}</view>
      </view>
      <view>
        <view v-for="(v, key) in listData" :class="{'list-row': true, 'row-bg' : key % 2 === 0}" :key="key" @tap="toDetail(v)">
          <view class="">
            {{ v.selfNo }}
          </view>
          <view class="">{{ v.cubNo }}</view>
          <view class="">{{ v.destWarehouseResp.titleZh }}</view>
          <view class="">{{ v.orderNum }}</view>
          <view v-if="v.overMachineAbnormalStatus === 1">{{$t('删单退场')}}</view>
          <view v-else class="">{{ {1: $t('全部退场'), 2: $t('部分退场'), 3: $t('删单退场')}[v.dcCheckStatus] }}</view>
          <view class="">{{ v.checkDealStatus == 1 ? $t('已处理') : $t('待处理') }}</view>
        </view>
          <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
      </view>
    </view>
	</view>
</template>

<script>
	import util from '../../util/util.js';
	import { getExitPage } from './api'

	export default {
		name: 'warehouseing-list',
		data() {
			return {
				listData: [],
				page: 1,
				keyword: '',
				// oldKeyword: '',
				status: 'more',
				contentText: {
					contentdown: this.$t('上拉加载更多'),
					contentrefresh: this.$t('加载中'),
					contentnomore: this.$t('没有更多')
				},
				returnLoadId: null,
				// 7(垫),8(木),9(纸)
				advanceTypeList:[
					{id:7,value:this.$t('')},
					{id:8,value:this.$t('')},
					{id:9,value:this.$t('')},
				],
				modalShow:!1,
				modalId:'',
				modalData:{},
				onHideFlag:false
			};
		},
		methods: {
			scanCode() {
				uni.scanCode({
				  success: (res) => {
					console.log('条码类型:' + res.scanType);
					console.log('条码内容:' + res.result);
					this.keyword = res.result
					this.searchOrder()
				  }
				})
			},
			searchOrder() {
				this.page = 1
				setTimeout(() => {
					this.getData(this.keyword)
				}, 100)
			},
			getData(selfNo) {
				let that = this
				const params = {
				  page: this.page,
				  rows: 20,
				  selfNo
				}
				getExitPage(params).then(res => {
					const data = res.list
					if (that.page == 1) this.listData = [];

					if (data.length > 0) {
						that.listData = that.listData.concat(data);
						that.status = 'more';
					}
					if (res.total === that.listData.length) that.status = 'noMore';

					uni.stopPullDownRefresh();
				});
			},
			toDetail(data) {
				console.log(data);
				this.modalId = data.id;
				this.modalData = data;
				uni.navigateTo({
					url: './detail?id=' + data.id
				});
			},
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getData();
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.status = 'loading';
				this.page++;
				this.getData();
			}
		},
		onLoad: function(option) {
			uni.setNavigationBarTitle({
				title:this.$t('空运退场到仓列表')
			})
			this.getData();
		},
		onShow(){
			if(this.onHideFlag){
				this.page = 1;
				this.getData(this.keyword);
			}
		},
		onHide(){
			this.onHideFlag = true;
		},
		onBackPress(options) {
			uni.reLaunch({
				url: '../index/index'
			});
			return true;
		}
	};
</script>

<style lang="scss" scoped>
  .search-header{
    ::v-deep .uni-easyinput__content {
      border-radius: 20px;
      padding-right: 10px;
      background: rgba($color: #fff, $alpha: 0.5) !important;
      border: none;
      // opacity: 0.5;
    }
    ::v-deep .uni-input-placeholder {
      padding-left: 8px;
      color: #b2c9f3;
    }
    ::v-deep .uni-input-input {
      padding-left: 8px;
    }
  }
  .scroll {
    margin-top: -8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 8px;
    background: #fff;
    .list-row {
      display: flex;
      align-items: center;
      // line-height: 24px;
      padding: 8px 0;
      view {
        flex: 1;
        text-align: center;
        padding: 0 2px;
      }
    }
    .list-header {
      font-weight: bold;
    }
    .row-bg {
      background: #ebebed;
    }
  }
</style>