dccloud/uni-app-front/pages/template/MaterialOutEdit/MaterialOutEdit.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-small" disabled=true v-model="outtypeName" />
					<a href='javascript:;' @click='getOutType' class="uni-icon"><i class="fa fa-search" aria-hidden="true"></i></a>
				</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" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" v-model="outDate"
					   style="width: 100%;">
						<view class="uni-input">{{date}}</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" >
           					 <input class="uni-input-small" disabled=true v-model="engineeringContractName" />
           					 <a href='javascript:;' @click='getEngineeringContract(projectCode)' class="uni-icon"><i class="fa fa-search" aria-hidden="true"></i></a>
           				</view>
           			</view>

			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">施工单位</text></view>
				<view class="uni-textarea">
						<input class="uni-input-small" disabled=true v-model="supplierName" />
				</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"  :maxFileSize="20000"></g-upfile>
				</view>
			</view>

			<uni-section title="领料明细" type="line">
				<button type="default" @click="openWindow"  size="mini">添加材料</button>
			</uni-section>
			<view class="uni-form-item uni-column">
				<t-table border="2" border-color="#999999"   >
					<t-tr font-size="14" color="#999999" align="left">
						<t-th align="left">名称</t-th>
						<t-th align="left">领料数量</t-th>
						<t-th align="left">计划单号</t-th>
						<t-th align="center" style="width: 50px !important;">操作</t-th>
					</t-tr>
					<t-tr font-size="12" color="#999999" align="right" v-for="(item,index) in materials" :key="index">
						<t-td align="left">{{ item.materialName }}</t-td>
						<t-td align="left"><input class="uni-input-small" type="digit"  v-model="item.outQty" style="width:50px;"/></t-td>
						<t-td align="left">{{item.materialBudgetCode}}</t-td>
						<t-td align="center"  style="width: 50px !important;"><i class="fa fa-window-close" aria-hidden="true"   @click="delRow(index)" style="font-size:20px;cursor: pointer;color: #999;margin-left:15px;" title="删除"></i></t-td>
					</t-tr>
				</t-table>
			</view>

			<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 {
		getSupplierNameAndType
	} from "@/common/api/commonApi.js";
	import {
		Decimal
	} from 'decimal.js'; //decimal计算
	import {GetMaterials,UpdateMaterialOut,GetMaterialOutByMaterialOutCode,getContractAndSupplier,getGroupName,GetMaterialsForOut} from '@/common/api/MaterialInOut.js';
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]

	export default {
		components: {
		           tTable,
		           tTh,
		           tTr,
		           tTd
		       },
		data() {			
			return {
				
				outDate: this.$util.getDate({
					format: true
				}),
				 contractName:'',
				 contractCode:'',
				 supplierName:'',
				
				 
				userCode: this.$util.getState(this,"userCode"), //用户编号
				projectCode:this.$util.getState(this,"projectCode"),
				contractList: [],   //合同
				materials:[],       //材料
				
				outtypecode:'',      //领料类型编码
				outtypeName:'',      //领料类型名
				engineeringContractName:'',      //工程合同名
				engineeringContractCode:'',      //工程合同编码
				engineeringContract:{},          //工程合同数据集合
				engineeringMaterials:[],         //工程材料
				engineeringError:'',             //获取工程材料返回的错误信息
				
				
				
				title: 'choose/previewImage',
				imageList: [],
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 5,
				count: [1, 2, 3, 4, 5],
				title1: 'picker',
				array: [],
				index: 0,
				date: this.$util.getDate({
					format: true
				}),
				startDate: this.$util.getDate('start'),
				endDate: this.$util.getDate('end'),

				control: true,
				columnNum: 3,
				imgList: [],
				urlList: [],
				maxCount: 5

			}
		},
		onLoad() {
			//console.info(page.path);
			console.info(uni.getStorageSync('storage_state'));
			//console.info(this);
			this.$util.persistLogin(this);
			//console.info(this.$store.state.user);

		},
		onUnload() {
			this.imageList = [],
				this.sourceTypeIndex = 2,
				this.sourceType = ['拍照', '相册', '拍照或相册'],
				this.sizeTypeIndex = 2,
				this.sizeType = ['压缩', '原图', '压缩或原图'],
				this.countIndex = 5;
		},
		created: function() {
		 console.info('created');	
		 //console.info(this.intypeName);
		 this.GetMaterialOutByMaterialOutCode();
        

		},
		mounted:function(){
			console.info('mounted');
			//console.info('intype',this.intypeCode);
			
		},
		updated: function() {
           
						
		},
		methods: {
			 
			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(e) {
				console.info('submitForm');
				let _this = this;
               
                if(this.outDate==""){
                	uni.showToast({
                		title:'请选择领料日期',
                		duration:3000,
                		icon:'none'
                	});
                	return;
                }
				
				if(!this.userCode){
					uni.showToast({
						title:'用户登录已失效，请重新登录',
						duration:3000,
						icon:'none'
					});
					return;
				}
				
				if (this.outtypeCode == "") {
					uni.showToast({
						title: '请选择领料类型',
						duration: 3000,
						icon: 'none'
					});
					return;
				}
				if (this.engineeringContractCode == "") {
					uni.showToast({
						title: '请选择工程合同',
						duration: 3000,
						icon: 'none'
					});
					return;
				}
				
				if(this.engineeringError!=""){
					uni.showToast({
						title: _this.engineeringError,
						duration: 3000,
						icon: 'none'
					});
					return;
				}
				
				console.info("领料类型",this.outtypeCode);
				if(!this.outtypeCode){
					uni.showToast({
						title: '领料类型获取失败，请重新获取',
						duration: 3000,
						icon: 'none'
					});
					return;
				}
				//材料领料单主表
				var materialOut = {
					materialOutCode:_this.materialOut.materialOutCode,
					materialOutID:_this.materialOut.materialOutID,
					projectCode: _this.projectCode,
					groupCode: _this.outtypeCode,
					outDate: _this.outDate,
					outPerson: _this.userCode,
					inputPerson: _this.userCode,
					contractCode: _this.engineeringContractCode,
					doSupplierCode: _this.engineeringContract.supplierCode,
					supplierTypeCode: _this.engineeringContract.supplierTypeCode,
					supplierTypeId: _this.engineeringContract.supplierTypeId
				};
               console.info('materials', this.materials);
               var list1 = this.materials;
               
               console.info('list1', list1);
               //入库单材料明细
               let list = [];
               let isLessThan = true;
               list1.forEach(function(item, index, array) {
               	if (item.outQty <= 0) {
               		console.info('领料数量不能小于等于0');
               		isLessThan = false;
               		return;
               	}
               	list.push({
               		materialCode: item.materialCode,
               		unit: item.unit,
               		outQty: new Decimal(item.outQty).toFixed(2) - 0,
               		outPrice: new Decimal(item.outPrice).toFixed(2) - 0,
               		materialBudgetCode: item.materialBudgetCode,
               		materialInDtlCode:item.materialInDtlCode
               	});
               	//list.push({requisitionCode:'',contractCode:item.contractCode,estimateCash: 220});
               });
				if(!isLessThan){
					uni.showToast({
						title:'领料数量不能小于0',
						duration:3000,
						icon:'none'
					});
					return;
				}
				console.info("【list】",list);				 
				if (list.length <= 0) {
					uni.showToast({
						title: "请添加材料",
						icon: "none",
						duration: 3000
					});
					return;
				}
				 
				//return;
				var data = { 
					materialOut:materialOut,
					mOutDetailList: list
				};
				console.info('data',data);
				//return;
				
				//var strList=JSON.stringify(list);
				//var strData=JSON.stringify(data);
				UpdateMaterialOut(data).then((res) => {
					console.info("submitform应答返回值",res);
					if(res=="-1"){
						uni.showToast({
							title: '修改项不存在',
							icon: 'none',
							duration: 3000
						});
						return;
					}
					else if(res=="-2"){
						uni.showToast({
							title: '非待审核状态，不能修改',
							icon: 'none',
							duration: 3000
						});
						return;
					}
					
					
					if (res) {
						//上传图片
						_this.uploadFileToServe(res);

						uni.navigateTo({
							url: '/pages/template/GetMaterialOuts/GetMaterialOuts'
						})
					} else {
						uni.showToast({
							title: '修改失败，重新操作',
							icon: 'none',
							duration: 3000
						})
					}

				});
			},
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为：' + e.detail.value);
				//console.info(e.detail);
				this.index = e.detail.value;
				this.changeType = this.array[this.index];
				console.info(this.changeType);
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
				this.outDate = this.date;
				console.info(this.date);
			},

			GetDropDown: function() {
				let that = this;
				GetQianzhengDropDown().then((res) => {
					console.info(res);
					res.forEach(function(item, index, array) {
						that.$set(that.array, index, item);
					});
					that.changeType = that.array[0];
				});
			},
			
			openWindow: function() {
				let _this = this;
				//console.info('监听事件外部this');
				//console.info(this);
				_this.saveTemp(_this);
				if(_this.engineeringContractCode==undefined||_this.engineeringContractCode==''){
					uni.showToast({
						title:'请选择领料合同',
						icon:'none',
						duration:3000
					});
					return;
				}

				//创建名字为fire的监听器，监听子页面传值事件
				uni.$on('materials', function(data) {
					console.info("监听materials子页面的传值",data);					
					//从子页面返回父页面，原来表单已经填写的值会丢失，因此需要重新赋值
					_this.getTemp(_this);
					_this.materials = [];
					data.forEach(function(item, index, array) {
						//console.info("foreach");				
						_this.$set(_this.materials, index, item);
					});

					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					uni.$off("materials");
					console.info("监听materials子页面的传值结束");
				});
				//打开子页面
				uni.navigateTo({
					url: "/pages/template/selectmaterialsout/selectmaterialsout?contractCode="+_this.engineeringContractCode
				})
			},
			delRow: function(index) {
				console.info("删除");
				console.info(this.materials[index]);
				this.materials.splice(index, 1);
			},
			/*
			上传后返回的值：
			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);
			},
			/*
			执行上传服务：
			urlList：要上传的图片：数组类型
			*/
			uploadFileToServe(masterCode) {
				let _this = this;
				var urlList = _this.urlList;
				if (!urlList || urlList.length <= 0) {
					return;
				};
				//console.info(urlList);


				//return;
				for (let i = 0; i < urlList.length; i++) {

					uni.uploadFile({
						url: '/api/Common/UploadImage',
						filePath: urlList[i],
						name: 'file',
						formData: {
							createPerson: _this.$util.getState(_this,'userCode'),
							masterCode: masterCode,
							attachMentType:'MaterialOut'
						},
						headers: {
							'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
							//这里要把content-type设置为multipard/form-data，同时还要设置boundary
						},
						success: (uploadFileRes) => {
							console.log("附件上传:", uploadFileRes.data);
						}
					});
				}
			},
			
			/*
			获取领料类型
			*/
			getOutType() {
				let _this = this;
				console.info('gettype',_this);
				_this.saveTemp(_this);
				//创建名字为fire的监听器，监听子页面传值事件
				uni.$on('outtype', function(data) {
					console.info("监听outtype子页面的传值", data);
					console.info('监听',_this);
			         _this.getTemp(_this);
					 _this.outtypeCode=data[0].id;
					 _this.outtypeName=data[0].name;
					 _this.$nextTick(function(){
					 	//更新dom
					 });
					 console.info(data[0].id,data[0].name);
					 console.info(_this.outtypeCode,_this.outtypeName);
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					uni.$off("outtype");
				});
				uni.navigateTo({
					url: '/pages/treeout/treeout?classCode=1505'
				});
			},
			
			/*获取工程合同*/
			getEngineeringContract(projectCode){
				console.info('getEngineeringContract',projectCode);
				let _this = this;
				_this.saveTemp(_this);   //表单存入缓存
				//创建名字为fire的监听器，监听子页面传值事件
				uni.$on('engineeringContract', function(data) {
					console.info("监听工程合同子页面开始");
					console.info("监听engineeringContract子页面的传值", data);
				    _this.getTemp(_this);      //自缓存中取出表单数据，重新赋值
					_this.engineeringContractCode=data[0].contractCode;
					_this.engineeringContractName=data[0].contractName;
					_this.engineeringContract=data;
					console.info('engineeringContract',_this.engineeringContract);
					
					_this.getSupplierName(_this.engineeringContract.supplierCode,_this.engineeringContract.supplierTypeCode);
					_this.isCache=true;
					
					console.info("监听工程合同子页面结束");
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					uni.$off("engineeringContract");
				});
				uni.navigateTo({
					url: '/pages/template/SelectEgineeringContract/SelectEgineeringContract?projectCode='+projectCode
				});
			},
			/* 获取供应商名称 */
			getSupplierName(supplierCode, supplierTypeCode){
				console.info('getSupplierName');
				console.info('supplierCode',supplierCode);
				console.info('supplierTypeCode',supplierTypeCode);
				let that=this;
				if(supplierCode&&supplierTypeCode){
					getSupplierNameAndType(supplierCode, supplierTypeCode).then(res=>{
						console.info('getSupplierNameAndType',res);
						that.supplierName=res;
					});
				}
				
			},
			saveTemp(_this){  //临时存
				
				uni.setStorage({
					key: 'outDate',
					data: _this.inDate
				});
				
				uni.setStorage({
					key: 'supplierCode',
					data: _this.supplierCode
				});
				uni.setStorage({
					key: 'supplierName',
					data: _this.supplierName
				});
				
				uni.setStorage({
					key: 'usercode',
					data: _this.usercode
				});
				uni.setStorage({
					key: 'imageList',
					data: _this.imageList
				});
				uni.setStorage({
					key: 'engineeringContractCode',
					data: _this.engineeringContractCode
				});
				uni.setStorage({
					key: 'engineeringContractName',
					data: _this.engineeringContractName
				});
				uni.setStorage({
					key: 'engineeringError',
					data: _this.engineeringError
				});
				
				uni.setStorage({
					key: 'outtypeName',
					data: _this.outtypeName
				});
				uni.setStorage({
					key: 'outtypeCode',
					data: _this.outtypeCode
				});
				uni.setStorage({
					key: 'materials',
					data: _this.materials
				});
			},
			getTemp(_this){   //获取缓存，重新给表单赋值
				if (uni.getStorageSync('outtypeCode')) {
					
					_this.inDate = uni.getStorageSync('outDate');
					
					_this.supplierCode = uni.getStorageSync('supplierCode');
					_this.supplierName = uni.getStorageSync('supplierName');
					_this.supplierCode = uni.getStorageSync('supplierCode');
					_this.usercode = uni.getStorageSync('usercode');
					
				
					_this.engineeringContractCode = uni.getStorageSync('engineeringContractCode');
					_this.engineeringContractName = uni.getStorageSync('engineeringContractName');
					_this.engineeringContract=uni.getStorageSync("engineeringContract");
					_this.engineeringError = uni.getStorageSync('engineeringError');
					
				
					_this.outtypeCode = uni.getStorageSync('outtypeCode');
					_this.outtypeName = uni.getStorageSync('outtypeName');
					_this.materials=uni.getStorageSync("materials");
				}
			},
			
			GetMaterialOutByMaterialOutCode(){
				console.info("GetMaterialInByCode",this);
				let _this=this;
				let id=this.$util.getQuery("id");
				GetMaterialOutByMaterialOutCode(id).then(res=>{
					console.info('GetMaterialOutByMaterialOutCode',res);
					let materialOut=res.materialOut;
					let subList=res.subList;
					
					_this.materialOut=materialOut;
					console.info('projectCode',_this.projectCode);
					if(materialOut.projectCode!=_this.projectCode){
						uni.showModal({
						    title: '提示',
						    content: '非本人，无编辑权限',
						    success: function (res) {
						        if (res.confirm||res.cancel) {
						            uni.navigateTo({
						            	url:'../GetMaterialOuts/GetMaterialOuts'
						            })
						        }  
						    }
						});
					}
					//初始化赋值
					 
					_this.outDate=materialOut.outDate;
					 
					 
					
					 //领料类型获取
					 _this.outtypeCode=materialOut.groupCode;	
					console.info("_this.outtypecode",_this.outtypeCode);				  
					 getGroupName(materialOut.groupCode).then(res=>{
					 	console.info('getGroupName',res);
					 	_this.outtypeName=res;
					 });
					
					//工程合同
					_this.engineeringContractCode=materialOut.contractCode;
					getContractAndSupplier(materialOut.contractCode).then(res=>{
						console.info('工程合同',res);
						
						_this.engineeringContractName=res[0].contractName; 
						console.info('res.engineeringContractName',res[0].contractName);
						
						_this.engineeringContract=res[0];
						_this.getSupplierName(_this.engineeringContract.supplierCode,_this.engineeringContract.supplierTypeCode);
						
					});
					
					subList.forEach(function(item, index, array) {
						//console.info("foreach");				
						_this.$set(_this.materials, index, item);
					});
				});
			},
			 
		}
	}
</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;
		padding: 5px 20px;
	}

	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 5px;
		flex: 1;
		background-color: #FFFFFF;
	}

	.uni-input-small {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 5px;
		flex: 1;
		width: 270px;
		background-color: #FFFFFF;
	}

	.uni-icon {
		height: 28px;
		line-height: 28px;
		font-size: 20px;
		padding-right: 15px;
		color: #5555ff;
		width: 50px;
	}

	.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;
	}

	.bg1 {
		background-color: #EFEFEF;
	}
</style>