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>{{datainfo.boundary}}</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.contactAddress}}{{datainfo.unit}}</view>
				</view>
				<view class="titinf " :class="zheList[0].zheflag?'nact':'act'">
					<view class="bortop"></view>
					<view class="txt"><text>联名提案</text>{{datainfo.isJointly==0?'是':'否'}}</view>
					<view class="txt"><text>经过调研</text>{{datainfo.isSurvey==0?'是':'否'}}</view>
					<view class="txt"><text>第一次提出</text>{{datainfo.isFirst==0?'是':'否'}}</view>
					<view class="txt"><text>本人撰写</text>{{datainfo.isPerson==0?'是':'否'}}</view>
					<view class="txt"> <text>需要办理的协商方式</text>{{kaType(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>
					<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>
					<view class="titinf">
						<view class="txt wb100"><text>主办单位</text>市公安局</view>
						<view class="txt"><text>办理方式</text>网络</view>
						<view class="txt"><text>办理程度</text>{{typeFormat(datainfo.complexType,dflxList)}}</view>
						<view class="txt"><text>签收时间</text>2024-01-03 17:56</view>
						<view class="txt"> <text>办结时间</text>2024-01-03 18:31</view>
						<view class="txt" :class="zheList[2].zheflag?'nact':'act'"><text>答复内容</text>
							<view>我市作为全省重要的化工城市，化工企业主要集中在大观区和高新区。2018年，安庆石化将投入大量资金建设化工项目，城区危化品安全管理难度进一步加大，而万华油品“4.2”事故已经暴露出城区危化品安全监管基层基础力量薄弱，缺乏专业化监管队伍、无危化品物流园等问题。</view>
						</view>
					</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="(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="titinf">
					<view class="txt wb100" style="align-items: center;"><text class="w65">对办理情况是否满意</text>{{typeFormat(datainfo.satisfaction,mycdlist)}}</view>
					<view class="txt"><text class="w65">有何进一步意见和建议</text>
						{{datainfo.membersOpinion}}
					</view>
				</view>
			</view>
			<view class="fbtns">
				<view class="btn btn1" @click="getDelFn">删除</view>
				<view class="btn btn1" @click="getEditFn">修改提案</view>
				<view class="btn btn2" @click="getScfkFn">审查反馈</view>
			</view>
			
		</view>
		<pop-up :type='ptype' @getClose="getClose"></pop-up>
	</view>
</template>

<script>
	import popUp from "@/work/components/popup/popup.vue"
	import { selectValue } from '@/utils/common.js';
	import {getCaseDetailFn,getCasDelFn} from "@/api/mine/case.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	export default{
		components:{popUp},
		data(){
			return{
				bgimg:require("@/static/images/bg.png"),
				fjimg:require("@/work/static/images/fjimg.png"),
				filelist:[], 
				stepList:[],
				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:0},{tit:'协办单位',val:1}],
				dwdetList:[],
				dwVal:0,
				ptype:'',
				datainfo:{},
				matterList:[],
				mycdlist:[],
				dflxList:[],
			}
		},
		onUnload(){
			uni.$off('refreshdetail')
		},
		onLoad(e) {
			this.id=e.id;
			this.getDetail()
			this.init()
			uni.$on('refreshdetail', (e) => {
				this.getDetail()
			})
		},
		methods:{
			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){
				var aite=selectValue(list, ite);
				return aite.actions;
			},
			init(){
				//提案状态
				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
							}
						})
					}
				})
				// 答复类型
				getDictionaryFn('proposal_complex_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.dflxList = 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
							}
						})
					}
				})
				// 满意程度
				getDictionaryFn('member_satisfaction').then(res=>{
					if(res.code==200&&res.data.length){
						this.mycdlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
			},
			getEditFn(){
				this.$tab.navigateTo('/work/pages/case/add?type=edit&id='+this.id)
			},
			getClose(){
				this.ptype=""
			},
			getScfkFn(){
				this.ptype="scfk"
			},
			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(this.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))
						}
						this.dwdetList=res.data.proposalUnitReplyList;
					}
				})
			},
		}
	}
</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;
		.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>