✨ 客户账单弹窗增加汇总和导出

bms-front/src/components/BasicTable/index.vue

@@ -126,15 +126,18 @@
       </template>
     </el-table>
 
-    <!-- 分页 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      :page-sizes="pageSizes"
-      @pagination="getList"
-    />
+    <!-- 分页；可选的分页前置内容用于展示汇总等信息。 -->
+    <div class="basic-table-pagination" :class="{ 'basic-table-pagination--with-extra': $slots['pagination-extra'] }">
+      <slot name="pagination-extra" />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :page-sizes="pageSizes"
+        @pagination="getList"
+      />
+    </div>
   </div>
 </template>
 
@@ -727,6 +730,16 @@ onBeforeUnmount(() => {
 .basic-table {
   width: 100%;
 }
+.basic-table-pagination--with-extra {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.basic-table-pagination--with-extra :deep(.pagination-container) {
+  margin-left: auto;
+}
 .basic-table-virtual {
   width: 100%;
   min-height: 240px;

bms-front/src/views/customersuppliermanagement/customerinfo/customermoney/CustomerBillListDialog.vue

@@ -16,8 +16,24 @@
       :border="true"
       :max-height="560"
       :page-size="10"
+      ref="tableRef"
       row-key="arBillId"
     >
+      <template #search-extra>
+        <el-button
+          type="warning"
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['customersupplier:customerinfo:export']"
+        >导出</el-button>
+      </template>
+      <template #pagination-extra>
+        <div class="bill-summary">
+          <span>应收总额：<b class="amount">{{ money(billSummary.totalAmount) }}</b></span>
+          <span>已核销：<b class="written">{{ money(billSummary.writtenOffAmount) }}</b></span>
+          <span>未核销：<b class="unwritten">{{ money(billSummary.unwrittenAmount) }}</b></span>
+        </div>
+      </template>
       <template #col-status="{ row }">
         <el-tag :type="statusType(row.status)">{{ statusText(row.status) }}</el-tag>
       </template>
@@ -38,7 +54,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, getCurrentInstance, ref } from 'vue'
 import { listCustomerBills } from '@/api/customersuppliermanagement/customermoney/customerbill'
 import { AR_BILL_STATUS_OPTIONS, AR_BILL_STATUS_TYPES } from '@/constants/ar/bill'
 import { arEnumLabel } from '@/constants/ar/enums'
@@ -48,6 +64,7 @@ const props = defineProps({
   customerId: { type: [String, Number], required: true },
   customerName: { type: String, default: '' }
 })
+const { proxy } = getCurrentInstance()
 const emit = defineEmits(['update:modelValue'])
 
 const visible = computed({
@@ -58,6 +75,9 @@ const dialogTitle = computed(() => props.customerName ? `客户账单 - ${props.
 
 // BasicTable merges these fixed parameters after search and pagination state.
 const fixedParams = computed(() => ({ customerId: Number(props.customerId) }))
+const tableRef = ref()
+const billSummary = ref({ totalAmount: 0, writtenOffAmount: 0, unwrittenAmount: 0 })
+let querySerial = 0
 const statusOptions = AR_BILL_STATUS_OPTIONS
 const columns = [
   { label: '账单号', prop: 'billNo', minWidth: 180, showOverflowTooltip: true },
@@ -81,6 +101,28 @@ const searchColumns = [
 ]
 
 function queryBills(params) {
+  const query = normalizeBillQuery(params)
+  const serial = ++querySerial
+  return listCustomerBills(props.customerId, query).then(response => {
+    if (serial === querySerial) {
+      billSummary.value = response.summary || { totalAmount: 0, writtenOffAmount: 0, unwrittenAmount: 0 }
+    }
+    return response
+  })
+}
+
+function handleExport() {
+  const query = normalizeBillQuery(tableRef.value?.getQueryParams() || {})
+  delete query.pageNum
+  delete query.pageSize
+  proxy.download(
+    `/customersupplier/customerbill/export/${props.customerId}`,
+    query,
+    `客户账单_${props.customerId}_${Date.now()}.xlsx`
+  )
+}
+
+function normalizeBillQuery(params) {
   const query = { ...params }
   const range = query.billDateRange
   if (Array.isArray(range) && range.length === 2) {
@@ -90,7 +132,7 @@ function queryBills(params) {
   delete query.billDateRange
   // The route parameter is authoritative; the customer ID cannot be changed by search/reset.
   delete query.customerId
-  return listCustomerBills(props.customerId, query)
+  return query
 }
 
 function date(value) { return value ? String(value).slice(0, 10) : '-' }
@@ -103,6 +145,14 @@ function statusType(value) { return AR_BILL_STATUS_TYPES[value] || 'info' }
 </script>
 
 <style scoped>
+.bill-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+}
+.bill-summary b { font-weight: 600; }
 .amount { color: #f56c6c; font-weight: 600; }
 .written { color: var(--el-color-success); }
 .unwritten { color: var(--el-color-warning); }