Merge branch 'dev-1.3.0' of gitlab.corp.qunar.com:mfe/yapi into dev-1.3.0

client/containers/Project/Setting/ProjectEnv/ProjectEnv.js

@@ -69,13 +69,11 @@ class PrpjectEnv extends Component {
   }
 
   delParams = (key, name) => {
-
     let curValue = this.props.form.getFieldValue(name);
     let newValue = {}
     newValue[name] = curValue.filter((val, index) => {
       return index !== key;
     })
-    
     this.props.form.setFieldsValue(newValue)
     this.setState(newValue)
   }

client/containers/Project/Setting/ProjectEnv/ProjectEnvContent.js

@@ -0,0 +1,216 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './index.scss'
+import { Icon, Row, Col, Form, Input, Select, AutoComplete, Button } from 'antd'
+const FormItem = Form.Item;
+const Option = Select.Option;
+import constants from 'client/constants/variable.js'
+
+
+const EmptyPrompt = () => {
+  return <div className="m-empty-prompt">
+    <span><Icon type="select"></Icon>请选择或创建新环境</span>
+  </div>
+}
+
+class ProjectEnvContent extends Component {
+  static propTypes = {
+    projectMsg: PropTypes.object,
+    form: PropTypes.object
+  }
+
+  initState(curdata) {
+
+    console.log('curdata', curdata);
+
+    let header = [{
+      type: "",
+      content: ""
+    }];
+    if (curdata) {
+      curdata.forEach(item => {
+        header.unshift(item);
+      })
+      return { header };
+    } else {
+      return { header };
+    }
+  }
+
+  constructor(props) {
+    super(props);
+    console.log(props)
+    this.state = {
+      header: [{
+        type: "",
+        content: ""
+      }]
+    }
+  }
+  addHeader = (value, name) => {
+    let newValue = {}
+    let data = { type: "", content: "" }
+    newValue[name] = [].concat(this.state[name], data)
+    this.setState(newValue)
+  }
+
+  delHeader = (key, name) => {
+    let curValue = this.props.form.getFieldValue(name);
+    let newValue = {}
+    newValue[name] = curValue.filter((val, index) => {
+      return index !== key;
+    })
+    this.props.form.setFieldsValue(newValue)
+    this.setState(newValue)
+  }
+
+  componentDidUpdate(prevProps) {
+    let oldName = prevProps.projectMsg.name;
+    let newName = this.props.projectMsg.name;
+    if (oldName !== newName) {
+      let newValue = this.initState(this.props.projectMsg.header)
+      this.setState({ ...newValue });
+    }
+  }
+
+
+
+  render() {
+    const { projectMsg } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    const headerTpl = (item, index) => {
+      const secondIndex = 'next' + index; // 为保证key的唯一性
+      return <Row gutter={2} key={index} type="flex" justify="start">
+        <Col span={8}>
+          <FormItem key={index}>
+            {getFieldDecorator('header[' + index + '].type', {
+              validateTrigger: ['onChange', 'onBlur'],
+              initialValue: item.type || ''
+            })(
+              <AutoComplete
+                style={{ width: '200px' }}
+                dataSource={constants.HTTP_REQUEST_HEADER}
+                placeholder="请输入header名称"
+                onChange={() => this.addHeader('header')}
+                filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+              />
+              )}
+          </FormItem>
+        </Col>
+        <Col span={12}>
+          <FormItem key={secondIndex}>
+            {getFieldDecorator('header[' + index + '].content', {
+              validateTrigger: ['onChange', 'onBlur'],
+              initialValue: item.content || ''
+            })(
+              <Input placeholder="请输入参数内容" style={{ width: '90%', marginRight: 8 }} />
+              )}
+          </FormItem>
+        </Col>
+        <Col span={2} className={index === this.state.header.length - 1 ? ' env-last-row' : null}>
+          {/* 新增的项中，只有最后一项没有有删除按钮 */}
+          <Icon
+            className="dynamic-delete-button"
+            type="minus-circle-o"
+            onClick={() => this.delHeader(index, 'header')}
+          />
+        </Col>
+      </Row>
+    }
+
+    const envTpl = (data) => {
+      return (
+        <div>
+          <h3 className="env-label">环境名称</h3>
+          <FormItem
+            required={false}
+          >
+            {getFieldDecorator('env.name', {
+              validateTrigger: ['onChange', 'onBlur'],
+              initialValue: data.name || '',
+              rules: [{
+                required: false,
+                whitespace: true,
+                validator(rule, value, callback) {
+                  if (value) {
+                    if (value.length === 0) {
+                      callback('请输入环境名称');
+                    } else if (!/\S/.test(value)) {
+                      callback('请输入环境名称');
+                    } else {
+                      return callback();
+                    }
+                  } else {
+                    callback('请输入环境名称');
+                  }
+                }
+              }]
+            })(
+              <Input placeholder="请输入环境名称" style={{ width: '90%', marginRight: 8 }} />
+              )}
+          </FormItem>
+          <h3 className="env-label">环境域名</h3>
+          <FormItem
+            required={false}
+          >
+            {getFieldDecorator('env.domain', {
+              validateTrigger: ['onChange', 'onBlur'],
+              initialValue: data.domain ? data.domain.split('\/\/')[1] : '',
+              rules: [{
+                required: false,
+                whitespace: true,
+                validator(rule, value, callback) {
+                  if (value) {
+                    if (value.length === 0) {
+                      callback('请输入环境域名!');
+                    } else if (/\s/.test(value)) {
+                      callback('环境域名不允许出现空格!');
+                    } else {
+                      return callback();
+                    }
+                  } else {
+                    callback('请输入环境域名!');
+                  }
+                }
+              }]
+            })(
+              <Input placeholder="请输入环境域名" style={{ width: '90%', marginRight: 8 }} addonBefore={
+                getFieldDecorator('env.protocol', {
+                  initialValue: data.domain ? data.domain.split('\/\/')[0] + '\/\/' : 'http\:\/\/',
+                  rules: [{
+                    required: true
+                  }]
+                })(
+                  <Select>
+                    <Option value="http://">{'http:\/\/'}</Option>
+                    <Option value="https://">{'https:\/\/'}</Option>
+                  </Select>
+                  )} />
+              )}
+          </FormItem>
+          <h3 className="env-label">请求Header头部</h3>
+          {this.state.header.map((item, index) => {
+            return headerTpl(item, index)
+          })}
+        </div>
+      );
+    }
+    const EnvSettingItems = () => {
+      return envTpl(projectMsg)
+    }
+    return (
+      <div>
+        {projectMsg.name ?
+          <div>
+            <EnvSettingItems />
+            <div className="btnwrap-changeproject">
+              <Button className="m-btn btn-save" icon="save" type="primary" size="large" onClick={this.handleOk} >保 存</Button>
+            </div>
+          </div>
+          : <EmptyPrompt />}
+      </div>
+    )
+  }
+
+}
+export default Form.create()(ProjectEnvContent);

