huminmin
2026-06-12 a32e60bf3366bf3b2d8d0d53b8257290acfb3d4e
src/views/officeProcessAutomation/ApproveManage/approve-list/components/ApproveDetailPanel.vue
@@ -35,15 +35,173 @@
    </div>
    <div class="detail-block">
      <div class="detail-block-title">填报内容</div>
      <FormPayloadFields :fields="formResolved.fields"
      <!-- 默认表单展示 -->
      <FormPayloadFields v-if="!isSpecialApprovalType"
                         :fields="formResolved.fields"
                         :form-payload="formResolved.formPayload"
                         readonly />
      <!-- 发货审批详情 -->
      <template v-else-if="row.businessType === 7">
        <div v-if="detailData.shippingInfo"
             class="shipment-detail">
          <el-divider content-position="left">发货详情</el-divider>
          <el-descriptions :column="2"
                           border>
            <el-descriptions-item label="销售订单">{{ detailData.shippingInfo.salesContractNo || "--" }}</el-descriptions-item>
            <el-descriptions-item label="发货订单号">{{ detailData.shippingInfo.shippingNo || "--" }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ detailData.shippingInfo.customerName || "--" }}</el-descriptions-item>
            <el-descriptions-item label="发货类型">{{ detailData.shippingInfo.type || "--" }}</el-descriptions-item>
            <el-descriptions-item label="发货日期">{{ detailData.shippingInfo.shippingDateDate || "--" }}</el-descriptions-item>
            <el-descriptions-item label="审核状态">{{ detailData.shippingInfo.status || "--" }}</el-descriptions-item>
            <el-descriptions-item label="发货车牌号">{{ detailData.shippingInfo.shippingCarNumber || "--" }}</el-descriptions-item>
            <el-descriptions-item label="快递公司">{{ detailData.shippingInfo.expressCompany || "--" }}</el-descriptions-item>
            <el-descriptions-item label="快递单号"
                                  :span="2">{{ detailData.shippingInfo.expressNumber || "--" }}</el-descriptions-item>
          </el-descriptions>
          <div v-if="detailData.shippingProductDetailDtoList.length"
               style="margin-top: 20px;">
            <h4>产品明细</h4>
            <el-table :data="detailData.shippingProductDetailDtoList"
                      border
                      size="small"
                      style="width: 100%">
              <el-table-column label="批号"
                               prop="batchNo"
                               min-width="160"
                               show-overflow-tooltip />
              <el-table-column label="产品名称"
                               prop="productName"
                               min-width="160"
                               show-overflow-tooltip />
              <el-table-column label="规格型号"
                               prop="specificationModel"
                               min-width="160"
                               show-overflow-tooltip />
              <el-table-column label="发货数量"
                               prop="deliveryQuantity"
                               min-width="120"
                               align="center" />
            </el-table>
          </div>
        </div>
      </template>
      <!-- 采购审批详情 -->
      <template v-else-if="row.businessType === 5">
        <div v-if="detailData"
             class="procurement-detail">
          <el-divider content-position="left">采购详情</el-divider>
          <el-descriptions :column="2"
                           border>
            <el-descriptions-item label="采购合同号">{{ detailData.purchaseContractNumber || "--" }}</el-descriptions-item>
            <el-descriptions-item label="供应商名称">{{ detailData.supplierName || "--" }}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ detailData.projectName || "--" }}</el-descriptions-item>
            <el-descriptions-item label="销售合同号">{{ detailData.salesContractNo || "--" }}</el-descriptions-item>
            <el-descriptions-item label="签订日期">{{ detailData.executionDate || "--" }}</el-descriptions-item>
            <el-descriptions-item label="录入日期">{{ detailData.entryDate || "--" }}</el-descriptions-item>
            <el-descriptions-item label="付款方式">{{ detailData.paymentMethod || "--" }}</el-descriptions-item>
            <el-descriptions-item label="车牌号">{{ detailData.carPlateNumber || "--" }}</el-descriptions-item>
            <el-descriptions-item label="运输单位/个人">{{ detailData.transportUnitOrPerson || "--" }}</el-descriptions-item>
            <el-descriptions-item label="合同金额" :span="2">
              <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">
                ¥{{ Number(detailData.contractAmount ?? 0).toFixed(2) }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
          <div v-if="detailData.productData.length"
               style="margin-top: 20px;">
            <h4>产品明细</h4>
            <el-table :data="detailData.productData"
                      border
                      style="width: 100%">
              <el-table-column prop="productCategory"
                               label="产品名称" />
              <el-table-column prop="specificationModel"
                               label="规格型号" />
              <el-table-column prop="unit"
                               label="单位" />
              <el-table-column prop="quantity"
                               label="数量" />
              <el-table-column prop="freightUnitPrice"
                               label="运费单价">
                <template #default="scope">¥{{ Number(scope.row.freightUnitPrice ?? 0).toFixed(2) }}</template>
              </el-table-column>
              <el-table-column prop="totalFreight"
                               label="运费总价">
                <template #default="scope">¥{{ Number(scope.row.totalFreight ?? 0).toFixed(2) }}</template>
              </el-table-column>
              <el-table-column prop="taxInclusiveUnitPrice"
                               label="含税单价">
                <template #default="scope">¥{{ Number(scope.row.taxInclusiveUnitPrice ?? 0).toFixed(2) }}</template>
              </el-table-column>
              <el-table-column prop="taxInclusiveTotalPrice"
                               label="含税总价">
                <template #default="scope">¥{{ Number(scope.row.taxInclusiveTotalPrice ?? 0).toFixed(2) }}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </template>
      <!-- 报价审批详情 -->
      <template v-else-if="row.businessType === 6">
        <div v-if="detailData"
             class="quotation-detail">
          <el-divider content-position="left">报价详情</el-divider>
          <el-descriptions :column="2"
                           border>
            <el-descriptions-item label="报价单号">{{ detailData.quotationNo || "--" }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ detailData.customer || "--" }}</el-descriptions-item>
            <el-descriptions-item label="业务员">{{ detailData.salesperson || "--" }}</el-descriptions-item>
            <el-descriptions-item label="报价日期">{{ detailData.quotationDate || "--" }}</el-descriptions-item>
            <el-descriptions-item label="有效期至">{{ detailData.validDate || "--" }}</el-descriptions-item>
            <el-descriptions-item label="付款方式">{{ detailData.paymentMethod || "--" }}</el-descriptions-item>
            <el-descriptions-item label="报价总额"
                                  :span="2">
              <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">
                ¥{{ Number(detailData.totalAmount ?? 0).toFixed(2) }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
          <div v-if="detailData.products.length"
               style="margin-top: 20px;">
            <h4>产品明细</h4>
            <el-table :data="detailData.products"
                      border
                      style="width: 100%">
              <el-table-column prop="product"
                               label="产品名称" />
              <el-table-column prop="specification"
                               label="规格型号" />
              <el-table-column prop="unit"
                               label="单位" />
              <el-table-column prop="quantity"
                               label="数量" />
              <el-table-column prop="freightUnitPrice"
                               label="运费单价">
                <template #default="scope">¥{{ Number(scope.row.freightUnitPrice ?? 0).toFixed(2) }}</template>
              </el-table-column>
              <el-table-column prop="totalFreight"
                               label="运费总价">
                <template #default="scope">¥{{ Number(scope.row.totalFreight ?? 0).toFixed(2) }}</template>
              </el-table-column>
              <el-table-column prop="unitPrice"
                               label="单价">
                <template #default="scope">¥{{ Number(scope.row.unitPrice ?? 0).toFixed(2) }}</template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="detailData.remark"
               style="margin-top: 20px;">
            <h4>备注</h4>
            <p>{{ detailData.remark }}</p>
          </div>
        </div>
      </template>
    </div>
    <div v-if="row.storageBlobVOList && row.storageBlobVOList.length"
    <div v-if="attachmentList.length"
         class="detail-block">
      <div class="detail-block-title">附件列表</div>
      <div class="attachment-list">
        <div v-for="file in row.storageBlobVOList"
        <div v-for="file in attachmentList"
             :key="file.id"
             class="attachment-item">
          <el-icon class="file-icon">
@@ -54,11 +212,11 @@
            {{ file.name || file.originalFilename }}
          </span>
          <div class="file-actions">
            <el-link v-if="file.previewURL"
            <el-link v-if="file.previewURL || file.url"
                     type="primary"
                     :underline="false"
                     @click="openFile(file.previewURL)">预览</el-link>
            <el-divider v-if="file.previewURL && file.downloadURL"
                     @click="openFile(file.previewURL || file.url)">预览</el-link>
            <el-divider v-if="(file.previewURL || file.url) && file.downloadURL"
                        direction="vertical" />
            <el-link v-if="file.downloadURL"
                     type="primary"
@@ -86,9 +244,25 @@
  const props = defineProps({
    row: { type: Object, default: () => ({}) },
    detailData: { type: Object, default: () => ({}) },
  });
  const formResolved = computed(() => resolveInstanceFormFields(props.row));
  // 是否为特殊审批类型(采购、发货、报价)
  const isSpecialApprovalType = computed(() => {
    return [5, 7, 6].includes(props.row.businessType);
  });
  // 详情数据(直接使用传入的 detail-data 参数)
  const detailData = computed(() => {
    return props.detailData || {};
  });
  const attachmentList = computed(() => {
    const list = props.row.storageBlobVOList || props.row.storageBlobDTOs || [];
    return Array.isArray(list) ? list : [];
  });
  function openFile(url) {
    if (!url) return;
@@ -159,4 +333,4 @@
    align-items: center;
    flex-shrink: 0;
  }
</style>
</style>