feat: add logout

client/actions/project.js

@@ -1,15 +1,16 @@
 import {
   FETCH_PROJECT_LIST,
-  PROJECT_ADD
+  PROJECT_ADD,
+  PROJECT_DEL
 } from '../constants/action-types.js';
 import axios from 'axios';
 
-const fetchProjectList = (data) => {
+const fetchProjectList = (id) => {
   return {
     type: FETCH_PROJECT_LIST,
-    payload: axios.get('/project/list', {params: data})
-  }
-}
+    payload: axios.get('/project/list', {params: { group_id: id }})
+  };
+};
 
 const addProject = (data) => {
   const { name, prd_host, basepath, desc, group_id } = data;
@@ -19,15 +20,25 @@ const addProject = (data) => {
     basepath,
     desc,
     group_id
-  }
+  };
   return {
     type: PROJECT_ADD,
     // payload 可以返回 Promise，异步请求使用 axios 即可
     payload: axios.post('/project/add', param)
-  }
-}
+  };
+};
+
+const delProject = (id) => {
+  const param = { id };
+  return {
+    type: PROJECT_DEL,
+    // payload 可以返回 Promise，异步请求使用 axios 即可
+    payload: axios.post('/project/del', param)
+  };
+};
 
 export default {
   fetchProjectList,
-  addProject
-}
+  addProject,
+  delProject
+};

client/constants/action-types.js

@@ -10,6 +10,7 @@ export const SET_CURR_GROUP = 'SET_CURR_GROUP'
 // project
 export const FETCH_PROJECT_LIST = 'FETCH_PROJECT_LIST'
 export const PROJECT_ADD = 'PROJECT_ADD'
+export const PROJECT_DEL = 'PROJECT_DEL'
 
 // login
 export const LOGIN = 'LOGIN';

client/containers/ProjectGroups/ProjectList/index.js

@@ -1,38 +1,57 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Table, Button, Modal, Form, Input, Icon, Tooltip, Select } from 'antd';
-import { addProject, fetchProjectList } from  '../../../actions/project';
+import { Table, Button, Modal, Form, Input, Icon, Tooltip, Select, Popconfirm, message } from 'antd';
+import { addProject, fetchProjectList, delProject } from  '../../../actions/project';
 const { TextArea } = Input;
 const FormItem = Form.Item;
 const Option = Select.Option;
 
 import './ProjectList.scss'
 
-const columns = [{
-  title: '项目名称',
-  dataIndex: 'name',
-  key: 'name',
-  render: text => <a href="#">{text}</a>
-}, {
-  title: '创建人',
-  dataIndex: 'owner',
-  key: 'owner'
-}, {
-  title: '创建时间',
-  dataIndex: 'add_time',
-  key: 'add_time'
-}, {
-  title: '操作',
-  key: 'action',
-  render: () => (
-    <span>
-      <a href="#">修改</a>
-      <span className="ant-divider" />
-      <a href="#">删除</a>
-    </span>
-  )
-}];
+const confirm = (id, handleDelete, currGroupId, handleFetchList) => {
+  const test = () => {
+    handleDelete(id).then((res) => {
+      console.log(res);
+      console.log(handleFetchList, currGroupId);
+      handleFetchList(currGroupId).then((res) => {
+        console.log(res);
+      });
+    });
+  }
+  return test;
+};
+
+const getColumns = (data, handleDelete, currGroupId, handleFetchList) => {
+  return [{
+    title: '项目名称',
+    dataIndex: 'name',
+    key: 'name',
+    render: text => <a href="#">{text}</a>
+  }, {
+    title: '创建人',
+    dataIndex: 'owner',
+    key: 'owner'
+  }, {
+    title: '创建时间',
+    dataIndex: 'add_time',
+    key: 'add_time'
+  }, {
+    title: '操作',
+    key: 'action',
+    render: (text, record) => {
+      const id = record._id;
+      return (
+        <span>
+          <a href="#">修改</a>
+          <span className="ant-divider" />
+          <Popconfirm title="你确定要删除项目吗?" onConfirm={confirm(id, handleDelete, currGroupId, handleFetchList)} okText="删除" cancelText="取消">
+            <a href="#">删除</a>
+          </Popconfirm>
+        </span>
+      )}
+  }];
+}
 
 const formItemLayout = {
   labelCol: {
@@ -54,7 +73,8 @@ const formItemLayout = {
   },
   {
     fetchProjectList,
-    addProject
+    addProject,
+    delProject
   }
 )
 class ProjectList extends Component {
@@ -71,10 +91,11 @@ class ProjectList extends Component {
     form: PropTypes.object,
     fetchProjectList: PropTypes.func,
     addProject: PropTypes.func,
+    delProject: PropTypes.func,
     projectList: PropTypes.array,
     currGroup: PropTypes.object
   }
-  addProject = () => {
+  showAddProjectModal = () => {
     this.setState({
       visible: true
     });
@@ -96,9 +117,7 @@ class ProjectList extends Component {
         this.props.addProject(values).then((res) => {
           console.log(res);
           // 添加项目成功后再次请求列表
-          this.props.fetchProjectList({
-            group_id: this.props.currGroup._id
-          }).then((res) => {
+          this.props.fetchProjectList(this.props.currGroup._id).then((res) => {
             this.setState({
               tabelLoading: false
             });
@@ -133,14 +152,17 @@ class ProjectList extends Component {
   componentWillReceiveProps(nextProps){
     // 切换分组
     if (this.props.currGroup !== nextProps.currGroup) {
-      const param = {
-        group_id: nextProps.currGroup._id
-      };
-      this.props.fetchProjectList(param).then((res) => {
-        this.setState({
-          tabelLoading: false
-        });
-        console.log(res);
+      // const param = {
+      //   group_id: nextProps.currGroup._id
+      // };
+      this.props.fetchProjectList(nextProps.currGroup._id).then((res) => {
+        if (res.payload.data.errcode) {
+          message.error(res.payload.data.errmsg);
+        } else {
+          this.setState({
+            tabelLoading: false
+          });
+        }
       });
     }
 
@@ -236,9 +258,9 @@ class ProjectList extends Component {
 
         <Table
           loading={this.state.tabelLoading}
-          columns={columns}
+          columns={getColumns(this.state.projectData, this.props.delProject, this.props.currGroup._id, this.props.fetchProjectList)}
           dataSource={this.state.projectData}
-          title={() => <Button type="primary" onClick={this.addProject}>创建项目</Button>}
+          title={() => <Button type="primary" onClick={this.showAddProjectModal}>创建项目</Button>}
         />
 
       </div>

client/reducer/group/project.js

@@ -1,10 +1,12 @@
 import {
   FETCH_PROJECT_LIST,
-  PROJECT_ADD
+  PROJECT_ADD,
+  PROJECT_DEL
 } from '../../constants/action-types';
 
 const initialState = {
-  projectList: []
+  projectList: [],
+  total: null
 };
 
 export default (state = initialState, action) => {
@@ -12,12 +14,16 @@ export default (state = initialState, action) => {
     case FETCH_PROJECT_LIST: {
       return {
         ...state,
-        projectList: action.payload.data.data
+        projectList: action.payload.data.data.list,
+        total: action.payload.data.data.total
       };
     }
     case PROJECT_ADD: {
       return state;
     }
+    case PROJECT_DEL: {
+      return state;
+    }
     default:
       return state;
   }