zhang1106
63f0cb570e
style(backend): 格式化模型文件代码 style(frontend): 调整组件代码格式 chore: 删除旧 ESLint 配置并添加新配置 refactor(backend): 重构模型定义语法 style: 统一箭头函数和对象属性简写
104 lines
2.9 KiB
React
104 lines
2.9 KiB
React
import React from 'react';
|
|
import { Modal, Form, Select, Button } from 'antd';
|
|
import { ReloadOutlined } from '@ant-design/icons';
|
|
import { designTokens } from '../../config/theme';
|
|
|
|
const { Option } = Select;
|
|
|
|
const modalHeaderStyle = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
fontSize: '18px',
|
|
fontWeight: 600,
|
|
};
|
|
|
|
const secondaryActionStyle = {
|
|
height: '40px',
|
|
borderRadius: designTokens.borderRadius.small,
|
|
border: `1px solid ${designTokens.colors.border.light}`,
|
|
fontWeight: '500',
|
|
};
|
|
|
|
const BatchStatusModal = ({ visible, selectedCount, loading, onSubmit, onCancel }) => {
|
|
const [form] = Form.useForm();
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
await onSubmit(values.status);
|
|
} catch (error) {
|
|
if (!error.errorFields) {
|
|
console.error('批量状态变更失败:', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={
|
|
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
|
|
<ReloadOutlined style={{ color: '#52c41a' }} />
|
|
批量状态变更
|
|
</div>
|
|
}
|
|
open={visible}
|
|
onCancel={onCancel}
|
|
footer={[
|
|
<Button key="cancel" onClick={onCancel} style={secondaryActionStyle}>
|
|
取消
|
|
</Button>,
|
|
<Button
|
|
key="submit"
|
|
type="primary"
|
|
loading={loading}
|
|
onClick={handleSubmit}
|
|
style={{
|
|
height: '40px',
|
|
borderRadius: designTokens.borderRadius.small,
|
|
background: designTokens.colors.primary.gradient,
|
|
border: 'none',
|
|
color: '#ffffff',
|
|
boxShadow: designTokens.shadows.small,
|
|
fontWeight: '500',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
确定
|
|
</Button>,
|
|
]}
|
|
destroyOnHidden
|
|
styles={{
|
|
header: {
|
|
borderBottom: '1px solid #f0f0f0',
|
|
padding: '16px 24px',
|
|
position: 'relative',
|
|
},
|
|
body: { padding: '24px' },
|
|
}}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
name="status"
|
|
label="选择新状态"
|
|
rules={[{ required: true, message: '请选择设备状态' }]}
|
|
>
|
|
<Select placeholder="请选择设备状态" style={{ width: '100%' }}>
|
|
<Option value="running">运行中</Option>
|
|
<Option value="maintenance">维护中</Option>
|
|
<Option value="offline">离线</Option>
|
|
<Option value="fault">故障</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<div style={{ color: '#666', fontSize: '13px' }}>
|
|
已选择 <span style={{ color: '#1890ff', fontWeight: 600 }}>{selectedCount}</span> 个设备
|
|
</div>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default React.memo(BatchStatusModal);
|