后端返回参数不一致前端手动处理key

大小写/下划线----统一处理为小驼峰
javascript 复制代码
<template>
    <div class="order-info-table mb-20px">
        <div class="table-title">
            {{ t('order_list.订单号') + " :" + currentOrderNo }}
        </div>
        <el-table :data="[normalizedOrderInfo]" border :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
                background: '#f2f2f2',
                color: '#2b3a4a',
                height: '10px', fontSize: '12px', textAlign: 'center'
            }">
            <!-- 申请类别 / 结算方式 -->
            <el-table-column>
                <template #header>
                    <div class="label-flex">
                        <span>{{ t('order_list.申请类别') }}</span>
                        <span>{{ t('order_list.结算方式') }}</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div class="cont-flex">
                        <div>{{ row.reqDvsNm || row.reqDvsCd || '-' }}</div>
                        <div class="orange">{{ (row.svcDvsNm == '' || !row.svcDvsNm) ? showDictName('SVC_DVS_CD',
                            row.svcDvsCd) : row.svcDvsNm }}</div>
                    </div>
                </template>
            </el-table-column>

            <!-- 配送仓库 / 运输方式 -->
            <el-table-column>
                <template #header>
                    <div class="label-flex">
                        <span>{{ t('errorInStock.配送仓库') }}</span>
                        <span>{{ t('order_all.运输方式') }}</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div class="cont-flex">
                        <div>{{ row.sendCenterNm || '-' }}</div>
                        <div>{{ row.dlvrWayNm || showDictName('DLVR_WAY_CD', row.dlvrWayCd) || '-' }}</div>
                    </div>
                </template>
            </el-table-column>

            <!-- 收件人 -->
            <el-table-column>
                <template #header>
                    <span>{{ t('order_all.收件人') }}</span>
                </template>
                <template #default="{ row }">
                    {{ row.consNm || '-' }}
                </template>
            </el-table-column>

            <!-- 运单数 / 入库数量 -->
            <el-table-column>
                <template #header>
                    <div class="label-flex">
                        <span>{{ t('order_all.运单数') }}</span>
                        <span>{{ t('order_all.入库数量') }}</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div class="cont-flex">
                        <div>{{ row.trkCnt ?? '-' }}</div>
                        <div>{{ row.wareCnt ?? '-' }}</div>
                    </div>
                </template>
            </el-table-column>

            <!-- 数量 / 总额（你指定那种写法） -->
            <el-table-column>
                <template #header>
                    <div class="label-flex">
                        <span>{{ t('order_all.数量') }}</span>
                        <span>{{ t('order_all.总额') }}</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div class="cont-flex">
                        <div style="display:flex">
                            <div class="red">{{ row.totalProQty }}</div>
                            <div class="ml-1"> / </div>
                            <div class="red">
                                {{ (row.sendCrrNm || '￥') + formatAmountFloat(row.totalProCost) }}
                            </div>
                        </div>
                        <div v-if="row.nationCrrCd != 2">
                            {{ '( $' + formatAmountFloat(row.totalProCostUsd) + ')' }}
                        </div>
                    </div>
                </template>
            </el-table-column>

            <!-- 货架号 -->
            <el-table-column>
                <template #header>
                    <span>{{ t('stock.货架号') }}</span>
                </template>
                <template #default="{ row }">
                    {{ row.allRackNo?.length ? row.allRackNo.join(',') : '-' }}
                </template>
            </el-table-column>

            <!-- 状态 -->
            <el-table-column>
                <template #header>
                    <div class="label-flex">
                        <span>{{ t('order_all.入库状态') }}</span>
                        <span>{{ t('order_all.进行状态') }}</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div class="cont-flex">
                        <div>{{ showDictName('WARE_STATE_CD', row.wareStateCd) }}</div>
                        <div>{{ row.stateNm || row.wareStateNm || '-' }}</div>
                    </div>
                </template>
            </el-table-column>

            <!-- 日期 -->
            <el-table-column>
                <template #header>
                    <span>{{ t('mem_label.日期') }}</span>
                </template>
                <template #default="{ row }">
                    <div class="cont-flex">
                        <div>{{ row.insDate ? formatTimestamp(row.INS_DATE, 'YYYY-MM-DD HH:mm') : '-' }}</div>
                        <div>{{ row.updDate ? formatTimestamp(row.updDate, 'YYYY-MM-DD HH:mm') : '-' }}</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'

