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">
						<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>{{datainfo.proposalName}}</view>
						<view class="txt"><text>身份证号</text>{{datainfo.boundary}}</view>
						<view class="txt"><text>联系方式</text>{{datainfo.partyAffiliation}}</view>
					</view>
					<image :src="fjimg"></image>
				</view>
				<view class="titinf">
					<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>
			</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">
					<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="tableData"></zb-table>	
				</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">
					<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="tableData"></zb-table>	
				</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">
					<no-data padtop="0" padbottom="20"></no-data>
				</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">
					<no-data padtop="0" padbottom="20"></no-data>
				</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">
					<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="tableData"></zb-table>	
				</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 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 {getCaseDetailFn,getCasDelFn} from "@/api/mine/case.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'},
				],
				fycolumns: [
				    { name: 'num', label: '发言题目 ',width:230,align:'center', },
				    { name: 'name', label: '关联会议',align:'center'},
				],
				border:true,
				borderr:false,
				headbgColor:'#F1F1F1',
				tableData:[{num:"111",name:'题目关于拓展市校合作，助推高质量发展的建议'},{num:"111",name:'题目关于拓展市校合作，助推高质量发展的建议'}],
				dwdetList:[],
				dwVal:0,
				ptype:'',
				datainfo:{},
				matterList:[],
			}
		},
		onUnload(){
			uni.$off('refreshdetail')
		},
		onLoad(e) {
			// this.id=e.id;
			// this.getDetail()
			// this.init()
			// uni.$on('refreshdetail', (e) => {
			// 	this.getDetail()
			// })
		},
		mounted() {
		},
		methods:{
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			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);
			},
			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
							}
						})
					}
				})
			},
			getReportFn(){
				this.$tab.navigateTo('/work/pages/report/report')
			},
			getEditFn(){
				this.$tab.navigateTo('/work/pages/report/mineinfo')
			},
			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(){
				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;
	.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>