jp-railway/pages/oawork/cabinetFiling.vue

<template>
	<view>
		<u-navbar :title="title">
			<!-- <view class="slot-wrap">
				<u-icon name="search" 
				@click="gotoUrl('pages/search/searchResult?type='+listForm.typeId)"
				size="48" color="#777777"></u-icon>
			</view>	 -->
		</u-navbar>
		<view class="head-head">
			<u-search placeholder="请输入标题" :show-action="true" 
			@search="init()" 	@clear="init()"	@custom="init()"
				 v-model="keyword"></u-search>
			
		</view>
		<view class="head-head-placeholder ">
			
		</view>
		
			<u-popup v-model="show"  height="600"
			 :closeable="true"
			 mode="bottom" border-radius="30" >
					<view class="showInfo">
						<view class="row">
							<view class="name">
								标题
							</view>
							<view class="value">
								{{showInfo.name}}
							</view>
						</view>
						<view class="row" v-if="infoList.length"
						
						 >
							<view class="name">
								附件
							</view>
							<view class="url"  >
								<view class="urlitem" v-for="(item,i) in infoList"
								 :key="i"
								 
								  @click="downInfo(item)" >
									{{item.name}}  下载
								</view>
							</view>
						</view>
						<view class="row" v-else >
							<u-divider 
							 :isnone="true" nonetext="未上传附件" 
							></u-divider>
						</view>
					</view>
			</u-popup>
			
		<view class="news">
			
			<view class="news-item" v-for="(item,i) in list" 
			
			 :key="i">
				<view class="content">
					<view class="news-title">
						{{item.name}}
					</view>
					
					
					<view class="information">
						<view class="classify" :style="item.createByN?'':'color:red'">
						{{item.orgName?item.orgName+'-':''}}	{{item.createByN?item.createByN:'后台'}}上传
						</view>
						
						<view class="date">
							{{substrDate(item.uploadTime)}}
						</view>
						
					</view>
					
					<view class="row" v-if="getInfoList(item.url).length"
					
					 >
						
						<view class="url"  >
							<view class="urlitem" v-for="(item,i) in getInfoList(item.url)"
							 :key="i"
							 
							  @click="downInfo(item)" >
								{{item.name}}  下载
							</view>
						</view>
					</view>
				</view>
				
				<view class="img" v-if="userPhone==item.createPhone">
					<u-button  size="mini" type="primary"  @click="addInfo(item.id)" >修改文件</u-button>
					<u-button  size="mini" style="margin-left: 18rpx;" type="success"  @click="addInfo2(item.id)" >权限调整</u-button>
					<u-button   size="mini" style="    float: right;" type="error"  @click="addInfo3(item)" >删除</u-button>
					  
				</view>
				
			</view>
			<u-divider  v-if="list.length==recordsTotal"
			 :isnone="list.length==0" nonetext="没有找到相关内容" 
			>已经到底了</u-divider>
		   </view>
		
		
		
		<view class="bottom">
			<u-button type="primary"  @click="addInfo()">添加文件</u-button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/addressbook.js'
	
	export default {
		data() {
			return {
				title:"文件柜",
				list:[],
				listForm:{
					pageIndex:1,
					// typeId:"",
					// title:"",
					pageSize:20,
				},
				recordsTotal:0,
				imgurl:'',
				show:false,
				showInfo:{
					url:"",
				},
				keyword:"",
				userPhone:"",
				
			}
		},
		onLoad(op){
			// if(op.title){
			// 	this.title=op.title
			// }
			// this.listForm.typeId=op.id
			this.userPhone=this.carhelp.getPersonInfo().phone
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		computed:{
			infoList(){
				var url=this.showInfo.url;
				if(url){
					
					return JSON.parse(url)
				}
				return []
			}
		},
		methods: {
			deleteApi(id){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.oaFileInfoDelete(id).then((res) => {
					uni.hideLoading();
					uni.showModal({
						title:"提示",
						showCancel:false,
						content:"操作成功！",
						
						success() {
							
						}
					})
					this.init()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			addInfo3(item){
				uni.showModal({
					title: '提示',
					content: `确认是否删除[${item.name}]？`,
					success: res=> {
						if (res.confirm) {
						   //付钱  改为组件
						   this.deleteApi(item.id);
						   
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			addInfo2(id){
				uni.navigateTo({
					url:"/pages/oawork/cabinet/cabinetRoot?id="+id,
					
				})
			},
			addInfo(id){
				var url=""
				if(id){
					url+="?id="+id
				}
				uni.navigateTo({
					url:"/pages/oawork/cabinet/cabinetAdd"+url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			getInfoList(url){
				
				if(url){
					
					return JSON.parse(url)
				}
				return []
			},
			init(){
				this.listForm.pageIndex=1
				this.list =[]
				this.listForm.name=this.keyword
				this.getList()
			},
			downInfo(item){
				window.location.href=item.url
				
			},
			ckInfo(item){
				// var url="/pages/news/articleDetails?id="+id;
				// uni.navigateTo({
				// 	url:url
				// })
				this.showInfo=item;
				this.show=true
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getList(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.oaFileInfoList(this.listForm).then((res) => {
					uni.hideLoading();
					this.list = [
						...this.list,
						...res.data.data
					];
					
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.showInfo{
	padding: 60rpx;
	
	
}
.row{
		display: flex;
		font-size: 32rpx;
		margin-top: 12rpx;
		.name{
			margin-right: 16rpx;
			    white-space: pre;
			color: #9E9E9E;
		}
		.value{
			 
			font-size: 36rpx;
			font-weight: bold;
		}
		.url{
			font-size: 32rpx;
			color: #00BCD4;
			.urlitem{
					margin-bottom: 16rpx;
			}
		}
	}

	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: #333333;
	}
.news{
	padding-bottom:120rpx;
		.news-item{
			padding:30rpx;
			margin: 20rpx;
			background: #fff;
			border-radius: 10px;
			.news-title{
				font-size: 42rpx;
				font-weight: bold;
			}
			.information{
				    display: flex;
				    justify-content: space-between;
					color: #9E9E9E;
			}
		}
	}
	
	.head-head{
		  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
		background: #fff;
		padding:24rpx;
		position: fixed;
		    left: 0;
		    right: 0;
		    top: 80rpx;
		    z-index: 991;
	}
	.head-head-placeholder{
		height: 112rpx;
		
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		//background-color: #fff;
		padding: 16rpx 32rpx;
	
		uni-button {
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			font-family: Microsoft Yahei;
		}
	}
</style>