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

<template>
<view  :style="'padding-bottom:' + bottom ">
  	  <view class='zhanline'></view>
	  <uni-forms class='inform '  ref="form"  v-show="type==1">
	  			<!--  -->
			<view v-for="(ite,idx) in pointlist" :key="'point-'+idx" class="pointlist" >
				<view class="info_box" >
					<view class="info_tit">节点安排{{Number(idx)+1}}</view>
					<view class="delbx" @click.stop="getDelpoint(idx)" v-if="idx!=0">
						<image :src="delimg"></image>
					</view>
				</view>
					
				<uni-forms-item name="jdsj" style='margin-bottom: 0;'>
				 <view class="flexc infolist" @click="getTimeFn(idx)">
				  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>要求完成日期</view>
				  	<picker mode="date" :value="ite.jdsj"  class="infolist_a" @change='bindDateChangetimea'>
						<view :class="ite.jdsj?'':'f16 co80'">{{ite.jdsj||"请选择要求完成日期"}}</view>
				  	</picker>
				  </view>
				</uni-forms-item>
	  			
				<uni-forms-item name="deptName" style='margin-bottom: 0;'>
				 <view class="flexc infolist" @click="showPicker('zrdw',idx)">
				  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>责任单位</view>
					<view class="f16 c34 txr flex1">
						<view :class="ite.fgwJdapZrDwList.length?'':'f16 co80'">{{checkstring(ite.fgwJdapZrDwList)||"请选择责任单位"}}</view>
					</view>
				  </view>
				</uni-forms-item>
				<uni-forms-item name="deptName" style='margin-bottom: 0;'>
				 <view class="flexc infolist" @click="showPicker('xtdw',idx)">
				  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>协同单位</view>
					<view class="f16 c34 txr flex1">
						<view :class="ite.fgwJdapXtDwList.length?'':'f16 co80'">{{checkstring(ite.fgwJdapXtDwList)||"请选择协同单位"}}</view>
					</view>
				  </view>
				</uni-forms-item>
				<uni-forms-item name="jdannr" 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="ite.jdannr"    class="f16  c34 flex1 txr"/>
				  </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" :xmtype='idx' @getFile="getFile" 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="(fite,fidx) in ite.fgwJdapFjList" :key="'fj_'+fidx">
					<view class="flext f15 c6" @click.stop="getDown(fite.path)">
						<view class="imgl"><image :src="wimg" ></image></view>
						<view>{{fite.fjName}}</view>
					</view>
					<!-- 删除 -->
					<view class="delimg flex0" @click.stop="getDelFj(idx,fidx)">
						<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>	
				<!-- 添加按钮 -->
				<view class="addbox" @click.stop="getAddPoint" v-if="pagetype=='add'">
					<image :src="addpimg"></image>
					<view>添加节点安排</view>
				</view>
	  			<view class="infobtn flexcc cf f16 f500" @click="getSubmit">提交</view>
	  		</uni-forms>
		<bartree-pickerfixed ref="treePickerzrdw" deptType='1' :multiple='true' @select-change="selectChangezrdw" title="选择责任单位"
        :localdata="localdata" valueKey="id" textKey="label" childrenKey="children"></bartree-pickerfixed>
		
		<bartree-pickerfixed deptType='2' ref="treePickerxtdw" :multiple='true' @select-change="selectChangextdw" title="选择协同单位"
		:localdata="localdata" valueKey="id" textKey="label" childrenKey="children"></bartree-pickerfixed>
  </view>
</template>

