✨ 客户余额页增加只读账单弹窗

bms-front/src/api/customersuppliermanagement/customermoney/customerbill.js

@@ -1,5 +1,14 @@
 import request from '@/utils/request'
 
+/** 分页查询指定客户的应收账单（客户ID由路径固定） */
+export function listCustomerBills(customerId, query) {
+  return request({
+    url: '/customersupplier/customerbill/list/' + customerId,
+    method: 'get',
+    params: query
+  })
+}
+
 /** 查询客户可核销账单（已确认/部分核销） */
 export function listUnsettledBill(customerId) {
   return request({

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

@@ -0,0 +1,109 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="dialogTitle"
+    width="min(1500px, 96vw)"
+    append-to-body
+    destroy-on-close
+  >
+    <basic-table
+      :columns="columns"
+      :search-columns="searchColumns"
+      :query="queryBills"
+      :extra-params="fixedParams"
+      :selection="false"
+      :show-toolbar="false"
+      :border="true"
+      :max-height="560"
+      :page-size="10"
+      row-key="arBillId"
+    >
+      <template #col-status="{ row }">
+        <el-tag :type="statusType(row.status)">{{ statusText(row.status) }}</el-tag>
+      </template>
+      <template #col-totalAmount="{ row }">
+        <span class="amount">{{ money(row.totalAmount) }}</span>
+      </template>
+      <template #col-writtenOffAmount="{ row }">
+        <span class="written">{{ money(row.writtenOffAmount) }}</span>
+      </template>
+      <template #col-unwrittenAmount="{ row }">
+        <span class="unwritten">{{ money(row.unwrittenAmount) }}</span>
+      </template>
+    </basic-table>
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed } 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'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  customerId: { type: [String, Number], required: true },
+  customerName: { type: String, default: '' }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value)
+})
+const dialogTitle = computed(() => props.customerName ? `客户账单 - ${props.customerName}` : '客户账单')
+
+// BasicTable merges these fixed parameters after search and pagination state.
+const fixedParams = computed(() => ({ customerId: Number(props.customerId) }))
+const statusOptions = AR_BILL_STATUS_OPTIONS
+const columns = [
+  { label: '账单号', prop: 'billNo', minWidth: 180, showOverflowTooltip: true },
+  { label: '账单名称', prop: 'billName', minWidth: 180, showOverflowTooltip: true },
+  { label: '客户名称', prop: 'customerName', minWidth: 130, showOverflowTooltip: true },
+  { label: '客户编码', prop: 'customerCode', minWidth: 120, showOverflowTooltip: true },
+  { label: '账单截止日', prop: 'billPeriodEnd', minWidth: 120, formatter: row => `截至 ${date(row.billPeriodEnd)}` },
+  { label: '订单数', prop: 'orderCount', width: 80 },
+  { label: '应收总额', prop: 'totalAmount', width: 120, align: 'right', slot: 'totalAmount' },
+  { label: '已核销', prop: 'writtenOffAmount', width: 110, align: 'right', slot: 'writtenOffAmount' },
+  { label: '未核销', prop: 'unwrittenAmount', width: 110, align: 'right', slot: 'unwrittenAmount' },
+  { label: '状态', prop: 'status', width: 110, slot: 'status' },
+  { label: '账单日期', prop: 'billDate', width: 120, formatter: row => date(row.billDate) }
+]
+const searchColumns = [
+  { label: '账单号', prop: 'billNo', component: 'input', placeholder: '账单号', width: '180px' },
+  { label: '账单名称', prop: 'billName', component: 'input', placeholder: '账单名称', width: '180px' },
+  { label: '状态', prop: 'status', component: 'select', options: statusOptions, placeholder: '全部状态', width: '150px' },
+  { label: '账单日期', prop: 'billDateRange', component: 'daterange', width: '300px' },
+  { label: '账单截止日', prop: 'billPeriodEnd', component: 'date', width: '160px' }
+]
+
+function queryBills(params) {
+  const query = { ...params }
+  const range = query.billDateRange
+  if (Array.isArray(range) && range.length === 2) {
+    query.billDateStart = range[0]
+    query.billDateEnd = range[1]
+  }
+  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)
+}
+
+function date(value) { return value ? String(value).slice(0, 10) : '-' }
+function money(value) {
+  const amount = Number(value)
+  return Number.isNaN(amount) ? '-' : amount.toFixed(2)
+}
+function statusText(value) { return arEnumLabel(AR_BILL_STATUS_OPTIONS, value) }
+function statusType(value) { return AR_BILL_STATUS_TYPES[value] || 'info' }
+</script>
+
+<style scoped>
+.amount { color: #f56c6c; font-weight: 600; }
+.written { color: var(--el-color-success); }
+.unwritten { color: var(--el-color-warning); }
+</style>

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

@@ -13,8 +13,8 @@
           <el-tag type="success" size="small">本位币账户 CNY</el-tag>
           <el-button
             icon="Document"
-            @click="goBillView"
-            v-hasPermi="['ar:bill:list']"
+            @click="openBillDialog"
+            v-hasPermi="['customersupplier:customerinfo:list']"
           >查看账单</el-button>
           <el-button
             type="primary"
@@ -26,6 +26,14 @@
       </div>
     </el-card>
 
+    <customer-bill-list-dialog
+      v-if="billDialogVisible"
+      :key="currentCustomerId"
+      v-model="billDialogVisible"
+      :customer-id="currentCustomerId"
+      :customer-name="customer.customerName || route.query.customerName || ''"
+    />
+
     <!-- 余额概览（数据来源 customer_account） -->
     <el-row :gutter="12" class="balance-row">
       <el-col :xs="12" :sm="8" :md="4">
@@ -478,8 +486,6 @@
               <span>未核销总额：<b class="money-out">CNY {{ unsettledTotal }}</b></span>
               <span>账户余额：<b class="money-in">CNY {{ formatMoney(currentAccount.balance) }}</b></span>
               <el-button type="primary" link size="small" icon="Refresh" @click="loadBillWriteoffData">刷新</el-button>
-              <el-button type="primary" plain size="small" @click="goBillView"
-                v-hasPermi="['ar:bill:list']">查看全部账单</el-button>
             </div>
           </el-alert>
 
@@ -1110,6 +1116,7 @@
 <script setup name="CustomerMoney">
 import axios from 'axios'
 import { saveAs } from 'file-saver'
+import CustomerBillListDialog from './CustomerBillListDialog.vue'
 import { getCustomer } from "@/api/customersuppliermanagement/customerinfo/customer.js"
 import { listAccount, listReceipt, getReceipt, addReceipt, confirmReceipt, cancelReceipt, listFlow, listCreditFlow, applyCreditAdjust, listCreditApply, approveCreditApply, rejectCreditApply, cancelCreditApply, listMyCreditPools } from "@/api/customersuppliermanagement/customermoney/customermoney.js"
 import { listUnsettledBill, listBalanceWriteoff, balanceWriteoff, cancelBalanceWriteoff } from "@/api/customersuppliermanagement/customermoney/customerbill.js"
@@ -2028,11 +2035,18 @@ function formatDate(val) {
   if (!val) return '-'
   return String(val).substring(0, 10)
 }
-function goBillView() {
-  router.push({
-    path: '/ar/bill',
-    query: { customerId: route.query.customerId || '' }
-  })
+const billDialogVisible = ref(false)
+const currentCustomerId = computed(() => {
+  const id = Number(route.query.customerId)
+  return Number.isSafeInteger(id) && id > 0 ? id : null
+})
+
+function openBillDialog() {
+  if (!currentCustomerId.value) {
+    proxy.$modal.msgWarning('缺少客户ID，请从客户列表进入客户余额页')
+    return
+  }
+  billDialogVisible.value = true
 }
 
 const unsettledList = ref([])