✨feat: Expose handleUpload and call from minioData index

smsb-plus-ui/src/components/SmsbFileUpload/SmsbFileUploader.vue

@@ -2,7 +2,7 @@
   <div class="file-uploader">
     <!-- 文件拖拽区域 -->
     <el-upload class="upload-area" drag action="#" :auto-upload="false" :on-change="handleFileChange"
-               :on-remove="handleFileRemove" :file-list="displayFileList" multiple :show-file-list="false">
+      :on-remove="handleFileRemove" :file-list="displayFileList" multiple :show-file-list="false">
       <el-icon class="upload-icon"><upload-filled /></el-icon>
       <div class="upload-text">
         <em>拖拽文件到此处或</em>
@@ -36,20 +36,20 @@
             <template #default="{ row }">
               <div v-if="uploadStates[row.uid]">
                 <el-progress v-if="uploadStates[row.uid]?.status === 'uploading'"
-                             :percentage="uploadStates[row.uid]?.progress || 0" :stroke-width="8" striped striped-flow
-                             :duration="10" />
+                  :percentage="uploadStates[row.uid]?.progress || 0" :stroke-width="8" striped striped-flow
+                  :duration="10" />
                 <el-tag v-else-if="uploadStates[row.uid]?.status === 'success'" type="success">上传成功</el-tag>
                 <span v-else-if="uploadStates[row.uid]?.status === 'error'">
                   <el-tag type="danger">上传失败</el-tag>
                   <el-tooltip v-if="uploadStates[row.uid]?.errorMessage"
-                              :content="uploadStates[row.uid]?.errorMessage || '未知错误'" placement="top">
+                    :content="uploadStates[row.uid]?.errorMessage || '未知错误'" placement="top">
                     <el-icon style="margin-left: 4px; vertical-align: middle; cursor: help">
                       <QuestionFilled />
                     </el-icon>
                   </el-tooltip>
                 </span>
                 <el-tag v-else-if="uploadStates[row.uid]?.status === 'merging'" type="warning"
-                        effect="light">合并中...</el-tag>
+                  effect="light">合并中...</el-tag>
                 <el-tag v-else-if="uploadStates[row.uid]?.status === 'pending'" type="info">待上传</el-tag>
                 <el-tag v-else type="info" effect="plain">未知状态 ({{ uploadStates[row.uid]?.status }})</el-tag>
               </div>
@@ -59,21 +59,17 @@
           <el-table-column fixed="right" label="操作" width="60" header-align="center">
             <template #default="{ row }">
               <el-button type="danger" link @click="handleManualRemove(row)"
-                         :disabled="uploadStates[row.uid]?.status === 'uploading'">删除</el-button>
+                :disabled="uploadStates[row.uid]?.status === 'uploading'">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-scrollbar>
     </div>
-
-    <!-- 上传按钮 -->
-    <div class="upload-actions">
-      <el-button type="primary" :disabled="isUploading || fileList.length === 0" @click="handleUpload">上传</el-button>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { defineExpose } from 'vue';
 import { ref, computed, reactive, onMounted, watch, defineProps, defineEmits } from 'vue';
 import { UploadFilled } from '@element-plus/icons-vue';
 
@@ -88,7 +84,6 @@ const ALLOWED_EXTENSIONS = {
 const isFileTypeAllowed = (fileName: string) => {
   const extension = fileName.split('.').pop()?.toLowerCase();
   if (!extension) return false;
-  
   return Object.values(ALLOWED_EXTENSIONS).flat().includes(extension);
 };
 
@@ -170,7 +165,7 @@ function handleFileChange(uploadFile: any, uploadFiles: any[]) {
     ElMessage.error(`不支持的文件类型: ${uploadFile.name}，仅支持图片(jpg,png等)、音频(mp3,wav等)和视频(mp4,mov等)文件`);
     return false;
   }
-  
+
   // 避免重复添加
   if (!fileList.value.some((f) => f.uid === uploadFile.uid)) {
     fileList.value.push(uploadFile);
@@ -390,6 +385,8 @@ async function handleUpload() {
     ElMessage.info("上传已取消");
   }
 }
+
+defineExpose({ handleUpload });
 </script>
 
 <style scoped>

smsb-plus-ui/src/views/smsb/minioData/index.vue

@@ -176,7 +176,7 @@
               <smsb-file-upload v-model="form.ossId" />
               -->
               <!-- 替换为新版上传组件 SmsbFileUploader -->
-              <SmsbFileUploader v-model="form.ossId" />
+              <SmsbFileUploader ref="fileUploaderRef" v-model="form.ossId" />
             </el-form-item>
           </el-form>
         </el-col>
@@ -465,23 +465,32 @@ const handleUse = async (row?: MinioDataVO) => {
 };
 
 /** 提交按钮 */
+// 通过ref访问SmsbFileUploader实例
+import { ref as vueRef } from 'vue';
+const fileUploaderRef = vueRef();
+
 const submitForm = () => {
-  // 若未选择文件，直接关闭弹窗，不做其它操作
-  if (!form.value.ossId) {
-    dialog.visible = false;
-    return;
-  }
   minioDataFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
-      if (form.value.id) {
-        await updateMinioData(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addMinioData(form.value).finally(() => (buttonLoading.value = false));
+      // 调用文件上传逻辑（不关闭dialog）
+      console.log('[submitForm] 尝试调用handleUpload', fileUploaderRef.value);
+      if (fileUploaderRef.value && typeof fileUploaderRef.value.handleUpload === 'function') {
+        await fileUploaderRef.value.handleUpload();
+        console.log('[submitForm] handleUpload已调用');
       }
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
+      // 下面的逻辑可以根据需要决定是否保留
+      // if (form.value.id) {
+      //   await updateMinioData(form.value).finally(() => (buttonLoading.value = false));
+      // } else {
+      //   await addMinioData(form.value).finally(() => (buttonLoading.value = false));
+      // }
+      buttonLoading.value = false;
+      // 强制保持弹窗不关闭
+      dialog.visible = true;
+      // proxy?.$modal.msgSuccess('操作成功');
+      // dialog.visible = false;
+      // await getList();
     }
   });
 };