feat: 新建项目页面初始化

client/Application.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Route, HashRouter, Redirect, Switch } from 'react-router-dom';
-import { Home, Group, Project, News, AddInterface, Follows } from './containers/index';
+import { Home, Group, Project, News, AddInterface, Follows, AddProject } from './containers/index';
 import User from './containers/User/User.js';
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
@@ -59,6 +59,7 @@ export default class App extends Component {
               <Route path="/news" component={requireAuthentication(News)} />
               <Route path="/add-interface" component={requireAuthentication(AddInterface)} />
               <Route path="/follow" component={requireAuthentication(Follows)} />
+              <Route path="/add-project" component={requireAuthentication(AddProject)} />
             </div>
             <Footer />
           </div>

client/components/Header/Header.js

@@ -44,7 +44,7 @@ const ToolUser = (props)=> (
     <li className="toolbar-li item-search">
       <Srch groupList={props.groupList}/>
     </li>
-    <Link to="/">
+    <Link to="/add-project">
       <Tooltip placement="bottom" title={'新建项目'}>
         <li className="toolbar-li">
           <Icon className="dropdown-link" style={{ fontSize: 16 }} type="plus-circle" />

client/containers/Project/AddProject/AddProject.js

@@ -0,0 +1,274 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Button, Form, Input, Icon, Tooltip, Select, message } from 'antd';
+import { addProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from  '../../../reducer/modules/project';
+// import { Link } from 'react-router-dom'
+// import variable from '../../../constants/variable';
+// import common from '../../../common';
+import { autobind } from 'core-decorators';
+const { TextArea } = Input;
+const FormItem = Form.Item;
+const Option = Select.Option;
+import './Addproject.scss'
+
+// 确认删除项目 handleDelete, currGroup._id, fetchProjectList
+// const deleteConfirm = (id, props) => {
+//   const { delProject, currGroup, fetchProjectList } = props;
+//   const handle = () => {
+//     delProject(id).then((res) => {
+//       if (res.payload.data.errcode == 0) {
+//         message.success('删除成功!')
+//         fetchProjectList(currGroup._id).then(() => {
+//         });
+//       } else {
+//         message.error(res.payload.data.errmsg);
+//       }
+//     });
+//   }
+//   return handle;
+// };
+
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 14 }
+  }
+};
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      userInfo: state.project.userInfo,
+      tableLoading: state.project.tableLoading,
+      currGroup: state.group.currGroup,
+      total: state.project.total,
+      currPage: state.project.currPage
+    }
+  },
+  {
+    fetchProjectList,
+    addProject,
+    delProject,
+    changeUpdateModal,
+    changeTableLoading
+  }
+)
+class ProjectList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      protocol: 'http:\/\/',
+      projectData: []
+    }
+  }
+  static propTypes = {
+    form: PropTypes.object,
+    fetchProjectList: PropTypes.func,
+    addProject: PropTypes.func,
+    delProject: PropTypes.func,
+    changeUpdateModal: PropTypes.func,
+    changeTableLoading: PropTypes.func,
+    projectList: PropTypes.array,
+    userInfo: PropTypes.object,
+    tableLoading: PropTypes.bool,
+    currGroup: PropTypes.object,
+    total: PropTypes.number,
+    currPage: PropTypes.number
+  }
+
+  // 显示模态框 - 创建项目
+  @autobind
+  showAddProjectModal() {
+    this.setState({
+      visible: true
+    });
+  }
+
+  // 确认添加项目
+  @autobind
+  handleOk(e) {
+    const { form, currGroup, changeTableLoading, addProject, fetchProjectList } = this.props;
+    const that = this;
+    e.preventDefault();
+    form.validateFields((err, values) => {
+      if (!err) {
+        values.protocol = this.state.protocol.split(':')[0];
+        // 获取当前分组id传入values
+        values.group_id = currGroup._id;
+
+        changeTableLoading(true);
+        addProject(values).then((res) => {
+          // 添加项目成功后再次请求列表
+          if (res.payload.data.errcode == 0) {
+            that.setState({
+              visible: false
+            });
+            form.resetFields();
+            message.success('创建成功! ');
+            fetchProjectList(currGroup._id, this.props.currPage).then(() => {
+              changeTableLoading(false);
+            });
+          } else {
+            changeTableLoading(false);
+            message.error(res.payload.data.errmsg);
+          }
+        }).catch(() => {
+          changeTableLoading(false);
+        });
+      }
+    });
+  }
+
+  // 取消修改
+  @autobind
+  handleCancel() {
+    this.props.form.resetFields();
+    this.setState({
+      visible: false
+    });
+  }
+
+  // 修改线上域名的协议类型 (http/https)
+  @autobind
+  protocolChange(value) {
+    this.setState({
+      protocol: value
+    })
+  }
+
+  // 分页逻辑
+  @autobind
+  paginationChange(pageNum) {
+    this.props.fetchProjectList(this.props.currGroup._id, pageNum).then((res) => {
+      if (res.payload.data.errcode) {
+        message.error(res.payload.data.errmsg);
+      } else {
+        this.props.changeTableLoading(false);
+      }
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // 切换分组
+    if (this.props.currGroup !== nextProps.currGroup) {
+      if (nextProps.currGroup._id) {
+        this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage).then((res) => {
+          if (res.payload.data.errcode) {
+            message.error(res.payload.data.errmsg);
+          } else {
+            this.props.changeTableLoading(false);
+          }
+        });
+      } else {
+        // 无分组的时候停止loading状态
+        this.props.changeTableLoading(false);
+      }
+    }
+
+    // 切换项目列表
+    if (this.props.projectList !== nextProps.projectList) {
+      // console.log(nextProps.projectList);
+      const data = nextProps.projectList.map((item, index) => {
+        item.key = index;
+        return item;
+      });
+      this.setState({
+        projectData: data
+      });
+    }
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div className="g-row m-container">
+        <Form>
+
+          <FormItem
+            {...formItemLayout}
+            label="项目名称"
+          >
+            {getFieldDecorator('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', {
+              rules: [{
+                required: true,
+                message: '请输入项目线上域名!'
+              }]
+            })(
+              <Input addonBefore={(
+                <Select defaultValue="http://" 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', {
+              rules: [{
+                required: false, message: '请输入项目基本路径'
+              }]
+            })(
+              <Input />
+            )}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label="描述"
+          >
+            {getFieldDecorator('desc', {
+              rules: [{
+                required: false, message: '请输入描述!'
+              }]
+            })(
+              <TextArea rows={4} />
+            )}
+          </FormItem>
+        </Form>
+        <Button className="m-btn" icon="plus" type="primary"
+          onClick={this.showAddProjectModal}
+          disabled={this.props.currGroup._id ? false : true}>创建项目</Button>
+      </div>
+    );
+  }
+}
+
+export default Form.create()(ProjectList);

