dccloud/uni-app-front/pages/template/InsertzzSupplierEx/InsertzzSupplierEx.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="title"  />
				</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="projectName" @change="bindPickerChange" v-model="projectCode"
					  style="width: 100%;">
						<view class="uni-input">{{array.length>0?array[index].projectName:''}}</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-textarea">
					<textarea focus placeholder="请输入原因" v-model="reason" 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-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>
			
		
			<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 permision from "@/common/permission.js";
	import {InsertzzSupplierEx,GetProjectBySupplierCode} from "@/common/api/requisitionApi.js";
	
	import {Decimal} from 'decimal.js';     //decimal计算
		 
	
	export default {
		data() {
			return {
				needFormCach:false,    //是否需要表单缓存
				title:'',
				projectCode:'',
				requisitionType:0,
				reason:'',				
				supplierCode:this.$store.state.user.supplierCode,	        //用户编号
			
				
				
				
				imageList: [],
				
				countIndex: 5,
				count: [1, 2, 3, 4, 5],
				
				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('onLoad');
			console.info(uni.getStorageSync('storage_state'));
			//console.info(this);
			this.$util.persistLogin(this);
			//console.info(this.$store.state.user);
			//const page = getCurrentPages();
			//console.info(page);
			
		},
		onUnload() {
			this.imageList = [],
			
			this.countIndex = 5;
		},
		created: function() {
			console.info('created');
			this.GetDropDown();
			
		},
		updated:function(){
			
		},
		
		methods: {
			input(form, name, value) {
				this.$refs[form].setValue(name, value)
			},		

			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(e) {				
				console.info('submitForm');
				let _this=this;
				if(this.title==='')
				{
					uni.showToast({
						icon:"none",
						title:"请填写申请标题",
						duration:3000
					});
					return;
				}
				if(this.title.length>200)
				{
					uni.showToast({
						icon:"none",
						title:"申请标题不能多于200字",
						duration:3000
					});
					return;
				}
				if(this.projectCode=="")
				{
					uni.showToast({
						icon:"none",
						title:"请选择项目",
						duration:3000
					});
					return;
				}
				if(this.reason===""){
					uni.showToast({
						icon:"none",
						title:"原因不能为空",
						duration:3000
					});
					return;
				}
				if(this.reason.length>500){
					uni.showToast({
						icon:"none",
						title:"原因不能超过500字",
						duration:3000
					});
					return;
				}
				
				if(this.$util.isEmpty(this.supplierCode)){
					uni.showToast({
						icon:"none",
						title:"登录人信息丢失，请重新登录再操作",
						duration:4000
					});
					return;
				}
				let requisitionType=this.$util.getQuery("type")-0;
				var dto={title:this.title,projectCode:this.projectCode,supplierCode:this.supplierCode,reason:this.reason,checkPerson:''};
			 
				console.info('dto',dto);
				//return;
				//var data={dto:dto};
				//var strList=JSON.stringify(list);
				//var strData=JSON.stringify(data);
				InsertzzSupplierEx(dto).then((res)=>{
					console.info("插入结果",res);
					
					if(res){
						//上传图片
						_this.uploadFileToServe(res) ;
						
						uni.navigateTo({
							url:'/pages/template/SupplierList/SupplierList'
						})
					}
					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.projectCode=this.array[this.index].projectCode;
				console.info('bindPickerChange',this.projectCode);
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
				this.requisitionDate=this.date;
				console.info(this.date);
			},
			
			countChange: function(e) {
				this.countIndex = e.detail.value;
			},
			
			GetDropDown:function(){
				let that=this;
				
				GetProjectBySupplierCode(this.supplierCode).then((res)=>{
					console.info('GetProjectBySupplierCode',res);
					res.forEach(function(item,index,array){
						that.$set(that.array,index,item);
					});
					that.projectCode=that.array[0].projectCode;	
					console.info('array',that.array);
				});
			},
			
			openWindow:function(){
				 
			},
			
			
			/*
			上传后返回的值：
			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++) {
			        console.info('x-token',_this.$store.state.token.tokenStr);
					uni.uploadFile({
						url: '/api/Common/UploadImage', 
						filePath: urlList[i],
						name: 'file',
						formData: {
							createPerson:_this.$store.state.user.supplierCode,
							masterCode:masterCode,
							attachMentType:'zzSupplierExAttach'
						},
						headers: {
							'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime(),
							'X-Token':_this.$store.state.token.tokenStr
							//这里要把content-type设置为multipard/form-data，同时还要设置boundary
						},
						success: (uploadFileRes) => {
							console.log("图片上传:",uploadFileRes.data);
						}
					});
				}
			}
		}
	}
</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>