import React from 'react'; import { Link } from 'react-router-dom'; import './index.less'; import Page from '@src/containers/Page'; import UserLayout from '../../../layouts/User'; import UserTable from '../../../components/UserTable'; import UserAction from '../../../components/UserAction'; import Switch from '../../../components/Switch'; import menu from '../index'; import Tabs from '../../../components/Tabs'; const columns = [ { key: 'title', title: '笔记对象', width: 140, render(text, row) { return row.group ? ( <div className="group"> <Link to="">{text}</Link> </div> ) : ( <div className="sub">{text}</div> ); }, }, { key: 'date', title: '更新时间', width: 100, render(text, row) { return row.group ? ( <div className="group"> <Link to="">{text}</Link> </div> ) : ( <div className="sub"> <div className="date">{text.split(' ')[0]}</div> <div className="date">{text.split(' ')[1]}</div> </div> ); }, }, { key: 'content', title: '内容', width: 540, render(text, row) { return row.group ? ( <div className="group"> <Link to="">{text}</Link> </div> ) : ( <div className="sub">{text}</div> ); }, }, ]; export default class extends Page { initState() { return { filterMap: {}, sortMap: {}, data: [ { group: true, title: '语法', date: ' OG18 #678', content: '「图形」None of the attempts to specify the causes of crime explains why most of the p', list: [ { title: '题目', ask: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉', answer: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,', }, { title: '题目', ask: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉', answer: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,', }, ], }, { group: true, title: '语法', date: ' OG18 #678', content: '「图形」None of the attempts to specify the causes of crime explains why most of the p', list: [ { title: '题目', ask: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉', answer: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,', }, { title: '题目', ask: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,从比较对象和句子结构我们能把DE排除掉', answer: '从比较对象和句子结构我们能把DE排除掉,D选项中fat和livestock不是比较对象,E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题,', }, ], }, ], selectList: [], tab: '1', page: 1, total: 1, }; } onTabChange(tab) { this.setState({ tab }); } onFilter(value) { this.setState({ filterMap: value }); } onSort(value) { this.setState({ sortMap: value }); } onDataChange(page) { this.setState({ page, allChecked: false, selectList: [] }); } onAction() {} onSelect(selectList) { this.setState({ selectList }); } renderView() { const { config } = this.props; return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />; } renderTable() { const { tab, filterMap = {}, sortMap = {}, data = [] } = this.state; return ( <div className="table-layout"> <Tabs border type="division" theme="theme" size="small" space={2.5} width={100} active={tab} tabs={[{ key: '1', title: '练习' }, { key: '2', title: '模考' }]} onChange={key => this.onTabChange(key)} /> <UserAction search selectList={[ { label: '123', children: [ { key: 'one', default: '1', select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }], }, { key: 'two', be: 'one', placeholder: '全部', selectMap: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }], }, ], }, { label: '123', right: true, select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }], }, ]} filterMap={filterMap} onFilter={value => this.onFilter(value)} /> <UserAction sortList={[{ right: true, label: '提问时间', key: '1' }, { right: true, label: '回答时间', key: '2' }]} sortMap={sortMap} left={ <div className="email"> 只看已回答 <Switch /> </div> } onSort={value => this.onSort(value)} /> {data.map(item => { return ( <div className="group"> <UserTable border={false} size="small" columns={columns} data={[item]} header={false} /> {item.list && item.list.map(_item => { return ( <div className="answer-layout"> <div className="title"> 提问区域: <b>{_item.title}</b> </div> <div className="small-tag">提问</div> <div className="desc">{_item.ask}</div> <div className="small-tag">回答</div> <div className="desc">{_item.answer}</div> </div> ); })} </div> ); })} </div> ); } }