From c875bb9bd16c400b7a616ff64d75bd1ebda469d5 Mon Sep 17 00:00:00 2001 From: tangjiang <465264938@qq.com> Date: Fri, 29 Nov 2019 11:11:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=9D=A1=E4=BB=B6=E6=8F=90=E7=A4=BA=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/modules/developer/DeveloperHome.js | 190 +++++++++++++----- public/react/src/modules/developer/index.scss | 14 +- .../newOrEditTask/rightpane/index.js | 2 - .../developer/studentStudy/leftpane/index.js | 3 +- public/react/src/redux/actions/actionTypes.js | 3 +- public/react/src/redux/actions/index.js | 3 +- public/react/src/redux/actions/ojForUser.js | 4 +- public/react/src/redux/actions/ojList.js | 18 +- .../react/src/redux/reducers/ojListReducer.js | 15 +- 9 files changed, 189 insertions(+), 63 deletions(-) diff --git a/public/react/src/modules/developer/DeveloperHome.js b/public/react/src/modules/developer/DeveloperHome.js index 469f1f91c..a5d279950 100644 --- a/public/react/src/modules/developer/DeveloperHome.js +++ b/public/react/src/modules/developer/DeveloperHome.js @@ -8,8 +8,8 @@ import './index.scss'; -import React, { Component } from 'react'; -import { Table, Button, Dropdown, Icon, Menu, Card, Input, Select, Tag, Divider } from 'antd'; +import React from 'react'; +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 => {`${val}%`} + render: val => {`${val}%`} }, ]; -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 { ) }; + getOptionsItem = (type) => { return maps[type].map(item => { return @@ -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 ( + this.handleTagClose(info)} + >{ctx} + )}); + }; + return (
@@ -307,34 +382,39 @@ class DeveloperHome extends Component {
- - - 分类 - - - 难度 - - - 状态 - - - 来源 - +
+
+ + 分类 + + + 难度 + + + 状态 + + + 来源 + +
+
+ {renderSearch()} +
this.handleInputSearch(value)} style={{ width: 320, float: 'right' }} /> - +
Math.random()} dataSource={hacks_list} - pagination={this.state.pagination} + pagination={pagination} onChange={this.handleTableChange} /> @@ -350,16 +430,28 @@ class DeveloperHome extends Component { * @param {*} state store * @param {*} ownProps DeveloperHome 中的 props */ -const mapStateToProps = (state, ownProps) => ({ - testReducer: state.testReducer, - ojListReducer: state.ojListReducer, - isMySource: state.commonReducer.isMySource -}); +const mapStateToProps = (state, ownProps) => { + const { + testReducer, + 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( diff --git a/public/react/src/modules/developer/index.scss b/public/react/src/modules/developer/index.scss index ca7454092..dabea8b8d 100644 --- a/public/react/src/modules/developer/index.scss +++ b/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 @@ } } } + } diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js index 979df4360..0dc8ccd4d 100644 --- a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js +++ b/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中编辑器内容变化 diff --git a/public/react/src/modules/developer/studentStudy/leftpane/index.js b/public/react/src/modules/developer/studentStudy/leftpane/index.js index e31c4f54a..5de9d5e8c 100644 --- a/public/react/src/modules/developer/studentStudy/leftpane/index.js +++ b/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]) diff --git a/public/react/src/redux/actions/actionTypes.js b/public/react/src/redux/actions/actionTypes.js index 5acba109b..a33134285 100644 --- a/public/react/src/redux/actions/actionTypes.js +++ b/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; diff --git a/public/react/src/redux/actions/index.js b/public/react/src/redux/actions/index.js index 4f4ccc3ae..7294b5f90 100644 --- a/public/react/src/redux/actions/index.js +++ b/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, diff --git a/public/react/src/redux/actions/ojForUser.js b/public/react/src/redux/actions/ojForUser.js index 57918d5c7..8c57ff216 100644 --- a/public/react/src/redux/actions/ojForUser.js +++ b/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({ diff --git a/public/react/src/redux/actions/ojList.js b/public/react/src/redux/actions/ojList.js index 2a507d9d4..4839ebe04 100644 --- a/public/react/src/redux/actions/ojList.js +++ b/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 + } +} diff --git a/public/react/src/redux/reducers/ojListReducer.js b/public/react/src/redux/reducers/ojListReducer.js index 049881810..aa681eebd 100644 --- a/public/react/src/redux/reducers/ojListReducer.js +++ b/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; }