1

liuwh

2020-02-26 b321fc6111c6483e3b2e501620d2e7ffc6a22f15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/**
 * 徐祥健<xuxj@hugeinfo.com.cn>
 * 2018年8月1日 11:12
 *
 */
import React from 'react';
import { Input, Table, Button, message } from 'antd';
const Search = Input.Search;
import Fetch from '../../fetch';
import './style.scss';
import TableBtnView from '../TableBtnView';
export default class AddComView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
      formdata: {},
      resetKey: Date.now(),
    };
  }
 
  componentDidMount() {
    this.getData();
  }
 
  getData = () => {
    const { formdata } = this.state;
    Fetch.getCompanyList(formdata)
      .then(res => {
        this.setState({
          data: res
        });
      });
  }
 
  Seaech = () => {
    const { formdata } = this.state;
    Fetch.getCompanyList(formdata)
      .then(res => {
        this.setState({
          data: res
        });
      });
  }
  Reset = () => {
    this.setState({
      resetKey: Date.now(),
      formdata: {}
    }, this.getData);
  }
 
  onInputChange = ({ target: { value, name } }) => {
    this.setState(({ formdata }) => ({
      formdata: {
        ...formdata,
        [name]: value
      }
    }))
  }
 
 
  render() {
    const { data, resetKey } = this.state;
    const { handleCancel, selectedRow: rows, handleOk } = this.props;
    const rowSelection = {
      selectedRowKeys: rows.map(({ id }) => id),
      onChange: keys => handleOk(keys.map(key => data.find(({ id }) => id == key))),
    };
    const hasSelected = rows.length > 0;
    const columns = [
      {
        title: '公司名称',
        dataIndex: 'companyName',
        key: 'companyName'
      }, {
        title: '法人姓名',
        dataIndex: 'companyLegal',
        key: 'companyLegal',
      }, {
        title: '联系电话',
        dataIndex: 'companyTel',
        key: 'companyTel',
      }, {
        title: '公司地址',
        dataIndex: 'companyAddress',
        key: 'companyAddress',
      }
    ];
    return (
      <div className="pic-rel-view-main">
        <TableBtnView key={-resetKey} type="g">
          <Input placeholder="根据公司名称模糊查询" style={{ width: "200px" }} name='companyName' onChange={this.onInputChange} />
          <Input placeholder="根据法人姓名模糊查询" style={{ width: "200px" }} name='companyLegal' onChange={this.onInputChange} />
          <Input placeholder="根据联系电话模糊查询" style={{ width: "200px" }} name='companyTel' onChange={this.onInputChange} />
          <Button type="primary" onClick={this.Seaech}>查询</Button>
          <Button onClick={this.Reset}>重置</Button>
        </TableBtnView>
        <div>
          <span style={{ marginLeft: 8, fontSize: '10px' }}>
            {hasSelected ? `已选择了 ${rows.length} 个公司` : ''}
          </span>
        </div>
        <Table
          rowKey={record => record.id}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
          pagination={{
            size: 'small',
            pageSize: 5,
            showTotal: total => `共 ${total} 条`
          }}
        />
        <div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={handleCancel}>提交</Button>
            <Button style={{ marginLeft: '15px', width: '150px' }} onClick={handleCancel}>取消</Button>
          </div>
        </div>
      </div >
    );
  }
}