aiot-app/pages/production/execute/components/materialPopu.vue

<template>
   <view>
	   <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 @click="comfirm">确定</button>
					</div>
				</div>
				<view class="search-box">
					  <uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="请输入搜索内容" @iconClick="iconClick">
					  </uni-easyinput>
					  <view class="search-botton">搜索</view>
				</view>
				<view class="table">
					<radio-group @change="radioChange">
						<label class="table-item" v-for="(item, index) in tableData" :key="index">
							<view class="item-left">
								<radio :value="index + ''" :checked="index == current" />
							</view>
							<view class="item-right">
								<view class="title">编码：{{ item.categoryCode }}</view>
								<view class="other">
									名称：{{ item.categoryName }}
								</view>
								<view class="other">
									牌号：{{ item.brandNum }}
								</view>
							</view>
						</label>
					</radio-group>
				</view>
			</div>
		 </uni-popup>
   </view>
</template>


<script>
import { get, getJ, post, postJ } from '@/utils/api.js'
import { bomSubListByVersionId } from '@/api/production/extrusion.js'
export default {
  components: {
    
  },
  props: {
    taskId: {
  		type: String,
  		default: ''
    },
	versionId: {
  		type: String,
  		default: ''
    }
  },
  data () {
    return {
		searchValue:'',
		tableData:[],
		current:-1,
		currentData:{}
    }
  },
  onShow () {
 
  },

  methods: {
	  open() {
	  	 this.$refs.popup.open() 
		 this.getMaterialList()
	  },
	  close() {
	  	this.$refs.popup.close()
	  },
	  
	  getMaterialList(){
		  const params = {
			  taskId : this.taskId,
			  versionId : this.versionId
		  }
		  bomSubListByVersionId(params).then(res=>{
			  this.tableData = res
		  })
	  },
	  radioChange (e) {
	  		let value = Number(e.detail.value)
	  		let data = this.tableData[value]
	  		this.currentData = data
	  },
	  comfirm(){
		  this.$refs.popup.close()
		  this.$emit('chooseMaterial',this.currentData)
	  }
  }
}
</script>

<style lang="scss" scoped>
	.popup{
		  width: 100%;
		  height: 900rpx;
		  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;
				  }
			  }
		  }
		  .search-box{
			  display: flex;
			  align-items: center;
			  justify-content: space-around;
			  width: 94%;
			  margin: 20rpx auto;
			  .search-botton{
				  background: rgba(112, 182, 3, 1);
				  color: #fff;
				  padding: 10rpx 20rpx;
				  border-radius: 8rpx;
				  margin-left: 20rpx;
			  }
		  }
		.table{
			 width: 100%;
			 border-top: 1rpx solid #ccc;
			 .table-item{
				 padding: 10rpx 20rpx;
				 display: flex;
				 align-items: center;
				 justify-content: flex-start;
				 border-bottom: 1rpx solid #ccc;
				 .item-left{
					 margin-right: 30rpx;
				 }
				 .item-right{
					 flex: 1;
					.title{
						font-weight: bold;
						color: #000;
						margin: 10rpx 0;
					}
					.other{
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
					}
				 }
			 }
		} 
	}
</style>