lh-mobile/pages/fileView/reportList.vue

<template>
	<view class="container">
		<cu-custom bgColor="bg-luohu" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">检测报告</block>
		</cu-custom>
		<view class="box" v-if="reportList.length > 0">
			<view class="sinList" v-for="(item,index) in reportList" :key="index">
				<view class="title">报告编号：{{item.bao_gao_bian_hao_}}</view>
				<view class="title">样品编号：{{item.yang_pin_bian_hao}}</view>
				<view class="title">样品名称：{{item.yang_pin_ming_che}}</view>
				<view class="title">送检批号：{{item.song_jian_pi_hao_}}</view>
				<!-- <view class="title">报告名称：<text style="color: #7349ff;">{{item.FILE_NAME_ || ''}}</text></view> -->
				<view class="title">版本号：<text style="color: #7349ff;">{{item.run_qian_lu_jing_ || ''}}</text></view>
				<view class="title">报告类别：{{item.bao_gao_lei_bie_}}</view>
				<view class="title">报告类型：{{item.bao_gao_lei_xing_}}</view>
				<!-- <view class="title">联系人：{{item.wei_tuo_lian_xi_r}}</view> -->
				<view class="title">报告状态：<text style="color: #7349ff;">{{item.zhuang_tai_}}</text></view>
				<view class="title" style="color: #ff9900;" v-if="item.zhuang_tai_ == '待审核' && item.EXT_ == 'docx'">
					<u-icon name="question-circle-fill" class="u-m-r-5"></u-icon>该报告是docx格式,需要下载才能预览
				</view>
				<view class="btn">
					<view>
						<!-- <u-button type="warning" size="mini" @click="goDe(item.id_)" v-if="item.zhuang_tai_ == '待编制' || item.zhuang_tai_ == '待审核'">修改信息</u-button> -->
						<u-button type="warning" size="mini" @click="getFileList(item.bao_gao_pdf_,item.qi_ta_bao_gao_,0)" style="margin-left: 10rpx;" v-if="(item.zhuang_tai_ == '待审核' || item.zhuang_tai_ == '待审批') && item.EXT_ != 'docx'">预览报告</u-button>
						<u-button type="warning" size="mini" @click="getFileList(item.bao_gao_pdf_,item.qi_ta_bao_gao_,1)" style="margin-left: 10rpx;" v-if="item.zhuang_tai_ == '已完成'">查看报告</u-button>
						<u-button type="primary" size="mini" @click="getFileList(item.bao_gao_pdf_,item.qi_ta_bao_gao_,2)" style="margin-left: 10rpx;" v-if="(item.zhuang_tai_ == '已完成') || (item.shi_fou_guo_shen_ == '已编制') || (item.zhuang_tai_ == '待审批') || (item.zhuang_tai_ == '待审核')">
							下载报告</u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<uni-card is-full :is-shadow="false">
				<text class="">暂无报告</text>
			</uni-card>
		</view>

		<u-popup v-model="show" mode="bottom" closeable>
			<apply ref="apply" :id="id" v-if="show" @saveSuccees='saveSuccees'></apply>
		</u-popup>

		<u-popup v-model="fileShow" mode="center" width="80%" border-radius="20" @close="fileClose">
			<view class="fileClass">
				<h3 class="fileTitle">{{fileNub == 0 ? '预览报告' : fileNub == 1 ? '查阅报告':'下载报告'}}</h3>
				<view class="fileBox">
					<view v-for="(item,index) in fileList" :key="item.ID_" @click="fileTypeClick(item)">
						<view class="fileSin">
							<u-icon name="coupon"></u-icon>
							{{item.FILE_NAME_}}
						</view>
					</view>
					<view v-for="(item,index) in qiFileList" :key="item.ID_" @click="fileTypeClick(item)">
						<view class="fileSin">
							<u-icon name="coupon"></u-icon>
							{{item.FILE_NAME_}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import md5 from "@/common/util/md5.js"
	import http from "@/common/service/http.js"
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	import apply from './apply.vue'
	export default {
		components: {
			apply
		},
		data() {
			return {
				id: '',
				yangPinBianHao: '',
				reportList: [],
				userid: '',
				time: '',
				show: false,
				fileNub: 0,
				fileShow: false,
				fileList: [],
				qiFileList: []
			}
		},
		onLoad(option) {
			if (option.reportId) {
				this.yangPinBianHao = option.reportId
				this.getList(option.reportId)
			}
		},
		created() {
			this.getInit()
		},
		methods: {
			getInit() {
				let info = uni.getStorageSync(USER_INFO);
				if (info.employee.id) {
					this.userid = info.employee.id || ''
				}
				var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
				var time = nowDate.toJSON().split('T').join(' ').substr(0, 19)
				this.time = time
			},
			/* 
			  根据样品编号查询报告礼拜
			*/
			getList(id) {
				uni.showLoading({
					mask: true,
					title: 'loading'
				});
				//'${id}'
				let sql =
					`select a.*,b.FILE_NAME_,b.EXT_ from t_lhjcbgb a left join ibps_file_attachment b on a.bao_gao_pdf_ = b.id_  where a.yang_pin_bian_hao = '${id}' ORDER BY a.create_time_ desc`
				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const data = res.data.variables.data
						this.reportList = data
						uni.hideLoading()
					}
				})
			},
			/*
			  跳转页面在线查看文档页面
			*/
			goto(id, type) {
				uni.navigateTo({ // 跳转页面
					url: "/pages/fileView/fileView?fileId=" + id
				})
			},
			goDe(id) {
				this.id = id
				this.show = true
			},
			saveSuccees() {
				this.show = false
				this.reportList = []
				this.getList(this.yangPinBianHao)
			},
			getFileList(ids, itIds, type) {
				if (!ids) {
					return uni.showToast({
						title: '检测已结束，但是报告没有生成，请联系管理员查询，对你的不便，十分抱歉，请见谅',
						icon: 'none',
						duration: 2000
					})
				}

				this.fileNub = type
				let list = []
				if (ids) {
					let sql1 =
						`select ID_,FILE_NAME_,FILE_PATH_ from ibps_file_attachment where FIND_IN_SET(ID_,'${ids}')`
					let requestData1 = this.$sig(sql1)
					list.push(this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData1))
				}
				if (itIds) {
					let sql2 =
						`select ID_,FILE_NAME_,FILE_PATH_  from ibps_file_attachment where FIND_IN_SET(ID_,'${itIds}')`
					let requestData2 = this.$sig(sql2)
					list.push(this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData2))
				}

				Promise.all(list).then(res => {
					console.log(res)
					if (ids) {
						let datas = res[0].data.variables.data
						this.fileList = datas
						if (itIds) {
							let datas1 = res[1].data.variables.data
							this.qiFileList = datas1
						}
					} else {
						let datas = res[0].data.variables.data
						this.qiFileList = datas
					}
					this.fileShow = true
				})
			},
			fileClose() {
				this.fileList = []
				this.fileShow = false
			},
			fileTypeClick(item) {
				if (this.fileNub == '1') {
					this.goto(item.ID_)
				} else {
					this.getDe(item.ID_, item)
				}
			},
			getDe(id, item) {
				let access_token = uni.getStorageSync('Access-Token')

				let sql =
					`select FILE_PATH_  from ibps_file_attachment  WHERE ID_ = '${id}'`

				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const data = res.data.variables.data[0]
						let url =
							http.apiFile + data.FILE_PATH_
						uni.getSystemInfo({
							success: (res) => {
								// windows | mac为pc端
								// android | ios为手机端
								if (res.platform == 'android' || res.platform == 'ios') {
									var ua = window.navigator.userAgent.toLowerCase();
									if (ua.match(/MicroMessenger/i) == 'micromessenger') {
										var iframe = document.createElement('iframe');
										iframe.style.display = 'none';
										iframe.src = "javascript: '<script>location.href=\"" + url +
											"\"<\/script>'";
										document.getElementsByTagName('body')[0].appendChild(iframe);
									} else {
										let a = document.createElement('a')
										a.target = '_black'
										// a.download = item.FILE_NAME_ + '.pdf'
										a.download = item.bao_gao_bian_hao_ + '检测项目' + '.pdf'
										a.style.display = 'none'
										// 生成的base64编码
										a.href = url
										document.body.appendChild(a)
										a.click()
										document.body.removeChild(a)
									}

								} else {
									this.$uploades.download(id, item.FILE_NAME_ + '.pdf', this)
								}
							}
						});
					}
				})
			},


			/*
			   md5加密	  
			*/
			sig(sql) {
				let rul = (sql.length + 9) * 12 * 3 + 168
				let salt = "JinYuanXinTong"
				return md5(rul + '' + salt)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 20rpx;

		.sinList {
			padding: 20rpx;
			margin-bottom: 20rpx;
			width: 100%;
			background: #fff;

			.title {
				line-height: 48rpx;
			}

			.btn {
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.fileClass {
		min-height: 800rpx;
		max-height: 1200rpx;

		.fileTitle {
			text-align: center;
			position: fixed;
			height: 80rpx;
			width: 80%;
			background-color: #fff;
			z-index: 999;
			border-radius: 20rpx 20rpx 0 0;
		}

		.fileBox {
			padding: 0 10px;
			position: relative;
			top: 80rpx;

			.fileSin {
				padding: 10rpx 0;
				font-size: 30rpx;
			}
		}
	}
</style>