|
|
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';
|
|
|
import BtBg1 from '@/assets/business_basic/Bt_bg1.png';
|
|
|
import BtBg2 from '@/assets/business_basic/Bt_bg2.png';
|
|
|
|
|
|
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}
|
|
|
className="statusSwitch"
|
|
|
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" className="viewDetailBtn">查看详情</Button>
|
|
|
<Button type="link" size="small" className="editBtn">修改</Button>
|
|
|
<Button type="link" size="small" danger className="deleteBtn">删除</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 />}
|
|
|
className="queryBtn"
|
|
|
style={{ backgroundImage: `url(${BtBg1})` }}
|
|
|
>
|
|
|
查询
|
|
|
</Button>
|
|
|
<Button
|
|
|
icon={<ReloadOutlined />}
|
|
|
className="resetBtn"
|
|
|
style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
|
|
|
>
|
|
|
重置
|
|
|
</Button>
|
|
|
</Space>
|
|
|
<Space className={styles.filterButtonsRight}>
|
|
|
<Button
|
|
|
type="primary"
|
|
|
icon={<PlusOutlined />}
|
|
|
className="addBtn"
|
|
|
style={{ backgroundImage: `url(${BtBg1})` }}
|
|
|
>
|
|
|
新增油检点
|
|
|
</Button>
|
|
|
<Button
|
|
|
icon={<ExportOutlined />}
|
|
|
className="exportBtn"
|
|
|
style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
|
|
|
>
|
|
|
批量导出
|
|
|
</Button>
|
|
|
</Space>
|
|
|
</div>
|
|
|
<div className={styles.tableWrapper}>
|
|
|
<StandardTable
|
|
|
rowKey="key"
|
|
|
columns={columns}
|
|
|
data={{
|
|
|
list: tableData,
|
|
|
pagination: {
|
|
|
total: tableData.length,
|
|
|
pageSize: 10,
|
|
|
current: 1,
|
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
|
},
|
|
|
}}
|
|
|
selectionType="checkbox"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default BasicInfo;
|
|
|
|
|
|
|
