dccloud/uni-app-front/pages/template/MaterialOutAdd/MaterialOutAdd.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" @limitFileSizeList='limitFileSizeList' @limitFileTypeList='limitFileTypeList'  :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,
		InsertMaterialOut,
		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';

	 

	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				isCache:false,
				 
				outDate: this.$util.getDate({
					format: true
				}),
				 
				supplierName: '',

				 
				userCode: this.$util.getState(this, "userCode"), //用户编号
				projectCode: this.$util.getState(this, "projectCode"),
				personName: this.$store.state.user.userName, //申办人
				unitCode: this.$store.state.departmentCode, //申办部门
				unitCodeName: this.$store.state.departmentName, //申办部门名

				 
				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.countIndex = 5;
		},
		created: function() {
			console.info('created');
			console.info("isCache",this.isCache);
			if(this.isCache){
				this.getTemp(this);
			}
           

		},
		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;
				}
				 
				console.info("engineeringError",this.engineeringError);
				if (this.engineeringError != "") {
					uni.showToast({
						title: _this.engineeringError,
						duration: 3000,
						icon: 'none'
					});
					return;
				}
				 
				//材料领料单主表
				var materialOut = {
					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;
				}
				 
				console.info("材料", list1);
				 
				 
				//return;
				var data = {
					materialOut: materialOut,
					mOutDetailList: list
				};
				console.info('data', data);
				//return;
 
				InsertMaterialOut(data).then((res) => {
					console.info("InsertMaterialOut", res);

					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.setStorage({
                     	key: 'materials',
                     	data: _this.materials
                     });
					 _this.isCache=true;
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					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);
			},
			/*限制文件大小列表*/
			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(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.$store.state.user.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;
					uni.setStorage({
						key: 'outtypeCode',
						data: _this.outtypeCode
					});
					uni.setStorage({
						key: 'outtypeName',
						data: _this.outtypeName
					});
					_this.isCache=true;
					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[0];
					uni.setStorage({
						key: 'engineeringContractCode',
						data: _this.engineeringContractCode
					});
					uni.setStorage({
						key: 'engineeringContractName',
						data: _this.engineeringContractName
					});
					uni.setStorage({
						key: 'engineeringContract',
						data: _this.engineeringContract
					});
					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");
				}
			},
		}
	}
</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>