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

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="`${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" @click="showContent(item)">
				<div>工单号 <span>21122403906623533005</span></div>
				<image src="~@/static/product/xl.svg" :style="item.show?'transform: rotate(180deg)':''"></image>
			</div>
			<div class="item-content">
				<template v-if="item.show">
					<div class="content-line">
						<div class="line-left">
							<span>产品编码</span> 
							<p>W30000004536</p>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>产品名称</span> 
							<p>精坯木工刀</p>
						</div>
					</div>
					<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>BΦ4.0*310</p>
						</div>
					</div>
					<div class="content-line">
						<div class="line-left">
							<span>生产数量</span> 
							<p>
<!-- 								 :rules="[{'required': true,errorMessage: '生产数量必填'}, { pattern: /^[1-9]\d*$/,	message: "请输入正整数",trigger: "blur"}]" -->
								<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>
								PCS
							</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>5KG</p>
						</div>
					</div>
					<div class="content-delt" @click="remove(item,index)">删除</div>
			    </template>
				<div class="content-line" v-else>
					<div class="line-left">
						<span>精坯木工刀</span>
					</div>
					<div class="line-right">
						400PCS
					</div>
				</div>
			</div>
		</div>
	</uni-forms>
	<div class="footer">
		<div class="footer-left">扫描工单</div>
		<div class="footer-right" @click="submit">合并领料清单</div>
	</div>


  </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:{}
       //正整数正则 /^[1-9]\d*$/
    }
  },
  onLoad ({ id }) {
    if (id) {
      // this._getDetail(id)
    }
  },
  methods: {
	  showContent(item){
		  this.$set(item,'show',!item.show)
	  },
	  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)
	  },
	  submit() {
		  uni.navigateTo({
		    url: '/pages/production/order/prepare/material'
		  })
		  // this.$refs.form.validate().then(res=>{
			 //  console.log('表单数据信息：', res);
		  // }).catch(err =>{
			 //  console.log('表单错误信息：', err);
		  // })
	  }
	  
	  
  }
}
</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;
			  border-bottom: 1rpx solid #ccc;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  font-size: 30rpx;
			  color: #000;
			  font-weight: bold;
			  height: 80rpx;
			  line-height: 80rpx;
			  image{
				  width: 21rpx;
				  height: 11rpx;
			  }
			  span{
				  margin-left: 15rpx;
			  }
		  }
		  .item-content{
			  .content-line{
				  padding: 0 12rpx;
				  border-bottom: 1rpx dashed #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: 180rpx;
						 text-align: left;
						 color: rgb(127, 127, 127); 
					  }
					  p{
						 color: #333333; 
						 display: flex;
						 align-items: center;
						 justify-content: flex-start;
						 .uni-easyinput{
							 width: 220rpx;
							 margin-right: 10rpx;
							 margin-top: 8rpx;
						 }
					  }
				  }
				  .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;
						  border: none;
					  }
					  .right-add{
						  width: 80rpx;
						  height: 51rpx;
						  text-align: center;
						  line-height: 51rpx;
						  color: #fff;
						  background: #70B603;
						  margin-left: 10rpx;
						  border: none;
					  }
				  }
			  }
			  .content-delt{
				  color: #EC808D;
				  margin: 30rpx auto 0;
				  width: 100rpx;
				  text-align: center;
			  }
		  }
	  }
  }
  .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;
	  }
  }
</style>