|
|
@@ -0,0 +1,413 @@
|
|
|
+import React, { useState } from 'react';
|
|
|
+import {
|
|
|
+ Button, Table, Space, Form, Input, Select, Modal, Card, Typography, Popconfirm, Tag,
|
|
|
+ App
|
|
|
+} from 'antd';
|
|
|
+import { useQuery } from '@tanstack/react-query';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { opportunityClient, customerClient } from '@/client/api';
|
|
|
+import type { InferResponseType, InferRequestType } from 'hono/client';
|
|
|
+import { OpportunityStage } from '@/server/modules/opportunities/opportunity.entity';
|
|
|
+
|
|
|
+type OpportunityListResponse = InferResponseType<typeof opportunityClient.$get, 200>;
|
|
|
+type OpportunityDetailResponse = InferResponseType<typeof opportunityClient[':id']['$get'], 200>;
|
|
|
+type CreateOpportunityRequest = InferRequestType<typeof opportunityClient.$post>['json'];
|
|
|
+type UpdateOpportunityRequest = InferRequestType<typeof opportunityClient[':id']['$put']>['json'];
|
|
|
+type CustomerListResponse = InferResponseType<typeof customerClient.$get, 200>;
|
|
|
+
|
|
|
+const { Title } = Typography;
|
|
|
+
|
|
|
+// 销售机会管理页面
|
|
|
+export const OpportunitiesPage = () => {
|
|
|
+ const { message } = App.useApp();
|
|
|
+ const [searchParams, setSearchParams] = useState({
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ keyword: '',
|
|
|
+ stage: ''
|
|
|
+ });
|
|
|
+ const [modalVisible, setModalVisible] = useState(false);
|
|
|
+ const [modalTitle, setModalTitle] = useState('');
|
|
|
+ const [editingOpportunity, setEditingOpportunity] = useState<any>(null);
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ const [customers, setCustomers] = useState<any[]>([]);
|
|
|
+
|
|
|
+ // 获取客户列表
|
|
|
+ const { data: customersData } = useQuery({
|
|
|
+ queryKey: ['allCustomers'],
|
|
|
+ queryFn: async () => {
|
|
|
+ const res = await customerClient.$get({
|
|
|
+ query: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 1000
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res.status !== 200) {
|
|
|
+ throw new Error('获取客户列表失败');
|
|
|
+ }
|
|
|
+ const data = await res.json();
|
|
|
+ return data.data || [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ React.useEffect(() => {
|
|
|
+ if (customersData) {
|
|
|
+ setCustomers(customersData);
|
|
|
+ }
|
|
|
+ }, [customersData]);
|
|
|
+
|
|
|
+ // 获取销售机会列表
|
|
|
+ const { data: opportunitiesData, isLoading, refetch } = useQuery({
|
|
|
+ queryKey: ['opportunities', searchParams],
|
|
|
+ queryFn: async () => {
|
|
|
+ const res = await opportunityClient.$get({
|
|
|
+ query: {
|
|
|
+ page: searchParams.page,
|
|
|
+ pageSize: searchParams.limit,
|
|
|
+ keyword: searchParams.keyword
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res.status !== 200) {
|
|
|
+ throw new Error('获取销售机会列表失败');
|
|
|
+ }
|
|
|
+ return await res.json();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const opportunities = opportunitiesData?.data || [];
|
|
|
+ const pagination = {
|
|
|
+ current: searchParams.page,
|
|
|
+ pageSize: searchParams.limit,
|
|
|
+ total: opportunitiesData?.pagination?.total || 0
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理搜索
|
|
|
+ const handleSearch = (values: any) => {
|
|
|
+ setSearchParams(prev => ({
|
|
|
+ ...prev,
|
|
|
+ keyword: values.keyword || '',
|
|
|
+ stage: values.stage || '',
|
|
|
+ page: 1
|
|
|
+ }));
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理分页变化
|
|
|
+ const handleTableChange = (newPagination: any) => {
|
|
|
+ setSearchParams(prev => ({
|
|
|
+ ...prev,
|
|
|
+ page: newPagination.current,
|
|
|
+ limit: newPagination.pageSize
|
|
|
+ }));
|
|
|
+ };
|
|
|
+
|
|
|
+ // 打开创建销售机会模态框
|
|
|
+ const showCreateModal = () => {
|
|
|
+ setModalTitle('创建销售机会');
|
|
|
+ setEditingOpportunity(null);
|
|
|
+ form.resetFields();
|
|
|
+ setModalVisible(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 打开编辑销售机会模态框
|
|
|
+ const showEditModal = (opportunity: any) => {
|
|
|
+ setModalTitle('编辑销售机会');
|
|
|
+ setEditingOpportunity(opportunity);
|
|
|
+ form.setFieldsValue({
|
|
|
+ ...opportunity,
|
|
|
+ expectedCloseDate: opportunity.expectedCloseDate ? dayjs(opportunity.expectedCloseDate) : null
|
|
|
+ });
|
|
|
+ setModalVisible(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理模态框确认
|
|
|
+ const handleModalOk = async () => {
|
|
|
+ try {
|
|
|
+ const values = await form.validateFields();
|
|
|
+
|
|
|
+ // 格式化日期
|
|
|
+ if (values.expectedCloseDate) {
|
|
|
+ values.expectedCloseDate = dayjs(values.expectedCloseDate).format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (editingOpportunity) {
|
|
|
+ // 编辑销售机会
|
|
|
+ const res = await opportunityClient[':id']['$put']({
|
|
|
+ param: { id: editingOpportunity.id },
|
|
|
+ json: values
|
|
|
+ });
|
|
|
+ if (res.status !== 200) {
|
|
|
+ throw new Error('更新销售机会失败');
|
|
|
+ }
|
|
|
+ message.success('销售机会更新成功');
|
|
|
+ } else {
|
|
|
+ // 创建销售机会
|
|
|
+ const res = await opportunityClient.$post({
|
|
|
+ json: values
|
|
|
+ });
|
|
|
+ if (res.status !== 201) {
|
|
|
+ throw new Error('创建销售机会失败');
|
|
|
+ }
|
|
|
+ message.success('销售机会创建成功');
|
|
|
+ }
|
|
|
+
|
|
|
+ setModalVisible(false);
|
|
|
+ form.resetFields();
|
|
|
+ refetch(); // 刷新销售机会列表
|
|
|
+ } catch (error) {
|
|
|
+ console.error('表单提交失败:', error);
|
|
|
+ message.error('操作失败,请重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理删除销售机会
|
|
|
+ const handleDelete = async (id: number) => {
|
|
|
+ try {
|
|
|
+ const res = await opportunityClient[':id']['$delete']({
|
|
|
+ param: { id }
|
|
|
+ });
|
|
|
+ if (res.status !== 204) {
|
|
|
+ throw new Error('删除销售机会失败');
|
|
|
+ }
|
|
|
+ message.success('销售机会删除成功');
|
|
|
+ refetch(); // 刷新销售机会列表
|
|
|
+ } catch (error) {
|
|
|
+ console.error('删除销售机会失败:', error);
|
|
|
+ message.error('删除失败,请重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 销售阶段中文映射
|
|
|
+ const stageLabelMap: Record<OpportunityStage, string> = {
|
|
|
+ [OpportunityStage.INITIAL_CONTACT]: '初步接触',
|
|
|
+ [OpportunityStage.NEEDS_ANALYSIS]: '需求确认',
|
|
|
+ [OpportunityStage.SOLUTION_PROPOSAL]: '方案制定',
|
|
|
+ [OpportunityStage.NEGOTIATION]: '谈判阶段',
|
|
|
+ [OpportunityStage.CLOSED_WON]: '成交',
|
|
|
+ [OpportunityStage.CLOSED_LOST]: '丢失'
|
|
|
+ };
|
|
|
+
|
|
|
+ // 销售阶段颜色映射
|
|
|
+ const stageColorMap: Record<OpportunityStage, string> = {
|
|
|
+ [OpportunityStage.INITIAL_CONTACT]: 'blue',
|
|
|
+ [OpportunityStage.NEEDS_ANALYSIS]: 'purple',
|
|
|
+ [OpportunityStage.SOLUTION_PROPOSAL]: 'orange',
|
|
|
+ [OpportunityStage.NEGOTIATION]: 'gold',
|
|
|
+ [OpportunityStage.CLOSED_WON]: 'green',
|
|
|
+ [OpportunityStage.CLOSED_LOST]: 'red'
|
|
|
+ };
|
|
|
+
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '机会名称',
|
|
|
+ dataIndex: 'title',
|
|
|
+ key: 'title',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客户',
|
|
|
+ dataIndex: 'customerId',
|
|
|
+ key: 'customer',
|
|
|
+ render: (customerId: number) => {
|
|
|
+ const customer = customers.find(c => c.id === customerId);
|
|
|
+ return customer ? customer.name : '-';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '预计金额',
|
|
|
+ dataIndex: 'amount',
|
|
|
+ key: 'amount',
|
|
|
+ render: (amount: number) => `¥${amount.toFixed(2)}`
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '销售阶段',
|
|
|
+ dataIndex: 'stage',
|
|
|
+ key: 'stage',
|
|
|
+ render: (stage: OpportunityStage) => (
|
|
|
+ <Tag color={stageColorMap[stage]}>
|
|
|
+ {stageLabelMap[stage]}
|
|
|
+ </Tag>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '预计成交日期',
|
|
|
+ dataIndex: 'expectedCloseDate',
|
|
|
+ key: 'expectedCloseDate',
|
|
|
+ render: (date: string) => date ? dayjs(date).format('YYYY-MM-DD') : '-',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ dataIndex: 'createdAt',
|
|
|
+ key: 'createdAt',
|
|
|
+ render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ render: (_: any, record: any) => (
|
|
|
+ <Space size="middle">
|
|
|
+ <Button type="link" onClick={() => showEditModal(record)}>
|
|
|
+ 编辑
|
|
|
+ </Button>
|
|
|
+ <Popconfirm
|
|
|
+ title="确定要删除此销售机会吗?"
|
|
|
+ onConfirm={() => handleDelete(record.id)}
|
|
|
+ okText="确定"
|
|
|
+ cancelText="取消"
|
|
|
+ >
|
|
|
+ <Button type="link" danger>
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
+ </Popconfirm>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <div className="mb-6 flex justify-between items-center">
|
|
|
+ <Title level={2}>销售机会管理</Title>
|
|
|
+ </div>
|
|
|
+ <Card className="shadow-md transition-all duration-300 hover:shadow-lg">
|
|
|
+ <Form layout="inline" onFinish={handleSearch} style={{ marginBottom: 16, padding: '16px 0' }}>
|
|
|
+ <Form.Item name="keyword" label="搜索">
|
|
|
+ <Input placeholder="机会名称/描述" allowClear />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item name="stage" label="销售阶段">
|
|
|
+ <Select placeholder="全部阶段" allowClear>
|
|
|
+ {Object.entries(OpportunityStage).map(([value, key]) => (
|
|
|
+ <Select.Option key={key} value={key}>
|
|
|
+ {stageLabelMap[key as OpportunityStage]}
|
|
|
+ </Select.Option>
|
|
|
+ ))}
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item>
|
|
|
+ <Space>
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ <Button type="primary" onClick={showCreateModal}>
|
|
|
+ 创建销售机会
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+
|
|
|
+ <Table
|
|
|
+ columns={columns}
|
|
|
+ dataSource={opportunities}
|
|
|
+ loading={isLoading}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={{
|
|
|
+ ...pagination,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showQuickJumper: true,
|
|
|
+ showTotal: (total) => `共 ${total} 条记录`
|
|
|
+ }}
|
|
|
+ onChange={handleTableChange}
|
|
|
+ bordered
|
|
|
+ scroll={{ x: 'max-content' }}
|
|
|
+ rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 创建/编辑销售机会模态框 */}
|
|
|
+ <Modal
|
|
|
+ title={modalTitle}
|
|
|
+ open={modalVisible}
|
|
|
+ onOk={handleModalOk}
|
|
|
+ onCancel={() => {
|
|
|
+ setModalVisible(false);
|
|
|
+ form.resetFields();
|
|
|
+ }}
|
|
|
+ width={600}
|
|
|
+ centered
|
|
|
+ destroyOnClose
|
|
|
+ maskClosable={false}
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ form={form}
|
|
|
+ layout="vertical"
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
+ wrapperCol={{ span: 19 }}
|
|
|
+ >
|
|
|
+ <Form.Item
|
|
|
+ name="customerId"
|
|
|
+ label="客户"
|
|
|
+ required
|
|
|
+ rules={[{ required: true, message: '请选择客户' }]}
|
|
|
+ >
|
|
|
+ <Select placeholder="请选择客户">
|
|
|
+ {customers.map(customer => (
|
|
|
+ <Select.Option key={customer.id} value={customer.id}>
|
|
|
+ {customer.name} {customer.company ? `(${customer.company})` : ''}
|
|
|
+ </Select.Option>
|
|
|
+ ))}
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ name="title"
|
|
|
+ label="机会名称"
|
|
|
+ required
|
|
|
+ rules={[
|
|
|
+ { required: true, message: '请输入机会名称' },
|
|
|
+ { min: 2, message: '机会名称至少2个字符' }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input placeholder="请输入销售机会名称" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ name="amount"
|
|
|
+ label="预计金额"
|
|
|
+ required
|
|
|
+ rules={[
|
|
|
+ { required: true, message: '请输入预计金额' },
|
|
|
+ { type: 'number', message: '请输入有效的数字' },
|
|
|
+ { min: 0, message: '金额不能为负数' }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入预计金额"
|
|
|
+ formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
|
|
+ parser={value => value!.replace(/\¥\s?|(,*)/g, '')}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ name="stage"
|
|
|
+ label="销售阶段"
|
|
|
+ required
|
|
|
+ rules={[{ required: true, message: '请选择销售阶段' }]}
|
|
|
+ >
|
|
|
+ <Select placeholder="请选择销售阶段">
|
|
|
+ {Object.entries(OpportunityStage).map(([value, key]) => (
|
|
|
+ <Select.Option key={key} value={key}>
|
|
|
+ {stageLabelMap[key as OpportunityStage]}
|
|
|
+ </Select.Option>
|
|
|
+ ))}
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ name="expectedCloseDate"
|
|
|
+ label="预计成交日期"
|
|
|
+ rules={[{ required: false, message: '请选择预计成交日期' }]}
|
|
|
+ >
|
|
|
+ <Input type="date" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ name="description"
|
|
|
+ label="机会描述"
|
|
|
+ rules={[{ required: false, message: '请输入机会描述' }]}
|
|
|
+ >
|
|
|
+ <Input.TextArea rows={4} placeholder="请输入销售机会描述" />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|