vdi/web-fe/src/pages/terminal/mod/bindImage/index.tsx

// index.tsx
import { ERROR_CODE } from '@/constants/constants';
import { getBindImageAdd, getBindImageList } from '@/services/terminal';
import { Button, Form, message, Modal } from 'antd';
import React, { useEffect, useState } 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;
}

const BindUserModal: React.FC<UserEditModalProps> = ({
  onCancel,
  onOk,
  confirmLoading = false,
  dataDetial,
}) => {
  const { recordData, visible } = dataDetial || {};
  const { device_id } = recordData || {};
  const [form] = Form.useForm();
  const [dataSource, setDataSource] = useState<any[]>([]);

  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 imageList: any[] = [];
          data.forEach((item: any) => {
            imageList.push({
              id: item.image_id,
              image_name: item.image_name,
              // current_id: item.id,
            });
          });
          setDataSource(data);
          const initialValues = { image_list: imageList };
          form.setFieldsValue(initialValues);
        }
      }
    });
  }, [visible, form, recordData]);

  const onBind = (payload: any) => {
    getBindImageAdd(payload).then((res: any) => {
      const { code } = res || {};
      if (code === ERROR_CODE) {
        message.success('绑定成功');
        if (onOk) onOk();
      } else {
        message.error('绑定失败');
      }
    });
  };

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      const { image_list } = values || {};
      console.log('image_list=====', image_list);
      if (image_list && image_list.length > 0) {
        const list: any[] = [];
        image_list.forEach((item: any) => {
          const obj: any = {
            device_id: device_id,
            image_id: item.id,
          };
          const newData = dataSource.filter(
            (record) => record.image_id === item.id,
          );
          if (newData && newData.length === 1) {
            obj.id = newData[0].id;
          }
          list.push({ ...obj });
        });
        const payload: any = {
          data: list,
        };
        onBind(payload);
      } else {
        message.info('请先选择绑定的镜像');
      }
    } 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={null}
      // 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}
          onFinish={handleOk}
          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.Item label={null}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginRight: '20px' }}
            >
              确定
            </Button>
            <Button onClick={onCancel}>取消</Button>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default BindUserModal;