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="card_col">
						<view>来文机关</view>
					</u-col>
					<u-col span="3" textAlign="center" class="">
						<view>{{inputForm.sendingAgency}}</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col card_col_1">
						<view>来文字号</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<view>{{inputForm.docFontSize}}</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="3" textAlign="center" class="">
						<view>{{inputForm.receivingTime}}</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col card_col_1">
						<view>文件来源</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<view>{{inputForm.fileSource}}</view>
					</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" style="height: 70px;" justify="space-between"
					class="card_row card_row_border">
					<u-col span="1" textAlign="center">
						<view class="vertical-text">办公室拟办</view>
					</u-col>
					<u-col span="11" 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="src" 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="1" textAlign="center">
						<view class="vertical-text">领导批示</view>
					</u-col>
					<u-col span="11" 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="src" 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="1" textAlign="center">
						<view class="vertical-text">承办情况</view>
					</u-col>
					<u-col span="11" class="info_abstract">
						<view v-for="item in undertakeInfo" class="info_abstract_v">
							{{item.content}} {{item.updateTime}}
						</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="12" 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 mode="link" :text="item.name" :href="item.url"></u--text>
						</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 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)
			})
			gwFlowService.queryByGwId(this.gwId).then(data => {
				data.forEach(item =>{
					if(item.which == 0 && item.state ==0) {
						this.officeInfo.push(item)
					}else if(item.which==1 && item.state ==0){
						this.leaderInfo.push(item)
					}else if(item.which==2 && item.state ==0) {
						this.undertakeInfo.push(item)
					}
				})
				this.ismask = false
			})
			this.fileLists.forEach(item => {
				if (isImageFormat(item.url)) {
					this.imgList.push(item)
				} else {
					const fileName = item.url.split(/[/\\]/).pop();
					let a = {
						name: fileName,
						url: item.url
					}
					this.fileList.push(a)
				}
			})
		},
		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: '',
				},
			}
		},
		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_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: 16px;
		font-weight: 700;
		padding-top: 10px;
		color: #36a7f3;
	}

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

	.card_row {
		line-height: 30px;
		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: 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>