m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
dev_forge
tangjiang 5 years ago
parent 090354b5a4
commit c875bb9bd1
9 changed files with 189 additions and 63 deletions
Show Stats Download Patch File Download Diff File

190
public/react/src/modules/developer/DeveloperHome.js
Unescape View File

@ -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 => <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}>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('categoryMenu', this.handleCategoryMenuClick)}>
<span className={'dropdown-span'}>分类 <Icon type="down"/></span>
</Dropdown>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('hardMenu', this.handleHardMenuClick)}>
<span className={'dropdown-span'}>难度 <Icon type="down"/></span>
</Dropdown>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('statusMenu', this.handleSatusMenuClick)}>
<span className={'dropdown-span'}>状态 <Icon type="down"/></span>
</Dropdown>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('originMenu', this.handleOriginMenuClick)}>
<span className={'dropdown-span'}>来源 <Icon type="down"/></span>
</Dropdown>
<div bordered={false} className={'filter_ctx_area'}>
<div>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('categoryMenu', this.handleCategoryMenuClick)}>
<span className={'dropdown-span'}>分类 <Icon type="down"/></span>
</Dropdown>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('difficultMenu', this.handleHardMenuClick)}>
<span className={'dropdown-span'}>难度 <Icon type="down"/></span>
</Dropdown>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('statusMenu', this.handleSatusMenuClick)}>
<span className={'dropdown-span'}>状态 <Icon type="down"/></span>
</Dropdown>
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('come_fromMenu', this.handleOriginMenuClick)}>
<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) => ({
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(

14
public/react/src/modules/developer/index.scss
Unescape View File

@ -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 @@
}
}
}
}

2
public/react/src/modules/developer/newOrEditTask/rightpane/index.js
Unescape View File

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

3
public/react/src/modules/developer/studentStudy/leftpane/index.js
Unescape View File

@ -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])

3
public/react/src/redux/actions/actionTypes.js
Unescape View File

@ -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;

3
public/react/src/redux/actions/index.js
Unescape View File

@ -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,

4
public/react/src/redux/actions/ojForUser.js
Unescape View File

@ -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({

18
public/react/src/redux/actions/ojList.js
Unescape View File

@ -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
}
}

15
public/react/src/redux/reducers/ojListReducer.js
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save