feat: 角色创建与赋权、文件管理单页多级目录与上传可下载、api上传目录可写卷
Made-with: Cursor
This commit is contained in:
223
admin/src/views/files/FileManage.vue
Normal file
223
admin/src/views/files/FileManage.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="file-manage">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>文件管理</span>
|
||||
</template>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="图片与图标" name="images">
|
||||
<p class="tip">图片与图标统一在此管理，支持可下载/不可下载。功能开发中。</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="功能模块" name="module">
|
||||
<div class="module-toolbar">
|
||||
<el-select v-model="siteId" placeholder="选择站点" filterable style="width: 220px; margin-right: 12px" @change="onSiteChange">
|
||||
<el-option v-for="s in sites" :key="s.id" :label="s.name" :value="s.id" />
|
||||
</el-select>
|
||||
<el-button :disabled="!siteId" @click="showNewFolder = true">新建文件夹</el-button>
|
||||
<el-upload :show-file-list="false" :disabled="!siteId" :before-upload="beforeUpload">
|
||||
<el-button type="primary" :disabled="!siteId" :loading="uploading">上传文件</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-alert v-if="!siteId" title="请先选择站点" type="info" style="margin: 12px 0" />
|
||||
|
||||
<template v-else>
|
||||
<div class="breadcrumb-wrap">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item @click="currentPath = ''"><a href="javascript:;">根目录</a></el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="(p, i) in pathParts" :key="i">
|
||||
<a href="javascript:;" @click="currentPath = pathParts.slice(0, i + 1).join('/')">{{ p }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="subdirs" v-if="subDirs && subDirs.length">
|
||||
<span class="label">子目录：</span>
|
||||
<el-button v-for="d in subDirs" :key="d" link type="primary" @click="enterDir(d)">{{ d }}/</el-button>
|
||||
</div>
|
||||
<el-table :data="list" v-loading="loading" stripe style="margin-top: 12px">
|
||||
<el-table-column label="文件名" prop="name" min-width="180" />
|
||||
<el-table-column label="存储路径" prop="file_path" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="可下载" width="80">
|
||||
<template #default="{ row }">{{ row.downloadable ? '是' : '否' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="大小" width="100">
|
||||
<template #default="{ row }">{{ formatSize(row.size) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="上传时间" prop="created_at" width="180" />
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-empty v-if="!loading && list.length === 0 && (!subDirs || !subDirs.length)" description="当前目录为空，可上传文件或新建文件夹" />
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<!-- 上传前选择是否可下载 -->
|
||||
<el-dialog v-model="uploadDialogVisible" title="上传文件" width="400px" :close-on-click-modal="false">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="当前目录">
|
||||
<span>{{ currentPath || '根目录' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许下载">
|
||||
<el-switch v-model="uploadDownloadable" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="uploading" @click="doUpload">确定上传</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新建文件夹 -->
|
||||
<el-dialog v-model="showNewFolder" title="新建文件夹" width="400px">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="目录名">
|
||||
<el-input v-model="newFolderName" placeholder="当前目录下新建，可填多级如 a/b" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showNewFolder = false">取消</el-button>
|
||||
<el-button type="primary" @click="createFolder">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getSites, getSiteAssets, uploadSiteAsset, deleteSiteAsset, createSiteFolder } from '../../api/admin'
|
||||
|
||||
const activeTab = ref('module')
|
||||
const siteId = ref('')
|
||||
const sites = ref([])
|
||||
const list = ref([])
|
||||
const subDirs = ref([])
|
||||
const loading = ref(false)
|
||||
const currentPath = ref('')
|
||||
const uploading = ref(false)
|
||||
const uploadDialogVisible = ref(false)
|
||||
const uploadDownloadable = ref(true)
|
||||
const pendingFile = ref(null)
|
||||
const showNewFolder = ref(false)
|
||||
const newFolderName = ref('')
|
||||
|
||||
const pathParts = computed(() => {
|
||||
const p = currentPath.value
|
||||
if (!p) return []
|
||||
return p.split('/').filter(Boolean)
|
||||
})
|
||||
|
||||
const fetchSites = async () => {
|
||||
try {
|
||||
const res = await getSites()
|
||||
sites.value = res.list || []
|
||||
if (sites.value.length && !siteId.value) siteId.value = sites.value[0].id
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchList = async () => {
|
||||
if (!siteId.value) {
|
||||
list.value = []
|
||||
subDirs.value = []
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getSiteAssets(siteId.value, currentPath.value || undefined)
|
||||
list.value = res.list || []
|
||||
subDirs.value = res.sub_dirs || []
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onSiteChange = () => {
|
||||
currentPath.value = ''
|
||||
fetchList()
|
||||
}
|
||||
|
||||
const enterDir = (name) => {
|
||||
currentPath.value = currentPath.value ? currentPath.value + '/' + name : name
|
||||
}
|
||||
|
||||
watch([siteId, currentPath], fetchList)
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
pendingFile.value = file
|
||||
uploadDownloadable.value = true
|
||||
uploadDialogVisible.value = true
|
||||
return false
|
||||
}
|
||||
|
||||
const doUpload = async () => {
|
||||
if (!pendingFile.value || !siteId.value) return
|
||||
uploading.value = true
|
||||
try {
|
||||
await uploadSiteAsset(siteId.value, pendingFile.value, {
|
||||
folder: currentPath.value || undefined,
|
||||
downloadable: uploadDownloadable.value
|
||||
})
|
||||
ElMessage.success('上传成功')
|
||||
uploadDialogVisible.value = false
|
||||
pendingFile.value = null
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.error || e.message || '上传失败')
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const createFolder = async () => {
|
||||
const name = (newFolderName.value || '').trim()
|
||||
if (!name) {
|
||||
ElMessage.warning('请输入目录名')
|
||||
return
|
||||
}
|
||||
const fullPath = currentPath.value ? currentPath.value + '/' + name : name
|
||||
try {
|
||||
await createSiteFolder(siteId.value, fullPath)
|
||||
ElMessage.success('创建成功')
|
||||
showNewFolder.value = false
|
||||
newFolderName.value = ''
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.error || e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (row) => {
|
||||
await ElMessageBox.confirm('确定删除该文件？', '提示', { type: 'warning' })
|
||||
try {
|
||||
await deleteSiteAsset(siteId.value, row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.error || e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const formatSize = (bytes) => {
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
onMounted(() => fetchSites().then(() => fetchList()))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-manage .tip { color: #666; font-size: 14px; }
|
||||
.module-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
||||
.breadcrumb-wrap { margin-top: 12px; }
|
||||
.subdirs { margin-top: 8px; font-size: 13px; color: #666; }
|
||||
.subdirs .label { margin-right: 8px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user