productForm.jsx 3.93 KB
Newer Older
1 2 3 4 5
import React, { useState, useEffect } from 'react';
import { Form, Select, Input, Button, notification, Spin } from 'antd';
import { modifyProduct } from '@/services/webConfig/api';
const { Item } = Form;
const { Option } = Select;
Maofei94's avatar
Maofei94 committed
6
const { TextArea } = Input;
7 8 9 10 11 12 13 14 15 16 17 18 19
const AddForm = props => {
  const { addCallback } = props;
  const [config, setConfig] = useState(''); // 网站配置信息
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 5 },
    wrapperCol: { span: 16 },
  };
  const environmentList = [
    {
      value: 'production',
Maofei94's avatar
Maofei94 committed
20
      label: '生产环境',
21 22
      key: 'production',
    },
Maofei94's avatar
Maofei94 committed
23 24 25 26 27
    {
      value: 'development',
      label: '开发环境',
      key: 'development',
    },
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 56 57 58 59 60 61 62
  ];
  // 提交选择
  const submit = value => {};
  // 提交
  const finished = value => {
    setLoading(true);
    modifyProduct({ ...value, Id: 0 })
      .then(res => {
        if (res.code === 0) {
          notification.success({
            message: '提示',
            duration: 3,
            description: '新增成功',
          });
          addCallback();
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg || '新增成功',
          });
        }
      })
      .catch(err => {
        console.error(err);
      })
      .finally(item => {
        setLoading(false);
      });
  };
  return (
    <Spin spinning={loading} tip="loading...">
      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '20px' }}>
        <Form form={form} name="formAdd" {...layout} onFinish={finished}>
          <Item
Maofei94's avatar
Maofei94 committed
63 64
            label="产品名称:"
            name="ProductName"
65 66 67
            rules={[
              {
                required: true,
68 69
                pattern: new RegExp(/^[a-z0-9A-Z]+$/),
                message: '产品名称必须是英文或者数字',
70 71 72
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
73
            <Input placeholder="请输入产品名称" allowClear />
74
          </Item>
75 76 77 78 79 80 81 82 83 84 85 86
          <Item
            label="产品别名:"
            name="ProductAlias"
            // rules={[
            //   {
            //     required: true,
            //     message: '请输入产品别名',
            //   },
            // ]}
          >
            <Input placeholder="请输入产品别名" allowClear />
          </Item>
87
          <Item
Maofei94's avatar
Maofei94 committed
88 89
            label="产品环境:"
            name="Environment"
90 91 92
            rules={[
              {
                required: true,
Maofei94's avatar
Maofei94 committed
93
                message: '请选择产品环境',
94 95 96
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
97 98 99 100 101 102 103 104
            <Select placeholder="请选择产品环境">
              {environmentList &&
                environmentList.map(item => (
                  <Option value={item.value} key={item.key}>
                    {item.label}
                  </Option>
                ))}
            </Select>
105 106 107 108 109 110 111 112 113 114 115
          </Item>
          <Item
            label="入口url"
            name="StartUrl"
            rules={[
              {
                required: true,
                message: '请输入入口url',
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
116
            <Input addonBefore="//" placeholder="请输入入口url" allowClear />
117 118 119 120 121 122 123 124 125 126 127
          </Item>
          <Item
            label="默认配置"
            name="DefaultSetting"
            rules={[
              {
                required: false,
                message: '请输入默认配置',
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
128 129 130 131 132
            <TextArea
              placeholder="请输入默认配置"
              allowClear
              autoSize={{ minRows: 3, maxRows: 5 }}
            />
133 134 135 136 137 138 139 140 141 142 143 144
          </Item>
          <Item wrapperCol={{ span: 7, offset: 7 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Item>
        </Form>
      </div>
    </Spin>
  );
};
export default AddForm;