zhgdyunapp_vue3/pages/fileManage/oldfileManage.vue

<template>
	<view class="filePage">
		<!-- <scroll-view class="pageContent"> -->
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
		<headers :showBack="true">
			<view class="headerName">
				档案管理
			</view>
		</headers>
		<view class="searchBox">
			<form @submit="formSubmit">
				<view class="uni-form-item">
					<input class="uni-input" name="searchName" v-model="searchName"  placeholder="请输入文件名" />
					<button  class="mini-btn" type="primary" size="mini"  @click="loadData">搜索</button>
					<!-- <uni-icons2 class="search-icon" type="search" @click="loadData"></uni-icons2> -->
				</view>
			</form>
		</view>
		<view class="" v-if="fileList.length>0">
			<view class="fileItem" v-for="(item,index) in fileList" :key="index">
				<view class="left">
					<image class="fileIcon" :src="parseFileImgFn(item.filePath)"></image>
					{{item.fileName}}
				</view>
				<image @click="downloadFn(item)" class="ellipsis" src="../../static/ellipsis.png"></image>
			</view>
		</view>
		
		
		<view class="placeholderBox" v-else>
			<image src="/static/noData.png" class="noDataImg"></image>
			<view class="text">
				暂无数据
			</view>
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import headers from '../../components/headers/headers.vue'
	export default {
		components:{headers},
		data() {
			return {
				searchName:'',
				fileList:[],
				timer: null,
				fileImg1: require("../../static/ppt.png"),
				  fileImg2: require("../../static/excel.png"),
				  fileImg3: require("../../static/pdf.png"),
				  fileImg4: require("../../static/word.png"),
			};
		},
		mounted(){
			this.loadData()
		},
		methods:{
			parseFileImgFn(url) {
			      var type = url.split(".")[1];
			      if (type == "ppt" || type == "pptx") {
			        return this.fileImg1;
			      }
			      if (type == "xls" || type == "xlsx") {
			        return this.fileImg2;
			      }
			      if (type == "pdf") {
			        return this.fileImg3;
			      }
			      if (type == "doc" || type == "docx") {
			        return this.fileImg4;
			      }
			    },
			formSubmit(e){
				// console.log(e)
				this.searchName = e.detail.value.searchName
				this.loadData()
				
			},
			searchFile(e){
				this.searchName = e.detail.value
			},
			loadData(){
				var json={
					// companySn: JSON.parse(uni.getStorageSync('userInfo')).headquartersSn,
					fileName: this.searchName,
					pageNo: 1,
					pageSize: 100
				}
				if ([2, 3, 4, 7].includes(JSON.parse(uni.getStorageSync('userInfo')).accountType)) {
					json.companySn = JSON.parse(uni.getStorageSync('userInfo')).sn
				}
				if ([5, 6, 10].includes(JSON.parse(uni.getStorageSync('userInfo')).accountType)) {
					json.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
				}
				var that = this
				
				// xmgl/projectFile/list
				this.sendRequest({
					url: "xmgl/companyFile/list",
					data: json,
					method: "POST",
					success(res){
						console.log('文件数据',res);
						that.fileList=res.result.page.records
					}
				})
			},
			downloadFn(item){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: item.fileName,
					confirmText:'下载',
				    success: function (res) {
				        if (res.confirm) {
							uni.downloadFile({
							    url: that.url_config+'image/'+item.filePath, //仅为示例，并非真实的资源
							    success: (res) => {
									console.log(res)
							        if (res.statusCode === 200) {
										// uni.showToast({
										// 	title:'下载成功'
										// })
										var filePath = res.tempFilePath;
										if (!filePath) return
										uni.openDocument({
											filePath: filePath,
											success: function(res) {
												console.log(res);
												console.log('打开文档成功');
												uni.showToast({
													title:'打开文档成功'
												})
											}
										});
							        }else{
										uni.showToast({
											title:'下载失败'
										})
									}
							    }
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.filePage{
	background-color: white;
	height: 100%;
}
.searchBox{
	background-color: white;
}
.uni-input{
	border-radius: 30rpx;
	margin: 20rpx 20rpx;
	background-color: #f2f2f2;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 40rpx;
	font-size: 28rpx;
	width: 65%;
}
.fileItem{
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 0;
	margin: 0 20rpx;
	color: $uni-text-color;
	border-bottom: 1px solid rgba(221, 221, 221,0.8);
	.left{
		display: flex;
		align-items: center;
	}
	.fileIcon{
		width: 40rpx;
		height: 24rpx;
		margin-right: 20rpx;
	}
	.ellipsis{
		width: 40rpx;
		height: 10rpx;
	}
}
.uni-form-item{
	position: relative;
	.search-icon{
		position: absolute;
		top: 50%;
		right: 50rpx;
		transform: translateY(-50%);
	}
}
.mini-btn{
		position: absolute;
		    right: 6px;
		    top: 0px;
		    border-radius: 30rpx;
		    height: 60rpx;
		    line-height: 60rpx;
	}
</style>