operatingCompany/operatingCompany/pages/entryReport/entryredItem.vue

<template>
	<view class="content">
		<view style="height: 20rpx;background: #F4F5F7;"></view>
		<view class="box">
			<view class="boxLine" v-for="(item,index) in categoryList[index1].sectionList[index2].itemList">
				<view class="boxLineTop">
					<view class="itemName">{{item.itemName}}</view>
					<view class="store" v-show="item.keyType==4" @click="pickerClick(item)">
						 <picker @change="bindPickerChange($event)" :value="item.storeIndex" :item="item" :range="item.array">
						     <view class="pickerView" v-if="item.itemValue!=null">{{item.itemValue}} 分</view>
							 <view class="pickerView" v-else>请选择</view>
						 </picker>
						 <view>
							 <image src="../../static/img/jiantou.png" mode="" class="storeJtimg"></image>
						 </view>
					</view>
				</view>
				<view class="boxlinedescribe">{{item.describe}}</view>
				<view class="itemCklineBox" v-show="item.keyType==1">
					<view class="itemCkline" :class="{itemckActive:name.check}" @click="itemXx(name)" v-for="(name,nameIndex) in item.array">{{name.name}}</view> 
					<!-- <view class="itemCkline itemckActive">张杰</view> -->
				</view>
				<view class="textareaBox" v-show="item.keyType==2">
					   <textarea placeholder-style="color:#CCCCCC" placeholder="请输入~" v-model="item.itemValue" class="textareaCont"/>
				</view>
				<view class="imgBox" v-show="item.keyType==3">
					<view class="imgLine" v-for="(img,imgindex) in item.imgArr">
						<image :class="{img4:(imgindex+1)%4==0}" :src="img" mode="" class="itemImg"></image>
					    <image src="../../static/img/icon_delpic@2x.png" mode=""  class="delImg"></image>
					</view>
					<view class="imgLine" @click="uploadImg(item)">
						<image src="../../static/img/icon_addpic@2x.png" mode="" class="itemImg"></image>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 160rpx;"></view>
		<view class="bottom">
		  <view class="bottomBtn" @click="sub">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickerindex:null,
				array:[0,1,2,3,4,5],
				index1:'',
				index2:'',
				categoryList:'',
				pickerItem:'',
			}
		},
		onLoad(opt) {
           var name = opt.name;
		   uni.setNavigationBarTitle({
		        title: name
		   })
		   this.index1=opt.index1;
		   this.index2=opt.index2;
		   console.log(this.$store.state.categoryList)
		   this.categoryList=this.$store.state.categoryList;
		   this.categoryList[this.index1].sectionList.forEach(v=>{
			   console.log(v)
			   if(v.check){
				   
			   }else{
					 v.itemList.forEach((item,index)=>{
					   item.itemValue='';
					   if(item.keyType==4){
						   var arr=[];
						  for(var i=0;i<Number(item.keyValue) +1;i++){
							  arr.push(i)
						  }
						   item.array=arr;
						   item.storeIndex=null;
						   item.itemValue=null;
					   }else if(item.keyType==1){
							item.keyValue=item.keyValue.replace(/，/ig,',')
							var array= item.keyValue.split(",")
							var arr=[]
							array.forEach(name=>{
								var obj={
									name:name,
									check:false
								}
								arr.push(obj)
							})
							item.array=arr
					   }else if(item.keyType==3){
						   item.imgArr=[]
					   }
				   })
			   }
		   })
		   /* this.categoryList[this.index1].sectionList[this.index2].itemList.forEach((item,index)=>{
			   
			   item.itemValue='';
			   if(item.keyType==4){
				   var arr=[];
				  for(var i=0;i<Number(item.keyValue) +1;i++){
					  arr.push(i)
				  }
				   item.array=arr;
				   item.storeIndex=null;
				   item.itemValue=null;
			   }else if(item.keyType==1){
				    item.keyValue=item.keyValue.replace(/，/ig,',')
					var array= item.keyValue.split(",")
					var arr=[]
					array.forEach(name=>{
						var obj={
							name:name,
							check:false
						}
						arr.push(obj)
					})
					item.array=arr
			   }else if(item.keyType==3){
				   item.imgArr=[]
			   }
		   }) */
		    console.log(this.categoryList);
		},
		methods: {
			bindPickerChange(e){
				console.log(e)
				this.pickerItem.itemValue=e.detail.value;
				console.log(this.categoryList);
				this.categoryList.splice(1,0)
			},
			pickerClick(item){
				this.pickerItem=item
			},
			itemXx(name){
				console.log(name)
				name.check=!name.check;
				this.categoryList.splice(1,0)
			},
			uploadImg(item){
				var that=this;
				console.log(item)
				var length=item.imgArr.length;
				if(length==10){
					uni.showToast({
					    title: '最多上传10张',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}
				
				var num=10-length;
				uni.chooseImage({
					sourceType: ['album'],
					count:num, 
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
				                console.log(JSON.parse(uploadFileRes.data).data );
								item.imgArr=item.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
								that.categoryList.splice(1,0)
				            }
				        }); 
						/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
							
						}) */
				    }
				});
			},
			sub(){
				console.log(this.categoryList);
				var go=true;
				this.categoryList[this.index1].sectionList[this.index2].itemList.forEach(item=>{
					if(item.keyType==3){
						item.itemValue=item.imgArr.join(',');
						console.log(item.itemValue)
					}else if(item.keyType==1){
						var arr=[]
						item.array.forEach(name=>{
							
							if(name.check){
								arr.push(name.name)
							}
						})
						item.itemValue=arr.join(',');
					}
					if(item.itemValue==0){
						
					}else if(item.itemValue==''){
						go=false
					}
				})
				console.log(this.categoryList[this.index1].sectionList[this.index2].itemList)
				if(!go){
					uni.showToast({
					    title: '每一项都是必填，请填写完成',
						 icon:'none',
					    duration: 3000,
					});
					return false;
				}
				this.categoryList[this.index1].sectionList[this.index2].check=true;
				uni.navigateBack({
					delta:1
				}) 
				this.$store.commit('mutationsCategoryList',this.categoryList)
			}
		}
	}
