smart-app/pages/multimedia/medialist.vue

<template>
	<view class="bg-white" style="width: 100%;height: 100vh;overflow: hidden;">
		<!-- 顶部 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">
			  <text style="width: 360rpx;">{{titleName?titleName:'影像资料'}}</text>
			</block>
			<block slot="content"></block>
			<block slot="right">
				<view class="flex justify-center">
					<button class="margin-top-ssm cu-btn round line-blue text-white" v-if="manage" @tap="manage = false">
						<text>取消管理</text>
					</button>
					<template v-else>
						<button class="margin-top-ssm cu-btn round line-blue text-white" v-if="type==0" @tap="toSaveFile">
							<text class="cuIcon-camera btnicon-size"></text>
							<text>拍照</text><text v-if="nodeId">到当前节点</text>
						</button>
						<button class="margin-top-ssm cu-btn round line-blue text-white" v-if="type==1" @tap="toSaveFile">
							<text class="cuIcon-record btnicon-size"></text>
							<text>录像</text><text v-if="nodeId">到当前节点</text>
						</button>
					</template>
				</view>
			</block>
		</cu-custom>
		<view class="bg-white nav" v-if="nodeId">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in menuList" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}({{item.num}})
				</view>
			</view>
		</view>
		<scroll-view :scroll-y="!previewShow" style="width: 100%;height: 100%;" lower-threshold="200" @scrolltolower="paging">
			<view v-for="(item,index) in showList" :key="item.name" @longtap="manage = true" v-if="showList.length">
				<view class="padding-sm text-bold color-black solid-bottom">
					{{item.name}}
				</view>
				<view v-for="(item2,index2) in item.list" :key="item2.id" class="flex solid-bottom padding-sm">
					<image class="image-type margin-right-sm" mode="aspectFit" :src="type==0?item2.fileUrl:item2.snapshot" @tap="previewImage(item2,index,index2)"></image>
					<view class="flex-sub flex align-center">
						<view class="flex-sub">
							<view class="text-bold text-xl color-black">{{item2.fileName}}</view>
							<view class="text-df">{{item2.description}}</view>
						</view>
						<checkbox-group @change="CheckboxChange" :data-index="index" :data-index2="index2">
							<checkbox class="sc75 blue" v-show="manage" :class="item2.checked?'checked':''" :checked="item2.checked?true:false"></checkbox>
						</checkbox-group>	
					</view>
				</view>
			</view>
			<view v-else style="width: 100%;text-align: center;padding-top: 50rpx;">数据加载中</view>
			
			<view style="height: 360rpx;" v-if="nodeId"></view>
			<view style="height: 240rpx;" v-else></view>
		</scroll-view>
		<view class="botm padding bg-white flex justify-between" v-if="manage">
			<view>
				<checkbox-group @change="allChange">
					<checkbox class="sc75 blue" :class="isAll?'checked':''" :checked="isAll?true:false" value="all"></checkbox>
					<text class="padding-left-sm">全选</text>
				</checkbox-group>
			</view>
			<view>
				<button class="cu-btn round margin-right-sm" @tap="delMedias">删除选中</button>
				<button class="cu-btn round bg-blue" @tap="toEdit">编辑选中</button>
			</view>
		</view>
		
		<view class="preview-bg" v-if="previewShow">
			<view class="preview-close"  :style="[{top:(CustomBar-40) + 'px'}]" @tap="hidePreview">
				<text class="lg text-white cuIcon-close text-bold"></text>
			</view>
			<view class="flex flex-direction" style="height: 100%;">
				<image mode="aspectFit" :src="previewObj.fileUrl" class="preview-content flex-sub"  v-if="type == 0"></image>
				<video v-if="type == 1" :src="previewObj.fileUrl"  class="preview-content flex-sub" :style="[{'margin-top':CustomBar + 'px'}]"></video>
				<scroll-view scroll-y class="preview-desc">
					<view class="">{{previewObj.fileName}}</view>
					<view class="preview-text">{{previewObj.description}}</view>
					<view class="">{{previewObj.filmingTime}} {{previewObj.shooter}}</view>
				</scroll-view>
				<view class="margin-top-sm text-right" style="height: 80rpx;">
					<button class="cu-btn round line-white margin-right-sm" @tap="toEdit([previewObj])">编辑</button>
					<button class="cu-btn round line-white margin-right-sm" @tap="delOne">删除</button>
				</view>
			</view>
			<!-- <view class="preview-desc2">
				<view class="">{{previewObj.fileName}}</view>
				<view class="preview-text">{{previewObj.description}}</view>
				<view class="">{{previewObj.filmingTime}} {{previewObj.shooter}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,//1:video,0:picture
				tagId:'',
				nodeId:'',
				nodeName:'',
				titleName:'',
				pageSize:20,
				TabCur: 0,
				manage:false,
				isAll:false,
				menuList: [{
					name: '全部节点文件',
					num:0,
				}, {
					name: '当前节点文件',
					num:0,
				}],
				list:[],
				listNum:0,
				page:1,
				nowList:[],
				nowNum:0,
				nowPage:1,
				sonList:[],
				sonNum:0,
				sonPage:1,
				
				previewShow:false,
				previewObj:null,
				
				userInfo:null,
				project:null,
			}
		},
		computed:{
			showList(){
				if(!this.nodeId){
					return this.list;
				}else{
					if(this.TabCur == 0){
						return this.sonList;
					}else{
						return this.nowList;
					}
				}
			}
		},
		onLoad(e) {
			this.type=e.type;
			this.tagId=e.tagId;
			this.nodeId=e.nodeId;
			this.nodeName=e.nodeName;
			this.titleName=e.titleName;
			var userInfo = uni.getStorageSync("userInfo")
			if(userInfo){
				this.userInfo = userInfo;
				this.project =  uni.getStorageSync("porject"+"_"+userInfo.id);
			}
			
			//监听选择工序
			uni.$on('uploadComplete',this.initData)
		},
		onShow() {
			this.initData();
		},
		onUnload(){
			uni.$off('uploadComplete',this.initData)
		},
		methods: {
			//划到底了
			paging(){
				//console.log('paging')
				let load = false;
				let listNUm = 0;
				if(this.nodeId){
					if(this.TabCur == 0){
						this.sonList.forEach((list)=>{
							list.list.forEach(()=>{
								listNUm++;
							})
						})
						if(listNUm < this.sonNum){
							load = true;
							this.sonPage++;
						}
					}else if(this.TabCur == 1){
						this.nowList.forEach((list)=>{
							list.list.forEach(()=>{
								listNUm++;
							})
						})
						if(listNUm < this.nowNum){
							load = true;
							this.nowPage++;
						}
					}
				}else{
					this.list.forEach((list)=>{
						list.list.forEach(()=>{
							listNUm++;
						})
					})
					if(listNUm < this.listNum){
						load = true;
						this.page++;
					}
				}
				
				if(load){
					
					this.loadTable();
				}
			},
			loadTable(isDel){
				if(this.nodeId){
					if(this.TabCur == 0){
						this.loadTable3(isDel);
					}else if(this.TabCur == 1){
						this.loadTable2(isDel);
					}
				}else{
					this.loadTable1(isDel);
				}
			},
			loadTable1(isDel){
				this.http.request('/app/multimedia/medialist', {
					tagId:this.tagId,
					nodeIdMedia:'',
					searchKey:'',
					orderKey:0,//0倒序，1顺序
					date:'',
					page:this.page,
					pageSize:this.pageSize,
				}).then((result)=>{
					if(result.result == 1){
						this.listNum = result.totalNum;
						for (let i = 0; i < result.datas.length; i++) {
							let dateIsIn = false;
							let jIndex = 0;
							for (let j = 0; j < this.list.length; j++) {
								if(result.datas[i].filmingTime == this.list[j].name){
									dateIsIn = true;
									jIndex = j;
									break;
								}
							}
							if(dateIsIn){
								//console.log(dateIsIn)
								this.list[jIndex].list.push(result.datas[i]);
							}else{
								this.list.push({
									name:result.datas[i].filmingTime,
									list:[result.datas[i]]
								})
							}
						}
					}else{
						if(isDel){
							this.listNum = 0;
							this.list = [];
							this.page = 1;
						}
					}		   
				})
			},
			loadTable2(isDel){
				this.http.request('/app/multimedia/medialist', {
					tagId:this.tagId,
					nodeIdMedia:'',
					searchKey:'',
					orderKey:0,//0倒序，1顺序
					date:'',
					page:this.nowPage,
					pageSize:this.pageSize,
					nodeId:this.nodeId,
					mode:0,
				}).then((result)=>{
					if(result.result == 1){
						this.nowNum = result.totalNum;
						this.menuList[1].num = this.nowNum;
						for (let i = 0; i < result.datas.length; i++) {
							let dateIsIn = false;
							let jIndex = 0;
							for (let j = 0; j < this.nowList.length; j++) {
								if(result.datas[i].filmingTime == this.nowList[j].name){
									dateIsIn = true;
									jIndex = j;
									break;
								}
							}
							if(dateIsIn){
								//console.log(dateIsIn)
								this.nowList[jIndex].list.push(result.datas[i]);
							}else{
								this.nowList.push({
									name:result.datas[i].filmingTime,
									list:[result.datas[i]]
								})
							}
						}
					}else{
						if(isDel){
							this.nowNum = 0;
							this.menuList[1].num = 0;
							this.nowList = [];
							this.nowPage = 1;
							this.TabCur = 0;
						}
					}		   
				})
				
			},
			loadTable3(isDel){
				this.http.request('/app/multimedia/medialist', {
					tagId:this.tagId,
					nodeIdMedia:'',
					searchKey:'',
					orderKey:0,//0倒序，1顺序
					date:'',
					page:this.sonPage,
					pageSize:this.pageSize,
					nodeId:this.nodeId,
					mode:1,
				}).then((result)=>{
					if(result.result == 1){
						this.sonNum = result.totalNum;
						this.menuList[0].num = this.sonNum;
						for (let i = 0; i < result.datas.length; i++) {
							let dateIsIn = false;
							let jIndex = 0;
							for (let j = 0; j < this.sonList.length; j++) {
								if(result.datas[i].filmingTime == this.sonList[j].name){
									dateIsIn = true;
									jIndex = j;
									break;
								}
							}
							if(dateIsIn){
								//console.log(dateIsIn)
								this.sonList[jIndex].list.push(result.datas[i]);
							}else{
								this.sonList.push({
									name:result.datas[i].filmingTime,
									list:[result.datas[i]]
								})
							}
						}
					}else{
						if(isDel){
							this.sonNum = 0;
							this.menuList[0].num = 0;
							this.sonList = [];
							this.sonPage = 1;
						}
					}	   
				})
			},
			
			//删除
			delMedias(){
				let ids = [];
				this.showList.forEach((list)=>{
					list.list.forEach((item)=>{
						if(item.checked){
							ids.push(item.id);
						}
					})
				})
				if(ids.length < 1){
					this.$prompt.none('请至少选中一个文件');
					return;
				}
				
				uni.showModal({
				    title: '删除',
				    content: '是否删除文件?',
				    success:(res) => {
				        if (res.confirm) {
				            //console.log('用户点击确定');
							
							this.http.request('/app/multimedia/delMedia', {
								arr:ids.join(','),
								tagId:this.tagId,
							}).then((result)=>{
								if(result.result == 1){
									if(this.nodeId){
										if(this.TabCur == 0){
											this.sonList = [];
											this.sonPage = 1;
										}else if(this.TabCur == 1){
											this.nowList = [];
											this.nowPage = 1;
										}
									}else{
										this.list = [];
										this.page = 1;
									}
									this.loadTable(true);
								}			   
							})
				        }
				    }
				});	
			},
			delOne(){
				this.previewShow = false;
				uni.showModal({
				    title: '删除',
				    content: '是否删除文件?',
				    success:(res) => {
				        if (res.confirm) {
				            //console.log('用户点击确定');
							this.http.request('/app/multimedia/delMedia', {
								arr:[this.previewObj.id],
								tagId:this.tagId,
							}).then((result)=>{
								if(result.result == 1){
									let lsit = [];
									if(this.nodeId){
										if(this.TabCur == 0){
											lsit = this.sonList;
										}else if(this.TabCur == 1){
											lsit = this.nowList;
										}
									}else{
										lsit = this.list;
									}
									//debugger
									lsit[this.previewObj.index].list.splice(this.previewObj.index2,1);
									if(lsit[this.previewObj.index].list.length < 1){
										lsit.splice(this.previewObj.index,1);
									}
								}			   
							})
				        }
				    }
				});	
			},
			
			toEdit(arr){
				let selects = [];
				if(arr instanceof Array){
					selects = arr;
				}else{
					this.showList.forEach((list)=>{
						list.list.forEach((item)=>{
							if(item.checked){
								selects.push(item);
							}
						})
					})
					if(selects.length < 1){
						this.$prompt.none('请至少选中一个文件');
						return;
					}
				}
				
				uni.setStorageSync('medialist', selects);
				let url = "/pages/multimedia/saveFile?type=" + this.type +"&tagId=" + this.tagId +"&handle=" + 'edit';
				if(this.nodeId){
					url += "&nodeId="+this.nodeId + "&nodeName=" + encodeURIComponent(this.nodeName);
				}
				uni.navigateTo({
					url: url
				})
				this.previewShow = false;
			},
			
			toSaveFile(){
				let url = "/pages/multimedia/saveFile?type=" + this.type +"&tagId=" + this.tagId +"&handle=" + 'add';
				if(this.nodeId){
					url += "&nodeId="+this.nodeId + "&nodeName=" + encodeURIComponent(this.nodeName);
				}
				uni.navigateTo({
					url: url
				})
			},
			
			
			// previewImage(url){
			// 	uni.previewImage({
			// 		current: 0,     // 当前显示图片的链接/索引值
			// 		urls: [url],    // 需要预览的图片链接列表，要求必须是数组
			// 	})
			// },
			previewImage(item,index,index2){
				this.previewShow = true;
				item.index = index;
				item.index2 = index2;
				this.previewObj = item;
			},
			hidePreview(){
				//console.log('hide')
				this.previewShow = false;
			},
			
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			allChange(e){
				let values = e.detail.value;
				if(values.length>0){
					this.isAll = true;
				}else{
					this.isAll = false;
				}
				this.showList.forEach((list)=>{
					list.list.forEach((item)=>{
						this.$set(item,'checked',this.isAll);
					})
				})
			},
			CheckboxChange(e){
				let values = e.detail.value;
				let item = this.showList[e.currentTarget.dataset.index].list[e.currentTarget.dataset.index2];
				// console.log(e)
				// console.log(item)
				if(values.length>0){
					this.$set(item,'checked',true);
				}else{
					this.$set(item,'checked',false);
				}
			},
			
			initPage(){
				this.list = [];
				this.page = 1;
				
				this.sonList = [];
				this.sonPage = 1;
				
				this.nowList = [];
				this.nowPage = 1;
			},
			initData(){
				this.initPage();
				if(this.nodeId){
					this.loadTable2();
					this.loadTable3();
				}else{
					this.loadTable1();
				}
			},
		},
	}
