fork from bc4552c5a8

2024-03-01 20:28:14 +08:00
commit 076c21dc36
491 changed files with 84482 additions and 0 deletions
--- a/client/containers/Project/Interface/InterfaceList/AddInterfaceForm.js
+++ b/client/containers/Project/Interface/InterfaceList/AddInterfaceForm.js
@@ -0,0 +1,129 @@
+import React, { PureComponent as Component } from 'react'
+import PropTypes from 'prop-types'
+import { Form, Input, Select, Button } from 'antd';
+
+import constants from '../../../../constants/variable.js'
+import { handleApiPath, nameLengthLimit } from '../../../../common.js'
+const HTTP_METHOD = constants.HTTP_METHOD;
+const HTTP_METHOD_KEYS = Object.keys(HTTP_METHOD);
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+function hasErrors(fieldsError) {
+  return Object.keys(fieldsError).some(field => fieldsError[field]);
+}
+
+
+class AddInterfaceForm extends Component {
+  static propTypes = {
+    form: PropTypes.object,
+    onSubmit: PropTypes.func,
+    onCancel: PropTypes.func,
+    catid: PropTypes.number,
+    catdata: PropTypes.array
+  }
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        this.props.onSubmit(values, () => {
+          this.props.form.resetFields();
+        });
+
+      }
+    });
+  }
+
+  handlePath = (e) => {
+    let val = e.target.value
+    this.props.form.setFieldsValue({
+      path: handleApiPath(val)
+    })
+  }
+  render() {
+    const { getFieldDecorator, getFieldsError } = this.props.form;
+    const prefixSelector = getFieldDecorator('method', {
+      initialValue: 'GET'
+    })(
+      <Select style={{ width: 75 }}>
+        {HTTP_METHOD_KEYS.map(item => {
+          return <Option key={item} value={item}>{item}</Option>
+        })}
+      </Select>
+      );
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 }
+      }
+    };
+
+
+    return (
+
+      <Form onSubmit={this.handleSubmit}>
+        <FormItem
+          {...formItemLayout}
+          label="接口分类"
+        >
+          {getFieldDecorator('catid', {
+            initialValue: this.props.catid ? this.props.catid + '' : this.props.catdata[0]._id + ''
+          })(
+            <Select>
+              {this.props.catdata.map(item => {
+                return <Option key={item._id} value={item._id + ""}>{item.name}</Option>
+              })}
+            </Select>
+            )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="接口名称"
+        >
+          {getFieldDecorator('title', {
+            rules: nameLengthLimit('接口')
+          })(
+            <Input placeholder="接口名称" />
+            )}
+        </FormItem>
+
+        <FormItem
+          {...formItemLayout}
+          label="接口路径"
+        >
+          {getFieldDecorator('path', {
+            rules: [{
+              required: true, message: '请输入接口路径!'
+            }]
+          })(
+            <Input onBlur={this.handlePath} addonBefore={prefixSelector} placeholder="/path" />
+            )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="注"
+        >
+          <span style={{ color: "#929292" }}>详细的接口数据可以在编辑页面中添加</span>
+        </FormItem>
+        <FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }} >
+          <Button onClick={this.props.onCancel} style={{ marginRight: "10px" }}  >取消</Button>
+          <Button
+            type="primary"
+            htmlType="submit"
+            disabled={hasErrors(getFieldsError())}
+          >
+            提交
+          </Button>
+        </FormItem>
+
+      </Form>
+
+    );
+  }
+}
+
+export default Form.create()(AddInterfaceForm);