111 lines
2.9 KiB
React
111 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);
|