gwlz/jp-ui/src/views/circulation2/fileCard.vue

<template>
	<view class="card_main">

		<view class="card_info">
			<view class="card_info_title">
				盐都工信文件阅办卡
			</view>


			<el-row>
				<el-col :span="12" class="grid-content-left1">
					<div>年度： {{ inputForm.yearNum }}</div>
				</el-col>
				<el-col :span="12" class="grid-content-right1">
					<div>[{{ inputForm.yearNum }}]{{ inputForm.cardNum }}号</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" class="grid-content-left">
					<div>来文机关</div>
				</el-col>
				<el-col :span="6" class="grid-content-left">
					<div>{{ inputForm.sendingAgency }}</div>
				</el-col>
				<el-col :span="6" class="grid-content-left">
					<div>来文字号</div>
				</el-col>
				<el-col :span="6" class="grid-content-right">
					<div>{{ inputForm.docFontSize }}</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" class="grid-content-left">
					<div>收文时间</div>
				</el-col>
				<el-col :span="6" class="grid-content-left">
					<div>{{ inputForm.receivingTime }}</div>
				</el-col>
				<el-col :span="6" class="grid-content-left">
					<div>文件来源</div>
				</el-col>
				<el-col :span="6" class="grid-content-right">
					<div>{{ inputForm.fileSource }}</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" class="grid-content-left">
					<div>内容摘要</div>
				</el-col>
				<el-col :span="18" class="grid-content-right">
					<div>{{ inputForm.contentSummary }}</div>
				</el-col>
			</el-row>
			<el-row v-if="officeInfo.length > 0">
				<el-col :span="6" class="grid-content-left">
					<div>办公室拟办</div>
				</el-col>
				<el-col :span="18">
					<div class="grid-content-right">
						<view v-for="item in officeInfo" class="info_abstract_v">
							<view>
								{{ item.content }}
							</view>
							<view class="flexll" style="line-height: 20px;">
								<el-image :src="item.signfj" style="width: 80px; "></el-image>
								<div>{{ item.updateTime }}</div>
							</view>
						</view>
					</div>
				</el-col>
			</el-row>
			<el-row v-if="leaderInfo.length > 0">
				<el-col :span="6" class="grid-content-left">
					<div>领导批示</div>
				</el-col>
				<el-col :span="18" class="grid-content-right">
					<div class="flexlay">
						<view v-for="leader in leaderInfo" class="info_abstract_v">
							<view>
								{{ leader.content }}
							</view>
							<view class="flexll" style="line-height: 20px;">
								<el-image :src="leader.signfj" style="width: 80px; "></el-image>
								<div>{{ leader.updateTime }}</div>
							</view>
						</view>
					</div>
				</el-col>
			</el-row>
			<el-row v-if="undertakeInfo.length > 0">
				<el-col :span="6" class="grid-content-left">
					<div>承办情况</div>
				</el-col>
				<el-col :span="18" class="grid-content-right">
					<div class="flexlay">
						<view v-for="item in undertakeInfo" class="info_abstract_v">
							<view>
								{{ item.content }}
							</view>
							<view class="flexll" style="line-height: 20px;">
								<el-image :src="item.signfj" style="width: 80px; "></el-image>
								<div>{{ item.updateTime }}</div>
							</view>
						</view>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<div class="grid-content-left2">备注</div>
				</el-col>
				<el-col :span="18">
					<div class="grid-content-right2">{{ inputForm.remark }}</div>
				</el-col>
			</el-row>
			<div style="text-align: left;">附件：</div>
			<view class="card_other">


				<view class="other_info" v-for="item in fileList">
					<view class="other_pdf  flex  ">
						<view decoration='underline' color='#36a7f3' :text="item.name"
							@click="item.type == 'pdf' ? preview(item) : download(item)"></view>

						<!-- <a :href="item.url">{{item.name}}</a> -->
					</view>
				</view>
				<el-upload ref="imgList"
								class="upload-demo"
				  disabled
				  :on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"

				  multiple
				  :limit="100"

				  :file-list="imgList">
				 <template #tip>
				   <div class="el-upload__tip" style="min-width: 255px;">
				   </div>
				 </template>
				</el-upload>
				<image-upload v-model="inputForm.attachedDocumentId" :limit="100" disabled ></image-upload>
			</view>


		</view>


		<view>

		</view>


	</view>
</template>

<script>

import gwCirculationCard2Service from '@/api/circulation2/gwCirculationCard2Service'
import gwFlowService from '@/api/gwflow/gwFlowService'

export default {
	mounted() {
		// this.$nextTick(function() {
		// 	this.$on('refresh', function() {
		this.refresh();
		// 	});
		// });

	},
	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: '',
				attachedDocumentId2: ''
			},
			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=" + fileUrl
			})
		},
		// 下载文件
		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: '下载失败'
				})
			}
		},

		// 使用正则表达式判断文件名或URL是否为图片格式
		isImageFormat(filename) {
			const imageFormats = /\.(jpeg|jpg|gif|png|bmp|svg)$/i;
			return imageFormats.test(filename);
		},

		refresh() {
			gwCirculationCard2Service.queryById(this.gwId).then(data => {
				this.inputForm = data
				this.inputForm.receivingTime = this.inputForm.receivingTime.substring(5, 10)
				//处理图片
				let aastr=this.inputForm.attachedDocumentId.split(",");
				let imgstr="";
				let filestr=[];

				aastr.forEach(item => {
					if (this.isImageFormat(item)) {
						if(imgstr==''){
							imgstr=item
						}else{
							imgstr=imgstr+","+item
						}
					}else{
						let as={};
						let s1=item.split("name=");
						as.name=s1[1];
						as.url=this.$http.BASE_URL+item
						filestr.push(as)
					}
				})
				this.inputForm.attachedDocumentId=imgstr;
				this.imgList=filestr;

			})
			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
			})
		},
	},
	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%;
}
.flexll{
	line-height: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-self: center;
}

.card_main {
	width: 100%;
	background-color: #fefefe;
	display: flex;
	flex-direction: column;
}

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

.card_info {
	width: 96%;
	text-align: center;
}

.card_info_title {
	font-size: 16px;
	font-weight: 700;
	padding-top: 10px;
	color: #36a7f3;
	text-align: center;
}

.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;
	display: flex;
	flex-direction: column;
}

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

.card_other {
	text-align: left;
}

.grid-content-left1 {
	min-height: 36px;
	text-align: left;
	line-height: 36px;
	color: #333333;
}

.grid-content-right1 {
	box-sizing: border-box;
	min-height: 36px;
	text-align: right;
	line-height: 36px;
	color: #333333;
}

.grid-content-left {
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	box-sizing: border-box;
	min-height: 36px;
	text-align: center;
	line-height: 36px;
	color: #333333;
}

.grid-content-right {
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	border-top: 1px solid #333333;
	box-sizing: border-box;
	min-height: 36px;
	text-align: center;
	line-height: 36px;
	color: #333333;
}

.flexlay {
	display: flex;
	flex-direction: column;
}

.grid-content-left2 {
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	box-sizing: border-box;
	min-height: 36px;
	text-align: center;
	line-height: 36px;
	color: #333333;
}

.grid-content-right2 {
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	box-sizing: border-box;
	min-height: 36px;
	text-align: center;
	line-height: 36px;
	color: #333333;
}
</style>