修改计费详情应付显示

bms-front/src/views/price/billing/components/BillDetail.vue

@@ -77,33 +77,66 @@
           </div>
         </section>
 
-        <section v-if="detail.feeDetails && detail.feeDetails.length" class="detail-block">
+        <section class="detail-block">
           <div class="sec-title">费用明细</div>
-          <el-table :data="detail.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 }">
-                <el-tag size="small" :type="feeTypeTag(row.feeType)" effect="plain">
-                  {{ feeTypeLabel(row.feeType) || row.feeType }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="金额" min-width="120" align="right">
-              <template #default="{ row }">
-                <span class="fee-amount">{{ formatMoney(row.amount) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="币种" width="90" align="center">
-              <template #default="{ row }">
-                <dict-tag :options="bms_currency" :value="displayCurrency(row.currency)" />
-              </template>
-            </el-table-column>
-            <el-table-column label="说明" min-width="160" show-overflow-tooltip>
-              <template #default="{ row }">{{ row.remark || '-' }}</template>
-            </el-table-column>
-          </el-table>
+          <el-tabs v-model="feeTab" class="fee-tabs">
+            <el-tab-pane label="应收" name="income">
+              <el-table v-if="incomeFees.length" :data="incomeFees" 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 }">
+                    <el-tag size="small" :type="feeTypeTag(row.feeType)" effect="plain">
+                      {{ feeTypeLabel(row.feeType) || row.feeType }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="金额" min-width="120" align="right">
+                  <template #default="{ row }">
+                    <span class="fee-amount">{{ formatMoney(row.amount) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="币种" width="90" align="center">
+                  <template #default="{ row }">
+                    <dict-tag :options="bms_currency" :value="displayCurrency(row.currency)" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="说明" min-width="160" show-overflow-tooltip>
+                  <template #default="{ row }">{{ row.remark || '-' }}</template>
+                </el-table-column>
+              </el-table>
+              <el-empty v-else description="暂无应收明细" :image-size="64" />
+            </el-tab-pane>
+            <el-tab-pane label="应付" name="pay">
+              <el-table v-if="payFees.length" :data="payFees" 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 }">
+                    <el-tag size="small" :type="feeTypeTag(row.feeType)" effect="plain">
+                      {{ feeTypeLabel(row.feeType) || row.feeType }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="金额" min-width="120" align="right">
+                  <template #default="{ row }">
+                    <span class="fee-amount">{{ formatMoney(row.amount) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="币种" width="90" align="center">
+                  <template #default="{ row }">
+                    <dict-tag :options="bms_currency" :value="displayCurrency(row.currency)" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="说明" min-width="160" show-overflow-tooltip>
+                  <template #default="{ row }">{{ row.remark || '-' }}</template>
+                </el-table-column>
+              </el-table>
+              <el-empty v-else description="暂无应付明细" :image-size="64" />
+            </el-tab-pane>
+          </el-tabs>
         </section>
       </div>
     </div>
@@ -111,7 +144,7 @@
 </template>
 
 <script setup>
-defineProps({
+const props = defineProps({
   modelValue: { type: Boolean, default: false },
   title: { type: String, default: '计费详情' },
   loading: { type: Boolean, default: false },
@@ -120,8 +153,25 @@ defineProps({
 
 defineEmits(['update:modelValue'])
 
+const feeTab = ref('income')
 const { bms_fee_type, bms_currency } = useDict('bms_fee_type', 'bms_currency')
 
+const incomeFees = computed(() => {
+  const d = props.detail
+  if (!d) return []
+  return d.feeDetails || d.incomeFeeDetails || []
+})
+
+const payFees = computed(() => {
+  const d = props.detail
+  if (!d) return []
+  return d.payFeeDetails || []
+})
+
+watch(() => props.detail, () => {
+  feeTab.value = 'income'
+})
+
 function displayCustomer(row) {
   if (row.customerName && row.customerCode) return row.customerName + ' (' + row.customerCode + ')'
   return row.customerName || row.customerCode || row.customerId || '-'
@@ -309,4 +359,13 @@ function sourceTagType(source) {
   font-variant-numeric: tabular-nums;
   font-weight: 500;
 }
+.fee-tabs {
+  margin-top: 0;
+}
+.fee-tabs :deep(.el-tabs__header) {
+  margin-bottom: 12px;
+}
+.fee-tabs :deep(.el-empty) {
+  padding: 24px 0;
+}
 </style>