njzscloud-dispose-web/src/pages/order/cancel/CancelDetail.vue

<template>
  <ADetailPanel
    ref="detailPanel"
    class="book-detail-panel"
    v-bind="detailPanelProps">
    <template #default="detailData">
      <ElDescriptions :column="4" :title="Strings.isBlank(detailData.orderCategoryTxt)?'订单信息':'订单信息（' + detailData.orderCategoryTxt+'）'" border class="description">
        <ElDescriptionsItem label="订单编号">
          {{ detailData.sn }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="产品名称">
          {{ detailData.goodsName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="下单时间">
          {{ detailData.orderTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="项目名称">
          {{ detailData.projectInfo?.projectName || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="站点名称">
          {{ detailData.stationName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="预估量">
          {{ detailData.estimatedQuantity == null ? '' : detailData.estimatedQuantity + ' ' + (detailData.unitTxt ?? '') }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="预估车数">
          {{ detailData.estimatedTrainNum }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="运距">
          {{ `${detailData.transDistance == null ? '' : (detailData.transDistance / 1000) + ' 公里'}` }}
        </ElDescriptionsItem>

        <ElDescriptionsItem label="客户姓名">
          {{ detailData.contacts }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="客户电话">
          {{ detailData.phone }}
        </ElDescriptionsItem>
        <ElDescriptionsItem :span="2" label="客户备注">
          {{ detailData.customerMemo }}
        </ElDescriptionsItem>
      </ElDescriptions>
      <ElDescriptions :column="1" class="description" direction="vertical" title="运输信息">
        <ElDescriptionsItem :span="1">
          <TransRecode :trans-recodes="detailData.transRecodes" v-bind="transRecodeProps">
            <ElTableColumn label="车次" prop="trainNum" width="60"/>
            <ElTableColumn label="司机姓名" prop="driverName" width="100"/>
            <ElTableColumn label="司机电话" prop="driverPhone" width="120"/>
            <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
            <ElTableColumn label="毛重" prop="roughWeight" width="80">
              <template #default="{row}">
                {{ `${row.roughWeight == null ? '' : (row.roughWeight / 1000) + ' 吨'}` }}
              </template>
            </ElTableColumn>
            <ElTableColumn label="皮重" prop="tareWeight" width="80">
              <template #default="{row}">
                {{ `${row.tareWeight == null ? '' : (row.tareWeight / 1000) + ' 吨'}` }}
              </template>
            </ElTableColumn>
            <ElTableColumn label="净重" prop="settleWeight" width="80">
              <template #default="{row}">
                {{ `${row.settleWeight == null ? '' : (row.settleWeight / 1000) + ' 吨'}` }}
              </template>
            </ElTableColumn>
            <ElTableColumn label="勘料员" prop="checkerName">
              <template #default="{row}">
                {{ `${row.checkerName == null ? '-' : row.checkerName}` }}
              </template>
            </ElTableColumn>
            <ElTableColumn label="总金额" prop="settleMoney">
              <template #default="{row}">
                {{ `${row.settleMoney == null ? '' : '￥：' + row.settleMoney + '元'}` }}
              </template>
            </ElTableColumn>
            <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="120">
              <template #default="{row}">
                <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus,'info')"> {{ row.paymentStatusTxt ?? '暂无支付信息' }}</ElTag>
              </template>
            </ElTableColumn>
            <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90">
              <template #default="{row}">
                <ElTag :data-cs="checkStatusColor.cs(row.checkStatus)"> {{ row.checkStatusTxt }}</ElTag>
              </template>
            </ElTableColumn>
            <ElTableColumn fixed="right" label="运输状态" prop="transStatusTxt" width="100">
              <template #default="{row}">
                <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
              </template>
            </ElTableColumn>
          </TransRecode>
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

<script lang="ts" setup>
import ADetailPanel, {
  type ADetailPanelInstance,
  buildDetailPanelProps,
} from '@/components/a-detail-panel/ADetailPanel.tsx'
import TransRecode, { buildTransRecodeProps } from '@/pages/order/trans-recode/TransRecode.tsx'
import {
  checkStatusColor,
  paymentStatusColor,
  transStatusColor,
} from '@/pages/order/constants.ts'
import Strings from '@/common/utils/strings.ts'
import OrderApi from '@/pages/order/order-api.ts'

const detailPanelIns = useTemplateRef<ADetailPanelInstance>('detailPanel')

const transRecodeProps = buildTransRecodeProps({})

const detailPanelProps = buildDetailPanelProps<OrderTypes.SearchOrderResult>({
  title: '订单详情',
  width: '80vw',
  detailsLoader(id) {
    return OrderApi.detail(id, 'QuXiao')
  },
})


function jinchang(data: OrderTypes.TransRecode) {
  console.log(data)
}

function chuchang(data: OrderTypes.TransRecode) {
  console.log(data)
}

function kanliao(data: OrderTypes.TransRecode) {
  console.log(data)
}


defineExpose({
  open(data: OrderTypes.TableData) {
    detailPanelIns.value?.open(data.orderId!)
  },
})
</script>

<style lang="stylus" scoped>
.description {
  .data-table {
    height 250px !important
  }
}
</style>