aiot-app/pages/production/order/prepare/material.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="领料需求清单"
      @clickLeft="back"
    >
    </uni-nav-bar>
	<uni-forms class="list" ref="form" :modelValue="formData" :rules="rules"  validate-trigger="blur">
		<div class="list-item" v-for="(item,index) in formData.list" :key="index">
			<div class="item-title" v-if="index==0">
				<div>W3004536  <span>混炼料-A</span></div>
				<div class="del" @click="remove(item,index)">删除</div>
			</div>
			<div class="item-title" v-else>
				<div>W3004536  <span>挤压钻针干燥车</span></div>
				<div class="del" @click="remove(item,index)">删除</div>
			</div>
			<div class="item-content">
				<template v-if="index==0">
					<div class="content-line">
						<div class="line-left">
							<span>牌号</span> 
							<p>YL10.2</p>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>数量</span> 
							<p>
								<uni-forms-item 
								   ref="input"
							       :rules="[{'required': true,errorMessage: '数量必填'},{pattern:/^[1-9]\d*$/,errorMessage: '请输入正整数',trigger: 'blur'}]" :key="item.id"
							       :name="['list',index,'number']"
								   style="margin-top: 40rpx;"
								>
									<uni-easyinput type="number" v-model="item.number" 
									/>
								</uni-forms-item>
								KG
							</p>
						</div>
						<div class="line-right">
							<u-button class="right-minus" @click="reduce(item,index)" :disabled="item.number<2">-</u-button>
							<u-button class="right-add" @click="add(item,index)">+</u-button>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>仓库</span> 
							<p>原料1仓</p>
						</div>
						<div class="line-right">
							<u-button class="right-choose" @click="choose(item,index)">选择</u-button>
						</div>
					</div>
			    </template>
				<template v-else>
					<div class="content-line">
						<div class="line-left">
							<span>规格</span> 
							<p>8层*3格</p>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>型号</span> 
							<p>KT22-3</p>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>长宽高</span> 
							<p>200*300*15</p>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>数量</span> 
							<p>
								<uni-forms-item 
								   ref="input"
							       :rules="[{'required': true,errorMessage: '数量必填'},{pattern:/^[1-9]\d*$/,errorMessage: '请输入正整数',trigger: 'blur'}]" :key="item.id"
							       :name="['list',index,'number']"
								   style="margin-top: 40rpx;"
								>
									<uni-easyinput type="number" v-model="item.number" 
									/>
								</uni-forms-item>
								台
							</p>
						</div>
						<div class="line-right">
							<u-button class="right-minus" @click="reduce(item,index)" :disabled="item.number<2">-</u-button>
							<u-button class="right-add" @click="add(item,index)">+</u-button>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>仓库</span> 
							<p>原料1仓</p>
						</div>
						<div class="line-right">
							<u-button class="right-choose" @click="choose(item,index)">选择</u-button>
						</div>
					</div>
				</template>
			</div>
		</div>
	</uni-forms>
	<div class="footer">
		<div class="footer-left" @click="addMaterial">添加领料</div>
		<div class="footer-right" @click="submit">提交领料清单</div>
	</div>
	
	<uni-popup ref="popup"  type="bottom">
		<div class="popup">
			<div class="popup-top">
				<div class="top-left">选择仓库</div>
				<div class="top-right">
					<button @click="close">关闭</button>
					<button>确定</button>
				</div>
			</div>
			<div class="popup-list">
				<div class="list-item" v-for="(item,index) in warehouseList" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>
	</uni-popup>


  </view>
</template>

<script>
import { post, postJ, get, getJ } from '@/utils/api.js'
export default {
  data () {
    return {
		title:'挤压成型',
		formData:{
			list:[
				{id:0, show:false},
				{id:1, show:false},
				{id:2, show:false},
				{id:3, show:false},
				{id:4, show:false}
			]
		},
		rules:{},
		warehouseList:[
			{name:'仓库1号'},
			{name:'仓库2号'},
			{name:'仓库3号'},
			{name:'仓库4号'},
			{name:'仓库5号'},
			{name:'仓库2号'},
			{name:'仓库3号'},
			{name:'仓库4号'},
			{name:'仓库5号'}
		]
       //正整数正则 /^[1-9]\d*$/
    }
  },
  onLoad ({ id }) {
    if (id) {
      // this._getDetail(id)
    }
  },
  methods: {
	  remove(item,index){
		  this.formData.list.splice(index,1)
	  },
	  reduce(item,index){
		  this.$set(item,'number',item.number-1)
	  },
	  add(item,index){
		  this.$set(item,'number',item.number+1)
	  },
	  choose(item,index){
		  this.$refs.popup.open('bottom')
	  },
		close() {
			this.$refs.popup.close()
		},
	  submit() {
		  uni.navigateTo({
		  	url:'/pages/production/order/prepare/comfirm'
		  })
		  // this.$refs.form.validate().then(res=>{
			 //  console.log('表单数据信息：', res);
		  // }).catch(err =>{
			 //  console.log('表单错误信息：', err);
		  // })
	  },
	  
	  addMaterial(){
		  uni.navigateTo({
		  	url:'/pages/production/order/prepare/addpick'
		  })
	  }
	  
	  
  }
}
</script>

