107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
// index.tsx
|
|
import { ERROR_CODE } from '@/constants/constants';
|
|
import { getBindImageList } from '@/services/terminal';
|
|
import { Button, Form, message, Modal } from 'antd';
|
|
import React, { useEffect } from 'react';
|
|
import SelectedTable from '../ImageSelectedTable/index';
|
|
import styles from './index.less';
|
|
|
|
interface UserEditModalProps {
|
|
onCancel: () => void;
|
|
onOk: (values: any) => void;
|
|
confirmLoading?: boolean;
|
|
dataDetial?: Termial.ModalBaseNode;
|
|
selectedOrg?: number;
|
|
}
|
|
|
|
const BindUserModal: React.FC<UserEditModalProps> = ({
|
|
onCancel,
|
|
onOk,
|
|
confirmLoading = false,
|
|
dataDetial,
|
|
}) => {
|
|
const { recordData, visible, selectedOrg } = dataDetial || {};
|
|
const { id: device_id } = recordData || {};
|
|
const [form] = Form.useForm();
|
|
|
|
useEffect(() => {
|
|
const params = { device_id: device_id };
|
|
getBindImageList(params).then((res: any) => {
|
|
const { code, data = [] } = res || {};
|
|
if (code === ERROR_CODE) {
|
|
if (data && data.length) {
|
|
const initialValues = { image_list: data };
|
|
form.setFieldsValue(initialValues);
|
|
}
|
|
}
|
|
});
|
|
}, [visible, form, recordData, selectedOrg]);
|
|
|
|
const handleOk = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
console.log('values=====', values);
|
|
onOk(values);
|
|
} catch (error) {
|
|
message.error('请检查表单字段');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={'绑定镜像'}
|
|
open={visible}
|
|
onCancel={onCancel}
|
|
onOk={handleOk}
|
|
confirmLoading={confirmLoading}
|
|
width={1200}
|
|
maskClosable={false}
|
|
centered={true}
|
|
destroyOnHidden={true}
|
|
cancelText="取消"
|
|
okText="确定"
|
|
footer={
|
|
<div style={{ display: 'flex', justifyContent: 'right' }}>
|
|
<Button
|
|
type="primary"
|
|
onClick={handleOk}
|
|
style={{ marginRight: '20px' }}
|
|
>
|
|
确定
|
|
</Button>
|
|
<Button onClick={onCancel} style={{ marginRight: '20px' }}>
|
|
取消
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<div className={styles.model_content}>
|
|
<Form
|
|
form={form}
|
|
labelCol={{ span: 4 }}
|
|
wrapperCol={{ span: 19 }}
|
|
layout="horizontal"
|
|
style={{ paddingTop: '20px', paddingBottom: '20px' }}
|
|
>
|
|
<Form.Item
|
|
name="image_list"
|
|
label="选择镜像"
|
|
rules={[{ required: true, message: '请输入终端型号' }]}
|
|
>
|
|
<SelectedTable />
|
|
</Form.Item>
|
|
{/* <Form.Item
|
|
name="description"
|
|
label="描述内容"
|
|
rules={[{ required: false, message: '请输入描述内容' }]}
|
|
>
|
|
<Input.TextArea rows={4} />
|
|
</Form.Item> */}
|
|
</Form>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default BindUserModal;
|