ccic-web/packages/examination/src/views/statistical/list.tsx

import React from 'react'
import { Form, Input, Button, DatePicker, Table, Select} from 'antd'
import { getList } from 'api/statistical'

import { dictionary } from "api/dict/index";

const { Option } = Select

interface Props {
    currentId: number
}

interface State {
    listQuery: {
        keyword: string,
        page: number,
        num: number,
        affiliation?: string,
        memberName?: string,
        mobile?: number | string,
        start?: number,
        end?: number
    },
    order_time?: string[],
    list: object[],
    total: any,
    loading: boolean,
    detailVisible: boolean,
    currentId: number,
    affiliationDict: any,
    manageTypeDict: any,
    showDetail: boolean
}

class Customer extends React.Component<Props, State>{
    formRef = React.createRef<any>();
    constructor(props: Props) {
        super(props);
        this.state = {
            listQuery: {
                keyword: '',
                page: 1,
                num: 20
            },
            list: [],
            total: 0,
            loading: false,
            detailVisible: false,
            currentId: 0,
            affiliationDict: undefined,
            manageTypeDict: undefined,
            showDetail: false
        }
        // this.getListApi = this.getListApi.bind(this)
    }
    componentDidMount() {
        this.getListApi(this.state.listQuery)
        this.getDict()
    }
    // 列表接口
    getListApi(listQuery: object) {
        this.setState({ loading: true });
        getList(listQuery).then(res => {
            this.setState({
                loading: false,
                list: res.data.rows,
                total: res.data.total
            })
        }).catch(() => { })
    }
    getDict() {
        dictionary('affiliation').then((res) => {
            if(res.data){
                this.setState({ affiliationDict: res.data })
            }
        })
        dictionary('manage_type').then((res) => {
            if(res.data){
                this.setState({ manageTypeDict: res.data })
            }
        })
    }

    handleDetail(record: any) {
        // @ts-ignore
        const { history } = this.props;
        console.log(record)
        history.push({
            pathname: '/customerDetail',
            state: { record },
        });
    }

    render() {
        const onFinish = (values: object) => {
            const { customerNo, customerName, typePname, contacts, contactsPhone } = JSON.parse(JSON.stringify(values))
            const _listQuery = { ...this.state.listQuery, customerNo, customerName, typePname, contacts, contactsPhone }
            this.setState({ listQuery: _listQuery })
            this.getListApi(this.state.listQuery)
        }
        const onFinishFailed = (errorInfo: object) => {
            console.log('failes', errorInfo)
        }
        const columns: any = [
            { title: '客户编号', dataIndex: 'customerNo', key: 'customerNo', align: 'center', width: 180 },
            { title: '企业名称', dataIndex: 'customerName', key: 'customerName', align: 'center', width: 150 },
            { title: '行业分类', dataIndex: 'typePname', key: 'typePname', align: 'center', width: 120 },
            { title: '企业联系人', dataIndex: 'contacts', key: 'contacts', align: 'center', width: 120 },
            { title: '企业联系电话', dataIndex: 'contactsPhone', key: 'contactsPhone', align: 'center', width: 120 },
            {
                title: '操作',
                key: 'operation',
                align: 'center',
                fixed: 'right',
                width: 100,
                render: (text: any, record: any) => <p className='link' onClick={() => { this.handleDetail(record) }}>查看</p>,
            }
        ];
        // 分页切换
        const changePage = (current: number, pageSize?: number) => {
            const query = { ...this.state.listQuery, page: current, num: pageSize || 20 }
            console.log('query', query)
            setTimeout(() => {
                this.setState({ listQuery: query })
                this.getListApi(this.state.listQuery)
            }, 0)
        }

        // 多少每页
        const selectchange = (page: number, num: number) => {
            const query = { ...this.state.listQuery, page, num }
            this.setState({ listQuery: query })
            this.getListApi(query);
        }

        const onReset = () => {
            const form = this.formRef.current;
            // const keyword = form.getFieldValue('keyword');
            // const affiliation = form.getFieldValue('affiliation');
            // const manageType = form.getFieldValue('manageType');
            // 清空字段值
            form.resetFields();
        };

        const { list, loading, affiliationDict, manageTypeDict } = this.state;
        return (
            <div className="container">
                {/* {JSON.stringify(this.state.listQuery)} */}
                <div className="ikd-page-header"><div className="title">查询条件</div></div>
                <div className="list-filter">
                    <Form
                        ref={this.formRef}
                        className="filter"
                        layout="inline"
                        name="basic"
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}>
                        <Form.Item
                            label="关键字："
                            name="keyword">
                            <Input style={{ width: 230 }} placeholder="请输入输入客户名称/编号关键字" />
                        </Form.Item>
                        <Form.Item
                            label="归属机构："
                            name="affiliation">
                            <Select placeholder="全部" style={{ width: 200 }} allowClear>
                                {
                                    affiliationDict && affiliationDict.map((item: { dictKey: any; dictValue: string }) => {
                                        return <Option value={item.dictKey}>{item.dictValue}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="管理分类："
                            name="manageType">
                            <Select placeholder="全部" style={{ width: 200 }} allowClear>
                                {
                                    manageTypeDict && manageTypeDict.map((item: { dictKey: any; dictValue: string }) => {
                                        return <Option value={item.dictKey}>{item.dictValue}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="button" onClick={onReset}>
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">搜索</Button>
                        </Form.Item>
                    </Form>
                </div>
                <Table dataSource={list} columns={columns} rowKey="customerId"
                       loading={loading} scroll={{ y: '400px' }}
                       pagination={{
                           total: this.state.total,
                           current: this.state.listQuery.page,
                           showQuickJumper: true,
                           showSizeChanger: true,
                           showTotal: total => `共 ${total} 条`,
                           onShowSizeChange: selectchange,
                           onChange: changePage
                       }} />
            </div>
        )
    }
}

export default Customer;