@ebiz/designer-components 0.1.48 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizApprovalForm.vue

@@ -15,6 +15,9 @@
         <t-textarea placeholder="请输入" :maxLength="200" :maxCharacter="true" class="component-base-style"
           v-model="comments"></t-textarea>
       </t-form-item>
+      <t-form-item label="附件">
+        <ebiz-upload v-model="attachments" :multiple="true" theme="file" />
+      </t-form-item>
       <t-form-item>
         <div class="button-group">
           <div class="more-actions">
@@ -95,6 +98,7 @@ import {
 } from 'tdesign-vue-next'
 import { defineProps, defineEmits, ref, reactive, computed, onMounted } from 'vue'
 import { dataService, EbizEmployeeSelector, EbizApproval } from '../index'
+import { EbizUpload } from '../index.js'
 
 const request = (params = {}, apiConfig = {}, url = '') => {
   return dataService.fetch(params, apiConfig, url)
@@ -134,6 +138,7 @@ const emit = defineEmits(['pass', 'reject', 'refresh'])
 
 // 基础数据
 const comments = ref('')
+const attachments = ref([])
 const showMoreActions = ref(false)
 const taskType = ref('')
 
@@ -295,6 +300,7 @@ const handlePass = async () => {
   const params = {
     taskId: props.taskId,
     comment: comments.value,
+    attachments: attachments.value,
     approve: true,
     ccList: selectedCCList.value || []
   }
@@ -307,6 +313,7 @@ const handlePass = async () => {
   try {
     await emit('pass', params)
     comments.value = ''
+    attachments.value = []
   } catch (err) {
     MessagePlugin.error(err.message || '操作失败')
   }
@@ -317,6 +324,7 @@ const handleReject = async () => {
   try {
     await emit('reject', comments.value)
     comments.value = ''
+    attachments.value = []
   } catch (err) {
     MessagePlugin.error(err.message || '操作失败')
   }

package/src/components/EbizFileList.vue

@@ -1,73 +1,49 @@
 <template>
-  <div class="ebiz-file-list">
+  <div class="ebiz-file-list" :class="{ 'mini-mode': size === 'mini' }">
     <div v-if="computedFiles.length === 0" class="empty-state">
       <t-icon name="file" size="48px" />
       <p>暂无文件</p>
     </div>
-    <div v-else class="file-list-container">
-      <div 
-        v-for="(file, index) in computedFiles" 
-        :key="index" 
-        class="file-item"
-        @click="handleFileClick(file)"
-      >
+    <div v-else class="file-list-container" :class="{ 'mini-container': size === 'mini' }">
+      <div v-for="(file, index) in computedFiles" :key="index" class="file-item"
+        :class="{ 'mini-item': size === 'mini' }" @click="handleFileClick(file)">
         <!-- 图片文件直接显示缩略图 -->
         <div v-if="isImage(file.extension)" class="file-icon">
-          <t-image
-            :src="file.url"
-            :alt="file.name"
-            fit="cover"
-            loading="lazy"
-            :style="{ width: imageSize, height: imageSize, borderRadius: '4px' }"
-            @error="handleImageError"
-          />
+          <t-image :src="file.url" :alt="file.name" fit="cover" loading="lazy"
+            :style="{ width: actualImageSize, height: actualImageSize, borderRadius: '4px' }" error="" />
         </div>
-        
+
         <!-- 非图片文件显示图标 -->
         <div v-else class="file-icon">
-          <t-icon :name="getFileIcon(file.extension)" :size="imageSize" :style="{ color: getFileColor(file.extension) }" />
+          <t-icon :name="getFileIcon(file.extension)" :size="actualImageSize"
+            :style="{ color: getFileColor(file.extension) }" />
         </div>
-        
-        <div class="file-info">
+
+        <div v-if="size !== 'mini'" class="file-info">
           <div class="file-name" :title="file.name">{{ file.name }}</div>
           <div class="file-meta">
             <span v-if="showFileType" class="file-type">{{ file.extension?.toUpperCase() || '未知' }}</span>
             <span v-if="showFileSize && file.size" class="file-size">{{ formatFileSize(file.size) }}</span>
           </div>
         </div>
-        
+
         <!-- 操作按钮 -->
-        <div v-if="showActions" class="file-actions">
-          <t-button 
-            size="small" 
-            variant="text" 
-            @click.stop="handleDownload(file)"
-            :title="isImage(file.extension) ? '查看' : '下载'"
-          >
+        <div v-if="showActions && size !== 'mini'" class="file-actions">
+          <t-button size="small" variant="text" @click.stop="handleDownload(file)"
+            :title="isImage(file.extension) ? '查看' : '下载'">
             <t-icon :name="isImage(file.extension) ? 'view-list' : 'download'" />
           </t-button>
-          <t-button 
-            v-if="allowDelete" 
-            size="small" 
-            variant="text" 
-            theme="danger"
-            @click.stop="handleDelete(file, index)"
-            title="删除"
-          >
+          <t-button v-if="allowDelete" size="small" variant="text" theme="danger"
+            @click.stop="handleDelete(file, index)" title="删除">
             <t-icon name="delete" />
           </t-button>
         </div>
       </div>
     </div>
-    
+
     <!-- 图片预览弹窗 -->
-    <t-image-viewer
-      v-model:visible="previewVisible"
-      :images="previewImages"
-      :index="previewIndex"
-      :close-on-esc="true"
-      @close="previewVisible = false"
-    />
+    <t-image-viewer v-model:visible="previewVisible" :images="previewImages" :index="previewIndex" :close-on-esc="true"
+      @close="previewVisible = false" />
   </div>
 </template>
 
@@ -87,6 +63,11 @@ const props = defineProps({
     type: [Array, String],
     default: () => []
   },
+  // 尺寸大小，支持default和mini
+  size: {
+    type: String,
+    default: 'default'
+  },
   // 图片尺寸
   imageSize: {
     type: String,
@@ -145,18 +126,18 @@ const getFileExtension = (filename) => {
 // 提取文件名
 const extractFileName = (url) => {
   if (!url) return '未知文件';
-  
+
   // 移除查询参数和锚点
   const cleanUrl = url.split('?')[0].split('#')[0];
   const parts = cleanUrl.split('/');
   let fileName = parts[parts.length - 1] || '未知文件';
-  
+
   // 如果文件名为空或只是扩展名，生成一个默认名称
   if (!fileName || fileName.startsWith('.')) {
     const extension = getFileExtension(fileName || url);
     fileName = extension ? `文件.${extension}` : '未知文件';
   }
-  
+
   return fileName;
 };
 
@@ -165,7 +146,7 @@ const parseFileInfo = (url) => {
   const fullUrl = getFullUrl(url);
   const fileName = extractFileName(url);
   const extension = getFileExtension(fileName);
-  
+
   return {
     name: fileName,
     url: fullUrl,
@@ -177,12 +158,12 @@ const parseFileInfo = (url) => {
 // 计算文件列表
 const computedFiles = computed(() => {
   let fileList = [];
-  
+
   if (typeof props.files === 'string') {
     if (!props.files.trim()) {
       return [];
     }
-    
+
     // 判断是单个URL还是逗号分隔的多个URL
     if (props.files.includes(',')) {
       // 逗号分隔的多个URL
@@ -219,7 +200,7 @@ const computedFiles = computed(() => {
       }
     }).filter(file => file.url); // 过滤掉没有URL的文件
   }
-  
+
   return fileList;
 });
 
@@ -235,7 +216,7 @@ const getFileIcon = (extension) => {
     // 文档类
     'pdf': 'file-pdf',
     'doc': 'file-word',
-    'docx': 'file-word', 
+    'docx': 'file-word',
     'xls': 'file-excel',
     'xlsx': 'file-excel',
     'ppt': 'file-powerpoint',
@@ -263,7 +244,7 @@ const getFileIcon = (extension) => {
     'mov': 'file-video',
     'wmv': 'file-video'
   };
-  
+
   return iconMap[extension?.toLowerCase()] || 'file';
 };
 
@@ -283,22 +264,27 @@ const getFileColor = (extension) => {
     'mp3': '#FF9800',
     'mp4': '#795548'
   };
-  
+
   return colorMap[extension?.toLowerCase()] || '#666666';
 };
 
+// 计算实际使用的图片尺寸
+const actualImageSize = computed(() => {
+  return props.size === 'mini' ? '20px' : props.imageSize;
+});
+
 // 格式化文件大小
 const formatFileSize = (bytes) => {
   if (!bytes) return '';
   const units = ['B', 'KB', 'MB', 'GB'];
   let size = bytes;
   let unitIndex = 0;
-  
+
   while (size >= 1024 && unitIndex < units.length - 1) {
     size /= 1024;
     unitIndex++;
   }
-  
+
   return `${size.toFixed(1)} ${units[unitIndex]}`;
 };
 
@@ -317,7 +303,7 @@ const handleDownload = (file) => {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-  
+
   emit('file-download', file);
 };
 
@@ -327,14 +313,14 @@ const handlePreview = (file) => {
   previewImages.value = imageFiles.map(f => f.url);
   previewIndex.value = imageFiles.findIndex(f => f.url === file.url);
   previewVisible.value = true;
-  
+
   emit('file-preview', file);
 };
 
 // 文件点击处理
 const handleFileClick = (file) => {
   emit('file-click', file);
-  
+
   if (isImage(file.extension)) {
     // 图片文件，显示预览
     handlePreview(file);
@@ -361,7 +347,16 @@ const handleImageError = () => {
 <style lang="less" scoped>
 .ebiz-file-list {
   width: 100%;
-  
+
+  &.mini-mode {
+    .file-list-container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+  }
+
   .empty-state {
     display: flex;
     flex-direction: column;
@@ -369,19 +364,24 @@ const handleImageError = () => {
     justify-content: center;
     padding: 40px;
     color: #999;
-    
+
     p {
       margin: 8px 0 0 0;
       font-size: 14px;
     }
   }
-  
+
   .file-list-container {
     display: flex;
     flex-direction: column;
     gap: 8px;
+
+    &.mini-container {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
   }
-  
+
   .file-item {
     display: flex;
     align-items: center;
@@ -391,31 +391,49 @@ const handleImageError = () => {
     cursor: pointer;
     transition: all 0.3s;
     background: #fff;
-    
+
+    &.mini-item {
+      padding: 0;
+      border: none;
+      background: transparent;
+      box-shadow: none;
+      margin-right: 8px;
+      margin-bottom: 8px;
+
+      &:hover {
+        border-color: transparent;
+        box-shadow: none;
+      }
+    }
+
     &:hover {
       border-color: #0052d9;
       box-shadow: 0 2px 8px rgba(0, 82, 217, 0.15);
-      
+
       .file-actions {
         opacity: 1;
       }
     }
   }
-  
+
   .file-icon {
     margin-right: 12px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: v-bind(imageSize);
-    height: v-bind(imageSize);
+    width: v-bind(actualImageSize);
+    height: v-bind(actualImageSize);
+
+    .mini-item & {
+      margin-right: 0;
+    }
   }
-  
+
   .file-info {
     flex: 1;
     min-width: 0;
-    
+
     .file-name {
       font-size: 14px;
       font-weight: 500;
@@ -425,11 +443,11 @@ const handleImageError = () => {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    
+
     .file-meta {
       display: flex;
       gap: 8px;
-      
+
       .file-size,
       .file-type {
         font-size: 12px;
@@ -437,7 +455,7 @@ const handleImageError = () => {
       }
     }
   }
-  
+
   .file-actions {
     display: flex;
     gap: 4px;
@@ -446,6 +464,4 @@ const handleImageError = () => {
     flex-shrink: 0;
   }
 }
-
-
-</style> 
+</style>