列表页添加选择条件提示信息

public/react/src/modules/developer/DeveloperHome.js

@@ -8,8 +8,8 @@
 
 import './index.scss';
 
-import React, { Component } from 'react';
+import React from 'react';
-import { Table, Button, Dropdown, Icon, Menu, Card, Input, Select, Tag, Divider } from 'antd';
+import { Table, Button, Dropdown, Icon, Menu, Card, Input, Select, Tag } from 'antd';
 import { connect } from 'react-redux';
 import actions from '../../redux/actions';
 import MultipTags from './components/multiptags';
@@ -28,63 +28,63 @@ const maps = {
     { 
       'key': '0',
       'name': '全部',
-      'vlaue': '0'
+      'value': '0'
     },
     { 
       'key': '1',
       'name': '程序设计基础',
-      'vlaue': '1'
+      'value': '1'
     },
     { 
       'key': '2',
       'name': '数据结构与计算',
-      'vlaue': '2'
+      'value': '2'
     }
   ],
-  'hardMenu': [
+  'difficultMenu': [
     { 
       'key': '1',
       'name': '简单',
-      'vlaue': '1'
+      'value': '1'
     },
     { 
       'key': '2',
       'name': '中等',
-      'vlaue': '2'
+      'value': '2'
     },
     { 
       'key': '3',
       'name': '困难',
-      'vlaue': '3'
+      'value': '3'
     }
   ],
   'statusMenu': [
     { 
       'key': '-1',
       'name': '未做',
-      'vlaue': '-1'
+      'value': '-1'
     },
     { 
       'key': '0',
       'name': '未通过',
-      'vlaue': '0'
+      'value': '0'
     },
     { 
       'key': '1',
       'name': '已通过',
-      'vlaue': '1'
+      'value': '1'
     }
   ],
-  'originMenu': [
+  'come_fromMenu': [
     { 
       'key': 'all',
       'name': '全部',
-      'vlaue': 'all'
+      'value': 'all'
     },
     { 
       'key': 'mine',
       'name': '我创建的',
-      'vlaue': 'mine'
+      'value': 'mine'
     }
   ]
 };
@@ -151,19 +151,13 @@ const columns = [
     sorter: true,
     align:'right',
     width: '10%',
-  render: val => <span>{`${val}%`}</span>
+    render: val => <span>{`${val}%`}</span>
   },
 ];
 
