<template>
|
<view class="container">
|
|
<view class="content-wrapper">
|
<!-- 顶部标题栏 -->
|
<view class="header">
|
<text class="title">文件管理</text>
|
<button class="refresh-btn" @click="fetchFiles">刷新列表</button>
|
</view>
|
|
<!-- 文件列表 -->
|
<scroll-view class="file-list" scroll-y>
|
<view v-for="(file, index) in files" :key="index" class="file-item">
|
<!-- 文件图标 -->
|
<view class="file-icon">
|
<image
|
v-if="isFile(file)"
|
:src="getFileIcon(file)"
|
mode="aspectFit"
|
class="icon-img"
|
/></image>
|
<text v-else class="icon-font">{{ getFileIcon(file) }}</text>
|
</view>
|
|
<!-- 文件信息 -->
|
<view class="file-info">
|
<text class="file-name">{{ getShortName(file) }}</text>
|
<!-- <text class="file-size">{{ getFileSize(0) }} KB</text> --> <!-- 需要实际文件大小数据 -->
|
</view>
|
|
<!-- 操作按钮 -->
|
<button class="open-btn" @click="handleFile(file)">打开</button>
|
</view>
|
|
<view v-if="files.length === 0" class="empty-tips">
|
<text>暂无文件，请点击刷新</text>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
|
<script>
|
export default {
|
data() {
|
return {
|
itemno :'',
|
files: [],
|
filePreview: {},
|
localFilePath: ''
|
};
|
},
|
methods: {
|
// 获取文件图标（根据后缀）
|
getFileIcon(fileName) {
|
const ext = fileName.split('.').pop().toLowerCase();
|
const iconMap = {
|
// 图片文件
|
jpg: '/static/icons/img.png',
|
jpeg: '/static/icons/img.png',
|
png: '/static/icons/img.png',
|
gif: '/static/icons/img.png',
|
|
// 文档文件
|
pdf: '/static/icons/pdf.png',
|
doc: '/static/icons/word.png',
|
docx: '/static/icons/word.png',
|
xls: '/static/icons/excel.png',
|
xlsx: '/static/icons/excel.png',
|
txt: '/static/icons/txt.png',
|
|
// 默认图标
|
default: '📁'
|
};
|
return iconMap[ext] || iconMap.default;
|
|
},
|
// 缩短文件名显示
|
getShortName(name) {
|
return name.length > 15 ? name.substring(0, 12) + '...' : name;
|
},
|
async fetchFiles() {
|
try {
|
const response = await this.$post({
|
url: "/SJ/ftpList",
|
data: {
|
itemno: this.itemno
|
}
|
});
|
|
//console.log(response.data);
|
|
if (response.status === 0 && response.data.tbBillList != "") {
|
this.files = response.data.tbBillList;
|
this.$showMessage("获取成功");
|
} else {
|
this.$showMessage("获取文件列表失败");
|
}
|
} catch (error) {
|
this.$showMessage("获取文件列表失败:", error);
|
}
|
},
|
|
|
async handleFile(fileName) {
|
|
console.log(fileName);
|
|
try {
|
const response = await this.$post({
|
url: "/SJ/download",
|
data: {
|
itemno: this.itemno,
|
fileName: fileName
|
}
|
});
|
|
// if (this.isFileExists(response)) {
|
// this.previewFile(response, fileName)
|
// } else {
|
this.downloadFile(fileName);
|
//}
|
} catch (error) {
|
console.error("获取文件列表失败:", error);
|
}
|
|
},
|
isFileExists(localPath) {
|
try {
|
const fs = uni.getFileSystemManager();
|
return fs.accessSync(localPath);
|
} catch (e) {
|
return false;
|
}
|
|
|
},
|
|
isFile(fileName) {
|
return fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png') || fileName.endsWith('.gif') || fileName.endsWith('.pdf') || fileName.endsWith('.doc') || fileName.endsWith('.docx') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')|| fileName.endsWith('.txt');
|
},
|
previewImage(localPath) {
|
uni.previewImage({
|
urls: [localPath]
|
});
|
},
|
// 文件类型映射
|
getFileType(fileName) {
|
const ext = fileName.split('.').pop().toLowerCase();
|
const typeMap = {
|
xlsx: 'excel',
|
xls: 'excel',
|
doc: 'word',
|
docx: 'word',
|
pdf: 'pdf',
|
txt: 'text'
|
};
|
return typeMap[ext] || '';
|
},
|
async downloadFile(fileName) {
|
|
|
|
try {
|
const response = await this.$post({
|
url: "/SJ/download",
|
data: {
|
itemno: this.itemno,
|
fileName: fileName
|
}
|
});
|
|
console.log(response.data.url);
|
|
if (response.status === 0) {
|
const { tempFilePath } = await new Promise((resolve, reject) => {
|
uni.downloadFile({
|
url: response.data.url,
|
success: resolve,
|
fail: reject
|
});
|
});
|
|
console.log(tempFilePath);
|
|
|
uni.openDocument({
|
filePath: tempFilePath
|
})
|
|
}
|
} catch (error) {
|
console.error('下载失败:', error);
|
uni.showToast({
|
title: `下载失败: ${error.message || '未知错误'}`,
|
icon: 'none'
|
});
|
}
|
},
|
},
|
onLoad(options) {
|
//options中包含了url附带的参数
|
let params = options;
|
|
this.itemno = params["itemno"];
|
|
this.fetchFiles();
|
}
|
|
};
|
</script>
|
|
<style>
|
/* 全局样式 padding: 20rpx; */
|
.container {
|
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
/* 新增内容容器 */
|
.content-wrapper {
|
padding: 20rpx;
|
height: 100vh; /* 确保高度填满 */
|
box-sizing: border-box; /* 重要：padding 不增加实际高度 */
|
}
|
|
/* 顶部标题栏 */
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
}
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.refresh-btn {
|
background-color: #4a90e2;
|
color: white;
|
font-size: 24rpx;
|
padding: 10rpx 20rpx;
|
border-radius: 40rpx;
|
}
|
|
/* 文件列表样式 */
|
.file-list {
|
height: calc(100vh - 190rpx);
|
}
|
|
.file-item {
|
display: flex;
|
align-items: center;
|
background: white;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
border-radius: 12rpx;
|
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
|
}
|
|
.file-icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-right: 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.icon-img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.icon-font {
|
font-size: 50rpx;
|
}
|
|
.file-info {
|
flex: 1;
|
}
|
|
.file-name {
|
display: block;
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.file-size {
|
font-size: 22rpx;
|
color: #999;
|
}
|
|
.open-btn {
|
background-color: #4a90e2;
|
color: white;
|
font-size: 24rpx;
|
padding: 8rpx 20rpx;
|
border-radius: 40rpx;
|
margin-left: 20rpx;
|
}
|
|
.empty-tips {
|
text-align: center;
|
padding: 40rpx;
|
color: #999;
|
font-size: 28rpx;
|
}
|
</style>
|
