zheng_xie_ui/work/pages/meeting/add.vue

<template>
	<view >
		<view class="bgtop"></view>
		<uni-forms :modelValue="datainfo">
		<view class="addbox">
			<view class="boxs pdbox" style="padding-bottom: 2rpx;">
				<view class="titbox mb14">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>基本详情</view>
					</view>
				</view>
				<uni-forms-item label="会议名称" name="conferenceTitle" required>
					<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.conferenceTitle" placeholder="请输入会议名称" />
					<!-- <view class="edtip pa">* 标题前无须加关于，标题后无须加的建议，系统将自动填写</view> -->
				</uni-forms-item>
				<picker  mode="date"   @change='bindDateChangea'>
					<uni-forms-item label="会议日期" name="conferenceDate" required>
						<view class="lbtabp">
							<view :class="datainfo.conferenceDate?'':'coa'">{{datainfo.conferenceDate || "请选择会议日期"}}</view>
						</view>
					</uni-forms-item>
				</picker>
				<picker  mode="time"  @change='bindDateChangeb'>
					<uni-forms-item label="会议时间" name="conferenceTime" required>
						<view class="lbtabp">
							<view :class="datainfo.conferenceTime?'':'coa'">{{datainfo.conferenceTime || "请选择会议时间"}}</view>
						</view>
					</uni-forms-item>
				</picker>
				<uni-forms-item label="会议地点" name="conferenceAddress" required>
					<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.conferenceAddress" placeholder="请输入会议地点" />
				</uni-forms-item>
			</view>
			<!-- 参会人员 -->
			<view class="boxs pdbox">
				<view class="titbox mb14 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>参会人员</view>
					</view>
					<view class="addpeo" @click="getAddPeoFn">
						<image :src="addimg"></image>
						添加人员
					</view>
				</view>
				<view class="peoBox">
					<block v-if="datainfo.zxConferenceUserList&&datainfo.zxConferenceUserList.length">
						<view v-for="(ite,idx) in datainfo.zxConferenceUserList" :key="idx">{{ite.userName}}
							<block v-if="idx<datainfo.zxConferenceUserList.length-1">,</block>
						</view>
					</block>
					<view class="coa" v-else>请选择参会人员</view>
				</view>
			</view>
			<view class="boxs pdbox">
				<view class="titbox mb20">
					<view class="tit flexc">
						<view>备注信息</view>
					</view>
				</view>
				<textarea placeholder="请输入备注信息" v-model="datainfo.remark"></textarea>
			</view>
			<view class="addbtn">
				<view class="btn btn1" @click="getZanFnt">暂存</view>
				<view class="btn btn2" @click="getSubmit">提交</view>
			</view>
		</view>
		</uni-forms>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	import { selectValue } from '@/utils/common.js';
	import {getMeetAddFn,getMeetDetaiFn,getMeetEditFn} from "@/api/mine/meeting.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	export default{
		data(){
			return{
				titimg:require("@/work/static/images/titbg.png"),
				addimg:require("@/work/static/images/meeting/add.png"),
				datainfo:{
					"conferenceTitle":"",//会议名称
					"conferenceDate":"",//会议日期
					"conferenceTime":"",//会议时间
					"conferenceAddress":"",//会议地点,
					"remark":'',//备注
					'zxConferenceUserList':[],//参会人员
				},
				id:"",
				pagetype:'add',
				editinfo:'',
			}
		},
		onUnload(){
			uni.$off('refreshtalb')
		},
		onLoad(e) {
			uni.$on('refreshtalb', (e) => {
				this.datainfo.zxConferenceUserList=e.zxConferenceUserList
			})
			if(e.type=='edit'){
				this.id=e.id;
				this.pagetype='edit'
				this.getDetail()
			}
			if(e.type=='old'&&uni.getStorageSync('cjhyList')){
				var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('cjhyList')))
				var params=newObj.params;
				this.datainfo=params;
			}
		},
		methods:{
			kayType(ite,list){
				return selectValue(list, ite);
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.datainfo.conferenceDate=val;
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.datainfo.conferenceTime=val+':00';
			},
			getDetail(){
				var that=this;
				getCaseDetailFn(this.id).then(res=>{
					if(res.code==200){
						var data=res.data;
						this.datainfo=res.data;
						var taryList=data.proposalUserList;
						if(taryList&&taryList.length){
							var newArr=[]
							taryList.forEach(ite=>{
								newArr.push(ite.name)
							})
							this.tary=newArr.join('/')
						}
						// this.dwdetList=res.data.proposalUnitReplyList;
					}
				})
			},
			getAddPeoFn(){
				var obj={
					list:this.datainfo.zxConferenceUserList,
				}
				this.$tab.navigateTo('/work/pages/meeting/people?data='+encodeURIComponent(JSON.stringify(obj)))
			},
			gettalbFn(){
				
			},
			// 暂存
			getZanFnt(){
				var that=this;
				var params=that.datainfo;
				var obj={
					params:params,
				}
				uni.setStorageSync('cjhyList', JSON.parse(JSON.stringify(obj)))
				that.$toast("暂存成功")
			},
			getSubmit(){
				var that=this;
				if(!this.datainfo.conferenceTitle){
					this.$toast("请输入会议名称")
					return
				}
				if(!this.datainfo.conferenceDate){
					this.$toast("请选择会议日期")
					return
				}
				if(!this.datainfo.conferenceTime){
					this.$toast("请选择会议时间")
					return
				}
				if(!this.datainfo.conferenceAddress){
					this.$toast("请输入会议地点")
					return
				}
				if(this.datainfo.zxConferenceUserList.length<1){
					this.$toast("请选择会议人员")
					return
				}
				var params=this.datainfo
				if(that.pagetype=='add'){
					getMeetAddFn(params).then(res=>{
						if(res.code==200){
							that.$toast("提交成功")
							uni.$emit("refreshlist")
							setTimeout(function(){
								uni.navigateBack({
									delta: 1 //返回层数，2则上上页
								});
							},1200)
						}
					})
				}else{
					getMeetEditFn(params).then(res=>{
						if(res.code==200){
							that.$toast("修改成功")
							uni.$emit("refreshdetail")
							setTimeout(function(){
								uni.navigateBack({
									delta: 1 //返回层数，2则上上页
								});
							},1200)
							
						}
					})
					
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.bgtop{height: 150rpx;background-color: $com-cd3;width: 100%;}
.pdbox{padding: 34rpx 24rpx 16rpx;}
.addbox /deep/ .uni-forms-item{margin-bottom:36rpx;}
.addbox /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 30rpx;}
.addbox /deep/ .uni-forms-item__label{font-weight: bold;font-size: 30rpx;color: #343434;width: 198rpx !important;padding-left:20rpx;}
.addbox /deep/ .is-required{position: absolute;left: 0;top: 50%;margin-top: -10rpx;}
.addbox /deep/ .uni-data-checklist{display: flex;align-items: center;justify-content: flex-end;}
.addbox /deep/ .uni-easyinput__placeholder-class{font-weight: 500;font-size: 30rpx;color: #AAAAAA;}
.addbox /deep/ .checklist-box{margin-right: 0 !important;margin-left: 40rpx !important;}
.fjadd{
	.btn{font-weight: bold;font-size: 30rpx;color: #1D64E2;margin: 0;display: flex;align-items: center;}
}
.addbox{margin-top: -120rpx;
	padding: 0 24rpx 50rpx;
	.boxs{background: #FFFFFF;border-radius: 30rpx;margin-bottom: 24rpx;overflow: hidden;position: relative;
		.infobg{width: 102rpx;height: 106rpx;position: absolute;right: 26rpx;bottom: 22rpx;}
		.tips{background: #F1F6FF;padding: 18rpx 38rpx;display: flex;align-items: flex-start;
			image{width: 20rpx;height: 26rpx;margin-right: 16rpx;flex:0 0 auto;margin-top: 4rpx;}
			view{font-weight: 500;font-size: 26rpx;color: #1D64E2;}
		}
		.titbox{
			.tit{
				image{width: 32rpx;height: 18rpx;margin-right: 10rpx;}
				view{font-weight: bold;font-size: 32rpx;color: #222327;}
			}
			.titr{width: 146rpx;height: 50rpx;background: #E4EEFF;border-radius: 26rpx;font-weight: 500;font-size: 24rpx;color: #1D64E2;text-align: center;line-height: 50rpx;}
		}
		.titinf{display: flex;flex-wrap: wrap;
			.txt{font-weight: 500;font-size: 28rpx;margin-bottom: 18rpx;flex:0 1 auto;min-width: 50%;display: flex;align-items: flex-start;color: #222327;
				text{flex: 0 0 auto;color: #9F9F9F;}
			}
		}
		.addpeo{font-weight: bold;font-size: 30rpx;color: #1D64E2;display: flex;align-items: center;
			image{width: 26rpx;height: 24rpx;margin-right: 14rpx;}
		}
		.openbox{display: flex;align-items: center;justify-content: flex-end;font-weight: 500;
font-size: 30rpx;height: 100%;color: #222327;
			
			}
		.edtip{font-weight: 500;font-size: 22rpx;color: #FF0000;
			text{margin: 4rpx 8rpx 0 0;}
			&.pa{position: absolute;right: 0;bottom: -15px;text-align: right;width: 702rpx;}
		}
	}
	
}
	.matab{display: flex;align-items: center;flex-wrap: nowrap;overflow: auto;position: absolute;left: 0;right: -48rpx;
				.list{min-width:112rpx;height: 50rpx;background: #ffffff;border-radius: 25rpx;font-size: 30rpx;font-weight: 500;box-sizing: border-box;
	color: #AAAAAA;padding: 0 24rpx;box-sizing: border-box;margin-left:24rpx;flex: 0 0 auto;border: 2rpx solid #C1C1C1;display: flex;align-items: center;justify-content: center;
				&.act{background: #E4EEFF;color: #1D64E2;border: none;}
	}
			}
	// 附件
	.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 12rpx;
		image{margin-right: 18rpx;flex: 0 0 auto;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 16rpx;
			image{width: 26rpx;height: 24rpx;}
			}
			.tit{font-size: 26rpx;color: #343434;font-weight: 500;margin-top: 4rpx;}
		.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;
			image{width: 26rpx;height: 26rpx;}
		}
	}
	.peoBox{font-size: 30rpx;color: #AAAAAA;min-height: 200rpx;display: flex;
		view{color: #222327;}
	}
	// 按钮
	.addbtn{display: flex;align-items: center;justify-content: space-between;padding-top: 26rpx;
		.btn{width: 336rpx;height: 80rpx;font-weight: bold;font-size: 30rpx;box-sizing: border-box;border-radius: 40rpx;display: flex;align-items: center;justify-content: center;
			&.btn1{border: 2rpx solid #1D64E2;background: #ffffff;color: #1D64E2;}
			&.btn2{background: #1D64E2;color: #ffffff;}
		}
	}
	.lbtabp{display: flex;align-items: center;flex: 0 0 auto;margin-left: 24rpx;height: 100%;justify-content: flex-end;
		view{font-size: 30rpx;color: #222327;}
	}
.addbox /deep/ .pbbox .ql-editor  p{text-indent: 2rem;}
</style>