dccloud/uni-app-front/pages/template/SafeQualityCheckEdit/SafeQualityCheckEdit.vue

<template>
	<view>
		<uni-forms ref="form" labelPosition="left" labelAlign="left" @submit="submitForm">
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">工程名称</text></view>
				<view class="uni-input-wrapper">
					<input class="uni-input" focus placeholder="请填写工程名称" v-model="projectName" />
				</view>
			</view>
			
			<view class="uni-form-item uni-column" v-show="type==2">
				<view class="title"><text class="uni-form-item__title">检查类型</text></view>
				<view class="uni-input-wrapper" style="justify-content: left;">
					<picker mode="selector" :value="index" :range="array" range-key="name" @change="bindPickerChange" v-model="inspectType"    style="width: 100%;">
						<view class="uni-input">{{array.length>0?array[index]:''}}</view>
					</picker>
				</view>
			</view>
			
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">检查日期</text></view>
				<view class="uni-input-wrapper" style="justify-content: left;">
					<picker mode="date"     @change="bindDateChange" v-model="checkDate"     style="width: 100%;">
					 	<view class="uni-input">{{checkDate}}</view>
					</picker>
				</view>
			</view>
			
			
			<view class="uni-form-item uni-column">
				<view class="title"  style="background-color: #efefef;"><text class="uni-form-item__title">上传文件</text></view>
				<view class="content">
				  <g-upfile ref='gUpfile' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :control='control'
				   :columnNum="columnNum" :maxCount="maxCount" @limitFileSizeList='limitFileSizeList' @limitFileTypeList='limitFileTypeList'  :maxFileSize="20000"></g-upfile>
				</view>
			</view>
			
			<uni-section :title="detailTitle"  type="line">
				<button type="default" @click="getRelationItem" size="mini">选择检查项</button> 
			</uni-section>
			<uni-list>
				<uni-list-item v-if="itemList"  v-for="(item, index) in itemList"  :key="index">
					<view slot="body" class="slot-box parent-container">
						<i class="fa fa-window-close iconClose" aria-hidden="true"   @click="delRow(index)"   title="删除"></i>
						<view class="row">
							<view class="column-left">检查项目：</view>
							<view class="column-right">{{item.checkContent}}</view>
						</view>
						
						<view class="row">
							<view class="column-left">检查结果：</view>
							<view class="column-right"> 
							    <textarea  focus  v-model="item.checkResult"  class="textAreaBorder" placeholder="请输入检查结果"   />
							</view>
						</view>
						 
					</view>
				</uni-list-item>
			</uni-list>
			 <view style="margin-bottom: 120px;">
			 
			 </view>
			<view class="uni-btn-v uni-column">
				<button type="primary" form-type="submit" style="border-radius: 15px;" >提交</button>
			</view>
			
		</uni-forms>
	</view>
</template>

