jiangxucong
/
dq-cms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

信息管理页面

Browse Source
main
wangyunfei 1 month ago
parent 624acb2d76
commit 63d4020ea9
11 changed files with 841 additions and 120 deletions
Show Stats Download Patch File Download Diff File

2
src/pages/business_basic/basic.less
Unescape Escape View File

@ -4,6 +4,8 @@
overflow: hidden;
display: flex;
flex-direction: column;
// background-color: pink;
.TopButton {
background-color: #FFFFFF;

254
src/pages/business_basic/components/BasicInfo.js
Unescape Escape View File

@ -0,0 +1,254 @@
import React, { useMemo, useState } from 'react';
import { Card, 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}>
<Card className={styles.section}>
<div className={styles.blockTitle}>基本信息</div>
<div className={styles.panel}>
<Form
form={form}
layout="vertical"
className={styles.formGrid}
initialValues={{
productCode: 'GAS-2023-045',
productName: '92号汽油',
category: undefined,
status: undefined,
description: '92号汽油，适用于大多数汽油发动机，具有优良的抗爆性能和清洁性能。',
}}
>
<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>
<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>
<Form.Item
label="油品描述:"
name="description"
className={styles.colDesc}
>
<Input.TextArea rows={5} placeholder="" />
</Form.Item>
<div className={styles.colButtons}>
<Space direction="vertical">
<Button type="primary" onClick={onSubmit}>保存</Button>
<Button onClick={onReset}>取消</Button>
</Space>
</div>
</Form>
</div>
</Card>
<Card className={styles.section}>
<div className={styles.listHeader}>
<div className={styles.blockTitle}>油品列表</div>
<Space>
<Button type="primary" icon={<PlusOutlined />}>新增油品</Button>
<Button icon={<ExportOutlined />}>批量导出</Button>
</Space>
</div>
<div className={styles.filterRow}>
<div className={styles.filterItem}>
<div className={styles.filterLabel}>油品分类:</div>
<Select
value={filters.listCategory}
onChange={(v) => setFilters({ ...filters, listCategory: v })}
placeholder="全部"
style={{ width: 140 }}
options={[
{ label: '全部', value: undefined },
{ label: '汽油', value: '汽油' },
{ label: '柴油', value: '柴油' },
]}
allowClear
/>
</div>
<div className={styles.filterItem}>
<div className={styles.filterLabel}>油品状态:</div>
<Select
value={filters.listStatus}
onChange={(v) => setFilters({ ...filters, listStatus: v })}
placeholder="全部"
style={{ width: 140 }}
options={[
{ label: '全部', value: undefined },
{ label: '启用', value: '启用' },
{ label: '停用', value: '停用' },
]}
allowClear
/>
</div>
<Space>
<Button type="primary" icon={<SearchOutlined />}>查询</Button>
<Button icon={<ReloadOutlined />}>重置</Button>
</Space>
</div>
<StandardTable
rowKey="key"
columns={columns}
data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
/>
</Card>
</div>
);
};
export default BasicInfo;

72
src/pages/business_basic/components/BasicInfo.less
Unescape Escape View File

@ -0,0 +1,72 @@
@panel-border: #bfe3e3;
@panel-bg: #f6fbfb;
.container {
padding: 0;
}
.section {
margin-bottom: 16px;
}
.blockTitle {
font-size: 16px;
font-weight: 600;
color: #2f4f4f;
margin-bottom: 12px;
}
.panel {
border: 1px solid @panel-border;
background: @panel-bg;
border-radius: 6px;
padding: 12px;
}
.formGrid {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr 120px; // 左2列输入、右侧描述、最右按钮列
grid-column-gap: 16px;
grid-row-gap: 12px;
align-items: start;
}
.colDesc {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
}
.colButtons {
grid-column: 4 / span 1;
grid-row: 1 / span 2;
display: flex;
justify-content: flex-start;
}
.listHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.filterRow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.filterItem {
display: flex;
align-items: center;
gap: 8px;
}
.filterLabel {
color: #666;
font-size: 12px;
white-space: nowrap;
}

2
src/pages/business_basic/components/CustomerInfoManagement.js
Unescape Escape View File

