shuju_ui/qs_zhaoshang/pages/work/count/addzscount.vue

<template>
<view  :style="'padding-bottom:' + bottom ">
  	  <view class='zhanline'></view>
	  <uni-forms class='inform'  ref="form" :rules="rules" :value="datainfo" >
	  		<uni-forms-item name="xmmc" style='margin-bottom: 0;'>
	  		 <view class="flexc infolist">
	  		  	<view class="f16 fw c34 flex0 pr pl12">单位名称</view>
	  		  	<input  placeholder="请输入单位名称" disabled="true" v-model="datainfo.deptName"  class="f16  c34 flex1 txr"/>
	  		  </view> 
	  		</uni-forms-item>
	  		<uni-forms-item name="" style='margin-bottom: 0;'>
	  		 <view class="flexc infolist">
	  		  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>外出日期</view>
				<!-- fields="month" -->
				<picker mode="date" :value="datainfo.outsideTime"  :end="currentdate" class="infolist_a" @change='bindDateChangea'>
					<view :class="datainfo.outsideTime?'':'f16 co80'">{{datainfo.outsideTime||"请选择外出日期"}}</view>
				</picker>
				</view>
	  		</uni-forms-item>
	  		<!-- <view class="info_tit">招商外出次数/天数</view> -->
	  		<uni-forms-item name="numberOutings" style='margin-bottom: 0;'>
	  		 <view class="flexc infolist">
	  		  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>外出天数</view>
	  		  	<input  placeholder="请输入外出天数" type="number" v-model="datainfo.numberOutings"  class="f16  c34 flex1 txr"/>
	  		  </view> 
	  		</uni-forms-item>
			<uni-forms-item name="outgoer" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>外出人员</view>
			  	<input  placeholder="请输入外出人员"  v-model="datainfo.outgoer"  class="f16  c34 flex1 txr"/>
			  </view> 
			</uni-forms-item>
			<view class="border"></view>
			<uni-forms-item name="details" style='margin-bottom: 0;'>
			 <view class="flexc infolist" style="align-items: flex-start;">
			  	<view class="f16 fw c34 flex0 pr pl12">情况说明</view>
				<uni-easyinput :inputBorder='false' type="textarea"  v-model="datainfo.details"  placeholder="请输入具体外出情况" placeholderStyle='text-align: right;font-size:32rpx;color:#808080'></uni-easyinput>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="zsyzFjList" style='margin-bottom: 0;'>
				<view class="flexc infolist">
					<view class="f16 fw c34 flex0 pr pl12">附件</view>
					<view class="infolist_a co28" ><lsj-upload
						    ref="lsjUpload"
						    childId="upload1"
						    :width="width"
						    :height="height"
						    :option="option"
						    :size="size"
						    :formats="formats"
						    :debug="debug"
						    :instantly="instantly"
						    @progress=""
							@uploadEnd="onuploadEnd" >
						        <view class="btn" :style="{width: width,height: height}">选择附件</view>
						</lsj-upload></view>
					</view>
			</uni-forms-item>
			<view class=" cldelistbf"  v-for="(ite,idx) in filelist" :key='idx'>
				<view class="flext f15 c6" @click="getDown(ite.path)">
					<view class="imgl"><image :src="wimg" ></image></view>
					<view>{{ite.fjName}}</view>
				</view>
				<!-- 删除 -->
				<view class="delimg flex0" @click.stop="getDelFj(idx)">
					<image :src="delimg"></image>
				</view>
			</view>
			<view class="infolist_b"><text>*</text>请上传大小不超过<text>100MB</text>格式为<text>doc/xls/ppt/txt/pdf/zip/rar/word</text>的文件</view>
			<view class="pfixedb flexc">
				<!-- 修改  -->
				<view v-if="checkPermi(['system:wczs:edit'])&&pagetype=='update'"  class="infobtn flexcc cf f16 f500 btn2" @click="getSubmit">提交</view>
				<!-- 新增  -->
				<view v-if="checkPermi(['system:wczs:add'])&&pagetype=='add'"  class="infobtn flexcc cf f16 f500 btn2" @click="getSubmit">提交</view>
				
				<view v-if="checkPermi(['system:wczs:remove'])&&pagetype=='update'"  class="infobtn flexcc cf f16 f500 btn1" @click="getDelFn">删除</view>
			</view>
			
			
	  	</uni-forms>

  </view>
</template>

