kevin/ops2_uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新关联客户功能

Browse Source 
Signed-off-by: 吴文峰 <kevin@lmve.net>
This commit is contained in:
kevin
2026-04-29 21:53:48 +08:00
parent da9a303cb6
commit 67c9f16301
8 changed files with 1159 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/warehouse/add-item.vue
+193 -1
View File
@@ -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>
pages/warehouse/item-detail.vue
+58
View File
@@ -110,6 +110,23 @@
<text class="wo-status" :class="wo.status">{{ getWorkOrderStatusText(wo.status) }}</text>
</view>
</view>
<!-- 关联客户 -->
<view class="card" v-if="linkedCustomers.length > 0">
<view class="card-header">
<text class="card-title">关联客户</text>
</view>
<view class="linked-customers">
<view
class="linked-customer-item"
v-for="customer in linkedCustomers"
:key="customer.ID"
>
<text class="customer-name">{{ (customer.last_name || '') + (customer.first_name ? ' ' + customer.first_name : '') }}</text>
<text v-if="customer.title" class="customer-title">{{ customer.title }}</text>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
@@ -179,6 +196,7 @@ const item = ref(null)
const photos = ref([])
const commits = ref([])
const workOrders = ref([])
const linkedCustomers = ref([])
const canModify = ref(false)
// 移动相关
@@ -230,6 +248,7 @@ async function fetchDetail() {
photos.value = res.data.photos || []
commits.value = res.data.commits || []
workOrders.value = res.data.work_orders || []
linkedCustomers.value = res.data.customers || []
canModify.value = res.data.canModifyItem
} else {
uni.showToast({ title: '获取详情失败', icon: 'none' })
@@ -315,6 +334,18 @@ function addWorkOrder() {
: item.value.Name,
description: item.value.Remark || '',
}
// 如果有已关联的客户，自动填充到工单
if (linkedCustomers.value && linkedCustomers.value.length > 0) {
prefillData.customer_ids = linkedCustomers.value.map(c => c.ID)
prefillData.customers = linkedCustomers.value.map(c => ({
id: c.ID,
first_name: c.first_name || '',
last_name: c.last_name || '',
primary_phone: c.primary_phone || ''
}))
}
uni.setStorageSync('prefill_work_order', JSON.stringify(prefillData))
uni.navigateTo({
url: '/pages/workorder/add-workorder'
@@ -642,6 +673,33 @@ onShow(() => {
color: #ff575a;
}
.linked-customers {
padding: 20rpx 30rpx;
}
.linked-customer-item {
display: flex;
align-items: center;
padding: 16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
}
.linked-customer-item:last-child {
border-bottom: none;
}
.customer-name {
font-size: 28rpx;
color: #333;
flex: 1;
}
.customer-title {
font-size: 24rpx;
color: #999;
margin-left: 16rpx;
}
.action-bar {
position: fixed;
bottom: 0;
pages/warehouse/item-edit.vue
+198 -1
View File
@@ -39,6 +39,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">
@@ -74,6 +118,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'
@@ -92,6 +137,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}`
@@ -138,6 +191,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 fetchDetail() {
loading.value = true
try {
@@ -151,6 +255,11 @@ async function fetchDetail() {
quantity: item.Quantity ?? 1,
photos: res.data.photos ? res.data.photos.map(p => p.Sha256) : []
}
// 加载已关联的客户
if (res.data.customers && res.data.customers.length > 0) {
selectedCustomers.value = res.data.customers
}
} else {
uni.showToast({ title: '获取详情失败', icon: 'none' })
}
@@ -176,7 +285,8 @@ async function submitForm() {
serial_number: form.value.serialNumber,
remark: form.value.remark,
quantity: form.value.quantity > 0 ? form.value.quantity : 1,
photos: form.value.photos
photos: form.value.photos,
customer_ids: selectedCustomers.value.map(c => c.id)
}
const res = await warehouseApi.updateItem(data)
@@ -397,4 +507,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>