Skip to content

Z
zxn-adputin
Commit b71750aa authored by jiyonggang's avatar jiyonggang
Browse files
Options

添加上传资源页面

parent 2cfb099a
Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 75 deletions
src/api/report.js
View file @ b71750aa
......@@ -497,5 +497,56 @@ export function fetchConversionAction(data) {
export function getMaterialDirectoriesTree() {
return request({
url: 'http://localhost:8567/material/business/youtube/directories/tree',
// url: 'https://putinapi.zhangxindiet.com/material/business/youtube/directories/tree',
method: 'get',
})
}
export function getDirectoryById(params) {
return request({
url: 'http://localhost:8567/material/business/youtube/getDirectoryById',
// url: 'https://putinapi.zhangxindiet.com/business/youtube/getDirectoryById',
method: 'get',
params
})
}
export function createDirectory(params) {
return request({
url: 'http://localhost:8567/material/business/youtube/createdirectories',
// url: 'https://putinapi.zhangxindiet.com/business/youtube/createdirectories',
method: 'get',
params
})
}
export function updateDirectory() {
return request({
url: 'http://localhost:8567/business/youtube/updateDirectory',
// url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
method: 'get',
})
}
export function getCount() {
return request({
url: 'http://localhost:8567/material/count',
// url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
method: 'get',
})
}
export function deleteDirectory() {
return request({
url: 'http://localhost:8567/business/youtube/deleteDirectory',
// url: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
method: 'get',
})
}
// ----------------------------------------
src/views/createMaterial/AdMaterialManager.vue
View file @ b71750aa
......@@ -75,12 +75,12 @@
<template slot-scope="scope">
<div class="preview-container">
<img
v-if="scope.row.type === 'image'"
v-if="scope.row.resType === 1"
:src="scope.row.url"
class="preview-image"
>
<video
v-else-if="scope.row.type === 'video'"
v-else-if="scope.row.resType === 2"
:src="scope.row.url"
class="preview-video"
controls
......@@ -89,22 +89,23 @@
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="文件名"></el-table-column>
<el-table-column prop="type" label="类型" width="100">
<el-table-column prop="materialName" label="文件名"></el-table-column>
<el-table-column prop="resType" label="类型" width="100">
<template slot-scope="scope">
{{ scope.row.type === 'image' ? '图片' : '视频' }}
{{ scope.row.resType === 1 ? '图片' : scope.row.resType === 2 ? '视频' : '' }}
</template>
</el-table-column>
<el-table-column prop="size" label="大小" width="100">
<!-- <el-table-column prop="size" label="大小" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ formatFileSize(scope.row.size) }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column prop="createdAt" label="上传时间" width="180">
<template slot-scope="scope">
{{ formatFileSize(scope.row.size) }}
</template>
</el-table-column>
<el-table-column prop="createTime" label="上传时间" width="180">
<template slot-scope="scope">
{{ formatDate(scope.row.createTime) }}
{{ formatDate(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="realName" label="创作者"></el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
......@@ -190,7 +191,14 @@
</template>
<script>
import { MockService } from './mockService'
import {
getMaterialDirectoriesTree,
getDirectoryById,
createDirectory,
updateDirectory,
deleteDirectory
} from '@/api/report';
export default {
name: 'AdMaterialManager',
......@@ -198,7 +206,6 @@ export default {
return {
// 目录树数据
directories: [],
mockService: null,
defaultProps: {
children: 'children',
label: 'name'
......@@ -239,28 +246,31 @@ export default {
},
created() {
this.mockService = new MockService()
this.fetchDirectories()
},
methods: {
// 获取目录树数据
async fetchDirectories() {
try {
const directories = await this.mockService.getDirectories()
this.directories = directories
} catch (error) {
this.$message.error('获取目录失败')
console.error('获取目录失败:', error)
}
},
fetchDirectories(){
getMaterialDirectoriesTree().then(res => {
if (res.status === 200) {
this.directories= res.result.data
}else {
this.$message.error('获取目录失败')
}
});
},
// 获取当前目录下的文件
async fetchMaterials(directoryId) {
this.loading = true
try {
const materials = await this.mockService.getMaterials(directoryId)
this.materials = materials
const response = await this.request({
url: '/api/materials',
method: 'get',
params: { directoryId }
})
this.materials = response.data
} catch (error) {
this.$message.error('获取文件列表失败')
console.error('获取文件列表失败:', error)
......@@ -273,9 +283,35 @@ export default {
handleNodeClick(data) {
this.currentDirectory = data.id
this.currentPath = this.getNodePath(data)
this.fetchMaterials(data.id)
this.fetchMaterialsByDirectoryId(data.id);
},
fetchMaterialsByDirectoryId(directoryId) {
this.loading = true;
getDirectoryById({
directoryId: directoryId,
pageNum: 1,
pageSize: 10,
includeSubdirectories: true
})
.then(response => {
if (response && response.status === 200) {
this.materials = response.result.data;
} else {
this.$message.error(response.msg || '获取素材列表失败');
console.error('获取素材列表失败:', response);
}
})
.catch(error => {
this.$message.error('获取素材列表失败');
console.error('获取素材列表失败:', error);
})
.finally(() => {
this.loading = false;
});
},
// 获取节点路径
getNodePath(node) {
const path = []
......@@ -296,23 +332,28 @@ export default {
},
// 创建目录
async createDirectory() {
this.$refs.newDirForm.validate(async (valid) => {
createDirectory() {
this.$refs.newDirForm.validate((valid) => {
if (valid) {
try {
await this.mockService.createDirectory({
name: this.newDirForm.name,
parentId: this.newDirForm.parentId
createDirectory({
name: this.newDirForm.name,
parentId: this.newDirForm.parentId
})
.then(response => {
if (response && response.status === 200 && response.result && response.result.data) {
this.$message.success('创建成功');
this.newDirDialogVisible = false;
this.fetchDirectories();
} else {
this.$message.error(response.msg || '创建失败');
}
})
this.$message.success('创建成功')
this.newDirDialogVisible = false
await this.fetchDirectories() // 重新获取目录树
} catch (error) {
this.$message.error('创建失败')
console.error('创建目录失败:', error)
}
.catch(error => {
this.$message.error('创建失败');
console.error('创建目录失败:', error);
});
}
})
});
},
// 删除目录
......@@ -321,20 +362,24 @@ export default {
type: 'warning'
}).then(async () => {
try {
await this.mockService.deleteDirectory(data.id)
this.$message.success('删除成功')
await this.fetchDirectories() // 重新获取目录树
// 如果删除的是当前选中的目录，清空文件列表
if (data.id === this.currentDirectory) {
this.materials = []
this.currentDirectory = null
this.currentPath = '根目录'
const response = await deleteDirectory(data.id);
if (response.code === 0) { // Assuming your API uses a code for success/failure
this.$message.success('删除成功');
await this.fetchDirectories(); // 重新获取目录树
// 如果删除的是当前选中的目录，清空文件列表
if (data.id === this.currentDirectory) {
this.materials = [];
this.currentDirectory = null;
this.currentPath = '根目录';
}
} else {
this.$message.error(response.message || '删除失败');
}
} catch (error) {
this.$message.error('删除失败')
console.error('删除目录失败:', error)
this.$message.error('删除失败');
console.error('删除目录失败:', error);
}
}).catch(() => {})
}).catch(() => { });
},
// 上传前验证
......@@ -356,17 +401,12 @@ export default {
// 处理上传成功
async handleUploadSuccess(response, file, fileList) {
try {
const result = await this.mockService.uploadFile(file.raw, this.currentDirectory)
if (result.code === 0) {
this.$message.success('上传成功')
await this.fetchMaterials(this.currentDirectory) // 重新获取文件列表
} else {
this.$message.error(result.message || '上传失败')
}
} catch (error) {
this.$message.error('上传失败')
console.error('上传文件失败:', error)
// Assuming your upload API returns the uploaded file data on success
if (response.code === 0) { // Check for success code from your API
this.$message.success('上传成功')
await this.fetchMaterials(this.currentDirectory) // 重新获取文件列表
} else {
this.$message.error(response.message || '上传失败')
}
},
......@@ -396,13 +436,21 @@ export default {
}
try {
await this.mockService.moveFile(
this.currentMoveFile.id,
this.selectedMoveDirectory
)
this.$message.success('移动成功')
this.moveDialogVisible = false
await this.fetchMaterials(this.currentDirectory) // 重新获取当前目录的文件列表
const response = await this.request({
url: '/api/materials/move',
method: 'post',
data: {
fileId: this.currentMoveFile.id,
targetDirectoryId: this.selectedMoveDirectory
}
});
if (response.code === 0) {
this.$message.success('移动成功')
this.moveDialogVisible = false
await this.fetchMaterials(this.currentDirectory) // 重新获取当前目录的文件列表
} else {
this.$message.error(response.message || '移动失败')
}
} catch (error) {
this.$message.error('移动失败')
console.error('移动文件失败:', error)
......@@ -415,14 +463,22 @@ export default {
type: 'warning'
}).then(async () => {
try {
await this.mockService.deleteFile(file.id)
this.$message.success('删除成功')
await this.fetchMaterials(this.currentDirectory) // 重新获取文件列表
const response = await this.request({
url: '/api/materials/delete',
method: 'post',
params: { fileId: file.id }
});
if (response.code === 0) {
this.$message.success('删除成功')
await this.fetchMaterials(this.currentDirectory) // 重新获取文件列表
} else {
this.$message.error(response.message || '删除失败')
}
} catch (error) {
this.$message.error('删除失败')
console.error('删除文件失败:', error)
}
}).catch(() => {})
}).catch(() => { })
},
// 预览文件
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment