PrivateProject/朱鹏鹏/keiri/src/pages/main/sw_a1705/components/detail.js

import React, { Component } from 'react';
import { Table, Input, Select, Checkbox, Button } from 'antd';
import { AddButton } from '$button'
import { CaretRightOutlined, RollbackOutlined } from '@ant-design/icons';
import { http } from '$http';
import './index.scss'
const { Option } = Select


class Detail extends Component {

    constructor(props) {
        super(props);
     
        this.state = {
            dataSource: [
                // {
                //     id: 1,
                //     pro: '普通',
                //     num: '2回',
                //     money: '4,000'
                // }
            ],
            dataSource1: [
                // {
                //     id: 1,
                //     index:'1',
                //     pro: '普通',
                //     num: '2回',
                //     name: '間接',
                //     money: '4,000'
                // }
            ],
            dataSource2: [
                // {
                //     id: 1,
                //     index: '1',
                //     pro: '普通',
                //     num: '2回',
                //     name: '間接',
                //     money: '4,000',
                //     date: '2019/07/02'
                // }
            ],
            loading: false,
            columns: [
                {
                    title: '項目',
                    dataIndex: 'pro',
                    key: '1',
                },
                {
                    title: '回数',
                    dataIndex: 'num',
                    key: '2',
                },
                {
                    title: '金額',
                    dataIndex: 'money',
                    key: '3',
                }
            ],
            columns1: [
                {
                    title: 'No',
                    dataIndex: 'index',
                    key: '1',
                },
                {
                    title: 'オーダーNo',
                    dataIndex: 'num',
                    key: '2',
                },
                {
                    title: 'オーダー名称',
                    dataIndex: 'name',
                    key: '3',
                },
                {
                    title: '金額',
                    dataIndex: 'money',
                    key: '4',
                }
            ],
            columns2: [
                {
                    title: '年月日',
                    dataIndex: 'date',
                    key: '1',
                },
                {
                    title: '休日',
                    dataIndex: 'num',
                    key: '2',
                },
                {
                    title: '出発',
                    dataIndex: 'name',
                    key: '3',
                },
                {
                    title: '到着',
                    dataIndex: 'money',
                    key: '4',
                },
                {
                    title: '乗車船',
                    dataIndex: 'money',
                    key: '5',
                },
                {
                    title: '宿泊地',
                    dataIndex: 'money',
                    key: '5',
                },
                {
                    title: '乗車駅',
                    dataIndex: 'money',
                    key: '5',
                },
                {
                    title: '降車駅',
                    dataIndex: 'money',
                    key: '5',
                },
                {
                    title: '金額',
                    dataIndex: 'money',
                    key: '5',
                },
                {
                    title: '内訳',
                    dataIndex: 'money',
                    key: '5',
                }
            ],
            rowKey: 'id'
        }
    }

    formRef = React.createRef();
    onGenderChange = (label, value) => {
        console.log(label, value);
        this.formRef.current.setFieldsValue({
            note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
    };

    onFinish = (values) => {
        console.log(values);
    };

    goBack = () => {
        this.props.goBack()
    }

    submit() {

    }
    componentDidMount() {
        // console.log(this.props.row);
        // this.formRef.current.setFieldsValue({
        //     tx_denpyo_no: this.props.row.pldenpyo_NO,
        //     tx_shain_no: this.props.row.snin_MEI,

        // });
    }
    render() {
        const { dataSource, dataSource1, columns1, dataSource2, columns2, loading, columns, rowKey } = this.state
        const setting = {
            dataSource: dataSource,
            columns: columns,
            loading: loading,
            rowKey: rowKey,
            pagination: false,
            size: "small",
            bordered: true,
            style: {width: 300}
        };
        const setting1 = {
            dataSource: dataSource1,
            columns: columns1,
            loading: loading,
            rowKey: rowKey,
            pagination: false,
            size: "small",
            bordered: true,
        };
        const setting2 = {
            dataSource: dataSource2,
            columns: columns2,
            loading: loading,
            rowKey: rowKey,
            pagination: false,
            size: "small",
            bordered: true,
        };
        return (
            <div className='aw_a1705_0010_detail'>
                &emsp;<Button onClick={this.goBack} icon={<RollbackOutlined />} />
                <div className="aw_a1705_0010_detail_form">
                    <div>
                        <div className="form_item">
                            <div className="form_label">伝票番号</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{width:100}} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">起票日</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">社員名称</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                                &emsp;<Input size="small" disabled style={{ width: 120 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">部課名称</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                                &emsp;<Input size="small" disabled style={{ width: 120 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">勘定科目</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                                &emsp;<Input size="small" disabled style={{ width: 120 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">摘要</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 200 }} />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div className="form_item">
                            <div className="form_label">１次承認</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                                &nbsp;<Input size="small" disabled style={{ width: 120 }} />
                                &nbsp;<Input size="small" disabled style={{ width: 120 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">２次承認</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                                 &nbsp;<Input size="small" disabled style={{ width: 120 }} />
                                &nbsp;<Input size="small" disabled style={{ width: 120 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">総務承認</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                                 &nbsp;<Input size="small" disabled style={{ width: 120 }} />
                                &nbsp;<Input size="small" disabled style={{ width: 120 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">出張種別</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">出張期間</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />&nbsp;～
                                &nbsp;<Input size="small" disabled style={{ width: 100 }} /> 
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">出張先名称</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 200 }} />
                            </div>
                        </div>
                    </div>
                </div>
                <div className="aw_a1705_0010_detail_form1">
                    <div className="form1_left">
                        <div className="form_item">
                            <div className="form_label">合計金額</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">初日加算</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">長期出張手当</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">日帰出張手当</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">宿泊代(実費)</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                        <div className="form_item">
                            <div className="form_label">交通費</div>
                            <div className="form_value">
                                <Input size="small" disabled style={{ width: 100 }} />
                            </div>
                        </div>
                    </div>
                    <div className="form1_right">
                        <Table {...setting} ></Table>&emsp;&emsp;
                        <Table {...setting} ></Table>
                    </div>
                </div>
                <div style={{width: 500,marginTop:20}}>
                    <Table {...setting1} ></Table>
                </div>
                <div style={{ marginTop: 20 }}>
                    交通費明細
                    <Table {...setting2} ></Table>
                </div>
            </div>
        )
    }
}

export default Detail