gwlz/jp-mobile/pages/commonseal/commonCard.vue

<template>
	<view class="commom_main">
		<view class="card_banner"></view>
		<view class="card_info">
			<view class="card_info_title">
				<view class="">
					盐城市盐都区工业和信息化局拟稿
				</view>
				<view class="card_info_min">
					都工信{{inputForm.cardNum}}
				</view>
			</view>
			<view class="card_table">
				<u-row class="card_first_row"></u-row>
				<u-row v-if="leaderInfo.length>0" justify="space-between" class="card_row">
					<u-col span="3">
						<view class="justify-text">
							<text>主</text>
							<text>要</text>
							<text>领</text>
							<text>导</text>
						</view>
						<view class="justify-text">
							<text>意</text>
							<text>见</text>
						</view>
					</u-col>
					<u-col span="9" class="info_abstract">
						<view v-for="leader in leaderInfo" class="info_abstract_v">
							<view>
								{{leader.content}}
							</view>
							<view class="flex text-sm" 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="fgLeaderInfo.length>0" justify="space-between" class="card_row ">
					<u-col span="3">
						<view class="justify-text">
							<text>分</text>
							<text>管</text>
							<text>领</text>
							<text>导</text>
						</view>
						<view class="justify-text">
							<text>意</text>
							<text>见</text>
						</view>
					</u-col>
					<u-col span="9" class="info_abstract">
						<view v-for="item in fgLeaderInfo" class="info_abstract_v">
							<view>
								{{item.content}}
							</view>
							<view class="flex text-sm" 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="officeInfo.length>0" justify="space-between" class="card_row ">
					<u-col span="3">
						<view class="justify-text">
							<text>办</text>
							<text>公</text>
							<text>室</text>
						</view>
						<view class="justify-text">
							<text>意</text>
							<text>见</text>
						</view>
					</u-col>
					<u-col span="9" class="info_abstract">
						<view v-for="item in officeInfo" class="info_abstract_v">
							<view>
								{{item.content}}
							</view>
							<view class="flex text-sm" 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="undertakeInfo.length>0" justify="space-between" class="card_row ">
					<u-col span="3" textAlign="justify">
						<view class="justify-text">
							<text>承</text>
							<text>办</text>
							<text>科</text>
							<text>(室)</text>
						</view>
						<view class="justify-text">
							<text>意</text>
							<text>见</text>
						</view>
					</u-col>
					<u-col span="9" class="info_abstract">
						<view v-for="item in undertakeInfo" class="info_abstract_v">
							<view>
								{{item.content}}
							</view>
							<view class="flex text-sm" style="line-height: 20px;">
								<u--image :src="item.signfj" width="80px" height="20px" mode="aspectFit"></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">
						<view>
							文件名称
						</view>
					</u-col>
					<u-col span="9" class="card_col_1">
						<uni-tooltip :content="inputForm.name" placement="top">
							<u--text size="14" align="center" lines="1" :text="inputForm.name"></u--text>
						</uni-tooltip>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row card_row_border">
					<u-col span="3" textAlign="center">
						<view>拟稿人</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col_1">
						<uni-tooltip :content="inputForm.authorPerson" placement="top">
							<u--text size="14" align="center" lines="1" :text="inputForm.authorPerson"></u--text>
						</uni-tooltip>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col card_col_1">
						<view>校对人</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<uni-tooltip :content="inputForm.proofreader" placement="top">
							<u--text size="14" align="center" lines="1" :text="inputForm.proofreader"></u--text>
						</uni-tooltip>
						<!-- <u--text size="14" 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" class="">
						<view>可否公开</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col_1">
						<u--text size="14" align="center" lines="1" :text="inputForm.open?'是':'否'"></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">
						<uni-tooltip :content="inputForm.printNum" placement="top">
							<u--text size="14" align="center" lines="1" :text="inputForm.printNum"></u--text>
						</uni-tooltip>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row card_row_border card_last_row">
					<u-col span="3" textAlign="center">
						<view>备注</view>
					</u-col>
					<u-col span="9" textAlign="center" class="card_col_1">
						<uni-tooltip :content="inputForm.remark==''?'无':inputForm.remark" placement="top">
							<u--text size="14" align="center" lines="1" :text="inputForm.remark==''?'无':inputForm.remark"></u--text>
						</uni-tooltip>
					</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>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view style="margin-left: 20px;">
			<u-upload :fileList="imgList" multiple :maxCount="imgList.length" :previewFullImage="true"
				:deletable="false"></u-upload>
		</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 yzCirculationCardService from '@/api/commonseal/yzCirculationCardService.js'
	import yzFlowService from '@/api/commonseal/yzFlowService.js'

	export default {
		mounted() {
			yzCirculationCardService.queryById(this.gwId).then(data => {
				this.inputForm = data
				this.inputForm.cardNum = "[" + this.inputForm.yearNum + "]" + this.inputForm.cardNum + "号"
				this.fileLists = this.inputForm.attachment.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)
					}
				})
			})
			yzFlowService.queryByYzId(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.undertakeInfo.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.officeInfo.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.fgLeaderInfo.push(item)
					}
					if (item.which == 3 && item.state == 0) {
						if (item.signfj && !item.signfj.startsWith("http")) item.signfj = this.BASE_URL +
							item.signfj
						this.leaderInfo.push(item)
					}
				})
				this.leaderInfo.sort((a, b) => a.updateTime.localeCompare(b.updateTime) || a.updateTime
					.localeCompare(b.updateTime));
				this.undertakeInfo.sort((a, b) => a.updateTime.localeCompare(b.updateTime) || a.updateTime
					.localeCompare(b.updateTime));
				this.officeInfo.sort((a, b) => a.updateTime.localeCompare(b.updateTime) || a.updateTime
					.localeCompare(b.updateTime));
				this.fgLeaderInfo.sort((a, b) => a.updateTime.localeCompare(b.updateTime) || a.updateTime
					.localeCompare(b.updateTime));
				this.ismask = false
			})

		},
		data() {
			return {
				ismask: true,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				// 公文附件
				fileLists: [],
				fileList: [],
				imgList: [],
				// 办公室信息
				officeInfo: [],
				// 领导信息
				leaderInfo: [],
				// 分管领导
				fgLeaderInfo: [],
				// 承办信息
				undertakeInfo: [],
				inputForm: {
					id: '',
					yearNum: '',
					cardNum: '',
					sendingAgency: '',
					docFontSize: '',
					fileSource: '',
					writtenTime: '',
					receivingTime: '',
					contentSummary: '',
					attachedDocumentId: ''
				},
			}
		},
		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;
					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%;
	}

	.commom_main {
		width: 100%;
		background-color: #fefefe;
	}

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

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

	.commom_main .card_info_title {
		font-size: 20px;
		font-weight: 700;
		padding-top: 10px;
		color: red;
	}

	.card_info_min {
		font-size: 16px;
		font-weight: 400;
		margin-top: 5px;
	}

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

	.commom_main .card_row {
		border-top: 1px solid red;
		word-wrap: break-word;
		/* border-bottom: none; */
	}

	.commom_main .justify-text {
		padding: 0 4px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.justify-text text {
		display: block;
	}

	.commom_main .card_row_border {
		line-height: 50px;
		border-bottom: none;
	}

	.commom_main .card_last_row {
		border-bottom: 2px solid red;
	}

	.commom_main .card_first_row {
		border-top: 1px solid red;
	}

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

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

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

	.commom_main .info_abstract_v {
		margin: 18px;
	}

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