diff --git a/src/components/DynamicPage.tsx b/src/components/DynamicPage.tsx index 52a4473..b339c2f 100644 --- a/src/components/DynamicPage.tsx +++ b/src/components/DynamicPage.tsx @@ -12,6 +12,7 @@ import CompanyPermissionsPage from './pages/CompanyPermissionsPage' import ValueAddedServicesPage from './pages/ValueAddedServicesPage' import WorkOrderArchivePage from './pages/WorkOrderArchivePage' import SettingsPage from './pages/SettingsPage' +import SalePage from './pages/salePage' const PAGE_COMPONENTS = { 'statistics': StatisticsPage, @@ -26,6 +27,7 @@ const PAGE_COMPONENTS = { 'value-added-services': ValueAddedServicesPage, 'workorder-archive': WorkOrderArchivePage, 'settings': SettingsPage, + 'sale': SalePage, } export default function DynamicPage() { diff --git a/src/components/pages/salePage.tsx b/src/components/pages/salePage.tsx new file mode 100644 index 0000000..3913926 --- /dev/null +++ b/src/components/pages/salePage.tsx @@ -0,0 +1,447 @@ +import { useState, useEffect } from "react" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card" +import { Button } from "../ui/button" +import { Input } from "../ui/input" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table" +import { Search, Download, User, ChevronLeft, ChevronRight, Plus } from "lucide-react" +import { apiGet, apiPost } from "../../services/api" +import { getUserData } from "../../utils/storage" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "../ui/dialog" +import { Label } from "../ui/label" + +// 业务员数据类型 +interface SaleUser { + userId: string + userName: string + nickName: string + phonenumber: string + createTime: string + email: string + status: string +} + +interface ApiResponse { + total: string + rows: SaleUser[] + code: number + msg: string +} + +export default function SalePage() { + const [searchTerm, setSearchTerm] = useState("") + const [salesUsers, setSalesUsers] = useState([]) + const [loading, setLoading] = useState(false) + const [total, setTotal] = useState(0) + const [currentPage, setCurrentPage] = useState(1) + const [pageSize, setPageSize] = useState(10) + + // 新增业务员对话框状态 + const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) + const [isSubmitting, setIsSubmitting] = useState(false) + const [formData, setFormData] = useState({ + userName: "", + nickName: "", + phonenumber: "", + email: "", + password: "", + }) + + // 获取业务员列表 + const fetchSalesUsers = async (page = currentPage, size = pageSize) => { + setLoading(true) + try { + // 获取当前登录用户信息 + const userData = getUserData() + const parentId = userData?.userId || userData?.user?.userId || "1" + + console.log("当前用户ID:", parentId) + + // 调用接口获取业务员列表 + const response: ApiResponse = await apiGet( + `/back/sale/list?type=sale&parentId=${parentId}&pageNum=${page}&pageSize=${size}` + ) + + console.log("业务员列表响应:", response) + + if (response.code === 200) { + setSalesUsers(response.rows || []) + setTotal(parseInt(response.total) || 0) + } else { + console.error("获取业务员列表失败:", response.msg) + } + } catch (error) { + console.error("获取业务员列表请求失败:", error) + } finally { + setLoading(false) + } + } + + // 页码变化处理 + const handlePageChange = (page: number) => { + setCurrentPage(page) + fetchSalesUsers(page, pageSize) + } + + // 每页大小变化处理 + const handlePageSizeChange = (size: number) => { + setPageSize(size) + setCurrentPage(1) + fetchSalesUsers(1, size) + } + + // 组件加载时获取数据 + useEffect(() => { + fetchSalesUsers() + }, []) + + // 过滤业务员列表 + const filteredSalesUsers = salesUsers.filter((user) => { + const matchesSearch = + user.userName?.toLowerCase().includes(searchTerm.toLowerCase()) || + user.nickName?.toLowerCase().includes(searchTerm.toLowerCase()) || + user.phonenumber?.toLowerCase().includes(searchTerm.toLowerCase()) + return matchesSearch + }) + + // 导出数据 + const handleExport = () => { + console.log("导出业务员列表数据") + // TODO: 实现导出功能 + } + + // 重置表单 + const resetForm = () => { + setFormData({ + userName: "", + nickName: "", + phonenumber: "", + email: "", + password: "", + }) + } + + // 打开新增对话框 + const handleOpenAddDialog = () => { + resetForm() + setIsAddDialogOpen(true) + } + + // 关闭新增对话框 + const handleCloseAddDialog = () => { + setIsAddDialogOpen(false) + resetForm() + } + + // 表单字段变化处理 + const handleFormChange = (field: string, value: string) => { + setFormData((prev) => ({ + ...prev, + [field]: value, + })) + } + + // 提交新增业务员 + const handleSubmitAdd = async () => { + // 表单验证 + if (!formData.userName.trim()) { + alert("请输入用户名") + return + } + if (!formData.nickName.trim()) { + alert("请输入昵称") + return + } + if (!formData.phonenumber.trim()) { + alert("请输入手机号") + return + } + if (!formData.email.trim()) { + alert("请输入邮箱") + return + } + if (!formData.password.trim()) { + alert("请输入初始密码") + return + } + + setIsSubmitting(true) + try { + // 获取当前登录用户信息 + const userData = getUserData() + const parentId = userData?.userId || userData?.user?.userId || "1" + + // 构建请求数据 + const requestData = { + userName: formData.userName, + nickName: formData.nickName, + phonenumber: formData.phonenumber, + email: formData.email, + password: formData.password, + parentId: parentId, + type: "sale", + } + + console.log("新增业务员请求数据:", requestData) + + // 发送请求 + const response: any = await apiPost("/back/sale/add", requestData) + + console.log("新增业务员响应:", response) + + if (response.code === 200) { + alert("新增业务员成功") + handleCloseAddDialog() + // 刷新列表 + fetchSalesUsers(1, pageSize) + setCurrentPage(1) + } else { + alert(`新增业务员失败: ${response.msg || "未知错误"}`) + } + } catch (error) { + console.error("新增业务员请求失败:", error) + alert("新增业务员失败，请重试") + } finally { + setIsSubmitting(false) + } + } + + return ( +
+ {/* Page Header */} +
+
+

业务员管理

+

管理和查看业务员信息

+
+ +
+ + {/* Main Content Card */} + + + 业务员列表 + + 查看所有业务员的基本信息 - 共 {total} 条记录，当前第 {currentPage} 页 + + + + {/* Search Bar */} +
+
+
+ + setSearchTerm(e.target.value)} + className="pl-10" + /> +
+
+ + +
+ + {/* Table */} +
+ + + + 用户ID + 用户名 + 用户昵称 + 手机号 + 创建时间 + + + + {loading ? ( + + + 加载中... + + + ) : filteredSalesUsers.length === 0 ? ( + + + 暂无数据 + + + ) : ( + filteredSalesUsers.map((user) => ( + + {user.userId} + +
+
+ +
+ {user.userName} +
+ + {user.nickName} + {user.phonenumber} + +
{user.createTime}
+ + + )) + )} + +
+
+ + {/* Pagination */} +
+
+

每页显示

+ +

共 {total} 条记录

+
+ +
+

+ 第 {currentPage} 页，共 {Math.ceil(total / pageSize)} 页 +

+
+ + +
+
+
+ + + + {/* 新增业务员对话框 */} + + + + 新增业务员 + 请填写业务员信息，所有字段都为必填项。 + + +
+ {/* 用户名 */} +
+ + handleFormChange("userName", e.target.value)} + disabled={isSubmitting} + /> +
+ + {/* 昵称 */} +
+ + handleFormChange("nickName", e.target.value)} + disabled={isSubmitting} + /> +
+ + {/* 手机号 */} +
+ + handleFormChange("phonenumber", e.target.value)} + disabled={isSubmitting} + /> +
+ + {/* 邮箱 */} +
+ + handleFormChange("email", e.target.value)} + disabled={isSubmitting} + /> +
+ + {/* 初始密码 */} +
+ + handleFormChange("password", e.target.value)} + disabled={isSubmitting} + /> +
+
+ + + + + + + +
+ ) +} +