</script>

<style>
	.title-font{
		font-size: 30rpx;
		padding: 20rpx;
	}
	.color-black{
		color: #333333;
	}
	.icon-size{
		font-size: 60rpx;
		margin-right: 16rpx;
	}
	.btnicon-size{
		font-size: 36rpx;
		margin-right: 8rpx;
	}
	.image-type{
		background-color: #EEEEEE;
		width: 150rpx;
		height: 150rpx;
	}
	
	.botm{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 2px 2px 10px rgb(26 26 26 / 50%);
	}
	.sc75{
		transform: scale(0.75, 0.75); 
	}
	
	.preview-bg{
		background-color: #262626;
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}
	.preview-close{
		position: absolute;
		top: 0;
		right: 30rpx;
		font-size: 50rpx;
		z-index: 99;
	}
	.preview-content{
		margin: auto;
		width: 100%;
		height: 100%;
	}
	
	.preview-desc2{
		position: absolute;
		left: 0;
		bottom: 80rpx;
		z-index: 98;
		padding: 0 20rpx;
		color: #FFFFFF;
		pointer-events: none;
		text-shadow: 1px 1px 2px #000000;
	}
	.preview-desc{
		padding: 0 20rpx;
		color: #FFFFFF;
		height: 120rpx;
	}
	.preview-text{
		font-size: 22rpx;
		padding: 20rpx 0;
	}
</style>