@skyfox2000/webui 1.4.9 → 1.4.10

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

@@ -97,13 +97,20 @@ 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,57 +119,119 @@ 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 = (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[];
-      }
-   },
 }));
 
 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 +242,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 +250,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 +272,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 +288,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,11 +297,11 @@ 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;
 };
@@ -301,11 +370,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,7 +418,7 @@ 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="confirmOpen" cancelText="否" okText="是" title="确定删除该文件吗？"
                         :okButtonProps="{ size: 'small' }" :cancelButtonProps="{ size: 'small' }"
                         @confirm="removeFile(index)" @cancel="confirmOpen = false">
                         <Tooltip title="删除">
@@ -388,4 +456,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/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;
+   },
+};