shuju_ui/qs_zhaoshang/pages/zdpages/work/addrate.vue

<template>
<view  :style="'padding-bottom:' + bottom ">
  	  <view class='zhanline'></view>
	<uni-forms class='inform' ref="form" :rules="rules"  :value="datainfo">
		<!-- <view class="info_tit">{{datainfo.year}}年{{datainfo.month}}月进度汇报</view> -->
		<uni-forms-item name="hbTime" style='margin-bottom: 0;'>
		 <view class="flexc infolist">
		  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>汇报时间</view>
		  	<picker mode="date" :value="datainfo.hbTime" class="infolist_a" @change='bindDateChangetimea'>
				<view :class="datainfo.hbTime?'':'f16 co80'">{{datainfo.hbTime||"请选择汇报时间"}}</view>
		  	</picker>
		  </view>
		</uni-forms-item>
		<uni-forms-item name="isJd" style='margin-bottom: 0;'>
		 <view class="infolist">
		  	<view class="f16 fw c34 flex0 pr pl12">是否完成节点</view>
			<picker  range-key='dictLabel' :value="jdindex" :range="sflist" class="infolist_a" @change='bindDateChangea'>
				<view v-if="datainfo.isJd">{{datainfo.isJd=='Y'?'是':'否'}}</view>
				<view class="f16 co80" v-else>请选择是否完成节点</view>
			</picker>
		  </view>
		</uni-forms-item>
		<uni-forms-item name="isJs" style='margin-bottom: 0;'>
		 <view class="infolist">
		  	<view class="f16 fw c34 flex0 pr pl12">是否建设</view>
			<picker  range-key='dictLabel' :value="jsindex" :range="sflist" class="infolist_a" @change='bindDateChangeb'>
				<view v-if="datainfo.isJs">{{datainfo.isJs=='Y'?'是':'否'}}</view>
				<view class="f16 co80" v-else>请选择是否建设</view>
			</picker>
		  </view>
		</uni-forms-item>
		<uni-forms-item name="isNt" style='margin-bottom: 0;'>
		 <view class="infolist">
		  	<view class="f16 fw c34 flex0 pr pl12">是否纳统</view>
			<picker  range-key='dictLabel' :value="ntindex" :range="sflist" class="infolist_a" @change='bindDateChangec'>
				<view v-if="datainfo.isNt">{{datainfo.isNt=='Y'?'是':'否'}}</view>
				<view class="f16 co80" v-else>请选择是否纳统</view>
			</picker>
		  </view>
		</uni-forms-item>
		<uni-forms-item name="isJg" style='margin-bottom: 0;'>
		 <view class="infolist">
		  	<view class="f16 fw c34 flex0 pr pl12">是否竣工</view>
			<picker  range-key='dictLabel' :value="jgindex" :range="sflist" class="infolist_a" @change='bindDateChanged'>
				<view v-if="datainfo.isJg">{{datainfo.isJg=='Y'?'是':'否'}}</view>
				<view class="f16 co80" v-else>请选择是否竣工</view>
			</picker>
		  </view>
		</uni-forms-item>
		<uni-forms-item name="nttz" style='margin-bottom: 0;' v-show="datainfo.isNt=='Y'">
		 <view class="flexc infolist">
		  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>纳统金额(万元)</view>
		  	<input  placeholder="请输入纳统金额(万元)" type="number" v-model="datainfo.nttz"  class="f16  c34 flex1 txr"/>
		  </view> 
		</uni-forms-item>
		<uni-forms-item name="jzqk" style='margin-bottom: 0;'>
		 <view class="flexc infolist" style="align-items: flex-start;">
		  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>进展情况</view>
			<uni-easyinput :inputBorder='false' type="textarea"  v-model="datainfo.jzqk"  placeholder="进展情况" placeholderStyle='text-align: right;font-size:32rpx;color:#808080'></uni-easyinput>
		  	<!-- <input  placeholder="请输入进展情况" v-model="datainfo.jzqk"   class="f16  c34 flex1 txr"/> -->
		  </view>
		</uni-forms-item>
		<uni-forms-item name="sgll" 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.sgll"  placeholder="请输入施工力量（包含人、材、机…" placeholderStyle='text-align: right;font-size:32rpx;color:#808080'></uni-easyinput>
		  	<!-- <input  placeholder="请输入施工力量（包含人、材、机…" v-model="datainfo.sgll"   class="f16  c34 flex1 txr"/> -->
		  </view>
		</uni-forms-item>
		<!-- <view class="border"></view> -->
		<uni-forms-item name="fjList" 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="'fj_'+idx">
			<view class="flext f15 c6" @click.stop="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>
		<!-- <uni-forms-item name="remark" style='margin-bottom: 0;'>
		 <view class="flexc infolist">
		  	<view class="f16 fw c34 flex0 pr pl12">备注</view>
		  	<input  placeholder="请输入备注信息" v-model="datainfo.remark"    class="f16  c34 flex1 txr"/>
		  </view>
		</uni-forms-item> -->
		<!-- 新增 -->
		<view class="infobtn flexcc cf f16 f500" v-if="(checkPermi(['fgw:jzqk:add'])&&pagetype=='add')||(checkPermi(['fgw:jzqk:edit'])&&pagetype=='update')" @click="getSubmit">提交</view>
	</uni-forms>
  </view>
