xinhuaqujiaoyuju/pages/gongwen/content.vue

<template>
	<view class="oa-notice-detail">

		<view class="covers-body covers-uploader oa-uploader">
			<view class="input-title">
				<view class="contentTitle">紧急程度：</view>
				<view class="contentDetail">{{content.ponderance}}</view>
			</view>
			<view class="input-title">
				<view class="contentTitle">文件类别：</view>
				<view class="contentDetail">{{content.securityClass}}</view>
			</view>
			<view class="input-title">
				<view class="contentTitle">来文机关：</view>
				<view class="contentDetail">{{content.office}}</view>
			</view>
			<view class="input-title" v-if="zhshow">
				<view class="contentTitle">文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</view>
				<view class="contentDetail">{{content.referenceNumber}}</view>
			</view>
			<view class="input-title">
				<view class="contentTitle">文件名称：</view>
				<view class="contentDetail">{{content.fwtitle}}</view>
			</view>
			<view class="input-title">
				<view class="contentTitle">正&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文：</view>
				<view class="uni-uploader contentDetail">
					<view class="uni-uploader-body" v-for="(item,i) in contentFile" :key="i">
						<view class="uni-uploader_files" @click="showFile(item.path)">
							<block>
								<view class="uni-uploader__file" style="position: relative; text-decoration: underline;">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<view class="input-title">
				<view class="contentTitle">拟办意见：</view>
				<view class="contentDetail">{{content.opinion}}</view>
			</view>
			<view class="input-title" v-if="zgldshow">
				<view class="contentTitle">主管领</br>导意见：</view>
				<view class="contentDetail">{{content.leaderOpinion}}</view>
			</view>
			<view class="input-title" v-if="cardshow">
				<view class="contentTitle">主要领</br>导意见：</view>
				<view class="uni-uploader contentDetail">
					<view class="uni-uploader-body" v-for="(item,i) in cardFile" :key="i">
						<view class="uni-uploader_files" @click="showFile(item.path)">
							<block>
								<view class="uni-uploader__file" style="position: relative; text-decoration: underline;">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<view class="input-title" v-if="!isme">
				<view class="contentTitle">发送人：</view>
				<view class="contentDetail">{{content.applyUser}}</view>
			</view>
			<view class="input-title" v-if="!isme">
				<view class="contentTitle">发送时间：</view>
				<view class="contentDetail">{{content.createTime}}</view>
			</view>
			<view class="input-title" v-if="!isme && examineshow">
				<view class="contentTitle">签收意见：</view>
				<view class="contentDetail">{{content.examineMe[0].examine}}</view>
			</view>
			
			<!-- 进度条 -->
			<view>
				<rfLoadProgress :progress="progress" :height="0"></rfLoadProgress>
			</view>
			<!-- <view class="input-title">
				<view class="contentTitle">附件：</view>
				<view class="uni-uploader contentDetail">
					<view class="uni-uploader-body" v-for="(item,i) in file" :key="i">
						<view class="uni-uploader_files" @click="showFile(item.path)">
							<block>
								<view class="uni-uploader__file" style="position: relative;">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<view class="covers-body covers-uploader oa-uploader" v-if="ismine&&isme">
			<view class="input-title">签收详情：</view>
			<view class="uni-timeline">
				<view class="uni-timeline-item" :class="[
							item.signfor === '未签收' ? `text-${themeColor.name} uni-timeline-first-item` : 'uni-timeline-last-item']"
					v-for="(item, index) in approveDetail" :key="index">

					<view class="uni-timeline-item-content">
						<view v-if="item.signfor=='未签收'">
							{{ item.userName }} ----- {{ item.signfor }}
						</view>
						<view v-if="item.signfor=='已签收'">
							<!-- {{ item.userName }} ----- {{ item.signfor }} -->
							{{ item.userName }} 签收意见： {{ item.examine }}
						</view>
						<view class="datetime" v-if="item.signforDate!=null">
							{{ item.signforDate|time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="footer" v-if="qianshou">
			<view class="input-title">
				<text>签收时间：</text>
				<text>{{content.updateTime|time}}</text>
			</view>
		</view> -->
		<!-- <view class="covers-body covers-uploader oa-uploader" v-else-if="ismine===false">
			<view v-for="(item, index) in radioList" :key="index">
				<button class="action-btn" :class="'text-' + themeColor.name" @tap="handleWorksOperation(item.key)">
					{{item.value}}
				</button>
			</view>
		</view> -->
		<view class="covers-body covers-uploader oa-uploader" v-else-if="ismine===false">
			<view v-for="(item, index) in radioList" :key="index">
				<button class="action-btn" :class="'text-' + themeColor.name" @tap="openDialog()">
					{{item.value}}
				</button>
			</view>
		</view>
		
		<popup-layer ref="popupRef">
			<view class="zidingyiBox">
				<view class="input-title">
					<view class="input-content">签收意见：</view>
				</view>
				<view class="input-item">
					<text class="tit"></text>
					<!-- <input v-model="examine" placeholder="请输入签收意见" style="height: 40px;line-height: 40px;"/> -->
				<textarea v-model="examine" placeholder="请输入签收意见">
				</textarea>
				</view>
				<view>
					<button class="action-btn action-btn1"  @tap="handleWorksOperation()">
						签收
					</button>
				</view>
			</view>
		</popup-layer>

	</view>
</template>


<script>
	import moment from '@/common/moment';
	import { toastMsg } from '@/pages/toast/toast.js';
	export default {
		data() {
			return {
				id: '',
				businessKey: '',
				taskid: '',
				definitionId:'',
				content: {},
				cardFile: {},
				zhshow:false,
				cardshow:false,
				zgldshow:false,
				contentFile: {},
				file: {},
				qianshou: false,
				ismine: false,
				isme: false,
				examineshow: false,
				approveDetail: [],
				radioList: [{
					"key": "/fw/updateInfo",
					"value": "签收"
				}],
				examine:'',
				progress:0,
			}
		},
		filters: {
			time(val) {
				var date = new Date(val);
				return moment(date).format('YYYY-MM-DD HH:mm:ss');
			},
		},
		onLoad: function(opt) {
			this.businessKey = opt.businessKey;
			if (opt.qianshou == "true") this.qianshou = true;
			if (opt.ismine == "true") this.ismine = true;
			if (opt.isme == "true") this.isme = true;
			this.initData();
		},
		methods: {
			// 数据初始化
			initData() {
				this.getContent();
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			getContent() {
				var url = this.$mConfig.baseUrl + '/fw/getFormData';
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				var that = this;
				this.$http.request({
					url: url,
					header: {
						'content-type': 'application/json',
						'Authorization': token
					},
					data: {
						formkey: this.businessKey
					}
				}).then(r => {
					if (r.code == "200") {
						that.content = r.data;
						that.id = r.data.id;
						that.taskid = r.data.taskid;
						that.definitionId = r.data.instanceid;
						if(r.data.ponderance=='1'){
							r.data.ponderance='普通'
						}else{
							r.data.ponderance='加急'
						}
						
						that.examineshow=false
						if(that.content.examineMe[0]){
							that.examineshow=true
						}
						//console.log(JSON.stringify(r.data))
						//字号
						that.zhshow=false
						if(r.data.referenceNumber){
							that.zhshow=true
						}
						that.zgldshow=false
						if(r.data.leaderOpinion){
							that.zgldshow=true
						}
						//阅文卡
						that.cardshow=false
						if(r.data.cardFilePath!=undefined){
							that.cardshow=true
							var cardarr = [];
							
							var name=r.data.cardFileName.split(",")
							var path=r.data.cardFilePath.split(",")
														
							for (let i=0;i<name.length-1;i++){
							    cardarr.push({
							        "name": name[i],
							        "path": path[i]
							    })
							}
							
							/* cardarr.push({
								"name": r.data.cardFileInfo.fileName,
								"path": r.data.cardFileInfo.filePath+".png"
							}); */
						}
						
						var arr = [];
						
						var name=r.data.fileName.split(",")
						var path=r.data.filePath.split(",")
													
						for (let i=0;i<name.length-1;i++){
						    arr.push({
						        "name": name[i],
						        "path": path[i]
						    })
						}
						
						/* arr.push({
							"name": r.data.fileInfo.fileName,
							"path": r.data.fileInfo.filePath+".pdf"
						}); */
						/* if (r.data.content) var contentfilelist = r.data.content.substr(0, r.data
							.content.length - 1).split(',');
						else var contentfilelist = [];
						for (var i = 0; i < contentfilelist.length; i++) {
							arr.push({
								"name": contentfilelist[i],
								"path": r.data.contentPath.substr(0, r.data.contentPath.length - 1).split(
									',')[i]
							});
						} */
						that.cardFile = cardarr;
						that.contentFile = arr;
						//附件文件
						/* var filearr = [];
						if (r.data.fileName) var filelist = r.data.fileName.substr(0, r.data.fileName
							.length - 1).split(',');
						else var filelist = [];
						for (var i = 0; i < filelist.length; i++) {
							filearr.push({
								"name": filelist[i],
								"path": r.data.filePath.substr(0, r.data.filePath.length - 1).split(',')[i]
							});
						}
						that.file = filearr; */
					} else {

					}
				}).then(res => {
					if (that.ismine) {
						var detailUrl = this.$mConfig.baseUrl + '/fw/signFor';
						this.$http.request({
							url: detailUrl,
							header: {
								'content-type': 'application/json',
								'Authorization': token
							},
							params: {
								businessKey: that.businessKey,
								id: that.definitionId
							}
						}).then(r => {
							if (r.code == "200") {
								that.approveDetail = r.rows;
							}
						})
					}
				})
			},
			openDialog() {
				this.$refs.popupRef.show();
			},
			showFile(path) {
				var type = path.split('.')[1].toLocaleLowerCase();
				var url = this.$mConfig.baseUrl + path;
				if (type == 'jpg' || type == 'jpeg' || type == 'bmp' || type == 'gif' || type == 'png') {
					console.log("2");
					var arr = [];
					arr.push(url);
					uni.previewImage({
						urls: arr
					});
				} else if (type == 'doc' || type == 'xls' || type == 'ppt' || type == 'pdf' || type == 'docx' || type ==
					'xlsx' || type == 'pptx') {
					let watiting = plus.nativeUI.showWaiting("下载文件....");
					const downloadTask = uni.downloadFile({
						url: url,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log(res);
								}
							});
						}
					});
					
					downloadTask.onProgressUpdate((res) => {undefined
					
					if(res.progress>90){undefined
					
					this.percent = res.progress
					
					}
					
					if(res.progress==100){undefined
					
					setTimeout(function () {undefined
					
					uni.hideLoading();
					
					/* uni.showToast({undefined,
					title:"保存成功",
					icon:"success"
					
					}); */
					
					}, 4000);
					
					}
					watiting.setTitle("下载进度：" + res.progress + "%");
					this.progress = res.progress;
					if (res.progress === 100) {
						watiting.close();
						this.progress = 0;
					}
					
					/* console.log('下载进度' + res.progress);
					
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite); */
					
					});
					
					
				} else {
					if(type=='rar' || type=='zip'){
						this.$mHelper.toast('请在电脑上下载查看压缩包');
						return;
					}
					uni.downloadFile({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								var tempFilePaths = res.tempFilePath;
								uni.saveFile({
									tempFilePath: tempFilePaths[0],
									success: function(res) {
										var savedFilePath = res.savedFilePath;
										toastMsg('success', "已保存文件至：" + savedFilePath);
									}
								});
							}
						}
					})
				}
			},
			handleWorksOperation(path) {
				if(this.examine==''){
					toastMsg('warning', '请填写签收意见')
					return false;
				}
				var url = this.$mConfig.baseUrl + "/fw/updateInfo";
				var qianshouUrl = this.$mConfig.baseUrl + '/fw/submitToDoItem/' + this.taskid+","+this.examine;
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				var that = this;
				
				/* this.$http.request({
					url: qianshouUrl,
					method: "PUT",
					header: {
						'content-type': 'application/json',
						'Authorization': token
					},
					data: {
						SelectUserType: "end",
						sendUser: "",
						sendUserRealName: ""
					}
				}).then(res => {
					if (res.code == "200") {
						toastMsg('success', '签收成功');
						that.qianshou = true;
						that.content.updateTime = new Date();
						that.ismine='';
						that.$refs.popupRef.close();
						that.getTabBarBadge();
						//重新查询列表数量
						
					}
				}) */
				this.$http.request({
					url: url,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Authorization': token
					},
					params: {
						id: that.id,
						taskid: that.definitionId
					}
				}).then(r => {
					if (r.code = "200") {
						this.$http.request({
							url: qianshouUrl,
							method: "PUT",
							header: {
								'content-type': 'application/json',
								'Authorization': token
							},
							data: {
								SelectUserType: "end",
								sendUser: "",
								sendUserRealName: ""
							}
						}).then(res => {
							if (res.code == "200") {
								/* that.qianshou = true;
								that.content.updateTime = new Date();
								that.ismine='';
								that.getTabBarBadge(); */
								//重新查询列表数量
								
								toastMsg('success', '签收成功');
								that.qianshou = true;
								that.content.updateTime = new Date();
								that.ismine='';
								that.$refs.popupRef.close();
								that.getTabBarBadge();
								//重新查询列表数量
								
							}
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.oa-notice-detail {
		.uni-timeline {
			padding: $spacing-lg;
			background-color: $color-white;
		}

		.feedback-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;
		}

		.feedback-star-view.feedback-title {
			justify-content: flex-start;
			margin: 0;
		}

		.feedback-quick {
			position: relative;
			padding-right: 40upx;

			.iconfont {
				font-size: $font-sm;
			}
		}

		.feedback-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.feedback-textare {
			height: 200upx;
			font-size: 34upx;
			line-height: 50upx;
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 30upx 0;
		}

		.footer {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 98;
			width: 100%;
			background-color: $color-white;
			color: $font-color-base;
			box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 15upx $spacing-base;

			.action-btn {
				font-size: $font-sm;
				margin: 0 0 0 15upx;
				padding: 0 $spacing-lg;
				text-align: center;
				height: 60upx;
				line-height: 60upx;
				
			}
			
		}

		.banner {
			overflow: hidden;
			position: relative;
			background-color: #ccc;

			.banner-img {
				height: 300upx;
				width: 100%;
			}

			.banner-title {
				max-height: 84upx;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 32upx;
				font-weight: 400;
				line-height: 42upx;
				color: white;
				z-index: 11;
				background-color: rgba(0, 0, 0, 0.25);
				padding: 4upx 20upx;
			}
		}

		.banner-title {
			padding: $spacing-lg $spacing-lg 0;
			font-size: $font-lg;
		}

		.article-meta {
			padding: 20upx 40upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			color: gray;

			.article-text {
				font-size: 26upx;
				line-height: 50upx;
				margin: 0 20upx;
			}

			.article-author,
			.article-time {
				font-size: 30upx;
			}
		}

		.article-content {
			padding: 0 30upx;
			overflow: hidden;
			font-size: 30upx;
			margin-bottom: 30upx;
		}

		.input-title {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;
			width: 100%;
		}

		.contentTitle {
			width: 30%;
		}

		.contentDetail {
			width: 60%;
		}

		.input-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;
		}

		.covers-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.covers-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.covers-uploader {
			padding: 22upx 20upx;
			margin: 22upx 20upx;
		}
		.tit {
			height: 40px;
			width:7vw;
			text-align: right;
			float:left;
			line-height: 40px;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}
		textarea {
		        border: 1px solid #b9b9b9;
		        height: 200rpx;
				width: 90%;
				margin-left:5%;
		        word-wrap : break-word;
		    }
	}
	.action-btn1{
		background: #0081FF !important;
		color: #fff;
		margin:50upx 30upx;
		}
</style>