@idooel/components 0.0.2-beta.7 → 0.0.2-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.2-beta.7",
+  "version": "0.0.2-beta.9",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/upload/src/index.vue

@@ -266,7 +266,19 @@ export default {
     
     // ==================== 文件状态 ====================
     uploadingFiles() {
-      return this.files.filter(file => file.progress !== undefined && !file.success)
+      // 筛选条件：有进度信息 且 (未成功 或 成功但还没有fileID的切片上传文件)
+      // 这样可以确保切片上传完成但异步保存未完成的文件继续显示，避免闪烁
+      return this.files.filter(file => {
+        if (file.progress === undefined) return false
+        if (!file.success) return true
+        
+        // 检查文件是否已经有 fileID（可能在 file.fileID 或 file.response.data.fileID）
+        const hasFileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
+        
+        // 切片上传成功但还没有完成异步保存（没有fileID）的文件继续显示
+        // 普通上传成功且已有 fileID 的文件不显示（会在 completedFiles 中显示）
+        return file.success && !hasFileID
+      })
     },
     
     completedFiles() {
@@ -316,7 +328,22 @@ export default {
      */
     removeFromArrays(file, arrays, key = 'fileID') {
       return arrays.map(arr => 
-        arr.filter(item => item[key] !== file[key] && item.id !== file.id)
+        arr.filter(item => {
+          // 如果 fileID 都存在且相等，则移除
+          if (item[key] && file[key] && item[key] === file[key]) {
+            return false
+          }
+          // 如果 id 都存在且相等，则移除
+          if (item.id && file.id && item.id === file.id) {
+            return false
+          }
+          // 如果文件名相同，也考虑移除（额外的安全检查）
+          if (item.name && file.name && item.name === file.name && item[key] === file[key]) {
+            return false
+          }
+          // 否则保留
+          return true
+        })
       )
     },
     
@@ -384,15 +411,37 @@ export default {
         console.log('fetchFileWithFileId error:', error)
       }
     },
+
+    /**
+     * 调用服务器删除文件 API
+     */
+    async deleteFiles (ids) {
+      if (!ids) {
+        console.warn('No fileID provided for deletion')
+        return
+      }
+      
+      if (type.isArray(ids)) {
+        ids = ids.join(',')
+      }
+      
+      try {
+        await net.remove(`/api-file/workbench/file?ids=${ids}`)
+        console.log('File deleted from server:', ids)
+      } catch (error) {
+        console.error('Failed to delete file from server:', error)
+        throw error // 重新抛出错误，让调用方处理
+      }
+    },
     
     /**
      * 处理文件删除
      */
-    handleClickDelete(file) {
-      const { fileID } = file
-      console.log('Deleting file:', { name: file.name, fileID })
+    async handleClickDelete(file) {
+      const { fileID, name } = file
+      console.log('Deleting file:', { name, fileID })
       
-      // 从上传组件中移除文件
+      // 先从上传组件中移除文件
       if (this.$refs[this.uploadRef]) {
         this.$refs[this.uploadRef].remove(file)
       }
@@ -402,6 +451,17 @@ export default {
       
       console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)
       
+      // 如果有 fileID，调用服务器删除 API
+      if (fileID) {
+        try {
+          await this.deleteFiles(fileID)
+        } catch (error) {
+          console.error('Failed to delete file from server:', error)
+          // 可以选择提示用户或回滚操作
+          // 这里仅记录错误，不影响前端显示
+        }
+      }
+      
       // 多文件模式下，如果删除最后一个文件，重置 groupId
       if (this.multiple && this.buildedFiles.length === 0) {
         this.groupId = null
@@ -454,6 +514,17 @@ export default {
       } else {
         // 单文件模式：只保留最新的文件
         this.buildedFiles = newBuildedFiles
+        
+        // 从 files 数组中移除已完成的文件（普通上传），避免重复显示
+        if (newBuildedFiles.length > 0 && newBuildedFiles[0].fileID) {
+          this.$nextTick(() => {
+            this.files = this.files.filter(file => {
+              const fileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
+              return fileID !== newBuildedFiles[0].fileID
+            })
+            console.log('Removed completed file from upload list (single mode)')
+          })
+        }
       }
       
       this.logFileStatus()
@@ -479,6 +550,16 @@ export default {
       if (trulyNewFiles.length > 0) {
         this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]
         console.log('Added new files, total buildedFiles:', this.buildedFiles.length)
+        
+        // 从 files 数组中移除已完成的文件（普通上传），避免重复显示
+        this.$nextTick(() => {
+          const completedFileIDs = new Set(trulyNewFiles.map(f => f.fileID))
+          this.files = this.files.filter(file => {
+            const fileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
+            return !completedFileIDs.has(fileID)
+          })
+          console.log('Removed completed files from upload list')
+        })
       }
       
       // 更新现有文件的状态（包括新添加的文件）
@@ -508,8 +589,10 @@ export default {
     
     /**
      * 异步保存文件到服务器
+     * @param {FormData} payloads - 上传参数
+     * @param {Object} uploadingFile - 正在上传的文件对象（可选）
      */
-    async saveToServerAsyncPage(payloads = {}) {
+    async saveToServerAsyncPage(payloads = {}, uploadingFile = null) {
       try {
         const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
           headers: {
@@ -520,6 +603,68 @@ export default {
         const { data } = response
         if (data !== 'saveToServerAsyncPage') {
           clearInterval(this.saveToServerAsyncPageTimer)
+          console.log('Chunk upload async save completed, file data:', data)
+          
+          const { fileID, groupID, name } = data
+          
+          // 根据上传模式处理文件信息
+          if (this.multiple) {
+            // 多文件模式：更新 groupID 并追加文件到列表
+            if (groupID) {
+              this.groupId = groupID
+              console.log('Updated groupId from server:', groupID)
+            }
+            
+            // 检查文件是否已存在，避免重复添加
+            const fileExists = this.buildedFiles.some(file => file.fileID === fileID)
+            if (!fileExists && fileID) {
+              // 将服务器返回的完整文件信息追加到文件列表
+              // 添加必要的显示属性
+              const fileData = {
+                ...data,
+                success: true  // 标记为上传成功
+              }
+              
+              // 先添加到已完成列表
+              this.buildedFiles.push(fileData)
+              console.log('File added to list:', name, 'Total files:', this.buildedFiles.length)
+              
+              // 使用 nextTick 确保视图更新后再移除上传列表中的文件，避免闪烁
+              this.$nextTick(() => {
+                // 从上传列表中精确移除对应的文件
+                if (uploadingFile) {
+                  // 如果有文件对象引用，直接移除该文件
+                  this.files = this.files.filter(file => file.id !== uploadingFile.id)
+                  console.log('Removed uploading file by id:', uploadingFile.id)
+                } else {
+                  // 否则根据文件名移除
+                  this.files = this.files.filter(file => file.name !== name)
+                  console.log('Removed uploading file by name:', name)
+                }
+              })
+              
+              // 触发 change 事件通知父组件
+              this.$emit('change', this.fileIds)
+              this.$emit('on-success', this.fileResponseData)
+            } else {
+              console.log('File already exists or invalid fileID, skip adding')
+            }
+          } else {
+            // 单文件模式：替换文件列表
+            if (fileID) {
+              const fileData = {
+                ...data,
+                success: true  // 标记为上传成功
+              }
+              this.buildedFiles = [fileData]
+              this.files = []  // 清空上传列表
+              console.log('Single file updated:', name)
+              
+              // 触发 change 事件通知父组件更新 value
+              this.$emit('change', fileID)
+              this.$emit('on-success', data)
+            }
+          }
         }
       } catch (error) {
         console.error('saveToServerAsyncPage error:', error)
@@ -634,7 +779,7 @@ export default {
       
       if (chunk && success && !active) {
         console.log('chunk end')
-        this.handleChunkComplete(response)
+        this.handleChunkComplete(response, newFile)
       }
     },
     
@@ -676,20 +821,30 @@ export default {
     
     /**
      * 处理分片上传完成
+     * @param {Object} response - 上传响应
+     * @param {Object} uploadingFile - 正在上传的文件对象（可选）
      */
-    handleChunkComplete(response) {
+    handleChunkComplete(response, uploadingFile = null) {
       const { data: { file, type } } = response
       const payloads = {
         filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
         asyncID: uuidv4(),
+        groupID: this.groupId,
         isDeleteOrigin: false,
         toImage: type === 'pdf',
         unzip: type === 'zip',
         _csrf: localStorage.getItem('token')
       }
+
+      const formData = new FormData()
+
+      Object.keys(payloads).forEach(key => {
+        formData.append(key, payloads[key])
+      })
       
+      // 将上传文件对象传递给异步保存方法
       this.saveToServerAsyncPageTimer = setInterval(() => {
-        this.saveToServerAsyncPage(payloads)
+        this.saveToServerAsyncPage(formData, uploadingFile)
       }, CONSTANTS.SAVE_INTERVAL)
     },
     

package/scripts/rollup.config.js

@@ -14,7 +14,7 @@ import { resolve } from 'path'
 /** @type { import('rollup').RollupOptions } */
 export default {
   input: 'packages/index.js',
-  external: ['vue', '@idooel/shared', 'vue-upload-component', 'moment'],
+  external: ['vue', '@idooel/shared', '@idooel/expression', 'vue-upload-component', 'moment'],
   plugins: [
     nodeResolve(),
     vue({

package/scripts/rollup.umd.config.js

@@ -8,7 +8,9 @@ export default {
     file: main,
     format: 'umd',
     globals: {
-      vue: 'Vue'
+      vue: 'Vue',
+      '@idooel/shared': '@idooel/shared',
+      '@idooel/expression': '@idooel/expression'
     },
     exports: 'named'
   }