From 5892ecea7eae942f9ad722143be6c72aeb07d228 Mon Sep 17 00:00:00 2001
From: "wenbo.dong" <wenbo.dong@qunar.com>
Date: Fri, 11 Aug 2017 19:30:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/ProjectCard/ProjectCard.js  |  25 ++-
 .../components/ProjectCard/ProjectCard.scss   |  37 ++---
 .../Group/ProjectList/ProjectList.js          | 151 +++++++++---------
 3 files changed, 109 insertions(+), 104 deletions(-)

diff --git a/client/components/ProjectCard/ProjectCard.js b/client/components/ProjectCard/ProjectCard.js
index 210a9586..1c16ca55 100644
--- a/client/components/ProjectCard/ProjectCard.js
+++ b/client/components/ProjectCard/ProjectCard.js
@@ -1,6 +1,8 @@
-import './ProjectCard.scss'
-import React, { Component } from 'react'
-// import PropTypes from 'prop-types'
+import './ProjectCard.scss';
+import React, { Component } from 'react';
+import { Card, Icon } from 'antd';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 class ProjectCard extends Component {
   constructor(props) {
@@ -11,15 +13,22 @@ class ProjectCard extends Component {
   }
 
   static propTypes = {
-
+    projectData: PropTypes.object
   }
 
   render() {
-
+    const { projectData } = this.props;
+    console.log(projectData);
     return (
-      <div className="p-box">
-        <div className="p-container"></div>
-      </div>
+      <Link to={`/project/${projectData._id}`}>
+        <Card bordered={false} bodyStyle={{padding: 16}} className="m-card">
+          <div className="m-card-logo">
+            <Icon type="area-chart" className="icon" />
+            <p className="name">{projectData.name}</p>
+          </div>
+          <div className="m-card-btns" style={{display: 'none'}}>btns</div>
+        </Card>
+      </Link>
     )
   }
 
diff --git a/client/components/ProjectCard/ProjectCard.scss b/client/components/ProjectCard/ProjectCard.scss
index a0831688..98c81b72 100644
--- a/client/components/ProjectCard/ProjectCard.scss
+++ b/client/components/ProjectCard/ProjectCard.scss
@@ -1,21 +1,22 @@
 @import '../../styles/mixin.scss';
-.p-box{
-    min-width: 150px;
-    min-height: 200px;
-    // background-color: #dbd;
 
-    .p-container{
-        width: 100%;
-        height: 100%;
-        background: #fff;
-        border-radius: 2px;
-        font-size: 12px;
-        position: relative;
-        -webkit-transition: all .3s;
-        transition: all .3s;
-        &:hover{
-            box-shadow: 0 1px 6px rgba(0,0,0,.2);
-            border-color: transparent;
-        }
+.m-card {
+  cursor: pointer;
+  text-align: center;
+  margin-bottom: .16rem;
+  background-color: #fff;
+  transition: all .4s;
+  color: rgba(0, 0, 0, 0.65);
+  &:hover {
+    background-color: #efefef;
+  }
+  .m-card-logo {
+    .icon {
+      font-size: .8rem;
     }
-}
\ No newline at end of file
+    .name {
+      font-size: .18rem;
+      margin-top: .16rem;
+    }
+  }
+}
diff --git a/client/containers/Group/ProjectList/ProjectList.js b/client/containers/Group/ProjectList/ProjectList.js
index acbbf6da..04be893e 100644
--- a/client/containers/Group/ProjectList/ProjectList.js
+++ b/client/containers/Group/ProjectList/ProjectList.js
@@ -1,78 +1,77 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Table, Popconfirm, message } from 'antd';
+import { message, Row, Col } 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 ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
+// import variable from '../../../constants/variable';
 import { autobind } from 'core-decorators';
 
 import './ProjectList.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 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 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>
-      )}
-  }];
-}
+// 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 => {
@@ -177,21 +176,17 @@ class ProjectList extends Component {
   }
 
   render() {
+    const projectData = this.state.projectData;
     return (
       <div className="m-panel">
-        <Table
-          className="m-table"
-          bordered={true}
-          loading={this.props.tableLoading}
-          columns={getColumns(this.state.projectData, this.props)}
-          dataSource={this.state.projectData}
-          pagination={{
-            total: this.props.total * variable.PAGE_LIMIT,
-            defaultPageSize: variable.PAGE_LIMIT,
-            onChange: this.paginationChange
-          }}
-        />
-
+        <Row gutter={16}>
+          {projectData.map((item, index) => {
+            return (
+              <Col span={8} key={index}>
+                <ProjectCard projectData={item} />
+              </Col>);
+          })}
+        </Row>
       </div>
     );
   }