项目页面优化

WXL

2025-12-29 2431480f5859ef40dfdf0eb19e1ba6ddebbd9ef2

 src/views/business/appear/caseDetail.vue

@@ -1,117 +1,166 @@
<template>
  <div class="case-detail">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="basic">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="捐献编号">{{ caseData.donorNo }}</el-descriptions-item>
          <el-descriptions-item label="捐献者姓名">{{ caseData.donorName }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <dict-tag :options="genderOptions" :value="caseData.gender"/>
          </el-descriptions-item>
          <el-descriptions-item label="年龄">{{ caseData.age }}岁</el-descriptions-item>
          <el-descriptions-item label="血型">
            <dict-tag :options="bloodTypeOptions" :value="caseData.bloodType"/>
          </el-descriptions-item>
          <el-descriptions-item label="证件号码">{{ caseData.idCardNo }}</el-descriptions-item>
          <el-descriptions-item label="民族">{{ caseData.nation }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ caseData.phone }}</el-descriptions-item>
          <el-descriptions-item label="住址" :span="2">{{ caseData.address }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    <!-- 基本信息模块 -->
    <el-card class="detail-section">
      <div slot="header" class="section-header">
        <span class="section-title">基本信息</span>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="捐献编号">{{
          caseData.donorNo
        }}</el-descriptions-item>
        <el-descriptions-item label="捐献者姓名">{{
          caseData.donorName
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <dict-tag :options="genderOptions" :value="caseData.gender" />
        </el-descriptions-item>
        <el-descriptions-item label="年龄"
          >{{ caseData.age }}岁</el-descriptions-item
        >
        <el-descriptions-item label="血型">
          <dict-tag :options="bloodTypeOptions" :value="caseData.bloodType" />
        </el-descriptions-item>
        <el-descriptions-item label="证件号码">{{
          caseData.idCardNo
        }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{
          caseData.nation
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          caseData.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="住址" :span="2">{{
          caseData.address
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

      <el-tab-pane label="医疗信息" name="medical">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="疾病诊断">{{ caseData.diagnosis }}</el-descriptions-item>
          <el-descriptions-item label="住院号">{{ caseData.inpatientNo }}</el-descriptions-item>
          <el-descriptions-item label="所在科室">{{ caseData.departmentName }}</el-descriptions-item>
          <el-descriptions-item label="主治医生">{{ caseData.doctorName }}</el-descriptions-item>
          <el-descriptions-item label="传染病情况">{{ caseData.infectiousDisease || '无' }}</el-descriptions-item>
          <el-descriptions-item label="医疗记录">{{ caseData.medicalRecord }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    <!-- 医疗信息模块 -->
    <el-card class="detail-section">
      <div slot="header" class="section-header">
        <span class="section-title">医疗信息</span>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="疾病诊断">{{
          caseData.diagnosis
        }}</el-descriptions-item>
        <el-descriptions-item label="住院号">{{
          caseData.inpatientNo
        }}</el-descriptions-item>
        <el-descriptions-item label="所在科室">{{
          caseData.departmentName
        }}</el-descriptions-item>
        <el-descriptions-item label="主治医生">{{
          caseData.doctorName
        }}</el-descriptions-item>
        <el-descriptions-item label="传染病情况">{{
          caseData.infectiousDisease || "无"
        }}</el-descriptions-item>
        <el-descriptions-item label="医疗记录">{{
          caseData.medicalRecord
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

      <el-tab-pane label="医院信息" name="hospital">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="医院名称">{{ caseData.hospitalName }}</el-descriptions-item>
          <el-descriptions-item label="医院级别">{{ caseData.hospitalLevel }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ caseData.contactPerson }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ caseData.contactPhone }}</el-descriptions-item>
          <el-descriptions-item label="医院地址" :span="2">{{ caseData.hospitalAddress }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    <!-- 医院信息模块 -->
    <el-card class="detail-section">
      <div slot="header" class="section-header">
        <span class="section-title">医院信息</span>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="医院名称">{{
          caseData.hospitalName
        }}</el-descriptions-item>
        <el-descriptions-item label="医院级别">{{
          caseData.hospitalLevel
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{
          caseData.contactPerson
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          caseData.contactPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="医院地址" :span="2">{{
          caseData.hospitalAddress
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

      <!-- 新增附件信息标签页 -->
      <el-tab-pane label="附件信息" name="attachments">
        <el-card class="attachment-card">
          <div slot="header" class="clearfix">
            <span>附件列表</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="handleUpload"
    <!-- 附件信息模块 -->
    <el-card class="detail-section">
      <div slot="header" class="section-header">
        <span class="section-title">附件信息</span>
        <el-button type="text" icon="el-icon-upload" @click="handleUpload"
          >上传附件</el-button
        >
      </div>
      <el-table :data="attachmentList" style="width: 100%">
        <el-table-column label="文件名" width="300">
          <template slot-scope="scope">
            <i class="el-icon-document" style="margin-right: 8px;"></i>
            <span>{{ scope.row.fileName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="文件类型" width="120">
          <template slot-scope="scope">
            <el-tag size="small">{{ scope.row.fileType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="大小" width="100">
          <template slot-scope="scope">
            <span>{{ formatFileSize(scope.row.fileSize) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上传时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.uploadTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handlePreview(scope.row)"
              >预览</el-button
            >
              上传附件
            </el-button>
          </div>
            <el-button
              size="mini"
              type="success"
              @click="handleDownload(scope.row)"
              >下载</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

          <el-table :data="attachmentList" style="width: 100%">
            <el-table-column label="文件名" width="300">
              <template slot-scope="scope">
                <i class="el-icon-document" style="margin-right: 8px;"></i>
                <span>{{ scope.row.fileName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件类型" width="120">
              <template slot-scope="scope">
                <el-tag size="small">{{ scope.row.fileType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="大小" width="100">
              <template slot-scope="scope">
                <span>{{ formatFileSize(scope.row.fileSize) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="上传时间" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.uploadTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handlePreview(scope.row)"
                  >预览</el-button
                >
                <el-button
                  size="mini"
                  type="success"
                  @click="handleDownload(scope.row)"
                  >下载</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="审批信息" name="approval" v-if="caseData.status !== '0'">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="审批结果">
            <el-tag :type="caseData.status | statusFilter">
              {{ caseData.status | statusTextFilter }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审批时间">{{ caseData.approveTime }}</el-descriptions-item>
          <el-descriptions-item label="审批人">{{ caseData.approverName }}</el-descriptions-item>
          <el-descriptions-item label="审批意见">{{ caseData.approveOpinion }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
    <!-- 审批信息模块（如有） -->
    <el-card class="detail-section" v-if="caseData.status !== '0'">
      <div slot="header" class="section-header">
        <span class="section-title">审批信息</span>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="审批结果">
          <el-tag :type="caseData.status | statusFilter">
            {{ caseData.status | statusTextFilter }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审批时间">{{
          caseData.approveTime
        }}</el-descriptions-item>
        <el-descriptions-item label="审批人">{{
          caseData.approverName
        }}</el-descriptions-item>
        <el-descriptions-item label="审批意见">{{
          caseData.approveOpinion
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- PDF预览弹窗 -->
    <el-dialog
@@ -229,7 +278,7 @@
      </div>
    </el-dialog>

    <div class="detail-footer">
    <div class="detail-footer" v-if="showtitle">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
@@ -247,29 +296,33 @@
    caseData: {
      type: Object,
      default: () => ({})
    },
    showtitle: {
      type: Boolean,
      default: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '0': 'warning',
        '1': 'success',
        '2': 'danger'
        "0": "warning",
        "1": "success",
        "2": "danger"
      };
      return statusMap[status];
    },
    statusTextFilter(status) {
      const statusMap = {
        '0': '待审批',
        '1': '已通过',
        '2': '已驳回'
        "0": "待审批",
        "1": "已通过",
        "2": "已驳回"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      activeTab: 'basic',
      activeTab: "basic",
      genderOptions: [
        { value: "0", label: "男" },
        { value: "1", label: "女" }
@@ -333,12 +386,15 @@
  },
  methods: {
    handleClose() {
      this.$emit('close');
      this.$emit("close");
    },

    // 获取文件类型
    getFileType(fileName) {
      const extension = fileName.split('.').pop().toLowerCase();
      const extension = fileName
        .split(".")
        .pop()
        .toLowerCase();
      const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
      const pdfTypes = ["pdf"];