查看历史试算功能

bms-front/src/views/price/billing/quote.vue

@@ -127,7 +127,7 @@
               </el-table-column>
               <el-table-column label="金额" min-width="120" align="right">
                 <template #default="{ row }">
-                  <span :class="{ payable: row.feeType === 'SURCHARGE' && Number(row.amount) > 0 }">{{ formatMoney(row.amount) }}</span>
+                  <span>{{ formatMoney(row.amount) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="币种" width="80" align="center" prop="currency" />
@@ -143,21 +143,138 @@
         </el-card>
       </el-col>
     </el-row>
+
+    <el-card shadow="never" class="history-card">
+      <template #header><span>历史试算</span></template>
+      <basic-table
+        ref="historyTableRef"
+        :columns="historyColumns"
+        :search-columns="historySearchColumns"
+        :query="queryHistory"
+        row-key="quoteId"
+      >
+        <template #col-product="{ row }">
+          {{ row.productName || '-' }} ({{ row.productCode }})
+        </template>
+        <template #col-country="{ row }">
+          {{ row.countryName || '-' }} ({{ row.countryCode || '-' }})
+        </template>
+        <template #col-matchSource="{ row }">
+          <el-tag size="small" :type="sourceTagType(row.matchSource)">{{ sourceLabel(row.matchSource) }}</el-tag>
+        </template>
+        <template #col-payableTotal="{ row }">
+          <span class="payable">{{ formatMoney(row.payableTotal) }}</span>
+        </template>
+        <template #col-action="{ row }">
+          <el-button link type="primary" icon="View" @click="handleViewHistory(row)">查看</el-button>
+        </template>
+      </basic-table>
+    </el-card>
+
+    <el-drawer v-model="historyOpen" size="720px" :title="historyTitle" append-to-body>
+      <div v-loading="historyLoading">
+        <el-empty v-if="!viewResult" description="暂无详情" />
+        <div v-else class="quote-result">
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="试算ID">{{ viewResult.quoteId }}</el-descriptions-item>
+            <el-descriptions-item label="客户ID">{{ viewResult.customerId }}</el-descriptions-item>
+            <el-descriptions-item label="产品">{{ viewResult.productName || '-' }} ({{ viewResult.productCode }})</el-descriptions-item>
+            <el-descriptions-item label="国家">{{ viewResult.countryName || '-' }} ({{ viewResult.countryCode }})</el-descriptions-item>
+            <el-descriptions-item label="计费重量(kg)">{{ viewResult.chargeWeight ?? viewResult.weight }}</el-descriptions-item>
+            <el-descriptions-item label="重量段">{{ viewResult.weightLabel || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="计价来源">
+              <el-tag size="small" :type="sourceTagType(viewResult.matchSource)">{{ sourceLabel(viewResult.matchSource) }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="套餐">{{ viewResult.priceSetName || '-' }} {{ viewResult.priceSetCode ? '(' + viewResult.priceSetCode + ')' : '' }}</el-descriptions-item>
+            <el-descriptions-item label="运费金额">{{ formatMoney(viewResult.freightAmount) }}</el-descriptions-item>
+            <el-descriptions-item label="挂号费">{{ formatMoney(viewResult.registrationFee) }}</el-descriptions-item>
+            <el-descriptions-item label="附加费">{{ formatMoney(viewResult.surchargeAmount) }}</el-descriptions-item>
+            <el-descriptions-item label="应付总额">
+              <span class="payable">{{ formatMoney(viewResult.payableTotal) }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="命中说明" :span="2">{{ viewResult.matchMessage || '-' }}</el-descriptions-item>
+          </el-descriptions>
+          <el-table
+            v-if="viewResult.feeDetails && viewResult.feeDetails.length"
+            :data="viewResult.feeDetails"
+            border
+            size="small"
+            class="fee-table"
+          >
+            <el-table-column label="费用名称" min-width="140" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayFeeName(row) }}</template>
+            </el-table-column>
+            <el-table-column label="费用类型" width="110" align="center">
+              <template #default="{ row }">{{ feeTypeLabel(row.feeType) || row.feeType }}</template>
+            </el-table-column>
+            <el-table-column label="金额" min-width="120" align="right">
+              <template #default="{ row }">{{ formatMoney(row.amount) }}</template>
+            </el-table-column>
+            <el-table-column label="币种" width="80" align="center" prop="currency" />
+            <el-table-column label="说明" min-width="160" show-overflow-tooltip>
+              <template #default="{ row }">{{ row.remark || '-' }}</template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script setup name="BillingQuote">
-import { quoteBilling } from '@/api/price/billing'
+import { quoteBilling, listQuote, getQuote } from '@/api/price/billing'
 import { listProduct, listProductCountries } from '@/api/price/product'
 
 const { proxy } = getCurrentInstance()
 const { bms_fee_type } = useDict('bms_fee_type')
 const formRef = ref()
+const historyTableRef = ref()
 const loading = ref(false)
 const productOptions = ref([])
 const countryOptions = ref([])
 const result = ref(null)
 const errorMsg = ref('')
+const historyOpen = ref(false)
+const historyTitle = ref('试算详情')
+const historyLoading = ref(false)
+const viewResult = ref(null)
+
+const historyColumns = [
+  { label: '试算ID', prop: 'quoteId', align: 'center', width: 90 },
+  { label: '客户ID', prop: 'customerId', align: 'center', width: 90 },
+  { label: '产品', prop: 'product', minWidth: 160, slot: 'product' },
+  { label: '国家', prop: 'country', minWidth: 130, slot: 'country' },
+  { label: '计费重量', prop: 'weight', align: 'center', width: 100 },
+  { label: '计费日期', prop: 'bizDate', align: 'center', width: 120 },
+  { label: '计价来源', prop: 'matchSource', align: 'center', width: 140, slot: 'matchSource' },
+  { label: '套餐', prop: 'priceSetName', minWidth: 120, showOverflowTooltip: true },
+  { label: '应付总额', prop: 'payableTotal', align: 'right', width: 120, slot: 'payableTotal' },
+  { label: '创建时间', prop: 'createTime', align: 'center', width: 170, parseTime: true },
+  { label: '操作', prop: 'action', align: 'center', width: 90, fixed: 'right', slot: 'action', showInToolbar: false }
+]
+
+const historySearchColumns = [
+  { label: '客户ID', prop: 'customerId', component: 'input', placeholder: '客户ID', width: '140px' },
+  { label: '产品代码', prop: 'productCode', component: 'input', placeholder: '产品代码', width: '150px' },
+  { label: '国家代码', prop: 'countryCode', component: 'input', placeholder: '如 DE', width: '120px' },
+  { label: '套餐名称', prop: 'priceSetName', component: 'input', placeholder: '套餐名称', width: '150px' }
+]
+
+function queryHistory(params) {
+  return listQuote(params)
+}
+
+function handleViewHistory(row) {
+  historyTitle.value = '试算详情 #' + row.quoteId
+  historyOpen.value = true
+  historyLoading.value = true
+  viewResult.value = null
+  getQuote(row.quoteId).then(res => {
+    viewResult.value = res.data || null
+  }).finally(() => {
+    historyLoading.value = false
+  })
+}
 
 const form = reactive({
   customerId: undefined,
@@ -227,6 +344,8 @@ function handleQuote() {
       result.value = res.data || null
       if (!result.value) {
         errorMsg.value = res.msg || '计算失败'
+      } else if (historyTableRef.value && historyTableRef.value.refresh) {
+        historyTableRef.value.refresh()
       }
     }).catch(err => {
       errorMsg.value = (err && (err.msg || err.message)) || '计算失败'
@@ -346,4 +465,7 @@ loadProducts()
 .billing-quote .fee-table {
   margin-top: 12px;
 }
+.billing-quote .history-card {
+  margin-top: 16px;
+}
 </style>