123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 |
- import React from 'react';
- import { Tabs, Button, Icon } from 'antd';
- import './index.less';
- import Page from '@src/containers/Page';
- import Block from '@src/components/Block';
- import TreeLayout from '@src/layouts/TreeLayout';
- import ActionLayout from '@src/layouts/ActionLayout';
- import { formatTreeData } from '@src/services/Tools';
- import { asyncDelConfirm, asyncForm, asyncSMessage } from '@src/services/AsyncTools';
- // import { System } from '../../../stores/system';
- import { Examination } from '../../../stores/examination';
- import { Exercise } from '../../../stores/exercise';
- export default class extends Page {
- constructor(props) {
- super(props);
- this.exerciseActionList = [{
- key: 'addChild',
- name: '增加子节点',
- }, {
- key: 'addBrother',
- name: '增加兄弟节点',
- selectNum: 1,
- }, {
- key: 'edit',
- name: '编辑',
- selectNum: 1,
- }, {
- key: 'delete',
- name: '批量删除',
- type: 'danger',
- needCheck: 1,
- }];
- this.exerciseItemList = [{
- key: 'id',
- type: 'hidden',
- }, {
- key: 'parentId',
- type: 'tree',
- name: '父节点',
- tree: [],
- fieldNames: { label: 'title', value: 'value', children: 'children' },
- notFoundContent: null,
- onChange: (value) => {
- console.log(value);
- },
- }, {
- key: 'titleZh',
- name: '中文名称',
- type: 'input',
- placeholder: '请输入中文名称',
- required: true,
- }, {
- key: 'titleEn',
- name: '英文名称',
- type: 'input',
- placeholder: '请输入英文名称',
- required: true,
- }, {
- key: 'description',
- name: '描述',
- type: 'textarea',
- placeholder: '请输入描述',
- required: true,
- }];
- this.examinationActionList = [{
- key: 'addChild',
- name: '增加子节点',
- }, {
- key: 'addBrother',
- name: '增加兄弟节点',
- selectNum: 1,
- }, {
- key: 'edit',
- name: '编辑',
- selectNum: 1,
- }, {
- key: 'delete',
- name: '批量删除',
- type: 'danger',
- needCheck: 1,
- }];
- this.examinationItemList = [{
- key: 'id',
- type: 'hidden',
- }, {
- key: 'parentId',
- type: 'tree',
- name: '父节点',
- tree: [],
- fieldNames: { label: 'title', value: 'value', children: 'children' },
- notFoundContent: null,
- onChange: (value) => {
- console.log(value);
- },
- }, {
- key: 'titleZh',
- name: '中文名称',
- type: 'input',
- placeholder: '请输入中文名称',
- required: true,
- }, {
- key: 'titleEn',
- name: '英文名称',
- type: 'input',
- placeholder: '请输入英文名称',
- required: true,
- }, {
- key: 'description',
- name: '描述',
- type: 'textarea',
- placeholder: '请输入描述',
- required: true,
- }];
- this.state.tab = 'exercise';
- }
- initData() {
- this.refresh();
- }
- refresh() {
- const { tab } = this.state;
- if (tab === 'exercise') {
- return this.refreshExercise();
- }
- return this.refreshExamination();
- }
- refreshExercise() {
- Exercise.allStruct().then(result => {
- const list = result.map(row => { row.title = `${row.titleZh}/${row.titleEn}`; return row; });
- this.exerciseItemList[1].tree = formatTreeData([{ title: '根节点', id: 0 }].concat(list));
- this.setState({
- exerciseList: list,
- exerciseStruct: formatTreeData(list.map(row => {
- if (row.level < 4) return row;
- row = Object.assign({}, row);
- row.title = <div className='node'>{row.title}<Button className='after-node' size='small' type={row.questionStatus > 0 ? 'primary' : 'ghost'} onClick={(e) => {
- e.preventDefault();
- row.questionStatus = row.questionStatus > 0 ? 0 : 1;
- Exercise.editStruct(row).then(() => {
- this.refresh();
- });
- }}>{row.questionStatus > 0 ? [<Icon type='pause' />, <span>提问中</span>] : [<Icon type="caret-right" />, <span>提问关闭</span>]}</Button></div>;
- return row;
- }), 'id', 'title'),
- });
- });
- }
- refreshExamination() {
- Examination.allStruct().then(result => {
- const list = result.map(row => { row.title = `${row.titleZh}/${row.titleEn}`; return row; });
- this.examinationItemList[1].tree = formatTreeData([{ title: '根节点', id: 0 }].concat(list));
- this.setState({ examinationList: list, examinationStruct: formatTreeData(list, 'id', 'title') });
- });
- }
- addChildAction() {
- const { tab, exerciseList, examinationList, selectedKeys } = this.state;
- let itemList;
- let node = 0;
- if (tab === 'exercise') {
- itemList = this.exerciseItemList;
- if (selectedKeys.length > 0) {
- node = exerciseList.filter(row => row.id === Number(selectedKeys[0]))[0].id;
- }
- } else {
- itemList = this.examinationItemList;
- if (selectedKeys.length > 0) {
- node = examinationList.filter(row => row.id === Number(selectedKeys[0]))[0].id;
- }
- }
- asyncForm('新增', itemList, { parentId: `${node}` }, data => {
- console.log(data);
- let handler;
- if (tab === 'exercise') {
- handler = Exercise.addStruct(data);
- } else {
- handler = Examination.addStruct(data);
- }
- return handler.then(() => {
- asyncSMessage('新增成功!');
- this.refresh();
- });
- });
- }
- addBrotherAction() {
- const { tab, exerciseList, examinationList, selectedKeys } = this.state;
- let itemList;
- let node;
- if (tab === 'exercise') {
- itemList = this.exerciseItemList;
- if (selectedKeys.length > 0) {
- node = exerciseList.filter(row => row.id === Number(selectedKeys[0]))[0].parentId;
- }
- } else {
- itemList = this.examinationItemList;
- if (selectedKeys.length > 0) {
- node = examinationList.filter(row => row.id === Number(selectedKeys[0]))[0].parentId;
- }
- }
- asyncForm('新增', itemList, { parentId: `${node}` }, data => {
- let handler;
- if (tab === 'exercise') {
- handler = Exercise.addStruct(data);
- } else {
- handler = Examination.addStruct(data);
- }
- return handler.then(() => {
- asyncSMessage('新增成功!');
- this.refresh();
- });
- });
- }
- editAction() {
- const { tab, exerciseList, examinationList, selectedKeys } = this.state;
- let itemList;
- let list;
- if (tab === 'exercise') {
- itemList = this.exerciseItemList;
- list = exerciseList;
- } else {
- itemList = this.examinationItemList;
- list = examinationList;
- }
- asyncForm('编辑', itemList, list.filter(row => row.id === Number(selectedKeys[0])).map(row => {
- row.parentId = `${row.parentId}`;
- return row;
- })[0], data => {
- let handler;
- if (tab === 'exercise') {
- handler = Exercise.editStruct(data);
- } else {
- handler = Examination.editStruct(data);
- }
- return handler.then(() => {
- asyncSMessage('编辑成功!');
- this.refresh();
- });
- });
- }
- deleteAction() {
- const { tab, checkedKeys } = this.state;
- asyncDelConfirm('删除确认', '是否删除选中节点?', () => {
- if (tab === 'exercise') {
- return Promise.all(checkedKeys.map(row => Examination.delStruct({ id: row })));
- }
- return Promise.all(checkedKeys.map(row => Examination.delStruct({ id: row })));
- }).then(() => {
- asyncSMessage('删除成功!');
- this.refresh();
- });
- }
- renderExamination() {
- const { loading } = this.state;
- return <Block loading={loading}>
- <ActionLayout
- itemList={this.exerciseActionList}
- selectedKeys={this.state.selectedKeys}
- checkedKeys={this.state.checkedKeys}
- onAction={key => this.onAction(key)} />
- <TreeLayout autoExpandParent defaultExpandAll checkable itemList={this.state.examinationStruct} selectedKeys={this.state.selectedKeys} onSelect={(selectedKeys) => {
- this.setState({ selectedKeys });
- }} checkedKeys={this.state.checkedKeys} onCheck={(checkedKeys) => {
- this.setState({ checkedKeys });
- }} />
- </Block>;
- }
- renderExercise() {
- const { loading } = this.state;
- return <Block loading={loading}>
- <ActionLayout
- itemList={this.exerciseActionList}
- selectedKeys={this.state.selectedKeys}
- checkedKeys={this.state.checkedKeys}
- onAction={key => this.onAction(key)} />
- <TreeLayout autoExpandParent defaultExpandAll checkable itemList={this.state.exerciseStruct} selectedKeys={this.state.selectedKeys} onSelect={(selectedKeys) => {
- this.setState({ selectedKeys });
- }} checkedKeys={this.state.checkedKeys} onCheck={(checkedKeys) => {
- this.setState({ checkedKeys });
- }} />
- </Block>;
- }
- renderView() {
- const { tab } = this.state;
- return <Block><Tabs activeKey={tab} onChange={(value) => {
- this.setState({ tab: value, selectedKeys: [], checkedKeys: [] });
- this.refresh();
- }}>
- <Tabs.TabPane tab="练习结构" key="exercise">
- {this.renderExercise()}
- </Tabs.TabPane>
- <Tabs.TabPane tab="模考结构" key="examination">
- {this.renderExamination()}
- </Tabs.TabPane>
- </Tabs></Block>;
- }
- }
|