完善素材组管理

src/components/FileUpload/index.vue

 <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

@@ -62,7 +62,8 @@ export default {
         label: 'name',
         children: 'children',
         emitPath: true, // 返回完整路径
-        leaf: 'isLeaf'
+        leaf: 'isLeaf',
+        expandTrigger: 'hover'
       },
       tagData: []
     }

src/router/index.js

@@ -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

@@ -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

@@ -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

@@ -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">