fix: 消息页修改为日志也

client/actions/news.js

@@ -3,57 +3,47 @@ import {
   FETCH_MORE_NEWS
 } from '../constants/action-types.js';
 
-export function fetchNewsData () {
-  const data = [
-    { key: 1, type: 'John Brown', news: '您好！亲爱的用户：您已成功申请接口：实时空气质量数据查询，请于两个月内进行应用验证，逾期接口将不能正常使用。如果您在使用的过程中遇到任何问题，欢迎前往交流社区反馈意见，谢谢！',time: '2014-12-01' },
-    { key: 2, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
-    { key: 3, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
-  ];
-
+export function fetchNewsData (logId) {
+  const data = {
+    newsList:[
+      { key: 1,title: '日志标题', username: 'John Brown', content: '您好！亲爱的用户：您已成功申请接口：实时空气质量数据查询，请于两个月内进行应用验证，逾期接口将不能正常使用。如果您在使用的过程中遇到任何问题，欢迎前往交流社区反馈意见，谢谢！',time: '2014-12-01' },
+      { key: 2,title: '日志标题', username: 'John Brown', content: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
+      { key: 3,title: '日志标题', username: 'John Brown', content: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
+    ],
+    totalPage: 34
+  };
+  console.log(logId);
   return {
     type: FETCH_NEWS_DATA,
-    payload: data
+    payload: new Promise(function(reslove,reject){
+      if(data){
+        reslove(data);
+      }else{
+        reject("chucuole");
+      }
+    })
   };
 }
 
-export function fetchViewedNews () {
-  const data = [
-    { key: 1, type: 'John Brown1', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
-    { key: 2, type: 'John Brown2', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
-    { key: 3, type: 'John Brown3å', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
-  ];
-
-  return {
-    type: FETCH_NEWS_DATA,
-    payload: data
-  }
-}
-
-export function fetchNotVieweNews () {
-  const data = [
-    { key: 1, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2015-11-11 13:00:15' },
-    { key: 2, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2015-11-11 13:00:15' },
-    { key: 3, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2015-11-11 13:00:15' }
-  ];
-
-  return {
-    type: FETCH_NEWS_DATA,
-    payload: data
-  }
-}
-
-export function fetchMoreNews () {
-  return (dispatch)=>{
-    const data = [
-      { key: 1, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
-      { key: 2, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
-      { key: 3, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
-    ];
-
-    dispatch({
-      type: FETCH_MORE_NEWS,
-      payload: data
+export function fetchMoreNews (current,pageSize) {
+  // id,type,news,time,totalPage
+  const newsList = [
+    { key: 1,title: '日志标题1', username: 'John Brown', content: '您好！亲爱的用户：您已成功申请接口：实时空气质量数据查询，请于两个月内进行应用验证，逾期接口将不能正常使用。如果您在使用的过程中遇到任何问题，欢迎前往交流社区反馈意见，谢谢！',time: '2014-12-01' },
+    { key: 2,title: '日志标题', username: 'John Brown', content: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
+    { key: 3,title: '日志标题', username: 'John Brown', content: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
+  ]
+  console.log(current,pageSize);
+  return ({
+    type: FETCH_MORE_NEWS,
+    payload: new Promise(function(resolve,reject){
+      if(newsList){
+        resolve(newsList);
+      }else{
+        reject("出现了错误");
+      }
     })
-  }
+  })
+    
+    
   
 }

client/containers/News/News.js

@@ -4,7 +4,7 @@ import NewsTimeline from './NewsTimeline/NewsTimeline'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import NewsList from './NewsList/NewsList.js'
-import { fetchNotVieweNews } from '../../actions/news.js'
+import { fetchNewsData } from '../../actions/news.js'
 
 
 @connect(
@@ -14,27 +14,35 @@ import { fetchNotVieweNews } from '../../actions/news.js'
     }
   },
   {
-    fetchNotVieweNews: fetchNotVieweNews
+    fetchNewsData: fetchNewsData
   }
 )
 
 class News extends Component {
   constructor(props) {
     super(props)
+    this.state = {
+      loading: false
+    }
   }
   static propTypes = {
-    newsData: PropTypes.array,
-    fetchNotVieweNews: PropTypes.func
+    newsData: PropTypes.object,
+    fetchNewsData: PropTypes.func
+  }
+  setLoading(bool){
+    this.setState({
+      loading: bool
+    })
   }
   componentWillMount(){
-    this.props.fetchNotVieweNews()
+    this.props.fetchNewsData()
   }
   render () {
     const data = this.props.newsData
     return (
       <section className="news-box">
-        <NewsList />
-        <NewsTimeline newsData = {data} />
+        <NewsList loading={this.state.loading} setLoading={this.setLoading.bind(this)} />
+        <NewsTimeline loading={this.state.loading} setLoading={this.setLoading.bind(this)} newsData = {data} />
       </section>
     )
   }

client/containers/News/News.scss

@@ -7,20 +7,12 @@
   font-size: 0.14rem;
   background: #FFF;
 
-  .news-list {
+  .logList {
     width: 216px;
     line-height: 45px;
     background: #f9fafe;
-    
-    li {
-      padding: 0 0 0 30px;
-      color: #344562;
-      cursor: pointer;
-      
-      &:hover, &.active {
-        background: #657289;
-        color: #FFF;
-      }
+    h3{
+      text-indent: 1em;
     }
   }
 

client/containers/News/NewsList/NewsList.js

@@ -1,12 +1,21 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
+import { Menu } from 'antd'
 import { 
-  fetchNewsData, 
-  fetchViewedNews, 
-  fetchNotVieweNews } from '../../../actions/news.js'
+  fetchNewsData
+  } from '../../../actions/news.js'
 
 
+const logList = [{
+  name: '用户'
+},{
+  name: '分组'
+},{
+  name: '接口'
+},{
+  name: '项目'
+}];
 @connect(
   state => {
     return {
@@ -14,9 +23,7 @@ import {
     }
   },
   {
-    fetchNewsData,
-    fetchViewedNews,
-    fetchNotVieweNews
+    fetchNewsData
   }
 )
 
@@ -24,52 +31,46 @@ class NewsList extends Component {
 
   static propTypes = {
     fetchNewsData: PropTypes.func,
-    fetchViewedNews: PropTypes.func,
-    fetchNotVieweNews: PropTypes.func
+    setLoading: PropTypes.func
   }
 
   constructor(props) {
     super(props)
-  }
-
-  
-
-  fetchData(e){
-    const mark = e.target.className;
-    if(mark.indexOf('allnews')>-1){
-      this.props.fetchNewsData()
-      this.switchColor(mark.indexOf('allnews'),e.target)
-    }else if(mark.indexOf('viewednews')>-1){
-      this.props.fetchViewedNews();
-      this.switchColor(mark.indexOf('viewednews'),e.target)
-    }else if(mark.indexOf('notview')>-1){
-      this.props.fetchNotVieweNews();
-      this.switchColor(mark.indexOf('notview'),e.target)
+    this.state = {
+      selectedKeys: 0
     }
-
   }
-  switchColor(index,e){
-    let childNodes = e.parentNode.childNodes;
-    if(e.className.indexOf('active')> -1) return;
-    for(let j = 0;j<childNodes.length;j++){
-      const i = childNodes[j].className.indexOf('active');
-      if(i> -1){
-        // console.log( childNodes[i].className.splice);
-        let className = childNodes[j].className;
-        className = className.split('');
-        className.splice(i,6);
-        childNodes[j].className = className.join('');
-      }
-    }
-    e.className = e.className + ' active';
+  getLogData(e){
+    // page,size,logId
+    // console.log(e.key);
+    this.setState({
+      selectedKeys: +e.key
+    })
+    const that = this;
+    this.props.setLoading(true);
+    this.props.fetchNewsData(+e.key).then(function(){
+      that.props.setLoading(false);
+    })
   }
   render () {
     return (
-      <ul onClick = {this.fetchData.bind(this)} className="news-list">
-        {/*<li className="allnews">全部消息</li>*/}
-        <li className='active notview'>未读消息</li>
-        <li className='viewednews'>已读消息</li>
-      </ul>
+      <div className='logList'>
+        <h3>日志类型</h3>
+        <Menu
+          mode='inline'
+          selectedKeys = {[`${this.state.selectedKeys}`]}
+          onClick = {this.getLogData.bind(this)}
+        >
+          {logList.map((item,i)=>{
+            return (
+              <Menu.Item key={i} className="log-item">
+                {item.name}
+              </Menu.Item>
+            )
+          })}
+          
+        </Menu>
+      </div>
     )
   }
 }

client/containers/News/NewsTimeline/NewsTimeline.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Table, Icon, Popconfirm } from 'antd'
+import { Table, Popconfirm } from 'antd'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { fetchMoreNews } from '../../../actions/news.js'
@@ -20,25 +20,39 @@ const removeConfirm = function(e){
 
 class NewsTimeline extends Component {
   static propTypes = {
-    newsData: PropTypes.array,
-    fetchMoreNews: PropTypes.func
+    newsData: PropTypes.object,
+    fetchMoreNews: PropTypes.func,
+    setLoading: PropTypes.func,
+    loading: PropTypes.bool
   }
   
   constructor(props) {
     super(props);
+    this.state = {
+      pagination: {
+        pageSize: 10,
+        total: 34
+      }
+    };
   }
-  removeOneNews(id){
-    return ()=>{
-      console.log(id);
-    }
+
+  handleChange(pagination){
+    const pager = { ...this.state.pagination };
+    pager.current = pagination.current;
+    this.props.setLoading(true); 
+    const that = this;
+    this.props.fetchMoreNews(pagination.current,pagination.pageSize).then(function(){
+      that.props.setLoading(false); 
+    })
   }
   render () {
     const columns = [
-      { title: '类型',width:100, dataIndex: 'type', key: 'type' },
-      { title: '消息', dataIndex: 'news', key: 'news' },
-      { title: '发布时间',width:150, dataIndex: 'time', key: 'time' }
+      { title: '操作用户',width:100, dataIndex: 'username', key: 'username' },
+      { title: '日志标题',width: 200,  dataIndex: 'title', key: 'title' },
+      { title: '具体改动描述', dataIndex: 'content', key: 'content' },
+      { title: '时间',width: 150, dataIndex: 'time', key: 'time' }
     ];
-    const data = this.props.newsData;
+    const data = this.props.newsData.newsList;
     return (
       <section className="news-timeline">
         <span className='removeAllNews'>
@@ -47,9 +61,12 @@ class NewsTimeline extends Component {
           </Popconfirm>
         </span>
         <Table
+          loading={this.props.loading}
           columns={columns}
-          expandedRowRender={record => <div className='newsDesc'><p>{record.news}</p><span onClick = {this.removeOneNews(record.key)} ><Icon type="delete" />删除</span></div>}
+          expandedRowRender={record => <div className='newsDesc'><p>{record.content}</p></div>}
           dataSource={data}
+          pagination={{...this.state.pagination,total:this.props.newsData.totalPage}}
+          onChange={this.handleChange.bind(this)}
         />
       </section>
     )

client/reducer/news/news.js

@@ -4,22 +4,24 @@ import {
 } from '../../constants/action-types.js'
 
 const initialState = {
-  newsData: []
+  newsData: {}
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case FETCH_NEWS_DATA: {
-
       return {
         ...state,
         newsData: action.payload
       };
     }
     case FETCH_MORE_NEWS: {
-      state.newsData.push(...action.payload);
+      // console.log(action.payload);
       return {
-        ...state
+        newsData: {
+          ...state.newsData,
+          newsList: action.payload
+        }
       }
     }
     default: