项目页面优化

WXL

2025-12-29 2431480f5859ef40dfdf0eb19e1ba6ddebbd9ef2

 src/views/business/appear/caseDetail.vue

@@ -1,163 +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
@@ -275,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>
@@ -293,6 +296,10 @@
    caseData: {
      type: Object,
      default: () => ({})
    },
    showtitle: {
      type: Boolean,
      default: true
    }
  },
  filters: {