import React from 'react'; import { Link } from 'react-router-dom'; import './index.less'; import Page from '@src/containers/Page'; import { timeRange, getMap, formatDate } from '@src/services/Tools'; import UserLayout from '../../../layouts/User'; import UserTable from '../../../components/UserTable'; import UserAction from '../../../components/UserAction'; import UserPagination from '../../../components/UserPagination'; import { RealAuth } from '../../../components/OtherModal'; import Examination from '../../../components/Examination'; import VipRenew from '../../../components/VipRenew'; import Modal from '../../../components/Modal'; import menu, { refreshQuestionType, refreshStruct } from '../index'; import Tabs from '../../../components/Tabs'; import { TimeRange, QuestionType, AskTarget } from '../../../../Constant'; import { My } from '../../../stores/my'; import { OpenText } from '../../../components/Open'; const QuestionTypeMap = getMap(QuestionType, 'value', 'label'); const AskTargetMap = getMap(AskTarget, 'value', 'label'); const questionColumns = [ { key: 'questionType', width: 140, render(text, row) { return <div className="group"> <Link to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}>{QuestionTypeMap[text]}</Link> </div>; }, }, { key: 'title', width: 100, render(text, row) { return <div className="group"> <Link to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}>{text}</Link> </div>; }, }, { key: 'content', width: 540, render(text, row) { return <div className="group text-hidden"><Link to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}>{text}</Link></div>; }, }, ]; const contentColumns = [ { key: 'title', title: '笔记对象', width: 140, render(text) { return <div className="sub">{AskTargetMap[text]}</div>; }, }, { key: 'updateTime', title: '更新时间', width: 100, render(text) { return <div className="sub"> <div className="t-2 t-s-12">{text.split(' ')[0]}</div> <div className="t-6 t-s-12">{text.split(' ')[1]}</div> </div>; }, }, { key: 'content', title: '内容', width: 540, render(text) { return <OpenText>{text}</OpenText>; }, }, ]; export default class extends Page { constructor(props) { props.size = 10; super(props); } initState() { return { filterMap: {}, sortMap: {}, selectList: [], contentSelectList: [], allChecked: false, tab: 'exercise', timerange: 'today', }; } initData() { const data = Object.assign(this.state, this.state.search); data.filterMap = this.state.search; if (data.order) { data.sortMap = { [data.order]: data.direction }; } if (data.timerange) { data.filterMap.timerange = data.timerange; } const [startTime, endTime] = timeRange(data.timerange); refreshQuestionType(this, data.subject, data.questionType, { all: true, needSentence: false, allSubject: true, }).then(({ questionTypes }) => { return refreshStruct(this, data.tab, data.one, data.two, { all: true, needPreview: false, needTextbook: false, }).then(({ structIds, latest, year }) => { My.listQuestionNote( Object.assign( { module: data.tab, questionTypes, structIds, latest, year, startTime, endTime }, this.state.search, { order: Object.keys(data.sortMap) .map(key => { return `${key} ${data.sortMap[key]}`; }) .join(','), }, ), ).then(result => { result.list = result.list.map(row => { row.group = true; row.questionType = row.question.questionType; row.title = row.questionNo.title; row.content = row.question.description; row.list = []; AskTarget.forEach((r) => { if (!row[`${r.value}Content`]) return; row.list.push({ title: r.value, updateTime: formatDate(row[`${r.value}Time`], 'YYYY-MM-DD HH:mm:ss'), content: row[`${r.value}Content`], }); }); return row; }); this.setState({ list: result.list, total: result.total, page: data.page }); }); }); }); } onTabChange(tab) { const data = { tab }; this.refreshQuery(data); } onFilter(value) { this.search(value); } onSort(value) { const keys = Object.keys(value); // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null }); const { sortMap } = this.state; const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0; this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null }); } onChangePage(page) { this.search({ page }); } onAll(checked) { if (checked) { const { data = [] } = this.state; const list = []; data.forEach(item => { list.push(item.key); }); this.setState({ selectList: list, allChecked: true }); } else { this.setState({ selectList: [], allChecked: false }); } } onSelect(selectList) { this.setState({ selectList }); } onAction(key) { const { info } = this.props.user; const { selectList } = this.state; switch (key) { case 'help': this.setState({ showTips: true }); return; case 'clear': if (selectList.length === 0) { this.setState({ showWarn: true, warn: { title: '移除', content: '不可少于1题,请重新选择' } }); return; } // this.clearNote(); this.setState({ showClearConfirm: true, clearInfo: { questionNoIds: selectList } }); break; case 'export': if (!info.vip) { this.setState({ showVip: true }); return; } if (selectList.length < 0) { this.setState({ showWarn: true, warn: { title: '导出', content: '不可小于10题,请重新选择' } }); return; } if (selectList.length > 100) { this.setState({ showWarn: true, warn: { title: '导出', content: '不可多余100题,请重新选择' } }); return; } this.setState({ showExportConfirm: true, exportInfo: { questionNoIds: selectList } }); break; default: } } clearNote() { const { clearInfo } = this.state; My.clearQuestionNote(clearInfo.questionNoIds) .then(() => { this.refresh(); }) .catch(e => { this.setState({ warn: { title: '移除', content: e.message }, showClearConfirm: false }); }); } renderView() { const { config } = this.props; return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />; } renderTable() { const { tab, questionSubjectSelect, questionSubjectMap = {}, oneSelect, twoSelectMap = {}, filterMap = {}, sortMap = {}, list = [], } = this.state; const { selectList = [], contentSelectList = [], allChecked, page, total } = this.state; const { info } = this.props.user; return ( <div className="table-layout"> <Tabs border type="division" theme="theme" size="small" space={2.5} width={100} active={tab} tabs={[{ key: 'exercise', title: '练习' }, { key: 'examination', title: '模考' }]} onChange={key => this.onTabChange(key)} /> <UserAction search selectList={[ { children: [ { key: 'subject', placeholder: '学科', select: questionSubjectSelect, }, { placeholder: '题型', key: 'questionType', be: 'subject', selectMap: questionSubjectMap, }, ], }, { label: '范围', children: [ { key: 'one', placeholder: '全部', select: oneSelect, }, { key: 'two', be: 'one', placeholder: '全部', selectMap: twoSelectMap, }, ], }, { right: true, key: 'timerange', select: TimeRange, }, ]} filterMap={filterMap} onFilter={value => this.onFilter(value)} /> <UserAction allCheckbox allChecked={allChecked} help btnList={[ { title: '删除', key: 'clear' }, { title: '导出', key: 'export', tag: 'vip', disabled: !info.vip }, ]} sortList={[{ right: true, label: '更新时间', key: 'update_time' }]} sortMap={sortMap} onSort={value => this.onSort(value)} onAll={checked => this.onAll(checked)} onAction={key => this.onAction(key)} /> {list.map((item, index) => { return ( <div className="group"> <UserTable theme="dark" border={false} size="small" select selectList={selectList} columns={questionColumns} data={[item]} header={false} /> <UserTable border={false} size="small" select even="default" selectList={contentSelectList} columns={contentColumns} data={item.list} header={index === 0} /> </div> ); })} {total > 0 && list.length > 0 && ( <UserPagination total={total} current={page} pageSize={this.state.search.size} onChange={p => this.onChangePage(p)} /> )} {this.renderModal()} </div> ); } renderModal() { const { showWarn, warn = {}, showClearConfirm, clearInfo = {}, showVip, showExamination, showReal, showExportWait, showExportConfirm, exportInfo = {} } = this.state; const { info } = this.props.user; return [ <Modal show={showWarn} title={warn.title} confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showWarn: false })}> <div className="t-2 t-s-18">{warn.content}</div> </Modal>, <Modal show={showClearConfirm} title="移出" onConfirm={() => this.clearNote()} onCancel={() => this.setState({ showClearConfirm: false })}> <div className="t-2 t-s-18"> 当前选中的 <span className="t-4">{clearInfo.questionNoIds ? clearInfo.questionNoIds.length : 0}</span> 道题即将被移出笔记,移出后无法恢复,是否继续? </div> </Modal>, <Modal show={showExportConfirm} title="导出" confirmText="导出" onConfirm={() => this.export()} onCancel={() => this.setState({ showExportConfirm: false })}> <div className="t-2 t-s-18 m-b-5"> 当前共选中 <span className="t-4">{exportInfo.questionNoIds ? exportInfo.questionNoIds.length : 0}</span> 道题笔记,是否开始导出: </div> </Modal>, <Modal show={showExportWait} title="导出" confirmText="好的,知道了" btnAlign="center" onConfirm={() => this.setState({ showExportWait: false })}> <div className="t-2 t-s-18">正在下载中,请不要关闭当前页面!</div> </Modal>, <Examination show={showExamination} data={info} onConfirm={() => this.setState({ showExamination: false })} onCancel={() => this.setState({ showExamination: false })} onClose={() => this.setState({ showExamination: false })} />, <RealAuth show={showReal} data={info} onConfirm={() => this.setState({ showReal: false })} />, <VipRenew show={showVip} data={info} onReal={() => this.setState({ showVip: false, showReal: true })} onPrepare={() => this.setState({ showVip: false, showExamination: true })} onClose={() => this.setState({ showVip: false })} />, ]; } }