labsop_scientific_h5/pages/todo/components/document/AttachmentList.vue

<template>
  <view class="attachment-section mt20" v-if="computedList.length">
    <view class="section-title">{{ title }}</view>
    <view class="attachment-container">
      <view 
        class="file-item" 
        v-for="(file, index) in computedList" 
        :key="index" 
        @click="handlePreview(file)"
      >
        <view class="file-inner">
          <view class="file-icon">
            <uv-icon name="file-text" size="26" color="#1c9bfd"></uv-icon>
          </view>
          <view class="file-content">
            <text class="f-name">{{ file.fileName || file.name || '-' }}</text>
            <view class="f-meta">
              <text class="f-tag">{{ file.fileType || file.type || '附件资料' }}</text>
              <text class="f-version" v-if="file.fileVersion">v{{ file.fileVersion }}</text>
              <text class="f-required" v-if="file.required">必填</text>
              <text class="f-time" v-if="file.createTime || file.fileVersionDate">
                {{ formatDate(file.createTime || file.fileVersionDate) }}
              </text>
            </view>
          </view>
          <view class="file-arrow">
            <uv-icon name="arrow-right" size="14" color="#cbd5e1"></uv-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { previewFile } from '@/utils/file';
import { formatDate } from '@/utils/date';

const props = defineProps({
  list: {
    type: Array as any,
    default: () => []
  },
  // 支持传入单个文件对象
  file: {
    type: Object as any,
    default: null
  },
  title: {
    type: String,
    default: '附件资料'
  }
});

const computedList = computed(() => {
  if (props.list && props.list.length) {
    return props.list;
  }
  if (props.file) {
    return [props.file];
  }
  return [];
});

const handlePreview = (file: any) => {
  const url = file.fileUrl || file.url;
  const name = file.fileName || file.name;
  if (url) {
    previewFile(url, name);
  }
};
</script>

<style lang="scss" scoped>
.attachment-section {
  background: #fff;
  padding: 30rpx 24rpx;
  border-radius: 16rpx;
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 24rpx;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 28rpx;
      background: #1c9bfd;
      border-radius: 4rpx;
    }
  }
}

.attachment-container {
  .file-item {
    margin-bottom: 20rpx;
    &:last-child { margin-bottom: 0; }
    
    .file-inner {
      display: flex;
      align-items: center;
      padding: 24rpx;
      background: #f8fafc;
      border-radius: 12rpx;
      border: 1rpx solid #f1f5f9;
      transition: all 0.2s;
      
      &:active {
        background: #f0f9ff;
        border-color: #1c9bfd;
        opacity: 0.8;
      }
      
      .file-icon {
        width: 80rpx;
        height: 80rpx;
        background: #eff6ff;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        flex-shrink: 0;
      }
      
      .file-content {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        
        .f-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 8rpx;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .f-meta {
          display: flex;
          align-items: center;
          
          .f-tag {
            font-size: 20rpx;
            color: #1c9bfd;
            background: #eff6ff;
            padding: 2rpx 10rpx;
            border-radius: 4rpx;
            margin-right: 12rpx;
          }
          
          .f-version {
            font-size: 20rpx;
            color: #64748b;
            background: #f1f5f9;
            padding: 2rpx 10rpx;
            border-radius: 4rpx;
            margin-right: 12rpx;
          }
          
          .f-required {
            font-size: 20rpx;
            color: #ef4444;
            background: #fef2f2;
            padding: 2rpx 10rpx;
            border-radius: 4rpx;
            margin-right: 12rpx;
          }
          
          .f-time {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
      
      .file-arrow {
        margin-left: 16rpx;
        flex-shrink: 0;
      }
    }
  }
}

.mt20 { margin-top: 20rpx; }
</style>