更新关联客户功能

Signed-off-by: 吴文峰 <kevin@lmve.net>

pages/warehouse/add-item.vue

@@ -34,6 +34,50 @@
           <text class="form-label">备注</text>
           <textarea class="form-textarea" v-model="form.remark" placeholder="请输入备注（选填）" />
         </view>
+        
+        <!-- 关联客户 -->
+        <view class="form-item">
+          <text class="form-label">关联客户</text>
+          
+          <!-- 已选中的客户 -->
+          <view v-if="selectedCustomers.length > 0" class="selected-customers">
+            <view 
+              v-for="customer in selectedCustomers" 
+              :key="customer.id" 
+              class="customer-tag"
+            >
+              <text>{{ (customer.last_name || '') + (customer.first_name ? ' ' + customer.first_name : '') }}</text>
+              <text class="customer-tag-remove" @click="removeCustomer(customer.id)">×</text>
+            </view>
+          </view>
+          
+          <!-- 搜索框 -->
+          <view class="customer-search-box">
+            <input 
+              class="customer-search-input"
+              v-model="customerSearchQuery" 
+              placeholder="搜索客户..."
+              @input="onCustomerSearchInput"
+              @focus="onCustomerSearchFocus"
+            />
+          </view>
+          
+          <!-- 搜索结果 -->
+          <view v-if="showCustomerDropdown && customerSearchResults.length > 0" class="customer-dropdown">
+            <view 
+              v-for="customer in customerSearchResults" 
+              :key="customer.id" 
+              class="customer-dropdown-item"
+              @click="selectCustomer(customer)"
+            >
+              <text class="customer-dropdown-name">{{ (customer.last_name || '') + (customer.first_name ? ' ' + customer.first_name : '') }}</text>
+              <text v-if="customer.primary_phone" class="customer-dropdown-phone">{{ customer.primary_phone }}</text>
+            </view>
+          </view>
+          <view v-else-if="showCustomerDropdown && customerSearchQuery && customerSearchResults.length === 0 && !customerSearchLoading" class="customer-dropdown-empty">
+            未找到匹配的客户
+          </view>
+        </view>
       </view>
       
       <view class="form-card">
@@ -68,6 +112,7 @@
 <script setup>
 import { ref } from 'vue'
 import { warehouseApi } from '@/api/warehouse.js'
+import { customerApi } from '@/api/customer.js'
 import { useConfigStore } from '@/stores/config.js'
 import api from '@/api/index.js'
 
@@ -85,6 +130,14 @@ const form = ref({
   photos: []
 })
 
+// 关联客户
+const selectedCustomers = ref([])
+const customerSearchQuery = ref('')
+const customerSearchResults = ref([])
+const showCustomerDropdown = ref(false)
+const customerSearchLoading = ref(false)
+let customerSearchTimer = null
+
 function getPhotoUrl(sha256) {
   const baseUrl = configStore.getFileBaseUrl ? configStore.getFileBaseUrl() : ''
   return `${baseUrl}/api/files/get/${sha256}`
@@ -131,6 +184,57 @@ function removePhoto(index) {
   form.value.photos.splice(index, 1)
 }
 
+// 客户搜索
+async function searchCustomers() {
+  if (!customerSearchQuery.value.trim()) {
+    customerSearchResults.value = []
+    return
+  }
+  customerSearchLoading.value = true
+  try {
+    const res = await customerApi.list(1, 20, customerSearchQuery.value)
+    if (res.errCode === 0 && res.data) {
+      customerSearchResults.value = res.data.customers || res.data || []
+    } else {
+      customerSearchResults.value = []
+    }
+  } catch (e) {
+    console.error('搜索客户失败', e)
+    customerSearchResults.value = []
+  } finally {
+    customerSearchLoading.value = false
+  }
+}
+
+function onCustomerSearchInput() {
+  clearTimeout(customerSearchTimer)
+  customerSearchTimer = setTimeout(() => {
+    searchCustomers()
+  }, 300)
+}
+
+function onCustomerSearchFocus() {
+  showCustomerDropdown.value = true
+  searchCustomers()
+}
+
+function selectCustomer(customer) {
+  const exists = selectedCustomers.value.find(c => c.id === customer.id)
+  if (!exists) {
+    selectedCustomers.value.push(customer)
+  }
+  customerSearchQuery.value = ''
+  showCustomerDropdown.value = false
+  customerSearchResults.value = []
+}
+
+function removeCustomer(id) {
+  const index = selectedCustomers.value.findIndex(c => c.id === id)
+  if (index >= 0) {
+    selectedCustomers.value.splice(index, 1)
+  }
+}
+
 async function submitForm() {
   if (!form.value.name.trim()) {
     uni.showToast({ title: '请输入名称', icon: 'none' })
@@ -145,7 +249,8 @@ async function submitForm() {
       remark: form.value.remark,
       quantity: form.value.quantity > 0 ? form.value.quantity : 1,
       container_id: containerId.value || null,
-      photos: form.value.photos
+      photos: form.value.photos,
+      customer_ids: selectedCustomers.value.map(c => c.id)
     }
     
     const res = await warehouseApi.addItem(data)
@@ -359,4 +464,91 @@ onLoad((options) => {
   margin: 0 16rpx;
   box-sizing: border-box;
 }
+
+/* 关联客户 */
+.selected-customers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+}
+
+.customer-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 16rpx;
+  background-color: #e6f7ff;
+  border: 1rpx solid #91d5ff;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  color: #1890ff;
+}
+
+.customer-tag-remove {
+  font-size: 28rpx;
+  color: #999;
+  margin-left: 4rpx;
+}
+
+.customer-tag-remove:active {
+  color: #f56c6c;
+}
+
+.customer-search-box {
+  margin-top: 12rpx;
+}
+
+.customer-search-input {
+  width: 100%;
+  height: 72rpx;
+  padding: 0 20rpx;
+  background-color: #f5f5f5;
+  border-radius: 10rpx;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+
+.customer-dropdown {
+  margin-top: 12rpx;
+  background-color: #fff;
+  border: 1rpx solid #eee;
+  border-radius: 10rpx;
+  max-height: 400rpx;
+  overflow-y: auto;
+}
+
+.customer-dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.customer-dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.customer-dropdown-item:active {
+  background-color: #f5f5f5;
+}
+
+.customer-dropdown-name {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.customer-dropdown-phone {
+  font-size: 24rpx;
+  color: #999;
+  margin-left: 16rpx;
+}
+
+.customer-dropdown-empty {
+  padding: 30rpx;
+  text-align: center;
+  color: #999;
+  font-size: 26rpx;
+}
 </style>