<script>
import { getDictionaryFn} from '@/api/work/index.js'
import {selectDictLabel} from "@/utils/common.js"
import {getaddzdapdFn,getdetailzdapdFn,getputzdapdFn} from "@/api/zdwork/addclue.js"
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
 import config from '@/config'
  const baseUrl = config.baseUrl
  import { getToken } from '@/utils/auth'
  import {gettreeselect,getfgwtreeFn} from "@/api/system/user.js"
  import bartreePickerfixed from "@/components/ba-tree-picker/ba-tree-pickerfixed.vue"
  export default {
	components:{bartreePickerfixed},
    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,
		type:1,
		datainfo:{
			// "xmId":"",//项目ID
			// "xmmc":"",//项目名称
			// "dbnrId":"",//督办内容编号
			// "dbnrName":"",//督办内容名称
			// "deptId":"",//督办部门id
			// "deptName":"",//督办部门名称
			// "dbdj":"",//督办等级
			// "yqwcsj":""//要求完成时间
		},
		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'),
		addpimg:require('@/static/images/new/index/addp.png'),
		rules: {
		  // xmmc: {rules: [{required: true,errorMessage: '请输入项目名称'}]},
		  // dbnrName: {rules: [{required: true,errorMessage: '请选择督办内容',}]},
		  // deptName: {rules: [{required: true,errorMessage: '请选择责任单位',}]},
		  // dbdj: {rules: [{required: true,errorMessage: '请选择督办等级' } ]},
		  // yqwcsj: {rules: [{required: true,errorMessage: '请选择签要求完成时间'} ]},
		
		},
		currentdate:'',//当天日期
		superviselist:[],//督办内容bindDateChangedana
		dbnrindex:0,//督办内容
		location:[],//责任单位bindDateChangedanb
		zrdwindex:0,
		pagetype:'add',
		sfys:'',//是否宜商
		pointidx:0,
		pointlist:[],
		localdata:[],//市值单位
		selectValue:[],//选中的市值单位
		checktype:'',//选择的是哪个
		}
    },
	onLoad(e) {
		// this.currentdate = this.getNowFormatDate();
		var newObj=JSON.parse(decodeURIComponent(e.data))
		this.pagetype=newObj.pagetype||'add';
		// this.getinvestmentarea();
		this.gettreeselect()
		this.datainfo.xmId=newObj.id;
		this.datainfo.xmmc=newObj.xmmc;
		var pointobj ={
			"xmId":newObj.id,//项目ID
			"xmmc":newObj.xmmc,//项目名称
			'jdId':newObj.jdId,//节点id
			"jdsj":"",//节点完成时间
			"jdannr":"",//节点安排内容
			"fgwJdapZrDwList":[],//责任单位
			"fgwJdapXtDwList":[],//协同单位
			"fgwJdapFjList":[],//附件
		}
		this.pointlist=[];
		this.pointlist.push(pointobj)
		if(this.pagetype=='update'){
			this.datainfo.jdId=newObj.jdId;
			// 获取详情 修改
			this.getDataFn()
		}else{
				
		}
		
	// #ifdef APP
		uni.onKeyboardHeightChange(res=> { //监听键盘高度变化
		    const res_keyboard = uni.getSystemInfoSync();
		    let key_height = res.height - (res_keyboard.screenHeight - res_keyboard.windowHeight)
		     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,
		checkstring(e){
			var newArr=[];
			e.forEach((ite,idx)=>{
				newArr[idx]=ite.deptName
			})
			return newArr.join(',')
		},
		showPicker(e,idx) {
			this.checktype=e;
			this.pointidx=idx;
			if(e=='xtdw'){
				this.$refs.treePickerxtdw._show();
			}else if(e=='zrdw'){
				this.$refs.treePickerzrdw._show();
			}
		   
		 },
		 selectChangezrdw(e){
		 	var val=e;
			var idx=this.pointidx;
			this.pointlist[idx].fgwJdapZrDwList=JSON.parse(JSON.stringify(val));
		 },
		 selectChangextdw(e){
		 	var val=e;
			var idx=this.pointidx;
			this.pointlist[idx].fgwJdapXtDwList=JSON.parse(JSON.stringify(val))
		 },
		gettreeselect(){
			// 市值部门102  承接地103
			//线下 210   线上212
			var url=baseUrl;
			var parentId=''
			if(url.indexOf('https://qszs.qs163.cn')!=-1){
				parentId=212
			}else{
				parentId=210
			}
			var params={
				parentId:parentId
			}
			getfgwtreeFn(params).then(res=>{
				if(res.code==200){
					if(res.data&&res.data.length){
						this.localdata=res.data;
						// var neArr=res.data
						// for(var i=0;i<neArr.length;i++){
						// 	if(neArr[i].id=='201'){
						// 		this.cityrange=neArr[i].children
						// 	}
						// 	if(neArr[i].id=='103'){
						// 		this.adrrange=neArr[i].children
						// 	}
						// }
					}
					
					// this.list=res.rows
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getAddPoint(){
			var obj ={
				"xmId":this.datainfo.xmId,//项目ID
				"xmmc":this.datainfo.xmmc,//项目名称
				'jdId':this.datainfo.jdId,//节点信息
				"jdsj":"",//节点完成时间
				"jdannr":"",//节点安排内容
				"fgwJdapZrDwList":[],//责任单位
				"fgwJdapXtDwList":[],//协同单位
				"fgwJdapFjList":[],//附件
			}
			this.pointlist.push(obj)
		},
		getDelpoint(idx){
			var that = this;
			uni.showModal({
				title: '提示',
				content: "是否确认删除",
				success: function(res) {
					if (res.confirm) {
						that.pointlist.splice(idx, 1)
					} else if (res.cancel) {
					}
				}
			});
		},
		// 项目详情
		getDataFn(){
			var that=this;
			getdetailzdapdFn(this.datainfo.jdId).then(res=>{
				if(res.code==200){
					that.pointlist=[];
					that.pointlist.push(res.data)
				}else{
					this.$toast(res.msg)
				}
			})
		},
		// 字典值
		getinvestmentarea(){
			// 督办内容
			// getDictionaryFn('supervise_handle').then(res=>{
			// 	if(res.code==200){
			// 		this.superviselist=res.data
			// 	}
			// })
			// 获取责任单位
			getDictionaryFn('proposed_location').then(res=>{
				if(res.code==200){
					this.location = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: Number(v.dictValue)
						}
					})
				}
			})
		},
		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;
		},
		getTimeFn(idx){
			this.pointidx=idx;
		},
		bindDateChangetimea(e){//完成时间
			var val=e.detail.value;
			var idx=this.pointidx;
			this.pointlist[idx].jdsj = e.detail.value
			// this.datainfo.jdsj=
		},
		bindDateChangedana(e){
			var val=e.detail.value;
			this.datainfo.dbnrName=this.superviselist[val].dictLabel
			this.datainfo.dbnrId=this.superviselist[val].dictValue
		},
		bindDateChangedanb(e){
			var val=e.detail.value;
			this.datainfo.deptName=this.location[val].dictLabel
			this.datainfo.deptId=this.location[val].dictValue
		},
      getSubmit() {
			var that=this;
			// 
			var pointlist=that.pointlist;
			for(var i =0;i<pointlist.length;i++){
				var str='节点安排'+(Number(i)+1)
				var nstr=''
				if(!pointlist[i].jdsj){
					nstr="请选择"+str+":要求完成时间"
					that.$toast(nstr)	
					return
				}
				if(!pointlist[i].fgwJdapZrDwList||pointlist[i].fgwJdapZrDwList.length<1){
					nstr="请选择"+str+":责任单位"
					that.$toast(nstr)	
					return
				}
				if(!pointlist[i].fgwJdapXtDwList||pointlist[i].fgwJdapXtDwList.length<1){
					nstr="请选择"+str+":协同单位"
					that.$toast(nstr)	
					return
				}
				if(!pointlist[i].jdannr){
					nstr="请输入"+str+":具体内容"
					that.$toast(nstr)	
					return
				}
			}
			
			if(this.pagetype=='add'){
				var params={
					fgwJdapList:pointlist
				}
				getaddzdapdFn(params).then(res=>{
					if(res.code==200){
						this.$toast('新增节点安排成功')	
						setTimeout(function() {
							uni.$emit('refreshdatazd');
							uni.navigateBack({delta: 1});
						},1500);
					}else{
						this.$toast(res.msg)
					}
				})
			}else{
				var params=that.pointlist[0];
				getputzdapdFn(params).then(res=>{
					if(res.code==200){
						this.$toast('修改节点安排成功')	
						setTimeout(function() {
							uni.$emit('refreshdatazd');
							uni.navigateBack({delta: 1});
						},1500);
					}else{
						this.$toast(res.msg)
					}
					
				})
			}
			this.$refs.form.validate().then(res => {
				

			})
      },
	  
	  getFile(idx){
	  	this.filetype=idx 
	  },
	  onuploadEnd(item) {
	  	var newobj={}
	  	var responseText=JSON.parse(item.responseText)
	  	newobj.fjName=responseText.originalFilename;
	  	newobj.path=responseText.fileName;
		var pidx=this.filetype;
		var filelist=JSON.parse(JSON.stringify(this.pointlist[pidx].fgwJdapFjList))
	  	filelist.push(newobj)
	  	this.pointlist[pidx].fgwJdapFjList=JSON.parse(JSON.stringify(filelist))
	  },
	  getDelFj(idx,fidx){
		  var filelist=JSON.parse(JSON.stringify(this.pointlist[idx].fgwJdapFjList))
			filelist.splice(fidx,1)
	  	this.pointlist[idx].fgwJdapFjList=JSON.parse(JSON.stringify(filelist))
	  },
	  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) {
	  			     }
	  			   });
	  		},
	  		fail(res) {uni.hideLoading()}
	  	})
	  },
    }
  }
</script>

<style lang="scss" scoped>
 .inform{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: 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_box{
	  padding: 30rpx 26rpx;display: flex;align-items: center;
	  .info_tit{font-size: 32rpx;color: #FE5706;font-weight: bold;flex: 1;}
  }

.infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;color: #343434;}
.addbox{display: flex;align-items: center;justify-content: flex-end;padding: 0 24rpx;margin-top:30rpx;
	image{width: 32rpx;height: 32rpx;margin-right: 20rpx;}
	view{font-size: 32rpx;color: #1FB9F7;font-weight: 500;}
}

.pointlist{padding: 30rpx 0;}
 .inform /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
.inform .pl12{margin-right: 10rpx;}
.fixedbox .pl12{margin-right: 10rpx;}
</style>