AddModal.jsx 4.24 KB
Newer Older
1 2 3
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
4 5
  addOracleConnString,
  editOracleConnString,
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
} from '@/services/database/api';

const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => {}, type, formObj, visible } = props;
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
21
          addOracleConnString({
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
            _version: 9999,
            _dc: Date.now(),
            ...obj,
          })
            .then(res => {
              setLoading(false);
              if (res.success) {
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
                  description: res.message || '新增成功',
                });
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.message || '新增失败',
                });
              }
            })
            .catch(err => {
              setLoading(false);
              console.error(err);
            });
        } else if (type === 'edit') {
          handleEdit();
        }
      }
    });
  };
  const handleEdit = () => {
    let obj = form.getFieldsValue();
56
    editOracleConnString({
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
      _version: 9999,
      _dc: Date.now(),
      ...obj,
      oldName: formObj.name,
    })
      .then(res => {
        setLoading(false);
        if (res.success) {
          form.resetFields();
          callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '编辑成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.message || '编辑失败',
          });
        }
      })
      .catch(err => setLoading(false));
  };
  const onFinish = value => {
    console.log(value, 'value');
  };
  useEffect(() => {
    console.log(type);
    switch (type) {
      case 'add':
89
        form.resetFields();
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
        break;
      case 'edit':
        form.setFieldsValue({ ...formObj });
        break;
      default:
        break;
    }
  }, [visible]);
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 16,
    },
  };
  return (
    <Modal
109
      title={`${type === 'add' ? '添加' : '编辑'}Oracle数据库配置连接`}
110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
      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}>
          <Item
            label="标签"
            name="name"
            rules={[{ required: true, message: '请输入标签' }]}
          >
            {/* <Select>
            <Option value={item.value}>{item.title}</Option>
          </Select> */}
            <Input placeholder="请输入标签" allowClear />
          </Item>
          <Item
134
            label="网络服务名"
135
            name="dbName"
136
            rules={[{ required: true, message: '请输入网络服务名' }]}
137
          >
138
            <Input placeholder="请输入网络服务名" allowClear />
139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
          </Item>
          <Item
            label="用户名"
            name="userName"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" allowClear />
          </Item>
          <Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input placeholder="请输入密码" allowClear />
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;