增加批量修改 tag

src/api/materialTag.js

@@ -39,3 +39,13 @@ export function deleteMaterialTag(id) {
       return response.data
     })
 }
+
+// 批量为素材添加标签
+export function batchAddTagsToMaterials(materialIds, tagIds) {
+  return axios.post(`${process.env.PUTIN_API}/material/batch`, {
+    materialIds,
+    tagIds
+  }).then(response => {
+    return response.data
+  })
+}

src/views/createMaterial/MaterialManage.vue

@@ -65,10 +65,21 @@
           </el-form-item>
         </el-form>
 
-        <el-button type="primary" size="small" @click="openMaterialUpload" style="margin-bottom: 10px;">上传</el-button>
+        <div style="margin-bottom: 10px;">
+          <el-button type="primary" size="small"  @click="openMaterialUpload">上传</el-button>
+          <el-dropdown :disabled="multipleSelection.length == 0" @command="handleBatchCommand" style="margin-left: 10px;">
+            <el-button size="small" :disabled="multipleSelection.length == 0">
+              批量操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="batchAddTags">批量添加标签</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
 
         <!-- 文件列表 -->
-        <el-table v-loading="loading" :data="materials" style="width: 100%" border>
+        <el-table v-loading="loading" :data="materials" style="width: 100%" border @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column label="预览" width="120">
             <template slot-scope="scope">
               <div class="preview-container">
@@ -88,7 +99,7 @@
             </template>
           </el-table-column>
           <el-table-column prop="materialName" label="文件名" width="300"></el-table-column>
-          <el-table-column prop="resType" label="类型" width="100">
+          <el-table-column prop="resType" label="类型" width="100" align="center">
             <template slot-scope="scope">
               {{ scope.row.resType === 1 ? '图片' : scope.row.resType === 2 ? '视频' : '' }}
             </template>
@@ -167,6 +178,7 @@
         ref="moveTree"
         :data="directories"
         :props="defaultProps"
+        
         node-key="id"
         :default-expand-all="true"
         @node-click="handleMoveNodeClick"
@@ -199,7 +211,26 @@
       </div>
     </el-dialog>
 
+    <!-- 批量添加标签对话框 -->
+  <el-dialog title="批量添加标签" :visible.sync="batchTagsDialogVisible" width="30%">
+    <el-form>
+      <el-form-item label="选择标签">
+        <material-tag-select
+          v-model="selectedTags"
+          placeholder="请选择标签..."
+        />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancelAddTags" >取消</el-button>
+      <el-button type="primary" @click="confirmAddTags" :loading="batchAddTagBtn">确定</el-button>
+    </div>
+  </el-dialog>
+
   </div>
+
+  
 </template>
 
 <script>
@@ -214,6 +245,7 @@ import {
   getAllTags,
   deleteMaterialById
 } from '@/api/report';
+import { batchAddTagsToMaterials } from '@/api/materialTag';
 import FileUpload from '../../components/FileUpload'
 import MaterialTagSelect from '../../components/MaterialTagSelect'
 import DesigherSelect from '../../components/DesignerSelect'
@@ -236,7 +268,9 @@ export default {
       },
       currentDirectory: null, // 当前选中的目录ID
       currentPath: '根目录', // 当前路径
-
+      selectedTags: [], // 批量添加标签选中的标签
+      batchTagsDialogVisible: false, // 批量添加标签对话框是否可见
+      batchAddTagBtn: false,
       // 文件列表数据
       materials: [],
       loading: false,
@@ -278,6 +312,7 @@ export default {
       tagFilter: [],
       designer: '',
       allTags: [],
+      multipleSelection: []
     };
   },
 
@@ -510,7 +545,7 @@ export default {
           deleteMaterialById({id: row.id}).then((res) => {
             if (res.status == 200) {
               this.$message.success("删除成功!")
-              this.fetchMaterialsByDirectoryId(this.currentDirectory)
+              this.fetchMaterials()
             } else {
               this.$message.error("保存失败!")
               this.loading = false
@@ -526,6 +561,10 @@ export default {
       this.previewDialogVisible = true;
     },
 
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
     // 工具方法 - 格式化文件大小
     formatFileSize(size) {
       if (size < 1024) {
@@ -554,8 +593,69 @@ export default {
       // this.$router.push({ name: 'google.fbAdDetail', query: { pkg: row.pkg } });
     },
 
+    // 处理批量操作命令
+    handleBatchCommand(command) {
+      if (command === 'batchAddTags') {
+        this.showBatchAddTagsDialog();
+      }
+    },
+
+    // 显示批量添加标签对话框
+    showBatchAddTagsDialog() {
+      this.batchTagsDialogVisible = true;
+      this.selectedTags = [];
+    },
+    
+    // 确认批量添加标签
+    confirmAddTags() {
+      if (this.selectedTags.length > 0) {
+        this.addTagsToSelectedMaterials(this.selectedTags);
+      } else {
+        this.$message.warning('请选择标签');
+      }
+    },
+    
+    // 取消批量添加标签
+    cancelAddTags() {
+      this.batchTagsDialogVisible = false;
+      this.selectedTags = [];
+    },
+
+    // 为选中的素材添加标签
+    addTagsToSelectedMaterials(tags) {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请先选择素材');
+        return;
+      }
+
+      const materialIds = this.multipleSelection.map(item => item.id);
+      const tagIds = tags.map(Number); // 确保标签ID是数值格式
+      console.log(materialIds, tagIds)
+      // 添加进度相关数据
+      this.batchAddTagBtn = true
+      
+      // 调用批量添加标签的API
+      batchAddTagsToMaterials(materialIds, tagIds)
+        .then(res => {
+          if (res.status === 200) {
+            this.$message.success(`已为${materialIds.length}个素材添加标签`);
+            this.fetchMaterials(); // 刷新素材列表
+          } else {
+            this.$message.error(res.msg || '添加标签失败');
+          }
+        })
+        .catch(error => {
+          this.$message.error('添加标签失败');
+          console.error('添加标签失败:', error);
+        })
+        .finally(() => {
+          this.batchAddTagBtn = false
+          this.batchTagsDialogVisible = false;
+          
+        });
+      }
+    },
   }
-};
 </script>
 
 <style scoped>