Skip to content

Z
zxn-adputin
Commit 121417bf authored by lijin's avatar lijin
Browse files
Options

完善素材组管理

parent 83007dea
Show whitespace changes
Inline Side-by-side
Showing with 91 additions and 185 deletions
src/components/FileUpload/index.vue
View file @ 121417bf
<template>
<div class="upload-container">
<!-- 文件上传区域 -->
<el-upload
ref="upload"
class="upload-area"
......@@ -16,6 +17,27 @@
<div class="el-upload__tip" slot="tip">只能上传图片和视频文件，且不超过500M</div>
</el-upload>
<!-- 文件夹上传 -->
<div class="folder-upload">
<input
type="file"
ref="folderInput"
@change="handleFolderSelect"
style="display: none"
webkitdirectory
multiple
/>
<el-button
type="primary"
plain
icon="el-icon-folder-opened"
@click="triggerFolderSelect"
style="margin-top: 10px;"
>
选择文件夹上传
</el-button>
</div>
<div class="preview-list" v-if="fileList.length > 0">
<div v-for="(file, index) in fileList"
:key="index"
......@@ -108,18 +130,44 @@ export default {
this.successFiles = []
},
// 处理文件变化
handleFileChange(file) {
this.addFileToQueue(file.raw)
},
// 触发文件夹选择
triggerFolderSelect() {
this.$refs.folderInput.click()
},
// 处理文件夹选择
handleFolderSelect(event) {
const files = event.target.files
for (let i = 0; i < files.length; i++) {
const file = files[i]
// 检查文件类型
if (file.type.includes('image') || file.type.includes('video')) {
this.addFileToQueue(file)
}
}
// 清空input，以便可以重复选择同一个文件夹
event.target.value = ''
},
// 添加文件到队列
addFileToQueue(rawFile) {
const fileObj = {
raw: file.raw,
name: file.name,
type: file.raw.type,
url: URL.createObjectURL(file.raw),
raw: rawFile,
name: rawFile.name,
type: rawFile.type,
url: URL.createObjectURL(rawFile),
status: 'waiting',
progress: 0,
displayProgress: 0,
errorMessage: '',
progressTimer: null,
size: file.raw.size
size: rawFile.size,
path: rawFile.webkitRelativePath || rawFile.name // 保存文件路径
}
this.fileList.push(fileObj)
......
src/components/MaterialTagSelect/index.vue
View file @ 121417bf
......@@ -62,7 +62,8 @@ export default {
label: 'name',
children: 'children',
emitPath: true, // 返回完整路径
leaf: 'isLeaf'
leaf: 'isLeaf',
expandTrigger: 'hover'
},
tagData: []
}
......
src/router/index.js
View file @ 121417bf
......@@ -163,6 +163,13 @@ export const constantRouterMap = [
meta: { title: '素材组管理' }
},
{
path: "/assetManagement/materialManage",
name: "assetManagement.materialManage",
component: () => import("@/views/createMaterial/MaterialManage"),
meta: { title: "素材管理", icon: "chart" }
},
]
},
......@@ -175,12 +182,6 @@ export const constantRouterMap = [
icon: "chart"
},
children: [
{
path: "/tools/Youtube",
name: "tools.Youtube",
component: () => import("@/views/createMaterial/AdMaterialManager"),
meta: { title: "Youtube管理", icon: "chart" }
},
{
path: "/materialUpload", // 资产上传
name: "materialUpload",
......
src/views/createMaterial/AdMaterialManager.vue → src/views/createMaterial/MaterialManage.vue
View file @ 121417bf
......@@ -199,65 +199,6 @@
</div>
</el-dialog>
<!-- 上传视频弹窗 -->
<el-dialog title="上传视频" :visible.sync="uploadVideoDialogVisible" width="40%">
<el-form ref="uploadVideoForm" :model="uploadVideoForm" label-width="120px">
<el-form-item label="选择文件">
<el-upload
class="upload-demo"
ref="uploadVideo"
:action="uploadVideoUrl"
:on-change="handleFileChange"
:auto-upload="false"
:file-list="fileList"
:limit="50"
:multiple="true"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">可选择多个文件，单次上传不超过50个,且不要超过100MB</div>
</el-upload>
</el-form-item>
<!-- <el-form-item label="素材名称" prop="materialName" :rules="[{ required: true, message: '请输入素材名称', trigger: 'blur' }]">-->
<!-- <el-input v-model="uploadVideoForm.materialName" autocomplete="off"></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="标签" prop="tags">
<el-input v-model="uploadVideoForm.tags" autocomplete="off" placeholder="多个标签请用英文逗号分隔"></el-input>
</el-form-item>
<el-form-item label="创作者" prop="director">
<el-select v-model="uploadVideoForm.director" placeholder="请选择创作者" clearable filterable>
<el-option
v-for="designer in materialDesigners"
:key="designer.id"
:label="designer.realName"
:value="designer.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="resType" :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]">
<el-select v-model="uploadVideoForm.resType" placeholder="请选择">
<el-option label="图片" :value="1"></el-option>
<el-option label="视频" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目录" prop="directoryId" :rules="[{ required: true, message: '请选择目录', trigger: 'change' }]">
<el-cascader
v-model="selectedDirectoryIds"
:options="directories"
:props="{ expandTrigger: 'hover', value:'id',label:'name', children:'children' }"
clearable
@change="handleDirectoryChange"
placeholder="请选择目录"
style="width: 100%;"
></el-cascader>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="uploadVideoDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitUpload">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
......@@ -278,7 +219,7 @@ import MaterialTagSelect from '../../components/MaterialTagSelect'
import DesigherSelect from '../../components/DesignerSelect'
export default {
name: 'AdMaterialManager',
name: 'MaterialManage',
components: {
MaterialTagSelect,
......@@ -332,18 +273,7 @@ export default {
totalCount: 0,
includeSubdirectories: true,
selectedDirectoryIds: [],
uploadVideoDialogVisible: false, // 控制上传视频弹窗的显示和隐藏
uploadVideoForm: { // 上传视频表单数据
// file: null,
materialName: '',
tags: [],
director: null,
resType: null,
directoryId: null
},
fileList:[],
uploadVideoUrl: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
materialDesigners: [],
tagFilter: [],
designer: '',
......@@ -531,39 +461,6 @@ export default {
.catch(() => {});
},
// 上传前验证
beforeUpload(file) {
const isImage = file.type.startsWith('image/');
const isVideo = file.type.startsWith('video/');
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isImage && !isVideo) {
this.$message.error('只能上传图片或视频文件!');
return false;
}
if (!isLt100M) {
this.$message.error('文件大小不能超过 100MB!');
return false;
}
return true;
},
// 处理上传成功
async handleUploadSuccess(response, file, fileList) {
if (response.code === 0) {
this.$message.success('上传成功');
await this.fetchMaterials(this.currentDirectory); // 重新获取文件列表
} else {
this.$message.error(response.message || '上传失败');
}
},
// 处理上传失败
handleUploadError(err) {
this.$message.error('上传失败');
console.error('上传文件失败:', err);
},
// 显示移动文件弹窗
showMoveDialog(file) {
this.currentMoveFile = file;
......@@ -647,69 +544,7 @@ export default {
handleFileChange(file, fileList) {
this.fileList = fileList;
},
async submitUpload() {
this.$refs.uploadVideoForm.validate(async (valid) => {
if (valid) {
// 1. 检查是否选择了文件
if (this.fileList.length === 0) {
this.$message.error('请选择文件');
return;
}
// 2. 逐个上传文件
try {
for (let i = 0; i < this.fileList.length; i++) {
const file = this.fileList[i];
// 3. 创建 FormData 对象
const formData = new FormData();
formData.append('files', file.raw);
formData.append('tags', this.uploadVideoForm.tags);
formData.append('director', this.uploadVideoForm.director);
formData.append('resType', this.uploadVideoForm.resType);
formData.append('directoryId', this.uploadVideoForm.directoryId);
// 4. 发送上传请求
const response = await uploadMaterial(formData);
if (response && response.status === 200) {
this.$message.success(`文件 ${file.name} 上传成功`);
} else {
this.$message.error(`文件 ${file.name} 上传失败: ${response.msg || '未知错误'}`);
return; // 如果某个文件上传失败，停止后续文件的上传
}
}
// 5. 所有文件上传成功后的操作
this.$message.success('所有文件上传成功');
this.uploadVideoDialogVisible = false;
this.fetchMaterialsByDirectoryId(this.currentDirectory); // 刷新文件列表
// 6. 清空表单和文件列表
this.uploadVideoForm = {
materialName: '',
tags: '',
director: null,
resType: null,
directoryId: null
};
this.fileList = [];
this.$refs.uploadVideo.clearFiles(); // 清空 el-upload 组件的文件列表
} catch (error) {
this.$message.error('上传失败');
console.error('上传失败:', error);
}
} else {
console.log('表单验证失败');
return false;
}
});
},
// 在你的 methods 中添加一个新的方法 showUploadVideoDialog
showUploadVideoDialog() {
this.uploadVideoDialogVisible = true;
},
handleDirectoryChange(value) {
this.uploadVideoForm.directoryId = value[value.length - 1];
},
......
src/views/createMaterial/MaterialUpload.vue
View file @ 121417bf
......@@ -47,7 +47,7 @@
style="width: 30%;"
></el-cascader>
</el-form-item>
<el-button @click="saveMaterial">提交</el-button>
<el-button @click="saveMaterial" :loading="submit_loading">提交</el-button>
</el-form>
<!-- 显示上传成功的文件列表 -->
......@@ -113,6 +113,7 @@ export default {
designer: null,
directoryId: null
},
submit_loading: false
}
},
......@@ -202,13 +203,33 @@ export default {
},
saveMaterial(){
// 表单验证
// if (this.uploadForm.tags.length === 0) {
// this.$message.error('请选择标签')
// return
// }
if (this.uploadForm.directoryId === null) {
this.$message.error('请选择目录')
return
}
this.submit_loading = true
// 上传文件并保存材料
addMaterial(this.uploadForm).then(res => {
if (res.status === 200) {
this.$message.success('保存成功');
this.$message.success('保存成功')
// 跳转到素材管理页面
this.$router.push('/assetManagement/materialManage')
} else {
this.$message.error('保存失败');
this.$message.error('保存失败')
}
});
}).catch(error => {
console.error('保存失败:', error)
this.$message.error('保存失败')
}).finally(() => {
this.submit_loading = false
})
},
}
}
......
src/views/layout/Layout.vue
View file @ 121417bf
......@@ -13,7 +13,7 @@
active-text-color="#ffd04b">
<!-- 一级菜单项 -->
<el-menu-item index="/tools/Youtube">素材管理</el-menu-item>
<el-menu-item index="/assetManagement/materialManage">素材管理</el-menu-item>
<!-- 带子菜单的导航项 -->
<el-submenu index="2">
......
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