mes_mobile/pages/production/productionOrder.vue

<template>
	<!-- 生产工单 -->
	<view class="page_padding columnFlex">
		<view class="headerView" :class="headerFixed?'headerViewFixed':''">
			<searchView placeholder=" 搜索工单" />
		</view>
		<view class="flexBox">
			<view v-for="(item,index) in list" :key="index" class="detail_list contentboxsty font13">
				<view @click="toDetail(item.id)">
					<view class="list_top">
						<view class="top_left">
							工单号：{{item.order_sn}}
						</view>
						<view class="top_right">
							工单详情 <text class="arrow iconfont icon-gengduo"></text>
						</view>
					</view>
					<view class="list_content font13">
						<view class="list_centre">
							<view class="centre_left">
								<view class="name font_bold">
									算法出材率
								</view>
								<view class="percentage font24">
									{{item.algorithm && item.algorithm!=''?item.algorithm+'':'0'}}%
								</view>
							</view>
							<view class="centre_left">
								<view class="name font_bold">
									实际出材率
								</view>
								<view class="percentage font24">
									{{item.reality && item.reality!=''?item.reality:'0'}}%
								</view>
							</view>
						</view>
						<view class="list_below">
							<view class="row">
								<view class="row_left">
									<text class="name">状态</text>
									<text class="text status">{{item.active_status_label}}</text>
								</view>
								<view class="row_right">
									<text class="name">加工规格</text>
									<text class="text">{{item.order_spec}}</text>
								</view>
							</view>
							<view class="row">
								<view class="row_left">
									<text class="name">生产开始</text>
									<text class="text">{{item.plan_date}}</text>
								</view>
								<view class="row_right">
									<text class="name">工单耗时</text>
									<text class="text">{{item.progress_rate}}</text>
								</view>
							</view>
							<view class="row">
								<view class="row_left">
									<text class="name">工单数量</text>
									<text class="text">{{item.order_number}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<loadMore :noData="loadParams.noData" :loading="loadParams.loading" :loadEnd="loadParams.loadEnd" />
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				headerFixed:false,
				list:[],
				params:{
					page:1,
					pageSize:10,
				},
				loadParams:{
					noData:false,
					loading:false,
					loadEnd:false
				}
			}
		},
		onShow(){
			
		},
		onReady() {
			this.listData();
		},
		onPageScroll(e){
			if(e.scrollTop>30){
				this.headerFixed = true;
			}else{
				this.headerFixed = false;
			}
		},
		// 上拉刷新
		onPullDownRefresh(){
			this.params.page = 1;
			this.loadParams = {
				noData:false,
				loading:false,
				loadEnd:false
			};
			this.listData(2);
		},
		// 加载下一页
		onReachBottom(){
			if(!(this.loadParams.loadEnd || this.loadParams.noData)){
				this.loadParams.loading = true;
				this.params.page ++;
				this.listData();
			}
		},
		methods: {
			listData(type=1){
				if(this.params.page == 1){
					uni.showLoading({
						title: '加载中',
						mask: true
					})
				}
				this.$api.request('/order.list',this.params).then(res=>{
					if(type ==2){
						uni.stopPullDownRefresh();
					}
					setTimeout( ()=> {
					 	uni.hideLoading();
					}, 200);
					
					this.loadParams.loading = false;
					if(res.data.rows.length ==0 && this.params.page == 1){
						this.loadParams.noData = true;
					}
					if(res.data.rows.length>0 && res.data.rows.length < this.params.pageSize){
						this.loadParams.loadEnd = true;
					}
					if(this.params.page == 1){
						this.list = res.data.rows;
					}else{
						this.list = this.list.concat(res.data.rows);
					}
				}).catch(err=>{
					setTimeout( ()=> {
					 	uni.hideLoading();
					}, 200);
				})
			},
			//跳转工单详情
			toDetail(id){
				uni.navigateTo({
					url:'/pages/production/productionDetail?id='+id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.page_padding{
	padding-top: 0;
}
.detail_list{
	.list_centre{display: flex;text-align: center;padding-bottom: 10px;
		view{flex: 1;}
		.percentage{color: $uni-text-color-primary;margin: 10px 0 0 0;}
	}
	.list_below{padding-bottom: 12px;
		.row{display: flex;padding-top: 12px;
			.row_left{
				white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
				padding-right: 4px;
			}
			.row_right{
				white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
				padding-left: 4px;
			}
			view{flex: 1;}
			.row_left .name,.row_right .name{
				display: inline-block;
				width: 65px;
				font-weight: bold;
			}
			.status{
				color: $uni-text-color-warning;
			}
		}
	}
	
}
</style>