@skyfox2000/webui 1.4.9 → 1.4.11

package/src/components/content/dialog/templateFile.vue

@@ -2,10 +2,10 @@
 import { watch, ref, onMounted, PropType } from 'vue';
 import { Button } from '../../common';
 import { Modal, Space } from 'ant-design-vue';
-import { doQuery, EditorControl, MinioFile, UploadFile, UploadStatus } from '@/index';
-import { AnyData, ApiResponse, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
+import { MinioFile, UploadFile, UploadStatus } from '@/index';
+import { httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
 import UploadList from '../../form/upload/uploadList.vue';
-import { AsyncUploader } from '@/utils/file-upload';
+import { uploadTempOpener } from '../../../utils/upload-template';
 
 const props = defineProps({
     /**
@@ -33,10 +33,10 @@ const props = defineProps({
     /**
      * 弹窗控制器
      */
-    uploadForm: {
-        type: Object as PropType<EditorControl<AnyData>>,
-        required: true,
-    },
+    // open: {
+    //     type: Boolean as PropType<boolean>,
+    //     required: true,
+    // },
     /**
      * 文件列表地址
      */
@@ -81,59 +81,44 @@ const props = defineProps({
         required: false,
     },
 });
+
+const api = props.api ?? "FILE_API";
 /**
  * minio桶名称template
  * 
  * 子目录templateType
  */
 const fileListUrl = ref(props.fileListUrl || {
-    api: props.api,
+    api: api,
     authorize: true,
     url: '/api/TemplateFileSrv/list',
 });
 const uploadUrl = ref(props.uploadUrl || {
-    api: props.api,
+    api: api,
     authorize: true,
     url: '/api/TemplateFileSrv/upload',
 });
 const downloadUrl = ref(props.downloadUrl || {
-    api: props.api,
+    api: api,
     authorize: true,
     url: '/api/TemplateFileSrv/download',
 });
 const deleteUrl = ref(props.deleteUrl || {
-    api: props.api,
+    api: api,
     authorize: true,
     url: '/api/TemplateFileSrv/delete',
 });
 
-const uploadFormCtrl = props.uploadForm;
 const open = ref<boolean>(false);
 
 const fileList = ref<UploadFile[]>([]);
-const emit = defineEmits<{
-    /**
-     * 显示预处理
-     */
-    'before:file-list': [EditorControl<AnyData>, UploadFile[]];
-    /**
-     * 上传前预处理
-     */
-    'before:upload': [UploadFile[]];
-    /**
-     * 上传结束，处理上传后的文件
-     */
-    'after:upload': [boolean, UploadFile[]];
-    /**
-     * 上传进度
-     */
-    'on:progress': [UploadFile];
-}>();
+// const emit = defineEmits<{
+// }>();
 
 watch(
-    () => uploadFormCtrl.visible.value,
+    () => uploadTempOpener.value,
     () => {
-        open.value = uploadFormCtrl.visible.value;
+        open.value = uploadTempOpener.value;
     },
 );
 
@@ -142,14 +127,10 @@ watch(
  * 加载现有模板文件列表
  */
 const loadFileList = async () => {
-    const res: ApiResponse<MinioFile[]> | null = await doQuery<MinioFile[]>(props.uploadForm, {
-        urlKey: 'list',
-        url: fileListUrl.value,
-        params: {
-            Query: {
-                PrefixPath: props.templateType,
-            }
-        },
+    const res = await httpPost<MinioFile[]>(fileListUrl.value, {
+        Query: {
+            PrefixPath: props.templateType,
+        }
     });
     if (res?.status === ResStatus.SUCCESS && res.data) {
         const files = res.data as MinioFile[];
@@ -166,66 +147,33 @@ const loadFileList = async () => {
             }
             return uploadFile;
         })
-        emit('before:file-list', uploadFormCtrl, list);
+        // emit('before:file-list', uploadFormCtrl, list);
         fileList.value.push(...list);
     }
 };
 
-const dialogSave = async () => {
-    emit('before:upload', fileList.value);
-    const uploader = new AsyncUploader(uploadUrl.value, 3);
-    await uploader.doUpload(
-        fileList.value,
-        uploadFormCtrl.isFormLoading,
-        true,
-        async (result, files) => {
-            emit('after:upload', result, files);
-            if (result) {
-                uploadFormCtrl.visible.value = false;
-            }
-        },
-        (file) => {
-            emit('on:progress', file);
-        },
-    );
-};
-
 onMounted(() => {
-    if (!fileListUrl.value.api) {
-        fileListUrl.value.api = uploadFormCtrl.page.api;
-    }
-    if (!uploadUrl.value.api) {
-        uploadUrl.value.api = uploadFormCtrl.page.api;
-    }
-    if (!downloadUrl.value.api) {
-        downloadUrl.value.api = uploadFormCtrl.page.api;
-    }
-    if (!deleteUrl.value.api) {
-        deleteUrl.value.api = uploadFormCtrl.page.api;
-    }
     loadFileList();
 
-    open.value = uploadFormCtrl.visible.value;
+    open.value = uploadTempOpener.value;
 });
 
 const dialogClose = () => {
-    uploadFormCtrl.visible.value = false;
+    open.value = false;
+    uploadTempOpener.value = false;
 };
 </script>
 <template>
     <Modal title="模板文件管理" v-model:open="open"
         :wrapClassName="'modal mx-auto ' + ($attrs.width ? 'w-[' + $attrs.width + ']' : 'w-[500px]')"
         @close="dialogClose">
-        <UploadList v-model:file-list="fileList" :parent-path="props.templateType" :upload-url="uploadUrl"
+        <!-- 改为选择后自动上传 -->
+        <UploadList v-model:file-list="fileList" auto-upload :parent-path="props.templateType" :upload-url="uploadUrl"
             :download-url="downloadUrl" :delete-url="deleteUrl" :max-count="maxCount" :file-ext="fileExt"
             :show-delete="showDelete" />
         <template #footer>
             <Space>
                 <Button @click="dialogClose">关闭</Button>
-                <Button @click="dialogSave" type="primary" :loading="uploadFormCtrl.isFormSaving.value"
-                    :disabled="fileList.length === 0">
-                    上传保存
-                </Button>
             </Space>
         </template>
     </Modal>

package/src/components/content/table/index.vue

@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<{
    primaryKey?: string;
    /**
     * 自定义表格数据
+    * - 使用gridCtrl实现显示
     */
    tableData?: Record<string, AnyData>[];
    /**

package/src/components/form/upload/uploadList.vue

@@ -7,6 +7,7 @@ import { Upload, Progress, Tag, Popconfirm } from 'ant-design-vue';
 import { UploadFile, UploadStatus, donwloadFromMinio, path, Switch, previewFromMinio } from '@/index';
 import { useInputFactory } from '@/utils/form-validate';
 import { ApiResponse, httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
+import { fastUpload } from '@/utils/file-upload';
 
 export interface UploadListProps {
    /**
@@ -97,13 +98,19 @@ const props = withDefaults(defineProps<UploadListProps>(), {
 const inputFactory = useInputFactory();
 const { errInfo } = inputFactory;
 
-const fileList = ref<UploadFile[]>(props.fileList);
+
+// Upload 组件的文件列表更新
+const displayList = ref<UploadFile[]>(props.fileList);
+// Upload 组件的内部文件列表
+const uploadList = ref<UploadFile[]>([]);
+
 const fileUploader = ref();
 const emit = defineEmits(['update:file-list']);
-const confirmOpen = ref(false);
 const acceptString = computed(() => (props.fileExt?.length ? props.fileExt.map((ext) => `.${ext}`).join(',') : ''));
 
-const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+// 统一的文件验证函数
+const validateFile = (file: File): boolean => {
+   // 文件类型验证
    if (props.fileExt && props.fileExt.length > 0) {
       const extension = file.name.split('.').pop()?.toLowerCase() || '';
       if (!props.fileExt.includes(extension)) {
@@ -112,43 +119,114 @@ const beforeUpload: UploadProps['beforeUpload'] = (file) => {
       }
    }
 
+   // 文件大小验证
    if (file.size / 1024 / 1024 > props.maxFileSize) {
       message.error(`文件大小超过 ${props.maxFileSize}MB 限制`);
       return false;
    }
 
-   if (props.maxCount > 1 && fileList.value.length >= props.maxCount) {
-      message.error(`最多上传 ${props.maxCount} 个文件`);
-      return false;
+   return true;
+};
+
+// 检查是否达到最大数量限制
+const isMaxCountReached = (): boolean => {
+   return props.maxCount > 1 && displayList.value.length >= props.maxCount;
+};
+
+// 准备文件信息
+const prepareFileInfo = (file: any): UploadFile<any> => {
+   const fileInfo = file as UploadFile<any>;
+   if (!fileInfo.params) fileInfo.params = {};
+   fileInfo.params.FileKey = fileInfo.name;
+   if (props.parentPath) {
+      fileInfo.params.FileKey = path.join('/', props.parentPath, fileInfo.name);
    }
+   fileInfo.status = UploadStatus.Pending;
+   return fileInfo;
+};
 
-   confirmOpen.value = false;
-   return props.autoUpload;
+// 简化的 beforeUpload - 只做基本验证，不处理业务逻辑
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+   return validateFile(file) && props.autoUpload;
 };
 
-const updateFileList: UploadProps['onUpdate:fileList'] = (fileList) => {
-   fileList.forEach((file) => {
-      const fileInfo = file as UploadFile<any>;
-      if (!fileInfo.fileName) fileInfo.fileName = fileInfo.name;
-      if (props.parentPath) fileInfo.name = path.join('/', props.parentPath, fileInfo.fileName);
-      if (!fileInfo.params) fileInfo.params = {};
-      fileInfo.params.FileKey = fileInfo.name;
-      fileInfo.status = UploadStatus.Pending;
-   });
+// 处理文件选择（核心逻辑）
+const handleFileSelect = async (newFiles: any[]) => {
+   if (newFiles.length === 0) return;
+
+   const tempFiles = [...displayList.value];
+   let hasError = false;
+
+   for (const file of newFiles) {
+      // 验证文件
+      if (!validateFile(file)) {
+         hasError = true;
+         continue;
+      }
+
+      const fileInfo = prepareFileInfo(file);
+
+      // 如果maxCount=1，直接替换
+      if (props.maxCount === 1) {
+         tempFiles.length = 0;
+         tempFiles.push(fileInfo);
+         break;
+      }
+
+      // 检查是否达到最大数量限制
+      if (isMaxCountReached()) {
+         message.error(`最多上传 ${props.maxCount} 个文件`);
+         hasError = true;
+         break;
+      }
+
+      // 检查是否为同名文件（严格判断）
+      const existingIndex = tempFiles.findIndex(f =>
+         (f.name === fileInfo.name)
+      );
+
+      if (existingIndex > -1) {
+         // 同名文件：替换
+         tempFiles[existingIndex] = fileInfo;
+      } else {
+         // 新文件：添加到列表
+         tempFiles.push(fileInfo);
+      }
+   }
+
+   // 更新显示列表
+   if (!hasError || tempFiles.length > 0) {
+      displayList.value = tempFiles;
+   }
+
+   // 清空 Upload 组件的内部列表
+   uploadList.value = [];
+};
+
+// Upload 组件的文件列表更新
+const updateUploadList: UploadProps['onUpdate:fileList'] = (newFiles) => {
+   // 只更新 Upload 内部列表
+   uploadList.value = newFiles as unknown as UploadFile[];
+
+   // 处理新选择的文件
+   handleFileSelect(newFiles);
 };
 
 const uploadProps = computed<UploadProps>(() => ({
    accept: acceptString.value,
-   multiple: true,
-   fileList: fileList.value as UploadProps['fileList'],
-   'onUpdate:fileList': updateFileList,
+   multiple: props.maxCount !== 1,
+   fileList: uploadList.value as UploadProps['fileList'],
+   'onUpdate:fileList': updateUploadList,
    beforeUpload: beforeUpload,
    listType: 'text',
-   maxCount: props.maxCount,
    showUploadList: false,
-   onChange: (info) => {
-      if (!props.autoUpload) {
-         fileList.value = info.fileList as unknown as UploadFile[];
+   customRequest: async () => {
+      if (props.autoUpload && props.uploadUrl) {
+         for (const file of displayList.value) {
+            if (file.percent === 0 && file.status === UploadStatus.Pending) {
+               await fastUpload(props.uploadUrl, file);
+            }
+         }
       }
    },
 }));
@@ -156,13 +234,13 @@ const uploadProps = computed<UploadProps>(() => ({
 watch(
    () => props.fileList,
    (newVal) => {
-      fileList.value = newVal;
+      displayList.value = newVal;
    },
    { deep: true, immediate: true },
 );
 
 watch(
-   () => fileList.value,
+   () => displayList.value,
    (newVal) => {
       emit('update:file-list', newVal);
    },
@@ -173,7 +251,7 @@ watch(
    () => props.parentPath,
    (newVal) => {
       if (newVal) {
-         fileList.value.forEach((file) => {
+         displayList.value.forEach((file) => {
             file.params.FileKey = path.join('/', newVal, file.fileName);
          });
       }
@@ -181,7 +259,7 @@ watch(
 );
 
 const downloadFile = (index: number) => {
-   const minioFile = fileList.value[index].minioFile!;
+   const minioFile = displayList.value[index].minioFile!;
    const url: IUrlInfo = {
       api: props.downloadUrl!.api,
       authorize: props.downloadUrl!.authorize,
@@ -203,7 +281,7 @@ const onlineOrOffline = (file: UploadFile) => {
 };
 
 const previewFile = (index: number) => {
-   const minioFile = fileList.value[index].minioFile!;
+   const minioFile = displayList.value[index].minioFile!;
    const url: IUrlInfo = {
       api: props.previewUrl!.api,
       authorize: props.previewUrl!.authorize,
@@ -219,8 +297,8 @@ const previewFile = (index: number) => {
 };
 
 const removeFile = (index: number) => {
-   const file = fileList.value[index];
-   if (props.deleteUrl) {
+   const file = displayList.value[index];
+   if (props.deleteUrl && file.minioFile && file.minioFile.Key) {
       httpPost<ApiResponse>(props.deleteUrl, {
          Query: {
             FileKey: file.minioFile!.Key,
@@ -228,23 +306,28 @@ const removeFile = (index: number) => {
       }).then((res) => {
          if (res && res.status === ResStatus.SUCCESS) {
             message.success('删除文件成功！');
-            fileList.value.splice(index, 1);
+            displayList.value.splice(index, 1);
          }
       });
    } else {
-      fileList.value.splice(index, 1);
+      displayList.value.splice(index, 1);
    }
-   confirmOpen.value = false;
+   delIndex.value = -1;
 };
 
+const delIndex = ref(-1);
 const confirmDelFile = (index: number, status?: UploadStatus) => {
+   delIndex.value = index;
    if (status === UploadStatus.Pending) {
       removeFile(index);
       return;
    }
-   confirmOpen.value = true;
 };
 
+const confirmIndex = (index: number) => {
+   return index === delIndex.value;
+}
+
 const getPlaceholder = (): string => {
    const typeMsg =
       props.fileExt && props.fileExt.length && props.fileExtTip ? `文件必须为 ${props.fileExt.join('/')}` : '';
@@ -301,11 +384,10 @@ const getStatus = (status?: UploadStatus) => {
          <div class="flex-1 text-sm text-gray-500" :class="[errInfo?.errClass + '-text']">
             {{ getPlaceholder() }}
          </div>
-         <!-- <Button v-if="!autoUpload" @click="manualUpload" class="mr-3">开始上传</Button> -->
       </div>
 
       <div class="mt-4 px-3">
-         <div v-for="(file, index) in fileList" :key="index" class="mb-2 pb-1">
+         <div v-for="(file, index) in displayList" :key="index" class="mb-2 pb-1">
             <div class="flex items-center justify-between">
                <div class="flex items-center">
                   <span class="text-gray-700 mr-2"
@@ -350,9 +432,9 @@ const getStatus = (status?: UploadStatus) => {
                   </div>
                   <div v-if="showDelete !== false"
                      class="flex items-center text-red-500 hover:text-red-700 cursor-pointer">
-                     <Popconfirm v-model:open="confirmOpen" cancelText="否" okText="是" title="确定删除该文件吗？"
+                     <Popconfirm :open="confirmIndex(index)" cancelText="否" okText="是" title="确定删除该文件吗？"
                         :okButtonProps="{ size: 'small' }" :cancelButtonProps="{ size: 'small' }"
-                        @confirm="removeFile(index)" @cancel="confirmOpen = false">
+                        @confirm="removeFile(index)" @cancel="delIndex = -1">
                         <Tooltip title="删除">
                            <div @click="confirmDelFile(index, file.status)">
                               <ToolIcon icon="icon-new" :angle="45"
@@ -388,4 +470,4 @@ const getStatus = (status?: UploadStatus) => {
 .error-text {
    color: #ff4d4f !important;
 }
-</style>
+</style>

package/src/index.ts

@@ -279,3 +279,5 @@ export {
    Menu,
    MenuTabs,
 } from '@/components/index';
+
+export { uploadTempOpener, uploadTempBtn } from './utils/upload-template';

package/src/utils/file-upload.ts

@@ -111,7 +111,7 @@ export class AsyncUploader {
     * @param onProgress 上传进度回调
     * @param onComplete 上传完成回调
     */
-   private async uploadFiles(
+   public async uploadFiles(
       fileList: UploadFile[],
       onProgress?: (file: UploadFile) => void,
       onComplete?: (files: UploadFile[]) => void,
@@ -329,6 +329,36 @@ export class AsyncUploader {
       }
    }
 }
+
+/**
+ * 单文件快速上传
+ * @param uploadUrl 上传地址
+ * @param file
+ * @returns
+ */
+export const fastUpload = async (uploadUrl: IUrlInfo, uploadFile: UploadFile): Promise<void> => {
+   const uploader = new AsyncUploader(uploadUrl!, 1);
+   const fileList = [uploadFile];
+   await uploader.uploadFiles(
+      fileList,
+      (file) => {
+         uploadFile.percent = file.percent;
+      },
+      (files) => {
+         const file = files[0];
+         uploadFile.percent = file.percent;
+
+         if (file.status === UploadStatus.Success) {
+            uploadFile.status = UploadStatus.Online;
+            message.success('文件上传成功！');
+         } else {
+            uploadFile.status = UploadStatus.Error;
+            message.error('上传文件失败！');
+         }
+      },
+   );
+};
+
 // // 使用示例
 // (async () => {
 //    // 创建上传器实例，指定 API 配置和最大并发数

package/src/utils/upload-template.ts

@@ -0,0 +1,15 @@
+import { ButtonTool } from '@/typings/tools';
+import { ref } from 'vue';
+
+export const uploadTempOpener = ref<boolean>(false);
+
+// 添加上传模板按钮
+export const uploadTempBtn: ButtonTool = {
+   label: '模板管理',
+   key: 'uploadTemp',
+   type: 'primary',
+   icon: 'icon-download',
+   click: () => {
+      uploadTempOpener.value = true;
+   },
+};