<style lang="scss" scoped>
  .list{
	  width: 94%;
	  margin: 0 auto;
	  padding: 0 0 100rpx;
	  .list-item{
		  width: 100%;
		  margin: 20rpx auto 40rpx;
		  .item-title{
			  padding: 0 12rpx;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  font-size: 30rpx;
			  color: #000;
			  height: 80rpx;
			  line-height: 80rpx;
			  span{
				  margin-left: 15rpx;
			  }
			  .del{
				  color: #EC808D;
			  }
		  }
		  .item-content{
			  border: 1rpx solid #ccc;
			  .content-line{
				  padding: 0 12rpx;
				  border-bottom: 1rpx solid #ccc;
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  height: 80rpx;
				  line-height: 80rpx;
				  .line-left{
					  display: flex;
					  align-items: center;
					  justify-content: flex-start;
					  span{
						 width: 120rpx;
						 text-align: right;
						 color: rgb(127, 127, 127);
						  margin-right: 20rpx;
					  }
					  p{
						 color: #333333; 
						 display: flex;
						 align-items: center;
						 justify-content: flex-start;
						 .uni-easyinput{
							 width: 220rpx;
							 margin-right: 10rpx;
						 }
					  }
				  }
				  .line-right{
					  display: flex;
					  align-items: center;
					  justify-content: flex-end;
					  .right-minus{
						  width: 80rpx;
						  height: 51rpx;
						  text-align: center;
						  line-height: 51rpx;
						  color: #fff;
						  background: #F59A23;
					  }
					  .right-add{
						  width: 80rpx;
						  height: 51rpx;
						  text-align: center;
						  line-height: 51rpx;
						  color: #fff;
						  background: #70B603;
						  margin-left: 10rpx;
					  }
					  .right-choose.u-button--info{
						  border-color:#70B603;
						  color: #70B603;
					  }
				  }
			  }
			  .content-line:last-child{
				  border-bottom: none;
			  }
		  }
	  }
  }
  .footer{
	  width: 100%;
	  height: 90rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  .footer-left{
		  width: 50%;
		  height: 90rpx;
		  line-height: 90rpx;
		  text-align: center;
		  font-size: 34rpx;
		  color: #fff;
		  background: #4B7902;
	  }
	  .footer-right{
		  width: 50%;
		  height: 90rpx;
		  line-height: 90rpx;
		  text-align: center;
		  font-size: 34rpx;
		  color: #fff;
		  background: #70B603;
	  }
  }
  .popup{
	  width: 100%;
	  height: 600rpx;
	  background: #fff;
	  .popup-top{
		  width: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  height: 80rpx;
		  background: rgba(21, 122, 44, 1);
		  color: #fff;
		  .top-left{
			 font-size: 32rpx; 
			 margin-left: 10rpx;
		  }
		  .top-right{
			  display: flex;
			  align-items: center;
			  justify-content: flex-end;
			  margin-right: 10rpx;
			  uni-button{
				 background: rgba(21, 122, 44, 1);
				 color: #fff;
				  width: 100rpx;
				  height: 60rpx;
				  line-height: 60rpx;
				  font-size: 28rpx;
				  padding: 0;
				  border: 1rpx solid #fff;
				  margin-left: 20rpx;
			  }
		  }
	  }
	  .popup-list{
		  width: 100%;
		  height: 520rpx;
		  overflow-y: auto;
		  background-color: rgba(242, 242, 242, 1);
		  .list-item{
			  width: 100%;
			  height: 80rpx;
			  text-align: center;
			  line-height: 80rpx;
			  border-bottom: 1rpx solid #fff;
		  }
		  .list-item:last-child{
			  border: none;
		  }
		  .list-item:hover{
			  background: rgba(254,64,102,.25)
		  }
	  }
  }
</style>