<script>
	import {GetSafeQualityCheckDTO,UpdateSafeQualityCheck} from "@/common/api/SafeQualityCheckApi.js";
	import {Decimal} from 'decimal.js';     //decimal计算
	 
	export default {
		
		data() {
			 
			return {
				projectName:'',
				inspectType:'',  
				checkDate:this.$util.getDate({
					format: true
				}),
				entity:{},      //主表对象 
				itemList:[],    //检查明细
				imageList: [],
				checkType:0,    //核对质量安全检查项与主表的类型是否一致
				detailTitle:'',
				type:0,       //检查项目类型
				 
				countIndex: 5,
				count: [1, 2, 3, 4, 5],
				title1: 'picker',
				array: ['','抽检','封样'],
				index: 0,
				 
				control: true,
				columnNum: 3,
				imgList: [],
				urlList:[],
				maxCount:5
			
			}
		},
		onLoad(){
			//console.info(page.path);
			  
			//console.info(this);
			this.$util.persistLogin(this);
			//console.info(this.$store.state.user);
			
		},
		onUnload() {
			 
		},
		created: function() {
			 
			this.getList();
			
		},
		updated:function(){
			console.info('updated');
			
			 
			
			//this.auditType();
		},
		methods: {
			
			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(e) {				
				console.info('submitForm');
				let _this=this;
				if(this.projectName==='')
				{
					uni.showToast({
						icon:"none",
						title:"请填写工程名称",
						duration:3000
					});
					return;
				}
				if(this.type==2){
					if(this.$util.isEmpty(this.inspectType) ){
						uni.showToast({
							icon:"none",
							title:"请选择检查类型",
							duration:3000
						});
						return;
					}
				}
				if(this.checkDate==='')
				{
					uni.showToast({
						icon:"none",
						title:"请选择检查日期",
						duration:3000
					});
					return;
				}
				 
				if(this.itemList.length<=0){
					uni.showToast({
						icon:"none",
						title:"请选择质量安全检查项",
						duration:3000
					});
					return;
				}
				 
				let list=[];
				let itemNames=[];
				this.itemList.forEach(function(item,index,arr){ 
					if(item.checkResult==null||item.checkResult==''){
						itemNames.push(item.checkContent);
						return;
					}
					list.push({checkContent:item.checkContent,checkResult:item.checkResult,dictionaryItemCode:item.dictionaryItemCode,dictionaryNameCode:item.dictionaryNameCode });
					});
					if(itemNames.length>0){
						uni.showToast({
							title:itemNames[0]+' 检查结果不能为空',
							duration:3000,
							icon:"none"
						});
						return;
					}
					
				let inspectType="";   //检查类型
				if(this.type==2){
					inspectType=this.inspectType;
				}	
				//vise  viseCosts
				var data1={checkCode:this.entity.checkCode,projectName:this.projectName,checkDate:this.checkDate,inspectType:inspectType };
				  
				var data={SafeQualityCheck:data1,ItemList:list};
				console.info('data:',data); 
				//return;
				UpdateSafeQualityCheck(data).then((res)=>{
					console.info("提交后的response",res);
				 
					if(res){
						    if(res=="-1"){
								uni.showToast({
									title:'修改失败，记录不存在',
									icon:'none',
									duration:3000
								});
								return;
							}
							if(res=="-2"){
								uni.showToast({
									title:'非申请状态，不能修改',
									icon:'none',
									duration:3000
								});
								return;
							}
							if(res=="-3"){
								uni.showToast({
									title:'所选检查项目类型与工程所属项目类型不一致',
									icon:'none',
									duration:3000
								});
								return;
							}
							//上传图片
							_this.uploadFileToServe(res) ; 
						
						uni.navigateTo({
							url:'/pages/template/GetSafeQualityCheckDTOs/GetSafeQualityCheckDTOs?type='+_this.type
						})
					}
					else{
						uni.showToast({
							title:'修改失败，重新操作',
							icon:'none',
							duration:3000
						})
					}
					
				});
			},
			 /* 获取质量安全检查主表和明细表的信息*/
			 getList(){
				 let _this=this;
				 let checkcode=_this.$util.getQuery("id");
				 //console.info('getList',_this.$util.getQuery("id"));
				 if(!checkcode){
					 uni.showToast({
					 	title:'参数错误',
						icon:'none',
						duration:3000
					 });
					 return;
				 }
				 GetSafeQualityCheckDTO(checkcode).then(res=>{
					 console.info('GetSafeQualityCheckDTO',res);
					 _this.projectName=res.entity.projectName;
					 _this.checkDate=res.entity.checkDate.substring(0,10);
					 _this.inspectType=res.entity.inspectType;
					 if(_this.inspectType=="抽检"){
						 _this.index=1;
					 }
					 else if(_this.inspectType=="封样"){
						 _this.index=2;
					 }
					 _this.entity=res.entity;
					 _this.itemList=res.list;
					 let title='';
					 if(_this.entity.checkType=='SafeCheck'){
						 title='安全检查修改';
						 _this.detailTitle='安全检查项目';
						 _this.type=1;
					 }
					 else if(_this.entity.checkType=='QualityCheck'){
						 title='质量检查修改';
						 _this.detailTitle='质量检查项目';
						 _this.type=0;
					 }
					 else if(_this.entity.checkType=='MaterialCheck'){
						 title='材料检查修改';
						 _this.detailTitle='材料检查项目';
						 _this.type=2;
					 }
					 uni.setNavigationBarTitle({
					 	title:title
					 });
					 
				 });
			 },
			 auditType(){
				 
				 if(this.checkType==1){
				 		console.info('jinru1');					  
						 uni.showToast({
							title:'此修改项是安全检查，不能选择质量检查项',
							icon:'none',
							duration:3000
						 }); 
						 console.info('jinru1结束');		
						 //this.checkType=0;
				 							  
				 }
				 else if(this.checkType==2){
					 console.info('jinru2');						 
					 uni.showToast({
						title:'此修改项是质量检查，不能选择安全检查项',
						icon:'none',
						duration:3000
					 });
					 //this.checkType=0;
				 }
			 },
			/*
			获取关联项
			*/
			getRelationItem() {
				let _this = this;				
				_this.saveTemp(_this);
				//console.info("getRelationItem", _this.$util.getQuery("id"));
				let checkCode=_this.$util.getQuery("id");
				//创建名字为fire的监听器，监听子页面传值事件
				uni.$on('items', function(data) {
					console.info("监听getRelationItem子页面的传值", data);
					//console.info('监听',_this);
					//return;
					
			         _this.getTemp(_this);					
					 let itemList=_this.itemList;
					 let result=[];
				     if(data) {
						 //console.info("转换id",_this.$util.getQuery("id"));
						 //转换
						 data.forEach(function(item,index,arr){
							 result.push({checkCode:checkCode,checkContent:item.diName,checkResult:'',dictionaryItemCode:item.diCode,dictionaryNameCode:item.dnCode});
						 });
						 console.info("转换",result);
						 //return;
						 //let checkType=0;
						 result.forEach(function(item,index,arr){
							 item.remark=''; 
							 
							  _this.itemList.push(item);
							
						 });
						 
						 console.info("监听后的明细增加",_this.itemList);
					 }
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					uni.$off("items");
				});
				 
				uni.navigateTo({
					url: '/pages/template/SelectCheckProject/SelectCheckProject?type='+_this.type
				});
			},
			
			
			delRow: function(index) {
				console.info("删除");
				console.info(this.itemList[index]);
				this.itemList.splice(index, 1);
			},
			 
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为：' + e.detail.value);
				//console.info(e.detail);
				this.index = e.detail.value;
				this.inspectType=this.array[this.index];
				console.info(this.inspectType);
			},
			bindDateChange: function(e) {
				let date = e.detail.value;
				this.checkDate=date;
				console.info('bindDateChange',this.checkDate);
			},
			 
			 
			/*
			上传后返回的值：
			list：上传后图片数组
			v：返回当前上传图片的临时路径
			*/
			chooseFile(list, v) {
				console.log("上传图片_list：", list)
				console.log("上传图片_v：", v);
				this.urlList=list;
				console.info("urlList",this.urlList);
				
			},
			
			
			/*
			删除图片：
			list：删除返回删除后剩余的图片数组
			eq：返回删除的数组
			*/
			imgDelete(list, eq) {
				console.log("删除图片_list：", list);
				console.log("删除图片_eq：", eq);
				this.urlList=list;
				console.info("urlList",this.urlList);
			},
			/*限制文件大小列表*/
			limitFileSizeList(list){
				console.info('limitFileSizeList:',list);
				if(list){
					if(list.length>0){
						uni.showModal({
							title:'警告',
							content: list.join()+' 文件大小超过2000KB',
							showCancel:false
						});
					}
				}
			},
			/*限制文件类型列表*/
			limitFileTypeList(list,allowFileType){
				console.info('limitFileTypeList:',list);
				console.info('limitFileTypeList:',allowFileType);
				if(list){
					if(list.length>0){
						uni.showModal({
							title:'警告',
							content: list.join()+' 文件类型必须是'+allowFileType.join(),
							showCancel:false
						});
					}
				}
			},
			/*
			执行上传服务：
			urlList：要上传的图片：数组类型
			*/
			uploadFileToServe(code) {
				console.info('uploadFileToServe',code)
				let _this=this;
				var urlList=_this.urlList;
				if (!urlList || urlList.length <= 0) {
					return;
				};
				//console.info(urlList);
			    
			      
					 for (let i = 0; i < urlList.length; i++) {
					 			
					 	uni.uploadFile({
					 		url: '/api/Common/UploadImage', 
					 		filePath: urlList[i],
					 		name: 'file',
					 		formData: {
					 			createPerson:_this.$store.state.user.userCode,
					 			masterCode:code,
					 			attachMentType:_this.entity.checkType
					 		},
					 		headers: {
					 			'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
					 			//这里要把content-type设置为multipard/form-data，同时还要设置boundary
					 		},
					 		success: (uploadFileRes) => {
					 			console.log("图片上传:",uploadFileRes.data);
					 		}
					 	});
					 }
				 
				//return;
				
			},
		
		   saveTemp(_this){  //临时存
				uni.setStorage({
					key:'projectName',
					data:_this.projectName
				});
				uni.setStorage({
					key:'checkDate',
					data:_this.checkDate
				});
			   uni.setStorage({
				key:'itemList',
				data:_this.itemList
			   });
		   
		   },
		   getTemp(_this){   //获取缓存，重新给表单赋值
		   	_this.projectName=uni.getStorageSync('projectName');
		   	_this.checkDate=uni.getStorageSync('checkDate');
		    _this.itemList=uni.getStorageSync('itemList');
		   
		   } 
		}
	}
