dq-cms/src/pages/business_basic/components/OilDataManagement.js

import React from 'react';
import { Card, Table, Input, Button, Space } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import styles from './OilDataManagement.less';

const OilDataManagement = () => {
    const onSearch = (value) => {
        console.log('搜索内容:', value);
    };

    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 80,
        },
        {
            title: '油品名称',
            dataIndex: 'oilName',
            key: 'oilName',
            width: 120,
        },
        {
            title: '油品类型',
            dataIndex: 'oilType',
            key: 'oilType',
            width: 120,
        },
        {
            title: '规格',
            dataIndex: 'specification',
            key: 'specification',
            width: 100,
        },
        {
            title: '库存量',
            dataIndex: 'stock',
            key: 'stock',
            width: 100,
        },
        {
            title: '单位',
            dataIndex: 'unit',
            key: 'unit',
            width: 80,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 180,
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            width: 150,
            render: (text, record) => (
                <Space>
                    <Button type="link" size="small">编辑</Button>
                    <Button type="link" size="small" danger>删除</Button>
                </Space>
            ),
        },
    ];

    const tableData = [
        {
            key: '1',
            id: '001',
            oilName: '92号汽油',
            oilType: '汽油',
            specification: '92#',
            stock: '5000',
            unit: '升',
            createTime: '2024-12-20 10:00:00',
        },
        {
            key: '2',
            id: '002',
            oilName: '95号汽油',
            oilType: '汽油',
            specification: '95#',
            stock: '3000',
            unit: '升',
            createTime: '2024-12-20 10:00:00',
        },
    ];

    return (
        <div className={styles.container}>
            <Card>
                <div className={styles.header}>
                    <div className={styles.title}>油资料管理</div>
                    <Space>
                        <Input.Search
                            placeholder="搜索油品名称..."
                            onSearch={onSearch}
                            style={{ width: 200 }}
                            prefix={<SearchOutlined />}
                        />
                        <Button type="primary" icon={<PlusOutlined />}>
                            新增油品
                        </Button>
                    </Space>
                </div>
                <Table
                    columns={columns}
                    dataSource={tableData}
                    pagination={{
                        pageSize: 10,
                        showTotal: (total) => `共 ${total} 条`,
                    }}
                />
            </Card>
        </div>
    );
};

export default OilDataManagement;