feat: 修改项目信息可配置环境信息

client/containers/ProjectGroups/ProjectList/ProjectList.js

@@ -116,6 +116,7 @@ class ProjectList extends Component {
     });
   }
 
+  // 确认修改
   @autobind
   handleOk(e) {
     const { form, currGroup, changeTableLoading, addProject, fetchProjectList } = this.props;

client/containers/ProjectGroups/ProjectList/ProjectList.scss

@@ -8,3 +8,19 @@
 .ant-input-group-wrapper {
   width: 100%;
 }
+
+.dynamic-delete-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 24px;
+  color: #999;
+  transition: all .3s;
+}
+.dynamic-delete-button:hover {
+  color: #777;
+}
+.dynamic-delete-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

client/containers/ProjectGroups/ProjectList/UpDateModal.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Modal, Form, Input, Icon, Tooltip, Select, message } from 'antd';
+import { Modal, Form, Input, Icon, Tooltip, Select, message, Button } from 'antd';
 import { updateProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from  '../../../actions/project';
 const { TextArea } = Input;
 const FormItem = Form.Item;
@@ -9,6 +9,7 @@ const Option = Select.Option;
 
 import './ProjectList.scss'
 
+// layout
 const formItemLayout = {
   labelCol: {
     xs: { span: 24 },
@@ -19,6 +20,13 @@ const formItemLayout = {
     sm: { span: 14 }
   }
 };
+const formItemLayoutWithOutLabel = {
+  wrapperCol: {
+    xs: { span: 24, offset: 0 },
+    sm: { span: 20, offset: 4 }
+  }
+};
+let uuid = 0;
 
 @connect(
   state => {
@@ -75,8 +83,20 @@ class UpDateModal extends Component {
     const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList, changeTableLoading } = this.props;
     form.validateFields((err, values) => {
       if (!err) {
+        console.log(values);
         let assignValue = Object.assign(projectList[handleUpdateIndex], values);
         assignValue.prd_host = this.state.protocol + assignValue.prd_host;
+        assignValue.env = assignValue.envs.map((item) => {
+          console.log(assignValue);
+          const arr = assignValue['envs-'+item].split(',');
+          if (arr.length === 2) {
+            return {
+              host: arr[0],
+              name: arr[1]
+            }
+          }
+        });
+        console.log(assignValue);
 
         changeTableLoading(true);
         updateProject(assignValue).then((res) => {
@@ -100,19 +120,100 @@ class UpDateModal extends Component {
     });
   }
 
+  remove = (k) => {
+    const { form } = this.props;
+    // can use data-binding to get
+    const envs = form.getFieldValue('envs');
+    // We need at least one passenger
+    if (envs.length === 1) {
+      return;
+    }
+
+    // can use data-binding to set
+    form.setFieldsValue({
+      envs: envs.filter(key => key !== k)
+    });
+  }
+
+  add = () => {
+    uuid++;
+    const { form } = this.props;
+    // can use data-binding to get
+    const envs = form.getFieldValue('envs');
+    const nextKeys = envs.concat(uuid);
+    // can use data-binding to set
+    // important! notify form to detect changes
+    form.setFieldsValue({
+      envs: nextKeys
+    });
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
+  }
+
   render() {
-    const { getFieldDecorator } = this.props.form;
+    const { getFieldDecorator, getFieldValue } = this.props.form;
     // const that = this;
     const { isUpdateModalShow, projectList, handleUpdateIndex } = this.props;
     let initFormValues = {};
+    let envMessage = [];
     // 如果列表存在且用户点击修改按钮时，设置表单默认值
     if (projectList.length !== 0 && handleUpdateIndex !== -1 ) {
-      console.log(projectList[handleUpdateIndex]);
-      const { name, basepath, desc } = projectList[handleUpdateIndex];
-      initFormValues = { name, basepath, desc };
+      // console.log(projectList[handleUpdateIndex]);
+      const { name, basepath, desc, env } = projectList[handleUpdateIndex];
+      initFormValues = { name, basepath, desc, env };
+      if (env) {
+        envMessage = env.map((item) => {
+          return item.host + ',' + item.name;
+        })
+      }
       initFormValues.prd_host = projectList[handleUpdateIndex].prd_host.split('\/\/')[1];
       initFormValues.prd_protocol = projectList[handleUpdateIndex].prd_host.split('\/\/')[0] + '\/\/';
     }
+
+    getFieldDecorator('envs', { initialValue: envMessage });
+    const envs = getFieldValue('envs');
+    const formItems = envs.map((k, index) => {
+      return (
+        <FormItem
+          {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
+          label={index === 0 ? (
+            <span>环境配置&nbsp;
+              <Tooltip title="依次输入环境域名(host)与环境名称，以英文逗号分隔">
+                <Icon type="question-circle-o" />
+              </Tooltip>
+            </span>) : ''}
+          required={false}
+          key={k}
+        >
+          {getFieldDecorator(`envs-${k}`, {
+            validateTrigger: ['onChange', 'onBlur'],
+            initialValue: envMessage.length !== 0 ? k : '',
+            rules: [{
+              required: false,
+              whitespace: true,
+              message: "请输入环境配置，放弃配置请清空输入框"
+            }]
+          })(
+            <Input placeholder="请输入环境配置" style={{ width: '60%', marginRight: 8 }} />
+          )}
+          {envs.length > 1 ? (
+            <Icon
+              className="dynamic-delete-button"
+              type="minus-circle-o"
+              disabled={envs.length === 1}
+              onClick={() => this.remove(k)}
+            />
+          ) : null}
+        </FormItem>
+      );
+    });
     return (
       <Modal
         title="修改项目"
@@ -188,6 +289,13 @@ class UpDateModal extends Component {
               <TextArea rows={4} />
             )}
           </FormItem>
+
+          {formItems}
+          <FormItem {...formItemLayoutWithOutLabel}>
+            <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
+              <Icon type="plus" /> 添加环境配置
+            </Button>
+          </FormItem>
         </Form>
       </Modal>
     );