src/modules/ocean-bookings/pages/OceanBookingsView.vue

@@ -31,7 +31,7 @@ const activeCustomers = computed(() => customers.value.filter((customer) => cust
 const canCreate = computed(() => access.can('platform:firstleg:ocean-booking:create'))
 const fields = computed<QueryField[]>(() => [
   { key: 'customerId', type: 'select', label: '客户', placeholder: '全部客户', width: 220, options: activeCustomers.value.map((customer) => ({ label: customer.tenantName, value: String(customer.id) })), props: { filterable: true, loading: customersLoading.value } },
-  { key: 'keyword', type: 'input', label: '关键词', placeholder: '订舱号/订单号', width: 220 },
+  { key: 'keyword', type: 'input', label: '关键词', placeholder: '订舱号/提单号/船名/航次', width: 260 },
   { key: 'status', type: 'select', label: '状态', options: oceanBookingStatusOptions },
 ])
 const columns = [
@@ -54,7 +54,7 @@ const columns = [
 ]
 function formatDateTime(value?: string | null) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
 async function loadCustomers() { customersLoading.value = true; try { const result = await listPlatformTenants({ page: 1, size: 200, status: 'ACTIVE' }); customers.value = result.records.filter((customer) => customer.status === 'ACTIVE') } catch { customers.value = [] } finally { customersLoading.value = false } }
-async function load() { loading.value = true; error.value = null; try { const result = await listOceanBookings({ page: page.value, size: pageSize.value, customerId: String(query.customerId || '') || undefined, keyword: String(query.keyword || '') || undefined, status: (query.status || undefined) as OceanBookingStatus | undefined } satisfies OceanBookingQuery); rows.value = result.records; total.value = result.total } catch (e) { error.value = getApiErrorDetails(e) } finally { loading.value = false } }
+async function load() { loading.value = true; error.value = null; try { const keyword = String(query.keyword ?? '').trim(); const customerId = String(query.customerId ?? '').trim(); const status = String(query.status ?? '').trim(); const result = await listOceanBookings({ page: page.value, size: pageSize.value, customerId: customerId || undefined, keyword: keyword || undefined, status: (status || undefined) as OceanBookingStatus | undefined } satisfies OceanBookingQuery); rows.value = result.records; total.value = result.total } catch (e) { error.value = getApiErrorDetails(e) } finally { loading.value = false } }
 function open(id: string) { void router.push(`/ocean-bookings/${id}`) }
 function createBooking() { void router.push('/ocean-bookings/new') }
 function search() { if (page.value === 1) void load(); else page.value = 1 }

src/shared/components/QueryToolbar.vue

@@ -118,7 +118,7 @@ function resetPreference() {
 }
 
 function updateField(key: string, value: QueryValue) {
-  model.value = { ...model.value, [key]: value }
+  model.value[key] = value
 }
 
 function defaultPlaceholder(field: QueryField) {
@@ -148,11 +148,9 @@ function search() {
 
 function reset() {
   if (props.loading) return
-  const next = { ...model.value }
-  for (const field of props.fields) next[field.key] = resetValue(field)
-  model.value = next
-  emit('reset', next)
-  if (props.searchOnReset) emit('search', next)
+  for (const field of props.fields) model.value[field.key] = resetValue(field)
+  emit('reset', model.value)
+  if (props.searchOnReset) emit('search', model.value)
 }
 
 function searchFromTextInput(event: KeyboardEvent) {
@@ -184,6 +182,7 @@ defineExpose({ search, reset })
           clearable
           v-bind="field.props"
           @update:model-value="updateField(field.key, $event)"
+          @clear="search"
           @keyup.enter.exact="searchFromTextInput"
           >
             <template #prefix><Search :size="16" /></template>