smart-app/pages/myReport/myReport.vue

<template>
	<view>
		 <!-- 头部-->
		<cu-custom bgColor="bg-blue" :isBack="true">
		   	<block slot="backText">我的填报</block>
		   	<block slot="content"></block>
		   	<block slot="right">
		   		<view class=" flex justify-center" >
		   		 	<button  class="margin-top-ssm  cu-btn round line-blue  bg-blue"><text class="cuIcon-add"></text>新建任务</button>
		   		</view>
		   	</block>
		</cu-custom>
	    <!-- 切换卡-->
		<view class="nav_b solid-bottom">
			<view style="height:90rpx ;"></view>
			<view class="nav_b_1">
				<view :class="index==TabCur?'nav_one':'nav_1'" v-for="(item,index) in menuList" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
					<view :class="index==TabCur?'nav_zwf':''"></view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<scroll-view scroll-y="true">
			<!-- 已上报 -->
			<view v-if="TabCur==0">
				<view class="list_b">
				 	<view v-for="item in data" :key="item.id" class="list_1">
				 		<view class="list_tex">
				 			<!-- <image src="../../static/task/noTask.png"></image> -->
				 			<view class="list_right">
				 				<view class="list_right_2" style="color:#101010;margin-bottom: 20rpx;"> 
				 				    {{item.title}}
				 				</view>
				 				<view class="list_right_1">
				 					   {{item.nodePath}}
				 				</view> 
				 			</view>
				 		</view>
						<view class="list_tex2">
							<text class="list_time">{{ item.reportDate}}</text>
							<!-- <text class="list_time">{{ item.report_date}}</text> -->
							<view class="list_button">
								 <button class="list_button_1" @click="preview(item)">预览</button>
								 <button class="list_button_2 " @click="navTo(item)">编辑</button>
							</view>
						</view>
				 	</view>
				</view>
			</view>
			<!-- 未上报 -->
			<view v-if="TabCur==1">
				<view class="list_b">
				 	<view class="list_1" v-for="item in data" :key="item.id">
				 		<view class="list_tex">
				 			<!-- <image src="../../static/task/noTask.png"></image> -->
				 			<view class="list_right">
				 				<view class="list_right_2" style="color:#101010;margin-bottom: 20rpx; "> 
				 				       {{item.title}}
				 				</view>
				 				 <view class="list_right_1">
				 					  {{item.nodePath}}
				 				</view>
				 			</view>
				 		</view>
						<view class="list_tex2">
							<text class="list_time">{{ item.createTime  | timeStamp }}</text>
							<view class="list_button">
							 	<button class="list_button_0" @click="modelShow(item)">删除</button>
								 <button class="list_button_1" @click="preview(item)">预览</button>
								 <button class="list_button_2" @click="navTo(item)">编辑</button>
							</view>
						</view>
				 	</view>
				</view>
			</view>
			<view v-if="data.length>0 && show" class="list_no">没有更多内容了~</view>
			<view v-if="data.length==0 && show" class="list_no">暂时没有填报内容~</view>
			
		</scroll-view>
		<view class="cu-modal" :class="modalName==true?'shows':''" style="z-index: 9999999999;">
			<view class="cu-dialog bg-white">
				<view class="padding-xl" style="color: black !important;">
					您确定要删除当前资料吗？
				</view>
				<view class="cu-bar bg-white justify-end solid-top">
					<view class="action">
						<view  style="color: black !important;" class=" text-sm margin-right" @click="modalName=false">取消</view>
						<view class="text-blue text-sm margin-left" @click="deleteData()" >确定删除</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur:0,
				scrollLeft: 0,
				menuList:['已上报','未上报'],
				data:[],
				show:false,
				modalName:false,
				delData:[]
			}
		},
		onLoad() {
			this.findFormInstance(this.TabCur);
		},
		methods: {
			tabSelect(e) {
				this.data=[];
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.show=false;
				this.findFormInstance(this.TabCur);
			},
			navTo(data){
			//console.log(data)
			   uni.navigateTo({
			   	  url:"/pages/personBaseIndex/personBaseIndex?id="+data.processId
			   })	
			},
			findFormInstance(type){
				var that =this;
				if(type==1){
					type=0
				}else{
					type=1
				}
				var userId = uni.getStorageSync("userInfo").id;
				that.http.request("/app/myReport",{userId:userId,type:type}).then((res)=>{
					//返回来的数据和tab状态匹配才赋值
					if(that.TabCur != res.datas[0].isReport){
						that.data = res.datas;
						that.show=true;
					}
					//console.log(that.data)
				})
			},
			modelShow(data){
				this.modalName=true;
				this.delData = data;
			},
			deleteData(){
				var that =this;
				var userId = uni.getStorageSync("userInfo").id;
				that.http.request("/app/deleteInstance",{userId:userId,id:that.delData.id}).then((res)=>{
					if(res.result=="1"){
						that.$prompt.none("删除成功");
						setTimeout(function(){
							that.findFormInstance(that.TabCur);
						},1000)
					}
				});
				that.modalName=false;
			},
			preview(data){
				var that =this;
				that.http.request("/app/showOutView",{processId:data.processId}).then((res)=>{
					if(res.result=="1"){
						//console.log(res.data)
						if(res.datas.length <1){
							that.$prompt.none("无法生成预览");
							return
						}
						var encode=encodeURIComponent(res.data);
						uni.navigateTo({
							url:"/pages/view/preview/preview?preview="+ encode
						})
					}
				});
				
				// uni.navigateTo({
				// 	url:"/pages/view/preview/preview?processId="+data.formDataId
				// })
			}
		},
		filters: {
			timeStamp: function(value) {
				if (!value) return '';
				var now = new Date(value);
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var hour = now.getHours() >=10 ? now.getHours() : "0"+now.getHours() ;
				var minutes = now.getMinutes() >=10 ? now.getMinutes() : "0"+now.getMinutes();
				var time = hour+":"+minutes;
				if (month < 10) {
					month = '0' + month
				}
				var date = now.getDate();
				if (date < 10) {
					date = '0' + date
				}
				return year + "-" + month + "-" + date+" "+time
			},
		}
	}