</template>

<script>
import { getDictionaryFn} from '@/api/work/index.js'
import {selectDictLabel} from "@/utils/common.js"
import {getdetailzdjzqkFn,getaddzdjzqkFn,getputzdjzqkFn} from '@/api/zdwork/clue.js'
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
 import config from '@/config'
  const baseUrl = config.baseUrl
  import { getToken } from '@/utils/auth'
  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:[], 
		
		selectDate: '',
		defaultPhoneHeight: '', //屏幕默认高度
		nowPhoneHeight: '', //屏幕现在的高度
		bottom:0,
		datainfo:{
			"xmId":"",//项目ID
			"xmmc":"",//项目名称
			"deptId":"",//审核人id
			"deptName":"",//部门名称
			"jzqk":"",//进展情况
			"sgll":"",//施工力量
			"hbTime":"",//汇报时间
			"isJd":"N",//
			"isJs":"N",//是否建设
			"isNt":"N",//是否纳统
			"isJg":"N",//
			"nttz":"",//纳统投资
			fjList:[],//附件地址
		},
		tanfalg:false,
		addimg:require("@/static/images/mine/add.png"),
		delimg:require("@/static/images/mine/del.png"),
		checknimg:require("@/static/images/mine/jnicon.png"),
		gcheckimg:require("@/static/images/mine/jicon.png"),
		closeimg:require('@/static/images/close.png'),
		wimg:require('@/static/images/index/wicon.png'),
		downimg:require('@/static/images/index/down.png'),
		rules: {
		  hbTime: {rules: [{required: true,errorMessage: '请选择汇报时间'}]},
		  jzqk: {rules: [{required: true,errorMessage: '请输入进展情况',}]},
		  // sgll: {rules: [{required: true,errorMessage: '请输入施工力量' } ]},
		  // fjList: {rules: [{required: true,errorMessage: '请上传附件'} ]},
		},
		
		jdindex:-1,//完成
		jsindex:-1,//开工
		ntindex:-1,//纳统
		jgindex:-1,//竣工
		sflist:[{dictLabel:'是',dictValue:'Y'},{dictLabel:'否',dictValue:'N'}],//是否
		currentdate:'',//当天日期
		pagetype:'add',
		jzfrom:'',//从哪来
		}
    },
	onLoad(e) {
		this.datainfo.hbTime = this.getNowFormatDate();
		var newObj={};
		if(e.data){
			newObj=JSON.parse(decodeURIComponent(e.data))
			this.jzfrom=newObj.jzfrom||'';
			this.pagetype=newObj.pagetype||'add';
			this.datainfo.xmId=newObj.id;
			this.datainfo.xmmc=newObj.xmmc;
			this.datainfo.year=newObj.year||"";
			this.datainfo.month=newObj.month||'';
			this.datainfo.jdId=newObj.jdId||"";
		}
		console.log(newObj)
		if(this.pagetype=='update'){
			this.id=newObj.xmhbid;
			// 获取详情 修改
			this.getDataFn()
		}else{
			
		}
	// #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`; 
			 console.log( this.bottom,1)
		})
		// #endif
	},
	onHide() {
	    // #ifdef APP-PLUS
	    uni.offKeyboardHeightChange();  // 取消监听键盘高度变化事件，避免内存消耗
	    // #endif
	},
    onReady() {
      // this.$refs.form.setRules(this.rules)
    },
    methods: {
		checkPermi, checkRole,
		// 项目详情
		// that.diff_amount = parseFloat(that.order.amount - that.money).toFixed(2);
		getDataFn(){
			var that=this;
			getdetailzdjzqkFn(this.id).then(res=>{
				if(res.code==200){
					this.datainfo=res.data;
					if(res.data.fjList&&res.data.fjList.length){
						this.filelist=JSON.parse(JSON.stringify(res.data.fjList))
					}	
				}else{
					this.$toast(res.msg)
				}
			})
		},

		// 字典值
		getinvestmentarea(){
			// 所属行业
			getDictionaryFn('industry').then(res=>{
				if(res.code==200){
					this.industry=res.data
				}
			})
		},
		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;
			return timeday;
		},
		
		bindDateChangetimea(e){//计划开工时间
			this.datainfo.jhkgsj=e.detail.value
		},
		
		bindDateChangea(e) {// 完成
			var val=e.detail.value;
			this.datainfo.isJd=this.sflist[val].dictValue;
		},
		bindDateChangeb(e) {// 开工
			var val=e.detail.value;
			this.datainfo.isJs=this.sflist[val].dictValue;
		},
		bindDateChangec(e) {// 纳统
			var val=e.detail.value;
			this.datainfo.isNt=this.sflist[val].dictValue;
		},
		bindDateChanged(e) {// 竣工
			var val=e.detail.value;
			this.datainfo.isJg=this.sflist[val].dictValue;
		},
      getSubmit() {
			var that=this;
			this.$refs.form.validate().then(res => {
				var params=this.datainfo;
				if(params.isNt=='Y'){
					if(!params.nttz){
						that.$toast('请输入纳统资金')
						return
					}
				}
				if(this.pagetype=='add'){
					getaddzdjzqkFn(params).then(res=>{
						if(res.code==200){
							this.$toast('新增汇报进度成功')	
							setTimeout(function() {
								uni.$emit('refreshdatazd');
								if(that.jzfrom=='ratelist'){
									uni.navigateBack({delta: 2});
								}else{
									uni.navigateBack({delta: 1});
								}
								
							},1500);
						}else{
							this.$toast(res.msg)
						}
					})
				}else{
					getputzdjzqkFn(params).then(res=>{
						if(res.code==200){
							this.$toast('修改汇报进度成功')	
							setTimeout(function() {
								uni.$emit('refreshdatazd');
								uni.navigateBack({delta: 1});
							},1500);
						}else{
							this.$toast(res.msg)
						}
						
					})
				}
			})
      },
	  
	  
	  onuploadEnd(item) {
	  	var newobj={}
	  	var responseText=JSON.parse(item.responseText)
	  	newobj.fjName=responseText.originalFilename;
	  	newobj.path=responseText.fileName;
		newobj.xmId=this.datainfo.xmId;
		newobj.xmmc=this.datainfo.xmmc;
		newobj.type= '18';
	  	this.filelist.push(newobj)
	  	this.datainfo.fjList=JSON.parse(JSON.stringify(this.filelist))
	  },
	  getDelFj(idx){
	  		  var that=this;
	  		  if(!this.disabled){
	  			  uni.showModal({
	  			  	title: '确认删除',
	  			  	content: "是否确认删除",
	  			  	cancelText: '取消',
	  			  	confirmText: '确认',
	  			  	success: function(res) {
	  			  		if (res.confirm) {
	  			  			that.filelist.splice(idx,1)
	  			  			that.datainfo.fjList=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;display: flex;align-items: center;
	.cir{position: absolute;font-size: 36rpx;font-weight: bold;color: #FE5706;left: 0rpx;}
  }
  .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;position: fixed;left: 0;right: 0;bottom: 0;z-index: 3;}
  .input_ye image{width: 34rpx;height: 18rpx;}
.info_tit{font-size: 32rpx;color: #FE5706;padding: 30rpx 26rpx;font-weight: bold;}
.infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;color: #343434;}


 .inform /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
.inform .pl12{margin-right: 10rpx;}
.fixedbox .pl12{margin-right: 10rpx;}

// 计算合计
.infohjbtn{font-size: 30rpx;margin-left: 20rpx;color: #3C9BCD;}
</style>