|
@@ -0,0 +1,413 @@
|
|
|
|
|
+import React, { useState, useEffect } from 'react';
|
|
|
|
|
+import { Table, Button, Modal, Form, Input, DatePicker, Select, message, Space, Popconfirm } from 'antd';
|
|
|
|
|
+import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
|
|
|
|
|
+import type { ColumnsType } from 'antd/es/table';
|
|
|
|
|
+import { InferRequestType, InferResponseType } from 'hono/client';
|
|
|
|
|
+import { orderRecordClient } from '@/client/api';
|
|
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
|
+
|
|
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
|
|
+const { Option } = Select;
|
|
|
|
|
+
|
|
|
|
|
+type OrderRecordType = InferResponseType<typeof orderRecordClient.$get, 200>['data'][0];
|
|
|
|
|
+type CreateRequest = InferRequestType<typeof orderRecordClient.$post>['json'];
|
|
|
|
|
+type UpdateRequest = InferRequestType<typeof orderRecordClient[':id']['$put']>['json'];
|
|
|
|
|
+
|
|
|
|
|
+const OrderRecords: React.FC = () => {
|
|
|
|
|
+ const [loading, setLoading] = useState(false);
|
|
|
|
|
+ const [data, setData] = useState<OrderRecordType[]>([]);
|
|
|
|
|
+ const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
|
|
|
|
+ const [modalVisible, setModalVisible] = useState(false);
|
|
|
|
|
+ const [editingRecord, setEditingRecord] = useState<OrderRecordType | null>(null);
|
|
|
|
|
+ const [searchForm] = Form.useForm();
|
|
|
|
|
+ const [form] = Form.useForm();
|
|
|
|
|
+ const [searchParams, setSearchParams] = useState<any>({});
|
|
|
|
|
+
|
|
|
|
|
+ // 定义表格列
|
|
|
|
|
+ const columns: ColumnsType<OrderRecordType> = [
|
|
|
|
|
+ {
|
|
|
|
|
+ title: 'ID',
|
|
|
|
|
+ dataIndex: 'id',
|
|
|
|
|
+ key: 'id',
|
|
|
|
|
+ width: 80,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '公司名称',
|
|
|
|
|
+ dataIndex: 'companyName',
|
|
|
|
|
+ key: 'companyName',
|
|
|
|
|
+ width: 200,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '订单编号',
|
|
|
|
|
+ dataIndex: 'orderNumber',
|
|
|
|
|
+ key: 'orderNumber',
|
|
|
|
|
+ width: 150,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '联系人',
|
|
|
|
|
+ dataIndex: 'contactPerson',
|
|
|
|
|
+ key: 'contactPerson',
|
|
|
|
|
+ width: 100,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '下单日期',
|
|
|
|
|
+ dataIndex: 'orderDate',
|
|
|
|
|
+ key: 'orderDate',
|
|
|
|
|
+ width: 120,
|
|
|
|
|
+ render: (text: string) => dayjs(text).format('YYYY-MM-DD'),
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '交单日期',
|
|
|
|
|
+ dataIndex: 'deliveryDate',
|
|
|
|
|
+ key: 'deliveryDate',
|
|
|
|
|
+ width: 120,
|
|
|
|
|
+ render: (text?: string) => text ? dayjs(text).format('YYYY-MM-DD') : '-',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '预付款',
|
|
|
|
|
+ dataIndex: 'advancePayment',
|
|
|
|
|
+ key: 'advancePayment',
|
|
|
|
|
+ width: 120,
|
|
|
|
|
+ render: (amount: number) => `¥${amount.toFixed(2)}`,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '订单金额',
|
|
|
|
|
+ dataIndex: 'orderAmount',
|
|
|
|
|
+ key: 'orderAmount',
|
|
|
|
|
+ width: 120,
|
|
|
|
|
+ render: (amount: number) => `¥${amount.toFixed(2)}`,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '订单状态',
|
|
|
|
|
+ dataIndex: 'orderStatus',
|
|
|
|
|
+ key: 'orderStatus',
|
|
|
|
|
+ width: 100,
|
|
|
|
|
+ render: (status: number) => (
|
|
|
|
|
+ <Select value={status} style={{ width: 80 }} disabled>
|
|
|
|
|
+ <Option value={0}>未处理</Option>
|
|
|
|
|
+ <Option value={1}>已完成</Option>
|
|
|
|
|
+ </Select>
|
|
|
|
|
+ ),
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '业务员',
|
|
|
|
|
+ dataIndex: 'salesperson',
|
|
|
|
|
+ key: 'salesperson',
|
|
|
|
|
+ width: 100,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '录入时间',
|
|
|
|
|
+ dataIndex: 'createdAt',
|
|
|
|
|
+ key: 'createdAt',
|
|
|
|
|
+ width: 160,
|
|
|
|
|
+ render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '操作',
|
|
|
|
|
+ key: 'action',
|
|
|
|
|
+ width: 150,
|
|
|
|
|
+ fixed: 'right',
|
|
|
|
|
+ render: (_, record) => (
|
|
|
|
|
+ <Space size="middle">
|
|
|
|
|
+ <Button
|
|
|
|
|
+ type="link"
|
|
|
|
|
+ icon={<EditOutlined />}
|
|
|
|
|
+ onClick={() => handleEdit(record)}
|
|
|
|
|
+ >
|
|
|
|
|
+ 编辑
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Popconfirm
|
|
|
|
|
+ title="确定要删除这条记录吗?"
|
|
|
|
|
+ onConfirm={() => handleDelete(record.id)}
|
|
|
|
|
+ okText="确定"
|
|
|
|
|
+ cancelText="取消"
|
|
|
|
|
+ >
|
|
|
|
|
+ <Button type="link" danger icon={<DeleteOutlined />}>
|
|
|
|
|
+ 删除
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </Popconfirm>
|
|
|
|
|
+ </Space>
|
|
|
|
|
+ ),
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
|
|
+ // 获取数据
|
|
|
|
|
+ const fetchData = async (page = 1, pageSize = 10, searchData?: any) => {
|
|
|
|
|
+ setLoading(true);
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await orderRecordClient.$get({
|
|
|
|
|
+ query: {
|
|
|
|
|
+ page,
|
|
|
|
|
+ pageSize,
|
|
|
|
|
+ ...searchData,
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (response.status === 200) {
|
|
|
|
|
+ const result = await response.json();
|
|
|
|
|
+ setData(result.data);
|
|
|
|
|
+ setPagination({
|
|
|
|
|
+ current: page,
|
|
|
|
|
+ pageSize,
|
|
|
|
|
+ total: result.pagination.total,
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ message.error('获取订单记录失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ setLoading(false);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理搜索
|
|
|
|
|
+ const handleSearch = () => {
|
|
|
|
|
+ const values = searchForm.getFieldsValue();
|
|
|
|
|
+ const searchData: any = {};
|
|
|
|
|
+
|
|
|
|
|
+ if (values.keyword) {
|
|
|
|
|
+ searchData.keyword = values.keyword;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (values.orderDate && values.orderDate.length === 2) {
|
|
|
|
|
+ searchData.filters = JSON.stringify({
|
|
|
|
|
+ orderDate: {
|
|
|
|
|
+ between: [values.orderDate[0].format('YYYY-MM-DD'), values.orderDate[1].format('YYYY-MM-DD')]
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ if (values.orderStatus !== undefined) {
|
|
|
|
|
+ searchData.filters = JSON.stringify({
|
|
|
|
|
+ ...(searchData.filters ? JSON.parse(searchData.filters) : {}),
|
|
|
|
|
+ orderStatus: values.orderStatus
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ setSearchParams(searchData);
|
|
|
|
|
+ setPagination({ ...pagination, current: 1 });
|
|
|
|
|
+ fetchData(1, pagination.pageSize, searchData);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理重置
|
|
|
|
|
+ const handleReset = () => {
|
|
|
|
|
+ searchForm.resetFields();
|
|
|
|
|
+ setSearchParams({});
|
|
|
|
|
+ fetchData(1, pagination.pageSize);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理表格分页变化
|
|
|
|
|
+ const handleTableChange = (newPagination: any) => {
|
|
|
|
|
+ setPagination(newPagination);
|
|
|
|
|
+ fetchData(newPagination.current, newPagination.pageSize, searchParams);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理编辑
|
|
|
|
|
+ const handleEdit = (record: OrderRecordType) => {
|
|
|
|
|
+ setEditingRecord(record);
|
|
|
|
|
+ form.setFieldsValue({
|
|
|
|
|
+ ...record,
|
|
|
|
|
+ orderDate: dayjs(record.orderDate),
|
|
|
|
|
+ deliveryDate: record.deliveryDate ? dayjs(record.deliveryDate) : null,
|
|
|
|
|
+ });
|
|
|
|
|
+ setModalVisible(true);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理新增
|
|
|
|
|
+ const handleAdd = () => {
|
|
|
|
|
+ setEditingRecord(null);
|
|
|
|
|
+ form.resetFields();
|
|
|
|
|
+ setModalVisible(true);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理删除
|
|
|
|
|
+ const handleDelete = async (id: number) => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await orderRecordClient[':id']['$delete']({
|
|
|
|
|
+ param: { id }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (response.status === 200) {
|
|
|
|
|
+ message.success('删除成功');
|
|
|
|
|
+ fetchData(pagination.current, pagination.pageSize, searchParams);
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ message.error('删除失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理提交表单
|
|
|
|
|
+ const handleSubmit = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const values = await form.validateFields();
|
|
|
|
|
+ const formData = {
|
|
|
|
|
+ ...values,
|
|
|
|
|
+ orderDate: values.orderDate.format('YYYY-MM-DD'),
|
|
|
|
|
+ deliveryDate: values.deliveryDate ? values.deliveryDate.format('YYYY-MM-DD') : null,
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ if (editingRecord) {
|
|
|
|
|
+ // 更新
|
|
|
|
|
+ const response = await orderRecordClient[':id']['$put']({
|
|
|
|
|
+ param: { id: editingRecord.id },
|
|
|
|
|
+ json: formData as UpdateRequest
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (response.status === 200) {
|
|
|
|
|
+ message.success('更新成功');
|
|
|
|
|
+ setModalVisible(false);
|
|
|
|
|
+ fetchData(pagination.current, pagination.pageSize, searchParams);
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 新增
|
|
|
|
|
+ const response = await orderRecordClient.$post({
|
|
|
|
|
+ json: formData as CreateRequest
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (response.status === 200) {
|
|
|
|
|
+ message.success('新增成功');
|
|
|
|
|
+ setModalVisible(false);
|
|
|
|
|
+ fetchData(1, pagination.pageSize, searchParams);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ message.error('操作失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 初始化加载数据
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ fetchData();
|
|
|
|
|
+ }, []);
|
|
|
|
|
+
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className="bg-white p-6 rounded-lg shadow-sm">
|
|
|
|
|
+ <div className="mb-6 flex justify-between items-center">
|
|
|
|
|
+ <h1 className="text-2xl font-bold">订单记录管理</h1>
|
|
|
|
|
+ <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
|
|
|
|
+ 新增订单
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 搜索表单 */}
|
|
|
|
|
+ <div className="mb-6 p-4 bg-gray-50 rounded-lg">
|
|
|
|
|
+ <Form form={searchForm} layout="inline">
|
|
|
|
|
+ <Form.Item name="keyword" label="关键词">
|
|
|
|
|
+ <Input placeholder="公司名称/订单编号/联系人" />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item name="orderDate" label="下单日期">
|
|
|
|
|
+ <RangePicker />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item name="orderStatus" label="订单状态">
|
|
|
|
|
+ <Select style={{ width: 120 }} allowClear>
|
|
|
|
|
+ <Option value={0}>未处理</Option>
|
|
|
|
|
+ <Option value={1}>已完成</Option>
|
|
|
|
|
+ </Select>
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item>
|
|
|
|
|
+ <Space>
|
|
|
|
|
+ <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
|
|
|
|
|
+ 搜索
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Button onClick={handleReset}>重置</Button>
|
|
|
|
|
+ </Space>
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ </Form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 数据表格 */}
|
|
|
|
|
+ <Table
|
|
|
|
|
+ columns={columns}
|
|
|
|
|
+ dataSource={data}
|
|
|
|
|
+ rowKey="id"
|
|
|
|
|
+ loading={loading}
|
|
|
|
|
+ pagination={{
|
|
|
|
|
+ ...pagination,
|
|
|
|
|
+ showSizeChanger: true,
|
|
|
|
|
+ showQuickJumper: true,
|
|
|
|
|
+ showTotal: (total) => `共 ${total} 条记录`,
|
|
|
|
|
+ }}
|
|
|
|
|
+ onChange={handleTableChange}
|
|
|
|
|
+ scroll={{ x: 'max-content' }}
|
|
|
|
|
+ bordered
|
|
|
|
|
+ />
|
|
|
|
|
+
|
|
|
|
|
+ {/* 新增/编辑模态框 */}
|
|
|
|
|
+ <Modal
|
|
|
|
|
+ title={editingRecord ? '编辑订单记录' : '新增订单记录'}
|
|
|
|
|
+ open={modalVisible}
|
|
|
|
|
+ onOk={handleSubmit}
|
|
|
|
|
+ onCancel={() => setModalVisible(false)}
|
|
|
|
|
+ width={600}
|
|
|
|
|
+ destroyOnClose
|
|
|
|
|
+ >
|
|
|
|
|
+ <Form form={form} layout="vertical">
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="companyName"
|
|
|
|
|
+ label="公司名称"
|
|
|
|
|
+ rules={[{ required: true, message: '请输入公司名称' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Input placeholder="请输入公司名称" />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="orderNumber"
|
|
|
|
|
+ label="订单编号"
|
|
|
|
|
+ rules={[{ required: true, message: '请输入订单编号' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Input placeholder="请输入订单编号" />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="contactPerson"
|
|
|
|
|
+ label="联系人"
|
|
|
|
|
+ rules={[{ required: true, message: '请输入联系人' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Input placeholder="请输入联系人" />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="orderDate"
|
|
|
|
|
+ label="下单日期"
|
|
|
|
|
+ rules={[{ required: true, message: '请选择下单日期' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <DatePicker style={{ width: '100%' }} />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item name="deliveryDate" label="交单日期">
|
|
|
|
|
+ <DatePicker style={{ width: '100%' }} />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="advancePayment"
|
|
|
|
|
+ label="预付款"
|
|
|
|
|
+ rules={[{ required: true, message: '请输入预付款' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Input type="number" placeholder="请输入预付款" />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="orderAmount"
|
|
|
|
|
+ label="订单金额"
|
|
|
|
|
+ rules={[{ required: true, message: '请输入订单金额' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Input type="number" placeholder="请输入订单金额" />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="orderStatus"
|
|
|
|
|
+ label="订单状态"
|
|
|
|
|
+ rules={[{ required: true, message: '请选择订单状态' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Select>
|
|
|
|
|
+ <Option value={0}>未处理</Option>
|
|
|
|
|
+ <Option value={1}>已完成</Option>
|
|
|
|
|
+ </Select>
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ <Form.Item
|
|
|
|
|
+ name="salesperson"
|
|
|
|
|
+ label="业务员"
|
|
|
|
|
+ rules={[{ required: true, message: '请输入业务员' }]}
|
|
|
|
|
+ >
|
|
|
|
|
+ <Input placeholder="请输入业务员" />
|
|
|
|
|
+ </Form.Item>
|
|
|
|
|
+ </Form>
|
|
|
|
|
+ </Modal>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+export default OrderRecords;
|