<script>
import { getwczsaddFn,getwczsputFn,getwczsdetailFn,getwczsdelFn} from '@/api/work/count.js'
import config from '@/config'
  const baseUrl = config.baseUrl
  import { getToken } from '@/utils/auth'
  import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  export default {

    data() {
      return {
		  //附件
		    option: {
		          // 上传服务器地址，需要替换为你的接口地址
		          url: baseUrl+'/common/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
		          // 上传附件的key
		          name: 'file',
		          // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
		          header: {
		              // 示例参数可删除
		              'Authorization':  'Bearer ' + getToken(),
		          },
		          // 根据你接口需求自定义body参数
		          formData: {
		          }
		      },
		  // 选择文件后是否立即自动上传，true=选择后立即上传
		  instantly: true,
		  // 必传宽高且宽高应与slot宽高保持一致
		  width: '',
		  height: '48rpx',
		  // 限制允许上传的格式，空串=不限制，默认为空
		  formats: 'doc,docx,xls,ppt,txt,pdf,zip,rar,word',
		  // 文件上传大小限制
		  size: 100,
		  // 文件数量限制 默认10
		  count: 5,
		  // 文件回显列表
		  files: new Map(),
		  // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
		  wxFiles: [],
		  // 是否打印日志
		  debug: false,
		  filelist:[], 
		  
		defaultPhoneHeight: '', //屏幕默认高度
		nowPhoneHeight: '', //屏幕现在的高度
		bottom:0,
		baseUrl:'',
		datainfo:{
			"deptName":"",//单位名称
			"year":"",//年
			"month":"",//月
			"outsideTime":"",//外出时间
			"numberOutings":"",//外出天数
			"outgoer":"",//外出人员
			"details":'',//情况说明
			zsyzFjList:[],//附件地址
		},
		rules: {
		  outsideTime: {rules: [{required: true,errorMessage: '请选择外时间'}]},
		  numberOutings: {rules: [{required: true,errorMessage: '请输入外出天数'},{pattern:/^[1-9]\d*$/,errorMessage: '请输入整数(天)'}]},
		  outgoer: {rules: [{required: true,errorMessage: '请输入外出人员',}]},
		  // zsyzFjList: {rules: [{required: true,errorMessage: '请上传附件'} ]},
		},
		wimg:require('@/static/images/index/wicon.png'),
		downimg:require('@/static/images/index/down.png'),
		delimg:require("@/static/images/mine/del.png"),
		pagetype:'add',
		strfrom:'tong',
		currentdate:'',
	}
    },
	onLoad(e) {
		this.baseUrl=baseUrl;
		this.pagetype=e.pagetype||'add';
		this.strfrom=e.strfrom||'tong';
		this.currentdate=this.getNowFormatDate();
		if(this.pagetype=='update'){
			// 获取详情 修改
			this.id=e.id
			this.getDataFn()
		}else{
			this.datainfo.outsideTime=this.getNowFormatDate();
			
			this.datainfo.deptName=this.$store.state.user.deptName;
		}
	// #ifdef APP
		uni.onKeyboardHeightChange(res=> { //监听键盘高度变化
		    const res_keyboard = uni.getSystemInfoSync();
		    let key_height = res.height - (res_keyboard.screenHeight - res_keyboard.windowHeight)
		    // let key_height = res.height - (res_keyboard.screenHeight - res_keyboard.windowHeight + res_keyboard.safeAreaInsets.bottom)
		     this.bottom = `${ key_height>0 ? key_height : 0}px`; 
		})
		// #endif
	},
	onHide() {
	    // #ifdef APP-PLUS
	    uni.offKeyboardHeightChange();  // 取消监听键盘高度变化事件，避免内存消耗
	    // #endif
	},
    onReady() {
      // this.$refs.form.setRules(this.rules)
    },
    methods: {
		checkPermi, checkRole,
		getNowFormatDate(){
			let date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			m = m < 10 ? "0" + m : m;
			let d = date.getDate();
			d = d < 10 ? "0" + d : d;
			const timeday = y + "-" + m+ "-" + d;
			this.datainfo.year=y;
			this.datainfo.month=m;
			return timeday;
		},
		// 详情
		getDataFn(){
			getwczsdetailFn(this.id).then(res=>{
				if(res.code==200){
					this.datainfo=res.data;
					if(res.data.zsyzFjList&&res.data.zsyzFjList.length){
						this.filelist=JSON.parse(JSON.stringify(res.data.zsyzFjList))
					}
				}else{
					this.$toast(res.msg)
				}
			})
		},

		bindDateChangea(e){//上报日期
			this.time=e.detail.value;
			var value=e.detail.value;
			var timestr=value.split('-');
			this.datainfo.year=timestr[0];
			this.datainfo.month=timestr[1];
		},
      getSubmit() {
			var that=this;
			this.datainfo.zsyzFjList=JSON.parse(JSON.stringify(this.filelist));
			this.$refs.form.validate().then(res => {
				var params=this.datainfo;
				// params.zsyzFjList=this.filelist
				if(this.pagetype=='add'){
					getwczsaddFn(params).then(res=>{
						if(res.code==200){
							this.$toast('上报信息成功')	
							setTimeout(function() {
								if(that.strfrom=='tong'){
									uni.$emit('refreshdatatong');
									if(checkPermi(['system:qktj:list'])){
										that.$tab.redirectTo('/pages/work/count/cluelist') 
									}else{
										uni.navigateBack({delta: 1});
									}	
								}else{
									uni.$emit('refreshdata');
									uni.navigateBack({delta: 1});
								}
							},1500);
						}else{
							this.$toast(res.msg)
						}
						
					})
				}else{
					getwczsputFn(params).then(res=>{
						if(res.code==200){
							this.$toast('修改信息成功')	
							setTimeout(function() {
								uni.$emit('refreshdata');
								uni.navigateBack({delta: 1});
							},1500);
						}else{
							this.$toast(res.msg)
						}
						
					})	
				}
				
			})
      },
	  getDelFn(){
		var that=this;
		 uni.showModal({
		 	title: '确认删除',
		 	content: "是否确认删除",
		 	cancelText: '取消',
		 	confirmText: '确认',
		 	success: function(res) {
		 		if (res.confirm) {
		 			getwczsdelFn(that.id).then(res=>{
						if(res.code==200){
							that.$toast('删除信息成功')	
							setTimeout(function() {
								uni.$emit('refreshdata');
								uni.navigateBack({delta: 1});
							},1500);
						}else{
							that.$toast(res.msg)
						}
					})
					
		 		} else if (res.cancel) {
		 		}
		 	}
		 }); 
	  },
	  onuploadEnd(item) {
	  	var newobj={}
	  	var responseText=JSON.parse(item.responseText)
	  	newobj.fjName=responseText.originalFilename;
	  	newobj.path=responseText.fileName;
	  	this.filelist.push(newobj)
	  	this.datainfo.zsyzFjList=JSON.parse(JSON.stringify(this.filelist))
	  },
	  getDelFj(idx){
		  var that=this;
		  uni.showModal({
		  	title: '确认删除',
		  	content: "是否确认删除",
		  	cancelText: '取消',
		  	confirmText: '确认',
		  	success: function(res) {
		  		if (res.confirm) {
		  			that.filelist.splice(idx,1)
		  			that.datainfo.zsyzFjList=JSON.parse(JSON.stringify(that.filelist))
		  		} else if (res.cancel) {
		  		}
		  	}
		  });
	  },
	  getDown(e){
		  uni.showLoading({
		  	title: '加载中'
		  });
	  	var url=baseUrl+e;
	  	uni.downloadFile({
	  		url: url,//文件的下载路径
	  		success(result) {
				uni.hideLoading()
	  			var filePath = result.tempFilePath;
	  			   uni.openDocument({
	  			     filePath: filePath,
	  			     showMenu: true,
	  			     success: function (res) {
	  			       // console.log('打开文档成功');
	  			     }
	  			   });
	  		},
	  		fail(res) {uni.hideLoading()}
	  	})
	  },
    }
  }
