YYZS-Xzhifu/src/component/center-s/centerS.jsx

import React from 'react';
import { Radio, Select, Input, Form } from 'antd';
// import { $Axios } from '../../common/publish';
import select_data from '../../common/ssq';
import '../center-s/centerS.scss'

export default class centerS extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectData: select_data,
            Params: this.props.arr,
            cityOs: true,
            citylist: [],
            registerRole: '', //1为自然人2为企业
            registerRoleTxt: '', //是否为个体工商户
            regisClick: '',
            offlist: select_data.offlist,
            validation_list: [],
            form_width: 200,
            contactName : JSON.parse(localStorage.getItem('oData')).contactName
        }

    }

    componentDidMount() {
        this.props.onRef(this)
        let selectData = this.state.selectData;
        let registerRole = selectData.contract.find((item, index) => {
            return item.value == JSON.parse(localStorage.getItem('oData')).registerRole;
        });

        this.setState({
            registerRole: registerRole.type,
            registerRoleTxt: registerRole.txt,
            regisClick: registerRole.type == 1 ? 'PRIVATE' : 'PUBLIC'
        })
        this.initData();
    }

    toParent = (data) => {
        this.props.parent.getParams_s(this, data)
    }

    initData() {
        if (this.props.arr) {  //初始化判断数据回填
            if (this.state.Params.provinceCode !== undefined && this.state.Params.provinceCode !== '') { // 判断回填数据内是否有省编码
                let Province = this.state.Params.provinceCode; //获取省编码
                let data = this.state.selectData.Area;  //拿到省数据组
                let cityList = data.find((item, index) => { return Province == item.provinceCode }); //抽取省编码内下的城市列表数据
                this.setState({  //重新设置数据
                    cityOs: false,
                    citylist: cityList.mallCityList,
                })
            } else {

            }
        }
    }

    InputSdata(e) {
        let Params = {
            bankCode: this.state.Params.bankCode,//开户行
            bankBranchName: document.getElementById("bankBranchName").value,//支行名称
            accountName: document.getElementById("accountName").value,//开户名称
            bankCardNo: document.getElementById("bankCardNo").value,//开户账号
            cityCode: this.state.Params.cityCode == undefined ? '' : this.state.Params.cityCode,//市编码
            provinceCode: this.state.Params.provinceCode == undefined ? '' : this.state.Params.provinceCode,//省编码
            accountType: this.state.Params.accountType == undefined ? 'PUBLIC' : this.state.Params.accountType, //结算银行卡属性   PUBLIC 对公 PRIVATE 对私
            liquidationType: 'WITHDRAW',//清算方式 WITHDRAW 提现   SETTLE 结算
            // withdrawRateType: this.state.Params.withdrawRateType == undefined ? 'SINGLE' : this.state.Params.withdrawRateType,//提现费率类型
            withdrawRateType: '',//提现费率类型
            // withdrawRate: document.getElementById("withdrawRate").value,//提现费率
            withdrawRate: '',//提现费率
        }
        localStorage.setItem('sData', JSON.stringify(Params))
        return Params
    }

    childMethod() { //暴露给父组件的方法,集合当前页面拿到的参数存入缓存
        let data = this.InputSdata();
        this.toParent(data)
    }

    handleChange(value) {
        // console.log(`Selected: ${value}`);
    }

    selectChange_1(value) {  //开户行选择
        this.state.Params.bankCode = value;
    }

    selectChange_2(value) { //省编码选择
        this.state.Params.provinceCode = value;
        let citylist = this.state.selectData.Area.find((item, index) => { return value == item.provinceCode });
        this.setState({
            cityOs: false,
            citylist: citylist.mallCityList,
        });
    }

    selectChange_3(value) { //市编码选择
        this.state.Params.cityCode = value;
    }

    onChangeRadio(e) {
        let accountType = e.target.value;
        this.state.Params.accountType = accountType;
        this.setState({
            regisClick: accountType
        })
    }

    onChangeRadio_s(e) {
        let withdrawRateType = e;
        this.state.Params.withdrawRateType = withdrawRateType;
    }

    listTypes(e) {
        let data = this.state.offlist;
        let type = data.find((item, index) => { return item.value == e });
        if (type !== undefined) {
            type = true
        } else {
            type = false
        }
        return type
    }

    verification(e) { //暴露给父组件的方法,验证当前页面必填项
        this.setState({
            validation_list: e,
        })
    }

    render() {
        const { selectData, cityOs, citylist, Params, contactName, registerRole, regisClick, validation_list, form_width } = this.state;
        const { Option } = Select;
        const { TextArea } = Input;
        const layout = {
            labelCol: { span: 4 },
        };
        const onFinish = (values) => {
            // console.log('xxx: ', values);
        };
        return (
            <div className='center_up'>
                <div className='center_left'>
                    <Form
                        {...layout}
                        onFinish={onFinish}
                        initialValues={{  //数据回填
                            accountName : contactName
                        }}
                    >
                        <div className='c-l'>
                            <Form.Item
                                label="开户行"
                                name="bankCode"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('bankCode') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'bankCode' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'bankCode' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择开户行" defaultValue={Params.bankCode} onChange={this.selectChange_1.bind(this)} style={{ width: 200 }}>
                                    {selectData.contractS.map((item, index) => (
                                        <Option key={index} value={item.value}>{item.txt}</Option>
                                    ))}
                                </Select>
                            </Form.Item>

                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="支行名称"
                                name="bankBranchName"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('bankBranchName') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'bankBranchName' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'bankBranchName' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='bankBranchName' style={{ width: form_width }} defaultValue={Params.bankBranchName} placeholder="请输入支行名称" />
                            </Form.Item>
                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="开户名称"
                                name="accountName"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('accountName') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'accountName' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'accountName' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='accountName' style={{ width: form_width }}  placeholder="请输入开户名称" disabled />
                            </Form.Item>
                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="开户账号"
                                name="bankCardNo"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('bankCardNo') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'bankCardNo' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'bankCardNo' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='bankCardNo' style={{ width: form_width }} defaultValue={Params.bankCardNo} placeholder="请输入开户账号" />
                            </Form.Item>
                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="省编码"
                                name="provinceCode"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('provinceCode') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'provinceCode' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'provinceCode' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择省编码" defaultValue={Params.provinceCode} onChange={this.selectChange_2.bind(this)} style={{ width: 200 }}>
                                    {selectData.Area.map((item, index) => (
                                        <Option key={index} value={item.provinceCode}>{item.provinceName}-{item.provinceCode}</Option>
                                    ))}
                                </Select>
                            </Form.Item>

                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="市编码"
                                name="cityCode"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('cityCode') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'cityCode' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'cityCode' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择市编码" defaultValue={Params.cityCode} onChange={this.selectChange_3.bind(this)} style={{ width: 200 }} disabled={cityOs}>
                                    {citylist.map((item, index) => (
                                        <Option key={index} value={item.cityCode}>{item.cityName}-{item.cityCode}</Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="结算银行卡属性"
                                name="accountType"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('accountType') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'accountType' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'accountType' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Radio.Group name="radiogroup" defaultValue={Params.accountType == undefined ? registerRole == 2 ? 'PUBLIC' : 'PRIVATE' : Params.accountType} onChange={this.onChangeRadio.bind(this)}>
                                    <Radio value='PUBLIC'>对公</Radio>
                                    <Radio value='PRIVATE'>对私</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="清算方式"
                                name="accountType"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('accountType') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'accountType' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'accountType' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Radio.Group name="radiogroup" defaultValue='WITHDRAW'>
                                    <Radio value='WITHDRAW'>提现</Radio>
                                </Radio.Group>
                            </Form.Item>                       
                        </div>
                        {/* <div className='c-l'>
                            <Form.Item
                                label="提现费率类型"
                                name="withdrawRateType"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('withdrawRateType') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'withdrawRateType' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'withdrawRateType' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择提现费率类型" defaultValue={Params.withdrawRateType == undefined ? 'SINGLE' : Params.withdrawRateType} style={{ width: 200 }} onChange={this.onChangeRadio_s.bind(this)}>
                                    <Option key='SINGLE' value='SINGLE'>单笔</Option>
                                    <Option key='RATE' value='RATE'>百分比</Option>
                                </Select>
                            </Form.Item>                           
                        </div>
                        <div className='c-l'>
                            <Form.Item
                                label="提现费率"
                                name="withdrawRate"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('withdrawRate') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'withdrawRate' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'withdrawRate' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='withdrawRate' style={{ width : form_width}} defaultValue={Params.withdrawRate} placeholder="请输入提现费率" />
                            </Form.Item>
                        </div> */}
                    </Form>
                </div>
                <div className='center_right'> </div>
            </div>
        )
    }
}