青岛维护

WXL

3 天以前 4c9fdc87987140e8b2c3f0dfc2f6608cdb6be774

 src/views/business/appear/caseDetail.vue

@@ -200,91 +200,98 @@
        <span class="section-title">附件信息</span>
      </div>
      <div class="detail-attachments">
        <div class="attachment-grid">
          <div
            v-for="file in caseData.annexfilesList"
            :key="file.id || file.fileName"
            class="attachment-card"
          >
            <template v-if="isImageFile(file.fileName || file.path)">
              <!-- 图片使用 el-image 预览 -->
              <el-image
                class="image-attachment"
                :src="getFileUrl(file)"
                :preview-src-list="getImagePreviewList(file)"
                fit="cover"
                :style="{ width: '120px', height: '120px' }"
                lazy
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline"></i>
                  <span>加载失败</span>
                </div>
                <div slot="placeholder" class="image-loading">
                  <i class="el-icon-loading"></i>
                </div>
              </el-image>
              <div class="image-info">
                <div class="file-name" :title="file.fileName">
                  {{ file.fileName }}
                </div>
                <div class="file-actions">
                  <el-button
                    type="text"
                    size="mini"
                    @click="handleDownload(file)"
                    icon="el-icon-download"
                    title="下载"
                  />
                  <el-button
                    type="text"
                    size="mini"
                    @click="handlePreview(file)"
                    icon="el-icon-view"
                    title="预览"
                  />
                </div>
              </div>
            </template>

            <template v-else>
              <!-- 非图片文件使用卡片样式 -->
              <el-card shadow="hover" class="file-card">
                <div class="file-content">
                  <i :class="getFileIcon(file.fileName)" class="file-icon"></i>
                  <div class="file-info">
                    <div class="file-name" :title="file.fileName">
                      {{ file.fileName }}
                    </div>
                    <div class="file-meta">
                      <span class="file-type">{{
                        getFileTypeText(file.fileName)
                      }}</span>
                      <span v-if="file.createTime" class="file-time">
                        {{ formatDateTime(file.createTime) }}
                      </span>
                    </div>
        <div
          v-for="group in attachmentGroups"
          :key="group.label"
          class="attachment-group"
        >
          <div class="attachment-group-title">{{ group.label }}</div>
          <div class="attachment-grid">
            <div
              v-for="file in group.files"
              :key="file.id || file.fileName"
              class="attachment-card"
            >
              <template v-if="isImageFile(file.fileName || file.path)">
                <!-- 图片使用 el-image 预览 -->
                <el-image
                  class="image-attachment"
                  :src="getFileUrl(file)"
                  :preview-src-list="getImagePreviewList(file)"
                  fit="cover"
                  :style="{ width: '120px', height: '120px' }"
                  lazy
                >
                  <div slot="error" class="image-error">
                    <i class="el-icon-picture-outline"></i>
                    <span>加载失败</span>
                  </div>
                  <div slot="placeholder" class="image-loading">
                    <i class="el-icon-loading"></i>
                  </div>
                </el-image>
                <div class="image-info">
                  <div class="file-name" :title="file.fileName">
                    {{ file.fileName }}
                  </div>
                  <div class="file-actions">
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleDownload(file)"
                      icon="el-icon-download"
                      title="下载"
                    />
                    <el-button
                      type="text"
                      size="mini"
                      @click="handlePreview(file)"
                      icon="el-icon-view"
                      title="预览"
                    />
                  </div>
                </div>
                <div class="file-actions">
                  <el-button
                    type="text"
                    size="mini"
                    @click="handleDownload(file)"
                  >
                    下载
                  </el-button>
                  <el-button
                    v-if="canPreview(file.fileName)"
                    type="text"
                    size="mini"
                    @click="handlePreview(file)"
                  >
                    预览
                  </el-button>
                </div>
              </el-card>
            </template>
              </template>

              <template v-else>
                <!-- 非图片文件使用卡片样式 -->
                <el-card shadow="hover" class="file-card">
                  <div class="file-content">
                    <i :class="getFileIcon(file.fileName)" class="file-icon"></i>
                    <div class="file-info">
                      <div class="file-name" :title="file.fileName">
                        {{ file.fileName }}
                      </div>
                      <div class="file-meta">
                        <span class="file-type">{{
                          getFileTypeText(file.fileName)
                        }}</span>
                        <span v-if="file.createTime" class="file-time">
                          {{ formatDateTime(file.createTime) }}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="file-actions">
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleDownload(file)"
                    >
                      下载
                    </el-button>
                    <el-button
                      v-if="canPreview(file.fileName)"
                      type="text"
                      size="mini"
                      @click="handlePreview(file)"
                    >
                      预览
                    </el-button>
                  </div>
                </el-card>
              </template>
            </div>
          </div>
        </div>
      </div>
@@ -492,6 +499,32 @@
        .filter(file => this.isImageFile(file.fileName || file.path))
        .map(file => this.getFileUrl(file))
        .filter(url => url);
    },
    // 按分类分组附件（捐献者登记阶段：登记表附件/证件照/疾病诊断治疗）
    attachmentGroups() {
      const list = this.caseData.annexfilesList;
      if (!Array.isArray(list) || list.length === 0) return [];
      const categories = [
        { value: "登记表附件", label: "人体器官潜在捐献者登记表附件" },
        { value: "证件照", label: "证件照" },
        { value: "疾病诊断治疗", label: "疾病诊断治疗" }
      ];
      const groups = categories
        .map(cat => ({
          label: cat.label,
          files: list.filter(f => (f.fileType || "").trim() === cat.value)
        }))
        .filter(group => group.files.length > 0);
      // 未分类附件兜底，避免丢失旧数据
      const classifiedValues = categories.map(c => c.value);
      const unclassified = list.filter(f => {
        const t = (f.fileType || "").trim();
        return !t || !classifiedValues.includes(t);
      });
      if (unclassified.length > 0) {
        groups.push({ label: "未分类", files: unclassified });
      }
      return groups;
    }
  },
  created() {
@@ -855,6 +888,19 @@
  padding: 10px 0;
}

.attachment-group {
  margin-bottom: 20px;
}

.attachment-group-title {
  font-size: 14px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));