client/containers/Project/Setting/ProjectEnv/index.js

@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+// import PropTypes from 'prop-types'
+import './index.scss'
+import { Icon, Layout, Menu, Tooltip } from 'antd'
+const { Content, Sider } = Layout;
+import ProjectEnvContent from './ProjectEnvContent.js'
+
+
+class ProjectEnv extends Component {
+
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      envMsg: [{
+        name: '12',
+        domain: 'http://12',
+        header: [{
+          type: "Accept",
+          content: "weeerrrff"
+        }]
+      }, {
+        name: '13',
+        domain: 'http://13'
+      }, {
+        name: '14',
+        domain: 'http://14'
+      }, {
+        name: '15',
+        domain: 'http://15'
+      }],
+      currentEnvMsg: {},
+      delIcon: -1
+    };
+  }
+
+  handleClick = (e) => {
+    let newValue = this.state.envMsg.filter((val, index) => {
+      return index == e.key - 1;
+    })
+    this.setState({
+      currentEnvMsg: newValue[0],
+      delIcon: e.key - 1
+    })
+  }
+
+  render() {
+    console.log('delIcon', this.state.delIcon);
+    return (
+      <div className="m-panel">
+        <Layout className="project-env">
+          <Sider width={200} style={{ background: '#fff' }}>
+            <Menu
+              mode="inline"
+              onClick={this.handleClick}
+              style={{ height: '100%', borderRight: 0 }}
+            >
+              <Menu.Item disabled key="0">
+                <div className="env-icon-style">
+                  <h3>环境变量</h3>
+                  <Tooltip title="添加环境变量">
+                    <Icon type="plus" />
+                  </Tooltip>
+                </div>
+              </Menu.Item>
+              {
+                this.state.envMsg.map((item, index) => {
+                  return (
+                    <Menu.Item key={index + 1}>
+                      <span className="env-icon-style">
+                        <span>{item.name}</span>
+                        <Tooltip title="删除环境变量">
+                          <Icon 
+                          type='delete' 
+                          className="interface-delete-icon" 
+                          style={{ display: this.state.delIcon == index ? 'block' : 'none' }} 
+                          />
+                        </Tooltip>
+                         
+                      </span>
+                    </Menu.Item>
+                  )
+                })
+              }
+            </Menu>
+          </Sider>
+          <Layout className="env-content">
+            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
+              <ProjectEnvContent projectMsg={this.state.currentEnvMsg} />
+            </Content>
+          </Layout>
+        </Layout>
+      </div>
+    )
+  }
+
+
+}
+
+export default ProjectEnv;
+

client/containers/Project/Setting/ProjectEnv/index.scss

@@ -0,0 +1,43 @@
+.project-env{
+  min-height: 4.68rem;
+
+  .env-icon-style{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .anticon{
+      font-size: 15px;
+    }
+  }
+
+  .env-content{
+    border-left: 1px solid #ccc;
+  }
+
+  .ant-menu-item-disabled{
+    cursor: pointer;
+  }
+
+  .m-empty-prompt{
+    display: flex;
+    height: 400px;
+    span{
+      margin: auto;
+      font-size: 16px;
+      .anticon {
+        padding-right: 16px;
+        font-size: 24px;
+      }
+    }
+  }
+
+  .env-label{
+    padding-bottom: 8px;
+  }
+
+  .env-last-row {
+    display: none;
+  }
+
+  
+}

client/containers/Project/Setting/Setting.js

@@ -2,7 +2,7 @@ import React, { PureComponent as Component } from 'react'
 import { Tabs } from 'antd';
 import PropTypes from 'prop-types';
 import ProjectMessage from './ProjectMessage/ProjectMessage.js';
-import ProjectEnv from './ProjectEnv/ProjectEnv.js';
+import ProjectEnv from './ProjectEnv/index.js';
 import ProjectRequest from './ProjectRequest/ProjectRequest';
 const TabPane = Tabs.TabPane;