zhang1106
63f0cb570e
style(backend): 格式化模型文件代码 style(frontend): 调整组件代码格式 chore: 删除旧 ESLint 配置并添加新配置 refactor(backend): 重构模型定义语法 style: 统一箭头函数和对象属性简写
731 lines
20 KiB
React
731 lines
20 KiB
React
import React, { useState, useEffect, useMemo } from 'react';
|
||
import {
|
||
Table,
|
||
Button,
|
||
Modal,
|
||
Form,
|
||
Input,
|
||
Select,
|
||
message,
|
||
Card,
|
||
Space,
|
||
InputNumber,
|
||
Switch,
|
||
Tag,
|
||
Statistic,
|
||
Tooltip,
|
||
} from 'antd';
|
||
import {
|
||
PlusOutlined,
|
||
EditOutlined,
|
||
DeleteOutlined,
|
||
AppstoreOutlined,
|
||
FontSizeOutlined,
|
||
NumberOutlined,
|
||
CheckCircleOutlined,
|
||
CalendarOutlined,
|
||
FileTextOutlined,
|
||
LockOutlined,
|
||
PlusCircleOutlined,
|
||
MinusCircleOutlined,
|
||
} from '@ant-design/icons';
|
||
import axios from 'axios';
|
||
import { designTokens } from '../config/theme';
|
||
import CloseButton from '../components/CloseButton';
|
||
|
||
const { Option = Select.Option } = Select;
|
||
|
||
const OptionsEditor = ({ value = [], onChange }) => {
|
||
const handleAdd = () => {
|
||
onChange([...value, { value: '', label: '' }]);
|
||
};
|
||
|
||
const handleRemove = index => {
|
||
onChange(value.filter((_, i) => i !== index));
|
||
};
|
||
|
||
const handleUpdate = (index, field, fieldValue) => {
|
||
const newOptions = value.map((opt, i) => (i === index ? { ...opt, [field]: fieldValue } : opt));
|
||
onChange(newOptions);
|
||
};
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
border: '1px solid #e8e8e8',
|
||
borderRadius: '12px',
|
||
padding: '20px',
|
||
background: 'linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%)',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
marginBottom: '16px',
|
||
gap: '8px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: '4px',
|
||
height: '16px',
|
||
background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
|
||
borderRadius: '2px',
|
||
}}
|
||
/>
|
||
<span style={{ color: '#333', fontSize: '14px', fontWeight: '600' }}>选项配置</span>
|
||
<span style={{ color: '#999', fontSize: '12px' }}>（值用于提交，标签用于显示）</span>
|
||
</div>
|
||
|
||
{value.length === 0 ? (
|
||
<div
|
||
style={{
|
||
textAlign: 'center',
|
||
padding: '24px',
|
||
background: '#fff',
|
||
borderRadius: '8px',
|
||
border: '1px dashed #d9d9d9',
|
||
}}
|
||
>
|
||
<div style={{ color: '#bbb', fontSize: '14px', marginBottom: '12px' }}>暂无选项</div>
|
||
<Button
|
||
type="primary"
|
||
icon={<PlusCircleOutlined />}
|
||
onClick={handleAdd}
|
||
style={{
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
border: 'none',
|
||
borderRadius: '6px',
|
||
height: '36px',
|
||
}}
|
||
>
|
||
添加第一个选项
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div
|
||
style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '16px' }}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
gap: '12px',
|
||
padding: '0 4px',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
<span style={{ width: '160px', color: '#666', fontSize: '12px', fontWeight: '500' }}>
|
||
值（value）
|
||
</span>
|
||
<span style={{ width: '160px', color: '#666', fontSize: '12px', fontWeight: '500' }}>
|
||
标签（label）
|
||
</span>
|
||
</div>
|
||
{value.map((opt, index) => (
|
||
<div
|
||
key={index}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '12px',
|
||
padding: '12px',
|
||
background: '#fff',
|
||
borderRadius: '8px',
|
||
border: '1px solid #e8e8e8',
|
||
transition: 'all 0.2s ease',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: '24px',
|
||
height: '24px',
|
||
borderRadius: '50%',
|
||
background: 'linear-gradient(135deg, #667eea20 0%, #764ba220 100%)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#667eea',
|
||
fontSize: '12px',
|
||
fontWeight: '600',
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{index + 1}
|
||
</div>
|
||
<Input
|
||
placeholder="值"
|
||
value={opt.value}
|
||
onChange={e => handleUpdate(index, 'value', e.target.value)}
|
||
style={{ width: '160px', borderRadius: '6px' }}
|
||
/>
|
||
<Input
|
||
placeholder="标签"
|
||
value={opt.label}
|
||
onChange={e => handleUpdate(index, 'label', e.target.value)}
|
||
style={{ width: '160px', borderRadius: '6px' }}
|
||
/>
|
||
<Button
|
||
type="text"
|
||
danger
|
||
icon={<MinusCircleOutlined />}
|
||
onClick={() => handleRemove(index)}
|
||
style={{ flexShrink: 0 }}
|
||
>
|
||
删除
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{value.length > 0 && (
|
||
<Button
|
||
type="dashed"
|
||
icon={<PlusCircleOutlined />}
|
||
onClick={handleAdd}
|
||
style={{
|
||
width: '100%',
|
||
height: '40px',
|
||
borderRadius: '8px',
|
||
borderColor: '#d9d9d9',
|
||
color: '#666',
|
||
}}
|
||
>
|
||
添加选项
|
||
</Button>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const pageContainerStyle = {
|
||
minHeight: '100vh',
|
||
background: designTokens.colors.background.secondary,
|
||
padding: designTokens.spacing.lg,
|
||
};
|
||
|
||
const titleRowStyle = {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
marginBottom: designTokens.spacing.lg,
|
||
};
|
||
|
||
const titleStyle = {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: designTokens.spacing.sm,
|
||
fontSize: '20px',
|
||
fontWeight: '600',
|
||
color: designTokens.colors.text.primary,
|
||
};
|
||
|
||
const actionButtonStyle = {
|
||
height: '36px',
|
||
padding: `0 ${designTokens.spacing.md}px`,
|
||
borderRadius: designTokens.borderRadius.small,
|
||
fontSize: '13px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: designTokens.spacing.xs,
|
||
};
|
||
|
||
const primaryActionStyle = {
|
||
...actionButtonStyle,
|
||
background: designTokens.colors.primary.gradient,
|
||
border: 'none',
|
||
color: '#ffffff',
|
||
boxShadow: designTokens.shadows.small,
|
||
};
|
||
|
||
const tableCardStyle = {
|
||
background: designTokens.colors.background.primary,
|
||
borderRadius: designTokens.borderRadius.large,
|
||
boxShadow: designTokens.shadows.small,
|
||
border: `1px solid ${designTokens.colors.border.light}`,
|
||
overflow: 'hidden',
|
||
};
|
||
|
||
const tableStyle = {
|
||
background: designTokens.colors.background.primary,
|
||
};
|
||
|
||
const titleIconStyle = {
|
||
color: designTokens.colors.primary.main,
|
||
};
|
||
|
||
const modalTitleStyle = {
|
||
fontWeight: '600',
|
||
};
|
||
|
||
const formLabelStyle = {
|
||
fontWeight: '500',
|
||
};
|
||
|
||
const tableCellStyle = {
|
||
fontWeight: '500',
|
||
color: designTokens.colors.text.primary,
|
||
};
|
||
|
||
const typeTagStyle = {
|
||
border: 'none',
|
||
borderRadius: designTokens.borderRadius.small,
|
||
fontWeight: '500',
|
||
};
|
||
|
||
const orderBadgeStyle = {
|
||
background: designTokens.colors.background.tertiary,
|
||
padding: '2px 8px',
|
||
borderRadius: designTokens.borderRadius.small,
|
||
fontSize: '12px',
|
||
fontWeight: '500',
|
||
};
|
||
|
||
const editButtonStyle = {
|
||
color: designTokens.colors.primary.main,
|
||
height: '28px',
|
||
padding: '0 8px',
|
||
};
|
||
|
||
const deleteButtonStyle = {
|
||
height: '28px',
|
||
padding: '0 8px',
|
||
};
|
||
|
||
const formRowStyle = {
|
||
display: 'flex',
|
||
gap: designTokens.spacing.md,
|
||
};
|
||
|
||
const formItemFlexStyle = {
|
||
flex: 1,
|
||
};
|
||
|
||
const textAreaStyle = {
|
||
fontFamily: 'monospace',
|
||
};
|
||
|
||
const modalBodyStyle = {
|
||
padding: designTokens.spacing.lg,
|
||
};
|
||
|
||
const formActionsStyle = {
|
||
marginBottom: 0,
|
||
textAlign: 'right',
|
||
};
|
||
|
||
const modalStyle = {
|
||
borderRadius: designTokens.borderRadius.large,
|
||
};
|
||
|
||
const FIELD_TYPE_MAP = {
|
||
string: { text: '文本', color: designTokens.colors.fieldType.string },
|
||
number: { text: '数字', color: designTokens.colors.fieldType.number },
|
||
boolean: { text: '布尔值', color: designTokens.colors.fieldType.boolean },
|
||
select: { text: '下拉选择', color: designTokens.colors.fieldType.select },
|
||
date: { text: '日期', color: designTokens.colors.fieldType.date },
|
||
textarea: { text: '多行文本', color: designTokens.colors.fieldType.textarea },
|
||
};
|
||
|
||
const FIELD_TYPE_OPTIONS = [
|
||
{ value: 'string', label: '文本' },
|
||
{ value: 'number', label: '数字' },
|
||
{ value: 'boolean', label: '布尔值' },
|
||
{ value: 'select', label: '下拉选择' },
|
||
{ value: 'date', label: '日期' },
|
||
{ value: 'textarea', label: '多行文本' },
|
||
];
|
||
|
||
function DeviceFieldManagement() {
|
||
const [fields, setFields] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [editingField, setEditingField] = useState(null);
|
||
const [selectedFieldType, setSelectedFieldType] = useState('string');
|
||
const [form] = Form.useForm();
|
||
const [pagination, setPagination] = useState({
|
||
current: 1,
|
||
pageSize: 10,
|
||
pageSizeOptions: ['10', '20', '50', '100'],
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 共 ${total} 条`,
|
||
});
|
||
|
||
const fetchFields = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await axios.get('/api/deviceFields');
|
||
setFields(response.data.sort((a, b) => a.order - b.order));
|
||
} catch (error) {
|
||
message.error('获取字段列表失败');
|
||
console.error('获取字段列表失败:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchFields();
|
||
}, []);
|
||
|
||
const showModal = (field = null) => {
|
||
setEditingField(field);
|
||
if (field) {
|
||
const fieldData = {
|
||
...field,
|
||
options: field.options || [],
|
||
};
|
||
setSelectedFieldType(field.fieldType || 'string');
|
||
form.setFieldsValue(fieldData);
|
||
} else {
|
||
form.resetFields();
|
||
setSelectedFieldType('string');
|
||
}
|
||
setModalVisible(true);
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
setModalVisible(false);
|
||
setEditingField(null);
|
||
setSelectedFieldType('string');
|
||
};
|
||
|
||
const handleFieldTypeChange = value => {
|
||
setSelectedFieldType(value);
|
||
if (value !== 'select') {
|
||
form.setFieldsValue({ options: [] });
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async values => {
|
||
try {
|
||
const fieldData = {
|
||
...values,
|
||
options: values.options && values.options.length > 0 ? values.options : null,
|
||
};
|
||
|
||
if (editingField) {
|
||
await axios.put(`/api/deviceFields/${editingField.fieldId}`, fieldData);
|
||
message.success('字段更新成功');
|
||
} else {
|
||
await axios.post('/api/deviceFields', fieldData);
|
||
message.success('字段创建成功');
|
||
}
|
||
|
||
setModalVisible(false);
|
||
fetchFields();
|
||
setEditingField(null);
|
||
setSelectedFieldType('string');
|
||
} catch (error) {
|
||
message.error(editingField ? '字段更新失败' : '字段创建失败');
|
||
console.error(editingField ? '字段更新失败:' : '字段创建失败:', error);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async fieldId => {
|
||
Modal.confirm({
|
||
title: '确认删除',
|
||
content: '确定要删除这个字段吗？',
|
||
okText: '删除',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
try {
|
||
await axios.delete(`/api/deviceFields/${fieldId}`);
|
||
message.success('字段删除成功');
|
||
fetchFields();
|
||
} catch (error) {
|
||
message.error('字段删除失败');
|
||
console.error('字段删除失败:', error);
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
const getFieldTypeIcon = type => {
|
||
const iconMap = {
|
||
string: <FontSizeOutlined />,
|
||
number: <NumberOutlined />,
|
||
boolean: <CheckCircleOutlined />,
|
||
select: <AppstoreOutlined />,
|
||
date: <CalendarOutlined />,
|
||
textarea: <FileTextOutlined />,
|
||
};
|
||
return iconMap[type] || <FontSizeOutlined />;
|
||
};
|
||
|
||
const columns = useMemo(
|
||
() => [
|
||
{
|
||
title: '字段名称',
|
||
dataIndex: 'fieldName',
|
||
key: 'fieldName',
|
||
width: 150,
|
||
render: (text, record) => (
|
||
<Space>
|
||
<span style={tableCellStyle}>{text}</span>
|
||
{record.isSystem && (
|
||
<Tooltip title="系统字段，不可删除">
|
||
<LockOutlined style={{ color: '#f59e0b', fontSize: '14px' }} />
|
||
</Tooltip>
|
||
)}
|
||
</Space>
|
||
),
|
||
},
|
||
{
|
||
title: '显示名称',
|
||
dataIndex: 'displayName',
|
||
key: 'displayName',
|
||
width: 120,
|
||
},
|
||
{
|
||
title: '字段类型',
|
||
dataIndex: 'fieldType',
|
||
key: 'fieldType',
|
||
width: 110,
|
||
render: type => {
|
||
const config = FIELD_TYPE_MAP[type] || {
|
||
text: type,
|
||
color: designTokens.colors.text.tertiary,
|
||
};
|
||
return (
|
||
<Tag style={{ ...typeTagStyle, background: `${config.color}15`, color: config.color }}>
|
||
{getFieldTypeIcon(type)}
|
||
<span style={{ marginLeft: '4px' }}>{config.text}</span>
|
||
</Tag>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '必填',
|
||
dataIndex: 'required',
|
||
key: 'required',
|
||
width: 80,
|
||
render: required => (
|
||
<span
|
||
style={{
|
||
color: required
|
||
? designTokens.colors.success.main
|
||
: designTokens.colors.text.tertiary,
|
||
...tableCellStyle,
|
||
}}
|
||
>
|
||
{required ? '是' : '否'}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: '可见',
|
||
dataIndex: 'visible',
|
||
key: 'visible',
|
||
width: 80,
|
||
render: visible => (
|
||
<span
|
||
style={{
|
||
color: visible ? designTokens.colors.primary.main : designTokens.colors.text.tertiary,
|
||
...tableCellStyle,
|
||
}}
|
||
>
|
||
{visible ? '是' : '否'}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: '顺序',
|
||
dataIndex: 'order',
|
||
key: 'order',
|
||
width: 80,
|
||
render: order => <span style={orderBadgeStyle}>{order}</span>,
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 160,
|
||
fixed: 'right',
|
||
render: (_, record) => (
|
||
<Space size="small">
|
||
<Button
|
||
type="text"
|
||
icon={<EditOutlined />}
|
||
onClick={() => showModal(record)}
|
||
className="table-action-btn"
|
||
>
|
||
编辑
|
||
</Button>
|
||
{record.isSystem ? (
|
||
<Tooltip title="系统字段不可删除">
|
||
<Button
|
||
type="text"
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
disabled
|
||
className="table-action-btn-disabled"
|
||
>
|
||
删除
|
||
</Button>
|
||
</Tooltip>
|
||
) : (
|
||
<Button
|
||
type="text"
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
onClick={() => handleDelete(record.fieldId)}
|
||
className="table-action-btn"
|
||
>
|
||
删除
|
||
</Button>
|
||
)}
|
||
</Space>
|
||
),
|
||
},
|
||
],
|
||
[]
|
||
);
|
||
|
||
return (
|
||
<div style={pageContainerStyle}>
|
||
<div style={titleRowStyle}>
|
||
<div style={titleStyle}>
|
||
<AppstoreOutlined style={titleIconStyle} />
|
||
设备字段管理
|
||
</div>
|
||
<Button
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={() => showModal()}
|
||
className="page-primary-btn"
|
||
>
|
||
添加字段
|
||
</Button>
|
||
</div>
|
||
|
||
<div style={tableCardStyle}>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={fields}
|
||
rowKey="fieldId"
|
||
loading={loading}
|
||
pagination={pagination}
|
||
onChange={newPagination => {
|
||
setPagination({
|
||
...pagination,
|
||
current: newPagination.current,
|
||
pageSize: newPagination.pageSize,
|
||
});
|
||
}}
|
||
scroll={{ x: 900 }}
|
||
style={tableStyle}
|
||
/>
|
||
</div>
|
||
|
||
<Modal
|
||
title={<span style={modalTitleStyle}>{editingField ? '编辑字段' : '添加字段'}</span>}
|
||
open={modalVisible}
|
||
closeIcon={<CloseButton />}
|
||
onCancel={handleCancel}
|
||
footer={null}
|
||
width={600}
|
||
styles={{ body: modalBodyStyle }}
|
||
style={modalStyle}
|
||
>
|
||
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
||
<Form.Item
|
||
name="fieldName"
|
||
label={<span style={formLabelStyle}>字段名称</span>}
|
||
rules={[{ required: true, message: '请输入字段名称' }]}
|
||
>
|
||
<Input placeholder="请输入字段名称（英文，如：deviceId）" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="displayName"
|
||
label={<span style={formLabelStyle}>显示名称</span>}
|
||
rules={[{ required: true, message: '请输入显示名称' }]}
|
||
>
|
||
<Input placeholder="请输入显示名称（中文，如：设备ID）" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="fieldType"
|
||
label={<span style={formLabelStyle}>字段类型</span>}
|
||
rules={[{ required: true, message: '请选择字段类型' }]}
|
||
>
|
||
<Select placeholder="请选择字段类型" onChange={handleFieldTypeChange}>
|
||
{FIELD_TYPE_OPTIONS.map(opt => (
|
||
<Option key={opt.value} value={opt.value}>
|
||
{opt.label}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<div style={formRowStyle}>
|
||
<Form.Item
|
||
name="required"
|
||
label={<span style={formLabelStyle}>必填</span>}
|
||
valuePropName="checked"
|
||
style={formItemFlexStyle}
|
||
>
|
||
<Switch />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="visible"
|
||
label={<span style={formLabelStyle}>可见</span>}
|
||
valuePropName="checked"
|
||
style={formItemFlexStyle}
|
||
>
|
||
<Switch defaultChecked />
|
||
</Form.Item>
|
||
</div>
|
||
|
||
<Form.Item
|
||
name="order"
|
||
label={<span style={formLabelStyle}>显示顺序</span>}
|
||
rules={[{ required: true, message: '请输入显示顺序' }]}
|
||
>
|
||
<InputNumber placeholder="请输入显示顺序" min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
|
||
{selectedFieldType === 'select' ? (
|
||
<Form.Item
|
||
name="options"
|
||
label={<span style={formLabelStyle}>选项配置</span>}
|
||
tooltip="为下拉选择类型添加选项，值（value）用于提交数据，标签（label）用于显示"
|
||
>
|
||
<OptionsEditor />
|
||
</Form.Item>
|
||
) : (
|
||
<Form.Item
|
||
name="options"
|
||
label={<span style={formLabelStyle}>选项配置</span>}
|
||
tooltip="仅下拉选择类型需要配置选项"
|
||
>
|
||
<Input.TextArea
|
||
rows={2}
|
||
placeholder="仅下拉选择类型需要配置，此处不可编辑"
|
||
disabled
|
||
style={{ background: '#f5f5f5' }}
|
||
/>
|
||
</Form.Item>
|
||
)}
|
||
|
||
<Form.Item style={formActionsStyle}>
|
||
<Space>
|
||
<Button onClick={handleCancel}>取消</Button>
|
||
<Button type="primary" htmlType="submit">
|
||
确定
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default DeviceFieldManagement;
|