381 lines
9.6 KiB
Vue
381 lines
9.6 KiB
Vue
<template>
|
||
<view class="fileItem" @click="fileClick" @longpress.stop="longpress">
|
||
<view class="icon">
|
||
<image class="iconImg" :src="icon" mode="aspectFit" />
|
||
</view>
|
||
<view class="fileInfo">
|
||
<text
|
||
class="fileName"
|
||
:style="{
|
||
color: item.type == 'back' ? '#999' : '#333',
|
||
}"
|
||
>
|
||
{{ item.name }}
|
||
</text>
|
||
<view v-if="item.type != 'back'" class="fileMeta">
|
||
<text class="textItem">{{ item.date }}</text>
|
||
<text v-if="item.type == 'file'" class="textItem">
|
||
{{ item.sizeText }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import appDelDir from '../libs/appDelDir'
|
||
|
||
export default {
|
||
props: {
|
||
/**
|
||
* 当前文件路径类型
|
||
*/
|
||
dirType: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
/**
|
||
* 文件路径列表
|
||
*/
|
||
dirList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
/**
|
||
* 单个列表对象
|
||
*/
|
||
item: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
type: '', // 对象类型 dir back file
|
||
name: '',
|
||
fileType: '', // 文件后缀名称
|
||
size: '', // 文件大小
|
||
icon: '', //图标
|
||
time: '', // 最后更改日期
|
||
date: '',
|
||
fileCount: 0, //文件夹下的文件数量
|
||
directoryCount: 0, //文件夹下的目录数量
|
||
}
|
||
},
|
||
},
|
||
},
|
||
computed: {
|
||
icon() {
|
||
// #ifdef APP-PLUS
|
||
// IOS端直接访问本地图片会报跨域，所以仅支持安卓预览图片
|
||
if (
|
||
uni.getSystemInfoSync().platform == 'android' &&
|
||
this.item.type == 'file' &&
|
||
['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].indexOf(this.item.fileType) > -1
|
||
) {
|
||
let path = this.getPath()
|
||
return path
|
||
}
|
||
// #endif
|
||
return this.item.icon
|
||
},
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 点击事件
|
||
*/
|
||
fileClick() {
|
||
let that = this
|
||
if (this.item.type == 'dir') {
|
||
this.$emit('goChildDir', this.item.name)
|
||
} else if (this.item.type == 'back') {
|
||
this.$emit('goChildDir', '__back__')
|
||
} else {
|
||
if (
|
||
//? 使用文本编辑器快捷打开文件
|
||
['txt', 'sql', 'js', 'css', 'html', 'log', 'json'].indexOf(this.item.fileType) != -1
|
||
) {
|
||
this.openInEdit()
|
||
} else if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].indexOf(this.item.fileType) != -1) {
|
||
let path = that.getPath()
|
||
uni.previewImage({
|
||
urls: [path],
|
||
})
|
||
} else {
|
||
this.longpress()
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 使用文本编辑器打开
|
||
*/
|
||
openInEdit() {
|
||
let that = this
|
||
let path = that.getPath()
|
||
that.$emit('openEditFileDialog', {
|
||
title: that.item.name,
|
||
canSave: that.dirType != 'PRIVATE_WWW',
|
||
path,
|
||
size: that.item.size,
|
||
})
|
||
},
|
||
/**
|
||
* 获取当前文件绝对路径
|
||
*/
|
||
getPath() {
|
||
let that = this
|
||
let path = ''
|
||
switch (that.dirType) {
|
||
case 'wx':
|
||
path = wx.env.USER_DATA_PATH
|
||
break
|
||
case 'PRIVATE_DOC':
|
||
path = '_doc'
|
||
break
|
||
case 'PRIVATE_WWW':
|
||
path = '_www'
|
||
break
|
||
case 'PUBLIC_DOCUMENTS':
|
||
path = '_documents'
|
||
break
|
||
case 'PUBLIC_DOWNLOADS':
|
||
path = '_downloads'
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
that.dirList.map((x) => {
|
||
path += '/' + x
|
||
})
|
||
path = path + '/' + that.item.name
|
||
return path
|
||
},
|
||
/**
|
||
* 长按事件
|
||
*/
|
||
longpress() {
|
||
let that = this
|
||
let path = that.getPath()
|
||
|
||
let menu = [
|
||
{
|
||
text: `复制绝对路径`,
|
||
click() {
|
||
// #ifdef APP-PLUS
|
||
path = plus.io.convertLocalFileSystemURL(path)
|
||
// #endif
|
||
uni.setClipboardData({
|
||
data: path,
|
||
})
|
||
},
|
||
},
|
||
{
|
||
text: `删除`,
|
||
click() {
|
||
uni.showModal({
|
||
title: '警告',
|
||
content:
|
||
'是否确认删除' +
|
||
(that.item.type == 'dir' ? '文件夹:' : '文件:') +
|
||
that.item.name +
|
||
'?',
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
title: '删除中',
|
||
})
|
||
|
||
function delSuccess() {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '删除成功！',
|
||
icon: 'success',
|
||
})
|
||
that.$emit('getPage')
|
||
}
|
||
function delError() {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '删除失败',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (1) {
|
||
let fs = wx.getFileSystemManager()
|
||
|
||
if (that.item.type == 'file') {
|
||
// ! 删除文件
|
||
fs.unlink({
|
||
filePath: path,
|
||
success: delSuccess,
|
||
fail: delError,
|
||
})
|
||
} else {
|
||
// ! 删除文件夹
|
||
fs.rmdir({
|
||
dirPath: path,
|
||
recursive: true,
|
||
success: delSuccess,
|
||
fail: delError,
|
||
})
|
||
}
|
||
|
||
return
|
||
}
|
||
// #endif
|
||
|
||
if (that.item.type == 'file') {
|
||
// ! 删除文件
|
||
plus.io.resolveLocalFileSystemURL(
|
||
path,
|
||
(entry) => {
|
||
// 可通过entry对象操作test.html文件
|
||
entry.remove(delSuccess, delError)
|
||
},
|
||
delError,
|
||
)
|
||
} else {
|
||
// ! 删除文件夹
|
||
appDelDir(path + '/')
|
||
.then(delSuccess)
|
||
.catch(delError)
|
||
}
|
||
}
|
||
},
|
||
})
|
||
},
|
||
},
|
||
]
|
||
|
||
let isMp = false
|
||
// #ifdef MP-WEIXIN
|
||
isMp = true
|
||
// #endif
|
||
|
||
if (!isMp || that.item.type != 'dir') {
|
||
menu.push({
|
||
text: '重命名',
|
||
click() {
|
||
that.$emit('editDirName', {
|
||
isDir: that.item.type == 'dir',
|
||
isEdit: true,
|
||
name: that.item.name,
|
||
})
|
||
},
|
||
})
|
||
}
|
||
|
||
// #ifdef APP-PLUS
|
||
if (that.item.type == 'file') {
|
||
menu.push({
|
||
text: '调用外部程序打开此文件',
|
||
click() {
|
||
plus.runtime.openFile(path, null, (e) => {
|
||
uni.showToast({
|
||
title: '文档打开失败！' + e.message,
|
||
icon: 'none',
|
||
})
|
||
})
|
||
},
|
||
})
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].indexOf(that.item.fileType) != -1) {
|
||
menu.unshift({
|
||
text: '打开该文档',
|
||
click() {
|
||
let path = that.getPath()
|
||
uni.openDocument({
|
||
filePath: path,
|
||
fail() {
|
||
uni.showToast({
|
||
title: '文档打开失败！',
|
||
icon: 'none',
|
||
})
|
||
},
|
||
})
|
||
},
|
||
})
|
||
}
|
||
// #endif
|
||
|
||
if (that.item.type == 'file') {
|
||
menu.unshift({
|
||
text: `用文本编辑器打开`,
|
||
click() {
|
||
that.openInEdit()
|
||
},
|
||
})
|
||
}
|
||
|
||
uni.showActionSheet({
|
||
itemList: menu.map((x) => x.text),
|
||
success({ tapIndex }) {
|
||
menu[tapIndex].click()
|
||
},
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.fileItem {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0rpx 20rpx;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
width: 750rpx;
|
||
/* #ifndef APP-PLUS */
|
||
min-height: 70rpx;
|
||
/* #endif */
|
||
&:active {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
.icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
.iconImg {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.fileInfo {
|
||
margin-left: 10rpx;
|
||
width: 650rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.fileName {
|
||
width: 650rpx;
|
||
lines: 1;
|
||
overflow: hidden;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
line-height: 28rpx;
|
||
}
|
||
.fileMeta {
|
||
margin-top: 5rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
width: 650rpx;
|
||
.textItem {
|
||
margin-right: 20rpx;
|
||
font-size: 20rpx;
|
||
line-height: 26rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|