client/containers/Project/AddProject/Addproject.scss

@@ -0,0 +1,6 @@
+@import '../../../styles/common.scss';
+
+.m-container {
+  margin: .24rem auto !important;
+  padding: .24rem !important;
+}

client/containers/index.js

@@ -8,6 +8,7 @@ import News from './News/News.js'
 import AddInterface from './AddInterface/AddInterface.js'
 import DevTools from './DevTools/DevTools.js'
 import Follows from './Follows/Follows.js'
+import AddProject from './Project/AddProject/AddProject.js'
 
 export {
   Header,
@@ -19,5 +20,6 @@ export {
   AddInterface,
   News,
   DevTools,
-  Follows
+  Follows,
+  AddProject
 }

client/reducer/modules/project.js

@@ -94,7 +94,6 @@ export function addProject(data) {
   };
   return {
     type: PROJECT_ADD,
-    // payload 可以返回 Promise，异步请求使用 axios 即可
     payload: axios.post('/project/add', param)
   };
 }
@@ -112,7 +111,6 @@ export function updateProject(data) {
   };
   return {
     type: PROJECT_UPDATE,
-    // payload 可以返回 Promise，异步请求使用 axios 即可
     payload: axios.post('/project/up', param)
   };
 }
@@ -121,7 +119,6 @@ export function delProject(id) {
   const param = { id };
   return {
     type: PROJECT_DEL,
-    // payload 可以返回 Promise，异步请求使用 axios 即可
     payload: axios.post('/project/del', param)
   };
 }

client/styles/common.scss

@@ -61,6 +61,7 @@ em {
   padding: 0 .24rem;
 }
 
-.nav-tooltip {
-  color: red;
+.m-container {
+  margin: .24rem auto;
+  padding: .24rem;
 }