zheng_xie_ui/work/pages/case/add.vue

<template>
	<view >
		<view class="bgtop"></view>
		<uni-forms :modelValue="datainfo">
		<view class="addbox">
			<view class="boxs">
				<view class="tips">
					<image :src="tipimg"></image>
					<view>请于填写信息前认真核对提案者信息是否有误</view>
				</view>
				<view class="pdbox">
					<view class="titbox mb14">
						<view class="tit flexc">
							<image :src="titimg"></image>
							<view>提案者信息</view>
						</view>
					</view>
					<view class="titinf">
						<view class="txt"><text>提案者：</text>{{datainfo.proposalName}}</view>
						<view class="txt"><text>联系方式：</text>{{datainfo.proposalPhone}}</view>
						<view class="txt"><text>界别：</text>{{kayType(datainfo.boundary,jblist)}}</view>
						<!-- <view class="txt"><text>党派：</text>{{kayType(datainfo.partyAffiliation,dplist)}}</view> -->
						<view class="txt"><text>工作单位及职务：</text>{{datainfo.contactAddress}}</view>
					</view>
					<image :src="infobg" class="infobg"></image>
				</view>
			</view>
			<view class="boxs pdbox" style="padding-bottom: 2rpx;">
				<view class="titbox mb14">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>基本详情</view>
					</view>
				</view>
				<view class="pb8">
					<uni-forms-item label="标题" name="title" required>
						<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.title" placeholder="请输入标题" />
						<view class="edtip pa">* 标题前无须加关于，标题后无须加的建议，系统将自动填写</view>
					</uni-forms-item>
				</view>
				<!-- <uni-forms-item label="提案类别" name="categoryName" required>
					<view class="openbox" :class="datainfo.categoryName?'':'coa'" @click="gettalbFn">{{datainfo.categoryName||"请选择提案类别"}}</view>
				</uni-forms-item> -->
				<picker  range-key='label' :value="talbidx" :range="talblist"   @change='bindDateChangea'>
					<uni-forms-item label="提案类别" name="categoryName" required>
						<view class="lbtabp">
							<view :class="datainfo.categoryName?'':'coa'">{{datainfo.categoryName||"请选择提案类别"}}</view>
						</view>	
					</uni-forms-item>
				</picker>
				<uni-forms-item label="提案类型" name="proposalType">
					<view class="checkbox">
						<uni-data-checkbox v-model="datainfo.proposalType" :localdata="typeList" />
					</view>
				</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="titr" @click="getPaiFn">一键排版</view>
				</view>
				<editor id="editor" :class="pbFlag?'pbbox':''" class="ql-container" placeholder="请输入提案内容" show-img-size show-img-toolbar
					show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
				</editor>
				<view class="edtip flext mb24 mt14"><text>*</text> 提案正文内容原则上不超过2000字，提案正文内容输入完毕后， 可点击右上角的“一键排版”按钮进行快速排版</view>
			</view>
			<view class="boxs pdbox">
				<view class="titbox mb14">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>附件内容</view>
					</view>
				</view>
				<view class="flexcj mb10">
					<view class="fw f15 co34">添加附件</view>
					<view class="fjadd"><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>
				<view class="ptb12" v-if="filelist&&filelist.length">
					<view class="fjlists"  v-for="(ite,idx) in filelist" :key='idx'>
						<view class="flext" @click="getDown(ite.url)">
							<view class="imgl"><image :src="fjimg" ></image></view>
							<view class="tit">{{ite.name}}</view>
						</view>
						<!-- 删除 -->
						<view class="delimg flex0" @click.stop="getDelFj(idx)">
							<image :src="delimg"></image>
						</view>
					</view>
				</view>
			</view>
			<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="isJointly">
					<view class="checkbox">
						<uni-data-checkbox v-model="datainfo.isJointly" :localdata="sfList" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="联名提案人员" name="proposalUserList" v-if="datainfo.isJointly=='是'">
					<view class="openbox" @click="getlmtaFn" :class="tary?'':'coa'">{{tary||"请选择联名提案人员"}}</view>
				</uni-forms-item>
				<!-- <uni-forms-item label="同意公开" name="isPublicity">
					<view class="checkbox">
						<uni-data-checkbox v-model="datainfo.isPublicity" :localdata="sfList" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="内容公开" name="contentPublicity">
					<view class="checkbox">
						<uni-data-checkbox v-model="datainfo.contentPublicity" :localdata="sfList" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="经过调研" name="isSurvey">
					<view class="checkbox">
						<uni-data-checkbox v-model="datainfo.isSurvey" :localdata="sfList" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="第一次提出" name="isFirst">
					<view class="checkbox">
						<uni-data-checkbox v-model="datainfo.isFirst" :localdata="sfList" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="由本人撰写" name="isPerson">
					<view class="checkbox">
						<uni-data-checkbox v-model="datainfo.isPerson" :localdata="sfList" />
					</view>
				</uni-forms-item> -->
				<uni-forms-item label="需要办理的协商方式" name="negotiateType">
					<view class="matab">
						<view class="list" :class="checkidx.indexOf(ite.label)!=-1?'act':''" v-for="(ite,idx) in matterlist" :key='idx' @click="getCheck(ite.label)">{{ite.label}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="建议承办的单位" name="proposedContractor">
					<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.proposedContractor" placeholder="请输入单位名称" />
				</uni-forms-item>
			</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 {getCaseAddFn,getCaseDetailFn,getCaseEditFn,getCasetalbFn} from "@/api/mine/case.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	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,xlsx,ppt,txt,pdf,zip,rar,word,png,jpg,jpeg',
				// 文件上传大小限制
				size: 100,
				// 文件数量限制 默认10
				count: 5,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: false,
				filelist:[], 
				
				pbFlag:false,
				readOnly:false,
				fjimg:require("@/work/static/images/fjimg.png"),
				delimg:require("@/work/static/images/delimg.png"),
				tipimg:require("@/work/static/images/tip.png"),
				titimg:require("@/work/static/images/titbg.png"),
				infobg:require("@/work/static/images/infobg.png"),
				datainfo:{
					"proposalUserId":this.$store.state.user.userId,//提案人ID
					"title":"",//标题
					"proposalName":this.$store.state.user.memberInfo.name,//提案人姓名
					"proposalPhone":this.$store.state.user.memberInfo.phonenumber,//提案人手机号码
					"boundary":this.$store.state.user.memberInfo.boundary,//界别
					"partyAffiliation":this.$store.state.user.memberInfo.partyAffiliation,//党派
					"contactAddress":this.$store.state.user.memberInfo.unit,//联系地址
					"categoryId":"",//提案类别id
					"categoryName":"",//提案类别
					"proposalType":'1',//提案类型（0大会提案 1平时提案）
					"proposalContent":"",//提案内容
					"isJointly":'否',//联名提案（0是 1否）
					"isPublicity":'是',//同意公开（0是 1否）
					"contentPublicity":'是',//内容公开（0是 1否）
					"isSurvey":'否',//经过调研（0是 1否）
					"isFirst":'否',//第一次提出（0是 1否）
					"isPerson":'否',//由本人撰写（0是 1否）
					"negotiateType":"",//需要办理的协商方式
					"proposedContractor":"",//建议承办单位
					"proposalUserList":[////提案人员
					],
					"zxFjList":[//提案附件
						// { "name":"附件名称","url":"附件地址"},
					],
					
				},
				typeList:[{text: '大会提案',value: '0'},{text: '平时提案',value: '1'}],
				sfList:[{text: '是',value: '是'},{text: '否',value: '否'}],
				matterlist:[],
				jblist:[],
				dplist:[],
				checkidx:[],
				editorCtx:'',
				tary:'',
				id:"",
				pagetype:'add',
				editinfo:'',
				talblist:[],
				talbidx:'',
			}
		},
		onUnload(){
			uni.$off('refreshtalb')
			uni.$off('refreshtary')
		},
		onLoad(e) {
			uni.$on('refreshtalb', (e) => {
				this.datainfo.categoryName=e.categoryName
				this.datainfo.categoryId=e.categoryId
			})
			uni.$on('refreshtary', (e) => {
				this.datainfo.proposalUserList=e.proposalUserList;
				this.tary=e.namelist.join('/')
			})
			this.init()
			this.getCasetalbFn()
			if(e.type=='edit'){
				this.id=e.id;
				this.pagetype='edit'
				this.getDetail()
			}
			if(e.type=='old'&&uni.getStorageSync('tjtaList')){
				var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('tjtaList')))
				var params=newObj.params;
				this.datainfo=params;
				this.editinfo=params.proposalContent;
				if(params.zxFjList&&params.zxFjList.length){
					this.filelist=JSON.parse(JSON.stringify(params.zxFjList))
				}
				var taryList=params.proposalUserList;
				if(taryList&&taryList.length){
					var newArr=[]
					taryList.forEach(ite=>{
						newArr.push(ite.name)
					})
					this.tary=newArr.join('/')
				}
				this.checkidx=newObj.checkidx
			}
		},
		methods:{
			kayType(ite,list){
				return selectValue(list, ite);
			},
			//提案类别
			getCasetalbFn(){
				getCasetalbFn().then(res=>{
					if(res.code==200){
						this.talblist = res.data.map(v => {
							return {
								label: v.label,
								value: v.id
							}
						})
					}
				})
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.datainfo.categoryName=this.talblist[val].label;
				this.datainfo.categoryId=this.talblist[val].value;
			},
			init(){
				getDictionaryFn('negotiation_mode').then(res=>{
					if(res.code==200&&res.data.length){
						this.matterlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 界别circles
				getDictionaryFn('circles').then(res=>{
					if(res.code==200&&res.data.length){
						this.jblist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 党派
				// getDictionaryFn('political_parties').then(res=>{
				// 	if(res.code==200&&res.data.length){
				// 		this.dplist = res.data.map(v => {
				// 			return {
				// 				label: v.dictLabel,
				// 				value: v.dictValue
				// 			}
				// 		})
				// 	}
				// })
			},
			getDetail(){
				var that=this;
				getCaseDetailFn(this.id).then(res=>{
					if(res.code==200){
						var data=res.data;
						this.datainfo=res.data;
						if(data.zxFjList&&data.zxFjList.length){
							this.filelist=JSON.parse(JSON.stringify(data.zxFjList))
						}
						this.editinfo=data.proposalContent;
						uni.createSelectorQuery().select('#editor').context(function(res) {
							that.editorCtx = res.context;
							that.editorCtx.setContents({
								html:data.proposalContent
							})
						}).exec();
						var taryList=data.proposalUserList;
						if(taryList&&taryList.length){
							var newArr=[]
							taryList.forEach(ite=>{
								newArr.push(ite.name)
							})
							this.tary=newArr.join('/')
						}
						that.checkidx=data.negotiateType.split(',')
						// this.dwdetList=res.data.proposalUnitReplyList;
					}
				})
			},
			getCheck(id){
				var idx=this.checkidx.indexOf(id)
				if(idx!=-1){
					this.checkidx.splice(idx,1)
				}else{
					this.checkidx.push(id)
				}
			},
			getPaiFn(){
				this.pbFlag=true;
			},
			gettalbFn(){
				var obj={
					id:this.datainfo.categoryId,
					name:this.datainfo.categoryName,
				}
				this.$tab.navigateTo('/work/pages/case/talbclass?data='+encodeURIComponent(JSON.stringify(obj)))
			},
			getlmtaFn(){
				var obj={
					list:this.datainfo.proposalUserList
				}
				this.$tab.navigateTo('/work/pages/case/lmtapeople?data='+encodeURIComponent(JSON.stringify(obj)))
			},
			// 暂存
			getZanFnt(){
				var that=this;
				that.editorCtx.getContents({
					success: function(data) { 
						// proposalContent=data.html;
						// that.datainfo.zxFjList=JSON.parse(JSON.stringify(that.filelist));
						var params=that.datainfo;
						params.proposalContent=data.html;
						if(that.checkidx&&that.checkidx.length>0){
							params.negotiateType=that.checkidx.join(',')
						}
						var obj={
							params:params,
							checkidx:that.checkidx
						}
						uni.setStorageSync('tjtaList', JSON.parse(JSON.stringify(obj)))
						that.$toast("暂存成功")
					}  
				})
			},
			getSubmit(){
				var that=this;
				if(!this.datainfo.title){
					this.$toast("请输入标题")
					return
				}
				if(!this.datainfo.categoryName){
					this.$toast("请选择提案类别")
					return
				}
				if(this.datainfo.isJointly==0&&!this.tary){
					this.$toast("请选择联名提案人员")
					return
				}
				var proposalContent='';
				that.editorCtx.getContents({  
					success: function(data) { 
						var params=that.datainfo;
						params.proposalContent=data.html;
						if(that.checkidx&&that.checkidx.length>0){
							params.negotiateType=that.checkidx.join(',')
						}
						if(that.pagetype=='add'){
							getCaseAddFn(params).then(res=>{
								if(res.code==200){
									uni.removeStorageSync('tjtaList')
									that.$toast("提交成功")
									uni.$emit("refreshlist")
									setTimeout(function(){
										uni.navigateBack({
											delta: 1 //返回层数，2则上上页
										});
									},1200)
								}
							})
						}else{
							getCaseEditFn(params).then(res=>{
								if(res.code==200){
									that.$toast("修改成功")
									uni.$emit("refreshdetail")
									setTimeout(function(){
										uni.navigateBack({
											delta: 1 //返回层数，2则上上页
										});
									},1200)
									
								}
							})
							
						}
						
					}  
				})
			},
			onuploadEnd(item) {
				var newobj={}
				var responseText=JSON.parse(item.responseText)
				newobj.name=responseText.originalFilename;
				newobj.url=responseText.fileName;
				this.filelist.push(newobj)
				this.datainfo.zxFjList=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.zxFjList=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()}
				})
			},
			onStatusChange(){
				
			},
			onEditorReady(){
				var that=this;
				uni.createSelectorQuery().select('#editor').context(function(res) {
					that.editorCtx = res.context;
					that.editorCtx.setContents({
						html:that.editinfo
					})
				}).exec();
			}
		}
	}
</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;}
			}
		}
		
		.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;}
		}
	}
	// 按钮
	.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;}
		}
	}
.addbox /deep/ .pbbox .ql-editor  p{text-indent: 2rem;}
</style>