AddModal.jsx 6.02 KB
Newer Older
1 2
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
3
import { AddConnString, EditConnString } from '@/services/database/api';
4 5 6 7 8 9

const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => {}, type, formObj, visible } = props;
  const [loading, setLoading] = useState(false);
10
  const [showReplicaSet, setShowReplicaSet] = useState(false);
11 12 13 14 15 16 17 18
  const [form] = Form.useForm();
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
皮倩雯's avatar
皮倩雯 committed
19
          AddConnString({
20
            Type: 'mongodb',
21 22 23 24
            ...obj,
          })
            .then(res => {
              setLoading(false);
皮倩雯's avatar
皮倩雯 committed
25
              if (res.code == 0) {
26 27 28 29 30
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
31
                  description: '新增成功',
32 33 34 35 36
                });
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
37
                  description: res.msg,
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
                });
              }
            })
            .catch(err => {
              setLoading(false);
              console.error(err);
            });
        } else if (type === 'edit') {
          handleEdit();
        }
      }
    });
  };
  const handleEdit = () => {
    let obj = form.getFieldsValue();
皮倩雯's avatar
皮倩雯 committed
53
    EditConnString({
54 55
      Type: 'mongodb',
      MongoDbType: 'mongodb',
56 57 58 59 60
      ...obj,
      oldName: formObj.name,
    })
      .then(res => {
        setLoading(false);
皮倩雯's avatar
皮倩雯 committed
61
        if (res.code == 0) {
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
          form.resetFields();
          callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '编辑成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.message || '编辑失败',
          });
        }
      })
      .catch(err => setLoading(false));
  };
79 80
  const onFinish = value => {};
  const handleSelect = e => {
81 82 83
    console.log(e);
    if (e == '单实例') {
      form.setFieldsValue({ port: 27017 });
84
    }
85 86
    if (e == '分片群') {
      form.setFieldsValue({ port: 30000 });
87
    }
88
    e === '复制集' ? setShowReplicaSet(true) : setShowReplicaSet(false);
89 90 91 92
  };
  useEffect(() => {
    switch (type) {
      case 'add':
93
        form.resetFields();
94 95
        break;
      case 'edit':
96 97
        console.log(formObj.type);
        formObj.type === '复制集' ? setShowReplicaSet(true) : setShowReplicaSet(false);
98
        form.setFieldsValue({ ...formObj });
99
        form.setFieldsValue({ MongoDbType: formObj.type });
100 101 102 103
        break;
      default:
        break;
    }
104
    return () => {
105
      form.getFieldsValue().type === '复制集' ? setShowReplicaSet(true) : setShowReplicaSet(false);
106
    };
107
  }, [visible]);
Maofei94's avatar
Maofei94 committed
108
  useEffect(() => {}, [type === 'edit']);
109 110 111 112 113 114
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
115
      span: 19,
116 117
    },
  };
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
  const selectArr = [
    {
      key: '0',
      title: '单实例',
      value: '单实例',
    },
    {
      key: '1',
      title: '复制集',
      value: '复制集',
    },
    {
      key: '2',
      title: '分片群',
      value: '分片群',
    },
  ];
135 136
  return (
    <Modal
137
      title={`${type === 'add' ? '添加' : '编辑'}MongDB数据库配置连接`}
138 139 140 141 142 143 144 145 146 147 148 149 150
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
    >
      {visible && (
        <Form form={form} {...layout} onFinish={onFinish}>
151 152
          <Item
            label="实例类型"
153
            name="MongoDbType"
154 155 156 157 158 159 160 161 162 163 164
            rules={[{ required: true, message: '请选择实例类型' }]}
          >
            <Select onChange={e => handleSelect(e)}>
              {selectArr &&
                selectArr.map(item => (
                  <Option key={item.key} value={item.value}>
                    {item.title}
                  </Option>
                ))}
            </Select>
          </Item>
165
          <Item label="标签" name="name" rules={[{ required: true, message: '请输入标签' }]}>
166 167
            <Input placeholder="请输入标签" allowClear />
          </Item>
168
          <Item label="IP" name="ip" rules={[{ required: true, message: '请输入IP' }]}>
169 170
            <Input placeholder="请输入IP" allowClear />
          </Item>
171
          <Item label="端口" name="port" rules={[{ required: true, message: '请输入端口号' }]}>
172 173
            <Input placeholder="请输入端口号" allowClear />
          </Item>
174 175 176 177 178 179 180
          <Item
            label="数据库名"
            name="dbName"
            rules={[{ required: true, message: '请输入数据库名' }]}
          >
            <Input placeholder="请输入数据库名" allowClear />
          </Item>
181 182 183 184 185 186 187 188 189 190
          {showReplicaSet && (
            <Item
              label="复制集名称"
              name="replicaSet"
              rules={[{ required: true, message: '请输入复制集名称' }]}
            >
              <Input placeholder="请输入数据库名" allowClear />
            </Item>
          )}
          {/* <Item
191 192 193 194 195 196 197 198 199 200 201 202
            label="用户名"
            name="userName"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" allowClear />
          </Item>
          <Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input placeholder="请输入密码" allowClear />
203
          </Item> */}
204 205 206 207 208 209
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;