gwlz/jp-mobile/pages/fileTransmit/fileCard.vue

<template>
	<view class="card_main">
		<view class="card_banner"></view>
		<view class="card_info">
			<view class="card_info_title">
				盐都工信文件阅办卡
			</view>
			<view class="card_table">
				<u-row justify="space-between">
					<u-col span="6">
						<view>年度： {{inputForm.yearNum}}</view>
					</u-col>
					<u-col span="6">
						<view style="text-align: right;">{{inputForm.cardNum}}</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row">
					<u-col span="3" textAlign="center" class="">
						<view>来文机关</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col_1">
						<u--text size="16" align="center" lines="1" :text="inputForm.sendingAgency"></u--text>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col card_col_1">
						<view>来文字号</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<u--text size="16" align="center" lines="1" :text="inputForm.docFontSize"></u--text>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row card_row_border">
					<u-col span="3" textAlign="center" class="">
						<view>收文时间</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col_1">
						<u--text size="16" align="center" lines="1" :text="inputForm.receivingTime"></u--text>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col card_col_1">
						<view>文件来源</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<u--text size="16" align="center" lines="1" :text="inputForm.fileSource"></u--text>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row card_row_border">
					<u-col span="3" textAlign="center" align="center">
						<view>内容摘要</view>
					</u-col>
					<u-col span="9" class="info_abstract">
						<view class="info_abstract_v">
							{{inputForm.contentSummary}}
						</view>
					</u-col>
				</u-row>
				<u-row v-if="officeInfo.length>0"  justify="space-between"
					class="card_row card_row_border">
					<u-col span="2" textAlign="center">
						<view class="vertical-text">办公室拟办</view>
					</u-col>
					<u-col span="10" class="info_abstract">
						<view v-for="item in officeInfo" class="info_abstract_v">
							<view>
								{{item.content}}
							</view>
							<view class="flex " style="line-height: 20px;">
								<u--image :src="item.signfj" width="80px" height="20px"></u--image>
								{{item.updateTime}}
							</view>
						</view>
					</u-col>
				</u-row>
				<u-row v-if="leaderInfo.length>0" justify="space-between" class="card_row card_row_border">
					<u-col span="2" textAlign="center">
						<view class="vertical-text">领导批示</view>
					</u-col>
					<u-col span="10" class="info_abstract">
						<view v-for="leader in leaderInfo" class="info_abstract_v">
							<view>
								{{leader.content}}
							</view>
							<view class="flex " style="line-height: 20px;">
								<u--image :src="leader.signfj" width="80px" height="20px"></u--image>
								{{leader.updateTime}}
							</view>
						</view>
					</u-col>
				</u-row>
				<u-row v-if="undertakeInfo.length>0" justify="space-between" class="card_row card_row_border">
					<u-col span="2" textAlign="center">
						<view class="vertical-text">承办情况</view>
					</u-col>
					<u-col span="10" class="info_abstract">
						<view v-for="item in undertakeInfo" class="info_abstract_v">
							<view>
								{{item.content}}
							</view>
							<view class="flex " style="line-height: 20px;">
								<u--image :src="item.signfj" width="80px" height="20px"></u--image>
								{{item.updateTime}}
							</view>
						</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row card_row_border">
					<u-col span="3" textAlign="center" class="card_col">
						<view>备注</view>
					</u-col>
					<u-col span="9" textAlign="center">
						<view>{{inputForm.remark}}</view>
					</u-col>
				</u-row>
				<u--text style="margin: 10px;" size="10" type="error" text="所有涉密敏感信息不得上传"></u--text>
				<view class="card_other">
					附件：
					<view class="other_info" v-for="item in fileList">
						<view class="other_pdf  flex  ">
							<u--text decoration='underline' color='#36a7f3' :text="item.name"
								@click="item.type=='pdf'?preview(item):download(item)"></u--text>

							<!-- <a :href="item.url">{{item.name}}</a> -->
						</view>
					</view>
					<u-upload :fileList="imgList" name="3" multiple :maxCount="imgList.length" :previewFullImage="true"
						:deletable="false"></u-upload>
				</view>
			</view>

		</view>
		<u-overlay :show="ismask">
			<view class="warp">
				<view class="rect"><u-button plain loading loadingText="加载中"></u-button></view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		isImageFormat
	} from "@/common/util.js"
	import BASE_URL from '@/config.js'
	import fileService from '@/api/file/fileService.js'
	import gwCirculationCard2Service from '@/api/circulation/gwCirculationCard2.js'
	import gwFlowService from '@/api/circulation/gwFlowService.js'

	export default {
		mounted() {
			gwCirculationCard2Service.queryById(this.gwId).then(data => {
				this.inputForm = data
				this.inputForm.receivingTime = this.inputForm.receivingTime.substring(5, 10)
				this.inputForm.cardNum = "[" + this.inputForm.yearNum + "]" + this.inputForm.cardNum + "号"
				this.fileLists = this.inputForm.attachedDocumentId.split(",")
				this.fileLists.forEach(item => {
					if (isImageFormat(item)) {
						let img = {
							url: item
						}
						if (!item.startsWith("http")) img.url = this.BASE_URL + item
						this.imgList.push(img)
					} else {
						const fileName = item.split(/[/\\=]/).pop();
						let type = ""
						const pdfFormats = /\.pdf$/i;
						if (pdfFormats.test(item)) type = "pdf";
						let a = {
							name: fileName,
							url: item,
							type: type
						}
						if (!item.startsWith("http")) a.url = this.BASE_URL + item
						this.fileList.push(a)
					}
				})
			})
			gwFlowService.queryByGwId(this.gwId).then(data => {

				data.forEach(item => {
					if (item.which == 0 && item.state == 0) {
						if (item.signfj && !item.signfj.startsWith("http")) item.signfj = this.BASE_URL +
							item.signfj
						this.officeInfo.push(item)
					} else if (item.which == 1 && item.state == 0) {
						if (item.signfj && !item.signfj.startsWith("http")) item.signfj = this.BASE_URL +
							item.signfj
						this.leaderInfo.push(item)
					} else if (item.which == 2 && item.state == 0) {
						if (item.signfj && !item.signfj.startsWith("http")) item.signfj = this.BASE_URL +
							item.signfj
						this.undertakeInfo.push(item)
					}
				})
				this.leaderInfo.sort((a, b) => a.createTime.localeCompare(b.createTime) || a.createTime
					.localeCompare(b.createTime));
				this.ismask = false
			})

		},
		data() {
			return {
				ismask: true,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				// 公文附件
				fileLists: [],
				fileList: [],
				imgList: [],
				// 办公室信息
				officeInfo: [],
				// 领导信息
				leaderInfo: [],
				// 承办信息
				undertakeInfo: [],
				inputForm: {
					id: '',
					yearNum: '',
					cardNum: '',
					sendingAgency: '',
					docFontSize: '',
					fileSource: '',
					writtenTime: '',
					receivingTime: '',
					contentSummary: '',
					attachedDocumentId: ''
				},
				gwflow: {
					id: '',
					gwId: '',
					content: '',
					signfj: '',
					createTruename: '',
					nextTruename: '',
					nextUser: '',
					which: '',
					state: '',

					next: '',
					nextLeadUser: '',
					nextDepUser: '',
					remark: '',
				},
			}
		},
		methods: {
			
			// 预览pdf
			preview(fileUrl) {	    
				uni.navigateTo({
					url: "/pages/pdfPreview/pdfPreview?url=" + encodeURIComponent(fileUrl.url)
				})
	
			},
			// 下载文件
			download(param) {
				uni.showLoading({
					title: "下载中"
				})
				uni.downloadFile({
					url: param.url, //调接口返回url
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							var tempFilePath = res.tempFilePath;
							this.saveFile(tempFilePath, param.name);
						} else {
							uni.showToast({
								icon: 'none',
								title: '报告下载失败'
							})
						}
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '报告下载失败'
						})
						reject(err);
					}
				})

			},
			saveFile(url, name) { //保存到本地
				try {
					const fileName = name;
					//new Blob 实例化文件流
					//let url = fileData
					//const url = window.URL.createObjectURL(new Blob([fileData],{type:'application/pdf'}))
					const link = document.createElement('a');
					link.style.display = 'none';
					link.href = url;
					link.setAttribute('download', fileName);
					link.setAttribute("target", "_blank");
					document.body.appendChild(link);
					link.click();
					//下载完成移除元素
					document.body.removeChild(link);
					//释放掉blob对象
					window.URL.revokeObjectURL(url)
					uni.showToast({
						title: '下载成功'
					})
				} catch (error) {
					uni.showToast({
						title: '下载失败'
					})
				}
			},
		},
		props: {
			isoffice: {
				type: Boolean,
				default: false
			},
			isleader: {
				type: Boolean,
				default: false
			},
			isinfo: {
				type: Boolean,
				default: false
			},
			gwId: {
				type: String,

			}
		},
	}
