dccloud/uni-app-front/pages/template/MaterialInAdd/MaterialInAdd.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="intypeName" />
					<a href='javascript:;' @click='getType' 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="inDate"
					 name="requisitionDate" 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="contractName" />
					 <a href='javascript:;' @click='getContract(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-upload ref='gUpload' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :control='control'
					 :columnNum="columnNum" :maxCount="maxCount"></g-upload>
				</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.inQty" style="width:50px;"/></t-td>
						<t-td align="left"><input class="uni-input-small" type="digit"  v-model="item.noQty"  style="width:50px;"/></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,InsertMaterialIn} 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 {
				intypeCode: '',
				intypeName:'',
				inDate: this.$util.getDate({
					format: true
				}),
				 contractName:'',
				 contractCode:'',
				 supplierName:'',
				
				 contract:{},
				userCode: this.$util.getState(this,"userCode"), //用户编号
				personName: this.$store.state.user.userName, //申办人
				unitCode: this.$store.state.departmentCode, //申办部门
				unitCodeName: this.$store.state.departmentName, //申办部门名
				projectCode:this.$store.state.projectCode,
				 

				contractList: [],   //合同
				materials:[],       //材料
				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);
        

		},
		mounted:function(){
			console.info('mounted');
			//console.info('intype',this.intypeCode);
			
		},
		updated: function() {
           console.info('updated');
			console.info('contract',this.contract);
			if(this.contract){
				if(this.contract.length>0){
					this.getSupplierName(this.contract[0].supplierCode,this.contract[0].supplierTypeCode);
				}
				
			}			
		},
		methods: {
			 
			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(e) {
				console.info('submitForm');
				let _this = this;
                if(this.intypeCode==""){
					uni.showToast({
						title:'请选择入库类型',
						duration:3000,
						icon:'none'
					});
					return;
				}
                if(this.inDate==""){
                	uni.showToast({
                		title:'请选择入库日期',
                		duration:3000,
                		icon:'none'
                	});
                	return;
                }
				if(this.contractCode==""){
					uni.showToast({
						title:'请选择材料合同',
						duration:3000,
						icon:'none'
					});
					return;
				}
				if(!this.userCode){
					uni.showToast({
						title:'用户登录已失效，请重新登录',
						duration:3000,
						icon:'none'
					});
					return;
				}
				if(!this.contract){
					uni.showToast({
						title:'请重新选择材料合同',
						duration:3000,
						icon:'none'
					});
					return;
				}
				var materialIn = {
					projectCode: this.$store.state.projectCode,
					groupCode: this.intypeCode,
					inDate:this.inDate,
					inPerson: this.userCode,
					inputPerson: this.userCode,
					contractCode: this.contractCode,
					supplierCode: this.contract[0].supplierCode,
					supplierTypeCode: this.contract[0].supplierTypeCode,
					supplierTypeId: this.contract[0].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.inQty<=0){
						console.info('入库数量不能小于0');
						isLessThan=false;
						return;
					}
					list.push({
						materialCode: item.materialCode,
						unit: item.unit,
						inQty: new Decimal(item.inQty).toFixed(2) - 0,
						inPrice: new Decimal(item.standardPrice).toFixed(2) - 0,						
						noPassQty:new Decimal(item.noQty).toFixed(2) - 0,
					});
					//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 = {
					materialIn: materialIn,
					mDetailList: list
				};
				console.info('data',data);
				//return;
				
				//var strList=JSON.stringify(list);
				//var strData=JSON.stringify(data);
				InsertMaterialIn(data).then((res) => {
					console.info("提交应答返回值",res);
					
					if (res) {
						//上传图片
						//_this.uploadFileToServe(res);

						uni.navigateTo({
							url: '/pages/template/GetMaterialIns/GetMaterialIns'
						})
					} 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.requisitionDate = 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.contractCode==undefined||_this.contractCode==''){
					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/selectmaterials/selectmaterials?contractCode="+_this.contractCode
				})
			},
			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/Requisition/UploadImage',
						filePath: urlList[i],
						name: 'file',
						formData: {
							createPerson: _this.$store.state.user.userCode,
							masterCode: masterCode
						},
						headers: {
							'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
							//这里要把content-type设置为multipard/form-data，同时还要设置boundary
						},
						success: (uploadFileRes) => {
							console.log("图片上传:", uploadFileRes.data);
						}
					});
				}
			},
			/*
			获取入库类型
			*/
			getType() {
				let _this = this;
				console.info('gettype',_this);
				_this.saveTemp(_this);
				//创建名字为fire的监听器，监听子页面传值事件
				uni.$on('intype', function(data) {
					console.info("监听intype子页面的传值", data);
					console.info('监听',_this);
                     _this.getTemp(_this);
					 _this.intypeCode=data[0].id;
					 _this.intypeName=data[0].name;
					 _this.$nextTick(function(){
					 	//更新dom
					 });
					 console.info(data[0].id,data[0].name);
					 console.info(_this.intypeCode,_this.intypeName);
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					uni.$off("intype");
				});
				uni.navigateTo({
					url: '/pages/tree/tree?classCode=1503'
				});
			},
			/*获取材料合同*/
			getContract(projectCode){
				console.info('getContract',projectCode);
				let _this = this;
				_this.saveTemp(_this);   //表单存入缓存
				//创建名字为fire的监听器，监听子页面传值事件
				uni.$on('contract', function(data) {
					console.info("监听contract子页面的传值", data);
				    _this.getTemp(_this);      //自缓存中取出表单数据，重新赋值
					_this.contractCode=data[0].contractCode;
					_this.contractName=data[0].contractName;
					_this.contract=data;
					console.info('_this.contract',_this.contract);
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					uni.$off("contract");
				});
				uni.navigateTo({
					url: '/pages/template/SelectContract/SelectContract?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:'intypeName',
					data:_this.intypeName
				});
				uni.setStorage({
					key:'intypeCode',
					data:_this.intypeCode
				});
				uni.setStorage({
					key:'inDate',
					data:_this.inDate
				});
				uni.setStorage({
					key:'contractCode',
					data:_this.contractCode
				});
				uni.setStorage({
					key:'contractName',
					data:_this.contractName
				});
				uni.setStorage({
					key:'supplierCode',
					data:_this.supplierCode
				});
				uni.setStorage({
					key:'supplierName',
					data:_this.supplierName
				});
				uni.setStorage({
					key:'contract',
					data:_this.contract
				});
				uni.setStorage({
					key:'usercode',
					data:_this.usercode
				});
				uni.setStorage({
					key:'imageList',
					data:_this.imageList
				});
			},
			getTemp(_this){   //获取缓存，重新给表单赋值
				_this.intypeCode=uni.getStorageSync('intypeCode');
				_this.intypeName=uni.getStorageSync('intypeName');
				_this.inDate=uni.getStorageSync('inDate');
				_this.contractCode=uni.getStorageSync('contractCode');
				_this.contractName=uni.getStorageSync('contractName');
				_this.supplierCode=uni.getStorageSync('supplierCode');
				_this.supplierName=uni.getStorageSync('supplierName');
				_this.supplierCode=uni.getStorageSync('supplierCode');
				_this.usercode=uni.getStorageSync('usercode');
				_this.contract=uni.getStorageSync('contract');
			},
			getMaterials(){
				
			}
		}
	}
</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>