</script>

<style>
    page{
		background-color: white; 
	}
	.nav_b{z-index: 5;background: #fff;position: fixed;left: 0;top:var(--status-bar-height);width: 750rpx; padding: 0 130rpx;}
	.nav_b_1{display: flex;align-items: center;justify-content: space-between;height: 100rpx;width: 490rpx;}
	 .nav_one{font-size: 30rpx;color: #0A8CD5;font-weight: bold;position: relative;width: 170rpx;text-align: center;}
	 .nav_1{font-size: 30rpx;color: #101010;font-weight: bold;width: 170rpx;text-align: center;}
	 .nav_zwf{width: 170rpx;height: 4rpx;background-color: #0A8CD5;position: absolute;bottom: -24rpx;left: 0;border-radius: 20rpx;}
	 .list_b{padding-top: 100rpx;}
	 .list_1{padding: 30rpx 22rpx;border-bottom: 2rpx solid #E3E1E1;}
	/* .list_1:last-child{border-bottom: none;} */
	 .list_tex{display: flex;align-items: center;}
	 .list_tex image{width: 140rpx;height: 140rpx;margin-right: 22rpx;}
	/* .list_right{width: 544rpx;} */
	 .list_right_1{
		 font-size: 30rpx;
		 color: #8A8A8A;
		 overflow:hidden; 
		 text-overflow:ellipsis;
		 display:-webkit-box; 
		 -webkit-box-orient:vertical;
		 -webkit-line-clamp:2;
	 }
	 .list_right_2{font-size: 30rpx;color: #101010;line-height: 38rpx;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
	.list_tex2{display: flex;align-items: center;justify-content: space-between;padding-top: 18rpx;}
	.list_time{font-size: 26rpx;color: #8A8A8A;}
	.list_button{display: flex;}
	.list_button button{width: 140rpx;height: 60rpx;line-height: 60rpx;font-size: 26rpx;color: #fff;border-radius: 100rpx;}
	.list_button .list_button_0{color: #999;margin-right: 18rpx;}
	.list_button_1{background-color: #EF9D1E;margin-right: 18rpx;}
	.list_button_2{background-color: #0A8CD5;}
	uni-button:after{border: none;}
	.list_no{text-align: center;font-size: 26rpx;color: #AEAEAE;padding: 60rpx 0 200rpx;}
	.nav_one {
	    margin-top: 4px !important;
    }
	.nav_1{
		margin-top: 4px !important;
	}
	.cu-dialog {
	    width: 60% !important;
	}
	.cu-modal.shows {
		opacity: 1;
		transition-duration: 0.1s;
	   /* -ms-transform: scale(1) !important;
		transform: scale(1) ; */
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto; 
	}
</style>