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 + ' 公里'}` }}
        </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">
              <template #default="{row}">
                {{ `${row.roughWeight == null ? '' : row.roughWeight + ' 吨'}` }}
              </template>
            </ElTableColumn>
            <ElTableColumn label="皮重" prop="tareWeight">
              <template #default="{row}">
                {{ `${row.tareWeight == null ? '' : row.tareWeight + ' 吨'}` }}
              </template>
            </ElTableColumn>
            <ElTableColumn label="净重" prop="settleWeight">
              <template #default="{row}">
                {{ `${row.settleWeight == null ? '' : row.settleWeight + ' 吨'}` }}
              </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="90">
              <template #default="{row}">
                <ElTag :data-cs="paymentStatusColor.cs(row.paymentStatus)"> {{ 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>
            <ElTableColumn fixed="right" label="操作" prop="tableAction" width="60">
              <template #default="{row}">
                <div class="action-btn">
                  <ElTooltip v-if="row.transStatus === transStatus.YunShuZhong" content="进场" placement="top">
                    <ElButton class="icon-btn" plain type="success" @click="jinchang(row)">
                      <AIcon name="approach"/>
                    </ElButton>
                  </ElTooltip>
                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && (row.checkStatus === checkStatus.Wu || row.checkStatus === checkStatus.YiKanLiao)" content="出场" placement="top">
                    <ElButton class="icon-btn" plain type="danger" @click="chuchang(row)">
                      <AIcon name="carexit"/>
                    </ElButton>
                  </ElTooltip>
                  <ElTooltip v-if="row.transStatus === transStatus.YiJinChang && row.checkStatus === checkStatus.WeiKanLiao" content="勘料" placement="top">
                    <ElButton plain type="warning" @click="kanliao(row)">
                      <AIcon name="chakanliaodan"/>
                    </ElButton>
                  </ElTooltip>
                </div>
              </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 {
  checkStatus,
  checkStatusColor,
  paymentStatusColor,
  transStatus,
  transStatusColor,
} from '@/pages/order/constants.ts'
import Strings from '@/common/utils/strings.ts'
import AIcon from '@/components/a-icon/AIcon.vue'
import OrderApi from '@/pages/order/order-api.ts'

const detailPanelIns = useTemplateRef<ADetailPanelInstance<OrderTypes.TableData>>('detailPanel')

const transRecodeProps = buildTransRecodeProps({})

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


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)
  },
})
</script>

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