feat: project setting layout

client/containers/Group/ProjectList/ProjectList.js

@@ -26,52 +26,6 @@ import './ProjectList.scss'
 //   return handle;
 // };
 
-// const getColumns = (data, props) => {
-//   const { changeUpdateModal, userInfo } = props;
-//   return [{
-//     title: '项目名称',
-//     dataIndex: 'name',
-//     key: 'name',
-//     render: (text, record) => {
-//       return <Link to={`/project/${record._id}`}>{text}</Link>
-//     }
-//   },{
-//     title: 'Mock基本URL',
-//     key: 'domain',
-//     render: (item) => {
-//       return 'http://'+ item.prd_host + item.basepath;
-//     }
-//
-//   }, {
-//     title: '创建人',
-//     dataIndex: 'owner',
-//     key: 'owner',
-//     render: (text, record, index) => {
-//       // data是projectList的列表值
-//       // 根据序号找到对应项的uid，根据uid获取对应项目的创建人
-//       return <span>{userInfo[data[index].uid] ? userInfo[data[index].uid].username : ''}</span>;
-//     }
-//   }, {
-//     title: '创建时间',
-//     dataIndex: 'add_time',
-//     key: 'add_time',
-//     render: time => <span>{common.formatTime(time)}</span>
-//   }, {
-//     title: '操作',
-//     key: 'action',
-//     render: (text, record, index) => {
-//       const id = record._id;
-//       return (
-//         <span>
-//           <a onClick={() => changeUpdateModal(true, index)}>修改</a>
-//           <span className="ant-divider" />
-//           <Popconfirm title="你确定要删除项目吗?" onConfirm={deleteConfirm(id, props)} okText="确定" cancelText="取消">
-//             <a href="#">删除</a>
-//           </Popconfirm>
-//         </span>
-//       )}
-//   }];
-// }
 
 @connect(
   state => {
@@ -187,7 +141,7 @@ class ProjectList extends Component {
               </Col>);
           }) : (<div className="empty-tip">
             <p><Icon type="frown-o" /> 该分组还没有项目呢</p>
-            <p>请点击右上角 “<Icon type="plus-circle" />” 按钮添加项目</p>
+            <p>请点击右上角 “<Icon type="plus-circle" />” 按钮新建项目</p>
           </div>)}
         </Row>
       </div>

client/containers/Group/ProjectList/ProjectList.scss

@@ -35,4 +35,5 @@
 .empty-tip {
   text-align: center;
   font-size: .14rem;
+  color: #999;
 }

client/containers/Project/Setting/Setting.js

@@ -1,17 +1,355 @@
 import React, { Component } from 'react'
+import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message } from 'antd';
+import PropTypes from 'prop-types';
+import { updateProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../reducer/modules/project';
+import { connect } from 'react-redux';
+const { TextArea } = Input;
+const FormItem = Form.Item;
+const Option = Select.Option;
 
+// layout
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 14 }
+  }
+};
+const formItemLayoutWithOutLabel = {
+  wrapperCol: {
+    xs: { span: 24, offset: 0 },
+    sm: { span: 20, offset: 6 }
+  }
+};
+let uuid = 0;
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      handleUpdateIndex: state.project.handleUpdateIndex,
+      tableLoading: state.project.tableLoading,
+      currGroup: state.group.currGroup
+    }
+  },
+  {
+    fetchProjectList,
+    updateProject,
+    delProject,
+    changeUpdateModal,
+    changeTableLoading
+  }
+)
 class Setting extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      protocol: 'http:\/\/',
