sourcecode/front/project/admin/routes/setting/struct/page.js

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, getMap } 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: 'hidden',
    }, {
      key: 'parentName',
      type: 'input',
      name: '父节点',
      disabled: true,
    }, {
      key: 'titleZh',
      name: '中文名称',
      type: 'input',
      placeholder: '请输入中文名称',
      required: true,
    }, {
      key: 'titleEn',
      name: '英文名称',
      type: 'input',
      placeholder: '请输入英文名称',
      required: true,
    }, {
      key: 'description',
      name: '描述',
      type: 'textarea',
      placeholder: '请输入描述',
      required: true,
    }, {
      key: 'isSentence',
      type: 'hidden',
    }, {
      key: 'isExamination',
      type: 'hidden',
    }];
    this.exerciseItemListLimit = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'titleZh',
      name: '中文名称',
      type: 'input',
      placeholder: '请输入中文名称',
      required: true,
    }, {
      key: 'titleEn',
      name: '英文名称',
      type: 'input',
      placeholder: '请输入英文名称',
      required: true,
    }, {
      key: 'description',
      name: '描述',
      type: 'textarea',
      placeholder: '请输入描述',
      required: true,
    }, {
      key: 'isSentence',
      type: 'hidden',
    }, {
      key: 'isExamination',
      type: 'hidden',
    }];
    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: 'hidden',
    }, {
      key: 'parentName',
      type: 'input',
      name: '父节点',
      disabled: true,
    }, {
      key: 'titleZh',
      name: '中文名称',
      type: 'input',
      placeholder: '请输入中文名称',
      required: true,
    }, {
      key: 'titleEn',
      name: '英文名称',
      type: 'input',
      placeholder: '请输入英文名称',
      required: true,
    }, {
      key: 'description',
      name: '描述',
      type: 'textarea',
      placeholder: '请输入描述',
      required: true,
    }, {
      key: 'isAdapt',
      type: 'hidden',
    }];

    this.examinationItemListLimit = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'titleZh',
      name: '中文名称',
      type: 'input',
      placeholder: '请输入中文名称',
      required: true,
    }, {
      key: 'titleEn',
      name: '英文名称',
      type: 'input',
      placeholder: '请输入英文名称',
      required: true,
    }, {
      key: 'description',
      name: '描述',
      type: 'textarea',
      placeholder: '请输入描述',
      required: true,
    }, {
      key: 'isAdapt',
      type: 'hidden',
    }];
    this.state.tab = 'exercise';
  }

  initData() {
    this.refresh(this.state.tab);
  }

  refresh(tab) {
    if (!tab) {
      ({ 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), 'id', 'title', 'parentId');
      this.setState({
        exerciseList: list,
        exerciseMap: getMap(list, 'id'),
        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', 'parentId'),
      });
    });
  }

  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), 'id', 'title', 'parentId');
      this.setState({
        examinationList: list,
        examinationMap: getMap(list, 'id'),
        examinationStruct: formatTreeData(list.map(row => {
          if (row.level !== 2) 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.payStatus = row.payStatus > 0 ? 0 : 1;
          //   Examination.editStruct(row).then(() => {
          //     this.refresh();
          //   });
          // }}>{row.payStatus > 0 ? [<Icon type="pay-circle" />, <span>付费</span>] : [<Icon type="eye" />, <span>免费</span>]}</Button></div>;
          return row;
        }), 'id', 'title', 'parentId'),
      });
    });
  }

  addChildAction() {
    const { tab, exerciseList, examinationList, selectedKeys } = this.state;
    let itemList;
    let node;
    let dep;
    if (tab === 'exercise') {
      itemList = this.exerciseItemList;
      if (selectedKeys.length > 0) {
        ([node] = exerciseList.filter(row => row.id === Number(selectedKeys[0])));
      }
      // 长难句还在该逻辑内，不允许添加下属节点
      if (node.level <= 1 || node.level >= 4) {
        asyncSMessage('不允许添加该节点的子节点', 'warn');
        return;
      }
      dep = {};
    } else {
      itemList = this.examinationItemList;
      if (selectedKeys.length > 0) {
        ([node] = examinationList.filter(row => row.id === Number(selectedKeys[0])));
      }
      if (node.level <= 0 || node.level >= 3) {
        asyncSMessage('不允许添加该节点的子节点', 'warn');
        return;
      }
      dep = {
        isAdapt: node.isAdapt,
      };
    }

    asyncForm('新增', itemList, Object.assign({ parentId: `${node.id}`, parentName: node.title }, dep), 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;
    let dep;
    if (tab === 'exercise') {
      itemList = this.exerciseItemList;
      if (selectedKeys.length > 0) {
        ([node] = exerciseList.filter(row => row.id === Number(selectedKeys[0])));
      }
      if (node.level <= 2) {
        asyncSMessage('不允许添加该节点的兄弟节点', 'warn');
        return;
      }
      dep = {
        parentName: this.state.exerciseMap[node.parentId].title,
      };
    } else {
      itemList = this.examinationItemList;
      if (selectedKeys.length > 0) {
        ([node] = examinationList.filter(row => row.id === Number(selectedKeys[0])));
      }
      if (node.level <= 1) {
        asyncSMessage('不允许添加该节点的兄弟节点', 'warn');
        return;
      }
      dep = {
        isAdapt: node.isAdapt,
        parentName: this.state.examinationMap[node.parentId].title,
      };
    }

    asyncForm('新增', itemList, Object.assign({ parentId: `${node.parentId}`, parentName: node.title }, dep), 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 node;
    if (tab === 'exercise') {
      itemList = this.exerciseItemList;
      ([node] = exerciseList.filter(row => row.id === Number(selectedKeys[0])).map(row => {
        row.parentId = `${row.parentId}`;
        return row;
      }));
      if (node.level <= 2) {
        itemList = this.exerciseItemListLimit;
      }
      if (node.level <= 2) {
        asyncSMessage('该节点不允许编辑', 'warn');
        return;
      }
      node.parentName = this.state.exerciseMap[node.parentId].title;
    } else {
      itemList = this.examinationItemList;
      ([node] = examinationList.filter(row => row.id === Number(selectedKeys[0])).map(row => {
        row.parentId = `${row.parentId}`;
        return row;
      }));
      if (node.level <= 1) {
        itemList = this.examinationItemListLimit;
      }
      // 千行可以被修改
      // if (node.extend) {
      //   asyncSMessage('该节点不允许编辑', 'warn');
      //   return;
      // }
      node.parentName = this.state.examinationMap[node.parentId].title;
    }

    asyncForm('编辑', itemList, node, 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('删除确认', '是否删除选中节点?', () => {
      let handler;
      if (tab === 'exercise') {
        handler = Promise.all(checkedKeys.map(row => Examination.delStruct({ id: row })));
      } else {
        handler = Promise.all(checkedKeys.map(row => Examination.delStruct({ id: row })));
      }
      return handler.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} checkStrictly onCheck={(checkedKeys, e) => {
        if (e.node.props.level > 2) {
          this.setState({ checkedKeys: { checkedKeys, halfCheckedKeys: e.halfCheckedKeys } });
        }
      }} />
    </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} checkStrictly onCheck={(checkedKeys, e) => {
        if (e.node.props.level > 2) {
          this.setState({ checkedKeys: { checkedKeys, halfCheckedKeys: e.halfCheckedKeys } });
        }
      }} />
    </Block>;
  }

  renderView() {
    const { tab } = this.state;
    return <Block><Tabs activeKey={tab} onChange={(value) => {
      this.setState({ tab: value, selectedKeys: [], checkedKeys: [] });
      this.refresh(value);
    }}>
      <Tabs.TabPane tab="练习结构" key="exercise">
        {this.renderExercise()}
      </Tabs.TabPane>
      <Tabs.TabPane tab="模考结构" key="examination">
        {this.renderExamination()}
      </Tabs.TabPane>
    </Tabs></Block>;
  }
}