dccloud/uni-app-front/pages/template/viseadd/viseadd.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="viseId" />
				</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" focus placeholder="请填写签证名称" v-model="viseName" />
				</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"   v-model="requisitionName" />
					<a href='javascript:;' @click='getRequisition' 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 ">
					<input class="uni-input-small" disabled=true v-model="contractName" />
					<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">
					 
				</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">
					 
				</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="viseDate"     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" style="justify-content: left;">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" v-model="endDate"  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" style="justify-content: left;">
					<picker mode="selector" :value="index" :range="array" range-key="name" @change="bindPickerChange" v-model="viseType" name="changeType"  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">
            		<input class="uni-input" focus value="0" v-model="estimateCash" type="digit" />
            	</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" focus value="0" v-model="reportCash" type="digit"/>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">签证原因</text></view>
				<view class="uni-textarea">
					<textarea focus placeholder="签证原因" v-model="reason" auto-height="true"   />
					</view>
			</view>
			<view class="uni-form-item uni-column">
			    <view class="title"><text class="uni-form-item__title">备注</text></view>
			    <view class="uni-textarea">
			        <textarea  focus placeholder="请写备注"  v-model="remark"  auto-height="true"  />
			    </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">
			 	   
			</uni-section>
			 
			<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 {GetQianzhengDropDown} from "@/common/api/requisitionApi.js";
	import {GetUserDepartment} from "@/common/api/commonApi.js";
	import {Decimal} from 'decimal.js';     //decimal计算
		var sourceType = [
			['camera'],
			['album'],
			['camera', 'album']
		]
		var sizeType = [
			['compressed'],
			['original'],
			['compressed', 'original']
		]
	
	export default {
		data() {
			return {
				viseId:'',
				viseName:'',
				requisitionCode:'',     //申请单编号
				requisitionName:'',    //申请单名称
				contractCode:'',
				contractName:'',
				viseDate:this.$util.getDate({
					format: true
				}),
				endDate:this.$util.getDate({
					format: true
				}),
				viseType:'',
				 
				userCode:this.$store.state.user.userCode,	        //经办人编号
				
				unitCode:this.$store.state.departmentCode,        //经办部门
				estimateCash:0.00,
				reportCash:0.00,
				reason:'',
				remark:'',
				
				contractList:[],
				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() {
			this.GetDropDown();
				
			
		},
		updated:function(){
			
		},
		methods: {
			
			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(e) {				
				console.info('submitForm');
				let _this=this;
				if(this.requisitionName==='')
				{
					uni.showToast({
						icon:"none",
						title:"请填写申请单名称",
						duration:3000
					});
					return;
				}
				if(this.requisitionName.length>50)
				{
					uni.showToast({
						icon:"none",
						title:"申请单名称不能多于50字",
						duration:3000
					});
					return;
				}
				if(this.requisitionDate===""){
					uni.showToast({
						icon:"none",
						title:"申请日期不能为空",
						duration:3000
					});
					return;
				}
				if(this.changeType===""){
					uni.showToast({
						icon:"none",
						title:"签证类型不能为空",
						duration:3000
					});
					return;
				}
				if(this.requisitionReason===""){
					uni.showToast({
						icon:"none",
						title:"原因不能为空",
						duration:3000
					});
					return;
				}
				if(this.requisitionReason.length>5000){
					uni.showToast({
						icon:"none",
						title:"原因不能超过500字",
						duration:3000
					});
					return;
				}
				if(this.remark!==""){
					if(this.remark.length>500){
						uni.showToast({
							icon:"none",
							title:"签备注不能超过500字",
							duration:3000
						});
						return;
					}	
				}
				
				
				var requisitionDTO={requisitionName:this.requisitionName,requisitionDate:this.requisitionDate,changeType:this.changeType,requisitionReason:this.requisitionReason,remark:this.remark,person:this.userCode,unitCode:this.unitCode,projectCode:this.$store.state.projectCode};
			 
				var list1=this.contractList;
				
				let list=[];
				list1.forEach(function(item,index,array){
					list.push({requisitionCode:'',contractCode:item.contractCode,estimateCash:new Decimal(item.estimateCash).toFixed(2)-0 });
					//list.push({requisitionCode:'',contractCode:item.contractCode,estimateCash: 220});
				});
				console.info("【list】");
				console.info(list);
				if(list.length<=0){
					uni.showToast({
						title:"请添加关联合同",
						icon:"none",
						duration:3000
					});
					return;
				}
				//return;
				var data={Requisition:requisitionDTO,List:list};
				//var strList=JSON.stringify(list);
				//var strData=JSON.stringify(data);
				InsertRequisition(data).then((res)=>{
					console.info("提交应答");
					console.info(res);
					if(res){
						//上传图片
						_this.uploadFileToServe(res) ;
						
						uni.navigateTo({
							url:'/pages/template/requisitionlist/requisitionlist'
						})
					}
					else{
						uni.showToast({
							title:'添加失败，重新操作',
							icon:'none',
							duration:3000
						})
					}
					
				});
			},
			/*
			获取申请单
			*/
			getRequisition() {
				let _this = this;
				//console.info('gettype',_this);
				_this.saveTemp(_this);
				//创建名字为fire的监听器，监听子页面传值事件
				uni.$on('requisition', function(data) {
					console.info("监听getRequisition子页面的传值", data);
					console.info('监听',_this);
			         _this.getTemp(_this);
					 _this.requisitionCode=data[0].requisitionCode;
					 _this.requisitionName=data[0].requisitionName;
					 _this.$nextTick(function(){
					 	//更新dom
					 });
				 
					//接收一次监听，一旦监听到回传值，则清除监听事件，若不清除，会占用资源
					uni.$off("requisition");
				});
				uni.navigateTo({
					url: '/pages/template/SelectRelationRequision/SelectRelationRequision'
				});
			},
			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);
			},
			sourceTypeChange: function(e) {
				this.sourceTypeIndex = parseInt(e.detail.value)
			},
			sizeTypeChange: function(e) {
				this.sizeTypeIndex = parseInt(e.detail.value)
			},
			countChange: function(e) {
				this.countIndex = e.detail.value;
			},
			chooseImage: async function() {
				console.info("chooseImage");
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif
                console.info(this.imageList);
				if (this.imageList.length === 5) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 5 ? 5 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						console.info("res.tempFiles");
						console.info(res.tempFiles);
						this.imageList = this.imageList.concat(res.tempFilePaths);
						
						console.info(this.imageList);
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有5张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			
			GetDropDown:function(){
				let that=this;
				GetQianzhengDropDown().then((res)=>{
					console.info(res);
					res.forEach(function(item,index,array){
						that.$set(that.array,index,item);
					});
							
				});
			},
			
			delRow:function(index){
				console.info(index);
				console.info(this.contractList[index]);
				this.contractList.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.$store.state.user.userCode,
							masterCode:masterCode,
							attachMentType:'RequisitionAttach'
						},
						headers: {
							'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
							//这里要把content-type设置为multipard/form-data，同时还要设置boundary
						},
						success: (uploadFileRes) => {
							console.log("图片上传:",uploadFileRes.data);
						}
					});
				}
			},
		
		   saveTemp(_this){  //临时存
		   	uni.setStorage({
		   		key:'viseId',
		   		data:_this.viseId
		   	});
		   	uni.setStorage({
		   		key:'viseName',
		   		data:_this.viseName
		   	});
		   	uni.setStorage({
		   		key:'requisitionCode',
		   		data:_this.requisitionCode
		   	});
		   	uni.setStorage({
		   		key:'requisitionName',
		   		data:_this.requisitionName
		   	});
		   	uni.setStorage({
		   		key:'contractName',
		   		data:_this.contractName
		   	});
		   	uni.setStorage({
		   		key:'contractCode',
		   		data:_this.contractCode
		   	});
		   	uni.setStorage({
		   		key:'viseDate',
		   		data:_this.viseDate
		   	});
		   	uni.setStorage({
		   		key:'endDate',
		   		data:_this.endDate
		   	});
		   	uni.setStorage({
		   		key:'viseType',
		   		data:_this.viseType
		   	});
		   	uni.setStorage({
		   		key:'estimateCash',
		   		data:_this.estimateCash
		   	});
		   	uni.setStorage({
		   		key:'reportCash',
		   		data:_this.reportCash
		   	});
		   	uni.setStorage({
		   		key:'reason',
		   		data:_this.reason
		   	});
		   	uni.setStorage({
		   		key:'remark',
		   		data:_this.remark
		   	});
		   
		   },
		   getTemp(_this){   //获取缓存，重新给表单赋值
		   	_this.viseId=uni.getStorageSync('viseId');
		   	_this.viseName=uni.getStorageSync('viseName');
		   	_this.requisitionCode=uni.getStorageSync('requisitionCode');
		   	_this.requisitionName=uni.getStorageSync('requisitionName');
		   	_this.contractName=uni.getStorageSync('contractName');
		   	_this.contractCode=uni.getStorageSync('contractCode');
			
		   	_this.viseDate=uni.getStorageSync('viseDate');
		   	_this.endDate=uni.getStorageSync('endDate');
		   	_this.viseType=uni.getStorageSync('viseType');
		   	_this.estimateCash=uni.getStorageSync('estimateCash');
		   	
		   	_this.reportCash=uni.getStorageSync('reportCash');
		   	_this.reason=uni.getStorageSync('reason');
		   	_this.remark=uni.getStorageSync('remark');
		   
		   },
		   
		}
	}
</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;
	    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;
	}
</style>