</script>

<style lang="scss" scoped>
 .inform{padding-top: 30rpx; padding-bottom: 160rpx;}
  .infolist{padding: 30rpx 32rpx 30rpx 24rpx;position: relative;
	.cir{position: absolute;font-size: 36rpx;font-weight: bold;color: #FE5706;left: 0rpx;}
	// .delimg{width: 30rpx;height:30rpx;margin-left: 8rpx;}
  }
  .delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;
  	image{width: 30rpx;height: 30rpx;}
  }
  .infobtn{width: 100%;height: 88rpx;background: #FA5F03;line-height: 88rpx;
	&.btn1{background-color: #1FB9F7;flex: 1;}
	&.btn2{background-color:#FF6400;flex: 1;}
  }
  .input_ye image{width: 34rpx;height: 18rpx;}
.info_tit{font-size: 32rpx;color: #FE5706;padding: 50rpx 26rpx 20rpx;font-weight: bold;}
.infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;color: #343434;}
.infolist_add{position: absolute;right: 0;top: -40rpx;font-size: 28rpx;color: #41C942;padding-right: 30rpx;
	image{width: 30rpx;height: 30rpx;margin-right: 20rpx;}
}
.fixedbtn{width:100%;height: 80rpx;background: #FF6400;
border-radius: 10rpx;display: flex;align-items: center;justify-content: center;font-size: 32rpx;font-weight: bold;color: #FFFFFF;
	&.btn1{background-color: #20ACCF;margin-bottom: 36rpx;}
	}
.fixedbox .infolist{padding: 30rpx 0;}
 .inform /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
 .fixedbox /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
.inform .pl12{margin-right: 10rpx;}
.fixedbox .pl12{margin-right: 10rpx;}
.pholist{
	display: flex;align-items: center;max-width: 220rpx;overflow: hidden;
	image{
		width: 44rpx;height: 44rpx;margin-left: 10rpx;flex: 0 0 auto;
	}
}
.disabledbox{
	.infolist{background-color: #F5f5f5;}
}
</style>