import { formatTimestamp } from "~/composables/formatTime"
import { formatAmountFloat } from '~/composables/validate'
const { t } = useI18n()
const store = useStore()
const props = defineProps({
    orderInfo: {
        type: Object,
        required: true,
        default: () => ({})
    },
    currentOrderNo: {
        type: String,
        required: true,
        default: ''
    }
})

/* 
// 多种格式时写成 totalProCost =
  [o.TOTAL_PRO_COST, o.total_pro_cost, o.totalProCost]
    .find(v => v !== null && v !== undefined) ?? '0' 
*/

const normalizedOrderInfo = computed(() => {
    const o = props.orderInfo || {}

    return {
        // 订单号
        orderNo: o.ORDER_NO ?? o.order_no ?? '',

        // 申请类别 / 结算方式
        reqDvsCd: o.REQ_DVS_CD ?? o.req_dvs_cd ?? '',
        reqDvsNm: o.REQ_DVS_NM ?? o.req_dvs_name ?? '',
        svcDvsCd: o.SVC_DVS_CD ?? o.svc_dvs_cd ?? '',
        svcDvsNm: o.SVC_DVS_NM ?? o.svc_dvs_name ?? '',

        // 配送仓库 / 运输方式
        sendCenterNm: o.SEND_CENTER_NM ?? o.center_name ?? '',
        dlvrWayCd: o.DLVR_WAY_CD ?? o.transport ?? '',
        dlvrWayNm: o.DLVR_WAY_NM ?? o.transport_name ?? '',

        // 收件人
        consNm: (o.CONS_NM_KR || o.CONS_NM_EN) ?? o.mem_name ?? '',

        // 运单数 / 入库数量
        trkCnt: o.TRK_CNT ?? o.tracking_count ?? null,
        wareCnt: o.WARE_CNT ?? o.in_stock_qty ?? null,

        // 数量 / 总额
        totalProQty: Number(o.TOTAL_PRO_QTY ?? 0),
        totalProCost: o.TOTAL_PRO_COST ?? o.total_pro_cost ?? '0',
        totalProCostUsd: o.TOTAL_PRO_COST_USD ?? o.total_pro_cost_usd ?? '0',
        sendCrrNm: o.SEND_CRR_NM ?? '￥',
        nationCrrCd: o.NATION_CRR_CD ?? o.nation_crr_cd ?? null,

        // 货架号
        allRackNo: o.ALL_RACK_NO ?? o.all_rack_no ?? [],

        // 状态
        wareStateCd: o.WARE_STATE_CD ?? o.ware_state_cd ?? '',
        wareStateNm: o.WARE_STATE_NM ?? o.ware_state_name ?? '',
        stateNm: o.STATE_NM ?? o.state_name ?? '',

        // 日期
        insDate: o.INS_DATE ?? o.create_time ?? '',
        updDate: o.UPD_DATE ?? o.update_time ?? ''
    }
})


const showDictName = (field, value) => {
    if (!value) return '-'
    return store.getters.getDictName(field, value)
}

const headerStyle = {
    background: '#f5f5f5',
    color: '#333',
    fontWeight: 'bold',
    textAlign: 'center'
}

const cellStyle = {
    textAlign: 'center',
    padding: '0'
}
</script>

<style scoped>
.order-info-table {
    width: 100%;
}

.table-title {
    font-size: 14px;
    height: 40px;
    width: 100%;
    font-weight: bold;
    margin-bottom: 2px;
    display: flex;
    text-align: center;
    margin: 0 auto;
    padding-left: 40%;
    padding-top: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ebeef5;
}

.cell-block {
    padding: 8px;
    border-right: 1px solid #ebeef5;
    min-height: 90px;
}

.cell-block:last-child {
    border-right: none;
}

.label {
    font-size: 12px;
    color: #999;
}

.red {
    color: red;
}

.orange {
    color: #ff6600;
}

.gray {
    color: #999;
}

.mt-4 {
    margin-top: 4px;
}
</style>
后端返回参数不一致 前端手动处理key

后端返回参数不一致前端手动处理key