</script>

<style scoped>
	.content{
		 background: #F4F5F7;
		 min-height: 100vh;
		
	}
	/* #ifdef H5 */
		.content{
			 background: #F4F5F7;
			 min-height:calc(100vh - 44px);
			
		}
	/* #endif */
	.boxLine{
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
	}
	.boxLineTop{
		display: flex;
		justify-content: space-between;
	}
	.store{
		color: #FF4F00;font-size: 30rpx;
	}
	.storeJtimg{
		width: 14rpx;
		height: 26rpx;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}
	.store{
		display: flex;
	}
	.itemName{
		color: #3C3C3C;font-size: 30rpx;font-weight: 600;
	}
	.boxlinedescribe{
		color: #999999;
		font-size: 26rpx;
		padding-top: 10rpx;
	}
	.itemCklineBox{
		display: flex;
		flex-wrap: wrap;
		padding-top: 20rpx;
	}
	.itemCkline{
		height: 56rpx;
		background: #F4F5F7;
		border-radius: 28rpx;
		line-height: 56rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		color: #333333;
		margin-right: 30rpx;
	}
	.itemckActive{
		background: #FF4F00;color: #FFFFFF;
	}
	.textareaCont{
		width: 670rpx;
		height: 120rpx;
		background: #F4F5F7;
		border-radius: 10rpx;
		padding: 28rpx 20rpx;
		font-size: 28rpx;
		color: #3C3C3C;
	}
	.textareaBox{
		padding-top: 20rpx;
	}
	.imgBox{
		padding-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		
	}
	.itemImg{
		width:150rpx;
		height: 150rpx;
		margin-right: 35rpx;
		margin-top: 30rpx;
	}
	.img4{
		margin-right: 0;
	}
	.delImg{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 135rpx;
		top: 10rpx;
	}
	.imgLine{
		position: relative;
	}
	.bottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 8px 0px rgba(153,153,153,0.08);
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.bottomBtn{
		width: 702rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size:30rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}
</style>