jiaoyuju_fawen/bureau-of-education/pages/centerView/collection/details.vue

<template>
	<view class="details">
		<u-navbar ref="uNavbar" :border-bottom="false" :back-icon-color="setNav.backColor" :is-back="setNav.isdisPlayNavTitle"
		 :title-size="setNav.size" :title-bold="setNav.bold" :title="setNav.navTitle" :title-color="setNav.color" :background="setNav"></u-navbar>
		<view class="box">
			<view class="list">
				<view class="title">文件标题</view>
				<view class="value">{{json.message_title}}</view>
			</view>
			<view class="list">
				<view class="title">拟稿人</view>
				<view class="value">{{json.send_user_name}}</view>
			</view>
			<view class="list">
				<view class="title">发文日期</view>
				<view class="value">{{json.message_time}}</view>
			</view>
			<view class="list">
				<view class="title">流程结束日期</view>
				<view class="value">{{json.finish_time == null ? '未结束' : json.finish_time}}</view>
			</view>
			<view class="list">
				<view class="title">发文字号</view>
				<view class="value">{{json.message_code}}</view>
			</view>
			<view class="list">
				<view class="title">正文查看</view>
				<view class="value a" @click="loadFile(item.url,item.originalName)" v-for="(item, index) in json.message_upload" :key="index">{{item.originalName}}</view>
			</view>
			<view class="list">
				<view class="title">附件查看</view>
				<view class="files">
					<view class="file" @click="loadFile(item.url,item.originalName)" v-for="(item, index) in json.message_enclosure" :key="index">
						<image src="/static/img/icon_sc_wj.png"></image>
						<text>{{item.originalName}}</text>
					</view>
				
				</view>
			</view>
			<view class="list">
				<u-collapse v-if="receive_user_name">
						<u-collapse-item title="分发人员" >
							{{receive_user_name}}
						</u-collapse-item>
					</u-collapse>
			</view>
			<view class="list">
				<u-collapse v-if="receive_dept_name">
						<u-collapse-item title="分发单位" >
							{{receive_dept_name}}
						</u-collapse-item>
					</u-collapse>
			</view>
			<view class="list">
				<view class="title">备注</view>
				<view class="value">{{json.message_remark}}</view>
			</view>
			<view class="btns">
				<view class="btn" @click="approvalProcess">催收文</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '',
				show: true,
				value: '',
				setNav: {
					backgroundColor: '#fff', //背景色
					color: '#333', //字体颜色
					bold: true,
					size: '36',
					backColor: '#333',
					isdisPlayNavTitle: true, //是否显示返回按钮
					navTitle: '催收文详情' //导航标题
				},
				json: {
					message_title: '',
					send_user_name: '',
					message_time: '',
					message_code: '',
					message_remark: '',
					finish_time: '',
					message_upload: [],
					message_enclosure: []
				},
				receive_user_name: '',
				receive_dept_name: '',
				id: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getOneMap(options.id)
			this.getChldren(options.id)
		},
		methods: {
			loadFile(url,name) {
				const manage = uni.getFileSystemManager();
				uni.downloadFile({
					url: url,
					success: (res) => {
						let path = res.tempFilePath;
						// #ifdef MP-WEIXIN
						var savePath = wx.env.USER_DATA_PATH + "/" + name
						console.log(savePath);
						if (res.statusCode == 200) {
							manage.saveFile({
								tempFilePath: res.tempFilePath,
								filePath: savePath,
								success:function(ress){
									uni.openDocument({
										 filePath: ress.savedFilePath,
										 // fileType: "pdf",
										 success: function (resss) {
											uni.hideLoading()
										 }
									 })
								}
							})
						}
						// #endif
						// #ifndef MP-WEIXIN
							uni.openDocument({
								filePath: path,
								showMenu: true,
								success: function (res) {
								    // console.log('打开文档成功');
								}
							});
						// #endif
						
					}
				});
			},
			async getOneMap (id) {
				let that = this
				let data = { 
					"table": "boman_message",
					"fixedData": {
					    "id": id
					}
				}
				let res = await that.$u.post(`boman-web-core/p/cs/one/map`,data)
				
				if (res.code == 200) {
					if (res.data) {
						let {message_title, send_user_name, message_time, message_code, message_remark, message_upload = '', message_enclosure = '', finish_time} = res.data || {}
						this.json = {
							message_title,
							send_user_name,
							message_time,
							message_code,
							finish_time,
							message_remark,
							message_upload: message_upload ? JSON.parse(message_upload) : [],
							message_enclosure: message_enclosure ? JSON.parse(message_enclosure) : []
						}
					}
				}
			},
			async getChldren (id) {
				let that = this
				let data = { 
					"table": "boman_message_receive",
					"pageNo": 1,
					"isUi": false,
					"pageSize": 1000,
					"orderBy": "create_time desc",
					"fixedData": {
					    "condition": {
					        "visible": "Y",
					        "message_id": id,
					        "is_del":"N"
					    }
					}
			
				}
				let res = await that.$u.post(`boman-web-core/p/cs/queryList`,data)
			
				if (res.code == 200) {
					this.receive_user_name = res.data.rows.map(item => {
						return  item.receive_user_name
					}).join(',')
					this.receive_dept_name = res.data.rows.map(item => {
						return  item.receive_dept_name
					}).join(',')
					// let selectData = res.data.rows.map(item => {
					// 	return {
					// 		userName: item.receive_user_name,
					// 		deptName: item.receive_dept_name,
					// 		id: item.receive_user_id,
					// 		nickName: item.receive_user_name,
					// 		"dept": {},
					// 		"roles": []
					// 	}
					// })
					// if (selectData && selectData.length) {
					// 	this.getDeptNameAndRoleName(selectData)
					// }
				}
			},
			async getDeptNameAndRoleName (data) {
				
				let res = await this.$u.post(`system/user/getDeptNameAndRoleName`, data)
				if (res.deptNameList) {
					this.receive_dept_name = res.deptNameList.join(',')
				}
			},
			approvalProcess () {
				uni.navigateTo({
					url: "/pages/centerView/collection/collector?id=" + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details{
		background: #fff;
		position: relative;
		.mack {
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 9999;
			top: 88rpx;
			background-color: rgba(0,0,0,0.2);
			.box {
				width: 612rpx;
				height: 512rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -40%);
				padding: 34rpx;
				.head {
					position: relative;
					.title {
						font-size: 30rpx;
						font-weight: bold;
						color: #343434;
						text-align: center;
					}
					image {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
				.middle {
					margin-top: 50rpx;
					textarea {
						width: 510rpx;
						padding: 20rpx;
						height: 210rpx;
						background: #FFFFFF;
						border: 1px solid #009FE8;
						border-radius: 6rpx;
						font-size: 28rpx;
						color: #AAAAAA;
					}
				}
				.btn {
					width: 550rpx;
					height: 76rpx;
					background: #009FE8;
					border-radius: 6rpx;
					color: #fff;
					text-align: center;
					line-height: 76rpx;
					font-size: 30rpx;
					margin-top: 36rpx;
				}
			}
		}
		.status {
			position: absolute;
			width: 160rpx;
			height: 94rpx;
			right: 36rpx;
			top: 160rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.box {
			position: relative;
			z-index: 1;
			padding: 0 36rpx;
			padding-bottom: 80rpx;
			.list {
				margin-top: 66rpx;
				
				.title {
					font-size: 28rpx;
					font-weight: bold;
					color: #343434;
				}
				.value {
					font-size: 25rpx;
					color: #666666;
					margin-top: 30rpx;
				}
				.a {
					color: #009FE8;
				}
				.files {
					.file {
						display: flex;
						align-items: center;
						margin-top: 30rpx;
						font-size: 25rpx;
						font-weight: 500;
						color: #343434;
						image {
							width: 24rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
					}
				}
				/deep/ .u-collapse {
					.u-collapse-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #343434;
					}
					.u-collapse-content {
						font-size: 25rpx;
						color: #666666;
					}
				}
				
			}
			.btns {
				padding-top: 80rpx;
				.btn {
					width: 100%;
					height: 84rpx;
					background: #009FE8;
					border-radius: 8rpx;
					color: #fff;
					font-size: 28rpx;
					text-align: center;
					line-height: 84rpx;
					margin-top: 26rpx;
					&:nth-child(2) {
						background: #FF3131;
					}
				}
			
			}
		}
	}
</style>