-class DeveloperHome extends Component {
+class DeveloperHome extends React.PureComponent {
   state = {
     data: [],
-    pagination: {
-      total: 1, // 总条数
-      pageSize: 10, // 每页显示条数
-      current: 1, // 当前页数
-      showQuickJumper: true
-    },
     loading: false,
     searchParams: {
       search: '', // 查询关键字
@@ -172,15 +166,18 @@ class DeveloperHome extends Component {
       status: '', // 未做
       category: '', // 分类
       'sort_by': '', // 排序
-      'sort_direction': '' // 排序方向
+      'sort_direction': '', // 排序方向
+      page: 1, // 当前页数
+      limit: 10 // 每页显示条件
     },
-    columns: columns
+    columns: columns,
+    searchInfo: []
   };
 
   componentDidMount() {
+    // 是否是我的，如果是我的 显示编辑按钮
     const { isMySource } = this.props;
     if (isMySource) {
-      // this.handleFilterSearch()
       this.handleFilterSearch({come_from: 'mine'});
       let _columns = columns.concat([options]);
       this.setState({
@@ -199,9 +196,15 @@ class DeveloperHome extends Component {
   }
 
   handleTableChange = (pagination, filters, sorter) => {
-    // console.log(pagination, filters, sorter);
     const {field, order} = sorter;
-    this.handleFilterSearch({sort_by: field, sort_direction: order === 'descend' ? 'desc' : 'asc'});
+    const {current, pageSize} = pagination;
+    this.handleFilterSearch({
+      sort_by: field, 
+      sort_direction: order === 'descend' ? 'desc' : 'asc',
+      page: current,
+      limit: pageSize
+    });
+    this.props.changePaginationInfo(pagination);
   };
 
   fetchData = () => {
@@ -228,6 +231,7 @@ class DeveloperHome extends Component {
       </Menu>
     )
   };
+
   getOptionsItem = (type) => {
     return maps[type].map(item => {
       return <Option key={item.key} value={item.value}>{item.name}</Option>
@@ -242,6 +246,21 @@ class DeveloperHome extends Component {
       this.fetchData();
     });
   }
+
+  // 添加显示搜索条件
+  addShowFilterCtx = (obj) => {
+    const {searchInfo} = this.state
+    const index = searchInfo.findIndex(item => item.type === obj.type);
+    let tempArr = [...searchInfo];
+    if (index > -1) {
+      tempArr[index] = obj;
+    } else {
+      tempArr.push(obj);
+    }
+    this.setState({
+      searchInfo: tempArr
+    });
+  }
   /**
    * 搜索输入框
    * @param value 输入框值
@@ -257,18 +276,36 @@ class DeveloperHome extends Component {
   // }
   // 下拉类别菜单
   handleCategoryMenuClick = (item) => {
+    this.addShowFilterCtx({
+      type: 'category',
+      key: item.key
+    });
     this.handleFilterSearch({category: +item.key === 0 ? '' : +item.key});
   }
   // 难度下拉
   handleHardMenuClick = (item) => {
+    this.addShowFilterCtx({
+      type: 'difficult',
+      key: item.key
+    });
     this.handleFilterSearch({difficult: +item.key});
   }
   // 状态下拉
   handleSatusMenuClick = (item) => {
+    this.addShowFilterCtx({
+      type: 'status',
+      key: item.key
+    });
     this.handleFilterSearch({status: +item.key});
   }
   // 来源下拉
   handleOriginMenuClick = (item) => {
+    
+    this.addShowFilterCtx({
+      type: 'come_from',
+      key: item.key
+    });
+
     this.handleFilterSearch({come_from: item.key === 'all' ? '' : item.key});
     
     if (item.key !== 'all') {
@@ -283,11 +320,49 @@ class DeveloperHome extends Component {
     }
   }
 
+  handleTagClose = (info) => {
+    
+    this.handleFilterSearch({[info.type]: ''});
+    // 移除 searcInfo 中的数据
+    const { type } = info;
+    let tempArr = [...this.state.searchInfo];
+    const index = tempArr.findIndex(item => item.type === type);
+    if (index > -1) tempArr.splice(index, 1);
+    this.setState({
+      searchInfo: tempArr
+    });
+    if (info.type === 'come_from' && info.key === 'mine') {
+      this.setState({
+        columns: columns
+      });
+    }
+  }
   render () {
     // const { testReducer, handleClick } = this.props;
-    const { ojListReducer: {hacks_list, top_data, hacks_count} } = this.props;
+    const { 
+      ojListReducer: {hacks_list, top_data, hacks_count},
+      pagination
+    } = this.props;
     const {passed_count = 0, simple_count = 0, medium_count = 0, diff_count = 0} = top_data;
     const { columns } = this.state;
+
+    // 渲染条件内容
+    const renderSearch = () => {
+      return this.state.searchInfo.map(info => {
+        let ctx = '';
+        const arrs = maps[`${info.type}Menu`];
+        arrs.forEach(item => {
+          if (item.key === info.key) ctx = item.name;
+        });
+        return (
+          <Tag
+            closable
+            key={info.type}
+            onClose={() => this.handleTagClose(info)}
+          >{ctx}</Tag>
+      )});
+    };
+
     return (
       <div className="developer-list">
         <div className="ant-spin-container">
@@ -307,34 +382,39 @@ class DeveloperHome extends Component {
               </div>
             </div>
             <div className={'card-table'}>
-              <Card bordered={false}>
+              <div bordered={false} className={'filter_ctx_area'}>
-                <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('categoryMenu', this.handleCategoryMenuClick)}>
+                <div>
-                  <span className={'dropdown-span'}>分类 <Icon type="down"/></span>
+                  <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('categoryMenu', this.handleCategoryMenuClick)}>
-                </Dropdown>
+                    <span className={'dropdown-span'}>分类 <Icon type="down"/></span>
-                <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('hardMenu', this.handleHardMenuClick)}>
+                  </Dropdown>
-                  <span className={'dropdown-span'}>难度 <Icon type="down"/></span>
+                  <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('difficultMenu', this.handleHardMenuClick)}>
-                </Dropdown>
+                    <span className={'dropdown-span'}>难度 <Icon type="down"/></span>
-                <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('statusMenu', this.handleSatusMenuClick)}>
+                  </Dropdown>
-                  <span className={'dropdown-span'}>状态 <Icon type="down"/></span>
+                  <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('statusMenu', this.handleSatusMenuClick)}>
-                </Dropdown>
+                    <span className={'dropdown-span'}>状态 <Icon type="down"/></span>
-                <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('originMenu', this.handleOriginMenuClick)}>
+                  </Dropdown>
-                  <span className={'dropdown-span'}>来源 <Icon type="down"/></span>
+                  <Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('come_fromMenu', this.handleOriginMenuClick)}>
-                </Dropdown>
+                    <span className={'dropdown-span'}>来源 <Icon type="down"/></span>
+                  </Dropdown>
+                </div>
                 
+                <div className={'choice_ctx'}>
+                  {renderSearch()}
+                </div>
                 <Search
                   placeholder="输入标题进行搜索"
                   onChange={this.handleSearchChange}
                   onSearch={value => this.handleInputSearch(value)}
                   style={{ width: 320, float: 'right' }}
                 />
-              </Card>
+              </div>
               
               <Card bordered={false} style={{ marginTop: '2px'}}>
                 <Table
                   columns={columns}
                   rowKey={record => Math.random()}
                   dataSource={hacks_list}
-                  pagination={this.state.pagination}
+                  pagination={pagination}
                   onChange={this.handleTableChange}
                 />
               </Card>  
@@ -350,16 +430,28 @@ class DeveloperHome extends Component {
  * @param {*} state store
  * @param {*} ownProps  DeveloperHome 中的 props
  */
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = (state, ownProps) => {
-  testReducer: state.testReducer,
+  const {
-  ojListReducer: state.ojListReducer,
+    testReducer,
-  isMySource: state.commonReducer.isMySource
+    ojListReducer,
-});
+    commonReducer
+  } = state;
+
+  const { pagination } = ojListReducer;
+
+  return {
+    testReducer,
+    ojListReducer,
+    isMySource: commonReducer.isMySource,
+    pagination
+  }
+};
 
 
 const mapDispatchToProps = (dispatch) => ({
   handleClick: () => dispatch(actions.toggleTodo()),
   fetchOJList: (params) => dispatch(actions.getOJList(params)),
+  changePaginationInfo: (obj) => dispatch(actions.changePaginationInfo(obj)),
 });
 
 export default connect(

public/react/src/modules/developer/index.scss

@@ -38,12 +38,23 @@
 
   .card-table{
     margin-top: 10px;
+    .filter_ctx_area{
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 30px;
+      background: #fff;
+      align-items: center;
+    }
+    .choice_ctx{
+      flex: 1;
+    }
     .ant-card-body{
       padding: 10px 30px;
+      // width: 100%;
     }
     .dropdown-span{
       position: relative;
-      top: 5px;
+      top: 2px;
     }
     .dropdonw-style{
       margin-right: 50px;
@@ -53,4 +64,5 @@
       }
     }
   }
+
 }

public/react/src/modules/developer/newOrEditTask/rightpane/index.js

@@ -43,11 +43,9 @@ const RightPaneCode = (props) => {
   }, [props.language]);
 
   useEffect(() => {
-    console.log('测试用例更改');
   }, [props.testCases]);
 
   useEffect(() => {
-    console.log('编辑器内容变化时');
   }, [editCode]);
 
   // 监听store中编辑器内容变化

public/react/src/modules/developer/studentStudy/leftpane/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-23 11:33:41
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-11-28 16:12:58
+ * @LastEditTime: 2019-11-29 11:10:57
 //  */
 import './index.scss';
 import React, { useState, useEffect } from 'react';
@@ -30,7 +30,6 @@ const LeftPane = (props) => {
   ];
 
   useEffect(() => {
-    console.log('==========>>>>>', userCodeTab)
     setDefaultActiveKey(userCodeTab);
   }, [userCodeTab])
 

public/react/src/redux/actions/actionTypes.js

@@ -41,7 +41,8 @@ const types = {
   CHANGE_USER_CODE_TAB: 'CHANGE_USER_CODE_TAB', // 切换学员测评tab
   SUBMIT_LOADING_STATUS: 'SUBMIT_LOADING_STATUS', // 提交按钮状态值
   PUBLISH_LOADING_STATUS: 'PUBLISH_LOADING_STATUS', // 发布按钮
-  IS_MY_SOURCE: 'IS_MY_SOURCE'
+  IS_MY_SOURCE: 'IS_MY_SOURCE',
+  CHANGE_PAGINATION_INFO: 'CHANGE_PAGINATION_INFO', // 改变分页数据
 }
 
 export default types;

public/react/src/redux/actions/index.js

@@ -7,7 +7,7 @@
  */
 
 import toggleTodo from './testAction.js';
-import {getOJList} from './ojList';
+import {getOJList, changePaginationInfo} from './ojList';
 import {
   validateOjForm,
   saveOjFormCode,
@@ -50,6 +50,7 @@ import {
 export default {
   toggleTodo,
   getOJList,
+  changePaginationInfo,
   getOJFormById,
   saveOJFormId,
   clearOJFormStore,

public/react/src/redux/actions/ojForUser.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 13:42:11
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-11-28 17:32:52
+ * @LastEditTime: 2019-11-29 11:11:13
  */
 import types from "./actionTypes";
 import { Base64 } from 'js-base64';
@@ -22,7 +22,6 @@ import {
 export const startProgramQuestion = (id) => {
   return (dispatch) => {
     fetchStartProgram(id).then(res => {
-      console.log('调用编程题成功返回的数据: ', res);
       const { status, data } = res;
       if (status === 200) {
         const {identifier} = data;
@@ -32,7 +31,6 @@ export const startProgramQuestion = (id) => {
         });
         // 调用用户编程详情接口
         fetchUserProgramDetail(identifier).then(res => {
-          console.log('用户编程题详情: =====>>>>>', res);
           const { status, data = {} } = res;
           if (status === 200) {
             dispatch({

public/react/src/redux/actions/ojList.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-20 10:48:24
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-11-22 16:44:44
+ * @LastEditTime: 2019-11-29 11:09:54
  */
 import types from './actionTypes';
 import { fetchOJList } from '../../services/ojService';
@@ -12,12 +12,26 @@ import { fetchOJList } from '../../services/ojService';
 export const getOJList = (params) => {
   return (dispatch) => {
     fetchOJList(params).then((res) => {
-      console.log('获取列表信息成功: ', res);
       const { data } = res;
       dispatch({
         type: types.GET_OJ_LIST,
         payload: data
       });
+      // 改变总页娄
+      dispatch({
+        type: types.CHANGE_PAGINATION_INFO,
+        payload: {
+          total: data.hacks_count
+        }
+      });
     });
   }
 }
+
+// 改变分页数据
+export const changePaginationInfo = (obj) => {
+  return {
+    type: types.CHANGE_PAGINATION_INFO,
+    payload: obj
+  }
+}

public/react/src/redux/reducers/ojListReducer.js

@@ -4,14 +4,20 @@
  * @Github: 
  * @Date: 2019-11-21 22:17:03
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-11-22 09:17:59
+ * @LastEditTime: 2019-11-29 09:31:04
  */
 import types from '../actions/actionTypes';
 
 const initialState = {
   hacks_list: [],
   top_data: {},
-  hacks_count: 0 // 总条数
+  hacks_count: 0, // 总条数
+  pagination: {
+    current: 1, // 当前页
+    pageSize: 10, // 每页条数
+    total: 1, // 总数
+    showQuickJumper: true // 快速跳转
+  }
 };
 
 const ojListReducer = (state = initialState, action) => {
@@ -21,6 +27,11 @@ const ojListReducer = (state = initialState, action) => {
         ...state,
         ...action.payload
       }
+    case types.CHANGE_PAGINATION_INFO:
+      return { 
+        ...state,
+        pagination: Object.assign({}, state.pagination, action.payload)
+      }
     default: 
       return state;
   }