sourcecode/front/project/admin/routes/ready/article/page.js

import React from 'react';
import { Link } from 'react-router-dom';
import { Button, Modal, Checkbox, Row, Col, Switch } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import EditTableCell from '@src/components/EditTableCell';
// import DragList from '@src/components/DragList';
import FilterLayout from '@src/layouts/FilterLayout';
import TreeLayout from '@src/layouts/TreeLayout';
import ActionLayout from '@src/layouts/ActionLayout';
import TableLayout from '@src/layouts/TableLayout';
import { formatDate, getMap, formatTreeData } from '@src/services/Tools';
import { asyncSMessage, asyncDelConfirm } from '@src/services/AsyncTools';
// import { ArticleChannel } from '../../../../Constant';
import { Ready } from '../../../stores/ready';

// const ArticleChannelMap = getMap(ArticleChannel, 'value', 'label');

export default class extends Page {
  init() {
    this.categoryTitleMap = {};
    this.categoryMap = {};
    this.categoryList = [];
    this.categoryTree = [];
    this.categoryColumns = [{
      dataIndex: 'parentId',
      title: '一级标题',
      render: (text, record) => {
        if (text) {
          return this.categoryMap[text];
        }
        return record.title;
      },
    }, {
      dataIndex: 'title',
      title: '二级标题',
      render: (text, record) => {
        if (record.parentId) {
          return record.title;
        }
        return '-';
      },
    }, {
      dataIndex: 'isData',
      title: '资料节点',
      render: (text, record) => {
        return record.parentId > 0 && <Checkbox onChange={(e) => {
          this.changeCategoryData(record.id, e.target.checked);
        }} checked={!!text} />;
      },
    }, {
      dataIndex: 'isOfficial',
      title: '官方资料',
      render: (text, record) => {
        return record.parentId > 0 && record.isData > 0 && <Checkbox onChange={(e) => {
          this.changeCategoryOfficial(record.id, e.target.checked);
        }} checked={!!text} />;
      },
    }];
    this.filterForm = [{
      key: 'parentCategoryId',
      type: 'select',
      allowClear: true,
      name: '一级标题',
      placeholder: '请选择',
      select: [],
      number: true,
      onChange: (value) => {
        this.changeSearch(this.filterForm, this, value);
      },
    }, {
      key: 'categoryId',
      type: 'select',
      allowClear: true,
      name: '二级标题',
      select: [],
      number: true,
      placeholder: '请选择',
    }];
    this.actionList = [{
      key: 'add',
      type: 'primary',
      name: '创建',
      render: (item) => {
        return <Link to='/ready/article/detail'><Button>{item.name}</Button></Link>;
      },
    }, {
      key: 'category',
      name: '目录',
    }];
    this.columns = [{
      title: '一级标题',
      dataIndex: 'parentCategoryId',
      render: (text) => {
        return this.categoryTitleMap[text];
      },
    }, {
      title: '二级标题',
      dataIndex: 'categoryId',
      render: (text) => {
        return this.categoryTitleMap[text];
      },
    }, {
      title: '文章标题',
      dataIndex: 'title',
    }, {
      title: '更新时间',
      dataIndex: 'updateTime',
      render: (text) => {
        return formatDate(text, 'YYYY-MM-DD HH:mm:ss');
      },
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record) => {
        return <div className="table-button">
          {<Link to={`/ready/article/detail/${record.id}`}>编辑</Link>}
          {<a onClick={() => {
            this.deleteAction(record);
          }}>删除</a>}
        </div>;
      },
    }];
    this.refreshCategory();
  }

  refreshCategory() {
    Ready.allCategory().then(result => {
      this.categoryTitleMap = getMap(result, 'id', 'title');
      this.categoryTree = formatTreeData(result, 'id', 'title', 'parentId');
      this.categoryMap = getMap(result, 'id');
      this.categoryList = result.map(row => {
        const parent = this.categoryMap[row.parentId];
        row.value = row.id;
        row.title = <Row style={{ width: 400 }}>
          <Col span={11}><EditTableCell value={row.title} onChange={(value) => this.changeCategoryTitle(row.id, value)} /></Col>
          <Col span={5}>{row.parentId === 0 && <Switch checked={row.isData} checkedChildren='资料节点' unCheckedChildren='非资料' onChange={() => this.changeCategoryData(row.id, !row.isData)} />}{row.parentId === 0 && <Switch checked={row.isRoom} checkedChildren='考场节点' unCheckedChildren='非考场' onChange={() => this.changeCategoryRoom(row.id, !row.isRoom)} />}</Col>
          <Col span={5}>{row.parentId > 0 && parent.isData > 0 && <Switch checked={row.isOfficial} checkedChildren='官方资料' unCheckedChildren='非官方资料' onChange={() => this.changeCategoryOfficial(row.id, !row.isOfficial)} />}</Col>
        </Row>;
        return row;
      });
      this.filterForm[0].select = this.categoryList.filter(row => row.parentId === 0);
      this.changeSearch(this.filterForm, this, this.state.search.parentCategoryId);
      this.initData();
      this.setState({ categoryList: this.categoryList, categoryTree: this.categoryTree });
    });
  }

  changeSearch(list, component, value) {
    if (value) {
      list[1].disabled = false;
      list[1].select = this.categoryList.filter(row => row.parentId === value);
    } else {
      list[1].disabled = true;
      list[1].select = [];
    }
    component.setState({ load: false });
  }

  initData() {
    Ready.listArticle(this.state.search).then(result => {
      this.setTableData(result.list, result.total);
    });
  }

  deleteAction(row) {
    asyncDelConfirm('删除确认', '是否删除选中?', () => {
      const handler = Ready.delArticle({ id: row.id });
      return handler.then(() => {
        asyncSMessage('删除成功!');
        this.refresh();
      });
    });
  }

  changeCategoryTitle(id, title) {
    Ready.editCategory({ id, title })
      .then(() => { });
  }

  changeCategoryRoom(id, checked) {
    const category = this.categoryMap[id];
    if (category.isRoom) {
      if (checked) return;
    } else if (!checked) return;
    Ready.editCategory({ id, isRoom: checked ? 1 : 0, isData: 0 })
      .then(() => {
        this.refreshCategory();
      });
  }

  changeCategoryData(id, checked) {
    const category = this.categoryMap[id];
    if (category.isData) {
      if (checked) return;
    } else if (!checked) return;
    Ready.editCategory({ id, isData: checked ? 1 : 0, isRoom: 0 })
      .then(() => {
        this.refreshCategory();
      });
  }

  changeCategoryOfficial(id, checked) {
    const category = this.categoryMap[id];
    if (category.isData) {
      if (checked) return;
    } else if (!checked) return;
    Ready.editCategory({ id, isOfficial: checked ? 1 : 0 })
      .then(() => {
        this.refreshCategory();
      });
  }

  changeCategoryOrder(from, to) {
    if (from.id === to.id) return;
    if (from.parentId !== to.parentId) {
      asyncSMessage('只允许同层排序', 'warn');
      return;
    }
    let parent = [];
    if (to.parentId === 0) {
      parent = this.categoryTree;
    } else {
      parent = this.categoryMap[to.parentId].children;
    }
    let oldIndex = -1;
    let newIndex = -1;
    parent.forEach((row, i) => {
      if (row.id === from.id) oldIndex = i;
      if (row.id === to.id) newIndex = i;
    });
    const others = parent.map(row => row.id);
    const tmp = others.splice(oldIndex, 1);
    if (newIndex === parent.length) {
      others.push(tmp[0]);
    } else {
      others.splice(newIndex, 0, tmp[0]);
    }
    Ready.editCategory({ id: from.id, index: newIndex === parent.length ? parent.length : newIndex })
      .then(() => {
        this.refreshCategory();
      });
  }

  categoryAction() {
    this.open({});
  }

  renderView() {
    return <Block flex>
      <FilterLayout
        show
        itemList={this.filterForm}
        data={this.state.search}
        onChange={data => {
          data.page = 1;
          this.search(data);
        }} />
      <ActionLayout
        itemList={this.actionList}
        selectedKeys={this.state.selectedKeys}
        onAction={key => this.onAction(key)}
      />
      <TableLayout
        columns={this.tableSort(this.columns)}
        list={this.state.list}
        pagination={this.state.page}
        loading={this.props.core.loading}
        onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
        onSelect={(keys, rows) => this.tableSelect(keys, rows)}
        selectedKeys={this.state.selectedKeys}
      />
      {this.state.detail && <Modal visible closable title='目录结构' footer={null} onCancel={() => {
        this.close(false, 'detail');
      }} onOk={() => {
        this.close(true, 'detail');
      }}>

        <TreeLayout
          autoExpandParent
          defaultExpandAll
          itemList={this.state.categoryTree}
          selectable={false}
          draggable
          // onDragStart={({ event, node }) => console.log('start', event, node.props)}
          // onDragOver={({ event, node }) => console.log('over', event, node.props)}
          // onDragLeave={({ event, node }) => console.log('leave', event, node.kepropsy)}
          // onDragEnd={({ event, node }) => console.log('end', event, node.props)}
          // onDragEnter={({ event, node, expandedKeys }) => console.log('enter', event, node.props, expandedKeys)}
          onDrop={({ event, node, dragNode, dragNodesKeys }) => {
            console.log('drop', event, node.props, dragNode.props, dragNodesKeys);
            this.changeCategoryOrder(dragNode.props, node.props);
          }
          }
        />
        {/* <TableLayout
          rowKey={'id'}
          columns={this.categoryColumns}
          list={this.state.categoryList}
          pagination={false}
        /> */}

        {/* <DragList
          loading={this.props.core.loading}
          dataSource={this.state.categoryTree || []}
          handle={'.icon'}
          onMove={(oldIndex, newIndex) => {
            this.orderQuestion(oldIndex, newIndex);
          }}
          renderItem={(item) => (
            <List.Item actions={[<Icon type='bars' className='icon' />]}>
              <Row style={{ width: '100%' }}>
                <Col span={11}>标题： {item.title}</Col>
              </Row>
              <Row style={{ width: '100%' }}>
                <DragList
                  loading={false}
                  dataSource={item.children}
                  handle={`.icon${item.id}`}
                  onMove={(oldIndex, newIndex) => {
                    this.orderQuestion(oldIndex, newIndex);
                  }}
                  renderItem={(row) => (
                    <List.Item actions={[<Icon type='bars' className={`.icon${item.id}`} />]}>
                      <Row style={{ width: '100%' }}>
                        <Col span={11}>标题： {row.title}</Col>
                        <Col span={5}><Switch checked={row.isData} checkedChildren='资料节点' unCheckedChildren='基本节点' onChange={() => this.changeCategoryData(row.id, !row.isData)} /></Col>
                        <Col span={5}>{row.isData > 0 && <Switch checked={row.isOfficial} checkedChildren='官方资料' unCheckedChildren='非官方资料' onChange={() => this.changeCategoryOfficial(row.id, !row.isOfficial)} />}</Col>
                      </Row>
                    </List.Item>
                  )} />
              </Row>
            </List.Item>
          )} /> */}
      </Modal>}
    </Block>;
  }
}