ttk-app-core/compatible/apps/scm/ttk-scm-app-expense-list/components/settlement.js

enterprise develop framework

import React from 'react'
import { Form, Icon, Select, Input, Button } from 'edf-component'

const FormItem = Form.Item

class Settlement extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            settleList: props.list || []
        }
    }

    render () {
        let { settleList } = this.state
        settleList = settleList.length != 0 ? settleList : [{bankAccountId: '', amount: '', bankAccountName: ''}]
        return(
            <div>
                {
                    settleList.map((item, index) => {
                        return <Form>
                            <FormItem label='现结账户'>
                                <Select>
                                </Select>
                            </FormItem>
                            <FormItem label={'往来单位/个人' || '人员'} className='personClass'>
                                <Select>
                                </Select>
                            </FormItem>
                            <FormItem label='现结金额'>
                                <Input.Number></Input.Number>
                            </FormItem>
                            <div className='IconDiv'>
                                <Icon
                                    type='plus'
                                    title='新增'
                                    className='addIcon'
                                    style={{ cursor: 'pointer' }}
                                    ></Icon>
                                <Icon
                                    type='minus'
                                    title='删除'
                                    className='delIcon'
                                    disabled={settleList.length == 1 ? true : false}
                                    style={{ cursor: 'pointer' }}
                                    ></Icon>
                            </div>
                        </Form>
                    })
                }
                <Form>
                    <FormItem label='剩余金额'></FormItem>
                </Form>
            </div>
        )
    }
}

export default Settlement