@ -10,7 +10,7 @@ const CustomerInfoManagement = () => {
const columns = [
{
title: '编号',
title: '编号3333',
dataIndex: 'id',
key: 'id',
width: 80,

2
src/pages/business_basic/components/CustomerInfoManagement.less
Unescape Escape View File

@ -1,6 +1,6 @@
.container {
padding: 20px;
background: #f5f5f5;
// background: #f5f5f5;
min-height: 100%;
.header {

2
src/pages/business_basic/components/DataModeling.js
Unescape Escape View File

@ -10,7 +10,7 @@ const DataModeling = () => {
const columns = [
{
title: '编号',
title: '编号111',
dataIndex: 'id',
key: 'id',
width: 80,

2
src/pages/business_basic/components/DataModeling.less
Unescape Escape View File

@ -1,6 +1,6 @@
.container {
padding: 20px;
background: #f5f5f5;
// background: #f5f5f5;
min-height: 100%;
.header {

164
src/pages/business_basic/components/OilDataManagement.js
Unescape Escape View File

@ -1,119 +1,65 @@
import React from 'react';
import { Card, Table, Input, Button, Space } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { Card, Select } from 'antd';
import styles from './OilDataManagement.less';
import BasicInfo from './BasicInfo';
import PhysChem from './PhysChem';
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',
},
];
// 顶部一行选择：第一个为“基本信息/理化性质”，其余占位
const [firstMenu, setFirstMenu] = useState('basic');
const [secondMenu, setSecondMenu] = useState(undefined);
const [thirdMenu, setThirdMenu] = useState(undefined);
const [fourthMenu, setFourthMenu] = useState(undefined);
const [fifthMenu, setFifthMenu] = useState(undefined);
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} 条`,
}}
<div className={styles.topBar}>
<div className={styles.currentLabel}>当前：</div>
<Select
className={styles.topSelect}
value={firstMenu}
onChange={setFirstMenu}
options={[
{ label: '基本信息', value: 'basic' },
{ label: '理化性质', value: 'physchem' },
]}
/>
<Select
className={styles.topSelect}
value={secondMenu}
onChange={setSecondMenu}
placeholder="安全与合规"
options={[]}
disabled
/>
<Select
className={styles.topSelect}
value={thirdMenu}
onChange={setThirdMenu}
placeholder="业务属性"
options={[]}
disabled
/>
</Card>
<Select
className={styles.topSelect}
value={fourthMenu}
onChange={setFourthMenu}
placeholder="文档资料"
options={[]}
disabled
/>
<Select
className={styles.topSelect}
value={fifthMenu}
onChange={setFifthMenu}
placeholder="审计日志"
options={[]}
disabled
/>
</div>
{firstMenu === 'basic' ? <BasicInfo /> : <PhysChem />}
</div>
);
};

86
src/pages/business_basic/components/OilDataManagement.less
Unescape Escape View File

@ -1,18 +1,90 @@
.container {
padding: 20px;
background: #f5f5f5;
// background: #f5f5f5;
min-height: 100%;
.header {
.topBar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 12px;
padding: 8px 12px;
background: #f0f7f7;
border: 1px solid #e1eeee;
border-radius: 6px;
margin-bottom: 16px;
.title {
font-size: 18px;
.currentLabel {
color: #2f4f4f;
font-weight: 600;
color: #333;
}
.topSelect {
width: 160px;
}
}
.section {
margin-bottom: 16px;
.blockTitle {
font-size: 16px;
font-weight: 600;
color: #2f4f4f;
margin-bottom: 12px;
}
.formGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 16px;
grid-row-gap: 12px;
.formItem {
display: flex;
flex-direction: column;
.label {
color: #666;
font-size: 12px;
margin-bottom: 6px;
}
}
.span2 {
grid-column: 1 / span 2;
}
}
.actionsRight {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.listHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.filterRow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
.filterItem {
display: flex;
align-items: center;
gap: 8px;
.filterLabel {
color: #666;
font-size: 12px;
white-space: nowrap;
}
}
}
}
}

294
src/pages/business_basic/components/PhysChem.js
Unescape Escape View File

@ -0,0 +1,294 @@
import React, { useMemo, useState } from 'react';
import { Card, Input, Button, Space, Select, Switch, message } from 'antd';
import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './PhysChem.less';
const PhysChem = () => {
const [form, setForm] = useState({
densityP15: '0.735',
octane: '92',
flashPoint: '-38',
initBoilingPoint: '35',
ninetyBoilingPoint: '180',
aromaticContent: '8',
kinematicViscosity: '2.5',
rvp: '60',
tenBoilingPoint: '55',
});
const [filters, setFilters] = useState({
listCategory: undefined,
listStatus: undefined,
});
const onSave = () => {
message.success('已保存理化性质');
};
const onCancel = () => {
message.info('已取消更改');
};
const onQuery = () => {
message.success('已按条件查询列表');
};
const onReset = () => {
setFilters({ listCategory: undefined, listStatus: undefined });
message.info('筛选已重置');
};
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: (_, record) => (
<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',
},
];
return (
<div className={styles.container}>
<Card className={styles.section}>
<div className={styles.blockTitle}>理化性质</div>
<div className={styles.panel}>
<div className={styles.formGrid}>
<div className={styles.formItem}>
<div className={styles.label}>标准密度(p15)<span className={styles.required}>*</span>:</div>
<Input
value={form.densityP15}
onChange={(e) => setForm({ ...form, densityP15: e.target.value })}
addonAfter="kg/L"
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>辛烷值<span className={styles.required}>*</span>:</div>
<Input
value={form.octane}
onChange={(e) => setForm({ ...form, octane: e.target.value })}
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>闪点<span className={styles.required}>*</span>:</div>
<Input
value={form.flashPoint}
onChange={(e) => setForm({ ...form, flashPoint: e.target.value })}
addonAfter="℃"
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>初馏点<span className={styles.required}>*</span>:</div>
<Input
value={form.initBoilingPoint}
onChange={(e) => setForm({ ...form, initBoilingPoint: e.target.value })}
addonAfter="℃"
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>90%馏出温度<span className={styles.required}>*</span>:</div>
<Input
value={form.ninetyBoilingPoint}
onChange={(e) => setForm({ ...form, ninetyBoilingPoint: e.target.value })}
addonAfter="℃"
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>芳烃含量<span className={styles.required}>*</span>:</div>
<Input
value={form.aromaticContent}
onChange={(e) => setForm({ ...form, aromaticContent: e.target.value })}
addonAfter="ppm"
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>运动粘度:</div>
<Input
value={form.kinematicViscosity}
onChange={(e) => setForm({ ...form, kinematicViscosity: e.target.value })}
addonAfter="cSt"
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>蒸汽压(RVP):</div>
<Input
value={form.rvp}
onChange={(e) => setForm({ ...form, rvp: e.target.value })}
addonAfter="kPa"
placeholder=""
/>
</div>
<div className={styles.formItem}>
<div className={styles.label}>10%馏出温度<span className={styles.required}>*</span>:</div>
<Input
value={form.tenBoilingPoint}
onChange={(e) => setForm({ ...form, tenBoilingPoint: e.target.value })}
addonAfter="℃"
placeholder=""
/>
</div>
</div>
<div className={styles.actionsRight}>
<Space>
<Button type="primary" onClick={onSave}>保存</Button>
<Button onClick={onCancel}>取消</Button>
</Space>
</div>
</div>
</Card>
<Card className={styles.section}>
<div className={styles.listHeader}>
<div className={styles.blockTitle}>油品列表</div>
<Space>
<Button type="primary" icon={<PlusOutlined />}>新增油品</Button>
<Button icon={<ExportOutlined />}>批量导出</Button>
</Space>
</div>
<div className={styles.filterRow}>
<div className={styles.filterItem}>
<div className={styles.filterLabel}>油品分类:</div>
<Select
value={filters.listCategory}
onChange={(v) => setFilters({ ...filters, listCategory: v })}
placeholder="全部"
style={{ width: 140 }}
options={[
{ label: '全部', value: undefined },
{ label: '汽油', value: '汽油' },
{ label: '柴油', value: '柴油' },
]}
allowClear
/>
</div>
<div className={styles.filterItem}>
<div className={styles.filterLabel}>油品状态:</div>
<Select
value={filters.listStatus}
onChange={(v) => setFilters({ ...filters, listStatus: v })}
placeholder="全部"
style={{ width: 140 }}
options={[
{ label: '全部', value: undefined },
{ label: '启用', value: '启用' },
{ label: '停用', value: '停用' },
]}
allowClear
/>
</div>
<Space>
<Button type="primary" icon={<SearchOutlined />} onClick={onQuery}>查询</Button>
<Button icon={<ReloadOutlined />} onClick={onReset}>重置</Button>
</Space>
</div>
<StandardTable
rowKey="key"
columns={columns}
data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
// use default small size from StandardTable
/>
</Card>
</div>
);
};
export default PhysChem;

81
src/pages/business_basic/components/PhysChem.less
Unescape Escape View File

@ -0,0 +1,81 @@
@panel-border: #bfe3e3;
@panel-bg: #f6fbfb;
.container {
padding: 0;
}
.section {
margin-bottom: 16px;
}
.blockTitle {
font-size: 16px;
font-weight: 600;
color: #2f4f4f;
margin-bottom: 12px;
}
.panel {
border: 1px solid @panel-border;
background: @panel-bg;
border-radius: 6px;
padding: 12px;
}
.formGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 16px;
grid-row-gap: 12px;
}
.formItem {
display: flex;
flex-direction: column;
}
.label {
color: #666;
font-size: 12px;
margin-bottom: 6px;
}
.required {
color: #fa541c;
margin-left: 2px;
}
.actionsRight {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.listHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.filterRow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.filterItem {
display: flex;
align-items: center;
gap: 8px;
}
.filterLabel {
color: #666;
font-size: 12px;
white-space: nowrap;
}
Write Preview
Loading…
Cancel
Save