qiqiboy / react-antd-formutil Goto Github PK

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {observer} from 'mobx-react';
import {observable, action} from 'mobx';
import { withForm, FormItem } from 'react-antd-formutil';
import { Table, Form, Input, Checkbox, DatePicker, Button, AutoComplete, Select, Row, Col } from 'antd';
import Content from 'components/Layout/Content';
import Card from 'components/Layout/Card';
import { formRowLeftLayout, formRowRightLayout, formItemLayout, selectOption } from 'utils/config/form';

import './style.scss';

const columns = [{
    title: '账户ID',
    dataIndex: 'accountNumber',
    key: 'accountNumber',
}, {
    title: '账户名称',
    dataIndex: 'accountName',
    key: 'accountName',
}, {
    title: '账户类别',
    dataIndex: 'accountType',
    key: 'accountType',
}, {
    title: '账户别名',
    dataIndex: 'accountAlias',
    key: 'accountAlias',
}, {
    title: '操作',
    dataIndex: 'option',
    key: 'option',
    render: option => (
        <span>
            <Button> 查看详情 </Button>
        </span>
    ),
}];

const accountList = [{
    "accountNumber": "U124514251",
    "accountName": "青劲有限公司1",
    "accountAlias": "曼妥思",
    "accountType": "STL-Master",
    "slaveAccount": "L123123",
    "accountStatus": true
},{
    "accountNumber": "U124514252",
    "accountName": "青劲有限公司2",
    "accountAlias": "曼妥思",
    "accountType": "STL-Master",
    "slaveAccount": "L123123",
    "accountStatus": true
},{
    "accountNumber": "U124514253",
    "accountName": "青劲有限公司3",
    "accountAlias": "曼妥思",
    "accountType": "STL-Master",
    "slaveAccount": "L123123",
    "accountStatus": true
}]

@observer
@withForm
export default class AccountSetting extends Component {

    static propTypes = {
        $formutil: PropTypes.object
    };

    @observable acDataSource = [];
    @observable selectedRowKeys = [];

    submit = ev => {
        ev.preventDefault();

        const { $invalid, $batchDirty, $params } = this.props.$formutil;

        console.info($params);

        if ($invalid) {
            $batchDirty(true);
        } else {
            // submit data
        }
    };

    @action
    onSelectChange = (selectedRowKeys) => {
        console.info('onSelectChange==>', this.selectedRowKeys === selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys;
    }

    render() {

        console.info('this.selectedRowKeys', this.selectedRowKeys);

        const rowSelection = {
            selectedRowKeys: this.selectedRowKeys.slice(),
            onChange: this.onSelectChange,
        };

        return (
            <Content className="p-accset">
                <Card.Title>账户别名</Card.Title>
                <Card>
                    <Form onSubmit={this.submit}>
                        <Row style={{ height: '65px' }}>
                            <Col {...formRowLeftLayout}>
                                <FormItem name="accountID" itemProps={{ ...formItemLayout, label: "账户ID" }} required>
                                    <AutoComplete
                                        dataSource={this.acDataSource}
                                        onSearch={value =>
                                            this.acDataSource = !value ? [] : [value, value + value, value + value + value]
                                        }
                                        placeholder="input here"
                                    />
                                </FormItem>
                            </Col>
                            <Col {...formRowRightLayout}>
                                <FormItem name="accountName" itemProps={{ ...formItemLayout, label: "账户名称" }} required>
                                    <AutoComplete
                                        dataSource={this.acDataSource}
                                        onSearch={value =>
                                            this.acDataSource = !value ? [] : [value, value + value, value + value + value]
                                        }
                                        placeholder="input here"
                                    />
                                </FormItem>
                            </Col>
                        </Row>

                        <Row style={{ height: '65px' }}>
                            <Col {...formRowLeftLayout}>
                                <FormItem name="accountType" itemProps={{ ...formItemLayout, label: "账户类别" }} required>
                                    <Select
                                        showSearch
                                        style={{ width: "100%" }}
                                        optionFilterProp="children"
                                        filterOption={(input, option) =>
                                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                        placeholder="选择类型">
                                        {selectOption}
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col {...formRowRightLayout}>
                                <FormItem name="accountSubName" itemProps={{ ...formItemLayout, label: "账户别名" }} required>
                                    <AutoComplete
                                        dataSource={this.acDataSource}
                                        onSearch={value =>
                                            this.acDataSource = !value ? [] : [value, value + value, value + value + value]
                                        }
                                        placeholder="input here"
                                    />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Button style={{ marginTop: '10px', display: 'block' }} htmlType="submit" type="primary">
                                查询
                            </Button>
                        </Row>
                    </Form>
                </Card>
                <Card>
                    <Button style={{ marginBottom: '20px', display: 'block' }} type="primary">
                        批量命名
                    </Button>
                    <Table
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={accountList}
                        pagination={false}
                    />
                </Card>
            </Content>
        );
    }
}