Merge remote-tracking branch 'origin/master'

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

@@ -1,7 +1,7 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-                :leave-active-class="proxy?.animate.searchAnimate.leave">
+      :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover" :style="{ height: '70px' }">
           <el-row :gutter="20" align="middle">
@@ -52,19 +52,18 @@
             <el-form-item label="分类" prop="tag">
               <el-select v-model="queryParams.tag" style="width: 150px" placeholder="请选择分类" clearable>
                 <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label"
-                           :value="dict.value" />
+                  :value="dict.value" />
               </el-select>
             </el-form-item>
             <el-form-item label="目录" prop="treeId">
               <el-tree-select v-model="queryParams.treeId" :data="sourceTreeOptions"
-                              :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id"
-                              placeholder="请选择归属目录" check-strictly @change="handleQuery" style="width: 200px"
-                              clearable />
+                :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择归属目录"
+                check-strictly @change="handleQuery" style="width: 200px" clearable />
             </el-form-item>
             <el-form-item label="时间" style="width: 250px">
               <el-date-picker v-model="dateRangeCreateTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
-                              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
+                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -108,10 +107,11 @@
             </div>
             <div v-else-if="scope.row.type === 2">
               <!-- 视频类型 -->
-              <!--
-                            <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" @click="viewVideo(scope.row.url)" />
-              -->
-              <el-icon class="VideoPlay" @click="viewVideo(scope.row.screenshot)"></el-icon>
+              <!-- <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" -->
+              <!-- @click="viewVideo(scope.row.url)" /> -->
+              <el-icon class="VideoPlay" @click="viewVideo(scope.row.screenshot)" size="40" style="cursor: pointer">
+                <VideoPlay />
+              </el-icon>
             </div>
           </template>
         </el-table-column>
@@ -138,45 +138,45 @@
                         </el-tooltip>-->
             <el-tooltip content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-                         v-hasPermi="['source:minioData:remove']"></el-button>
+                v-hasPermi="['source:minioData:remove']"></el-button>
             </el-tooltip>
             <el-tooltip content="引用情况" placement="top">
               <el-button link type="primary" icon="List" @click="handleUse(scope.row)"
-                         v-hasPermi="['source:minioData:edit']"></el-button>
+                v-hasPermi="['source:minioData:edit']"></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                  v-model:limit="queryParams.pageSize" @pagination="getList" />
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改文件资源对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" append-to-body
-               :style="{ maxWidth: '90vw', maxHeight: '90vh' }">
+      :style="{ maxWidth: '90vw', maxHeight: '90vh' }">
       <el-row :gutter="20" style="display: flex">
         <el-col :span="10" style="height: 100%; overflow: auto; border-right: 1px solid #eee; padding-right: 10px">
           <el-tree ref="sourceTreeRef" :data="sourceTreeOptions" show-checkbox node-key="id"
-                   :props="{ value: 'id', label: 'name', children: 'children' }" :check-strictly="true"
-                   :default-expand-all="false" @check="handleTreeCheck" style="height: 100%"></el-tree>
+            :props="{ value: 'id', label: 'name', children: 'children' }" :check-strictly="true"
+            :default-expand-all="false" @check="handleTreeCheck" style="height: 100%"></el-tree>
         </el-col>
         <el-col :span="14"
-                style="height: 100%; display: flex; flex-direction: column; overflow: auto; padding-left: 10px">
+          style="height: 100%; display: flex; flex-direction: column; overflow: auto; padding-left: 10px">
           <el-form ref="minioDataFormRef" :model="form" :rules="rules" label-width="80px"
-                   style="flex: 1 1 auto; height: 100%; display: flex; flex-direction: column">
+            style="flex: 1 1 auto; height: 100%; display: flex; flex-direction: column">
             <el-form-item label="分类" prop="tag">
               <el-select v-model="form.tag" placeholder="请选择分类">
                 <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label"
-                           :value="parseInt(dict.value)"></el-option>
+                  :value="parseInt(dict.value)"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label=""
-                          style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start">
+              style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start">
               <!-- 原始上传组件保留，供参考：
               <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>
@@ -213,7 +213,7 @@
           <el-table-column label="创建时间" align="left" prop="createTime" width="160" />
         </el-table>
         <pagination v-show="transTotal > 0" :total="transTotal" v-model:page="transQueryParams.pageNum"
-                    v-model:limit="transQueryParams.pageSize" @pagination="getTransList" />
+          v-model:limit="transQueryParams.pageSize" @pagination="getTransList" />
       </el-card>
     </el-dialog>
 
@@ -224,7 +224,7 @@
 
     <!-- 引用情况弹窗 -->
     <el-dialog :title="useDialog.title" v-model="useDialog.visible" width="1000px" append-to-body
-               :style="{ height: '850px' }">
+      :style="{ height: '850px' }">
       <el-card shadow="never">
         <el-table v-loading="loading" :data="itemRecordList">
           <el-table-column label="名称" align="left" prop="itemName" />
@@ -243,7 +243,7 @@
           <el-table-column label="创建时间" align="left" prop="createTime" width="150" />
         </el-table>
         <pagination v-show="itemTotal > 0" :total="itemTotal" v-model:page="dialogQueryParams.pageNum"
-                    v-model:limit="dialogQueryParams.pageSize" @pagination="getItemListByFileId" />
+          v-model:limit="dialogQueryParams.pageSize" @pagination="getItemListByFileId" />
       </el-card>
     </el-dialog>
   </div>
@@ -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();
     }
   });
 };