jitao-client/js/component/account/evaluate/index.jsx

import React from 'react';
import { Icon, message, Button, Spin, Table } from 'antd';
import Moment from 'moment';
import './index.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import money from '@/money.js';
import CreateDes from './createDes'

const Evaluate = React.createClass({
  getInitialState() {
    return {
      loading: false,
      dataSource: [],
      pagination: {
        defaultCurrent: 1,
        current: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + (total || 0) + '条数据';
        }
      },
      selectedRowKeys: []
    };
  },
  componentWillMount() {
    this.loadData(1);
  },
  showCreate() {
    if (this.props.handlekey) {
      this.props.handlekey('createEvaluate');
    }
  },
  loadData(pageNo) {
    if (this.state.loading) {
      return;
    }
    this.setState({
      loading: true
    });
    let { pagination } = this.state;
    $.ajax({
      url: globalConfig.context + '/api/user/evaluate/list',
      data: {
        pageNo: pageNo || 1,
        pageSize: pagination.pageSize,
      },
      success: function (data) {
        if (!data.data || !data.data.list) {
          return;
        }
        pagination.current = data.data.pageNo;
        pagination.total = data.data.totalCount;
        this.setState({
          dataSource: data.data.list,
          pagination: pagination
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  addClick() {
    this.state.RowData = {};
    this.setState({
      showDesc: true
    });
  },
  closeDesc(e, s) {
    this.state.showDesc = e;
    if (s) {
      this.loadData(this.state.page);
    };
  },
  tableRowClick(record, index) {
    this.state.RowData = record;
    this.setState({
      showDesc: true
    });
  },
  remove() {
    if (this.state.loading || !this.state.selectedRowKeys.length) {
      return;
    }
    this.setState({
      loading: true
    });
    $.ajax({
      url: globalConfig.context + '/api/user/evaluate/remove',
      data: {
        ids: this.state.selectedRowKeys.join(',')
      },
      method: 'post',
      success: function (res) {
        if (res.error && res.error.length) {
          message.error(res.error[0].message);
        } else {
          message.info("删除" + (res.data || 0) + '条记录。', 0.1, () => {
            this.loadData(this.state.pagination.current);
          })
        }
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  preview(e, it) {
    e.stopPropagation();
    e.preventDefault();
    window.open(globalConfig.context + '/user/account/evaluateInfo?id=' + it.id);
  },
  render() {
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys
        });
      },
      getCheckboxProps: record => ({
        disabled: record.step === 7
      })
    }, columns = [
      {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
      }, {
        title: '技术名称',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: '价值',
        dataIndex: 'value',
        key: 'value',
        render: (text, it) => { return it.value ? money(it.value) : ''; }
      }, {
        title: '预览',
        dataIndex: 'preview',
        key: 'preview',
        render: (text, record) => {
          return record.value ?
            <Icon type="eye-o" style={{ fontSize: 18, cursor: "pointer" }}
              onClick={(e) => {
                this.preview(e, record)
              }}></Icon> : <div />
        }
      }, {
        title: '日期',
        dataIndex: 'createTime',
        key: 'createTime',
        render: (text, it) => { return Moment(it.createTime).format('YYYY/MM/DD') }
      }
    ];
    const hasSelected = this.state.selectedRowKeys.length > 0;
    return (
      <Spin spinning={this.state.loading}>
        <div className="content-container">
          <div className="content-title">
            科技评估管理列表
            <div className="content-actions"><Button type="primary" onClick={this.addClick}>开始新评估<Icon type="plus" /></Button></div>
          </div>
          <div className="content-search">
            <Button type="danger" onClick={this.remove} disabled={!hasSelected}>删除</Button>
          </div>
          <div className="content-body">
            <Table
              rowKey="id"
              columns={columns}
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              onRowClick={this.tableRowClick}
              rowSelection={rowSelection} />
          </div>
          <CreateDes
            data={this.state.RowData}
            showDesc={this.state.showDesc}
            closeDesc={this.closeDesc} />
        </div>
      </Spin>
    )
  },
});

export default Evaluate;