zheng_xie_ui/work/pages/case/details.vue

<template>
	<view class="detail">
		<view class="navbox">
			<!-- 步骤条 -->
			<view class="dtabs">
				<view class="tab" :class="datainfo.proposalProgress==ite.value?'act':''" v-for="(ite,idx) in stepList" :key="idx">
					<view class="cir"></view>
					<view class="tit">{{ite.label}}</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="deboxs">
			<view class="bghbox"></view>
			<view class="dbox fmt30">
				<!-- <text>【市政协十五届一 次会议第301号提案】</text> -->
				<view class="dtit">关于{{datainfo.titile}}</view>
				<!-- <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>{{typeFormat(datainfo.boundary,jblist)}}</view>
					<view class="txt"><text>党派</text>{{datainfo.partyAffiliation}}</view>
					<view class="txt"><text>联系方式</text>{{datainfo.proposalPhone}}</view>
					<view class="txt"> <text>提案类别</text>{{datainfo.categoryName}}</view>
					<view class="txt"><text>提案类型</text>{{datainfo.proposalType==0?'大会提案':'平时提案'}}</view>
					<view class="txt"><text>提交时间</text>{{datainfo.createTime}}</view>
					<view class="txt"><text>工作单位及职务</text>{{datainfo.unit}}</view>
					<!-- {{datainfo.contactAddress}} -->
				</view>
				<view class="titinf " :class="zheList[0].zheflag?'nact':'act'">
					<view class="bortop"></view>
					<view class="txt"><text>联名提案</text>{{datainfo.isJointly}}</view>
					<view class="txt" v-if="datainfo.isJointly=='是'"><text>联名提案人员</text>{{tary}}</view>
					<view class="txt"><text>经过调研</text>{{datainfo.isSurvey}}</view>
					<view class="txt"><text>第一次提出</text>{{datainfo.isFirst}}</view>
					<view class="txt"><text>本人撰写</text>{{datainfo.isPerson}}</view>
					<view class="txt"> <text>需要办理的协商方式</text>{{datainfo.negotiateType}}</view>
					<view class="txt"><text>建议承办的单位</text>{{datainfo.proposedContractor}}</view>
				</view>
				<!-- 折叠 -->
				<view class="zhebox" :class="zheList[0].zheflag?'':'act'" @click="getZheFn(0)">
					<image :src="upsimg"></image>
					<view>{{zheList[0].zheflag?'展开信息':'折叠信息'}}</view>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb14">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>提案内容</view>
					</view>
				</view>
				<view class="txtbox" :class="zheList[1].zheflag?'nact':'act'">
					<rich-text :nodes="datainfo.proposalContent"></rich-text>
				</view>
				<!-- 折叠 -->
				<view class="zhebox" :class="zheList[1].zheflag?'':'act'" @click="getZheFn(1)">
					<image :src="upsimg"></image>
					<view>{{zheList[1].zheflag?'展开信息':'折叠信息'}}</view>
				</view>
				<view class="bortop"></view>
				<view class="ftit mb14">附件信息</view>
				<view class="fjlists flext"  v-for="(ite,idx) in filelist" :key='idx' @click="getDown(ite.path)">
					<view class="imgl"><image :src="fjimg" ></image></view>
					<view class="tit">{{ite.name}}</view>
					<view class="fjlook">查看</view>
				</view>
			</view>
			<!-- 提案立案以下隐藏 -->
			<view class="dbox">
				<view class="titbox mb16">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>办理情况</view>
					</view>
				</view>
				<view class="dbtabs flexc mb20">
					<view class="dbtab" :class="ite.val==dwVal?'act':''" v-for="(ite,idx) in dwList" :key="idx" @click="getDwFn(ite.val)">{{ite.tit}}</view>
				</view>
				<block v-for="(ite,idx) in datainfo.proposalUnitReplyList" :key="idx">
					<view v-if="dwVal==ite.type">
						<view class="titinf" v-if="ite.type==2||ite.type==3">
							<view class="txt wb100"><text>{{ite.type==2?'主办单位':'协办单位'}}</text>{{ite.deptName}}</view>
							<view class="txt"><text>办理方式</text>{{ite.handling}}</view>
							<view class="txt"><text>办理程度</text>{{ite.degree}}</view>
							<view class="txt"><text>签收时间</text>{{ite.startTime}}</view>
							<view class="txt"> <text>办结时间</text>{{ite.endTime}}</view>
							<view class="txt" :class="zheList[2].zheflag?'nact':'act'"><text>答复内容</text>
								<rich-text :nodes="ite.content"></rich-text>
							</view>
						</view>
						<!-- 折叠 -->
						<view class="zhebox" :class="zheList[2].zheflag?'':'act'" @click="getZheFn(2)">
							<image :src="upsimg"></image>
							<view>{{zheList[2].zheflag?'展开信息':'折叠信息'}}</view>
						</view>
						<view class="bortop"></view>
						<view class="ftit mb14">答复函</view>
						<view class="fjlists flext"  v-for="(item,idx) in ite.zxFjList" :key='item.id' @click="getDown(item.path)">
							<view class="imgl"><image :src="fjimg" ></image></view>
							<view class="tit">{{item.name}}</view>
							<view class="fjlook">查看</view>
						</view>
					</view>
					<!-- 暂无反馈 -->
					<!-- <block v-else>
						<no-data></no-data>
					</block> -->
					
				</block>
				
			</view>
			<view class="dbox">
				<view class="titbox mb16">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>反馈情况</view>
					</view>
				</view>
				<view class="titinf">
					<view class="ftit mb10">委员反馈</view>
					<view class="txt wb100" style="align-items: center;"><text class="w65">对办理情况是否满意</text>{{typeFormattext(datainfo.satisfaction,mycdlist)}}</view>
					<view class="txt"><text class="w65">有何进一步意见和建议</text>
						{{datainfo.membersOpinion}}
					</view>
				</view>
				<view class="titinf">
					<view class="ftit mb10 mt2">政协反馈</view>
					<view class="txt wb100" style="align-items: center;"><text class="w65">对办理情况是否满意</text>{{typeFormattext(datainfo.zxSatisfaction,mycdlist)}}</view>
					<view class="txt"><text class="w65">有何进一步意见和建议</text>
						{{datainfo.zxOpinion}}
					</view>
				</view>
			</view>
			<view class="fbtns" style="flex-wrap: wrap;">
				<!-- 按角色选择按钮 -->
				<view class="btn btn1" @click="getDelFn" v-if="checkPermi(['proposalInfo:info:query'])">删除</view>
				<view class="btn btn1" @click="getEditFn" v-if="checkPermi(['proposalInfo:info:edit'])">修改</view>
				<view class="btn btn2" @click="getScfkFn('scfk')" v-if="checkPermi(['proposalInfo:info:isRecord'])">2审查反馈</view>
				<view class="btn btn2" @click="getScfkFn('tajb')" v-if="checkPermi(['proposalInfo:info:assign'])">3提案交办</view>
				<view class="btn btn2" @click="getScfkFn('dffk')" v-if="checkPermi(['proposalInfo:info:reply'])">4答复反馈</view>
				<view class="btn btn2" @click="getScfkFn('jbsh')" v-if="checkPermi(['proposalInfo:info:assignsh'])">5交办审核</view>
				<view class="btn btn2" @click="getScfkFn('dwdf')" v-if="checkPermi(['proposalInfo:info:reply'])">5答复反馈</view>
				<view class="btn btn2" @click="getScfkFn('wymyfk')" v-if="checkPermi(['proposalInfo:info:idea'])">6办结审核</view>
				<view class="btn btn2" @click="getScfkFn('zxmyfk')" v-if="checkPermi(['proposalInfo:info:zxIdea'])">7办结审核</view>
				<!--委员答复填内容，委员填满意度 -->
				<!--协办单位，主办单位 填办理方式，办理程度，内容 附件 -->
				<!-- 4.承办单位答复，交办单位审核(通过，不通过)， -->
				
				<!-- 交办单位  审核后，承办单位答复()，委员直接提交评价(满意程度)-->
				<!-- 流程 -->
				<!-- 提案进度(0：提交提案，1：提案审查，2：提案立案，3：提案交办，4：办理提案，5：提案反馈，6：办结审核，7：已办结） -->
				<!-- 1.委员录入
				2.提案委立案是否，否 指定答复(交办)单位
				3.交办 选择答复(承办)单位(主办，协办)
				4.承办单位 答复反馈(办理方式,办理程度,内容)    
				5.交办单位审核(通过，不通过)，承办单位答复交办单位审核(内容，附件)
				6.委员提交满意度，评价
				7.政协 提交满意度(办结审核) -->
				
				<!-- 只要提案就可以 推荐重点，推荐优秀
				提案办理，催办，联名，单列表 -->
				<!-- 征集通知 ，提案查重，暂不需要 -->
				<!-- 政协评价 -->
				
			</view>
			
		</view>
		<pop-up :type='ptype' :blfsList="matterList" :blcdlist="blcdlist" :mycdlist="mycdlist" :dataTree="deptTree" @getClose="getClose" @getupSubmit="getupSubmit"></pop-up>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import popUp from "@/work/components/popup/popup.vue"
	import noData from "@/components/nodata/nodata.vue"
	import {getDeptTree} from"@/api/mine/mine.js"
	import { selectValue,selectValuetext } from '@/utils/common.js';
	import {getCaseDetailFn,getCasDelFn,getInfoisRecordFn,getInfoAssignFn,getInfoReplyFn,getInfoShFn,getInfoIdeaFn,getInfozxIdeaFn} from "@/api/mine/case.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	export default{
		components:{popUp,noData},
		data(){
			return{
				bgimg:require("@/static/images/bg.png"),
				fjimg:require("@/work/static/images/fjimg.png"),
				filelist:[], 
				
				tabidx:5,
				titimg:require("@/work/static/images/titbg.png"),
				upsimg:require("@/work/static/images/ups.png"),
				zheList:[{val:0,zheflag:true,moreflag:true},{val:0,zheflag:true,moreflag:true},{val:0,zheflag:true,moreflag:true},{val:0,zheflag:true,moreflag:true},],
				dwList:[{tit:'主办单位',val:2},{tit:'协办单位',val:3}],
				dwdetList:[],
				dwVal:2,
				ptype:'',
				datainfo:{},
				
				dflxList:[],
				stepList:[],//提案状态
				jblist:[],//界别
				matterList:[],//方式
				blcdlist:[],//办理程度
				deptTree:[],//答复单位
				mycdlist:[],//满意程度
				tary:''
			}
		},
		onUnload(){
			uni.$off('refreshdetail')
		},
		onLoad(e) {
			this.id=e.id;
			this.getDetail()
			this.init()
			uni.$on('refreshdetail', (e) => {
				this.getDetail()
			})
			// this.deptTree=[{id:100,label:"若依科技",children:[{id:200,label:"吃完",},{id:201,label:"vf",}]}]
		},
		methods:{
			checkPermi, checkRole,
			kaType(ite){
				if(ite){
					var newArr=ite.split(',')
					var actions=[];
					var datas=this.matterList;
					newArr.forEach(ite=>{
						Object.keys(datas).some((key) => {
							if (datas[key].value == ('' + ite)) {
								actions.push(datas[key].label);
								return true;
							}
						})
					})
					return actions.join(' ')
				}
			},
			typeFormat(ite,list){
				return selectValue(list, ite);
			},
			typeFormattext(ite,list){
				return selectValuetext(list, ite);
			},
			init(){
				// 协办单位
				getDeptTree().then(res=>{
					if(res.code==200){
						this.deptTree=res.data
					}
				})
				//提案状态
				getDictionaryFn('proposal_progress').then(res=>{
					if(res.code==200&&res.data.length){
						this.stepList = 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('negotiation_mode').then(res=>{
					if(res.code==200&&res.data.length){
						this.matterList = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 办理程度degree
				getDictionaryFn('degree').then(res=>{
					if(res.code==200&&res.data.length){
						this.blcdlist = res.data.map(v => {
							return {
								text: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 满意程度
				getDictionaryFn('member_satisfaction').then(res=>{
					if(res.code==200&&res.data.length){
						this.mycdlist = res.data.map(v => {
							return {
								text: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
			},
			getInfoisRecordFn(){
				getInfoisRecordFn().then(res=>{
					
				})
			},
			getupSubmit(e){
				var that=this;
				var type=this.ptype;
				if(type=='scfk'){
					var params=JSON.parse(JSON.stringify(e))
					params.proposalId=this.id
					getInfoisRecordFn(params).then(res=>{
						if(res.code==200){
							this.$toast("立案成功");
							setTimeout(function(){
								that.ptype='';
								that.getDetail()
							},1200)
							
						}
					})
				}else if(type=='tajb'){
					var params=JSON.parse(JSON.stringify(e))
					params.proposalId=this.id
					getInfoAssignFn(params).then(res=>{
						if(res.code==200){
							this.$toast("提案办结成功");
							setTimeout(function(){
								that.ptype='';
								that.getDetail()
							},1200)
						}
					})
				}else if(type=='dffk'||type=='dwdf'){
					var params=JSON.parse(JSON.stringify(e))
					params.proposalId=this.id
					getInfoReplyFn(params).then(res=>{
						if(res.code==200){
							this.$toast("答复反馈成功");
							setTimeout(function(){
								that.ptype='';
								that.getDetail()
							},1200)	
						}
					})
				}else if(type=='jbsh'){
					var params=JSON.parse(JSON.stringify(e))
					params.proposalId=this.id
					getInfoShFn(params).then(res=>{
						if(res.code==200){
							this.$toast("交办审核成功");
							setTimeout(function(){
								that.ptype='';
								that.getDetail()
							},1200)	
						}
					})
				}else if(type=='wymyfk'){
					var params=JSON.parse(JSON.stringify(e))
					params.proposalId=this.id
					getInfoIdeaFn(params).then(res=>{
						if(res.code==200){
							this.$toast("提案办结成功");
							setTimeout(function(){
								that.ptype='';
								that.getDetail()
							},1200)	
						}
					})
				}else if(type=='zxmyfk'){
					var params=JSON.parse(JSON.stringify(e))
					params.proposalId=this.id
					getInfozxIdeaFn(params).then(res=>{
						if(res.code==200){
							this.$toast("提案办结成功");
							setTimeout(function(){
								that.ptype='';
								that.getDetail()
							},1200)	
						}
					})
				}
			},
			getEditFn(){
				this.$tab.navigateTo('/work/pages/case/add?type=edit&id='+this.id)
			},
			getClose(){
				this.ptype=""
			},
			getScfkFn(type){
				this.ptype=type
			},
			getZheFn(idx){
				this.zheList[idx].zheflag=!this.zheList[idx].zheflag
			},
			getDwFn(idx){
				this.dwVal=idx
			},
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除该提案",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							getCasDelFn(that.id).then(res=>{
								if(res.code==200){
									that.$toast('删除成功')
									uni.$emit("refreshlist")
									setTimeout(function(){
										uni.navigateBack({
											delta: 1 //返回层数，2则上上页
										});
									},1200)
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			getDetail(){
				getCaseDetailFn(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						if(res.data.zxFjList&&res.data.zxFjList.length){
							this.filelist=JSON.parse(JSON.stringify(res.data.zxFjList))
						}
						var taryList=res.data.proposalUserList;
						if(taryList&&taryList.length){
							var newArr=[]
							taryList.forEach(ite=>{
								newArr.push(ite.name)
							})
							this.tary=newArr.join('/')
						}
						this.dwdetList=res.data.proposalUnitReplyList;
					}
				})
			},
			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 scoped lang="scss">
.detail{display: flex;flex-direction: column;height: 100vh;}
.navbox{background-color: $com-cd3;flex:0 0 auto;
	.dtabs{display: flex;padding: 40rpx 24rpx;
		.tab{position: relative;display: flex;flex-direction: column;align-items: center;flex: 1;
			&::after{content: '';height: 2rpx;width: 50%;background: #86B2FF;left: 50%;top: 10rpx;position: absolute;transform: translateX(50%);}
			&:last-child{
				&::after{display: none;}
			}
			&.act{
				.cir{background: #FFFFFF;}
				.tit{color: #FFFFFF;}
			}
			.cir{width: 20rpx;height: 20rpx;background: #86B2FF;border-radius: 50%;margin-bottom: 24rpx;}
			.tit{font-weight: bold;font-size: 24rpx;color: #86B2FF;width: 100%;text-align: center;padding: 0 8rpx;}
		}
	}
}
.deboxs{flex:1;overflow: auto;padding-bottom: 30rpx;
	.bghbox{height: 60rpx;background-color: $com-cd3;}
	.dbox{background: #FFFFFF;border-radius: 10rpx;margin: 0 24rpx 24rpx;padding: 36rpx 24rpx 24rpx;
		.dtit{font-weight: bold;font-size: 15px;color: #222327;margin-bottom: 48rpx;
			text{color: #E70000;}
		}
		.titbox{
			.tit{
				image{width: 32rpx;height: 18rpx;margin-right: 10rpx;}
				view{font-weight: bold;font-size: 32rpx;color: #222327;}
			}
		}
		.titinf{display: flex;flex-wrap: wrap;
			&.nact{height: 0;overflow: hidden;}
			&.act{height: auto;}
			.txt{font-weight: 500;font-size: 26rpx;margin-bottom: 20rpx;color: #222327;display: flex;align-items: flex-start;flex:0 1 auto;min-width: 50%;
				&.nact{height: 200rpx;overflow: hidden;}
				&.act{height: auto;}
				text{color: #AAAAAA;min-width: 104rpx;text-align-last: justify;flex: 0 0 auto;margin-right: 20rpx;
					&.w65{width: 130rpx;}
				}
				view{text-indent: 2rem;}
			}
		}
		.txtbox{text-indent: 2rem;line-height: 36rpx;font-weight: 500;font-size: 26rpx;color: #222327;
			&.nact{max-height: 432rpx;overflow: hidden;}
			&.act{height: auto;}
		}
		// tab
		.dbtabs{
			.dbtab{font-weight: 500;font-size: 26rpx;height: 60rpx;line-height: 60rpx;color: #666666;position: relative;padding: 0 38rpx;margin-left: 8rpx;
			&.act{font-weight: bold;font-size: 30rpx;color: #222327;
				&::after{content: "";width: 48rpx;height: 4rpx;background: #3699FF;border-radius: 2rpx;position: absolute;left: 50%;margin-left: -24rpx;bottom: -4rpx;}
			}
			}
		}
		
		
		.bortop{border-top: 2rpx dashed #C1C1C1;margin-bottom: 32rpx;margin-top: 14rpx;width: 100%;}
		.ftit{font-weight: bold;font-size: 26rpx;color: #222327;}
		.zhebox{display: flex;align-items: center;flex-direction: column;padding: 24rpx 0;
			image{width: 28rpx;height: 30rpx;margin-bottom: 10rpx;transition: all 0.3s;}
			&.act{
				image{transform: rotate(-180deg);}
			}
			view{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
		}
		// 附件
		.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: 6rpx;flex: 0 0 auto;
				image{width: 26rpx;height: 24rpx;}
				}
			.tit{font-size: 26rpx;color: #343434;font-weight: 500;margin-top: 4rpx;flex:1;}
			.fjlook{font-weight: 500;font-size: 26rpx;color: #1D64E2;flex: 0 0 auto;margin-left: 20rpx;margin-top: 4rpx;}
		}
	}
	
}
// 按钮
	.fbtns{display: flex;align-items: center;justify-content: space-between;padding: 54rpx 12rpx 34rpx;display: flex;flex-wrap: wrap;
		.btn{height: 80rpx;font-weight: bold;font-size: 30rpx;box-sizing: border-box;border-radius: 40rpx;display: flex;align-items: center;
		justify-content: center;margin:0 12rpx;flex:1;
			&.btn1{border: 2rpx solid #1D64E2;background: #ffffff;color: #1D64E2;}
			&.btn2{background: #1D64E2;color: #ffffff;}
		}
	}
</style>