优化

src/modules/finance/pages/FinanceFormalSettlementPage.vue

@@ -71,7 +71,7 @@ const canReceive = computed(() => props.kind === 'receivable' && access.can('pla
 const title = computed(() => props.kind === 'receivable' ? '结算单应收' : '结算单应付')
 const createLabel = computed(() => props.kind === 'receivable' ? '生成应收结算单' : '生成应付结算单')
 const activeCustomers = computed(() => customers.value.filter((item) => item.status === 'ACTIVE'))
-const fields = computed<QueryField[]>(() => [{ key: 'customerId', type: 'select', label: '客户', width: 280, placeholder: '请选择客户', props: { filterable: true, loading: !customers.value.length && !customerError.value }, options: activeCustomers.value.map((item) => ({ label: item.tenantName, value: String(item.id) })) }])
+const fields = computed<QueryField[]>(() => [{ key: 'customerId', type: 'select', label: '客户', width: 280, placeholder: '全部客户', props: { filterable: true, clearable: true, loading: !customers.value.length && !customerError.value }, options: activeCustomers.value.map((item) => ({ label: item.tenantName, value: String(item.id) })) }])
 const columns = computed<DataTableColumn[]>(() => props.kind === 'receivable'
   ? [{ key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' }, { key: 'customerId', label: '客户', minWidth: 160, slotName: 'customer' }, { key: 'settlementNo', label: '应收结算单号', minWidth: 180 }, { key: 'receivableAmount', label: '应收(CNY)', width: 140 }, { key: 'receivedAmount', label: '已收(CNY)', width: 140 }, { key: 'outstandingAmount', label: '未收(CNY)', width: 140 }, { key: 'status', label: '状态', width: 120, slotName: 'status' }]
   : [{ key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' }, { key: 'customerId', label: '客户', minWidth: 160, slotName: 'customer' }, { key: 'settlementNo', label: '应付结算单号', minWidth: 180 }, { key: 'feeItemName', label: '费用项目', minWidth: 160 }, { key: 'payableAmount', label: '应付(CNY)', width: 140 }, { key: 'paidAmount', label: '已付(CNY)', width: 140 }, { key: 'outstandingAmount', label: '未付(CNY)', width: 140 }, { key: 'status', label: '状态', width: 120, slotName: 'status' }])
@@ -86,12 +86,12 @@ async function load(model: QueryModel = filters.value) {
   filters.value = { ...model }
   rows.value = []
   error.value = null
-  if (!filters.value.customerId) return
   loading.value = true
   try {
+    const customerId = String(filters.value.customerId || '').trim() || undefined
     rows.value = props.kind === 'receivable'
-      ? await listFinanceReceivableSettlements(String(filters.value.customerId))
-      : await listFinancePayableSettlements(String(filters.value.customerId))
+      ? await listFinanceReceivableSettlements(customerId)
+      : await listFinancePayableSettlements(customerId)
   } catch (cause) { error.value = getApiErrorDetails(cause, `${title.value}加载失败，请重试`) }
   finally { loading.value = false }
 }
@@ -210,7 +210,7 @@ async function submitPayment() {
 
 function customerName(customerId: string) { return customers.value.find((item) => String(item.id) === String(customerId))?.tenantName || '客户信息暂不可用' }
 function totalAmount(row: FinanceReceivableSettlement | FinancePayableSettlement) { return props.kind === 'receivable' ? (row as FinanceReceivableSettlement).receivableAmount : (row as FinancePayableSettlement).payableAmount }
-onMounted(() => void loadCustomers())
+onMounted(() => { void loadCustomers(); void load() })
 </script>
 
 <template>
@@ -224,7 +224,7 @@ onMounted(() => void loadCustomers())
         <LoadErrorState :title="`${title}加载失败`" :message="(customerError || error)?.message || ''" :loading="loading" @retry="customerError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="(customerError || error)!" /></template></LoadErrorState>
       </template>
       <section v-if="!customerError && !error" class="surface-panel table-panel">
-        <DataTable :data="rows" :columns="columns" :loading="loading" :aria-label="`${title}列表`" row-key="id" empty-text="请选择客户查询结算单">
+        <DataTable :data="rows" :columns="columns" :loading="loading" :aria-label="`${title}列表`" row-key="id" empty-text="暂无结算单数据">
           <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="15" />{{ createLabel }}</el-button></template>
           <template #actions="{ row }"><el-button link type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" link :loading="receiptBusy" @click="openReceipt(row)"><HandCoins :size="15" />收款</el-button><el-button v-if="canPay && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" link @click="openPayment(row)"><CreditCard :size="15" />付款</el-button></template>
           <template #customer="{ row }">{{ customerName(String(row.customerId)) }}</template>