</script>

<style>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.card_main {
		width: 100%;
		background-color: #fefefe;
	}
	/* .card_main * {
		font-size: 16px!important;
	} */

	.card_banner {
		width: 100%;
		height: 60px;
		background-color: #36a7f3;
	}

	.card_info {
		width: 96%;
		/* height: 80vh; */
		margin: -40px 2% 0;
		background-color: #fefefe;
		border-radius: 15px;
		text-align: center;
	}

	.card_info_title {
		font-size: 20px;
		font-weight: 700;
		padding-top: 10px;
		color: #36a7f3;
	}

	.card_table {
		padding: 20px 20px;
		font-size: 18px;
	}

	.card_row {
		line-height: 50px;
		border: 1px solid;
		word-wrap: break-word;
	}

	.card_row_border {
		border-top: none;
	}

	.card_col {
		border-right: 1px solid;
	}

	.card_col_1 {
		border-left: 1px solid;
	}

	.info_abstract {
		line-height: 34px;
		font-size: 16px; 
		word-wrap: break-word;
		border-left: 1px solid;
	}

	.info_abstract_v {
		margin: 18px;
	}

	.vertical-text {
		writing-mode: vertical-rl;
		/* 文字垂直排列，从右向左 */
		/* 或者使用vertical-lr; 从左向右 */
	}

	.card_other {
		text-align: left;
	}
</style>