添加内勤专用 查看
This commit is contained in:
浅念
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
@update:model-value="emit('update:visible', $event)"
|
||||
title="内勤专用"
|
||||
width="90%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div style="margin-bottom: 12px; display: flex; align-items: center; gap: 12px">
|
||||
<span>显示币种：</span>
|
||||
<el-select v-model="selectedCurrency" placeholder="选择币种" style="width: 200px">
|
||||
<el-option
|
||||
v-for="opt in currencyOptions"
|
||||
:key="opt.currency_code"
|
||||
:label="opt.currency_name + ' (' + opt.currency_code + ')'"
|
||||
:value="opt.currency_code"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="displayData" style="width: 100%">
|
||||
<el-table-column label="编号" width="80" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="model" label="车型" min-width="160" />
|
||||
<el-table-column prop="qty" label="数量" width="80" />
|
||||
<el-table-column prop="clearance_price" label="报关价" min-width="140">
|
||||
<template #default="scope">{{ scope.row.clearance_price }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fob_transport_fee" label="FOB运费" min-width="140">
|
||||
<template #default="scope">{{ scope.row.fob_transport_fee }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="car_price" label="车价" min-width="140">
|
||||
<template #default="scope">{{ scope.row.car_price }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ocean_freight" label="海运费" min-width="140">
|
||||
<template #default="scope">{{ scope.row.ocean_freight }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="commission" label="佣金" min-width="140">
|
||||
<template #default="scope">{{ scope.row.commission }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="retention_price" label="挂账" min-width="140">
|
||||
<template #default="scope">{{ scope.row.retention_price }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="port_misc_fee" label="港杂" min-width="140">
|
||||
<template #default="scope">{{ scope.row.port_misc_fee }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { commonService } from '@/api/commonApi'
|
||||
|
||||
defineOptions({
|
||||
name: 'InternalStaffView'
|
||||
})
|
||||
|
||||
interface CurrencyOption {
|
||||
currency_code: string
|
||||
currency_name: string
|
||||
rate?: number
|
||||
exchange_rate?: number
|
||||
}
|
||||
|
||||
interface VehicleData {
|
||||
model_snapshot?: string
|
||||
model?: string
|
||||
qty?: number
|
||||
clearance_price?: any
|
||||
clearance_price_currency?: string
|
||||
fob_transport_fee?: any
|
||||
fob_fee_currency?: string
|
||||
car_price?: any
|
||||
car_price_currency?: string
|
||||
ocean_freight?: any
|
||||
ocean_freight_currency?: string
|
||||
commission?: any
|
||||
commission_currency?: string
|
||||
retention_price?: any
|
||||
retention_price_currency?: string
|
||||
port_misc_fee?: any
|
||||
port_fee_currency?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
vehicleData: VehicleData[]
|
||||
defaultCurrency?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean]
|
||||
}>()
|
||||
|
||||
const selectedCurrency = ref('')
|
||||
const currencyOptions = ref<CurrencyOption[]>([])
|
||||
|
||||
const loadCurrencyOptions = async () => {
|
||||
try {
|
||||
const res = await commonService.getCurrencySelect()
|
||||
currencyOptions.value = res || []
|
||||
} catch (e) {
|
||||
console.error('获取币种失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
const rateOf = (c?: string) => {
|
||||
const found = (currencyOptions.value || []).find((x: any) => x.currency_code === c)
|
||||
return Number(found?.rate || found?.exchange_rate || 0) || 0
|
||||
}
|
||||
|
||||
const convert = (amount: any, fromCode?: string, toCode?: string): number => {
|
||||
const val = amount === undefined || amount === null || amount === '' ? 0 : Number(amount)
|
||||
if (Number.isNaN(val)) return 0
|
||||
const from = fromCode || 'USD'
|
||||
const to = toCode || 'USD'
|
||||
if (from === to) return val
|
||||
const rf = rateOf(from)
|
||||
const rt = rateOf(to) || 1
|
||||
if (!rf) return 0
|
||||
return (val * rf) / rt
|
||||
}
|
||||
|
||||
const fmt = (n: number, cur: string) => `${n.toFixed(2)} ${cur}`
|
||||
|
||||
const displayData = computed(() => {
|
||||
const code = selectedCurrency.value
|
||||
return (props.vehicleData || []).map((it: VehicleData) => {
|
||||
return {
|
||||
model: it.model_snapshot || it.model || '',
|
||||
qty: it.qty || 1,
|
||||
clearance_price: fmt(
|
||||
convert(
|
||||
it.clearance_price?.amount ?? it.clearance_price,
|
||||
it.clearance_price?.currency || it.clearance_price_currency,
|
||||
code
|
||||
),
|
||||
code
|
||||
),
|
||||
fob_transport_fee: fmt(
|
||||
convert(
|
||||
it.fob_transport_fee?.amount ?? it.fob_transport_fee,
|
||||
it.fob_transport_fee?.currency || it.fob_fee_currency || it.ocean_freight_currency,
|
||||
code
|
||||
),
|
||||
code
|
||||
),
|
||||
car_price: fmt(
|
||||
convert(
|
||||
it.car_price?.amount ?? it.car_price,
|
||||
it.car_price?.currency || it.car_price_currency,
|
||||
code
|
||||
),
|
||||
code
|
||||
),
|
||||
ocean_freight: fmt(
|
||||
convert(
|
||||
it.ocean_freight?.amount ?? it.ocean_freight,
|
||||
it.ocean_freight?.currency || it.ocean_freight_currency,
|
||||
code
|
||||
),
|
||||
code
|
||||
),
|
||||
commission: fmt(
|
||||
convert(
|
||||
it.commission?.amount ?? it.commission,
|
||||
it.commission?.currency || it.commission_currency,
|
||||
code
|
||||
),
|
||||
code
|
||||
),
|
||||
retention_price: fmt(
|
||||
convert(
|
||||
it.retention_price?.amount ?? it.retention_price,
|
||||
it.retention_price?.currency || it.retention_price_currency,
|
||||
code
|
||||
),
|
||||
code
|
||||
),
|
||||
port_misc_fee: fmt(
|
||||
convert(
|
||||
it.port_misc_fee?.amount ?? it.port_misc_fee,
|
||||
it.port_misc_fee?.currency || it.port_fee_currency,
|
||||
code
|
||||
),
|
||||
code
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 监听 visible 变化，加载币种选项
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVisible) => {
|
||||
if (newVisible) {
|
||||
loadCurrencyOptions()
|
||||
// 设置默认币种
|
||||
if (props.defaultCurrency) {
|
||||
selectedCurrency.value = props.defaultCurrency
|
||||
} else {
|
||||
selectedCurrency.value = 'USD'
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
Reference in New Issue
Block a user