feat(dealer/customer): 新增客户查询功能并优化客户添加流程- 新增客户查询页面,可按姓名、公司名称、户号、联系方式等条件搜索客户
- 优化客户添加流程,根据模式动态禁用表单字段 - 移除不必要的 API 调用,简化代码结构 - 新增 CustomerTrading 组件,用于展示客户列表和详细信息
This commit is contained in:
@@ -64,7 +64,8 @@ export default defineAppConfig({
|
||||
"invite-stats/index",
|
||||
"info",
|
||||
"customer/index",
|
||||
"customer/add"
|
||||
"customer/add",
|
||||
"customer/trading"
|
||||
]
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
addShopDealerApply, getShopDealerApply,
|
||||
updateShopDealerApply
|
||||
} from "@/api/shop/shopDealerApply";
|
||||
import {getShopDealerUser} from "@/api/shop/shopDealerUser";
|
||||
|
||||
const AddShopDealerApply = () => {
|
||||
const {user} = useUser()
|
||||
@@ -60,17 +59,15 @@ const AddShopDealerApply = () => {
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: any) => {
|
||||
try {
|
||||
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
...values,
|
||||
realName: values.realName || user?.nickname,
|
||||
mobile: user?.phone,
|
||||
refereeId: values.refereeId || FormData?.refereeId,
|
||||
refereeId: Taro.getStorageSync('UserId'),
|
||||
applyStatus: 10,
|
||||
auditTime: undefined
|
||||
};
|
||||
await getShopDealerUser(submitData.refereeId);
|
||||
|
||||
// 如果是编辑模式,添加现有申请的id
|
||||
if (isEditMode && existingApply?.applyId) {
|
||||
@@ -135,28 +132,28 @@ const AddShopDealerApply = () => {
|
||||
<View className={'bg-gray-100 h-3'}></View>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<Form.Item name="dealerName" label="公司名称" initialValue={FormData?.dealerName} required>
|
||||
<Input placeholder="公司名称" maxLength={10} disabled={true}/>
|
||||
<Input placeholder="公司名称" maxLength={10} disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="realName" label="联系人" initialValue={FormData?.realName} required>
|
||||
<Input placeholder="请输入联系人" disabled={true}/>
|
||||
<Input placeholder="请输入联系人" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="mobile" label="联系方式" initialValue={FormData?.mobile} required>
|
||||
<Input placeholder="请输入手机号" disabled={true} maxLength={11}/>
|
||||
<Input placeholder="请输入手机号" disabled={isEditMode} maxLength={11}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="address" label="公司地址" initialValue={FormData?.address} required>
|
||||
<Input placeholder="请输入详细地址" disabled={true}/>
|
||||
<Input placeholder="请输入详细地址" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="dealerCode" label="户号" initialValue={FormData?.dealerCode} required>
|
||||
<Input placeholder="请填写户号" disabled={true}/>
|
||||
<Input placeholder="请填写户号" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="money" label="签约价格" initialValue={FormData?.money} required>
|
||||
<Input placeholder="(元/兆瓦时)"/>
|
||||
<Input placeholder="(元/兆瓦时)" disabled={false}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="applyTime" label="签约时间" initialValue={FormData?.applyTime} required>
|
||||
<Input placeholder="请选择签约时间" disabled={true}/>
|
||||
<Input placeholder="请选择签约时间" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="applyTime" label="合同日期" initialValue={FormData?.applyTime} required>
|
||||
<Input placeholder="请选择合同生效起止时间" disabled={true}/>
|
||||
<Form.Item name="contractDate" label="合同日期" initialValue={FormData?.applyTime} required>
|
||||
<Input placeholder="请选择合同生效起止时间" disabled={isEditMode}/>
|
||||
</Form.Item>
|
||||
{/*<Form.Item name="refereeId" label="邀请人ID" initialValue={FormData?.refereeId} required>*/}
|
||||
{/* <Input placeholder="邀请人ID"/>*/}
|
||||
|
||||
3
src/dealer/customer/trading.config.ts
Normal file
3
src/dealer/customer/trading.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '入市查询'
|
||||
})
|
||||
136
src/dealer/customer/trading.tsx
Normal file
136
src/dealer/customer/trading.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import {useState, useEffect, useCallback} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {Loading, Space} from '@nutui/nutui-react-taro'
|
||||
import type {ShopDealerApply as UserType} from "@/api/shop/shopDealerApply/model";
|
||||
import {
|
||||
CustomerStatus,
|
||||
mapApplyStatusToCustomerStatus,
|
||||
} from '@/utils/customerStatus';
|
||||
import navTo from "@/utils/common";
|
||||
import {pageShopDealerApply} from "@/api/shop/shopDealerApply";
|
||||
|
||||
// 扩展User类型,添加客户状态
|
||||
interface CustomerUser extends UserType {
|
||||
customerStatus?: CustomerStatus;
|
||||
}
|
||||
|
||||
const CustomerTrading = () => {
|
||||
const [list, setList] = useState<CustomerUser[]>([])
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [searchValue, _] = useState<string>('')
|
||||
|
||||
// 获取客户数据
|
||||
const fetchCustomerData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 构建API参数,根据状态筛选
|
||||
const params: any = {};
|
||||
|
||||
const res = await pageShopDealerApply(params);
|
||||
if (res?.list) {
|
||||
// 正确映射状态
|
||||
const mappedList = res.list.map(customer => ({
|
||||
...customer,
|
||||
customerStatus: mapApplyStatusToCustomerStatus(customer.applyStatus || 10)
|
||||
}));
|
||||
setList(mappedList);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取客户数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
// 根据搜索条件筛选数据(状态筛选已在API层面处理)
|
||||
const getFilteredList = () => {
|
||||
let filteredList = list;
|
||||
|
||||
// 按搜索关键词筛选
|
||||
if (searchValue.trim()) {
|
||||
const keyword = searchValue.trim().toLowerCase();
|
||||
filteredList = filteredList.filter(customer =>
|
||||
(customer.realName && customer.realName.toLowerCase().includes(keyword)) ||
|
||||
(customer.dealerName && customer.dealerName.toLowerCase().includes(keyword)) ||
|
||||
(customer.dealerCode && customer.dealerCode.toLowerCase().includes(keyword)) ||
|
||||
(customer.mobile && customer.mobile.includes(keyword)) ||
|
||||
(customer.userId && customer.userId.toString().includes(keyword))
|
||||
);
|
||||
}
|
||||
|
||||
return filteredList;
|
||||
};
|
||||
|
||||
// 初始化数据
|
||||
useEffect(() => {
|
||||
fetchCustomerData().then();
|
||||
}, [fetchCustomerData]);
|
||||
|
||||
// 当activeTab变化时重新获取数据
|
||||
useEffect(() => {
|
||||
fetchCustomerData().then();
|
||||
}, []);
|
||||
|
||||
// 渲染客户项
|
||||
const renderCustomerItem = (customer: CustomerUser) => (
|
||||
<View key={customer.userId} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex items-center"
|
||||
onClick={() => navTo(`/dealer/customer/add?id=${customer.applyId}`, true)}>
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center justify-between mb-1">
|
||||
<Text className="font-semibold text-gray-800 mr-2">
|
||||
{customer.dealerName}
|
||||
</Text>
|
||||
</View>
|
||||
<Space direction={'vertical'}>
|
||||
<Text className="text-xs text-gray-500">统一代码:{customer.dealerCode}</Text>
|
||||
<Text className="text-xs text-gray-500">
|
||||
入市时间:{customer.createTime}
|
||||
</Text>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
);
|
||||
|
||||
// 渲染客户列表
|
||||
const renderCustomerList = () => {
|
||||
const filteredList = getFilteredList();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Space className="flex items-center justify-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
if (filteredList.length === 0) {
|
||||
return (
|
||||
<View className="flex items-center justify-center py-8">
|
||||
<Text className="text-gray-500">暂无客户数据</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="p-4">
|
||||
{filteredList.map(renderCustomerItem)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
|
||||
{/* 客户列表 */}
|
||||
{renderCustomerList()}
|
||||
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerTrading;
|
||||
Reference in New Issue
Block a user