+      envProtocolChange: 'http:\/\/'
+    }
+  }
+  static propTypes = {
+    form: PropTypes.object,
+    fetchProjectList: PropTypes.func,
+    updateProject: PropTypes.func,
+    delProject: PropTypes.func,
+    changeUpdateModal: PropTypes.func,
+    changeTableLoading: PropTypes.func,
+    projectList: PropTypes.array,
+    currGroup: PropTypes.object,
+    handleUpdateIndex: PropTypes.number
+  }
+
+  // 修改线上域名的协议类型 (http/https)
+  protocolChange = (value) => {
+    this.setState({
+      protocol: value
+    })
+  }
+
+  handleCancel = () => {
+    this.props.form.resetFields();
+    this.props.changeUpdateModal(false, -1);
+  }
+
+  // 确认修改
+  handleOk = (e) => {
+    e.preventDefault();
+    const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList, changeTableLoading } = this.props;
+    form.validateFields((err, values) => {
+      if (!err) {
+        // console.log(projectList[handleUpdateIndex]);
+        let assignValue = Object.assign(projectList[handleUpdateIndex], values);
+        values.protocol = this.state.protocol.split(':')[0];
+        assignValue.env = assignValue.envs.map((item, index) => {
+          return {
+            name: values['envs-name-' + index],
+            domain: values['envs-protocol-' + index] + values['envs-domain-' + index]
+          }
+        });
+        // console.log(assignValue);
+
+        changeTableLoading(true);
+        updateProject(assignValue).then((res) => {
+          if (res.payload.data.errcode == 0) {
+            changeUpdateModal(false, -1);
+            message.success('修改成功! ');
+            fetchProjectList(currGroup._id).then(() => {
+              changeTableLoading(false);
+            });
+          } else {
+            changeTableLoading(false);
+            message.error(res.payload.data.errmsg);
+          }
+        }).catch(() => {
+          changeTableLoading(false);
+        });
+        form.resetFields();
+      }
+    });
+  }
+
+  // 项目的修改操作 - 删除一项环境配置
+  remove = (id) => {
+    const { form } = this.props;
+    // can use data-binding to get
+    const envs = form.getFieldValue('envs');
+    // We need at least one passenger
+    if (envs.length === 0) {
+      return;
+    }
+
+    // can use data-binding to set
+    form.setFieldsValue({
+      envs: envs.filter(key => {
+        const realKey = key._id ? key._id : key
+        return realKey !== id;
+      })
+    });
+  }
+
+  // 项目的修改操作 - 添加一项环境配置
+  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
+    });
+  }
+
   render () {
+    const { getFieldDecorator, getFieldValue } = this.props.form;
+    // const that = this;
+    const { projectList, handleUpdateIndex } = this.props;
+    let initFormValues = {};
+    let envMessage = [];
+    // 如果列表存在且用户点击修改按钮时，设置表单默认值
+    if (projectList.length !== 0 && handleUpdateIndex !== -1) {
+      // console.log(projectList[handleUpdateIndex]);
+      const { name, basepath, desc, env } = projectList[handleUpdateIndex];
+      initFormValues = { name, basepath, desc, env };
+      if (env.length !== 0) {
+        envMessage = env;
+      }
+      initFormValues.prd_host = projectList[handleUpdateIndex].prd_host;
+      initFormValues.prd_protocol = projectList[handleUpdateIndex].protocol + '\:\/\/';
+
+    }
+
+    getFieldDecorator('envs', { initialValue: envMessage });
+    const envs = getFieldValue('envs');
+    const formItems = envs.map((k, index) => {
+      const secondIndex = 'next' + index; // 为保证key的唯一性
+      return (
+        <Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
+          <Col span={10} offset={2}>
+            <FormItem
+              label={index === 0 ? (
+                <span>环境名称</span>) : ''}
+              required={false}
+              key={index}
+            >
+              {getFieldDecorator(`envs-name-${index}`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: envMessage.length !== 0 ? k.name : '',
+                rules: [{
+                  required: false,
+                  whitespace: true,
+                  validator(rule, value, callback) {
+                    if (value) {
+                      if (value.length === 0) {
+                        callback('请输入环境域名');
+                      } else if (!/\S/.test(value)) {
+                        callback('请输入环境域名');
+                      } else if (/prd/.test(value)) {
+                        callback('环境域名不能是"prd"');
+                      } else {
+                        return callback();
+                      }
+                    } else {
+                      callback('请输入环境域名');
+                    }
+                  }
+                }]
+              })(
+                <Input placeholder="请输入环境名称" style={{ width: '90%', marginRight: 8 }} />
+                )}
+            </FormItem>
+          </Col>
+          <Col span={10}>
+            <FormItem
+              label={index === 0 ? (
+                <span>环境域名</span>) : ''}
+              required={false}
+              key={secondIndex}
+            >
+              {getFieldDecorator(`envs-domain-${index}`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[1] : '',
+                rules: [{
+                  required: false,
+                  whitespace: true,
+                  message: "请输入环境域名",
+                  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(`envs-protocol-${index}`, {
+                    initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[0] + '\/\/' : 'http\:\/\/',
+                    rules: [{
+                      required: true
+                    }]
+                  })(
+                    <Select>
+                      <Option value="http://">{'http:\/\/'}</Option>
+                      <Option value="https://">{'https:\/\/'}</Option>
+                    </Select>
+                    )} />
+                )}
+            </FormItem>
+          </Col>
+          <Col span={2}>
+            {/* 新增的项中，只有最后一项有删除按钮 */}
+            {(envs.length > 0 && k._id) || (envs.length == index + 1) ? (
+              <Icon
+                className="dynamic-delete-button"
+                type="minus-circle-o"
+                onClick={() => {
+                  return this.remove(k._id ? k._id : k);
+                }}
+              />
+            ) : null}
+          </Col>
+        </Row>
+      );
+    });
     return (
-      <div>
-        <div className="g-row">
-          <section className="news-box">
-            t额st
-          </section>
-        </div>
+      <div className="g-row m-container">
+        <Form>
+          <FormItem
+            {...formItemLayout}
+            label="项目名称"
+          >
+            {getFieldDecorator('name', {
+              initialValue: initFormValues.name,
+              rules: [{
+                required: true, message: '请输入项目名称!'
+              }]
+            })(
+              <Input />
+              )}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label={(
+              <span>
+                线上域名&nbsp;
+                <Tooltip title="将根据配置的线上域名访问mock数据">
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              </span>
+            )}
+          >
+            {getFieldDecorator('prd_host', {
+              initialValue: initFormValues.prd_host,
+              rules: [{
+                required: true, message: '请输入项目线上域名!'
+              }]
+            })(
+              <Input addonBefore={(
+                <Select defaultValue={initFormValues.prd_protocol} onChange={this.protocolChange}>
+                  <Option value="http://">{'http:\/\/'}</Option>
+                  <Option value="https://">{'https:\/\/'}</Option>
+                </Select>)} />
+              )}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label={(
+              <span>
+                基本路径&nbsp;
+                <Tooltip title="基本路径为空表示根路径">
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              </span>
+            )}
+          >
+            {getFieldDecorator('basepath', {
+              initialValue: initFormValues.basepath,
+              rules: [{
+                required: false, message: '请输入项目基本路径! '
+              }]
+            })(
+              <Input />
+              )}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label="描述"
+          >
+            {getFieldDecorator('desc', {
+              initialValue: initFormValues.desc,
+              rules: [{
+                required: false, message: '请输入描述!'
+              }]
+            })(
+              <TextArea rows={4} />
+              )}
+          </FormItem>
+
+          {formItems}
+          <FormItem {...formItemLayoutWithOutLabel}>
+            <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
+              <Icon type="plus" /> 添加环境配置
+            </Button>
+          </FormItem>
+        </Form>
       </div>
     )
   }
 }
 
-export default Setting
+export default Form.create()(Setting);