修改搜索功能

bms-front/src/views/price/billing/bill.vue

@@ -5,8 +5,40 @@
       :columns="columns"
       :search-columns="searchColumns"
       :query="queryList"
+      search-action-align="center"
       row-key="billId"
     >
+      <template #search-orderNos="{ model }">
+        <multi-value-input v-model="model.orderNos" placeholder="订单号" width="100%" :search-method="searchOrderNoOptions" />
+      </template>
+      <template #search-customerCodes="{ model }">
+        <customer-select
+          v-model="model.customerCodes"
+          type="customer"
+          value-key="customerCode"
+          label-key="customerName"
+          code-key="customerCode"
+          placeholder="请输入"
+          multiple
+        />
+      </template>
+      <template #search-productCodes="{ model }">
+        <el-select
+          v-model="model.productCodes"
+          multiple
+          filterable
+          clearable
+          collapse-tags
+          collapse-tags-tooltip
+          placeholder="请输入"
+          style="width: 100%;"
+        >
+          <el-option v-for="p in productOptions" :key="p.code" :label="p.name" :value="p.code">
+            <span>{{ p.name }}</span>
+            <span style="float: right; color: var(--el-text-color-secondary); font-size: 12px;">{{ p.code }}</span>
+          </el-option>
+        </el-select>
+      </template>
       <template #col-product="{ row }">
         {{ row.productName || '-' }} ({{ row.productCode }})
       </template>
@@ -32,9 +64,24 @@
 </template>
 
 <script setup name="BillingBill">
-import { listBill, getBill } from '@/api/price/billing'
+import { listBill, getBill, listOrderNoOptions } from '@/api/price/billing'
+import { useProducts } from '@/components/ProductSelect/useProducts'
 import BillDetail from './components/BillDetail.vue'
 
+// 订单号下拉远程搜索：返回匹配的订单号列表（最多 20 条）
+function searchOrderNoOptions(keyword) {
+  return listOrderNoOptions(keyword).then(res => res.data || [])
+}
+
+// 产品下拉选项：复用 ProductSelect 的模块级产品缓存（全应用只拉一次）
+const { productList, ensureProducts } = useProducts()
+ensureProducts()
+const productOptions = computed(() =>
+  productList.value
+    .filter(p => p.productCode)
+    .map(p => ({ code: p.productCode, name: p.productName || p.productCode }))
+)
+
 const tableRef = ref()
 const open = ref(false)
 const title = ref('计费详情')
@@ -58,10 +105,10 @@ const columns = [
 ]
 
 const searchColumns = [
-  { label: '订单号', prop: 'orderNo', component: 'input', placeholder: '订单号', width: '160px' },
-  { label: '运单号', prop: 'trackingNo', component: 'input', placeholder: '运单号', width: '160px' },
-  { label: '客户代码', prop: 'customerCode', component: 'input', placeholder: '客户代码', width: '140px' },
-  { label: '产品代码', prop: 'productCode', component: 'input', placeholder: '产品代码', width: '140px' }
+  { label: '订单号', prop: 'orderNos', placeholder: '订单号' },
+  { label: '运单号', prop: 'trackingNo', component: 'input', placeholder: '运单号' },
+  { label: '客户', prop: 'customerCodes', placeholder: '客户代码' },
+  { label: '产品代码', prop: 'productCodes', placeholder: '产品代码' }
 ]
 
 function queryList(params) {
@@ -112,4 +159,18 @@ function sourceTagType(source) {
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
+
+/* 搜索栏铺满整行：搜索项 flex 等分拉伸，控件占满所在项 */
+.billing-bill :deep(.basic-form.el-form--inline) {
+  display: flex;
+  flex-wrap: wrap;
+}
+.billing-bill :deep(.basic-form.el-form--inline > .el-form-item:not(.basic-form-action--center)) {
+  flex: 1 1 0;
+  margin-right: 12px;
+}
+.billing-bill :deep(.basic-form.el-form--inline .el-form-item .el-select),
+.billing-bill :deep(.basic-form.el-form--inline .el-form-item .el-input) {
+  width: 100%;
+}
 </style>