</script>

<style scoped>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	 
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.uni-form-item__title {
	    font-size: 16px;
	    line-height: 24px;
	}
	
	.uni-input-wrapper {
	    /* #ifndef APP-NVUE */
	    display: flex;
	    /* #endif */
	    padding: 8px 13px;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    background-color: #FFFFFF;
	}
	.title{
		background-color: #efefef;
	}
	.uni-input {
	    height: 28px;
	    line-height: 28px;
	    font-size: 15px;
	    padding: 0px;
	    flex: 1;
	    background-color: #FFFFFF;
	}
	
	.uni-icon {
	    font-family: uniicons;
	    font-size: 24px;
	    font-weight: normal;
	    font-style: normal;
	    width: 24px;
	    height: 24px;
	    line-height: 24px;
		margin-left:15px;
	    color: #999999;
	}
	
	.uni-eye-active {
	    color: #007AFF;
	}
	.uni-btn-v{
		position: fixed;
		bottom: 0;
		width:100%;
		
	}
	.header-slot-box {
		font-size:15px;
		margin: 5px 5px;
		width:20%;
		justify-content: center;
	}
	.body-slot-box {
		font-size:15px;
		margin: 5px 5px;
		width:40%;
		justify-content: center;
	}
	.footer-slot-box {
		font-size:15px;
		margin: 5px 5px;
		width:40%;
		justify-content: center;
	}
	.uni-textarea textarea{
		font-size:15px;
	}
	.content {
		padding: 40rpx;
		background-color: #fff;
	}
	
	/* 上传控件 */
	.uploadControl {
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		width: 130rpx;
		display: block;
		height: 130rpx;
		text-align: center;
		line-height: 130rpx;
		font-size: 30rpx;
		color: #888;
		background-color: #eeeeee;
	}
	 
	 .topicon >>> .icon{
	        border: #4CD964 2upx solid;
	    }
		.textAreaBorder{
			width: 240px;
			text-align: left;
			height: 80px;
			border:1px solid #10AEFF;
		}
		/deep/ uni-textarea{
			font-size:12px;
		}
		.iconClose{
			font-size:20px;
			cursor: pointer;
			color: #999; 
			/* 绝对定位只有配合父容器的相对定位，才能达到预想效果 */
			position: absolute;
			right: -20rpx;
			top: 47rpx;
		}
		.parent-container{
		    margin-left: 20rpx;
		    /* 父容器必须是相对定位，子容器的绝对定位才能达到预想效果 */
		    position: relative;
		    width: 100%;
		    padding-top: 38rpx;
		}
		.column-right{
			text-align: left;
		}
		 
</style>