dccloud/uni-app-front/pages/template/InStoreAdd/InStoreAdd.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-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.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,
		InsertInStore 
	} 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,
				intypeCode: '',
				intypeName: '',
				inDate: this.$util.getDate({
					format: true
				}),
				contractName: '',
				contractCode: '',
				supplierName: '',

				contract: {},
				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, //申办部门名

				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.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() {
			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.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;
				}
				 
				console.info("材料", list1); 
				 
				 
				let clist1 = []; //添加的材料列表 
				list1.forEach(function(item, index, arr) {
					clist1.push(item.materialCode);
				});
				 
				console.info('添加的材料列表', clist1);
				 
				//return;
				var data = {
					materialIn: materialIn, 
					mDetailList: list
				};
				console.info('data', data);
				//return;

				//var strList=JSON.stringify(list);
				//var strData=JSON.stringify(data);
				InsertInStore(data).then((res) => {
					console.info("提交应答返回值", res);

					if (res) {
						//上传图片
						//_this.uploadFileToServe(res);

						uni.navigateTo({
							url: '/pages/template/GetInStores/GetInStores'
						})
					} 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.setStorage({
                     	key: 'materials',
                     	data: _this.materials
                     });
					 _this.isCache=true;
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					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);
			},
			/*限制文件大小列表*/
			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/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;
					uni.setStorage({
						key: 'intypeCode',
						data: _this.intypeCode
					});
					uni.setStorage({
						key: 'intypeName',
						data: _this.intypeName
					});
					console.info(data[0].id, data[0].name);
					console.info(_this.intypeCode, _this.intypeName);
					_this.isCache=true;
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					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;
					uni.setStorage({
						key: 'contractCode',
						data: _this.contractCode
					});
					uni.setStorage({
						key: 'contractName',
						data: _this.contractName
					});
					uni.setStorage({
						key: 'contract',
						data: _this.contract
					});
					_this.isCache=true;
					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
				});
				uni.setStorage({
					key: 'materials',
					data: _this.materials
				});
			},
			getTemp(_this) { //获取缓存，重新给表单赋值
				if (uni.getStorageSync('intypeCode')) {
					_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');

					
					_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>