refactor: 统一代码风格并迁移至 ESLint 新配置
style(backend): 格式化模型文件代码 style(frontend): 调整组件代码格式 chore: 删除旧 ESLint 配置并添加新配置 refactor(backend): 重构模型定义语法 style: 统一箭头函数和对象属性简写
This commit is contained in:
zhang1106
@@ -68,7 +68,7 @@ const IdleDeviceManagement = () => {
|
||||
};
|
||||
const response = await axios.get('/api/idle-devices', { params });
|
||||
setIdleDevices(response.data.idleDevices || []);
|
||||
setPagination((prev) => ({
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
total: response.data.total || 0,
|
||||
}));
|
||||
@@ -113,7 +113,7 @@ const IdleDeviceManagement = () => {
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (record) => {
|
||||
const handleEdit = record => {
|
||||
setEditingDevice(record);
|
||||
let roomId = null;
|
||||
if (record.rackId && record.Rack) {
|
||||
@@ -136,7 +136,7 @@ const IdleDeviceManagement = () => {
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (deviceId) => {
|
||||
const handleDelete = async deviceId => {
|
||||
try {
|
||||
await axios.delete(`/api/idle-devices/${deviceId}`);
|
||||
message.success('删除成功');
|
||||
@@ -146,7 +146,7 @@ const IdleDeviceManagement = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleShelve = (record) => {
|
||||
const handleShelve = record => {
|
||||
setShelvingDevice(record);
|
||||
setShelvePositionConflict(null);
|
||||
setShelveSelectedRackId(null);
|
||||
@@ -195,7 +195,7 @@ const IdleDeviceManagement = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleShelveRackChange = (value) => {
|
||||
const handleShelveRackChange = value => {
|
||||
setShelveSelectedRackId(value);
|
||||
const position = shelveForm.getFieldValue('position');
|
||||
const height = shelveForm.getFieldValue('height');
|
||||
@@ -206,7 +206,7 @@ const IdleDeviceManagement = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleShelvePositionChange = (e) => {
|
||||
const handleShelvePositionChange = e => {
|
||||
const value = e.target.value ? parseInt(e.target.value) : null;
|
||||
const height = shelveForm.getFieldValue('height');
|
||||
if (shelveSelectedRackId && value) {
|
||||
@@ -216,7 +216,7 @@ const IdleDeviceManagement = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleShelveHeightChange = (e) => {
|
||||
const handleShelveHeightChange = e => {
|
||||
const value = e.target.value ? parseInt(e.target.value) : null;
|
||||
const position = shelveForm.getFieldValue('position');
|
||||
if (shelveSelectedRackId && position) {
|
||||
@@ -279,7 +279,7 @@ const IdleDeviceManagement = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const getIdleDays = (idleDate) => {
|
||||
const getIdleDays = idleDate => {
|
||||
if (!idleDate) return 0;
|
||||
const diff = new Date() - new Date(idleDate);
|
||||
return Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
@@ -292,7 +292,10 @@ const IdleDeviceManagement = () => {
|
||||
width: 60,
|
||||
align: 'center',
|
||||
render: (_, __, index) => (
|
||||
<Badge count={index + 1 + (pagination.current - 1) * pagination.pageSize} style={{ backgroundColor: '#f59e0b' }} />
|
||||
<Badge
|
||||
count={index + 1 + (pagination.current - 1) * pagination.pageSize}
|
||||
style={{ backgroundColor: '#f59e0b' }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
@@ -302,16 +305,36 @@ const IdleDeviceManagement = () => {
|
||||
render: (_, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<Avatar
|
||||
style={{ backgroundColor: record.type === 'server' ? '#3b82f6' : record.type === 'switch' ? '#8b5cf6' : '#64748b' }}
|
||||
style={{
|
||||
backgroundColor:
|
||||
record.type === 'server'
|
||||
? '#3b82f6'
|
||||
: record.type === 'switch'
|
||||
? '#8b5cf6'
|
||||
: '#64748b',
|
||||
}}
|
||||
icon={<InboxOutlined />}
|
||||
/>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', display: 'block' }}>{record.name || '-'}</Text>
|
||||
<Text strong style={{ fontSize: '14px', display: 'block' }}>
|
||||
{record.name || '-'}
|
||||
</Text>
|
||||
<Space size={4}>
|
||||
<Tag color={record.type === 'server' ? 'blue' : record.type === 'switch' ? 'purple' : 'default'} style={{ marginRight: 0 }}>
|
||||
<Tag
|
||||
color={
|
||||
record.type === 'server'
|
||||
? 'blue'
|
||||
: record.type === 'switch'
|
||||
? 'purple'
|
||||
: 'default'
|
||||
}
|
||||
style={{ marginRight: 0 }}
|
||||
>
|
||||
{record.type === 'server' ? '服务器' : record.type === 'switch' ? '交换机' : '其他'}
|
||||
</Tag>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>{record.model || '-'}</Text>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||||
{record.model || '-'}
|
||||
</Text>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
@@ -322,8 +345,10 @@ const IdleDeviceManagement = () => {
|
||||
dataIndex: 'deviceId',
|
||||
key: 'deviceId',
|
||||
width: 100,
|
||||
render: (text) => (
|
||||
<Text code style={{ fontSize: '12px', padding: '2px 6px' }}>{text}</Text>
|
||||
render: text => (
|
||||
<Text code style={{ fontSize: '12px', padding: '2px 6px' }}>
|
||||
{text}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
@@ -340,7 +365,13 @@ const IdleDeviceManagement = () => {
|
||||
);
|
||||
}
|
||||
if (record.sourceType === 'rack' && record.Rack) {
|
||||
const location = [record.Rack.Room?.name, record.Rack.name, record.position ? `U${record.position}` : null].filter(Boolean).join(' / ');
|
||||
const location = [
|
||||
record.Rack.Room?.name,
|
||||
record.Rack.name,
|
||||
record.position ? `U${record.position}` : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' / ');
|
||||
return (
|
||||
<Space>
|
||||
<InboxOutlined style={{ color: '#3b82f6' }} />
|
||||
@@ -363,7 +394,9 @@ const IdleDeviceManagement = () => {
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Text style={{ color, fontWeight: 600, fontSize: '16px' }}>{days}</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: '11px' }}>天</Text>
|
||||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
||||
天
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -374,9 +407,11 @@ const IdleDeviceManagement = () => {
|
||||
key: 'idleReason',
|
||||
width: 140,
|
||||
ellipsis: true,
|
||||
render: (text) => (
|
||||
render: text => (
|
||||
<Tooltip title={text || '-'}>
|
||||
<Text type="secondary" ellipsis>{text || '-'}</Text>
|
||||
<Text type="secondary" ellipsis>
|
||||
{text || '-'}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
@@ -386,7 +421,7 @@ const IdleDeviceManagement = () => {
|
||||
key: 'sourceType',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
render: (type) => (
|
||||
render: type => (
|
||||
<Tag color={type === 'warehouse' ? 'green' : 'blue'}>
|
||||
{type === 'warehouse' ? '库房' : '机架'}
|
||||
</Tag>
|
||||
@@ -409,11 +444,27 @@ const IdleDeviceManagement = () => {
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="编辑">
|
||||
<Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)} style={{ borderRadius: '6px', color: '#3b82f6' }} />
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEdit(record)}
|
||||
style={{ borderRadius: '6px', color: '#3b82f6' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Popconfirm title="确认删除？" onConfirm={() => handleDelete(record.deviceId)} okText="确认" cancelText="取消" okButtonProps={{ danger: true }}>
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
onConfirm={() => handleDelete(record.deviceId)}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
okButtonProps={{ danger: true }}
|
||||
>
|
||||
<Tooltip title="删除">
|
||||
<Button type="text" danger icon={<DeleteOutlined />} style={{ borderRadius: '6px' }} />
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
style={{ borderRadius: '6px' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
@@ -452,7 +503,9 @@ const IdleDeviceManagement = () => {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#f8fafc', padding: '24px' }}>
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<Title level={4} style={{ marginBottom: '4px', color: '#1e293b' }}>空闲设备管理</Title>
|
||||
<Title level={4} style={{ marginBottom: '4px', color: '#1e293b' }}>
|
||||
空闲设备管理
|
||||
</Title>
|
||||
<Text type="secondary">管理已下线或空闲的设备，支持恢复领用到设备管理</Text>
|
||||
</div>
|
||||
|
||||
@@ -468,24 +521,38 @@ const IdleDeviceManagement = () => {
|
||||
}}
|
||||
bodyStyle={{ padding: '20px' }}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div
|
||||
style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '13px' }}>{stat.title}</Text>
|
||||
<div style={{ fontSize: '28px', fontWeight: 700, color: stat.color, lineHeight: 1.2, marginTop: '4px' }}>
|
||||
<Text type="secondary" style={{ fontSize: '13px' }}>
|
||||
{stat.title}
|
||||
</Text>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '28px',
|
||||
fontWeight: 700,
|
||||
color: stat.color,
|
||||
lineHeight: 1.2,
|
||||
marginTop: '4px',
|
||||
}}
|
||||
>
|
||||
{stat.value}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(255,255,255,0.7)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '20px',
|
||||
color: stat.color
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(255,255,255,0.7)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '20px',
|
||||
color: stat.color,
|
||||
}}
|
||||
>
|
||||
{stat.icon}
|
||||
</div>
|
||||
</div>
|
||||
@@ -502,12 +569,14 @@ const IdleDeviceManagement = () => {
|
||||
}}
|
||||
bodyStyle={{ padding: 0 }}
|
||||
>
|
||||
<div style={{
|
||||
padding: '20px 24px',
|
||||
borderBottom: '1px solid #f1f5f9',
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '16px 16px 0 0',
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
padding: '20px 24px',
|
||||
borderBottom: '1px solid #f1f5f9',
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '16px 16px 0 0',
|
||||
}}
|
||||
>
|
||||
<Row gutter={16} align="middle">
|
||||
<Col flex="auto">
|
||||
<Space size="middle" wrap>
|
||||
@@ -516,7 +585,7 @@ const IdleDeviceManagement = () => {
|
||||
prefix={<SearchOutlined style={{ color: '#94a3b8' }} />}
|
||||
style={{ borderRadius: '10px', width: '260px', height: '40px' }}
|
||||
value={searchKeyword}
|
||||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||||
onChange={e => setSearchKeyword(e.target.value)}
|
||||
allowClear
|
||||
/>
|
||||
<Select
|
||||
@@ -528,7 +597,11 @@ const IdleDeviceManagement = () => {
|
||||
<Option value="rack">机架</Option>
|
||||
<Option value="warehouse">库房</Option>
|
||||
</Select>
|
||||
<Button icon={<ReloadOutlined />} onClick={fetchIdleDevices} style={{ height: 40, borderRadius: '10px' }}>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={fetchIdleDevices}
|
||||
style={{ height: 40, borderRadius: '10px' }}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</Space>
|
||||
@@ -561,12 +634,14 @@ const IdleDeviceManagement = () => {
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
scroll={{ x: 1100 }}
|
||||
rowClassName={(record, index) => index % 2 === 0 ? 'table-row-even' : 'table-row-odd'}
|
||||
rowClassName={(record, index) => (index % 2 === 0 ? 'table-row-even' : 'table-row-odd')}
|
||||
style={{ borderRadius: '0 0 16px 16px' }}
|
||||
/>
|
||||
|
||||
{pagination.total > 0 && (
|
||||
<div style={{ padding: '16px 24px', borderTop: '1px solid #f1f5f9', background: '#fafafa' }}>
|
||||
<div
|
||||
style={{ padding: '16px 24px', borderTop: '1px solid #f1f5f9', background: '#fafafa' }}
|
||||
>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col>
|
||||
<Text type="secondary">
|
||||
@@ -579,11 +654,11 @@ const IdleDeviceManagement = () => {
|
||||
pageSize={pagination.pageSize}
|
||||
total={pagination.total}
|
||||
onChange={(page, pageSize) =>
|
||||
setPagination((prev) => ({ ...prev, current: page, pageSize }))
|
||||
setPagination(prev => ({ ...prev, current: page, pageSize }))
|
||||
}
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
showTotal={(total) => `共 ${total} 条`}
|
||||
showTotal={total => `共 ${total} 条`}
|
||||
size="small"
|
||||
/>
|
||||
</Col>
|
||||
@@ -595,12 +670,14 @@ const IdleDeviceManagement = () => {
|
||||
<Modal
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: editingDevice ? '#3b82f6' : '#f59e0b'
|
||||
}} />
|
||||
<div
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: editingDevice ? '#3b82f6' : '#f59e0b',
|
||||
}}
|
||||
/>
|
||||
{editingDevice ? '编辑空闲设备' : '添加空闲设备'}
|
||||
</div>
|
||||
}
|
||||
@@ -615,28 +692,38 @@ const IdleDeviceManagement = () => {
|
||||
style={{ top: 100 }}
|
||||
>
|
||||
<Form form={form} layout="vertical" size="middle">
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<div style={{ width: '4px', height: '16px', background: '#3b82f6', borderRadius: '2px' }} />
|
||||
border: '1px solid #e2e8f0',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: '4px', height: '16px', background: '#3b82f6', borderRadius: '2px' }}
|
||||
/>
|
||||
设备基本信息
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="name" label="设备名称" rules={[{ required: true, message: '请输入设备名称' }]}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="设备名称"
|
||||
rules={[{ required: true, message: '请输入设备名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备名称" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
@@ -667,36 +754,51 @@ const IdleDeviceManagement = () => {
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="powerConsumption" label="功耗(W)">
|
||||
<Input type="number" placeholder="请输入功耗" min={0} style={{ borderRadius: '8px' }} />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="请输入功耗"
|
||||
min={0}
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
{editingDevice && (
|
||||
<Col span={12}>
|
||||
<Form.Item label="设备ID">
|
||||
<Input value={editingDevice.deviceId} disabled style={{ borderRadius: '8px' }} />
|
||||
<Input
|
||||
value={editingDevice.deviceId}
|
||||
disabled
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<div style={{ width: '4px', height: '16px', background: '#22c55e', borderRadius: '2px' }} />
|
||||
border: '1px solid #e2e8f0',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: '4px', height: '16px', background: '#22c55e', borderRadius: '2px' }}
|
||||
/>
|
||||
位置信息
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
@@ -705,7 +807,7 @@ const IdleDeviceManagement = () => {
|
||||
<Select
|
||||
placeholder="请选择机房"
|
||||
allowClear
|
||||
onChange={(value) => {
|
||||
onChange={value => {
|
||||
setSelectedRoomId(value);
|
||||
form.setFieldsValue({ rackId: null, position: null });
|
||||
if (value) {
|
||||
@@ -714,7 +816,7 @@ const IdleDeviceManagement = () => {
|
||||
}}
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
{rooms.map((room) => (
|
||||
{rooms.map(room => (
|
||||
<Option key={room.roomId} value={room.roomId}>
|
||||
{room.name}
|
||||
</Option>
|
||||
@@ -725,14 +827,14 @@ const IdleDeviceManagement = () => {
|
||||
<Col span={8}>
|
||||
<Form.Item name="rackId" label="机柜">
|
||||
<Select
|
||||
placeholder={selectedRoomId ? "请选择机柜" : "请先选择机房"}
|
||||
placeholder={selectedRoomId ? '请选择机柜' : '请先选择机房'}
|
||||
allowClear
|
||||
disabled={!selectedRoomId}
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
{racks
|
||||
.filter((rack) => rack.roomId === selectedRoomId)
|
||||
.map((rack) => (
|
||||
.filter(rack => rack.roomId === selectedRoomId)
|
||||
.map(rack => (
|
||||
<Option key={rack.rackId} value={rack.rackId}>
|
||||
{rack.name}
|
||||
</Option>
|
||||
@@ -742,11 +844,19 @@ const IdleDeviceManagement = () => {
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="position" label="U位">
|
||||
<Input type="number" placeholder="请输入U位" min={1} disabled={!selectedRoomId} style={{ borderRadius: '8px' }} />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="请输入U位"
|
||||
min={1}
|
||||
disabled={!selectedRoomId}
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ textAlign: 'center', color: '#94a3b8', fontSize: '12px', margin: '8px 0' }}>
|
||||
<div
|
||||
style={{ textAlign: 'center', color: '#94a3b8', fontSize: '12px', margin: '8px 0' }}
|
||||
>
|
||||
— 或 —
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
@@ -769,28 +879,37 @@ const IdleDeviceManagement = () => {
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<div style={{ width: '4px', height: '16px', background: '#64748b', borderRadius: '2px' }} />
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
border: '1px solid #e2e8f0',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: '4px', height: '16px', background: '#64748b', borderRadius: '2px' }}
|
||||
/>
|
||||
附加信息
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item name="idleReason" label="空闲原因">
|
||||
<Input placeholder="请输入空闲原因，如：设备下线、备件库存等" style={{ borderRadius: '8px' }} />
|
||||
<Input
|
||||
placeholder="请输入空闲原因，如：设备下线、备件库存等"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -808,7 +927,9 @@ const IdleDeviceManagement = () => {
|
||||
<Modal
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e' }} />
|
||||
<div
|
||||
style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e' }}
|
||||
/>
|
||||
设备上架
|
||||
</div>
|
||||
}
|
||||
@@ -822,33 +943,47 @@ const IdleDeviceManagement = () => {
|
||||
bodyStyle={{ padding: '24px' }}
|
||||
>
|
||||
<Form form={shelveForm} layout="vertical" size="middle">
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<div style={{ width: '4px', height: '16px', background: '#3b82f6', borderRadius: '2px' }} />
|
||||
border: '1px solid #e2e8f0',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: '4px', height: '16px', background: '#3b82f6', borderRadius: '2px' }}
|
||||
/>
|
||||
设备基本信息
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="name" label="设备名称" rules={[{ required: true, message: '请输入设备名称' }]}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="设备名称"
|
||||
rules={[{ required: true, message: '请输入设备名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备名称" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="type" label="设备类型" rules={[{ required: true, message: '请选择设备类型' }]}>
|
||||
<Form.Item
|
||||
name="type"
|
||||
label="设备类型"
|
||||
rules={[{ required: true, message: '请选择设备类型' }]}
|
||||
>
|
||||
<Select placeholder="请选择设备类型" style={{ borderRadius: '8px' }}>
|
||||
<Option value="server">服务器</Option>
|
||||
<Option value="switch">交换机</Option>
|
||||
@@ -866,7 +1001,11 @@ const IdleDeviceManagement = () => {
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="serialNumber" label="序列号" rules={[{ required: true, message: '请输入序列号' }]}>
|
||||
<Form.Item
|
||||
name="serialNumber"
|
||||
label="序列号"
|
||||
rules={[{ required: true, message: '请输入序列号' }]}
|
||||
>
|
||||
<Input placeholder="请输入序列号" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
@@ -874,34 +1013,50 @@ const IdleDeviceManagement = () => {
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name="height" label="高度(U)">
|
||||
<Input type="number" placeholder="请输入高度" min={1} style={{ borderRadius: '8px' }} />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="请输入高度"
|
||||
min={1}
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="powerConsumption" label="功率(W)">
|
||||
<Input type="number" placeholder="请输入功率" min={0} style={{ borderRadius: '8px' }} />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="请输入功率"
|
||||
min={0}
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<div style={{ width: '4px', height: '16px', background: '#22c55e', borderRadius: '2px' }} />
|
||||
border: '1px solid #e2e8f0',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: '4px', height: '16px', background: '#22c55e', borderRadius: '2px' }}
|
||||
/>
|
||||
上架位置
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
@@ -909,13 +1064,13 @@ const IdleDeviceManagement = () => {
|
||||
<Form.Item name="roomId" label="机房">
|
||||
<Select
|
||||
placeholder="请选择机房"
|
||||
onChange={(value) => {
|
||||
onChange={value => {
|
||||
setSelectedShelveRoomId(value);
|
||||
shelveForm.setFieldsValue({ rackId: null });
|
||||
}}
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
{rooms.map((room) => (
|
||||
{rooms.map(room => (
|
||||
<Option key={room.roomId} value={room.roomId}>
|
||||
{room.name}
|
||||
</Option>
|
||||
@@ -926,14 +1081,14 @@ const IdleDeviceManagement = () => {
|
||||
<Col span={8}>
|
||||
<Form.Item name="rackId" label="机柜">
|
||||
<Select
|
||||
placeholder={selectedShelveRoomId ? "请选择机柜" : "请先选择机房"}
|
||||
placeholder={selectedShelveRoomId ? '请选择机柜' : '请先选择机房'}
|
||||
disabled={!selectedShelveRoomId}
|
||||
style={{ borderRadius: '8px' }}
|
||||
onChange={handleShelveRackChange}
|
||||
>
|
||||
{racks
|
||||
.filter((rack) => rack.roomId === selectedShelveRoomId)
|
||||
.map((rack) => (
|
||||
.filter(rack => rack.roomId === selectedShelveRoomId)
|
||||
.map(rack => (
|
||||
<Option key={rack.rackId} value={rack.rackId}>
|
||||
{rack.name}
|
||||
</Option>
|
||||
@@ -943,47 +1098,67 @@ const IdleDeviceManagement = () => {
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="position" label="U位">
|
||||
<Input type="number" placeholder="请输入U位" min={1} style={{ borderRadius: '8px' }} onChange={handleShelvePositionChange} />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="请输入U位"
|
||||
min={1}
|
||||
style={{ borderRadius: '8px' }}
|
||||
onChange={handleShelvePositionChange}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
{shelvePositionConflict && (
|
||||
<div style={{ marginTop: '12px' }}>
|
||||
<div style={{
|
||||
background: '#fef2f2',
|
||||
border: '1px solid #fecaca',
|
||||
borderRadius: '8px',
|
||||
padding: '12px 16px',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: '10px'
|
||||
}}>
|
||||
<ExclamationCircleOutlined style={{ color: '#ef4444', fontSize: '18px', marginTop: '2px' }} />
|
||||
<div
|
||||
style={{
|
||||
background: '#fef2f2',
|
||||
border: '1px solid #fecaca',
|
||||
borderRadius: '8px',
|
||||
padding: '12px 16px',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<ExclamationCircleOutlined
|
||||
style={{ color: '#ef4444', fontSize: '18px', marginTop: '2px' }}
|
||||
/>
|
||||
<div>
|
||||
<div style={{ color: '#dc2626', fontWeight: 600, marginBottom: '4px' }}>U位冲突</div>
|
||||
<div style={{ color: '#991b1b', fontSize: '13px' }}>{shelvePositionConflict}</div>
|
||||
<div style={{ color: '#dc2626', fontWeight: 600, marginBottom: '4px' }}>
|
||||
U位冲突
|
||||
</div>
|
||||
<div style={{ color: '#991b1b', fontSize: '13px' }}>
|
||||
{shelvePositionConflict}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<div style={{ width: '4px', height: '16px', background: '#64748b', borderRadius: '2px' }} />
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #fefefe 0%, #f8fafc 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
border: '1px solid #e2e8f0',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#334155',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: '4px', height: '16px', background: '#64748b', borderRadius: '2px' }}
|
||||
/>
|
||||
备注信息
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
@@ -1022,4 +1197,4 @@ const IdleDeviceManagement = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default IdleDeviceManagement;
|
||||
export default IdleDeviceManagement;
|
||||
|
||||
Reference in New Issue
Block a user