sourcecode/front/project/admin/routes/textbook/library/page.js

import React from 'react';
import { Button, Form, Modal, DatePicker, Input, Upload, Checkbox, Switch } from 'antd';
import { Link } from 'react-router-dom';
import moment from 'moment';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
// import FilterLayout from '@src/layouts/FilterLayout';
// import ActionLayout from '@src/layouts/ActionLayout';
import TableLayout from '@src/layouts/TableLayout';
// import { getMap, bindSearch, formatDate } from '@src/services/Tools';
import { asyncDelConfirm, asyncSMessage } from '@src/services/AsyncTools';
// import { TextbookType } from '../../../../Constant';
import { Textbook } from '../../../stores/textbook';
import { System } from '../../../stores/system';
import { formatDate } from '../../../../../src/services/Tools';
// import { Question } from '../../../stores/question';
// import { Slient } from '../../../stores/slient';

export default class extends Page {
  constructor(props) {
    super(props);
    this.actionList = [{
      key: 'add',
      name: '新建',
      render: (item) => {
        return <Button onClick={() => {
          linkTo('/subject/textbook/question');
        }}>{item.name}</Button>;
      },
    }];
    this.columns = [{
      title: '库头',
      dataIndex: 'startDate',
      render: (text) => {
        return formatDate(text, 'YYYY-MM-DD');
      },
    }, {
      title: '库尾',
      dataIndex: 'endDate',
      render: (text) => {
        return text ? formatDate(text, 'YYYY-MM-DD') : '-';
      },
    }, {
      title: '发布次数',
      dataIndex: 'historyNumber',
      render: (text, record) => {
        return text ? <a onClick={() => {
          this.loadHistory(record);
        }}>{text}</a> : 0;
      },
    }, {
      title: '开放问答',
      dataIndex: 'questionStatus',
      render: (text, record) => {
        return <Checkbox checked={text > 0} onChange={(e) => {
          this.changeLibrary(record.id, { questionStatus: e.target.checked ? 1 : 0 });
        }} />;
      },
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record) => {
        return <div className="table-button">
          {(
            <a onClick={() => {
              this.setState({ post: record });
              this.props.form.getFieldDecorator('post.libraryId');
              this.props.form.setFieldsValue({ 'post.libraryId': record.id });
            }}>发布机经</a>
          )}
          {(
            <Link to={`/subject/textbook/question?libraryId=${record.id}`}>录入机经</Link>
          )}
        </div>;
      },
    }];
  }

  initData() {
    const { search } = this.state;
    const data = Object.assign({}, search);
    Textbook.listLibrary(data).then(result => {
      this.setTableData(result.list, result.total || 1);
    });
  }

  loadHistory(record) {
    Textbook.listHistory({ libraryId: record.id }).then(result => {
      this.setState({ history: result.list });
    });
  }

  submit() {
    this.props.form.validateFields(['add'], (err, fieldsValue) => {
      if (err) {
        return;
      }
      const data = fieldsValue.add;
      data.startDate.local();
      data.startDate = data.startDate.format('YYYY-MM-DDT00:00:00Z');
      asyncDelConfirm('新增确认', '是否添加新的换库?', () => {
        return Textbook.addLibrary(data).then(() => {
          asyncSMessage('添加成功!');
          this.refresh();
        });
      });
    });
  }

  submitPost() {
    this.props.form.validateFields(['post'], (err, fieldsValue) => {
      if (err) {
        return;
      }
      const data = fieldsValue.post;
      Textbook.postHistory(data).then(() => {
        asyncSMessage('发布成功!');
        this.close('post', false);
        this.refresh();
      });
    });
  }

  changeLibrary(id, data) {
    data.id = id;
    return Textbook.editLibrary(data).then(() => {
      this.refresh();
    });
  }

  renderView() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
    const { postSwitch = {} } = this.state;
    const quant = getFieldValue('post.quant') || null;
    const ir = getFieldValue('post.ir') || null;
    const rc = getFieldValue('post.rc') || null;
    return <Block flex>
      <Form layout="inline">
        <Form.Item>
          {getFieldDecorator('add.startDate', {
            initialValue: moment(new Date(), 'YYYY-mm-dd'),
          })(
            <DatePicker />,
          )}
        </Form.Item>
        <Form.Item><Button type='primary' onClick={() => {
          this.submit();
        }}>新增换库</Button></Form.Item>
      </Form>
      <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.history && <Modal visible closable title='发布历史' okButtonDisabled onCancel={() => {
        this.close(false, 'history');
      }} onOk={() => {
        this.close(false, 'history');
      }}>
        {this.state.history.map(row => {
          const list = [];
          if (row.quant) {
            list.push(<p>{formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss')} - {row.quantContent}</p>);
          }
          if (row.ir) {
            list.push(<p>{formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss')} - {row.irContent}</p>);
          }
          if (row.rc) {
            list.push(<p>{formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss')} - {row.rcContent}</p>);
          }
          return list;
        })}
      </Modal>}
      {this.state.post && <Modal visible closable title='发布机经:请上传机经文件，并点击发布' onCancel={() => {
        this.close(false, 'post');
      }} onOk={() => {
        this.submitPost();
      }}>
        <Form>
          {getFieldDecorator('post.libraryId')}
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 15 }} label='数学机经'>
            不更新，使用上一版本
            <Switch checked={!postSwitch.quant} onChange={() => {
              postSwitch.quant = !postSwitch.quant;
              this.setState({ postSwitch });
            }} />
            <br />
            {!postSwitch.quant && !!this.state.post.quantVersion && `版本：${this.state.post.quantVersion}`}
          </Form.Item>
          {postSwitch.quant && <Form.Item>
            {getFieldDecorator('post.quantContent')(
              <Input.TextArea placeholder='更新日志' />,
            )}
          </Form.Item>}
          {postSwitch.quant && <Form.Item >
            {getFieldDecorator('post.quantDescription')(
              <Input placeholder='更新简介：站内信邮箱使用' />,
            )}
          </Form.Item>}
          {postSwitch.quant && <Form.Item>
            {getFieldDecorator('post.quant')(
              <Upload
                listType="text"
                showUploadList={false}
                beforeUpload={(file) => System.uploadImage(file).then((result) => {
                  setFieldsValue({ 'post.quant': result.url });
                  return Promise.reject();
                })}
                onChange={this.handleChange}
              >
                {<div>
                  <Button>上传附件</Button> {quant && '已上传'}
                </div>}
              </Upload>,
            )}
          </Form.Item>}
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 15 }} label='阅读机经'>
            不更新，使用上一版本
            <Switch checked={!postSwitch.rc} onChange={() => {
              postSwitch.rc = !postSwitch.rc;
              this.setState({ postSwitch });
            }} />
            <br />
            {!postSwitch.rc && !!this.state.post.rcVersion && `版本：${this.state.post.rcVersion}`}
          </Form.Item>
          {postSwitch.rc && <Form.Item>
            {getFieldDecorator('post.rcContent')(
              <Input.TextArea placeholder='更新日志' />,
            )}
          </Form.Item>}
          {postSwitch.rc && <Form.Item >
            {getFieldDecorator('post.rcDescription')(
              <Input placeholder='更新简介：站内信邮箱使用' />,
            )}
          </Form.Item>}
          {postSwitch.rc && <Form.Item>
            {getFieldDecorator('post.rc')(
              <Upload
                listType="text"
                showUploadList={false}
                beforeUpload={(file) => System.uploadImage(file).then((result) => {
                  setFieldsValue({ 'post.rc': result.url });
                  return Promise.reject();
                })}
                onChange={this.handleChange}
              >
                {<div>
                  <Button>上传附件</Button> {rc && '已上传'}
                </div>}
              </Upload>,
            )}
          </Form.Item>}
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 15 }} label='逻辑机经'>
            不更新，使用上一版本
            <Switch checked={!postSwitch.ir} onChange={() => {
              postSwitch.ir = !postSwitch.ir;
              this.setState({ postSwitch });
            }} />
            <br />
            {!postSwitch.ir && !!this.state.post.irVersion && `版本：${this.state.post.irVersion}`}
          </Form.Item>
          {postSwitch.ir && <Form.Item >
            {getFieldDecorator('post.irContent')(
              <Input.TextArea placeholder='更新日志' />,
            )}
          </Form.Item>}
          {postSwitch.ir && <Form.Item >
            {getFieldDecorator('post.irDescription')(
              <Input placeholder='更新简介：站内信邮箱使用' />,
            )}
          </Form.Item>}
          {postSwitch.ir && <Form.Item>
            {getFieldDecorator('post.ir')(
              <Upload
                listType="text"
                showUploadList={false}
                beforeUpload={(file) => System.uploadImage(file).then((result) => {
                  setFieldsValue({ 'post.ir': result.url });
                  return Promise.reject();
                })}
                onChange={this.handleChange}
              >
                {<div>
                  <Button>上传附件</Button> {ir && '已上传'}
                </div>}
              </Upload>,
            )}
          </Form.Item>}
        </Form>
      </Modal>}
    </Block>;
  }
}