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

import React, { useMemo, useState } from 'react';
import { Form, Input, Select, Space, Button, Switch, message } from 'antd';
import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './BasicInfo.less';

const BasicInfo = () => {
    const [form] = Form.useForm();

    // 列表筛选与数据（演示数据，可替换为接口）
    const [filters, setFilters] = useState({
        listCategory: undefined,
        listStatus: undefined,
    });

    const columns = useMemo(() => {
        return [
            { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 },
            { title: '油品分类', dataIndex: 'category', key: 'category', width: 100 },
            { title: '密度（P15）', dataIndex: 'density', key: 'density', width: 120 },
            { title: '闪点（℃）', dataIndex: 'flashPoint', key: 'flashPoint', width: 100 },
            { title: '粘度(MM²/S)', dataIndex: 'viscosity', key: 'viscosity', width: 120 },
            { title: '硫含量(MG/KG)', dataIndex: 'sulfur', key: 'sulfur', width: 140 },
            {
                title: '状态',
                dataIndex: 'enabled',
                key: 'enabled',
                width: 90,
                render: (val, record) => (
                    <Switch
                        size="small"
                        checked={val}
                        onChange={(checked) => {
                            record.enabled = checked;
                            message.success(`已${checked ? '启用' : '停用'}`);
                        }}
                    />
                ),
            },
            { title: '最后更新', dataIndex: 'updatedAt', key: 'updatedAt', width: 180 },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 180,
                render: () => (
                    <Space size={12}>
                        <Button type="link" size="small">查看详情</Button>
                        <Button type="link" size="small">修改</Button>
                        <Button type="link" size="small" danger>删除</Button>
                    </Space>
                ),
            },
        ];
    }, []);

    const tableData = [
        {
            key: '1',
            name: '92#汽油P001',
            category: '汽油',
            density: '0.852 kg/L',
            flashPoint: '-43',
            viscosity: '0.55',
            sulfur: '10',
            enabled: true,
            updatedAt: '2025-10-25 22:30:16',
        },
        {
            key: '2',
            name: '95#汽油P001',
            category: '汽油',
            density: '0.725 kg/L',
            flashPoint: '-43',
            viscosity: '0.55',
            sulfur: '10',
            enabled: false,
            updatedAt: '2025-10-25 10:28:14',
        },
        {
            key: '3',
            name: '0#柴油油P003',
            category: '柴油',
            density: '0.832 kg/L',
            flashPoint: '65',
            viscosity: '3.0',
            sulfur: '10',
            enabled: true,
            updatedAt: '2025-10-23 20:58:24',
        },
        {
            key: '4',
            name: '航空煤油P004',
            category: '航空煤油',
            density: '0.852 kg/L',
            flashPoint: '48',
            viscosity: '1.25',
            sulfur: '8',
            enabled: false,
            updatedAt: '2025-10-23 04:59:13',
        },
        {
            key: '5',
            name: '测流油P005',
            category: '测流油',
            density: '0.876 kg/L',
            flashPoint: '32',
            viscosity: '2.00',
            sulfur: '300',
            enabled: false,
            updatedAt: '2025-10-22 03:03:13',
        },
    ];

    const onSubmit = () => {
        form.validateFields().then((values) => {
            // 提交时可对接接口
            // eslint-disable-next-line no-console
            console.log('基本信息提交: ', values);
            message.success('已保存基本信息');
        });
    };

    const onReset = () => {
        form.resetFields();
        message.info('已重置基本信息');
    };

    return (
        <div className={styles.container}>
            <div className={styles.topSection}>
                <div className={styles.sectionHeader}>
                    <span className={styles.sectionBar} />
                    <span className={styles.sectionTitle}>基本信息</span>
                </div>
                <div className={styles.topContent}>
                    <Form
                        form={form}
                        layout="vertical"
                        className={styles.basicForm}
                        initialValues={{
                            productCode: 'GAS-2023-045',
                            productName: '92号汽油',
                            category: undefined,
                            status: undefined,
                            description: '92号汽油，适用于大多数汽油发动机，具有优良的抗爆性能和清洁性能。',
                        }}
                    >
                        <div className={styles.formLeft}>
                            <div className={styles.formRow}>
                                <Form.Item
                                    label="油品代码（SKU）:"
                                    name="productCode"
                                    rules={[{ required: true, message: '请输入油品代码' }]}
                                >
                                    <Input placeholder="" />
                                </Form.Item>
                                <Form.Item
                                    label="油品名称:"
                                    name="productName"
                                    rules={[{ required: true, message: '请输入油品名称' }]}
                                >
                                    <Input placeholder="" />
                                </Form.Item>
                            </div>
                            <div className={styles.formRow}>
                                <Form.Item label="油品分类:" name="category">
                                    <Select
                                        placeholder="请选择"
                                        allowClear
                                        options={[
                                            { label: '汽油', value: '汽油' },
                                            { label: '柴油', value: '柴油' },
                                            { label: '航煤', value: '航煤' },
                                        ]}
                                    />
                                </Form.Item>
                                <Form.Item label="状态:" name="status">
                                    <Select
                                        placeholder="请选择"
                                        allowClear
                                        options={[
                                            { label: '启用', value: '启用' },
                                            { label: '停用', value: '停用' },
                                        ]}
                                    />
                                </Form.Item>
                            </div>
                        </div>
                        <div className={styles.formRight}>
                            <Form.Item
                                label="油品描述:"
                                name="description"
                                className={styles.descriptionItem}
                            >
                                <Input.TextArea rows={6} placeholder="" />
                            </Form.Item>
                            <div className={styles.formActions}>
                                <Button type="primary" onClick={onSubmit}>保存</Button>
                                <Button onClick={onReset}>取消</Button>
                            </div>
                        </div>
                    </Form>
                </div>
            </div>
            <div className={styles.bottomSection}>
                <div className={styles.sectionHeader}>
                    <span className={styles.sectionBar} />
                    <span className={styles.sectionTitle}>油品列表</span>
                </div>
                <div className={styles.filterContent}>
                    <div className={styles.filterItem}>
                        <span className={styles.filterLabel}>油品分类:</span>
                        <Select
                            value={filters.listCategory}
                            onChange={(v) => setFilters({ ...filters, listCategory: v })}
                            placeholder="全部"
                            options={[
                                { label: '全部', value: undefined },
                                { label: '汽油', value: '汽油' },
                                { label: '柴油', value: '柴油' },
                            ]}
                            allowClear
                        />
                    </div>
                    <div className={styles.filterItem}>
                        <span className={styles.filterLabel}>油品状态:</span>
                        <Select
                            value={filters.listStatus}
                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
                            placeholder="全部"
                            options={[
                                { label: '全部', value: undefined },
                                { label: '启用', value: '启用' },
                                { label: '停用', value: '停用' },
                            ]}
                            allowClear
                        />
                    </div>
                    <Space className={styles.filterButtons}>
                        <Button type="primary" icon={<SearchOutlined />}>查询</Button>
                        <Button icon={<ReloadOutlined />}>重置</Button>
                        <Button type="primary" icon={<PlusOutlined />}>新增油检点</Button>
                        <Button icon={<ExportOutlined />}>批量导出</Button>
                    </Space>
                </div>
                <div className={styles.tableWrapper}>
                    <StandardTable
                        rowKey="key"
                        columns={columns}
                        data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
                    />
                </div>
            </div>
        </div>
    );
};

export default BasicInfo;