zheng_xie_ui/work/pages/report/details.vue

<template>
	<view class="detail">
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" rightWidth="150rpx" title="履职详情" @clickLeft="getBack" @clickRight="getEditFn"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
				<block slot="left">
					<view class="topl">
						<image :src="backimg" ></image>
					</view>
				</block>
				<block slot="right">
					<view class="topr" v-if="checkPermi(['member:info:edit'])">
						<image :src="editimg"></image>
						<view>修改</view>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<view class="deboxs">
			<view class="dbox">
				<view class="titbox mb14">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>基本信息</view>
					</view>
				</view>
				<view class="header flexc">
					<view class="titinf flex1">
						<view class="txt"><text>委员姓名</text>{{memberInfo.name}}</view>
						<view class="txt"><text>身份证号</text>{{memberInfo.card}}</view>
						<view class="txt"><text>联系方式</text>{{memberInfo.phonenumber}}</view>
					</view>
					<image :src="baseUrl+memberInfo.avatar"></image>
				</view>
				<view class="titinf">
					<view class="txt"><text>党派</text>{{kaType(memberInfo.partyAffiliation,dplist)}}</view>
					<view class="txt"> <text>界别</text>{{kaType(memberInfo.boundary,jblist)}}</view>
					<view class="txt"><text>工作单位及职务</text>{{memberInfo.unit}}</view>
					<view class="txt"><text>乡镇(经开区)委员工作室</text>{{memberInfo.studio}}</view>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>提案方面</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="proposalInfoList&&proposalInfoList.length">
					<zb-table
					  :show-header="true"
					  :columns="columns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  @rowClick="rowClick"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetail"
					  :data="proposalInfoList"></zb-table>	
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>社情民意方面</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="sqmyInfoList&&sqmyInfoList.length">
						<zb-table
						  :show-header="true"
						  :columns="zxcolumns"
						  :headbgColor="headbgColor"
						  :stripe="false"
						  :fit="true"
						  @rowClick="rowClick"
						  @toggleRowSelection="toggleRowSelection"
						  @toggleAllSelection="toggleAllSelection"
						  :border="border"
						  :borderr="borderr"
						  @detail="getDetail"
						  :data="sqmyInfoList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>会议参与情况</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="zxConferenceList&&zxConferenceList.length">
						<zb-table
						  :show-header="true"
						  :columns="zxcolumns"
						  :headbgColor="headbgColor"
						  :stripe="false"
						  :fit="true"
						  @rowClick="rowClick"
						  @toggleRowSelection="toggleRowSelection"
						  @toggleAllSelection="toggleAllSelection"
						  :border="border"
						  :borderr="borderr"
						  @detail="getDetail"
						  :data="zxConferenceList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>活动参与情况</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="zxActivityList&&zxActivityList.length">
					<zb-table
					  :show-header="true"
					  :columns="hdcolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="rowClick"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetail"
					  :data="zxActivityList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>大会发言情况</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="zxSpeakList&&zxSpeakList.length">
					<zb-table
					  :show-header="true"
					  :columns="fycolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  @rowClick="rowClick"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetail"
					  :data="zxSpeakList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="fbtns">
				<view class="btn btn1" @click="getReportFn">生成报告</view>
				<!-- <view class="btn btn2" @click="getScfkFn">审核</view> -->
			</view>
			
		</view>
		<pop-up :type='ptype' @getClose="getClose"></pop-up>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	const baseUrl = config.baseUrl
	import noData from "@/components/nodata/nodata.vue"
	import zbTable from "@/work/components/zb-table/zb-tables.vue"
	import popUp from "@/work/components/popup/popup.vue"
	import { selectValue } from '@/utils/common.js';
	import {getInfojopDetai} from "@/api/mine/report.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	export default{
		components:{popUp,zbTable,noData},
		data(){
			return{
				backimg:require("@/work/static/images/back.png"),
				editimg:require("@/work/static/images/edit.png"),
				fjimg:require("@/work/static/images/fjimg.png"),
				filelist:[], 
				stepList:[],
				backgroundColor:"#1D64E2",
				titimg:require("@/work/static/images/titbg.png"),
				columns: [
				    { name: 'num', label: '案号',width:230,align:'center', },
				    { name: 'name', label: '题目',align:'center'},
				],
				zxcolumns: [
				    { name: 'num', label: '信息标题 ',width:230,align:'center', },
				    { name: 'name', label: '类型',align:'center'},
				],
				hdcolumns: [
				    { name: 'activityTitle', label: '活动名称 ',width:230,align:'center', },
				    { name: 'activityDate', label: '活动日期',align:'center'},
				    { name: 'activityAddress', label: '活动地点',align:'center'},
				    { name: 'activityType', type:"format", label: '活动类型',align:'center',key:"hdlxlist"},
				],
				fycolumns: [
				    { name: 'speakTitle', label: '发言题目 ',width:230,align:'center', },
				    { name: 'conferenceTitle', label: '关联会议',align:'center'},
				],
				parameter:{
					hdlxlist:[]
				},
				border:true,
				borderr:false,
				headbgColor:'#F1F1F1',
				tableData:[{num:"111",name:'题目关于拓展市校合作，助推高质量发展的建议'},{num:"111",name:'题目关于拓展市校合作，助推高质量发展的建议'}],
				dwdetList:[],
				dwVal:0,
				ptype:'',
				datainfo:{},
				matterList:[],
				memberInfo:{},
				proposalInfoList:{},
				sqmyInfoList:{},
				zxConferenceList:{},
				zxActivityList:{},
				zxSpeakList:{},
				jblist:[],
				dplist:[],
			}
		},
		onUnload(){
			uni.$off('refreshdetail')
		},
		onLoad(e) {
			this.id=e.id;
			this.baseUrl=baseUrl;
			this.getDetail()
			this.init()
			uni.$on('refreshdetail', (e) => {
				this.getDetail()
			})
		},
		mounted() {
		},
		methods:{
			checkPermi, checkRole,
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			kaType(ite,list){
				return selectValue(list, ite);
			},
			typeFormat(ite,list){
				return selectValue(list, ite);
			},
			init(){
				// 界别
				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
							}
						})
					}
				})
				getDictionaryFn('activity_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.hdlxlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value:v.dictValue
							}
						})
					}
				})
				//活动类型
			},
			getReportFn(){
				this.$tab.navigateTo('/work/pages/report/report?id='+this.id)
			},
			getEditFn(){
				if(checkPermi(['member:info:edit'])){
					this.$tab.navigateTo('/work/pages/report/mineinfo?id='+this.id)
				}
			},
			getClose(){
				this.ptype=""
			},
			getScfkFn(){
				this.ptype="scfk"
			},
			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(){
				getInfojopDetai(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						this.memberInfo=res.data.memberInfo;
						this.proposalInfoList=res.data.proposalInfoList;
						this.sqmyInfoList=res.data.sqmyInfoList;
						this.zxConferenceList=res.data.zxConferenceList;
						this.zxActivityList=res.data.zxActivityList;
						this.zxSpeakList=res.data.zxSpeakList;
						// 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;
	.topl{width: 60rpx;height: 60rpx;display: flex;align-items: center;justify-content: center;
		image{width: 40rpx;height: 30rpx;}
	}
	.topr{display: flex;align-items: center;
		image{width: 26rpx;height: 26rpx;margin-right: 12rpx;}
		view{font-weight: 500;font-size: 26rpx;color: #FFFFFF;}
	}
}
.deboxs{flex:1;overflow: auto;padding-bottom: 30rpx;padding-top: 24rpx;
	.dbox{background: #FFFFFF;border-radius: 10rpx;margin: 0 24rpx 24rpx;padding: 36rpx 24rpx 24rpx;
		.titbox{
			.tit{
				image{width: 32rpx;height: 18rpx;margin-right: 10rpx;}
				view{font-weight: bold;font-size: 32rpx;color: #222327;}
			}
			.tips{font-weight: 500;font-size: 26rpx;color: #FF0000;}
		}
		.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;}
			}
			
		}
		.header{
			image{width: 166rpx;height: 200rpx;flex: 0 0 auto;margin-top: -66rpx;}
			.txt{min-width: 100%;}
		}
		
		.bortop{border-top: 2rpx dashed #C1C1C1;margin-bottom: 32rpx;margin-top: 14rpx;width: 100%;}
		// 附件
		.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>