568 lines
13 KiB
Vue
568 lines
13 KiB
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="breadcrumb">
|
|
当前位置:
|
|
<uni-breadcrumb separator="/">
|
|
<uni-breadcrumb-item v-for="(route,index) in breadCrumbList" :key="index"
|
|
:to="clickFilePath(route, index)">
|
|
{{route.name}}
|
|
</uni-breadcrumb-item>
|
|
</uni-breadcrumb>
|
|
</view>
|
|
<view class="searchBox">
|
|
<form @submit="formSubmit">
|
|
<view class="uni-form-item">
|
|
<input class="uni-input" name="searchName" v-model="searchName" @input="searchFile"
|
|
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" @click="clickFileName(item)" v-for="(item,index) in fileList" :key="index">
|
|
<view class="left">
|
|
<image class="fileIcon" :src="setFileImg(item)"></image>
|
|
<text
|
|
class="left_text">{{item.fileName + (!item.isDir && item.extendName !== null ? `.${item.extendName}` : '')}}</text>
|
|
</view>
|
|
<!-- <image v-if="!item.isDir" @click.stop="downloadFn(item)" class="ellipsis"
|
|
src="@/static/ellipsis.png"></image> -->
|
|
<view class="rules-text2" v-if="!item.isDir">
|
|
<text @click="downloadFile(item)">预览</text>
|
|
<text @click.stop="downloadFn(item)">下载</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- <view class="placeholderBox" v-else>
|
|
<image src="/static/noData.png" class="noDataImg"></image>
|
|
<view class="text">
|
|
暂无数据
|
|
</view>
|
|
</view> -->
|
|
<view class="no_data1" v-else>
|
|
<image src="/static/bthgIcon/noData1.png"></image>
|
|
</view>
|
|
<view class="fixed" :class="{show:showIframe}" v-if="show" @click="show=false">
|
|
<view class="iframeMain" @click.stop="show=true">
|
|
<iframe class="iframe" ref="iframe" :src="iframeUrl" frameborder="0"></iframe>
|
|
</view>
|
|
</view>
|
|
<!-- </scroll-view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from '@/components/headers/headers.vue';
|
|
import {
|
|
isVideoLink,
|
|
isImageLink,
|
|
openOutsideFile,
|
|
openLocalFile,
|
|
removeNetWorkFileTemp,
|
|
isJSON
|
|
} from '@/utils/tool.js'
|
|
import fileImg1 from '@/static/ppt.png';
|
|
import fileImg2 from '@/static/excel.png';
|
|
import fileImg3 from '@/static/pdf.png';
|
|
import fileImg4 from '@/static/word.png';
|
|
import dir from '@/static/file/dir.png';
|
|
import file_chm from '@/static/file/file_chm.png';
|
|
import file_css from '@/static/file/file_css.png';
|
|
import file_csv from '@/static/file/file_csv.png';
|
|
import file_rar from '@/static/file/file_rar.png';
|
|
import file_zip from '@/static/file/file_zip.png';
|
|
// import file_mp3 from '@/static/file/file_mp3.png';
|
|
import file_open from '@/static/file/file_open.png';
|
|
import file_rtf from '@/static/file/file_rtf.png';
|
|
import file_txt from '@/static/file/file_txt.png';
|
|
import file_oa from '@/static/file/file_oa.png';
|
|
import file_js from '@/static/file/file_js.png';
|
|
import file_html from '@/static/file/file_html.png';
|
|
import file_sql from '@/static/file/file_sql.png';
|
|
import file_jar from '@/static/file/file_jar.png';
|
|
import file_svg from '@/static/file/file_svg.png';
|
|
import file_gif from '@/static/file/file_gif.png';
|
|
import file_json from '@/static/file/file_json.png';
|
|
import file_exe from '@/static/file/file_exe.png';
|
|
import file_pic from '@/static/file/file_pic.png';
|
|
import file_word from '@/static/file/file_word.png';
|
|
import file_excel from '@/static/file/file_excel.png';
|
|
import file_avi from '@/static/file/file_avi.png';
|
|
import file_video from '@/static/file/file_video.png';
|
|
import file_music from '@/static/file/file_music.png';
|
|
import file_img from '@/static/file/file_img.png';
|
|
import file_dmg from '@/static/file/file_dmg.png';
|
|
import file_ppt from '@/static/file/file_ppt.png';
|
|
import file_pdf from '@/static/file/file_pdf.png';
|
|
import file_unknown from '@/static/file/file_unknown.png';
|
|
|
|
export default {
|
|
components: {
|
|
headers
|
|
},
|
|
data() {
|
|
return {
|
|
searchName: '',
|
|
fileList: [],
|
|
timer: null,
|
|
fileImg1: fileImg1,
|
|
fileImg2: fileImg2,
|
|
fileImg3: fileImg3,
|
|
fileImg4: fileImg4,
|
|
// 可以识别的文件类型
|
|
fileImgTypeList: [
|
|
'png',
|
|
'jpg',
|
|
'jpeg',
|
|
'docx',
|
|
'doc',
|
|
'ppt',
|
|
'pptx',
|
|
'xls',
|
|
'xlsx',
|
|
'avi',
|
|
'mp4',
|
|
'css',
|
|
'csv',
|
|
'chm',
|
|
'rar',
|
|
'zip',
|
|
'dmg',
|
|
'mp3',
|
|
'open',
|
|
'pdf',
|
|
'rtf',
|
|
'txt',
|
|
'oa',
|
|
'js',
|
|
'html',
|
|
'img',
|
|
'sql',
|
|
'jar',
|
|
'svg',
|
|
'gif',
|
|
'json',
|
|
'exe'
|
|
],
|
|
// 文件图片Map映射
|
|
fileImgMap: {
|
|
dir: dir,
|
|
chm: file_chm,
|
|
css: file_css,
|
|
csv: file_csv,
|
|
png:file_pic,
|
|
jpg: file_pic,
|
|
jpeg: file_pic,
|
|
docx: file_word,
|
|
doc: file_word,
|
|
ppt: file_ppt,
|
|
pptx: file_ppt,
|
|
xls: file_excel,
|
|
xlsx: file_excel,
|
|
mp4: file_video,
|
|
avi: file_avi,
|
|
rar: file_rar,
|
|
zip: file_zip,
|
|
dmg: file_dmg,
|
|
mp3: file_music,
|
|
open: file_open,
|
|
pdf: file_pdf,
|
|
rtf: file_rtf,
|
|
txt: file_txt,
|
|
oa: file_oa,
|
|
unknown: file_unknown,
|
|
js: file_js,
|
|
html: file_html,
|
|
img: file_img,
|
|
sql: file_sql,
|
|
jar: file_jar,
|
|
svg: file_svg,
|
|
gif: file_gif,
|
|
json: file_json,
|
|
exe: file_exe
|
|
},
|
|
routes: "/",
|
|
showIframe: false,
|
|
show: false,
|
|
iframeUrl: "",
|
|
};
|
|
},
|
|
mounted() {
|
|
this.loadData()
|
|
},
|
|
onLoad(val) {
|
|
this.routes = val.filePath ? val.filePath : '/';
|
|
// this.initData()
|
|
|
|
},
|
|
computed: {
|
|
// 面包屑导航栏数组
|
|
breadCrumbList: {
|
|
get() {
|
|
let filePath = this.routes;
|
|
let filePathList = filePath ? filePath.split('/') : []
|
|
let res = [] // 返回结果数组
|
|
let _path = [] // 存放祖先路径
|
|
for (let i = 0; i < filePathList.length; i++) {
|
|
if (filePathList[i]) {
|
|
_path.push(filePathList[i] + '/')
|
|
res.push({
|
|
path: _path.join(''),
|
|
name: filePathList[i]
|
|
})
|
|
} else if (i === 0) {
|
|
// 根目录
|
|
filePathList[i] = '/'
|
|
_path.push(filePathList[i])
|
|
res.push({
|
|
path: '/',
|
|
name: '全部文件'
|
|
})
|
|
}
|
|
}
|
|
console.log(1111, res)
|
|
return res
|
|
},
|
|
set() {
|
|
return [{
|
|
path: '/',
|
|
name: '全部文件'
|
|
}]
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
getType(url) {
|
|
if (isImageLink(url)) {
|
|
return "image"
|
|
} else if (isVideoLink(url)) {
|
|
return "video"
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
downloadFile(url) {
|
|
const newUrl = url.fileUrl.includes('http://') ? url.fileUrl : this.url_config + 'image/' + url.fileUrl;
|
|
console.log(url)
|
|
// uni.downloadFile({
|
|
// url: newUrl,
|
|
// success: function(res) {
|
|
// var filePath = res.tempFilePath;
|
|
// uni.openDocument({
|
|
// filePath: filePath,
|
|
// success: function(res) {
|
|
// console.log('打开文档成功');
|
|
// }
|
|
// });
|
|
// }
|
|
// });
|
|
const typeImageList = ['png', 'jpg', 'jpeg'];
|
|
const extendName = url.fileUrl.slice(url.fileUrl.lastIndexOf('.') + 1);
|
|
if (typeImageList.includes(extendName)) {
|
|
uni.previewImage({
|
|
urls: [newUrl]
|
|
})
|
|
} else{
|
|
//#ifdef H5
|
|
uni.showToast({
|
|
title: '暂不支持预览！',
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
return;
|
|
//#endif
|
|
uni.downloadFile({
|
|
url: newUrl,
|
|
success: function (res) {
|
|
var filePath = res.tempFilePath;
|
|
uni.openDocument({
|
|
filePath: filePath,
|
|
success: function (res) {
|
|
console.log('打开文档成功');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
clickFilePath(row, index) {
|
|
console.log(row)
|
|
if (index == this.breadCrumbList.length - 1) return ''
|
|
if (row.path == '/') {
|
|
// uni.redirectTo({
|
|
// url:`../fileManage/fileManage`,
|
|
// })
|
|
return `../fileManage/fileManage`
|
|
}
|
|
return `../fileManage/fileManage?filePath=${row.path}`;
|
|
},
|
|
// 点击文件名
|
|
clickFileName(row) {
|
|
// 若是目录则进入目录
|
|
if (row.isDir) {
|
|
uni.redirectTo({
|
|
url: `../fileManage/fileManage?filePath=${row.filePath + row.fileName + '/'}`,
|
|
})
|
|
}
|
|
},
|
|
// 根据文件扩展名设置文件图片
|
|
setFileImg(row) {
|
|
if (!row.extendName) {
|
|
// 文件夹
|
|
return this.fileImgMap.dir
|
|
} else if (!this.fileImgTypeList.includes(row.extendName)) {
|
|
// 无法识别文件类型的文件
|
|
return this.fileImgMap.unknown
|
|
} else if (this.fileType !== 6 && ['jpg', 'png', 'jpeg', 'gif'].includes(row.extendName)) {
|
|
// 图片类型，直接显示缩略图
|
|
return this.url_config + 'image/' + row.fileUrl
|
|
} else {
|
|
// 可以识别文件类型的文件
|
|
return this.fileImgMap[row.extendName]
|
|
}
|
|
},
|
|
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,
|
|
projectSn: JSON.parse(uni.getStorageSync('userInfo')).sn,
|
|
filePath: this.routes,
|
|
}
|
|
// 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
|
|
// xmgl/companyFile/list
|
|
this.sendRequest({
|
|
url: "xmgl/projectFile/list",
|
|
data: json,
|
|
method: "POST",
|
|
success(res) {
|
|
console.log('文件数据', res);
|
|
that.fileList = res.result
|
|
}
|
|
})
|
|
},
|
|
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.fileUrl, //仅为示例，并非真实的资源
|
|
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>
|
|
.fixed {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, .3);
|
|
display: none;
|
|
|
|
&.show {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
.iframeMain {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 650rpx;
|
|
font-size: 0;
|
|
|
|
.iframe {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
}
|
|
}
|
|
|
|
.rules-text2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// color: #5181F6;
|
|
color: #3190F3;
|
|
font-size: 28rpx;
|
|
white-space: nowrap;
|
|
|
|
>text:first-child {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 8rpx 20rpx 0 20rpx;
|
|
|
|
:deep(.uni-breadcrumb ){
|
|
margin-left: 10rpx;
|
|
}
|
|
:deep(.uni-breadcrumb-item) {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.filePage {
|
|
background-color: white;
|
|
height: 100%;
|
|
}
|
|
|
|
.searchBox {
|
|
background-color: white;
|
|
}
|
|
|
|
.uni-input {
|
|
border-radius: 40rpx;
|
|
margin: 20rpx;
|
|
// background-color: #f7f8fa;
|
|
border: 1px solid #F3F4FE;
|
|
height: 70rpx;
|
|
line-height: 60rpx;
|
|
padding: 0 40rpx;
|
|
font-size: 28rpx;
|
|
// width: 70%;
|
|
}
|
|
|
|
.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;
|
|
width: 70%;
|
|
|
|
.left_text {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.fileIcon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
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 {
|
|
// width: 120rpx;
|
|
font-size: 28rpx;
|
|
position: absolute;
|
|
right: 12rpx;
|
|
top: 50%;
|
|
border-radius: 30rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
</style> |