vue2-client 1.14.65 → 1.14.67

package/src/components/FileImageItem/FileItem.vue

@@ -1,23 +1,59 @@
 <template>
-  <div>
-    <!-- 文件 -->
-    <div v-for="file in files" :key="file.id">
-      <a class="file-item">
-        <span class="file-action" @click="preview(file.url)">
-          <a-icon type="link" />{{ file.name }}
-        </span>
-        <span class="file-action" @click="preview(file.url)">
-          <a-icon type="eye" />预览
-        </span>
-        <a v-if="downloadable" class="file-action" @click="download(file)"><a-icon type="download" />下载</a>
-      </a>
+  <div class="file-list">
+    <div class="file-grid">
+      <div v-for="file in files" :key="file.id" class="file-item">
+        <div class="file-info">
+          <div class="file-icon-wrapper" :class="getFileTypeClass(file.name)">
+            <a-icon :type="getFileIcon(file.name)" class="file-icon" />
+          </div>
+          <div class="file-content">
+            <div class="file-header">
+              <span class="file-name">{{ file.name }}</span>
+              <span class="file-type">{{ getFileType(file.name) }}</span>
+            </div>
+            <div class="file-footer">
+              <span class="file-size" v-if="file.size">{{ formatFileSize(file.size) }}</span>
+              <span class="file-time" v-if="file.upload_time">{{ file.upload_time }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="file-actions">
+          <a-tooltip title="预览文件">
+            <a-button type="link" class="action-btn preview-btn" @click="handlePreview(file.url)">
+              <a-icon type="eye" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip v-if="downloadable" title="下载文件">
+            <a-button type="link" class="action-btn download-btn" @click="download(file)">
+              <a-icon type="download" />
+            </a-button>
+          </a-tooltip>
+        </div>
+      </div>
     </div>
+    <!-- 文件预览弹窗 -->
+    <a-modal
+      v-model="previewVisible"
+      :footer="null"
+      :dialog-style="{ top: '20px' }"
+      width="85%"
+      :z-index="1001"
+      title="文件预览"
+      @cancel="handlePreviewClose"
+    >
+      <file-preview :path="previewPath" />
+    </a-modal>
   </div>
 </template>
 
 <script>
+import FilePreview from '@vue2-client/components/FilePreview'
+
 export default {
   name: 'FileImageItem',
+  components: {
+    FilePreview
+  },
   props: {
     files: {
       type: Array,
@@ -29,32 +65,241 @@ export default {
       default: true
     }
   },
+  data () {
+    return {
+      previewVisible: false,
+      previewPath: ''
+    }
+  },
   methods: {
-    preview (path) {
-      this.$emit('preview', path)
+    handlePreview (path) {
+      this.previewPath = path
+      this.previewVisible = true
+    },
+    handlePreviewClose () {
+      this.previewVisible = false
+      this.previewPath = ''
     },
-    // 文件下载
     download (file) {
       const a = document.createElement('a')
       a.href = file.url
       a.download = file.name
       a.click()
+    },
+    formatFileSize (size) {
+      if (!size) return ''
+      // 如果小于1M，转换为KB显示
+      if (size < 1) {
+        const kbSize = size * 1024
+        return `${kbSize.toFixed(1)} KB`
+      }
+      // 大于等于1M，保持M为单位
+      return `${size.toFixed(1)} MB`
+    },
+    getFileType (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      const typeMap = {
+        pdf: 'PDF文档',
+        doc: 'Word文档',
+        docx: 'Word文档',
+        xls: 'Excel表格',
+        xlsx: 'Excel表格',
+        ppt: 'PPT演示',
+        pptx: 'PPT演示',
+        jpg: '图片',
+        jpeg: '图片',
+        png: '图片',
+        gif: '图片',
+        txt: '文本文件',
+        zip: '压缩文件',
+        rar: '压缩文件'
+      }
+      return typeMap[ext] || '文件'
+    },
+    getFileIcon (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      const iconMap = {
+        pdf: 'file-pdf',
+        doc: 'file-word',
+        docx: 'file-word',
+        xls: 'file-excel',
+        xlsx: 'file-excel',
+        ppt: 'file-ppt',
+        pptx: 'file-ppt',
+        jpg: 'file-image',
+        jpeg: 'file-image',
+        png: 'file-image',
+        gif: 'file-image',
+        txt: 'file-text',
+        zip: 'file-zip',
+        rar: 'file-zip'
+      }
+      return iconMap[ext] || 'file'
+    },
+    getFileTypeClass (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      return `file-type-${ext}`
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.file-item {
-  .file-action {
-    padding: 3px 4px;
-    color: #1890ff;
+.file-list {
+  .file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 16px;
+  }
+
+  .file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    background: #fff;
+    border-radius: 12px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+
     &:hover {
-      background: #e6f7ff;
+      transform: translateY(-2px);
+      border-color: @primary-2;
+      background: rgba(24, 144, 255, 0.02);
+    }
+
+    .file-info {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+
+      .file-icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        margin-right: 16px;
+        border-radius: 12px;
+        transition: all 0.3s;
+
+        &.file-type-pdf {
+          background: linear-gradient(135deg, #ff4d4f, #ff7875);
+        }
+        &.file-type-doc, &.file-type-docx {
+          background: linear-gradient(135deg, #1890ff, #69c0ff);
+        }
+        &.file-type-xls, &.file-type-xlsx {
+          background: linear-gradient(135deg, #52c41a, #95de64);
+        }
+        &.file-type-ppt, &.file-type-pptx {
+          background: linear-gradient(135deg, #fa8c16, #ffc069);
+        }
+        &.file-type-jpg, &.file-type-jpeg, &.file-type-png, &.file-type-gif {
+          background: linear-gradient(135deg, #722ed1, #b37feb);
+        }
+        &.file-type-txt {
+          background: linear-gradient(135deg, #13c2c2, #5cdbd3);
+        }
+        &.file-type-zip, &.file-type-rar {
+          background: linear-gradient(135deg, #eb2f96, #ff85c0);
+        }
+
+        .file-icon {
+          font-size: 24px;
+          color: #fff;
+        }
+      }
+
+      .file-content {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        flex: 1;
+
+        .file-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 4px;
+
+          .file-name {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 15px;
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+            width: 0;
+            flex: 1;
+          }
+
+          .file-type {
+            color: rgba(0, 0, 0, 0.45);
+            font-size: 12px;
+            padding: 2px 6px;
+            background: rgba(0, 0, 0, 0.04);
+            border-radius: 4px;
+          }
+        }
+
+        .file-footer {
+          display: flex;
+          align-items: center;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 12px;
+
+          .file-size {
+            margin-right: 12px;
+          }
+
+          .file-time {
+            position: relative;
+            padding-left: 12px;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 4px;
+              height: 4px;
+              background: rgba(0, 0, 0, 0.25);
+              border-radius: 50%;
+            }
+          }
+        }
+      }
+    }
+
+    .file-actions {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .action-btn {
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        margin-left: 8px;
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.45);
+        background: transparent;
+        transition: all 0.3s;
+
+        &:hover {
+          color: #fff;
+          background: @primary-color;
+          transform: scale(1.05);
+        }
+
+        .anticon {
+          font-size: 16px;
+        }
+      }
     }
-  }
-  .anticon {
-    margin-right: 3px;
   }
 }
 </style>

package/src/components/FileImageItem/FileItemGroup.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="file-item-group">
+    <!-- 搜索区域 -->
+    <div class="search-area">
+      <a-form-model ref="searchForm" :model="formData" layout="inline">
+        <a-form-model-item prop="dateRange">
+          <a-range-picker
+            v-model="formData.dateRange"
+            :ranges="dateRanges"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :placeholder="['开始时间', '结束时间']"
+            @change="handleDateChange"
+          />
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button type="primary" :loading="loading" @click="handleSearch">
+            <a-icon type="search" />查询
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+
+    <!-- 文件列表区域 -->
+    <template v-if="Object.keys(groupedFiles).length > 0">
+      <div class="file-list-container">
+        <a-spin :spinning="loading">
+          <template v-for="(group, date) in groupedFiles">
+            <div :key="date" class="file-group">
+              <div class="group-header">
+                <a-icon type="calendar" />
+                <span class="date-label">{{ formatDate(date) }}</span>
+                <span class="file-count">({{ group.length }}个文件)</span>
+              </div>
+              <file-item
+                  :files="group"
+                  :downloadable="downloadable"
+              />
+            </div>
+          </template>
+        </a-spin>
+      </div>
+    </template>
+    <template v-else>
+      <a-empty></a-empty>
+    </template>
+  </div>
+</template>
+
+<script>
+import FileItem from './FileItem.vue'
+
+export default {
+  name: 'FileItemGroup',
+  components: {
+    FileItem
+  },
+  props: {
+    downloadable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    const now = new Date()
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const yesterday = new Date(today)
+    yesterday.setDate(yesterday.getDate() - 1)
+    const last7Days = new Date(today)
+    last7Days.setDate(last7Days.getDate() - 6)
+    const last30Days = new Date(today)
+    last30Days.setDate(last30Days.getDate() - 29)
+
+    return {
+      loading: false,
+      formData: {
+        dateRange: []
+      },
+      files: [],
+      dateRanges: {
+        今天: [today, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        昨天: [yesterday, new Date(yesterday.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        最近7天: [last7Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        最近30天: [last30Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)]
+      }
+    }
+  },
+  mounted () {
+    this.handleSearch()
+  },
+  computed: {
+    groupedFiles () {
+      const groups = {}
+      this.files.forEach(file => {
+        const date = file.upload_time.split(' ')[0]
+        if (!groups[date]) {
+          groups[date] = []
+        }
+        groups[date].push(file)
+      })
+      // 按日期降序排序
+      return Object.fromEntries(
+        Object.entries(groups).sort(([a], [b]) => b.localeCompare(a))
+      )
+    }
+  },
+  methods: {
+    handleDateChange (dates) {
+      this.formData.dateRange = dates
+    },
+    handleSearch () {
+      this.$refs.searchForm.validate(async valid => {
+        if (valid) {
+          this.loading = true
+          let queryDate
+          if (this.formData.dateRange && this.formData.dateRange.length > 0) {
+            queryDate = this.formData.dateRange
+          } else {
+            queryDate = undefined
+          }
+          const callback = (res) => {
+            this.files = res.files
+            this.loading = false
+          }
+          const errorCallback = (e) => {
+            this.$message.error('获取文件列表失败:' + e.getMessage())
+            this.loading = false
+          }
+          this.$emit('search', queryDate, callback, errorCallback)
+        } else {
+          this.$message.error('请检查日期选择是否正确')
+        }
+      })
+    },
+    formatDate (date) {
+      const today = new Date().toISOString().split('T')[0]
+      const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+
+      if (date === today) {
+        return '今天'
+      } else if (date === yesterday) {
+        return '昨天'
+      }
+
+      const [year, month, day] = date.split('-')
+      return `${year}年${month}月${day}日`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.file-item-group {
+  .search-area {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  }
+
+  .file-list-container {
+    .file-group {
+      margin-bottom: 24px;
+
+      .group-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 8px 16px;
+        background: #fafafa;
+        border-radius: 6px;
+
+        .anticon {
+          margin-right: 8px;
+          color: @primary-color;
+        }
+
+        .date-label {
+          font-size: 15px;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.85);
+        }
+
+        .file-count {
+          margin-left: 8px;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/FileImageItem/ImageItem.vue

@@ -4,15 +4,32 @@
     <span v-for="img in images" :key="img.id" class="picture-card" :style="{ width: cardSize, height: cardSize }">
       <img :src="img.url" :alt="img.name" />
       <span class="picture-action" :style="{ width: actionSize, height: actionSize }">
-        <a-icon type="eye" class="picture-preview-icon" @click="preview(img.url)" />
+        <a-icon type="eye" class="picture-preview-icon" @click="handlePreview(img.url)" />
       </span>
     </span>
+    <!-- 图片预览弹窗 -->
+    <a-modal
+      v-model="previewVisible"
+      :footer="null"
+      :dialog-style="{ top: '20px' }"
+      width="85%"
+      :z-index="1001"
+      title="图片预览"
+      @cancel="handlePreviewClose"
+    >
+      <file-preview :path="previewPath" />
+    </a-modal>
   </div>
 </template>
 
 <script>
+import FilePreview from '@vue2-client/components/FilePreview'
+
 export default {
   name: 'ImageItem',
+  components: {
+    FilePreview
+  },
   props: {
     images: {
       type: Array,
@@ -23,6 +40,12 @@ export default {
       default: 150
     }
   },
+  data () {
+    return {
+      previewVisible: false,
+      previewPath: ''
+    }
+  },
   computed: {
     cardSize: function () {
       return this.width + 'px'
@@ -32,8 +55,13 @@ export default {
     }
   },
   methods: {
-    preview (path) {
-      this.$emit('preview', path)
+    handlePreview (path) {
+      this.previewPath = path
+      this.previewVisible = true
+    },
+    handlePreviewClose () {
+      this.previewVisible = false
+      this.previewPath = ''
     }
   }
 }
@@ -51,6 +79,7 @@ export default {
   img {
     width: 100%;
     height: 100%;
+    object-fit: cover;
   }
   .picture-action {
     position: absolute;

package/src/pages/WorkflowDetail/WorkFlowDemo.vue

@@ -6,7 +6,7 @@ export default {
   components: { WorkflowDetail },
   mounted () {
     this.$refs.workFlow.init({
-      workflowId: '11'
+      workflowId: '54'
     })
   },
   methods: {

package/src/pages/WorkflowDetail/WorkflowDetail.vue

@@ -87,13 +87,11 @@
             </a-tab-pane>
 
             <!-- 查看附件标签页 -->
-            <!--            <a-tab-pane key="5" tab="查看附件">-->
-            <!--              <template v-if="details">-->
-            <!--                <XUploadFilesView-->
-            <!--                  :currUserInfo="{ f_userinfo_id: 90613 }"-->
-            <!--                />-->
-            <!--              </template>-->
-            <!--            </a-tab-pane>-->
+            <a-tab-pane key="5" tab="查看附件">
+              <template v-if="activeKey === '5' && details">
+                <file-item-group @search="getWorkFlowFiles"/>
+              </template>
+            </a-tab-pane>
           </a-tabs>
         </a-card>
       </div>
@@ -111,10 +109,12 @@ import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
 import WorkflowLog from './WorkflowPageDetail/WorkflowLog.vue'
 import LeaveMessage from './WorkflowPageDetail/LeaveMessage'
 import XUploadFilesView from '@vue2-client/base-client/components/common/XUploadFilesView/index.vue'
+import FileItemGroup from '@vue2-client/components/FileImageItem/FileItemGroup.vue'
 
 export default {
   name: 'WorkflowDetail',
   components: {
+    FileItemGroup,
     workflowBaseInformation,
     WorkFlowHandle,
     XFormTable,
@@ -208,6 +208,15 @@ export default {
           console.log(err)
         })
     },
+    // 获取附件列表
+    getWorkFlowFiles (date, callback, errorCallback) {
+      postByServiceName(workFlowViewApi.getWorkFlowAttachments, {
+        workflowId: this.workflowId,
+        uploadDate: date
+      })
+        .then(res => callback(res))
+        .catch((e) => errorCallback(e))
+    },
     async reload () {
       await this.getSteps()
       await this.getBaseInfo()