bug修改代码提交

Bang Hu

昨天 8a709ba6db50831048f9c3e2452ea6dc6c3de36f

 src/views/tradeManage/detail/index.vue

@@ -2,84 +2,103 @@
  <div class="default-main">
    <!-- 订单信息 + 申请人信息 + 交易内容（合并为同一卡片） -->
    <el-card shadow="never">
      <el-descriptions
        :column="2"
        border
        class="mt10 order-desc fixed-label"
        label-width="180px"
        :label-style="labelStyle"
        :content-style="contentStyle"
      >
        <el-descriptions-item :span="2" class="section-header">
          <template #label>
      <!-- 订单信息 - 使用自定义表格布局 -->
      <div class="order-info-section">
        <div class="section-header">
            <el-icon class="section-icon"><Document /></el-icon>
            <span>订单信息</span>
          </template>
          <template #default></template>
        </el-descriptions-item>
        <el-descriptions-item label="订单编号">{{ detail.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="交易资源类型">{{ detail.resourceTypeName }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ detail.applyTime }}</el-descriptions-item>
        <el-descriptions-item label="交易状态">
        </div>
        <div class="order-info-grid">
          <div class="order-info-item">
            <div class="order-label">订单编号</div>
            <div class="order-content">{{ detail.orderNo }}</div>
          </div>
          <div class="order-info-item">
            <div class="order-label">交易资源类型</div>
            <div class="order-content">{{ detail.resourceTypeName }}</div>
          </div>
          <div class="order-info-item">
            <div class="order-label">申请时间</div>
            <div class="order-content">{{ detail.applyTime }}</div>
          </div>
          <div class="order-info-item">
            <div class="order-label">交易状态</div>
            <div class="order-content">
          <el-tag :type="getStatusType(detail.status)" size="small">{{ detail.statusName }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
            </div>
          </div>
        </div>
      </div>

      <!-- 申请人信息（与订单信息同卡片，复用分隔标题样式） -->
      <el-descriptions
        :column="2"
        border
        class="mt15 order-desc fixed-label"
        label-width="180px"
        :label-style="labelStyle"
        :content-style="contentStyle"
      >
        <el-descriptions-item :span="2" class="section-header">
          <template #label>
      <!-- 申请人信息 - 使用自定义表格布局 -->
      <div class="applicant-info-section">
        <div class="section-header">
            <el-icon class="section-icon"><User /></el-icon>
            <span>申请人信息</span>
          </template>
          <template #default></template>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">{{ detail.userName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ detail.unitName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ detail.userDept || '-' }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ detail.userAccount || '-' }}</el-descriptions-item>
      </el-descriptions>
        </div>
        <div class="applicant-info-grid">
          <div class="applicant-info-item">
            <div class="applicant-label">姓名</div>
            <div class="applicant-content">{{ detail.userName || '-' }}</div>
          </div>
          <div class="applicant-info-item">
            <div class="applicant-label">单位</div>
            <div class="applicant-content">{{ detail.unitName || '-' }}</div>
          </div>
          <div class="applicant-info-item">
            <div class="applicant-label">部门</div>
            <div class="applicant-content">{{ detail.userDept || '-' }}</div>
          </div>
          <div class="applicant-info-item">
            <div class="applicant-label">用户名</div>
            <div class="applicant-content">{{ detail.userAccount || '-' }}</div>
          </div>
        </div>
      </div>

      <!-- 交易内容（紧随申请人信息，同卡片，复用分隔标题样式） -->
      <el-descriptions
        :column="2"
        border
        class="mt15 order-desc fixed-label"
        label-width="180px"
        :label-style="labelStyle"
        :content-style="contentStyle"
      >
        <el-descriptions-item :span="2" class="section-header">
          <template #label>
      <!-- 交易内容 - 使用自定义表格布局 -->
      <div class="transaction-content-section">
        <div class="section-header">
            <el-icon class="section-icon"><Goods /></el-icon>
            <span>交易内容</span>
          </template>
          <template #default></template>
        </el-descriptions-item>
        <el-descriptions-item label="产品名称">
        </div>
        <div class="transaction-content-grid">
          <div class="transaction-content-item">
            <div class="transaction-label">产品名称</div>
            <div class="transaction-content">
          <el-link type="primary" :underline="false">{{ detail.productName }}</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="提供者">{{ detail.supplier }}</el-descriptions-item>
        <el-descriptions-item label="行业领域">{{ detail.industry }}</el-descriptions-item>
        <el-descriptions-item label="单位工程">
            </div>
          </div>
          <div class="transaction-content-item">
            <div class="transaction-label">提供者</div>
            <div class="transaction-content">{{ detail.supplier }}</div>
          </div>
          <div class="transaction-content-item">
            <div class="transaction-label">行业领域</div>
            <div class="transaction-content">{{ detail.industry }}</div>
          </div>
          <div class="transaction-content-item">
            <div class="transaction-label">单位工程</div>
            <div class="transaction-content">
          <el-tooltip effect="dark" :content="detail.projectUnit || '-'" placement="top" :disabled="!(detail.projectUnit && String(detail.projectUnit).trim())" popper-class="tooltip-wrap">
            <div class="ellipsis-1">{{ detail.projectUnit || '-' }}</div>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="产品类型">{{ detail.productType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="产品简介">
            </div>
          </div>
          <div class="transaction-content-item">
            <div class="transaction-label">产品类型</div>
            <div class="transaction-content">{{ detail.productType || '-' }}</div>
          </div>
          <div class="transaction-content-item">
            <div class="transaction-label">产品简介</div>
            <div class="transaction-content">
          <el-tooltip effect="dark" :content="detail.productDesc || '-'" placement="top" :disabled="!(detail.productDesc && String(detail.productDesc).trim())" popper-class="tooltip-wrap" trigger="click">
            <div class="desc-wrap ellipsis-3">{{ detail.productDesc || '-' }}</div>
          </el-tooltip>
        </el-descriptions-item>
      </el-descriptions>
            </div>
          </div>
        </div>
      </div>

      <!-- 订单详情（移动到交易内容下面，同一卡片内） -->
      <div ref="orderTableWrapRef">
@@ -382,6 +401,7 @@
})
const labelStyle = { width: '180px', maxWidth: '180px' }
const contentStyle = { width: 'calc(50% - 180px)' }


// 文件相关
const fileList = ref<any[]>([])
@@ -1086,6 +1106,160 @@
  width: calc(50% - 180px) !important;
}

/* 订单信息自定义布局样式 */
.order-info-section {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}

.order-info-section .section-header {
  background: #f3f6fb;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.order-info-section .section-icon {
  margin-right: 6px;
  color: #409eff;
}

.order-info-grid {
  display: grid;
  grid-template-columns: 15% 30% 15% 40%;
  width: 100%;
}

.order-info-item {
  display: contents;
}

.order-info-item .order-label {
  padding: 12px 16px;
  background: #fafafa;
  border: 1px solid #e4e7ed;
  font-size: 14px;
  color: #606266;
  display: flex;
  align-items: center;
}

.order-info-item .order-content {
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  font-size: 14px;
  color: #303133;
  display: flex;
  align-items: center;
}

/* 申请人信息自定义布局样式 */
.applicant-info-section {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-top: 15px;
  overflow: hidden;
}

.applicant-info-section .section-header {
  background: #f3f6fb;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.applicant-info-section .section-icon {
  margin-right: 6px;
  color: #409eff;
}

.applicant-info-grid {
  display: grid;
  grid-template-columns: 15% 30% 15% 40%;
  width: 100%;
}

.applicant-info-item {
  display: contents;
}

.applicant-info-item .applicant-label {
  padding: 12px 16px;
  background: #fafafa;
  border: 1px solid #e4e7ed;
  font-size: 14px;
  color: #606266;
  display: flex;
  align-items: center;
}

.applicant-info-item .applicant-content {
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  font-size: 14px;
  color: #303133;
  display: flex;
  align-items: center;
}

/* 交易内容自定义布局样式 */
.transaction-content-section {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-top: 15px;
  overflow: hidden;
}

.transaction-content-section .section-header {
  background: #f3f6fb;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.transaction-content-section .section-icon {
  margin-right: 6px;
  color: #409eff;
}

.transaction-content-grid {
  display: grid;
  grid-template-columns: 15% 30% 15% 40%;
  width: 100%;
}

.transaction-content-item {
  display: contents;
}

.transaction-content-item .transaction-label {
  padding: 12px 16px;
  background: #fafafa;
  border: 1px solid #e4e7ed;
  font-size: 14px;
  color: #606266;
  display: flex;
  align-items: center;
}

.transaction-content-item .transaction-content {
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  font-size: 14px;
  color: #303133;
  display: flex;
  align-items: center;
}


.desc-wrap {
  white-space: pre-wrap;
  line-height: 22px;