YYZS-Xzhifu/src/component/center-w/centerW.jsx

//eslint-disable
import React from 'react';
import { Spin, Select, Input, Upload, Button, Checkbox, Form,Tooltip } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from "axios";
import select_data from '../../common/ssq';
import styleData from '../moduleCss/style.module.scss';

export default class centerW extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectData: select_data,
            rightArray: select_data.rightArray,
            fileList: [[], [], [], [], [], [], [], [], [], [], [], []],
            fileList_t: null,
            headerProps: {
                progress: {
                    strokeColor: {
                        '0%': '#108ee9',
                        '100%': '#87d068',
                    },
                    strokeWidth: 3,
                    format: percent => `${parseFloat(percent.toFixed(2))}%`,
                }
            },
            imgType: null,
            Params: this.props.arr,
            tradingScenarios: [],
            datas: {},
            signedName: '',
            businessLicensePath: '',//营业执照照片路径
            openAccountPath: '',//开户许可证照片路径
            legalIdCardProsPath: '',//法人证件人像面路径
            legalIdCardConsPath: '',//法人证件国徽面路径
            desireAuthPath: '',//确认入网意愿视频路径
            holdingIdCardPath: '',//法人手持证件影印件路径
            webSitePath: '',//商户网址截图影印件路径
            wechatAppletPath: '',//公众号/小程序/生活号业务流程截图影印件路径	
            appPath: '',//APP首页截图影印件路径
            legalPersonBankCardPath: '',//法人银行卡图影印件路径
            desireAuthOtherPath: '',//确认入网意愿其他验证方式路径
            otherCerPath: '',//其他资质文件路径
            scLodings: null,
            offlist: select_data.offlist,
            validation_list: [],
            form_width: 200,
            registerRole : null,
            contactName : JSON.parse(localStorage.getItem('oData')).contactName
        }

    }

    componentDidMount() {
        this.props.onRef(this);
        let registerRole = JSON.parse(localStorage.getItem('oData')).registerRole;
        localStorage.setItem('rightArray', JSON.stringify(select_data.rightArray))
        this.setState({
            registerRole: registerRole,
        });

        if (registerRole == 'INDIVIDUAL_BUSINESS') { //个体工商户
            this.setState({
                offlist: select_data.INDIVIDUAL_BUSINESS
            })
        }

        if (registerRole == 'NATURAL_PERSON') {  //自然人
            this.setState({
                offlist: select_data.NATURAL_PERSON
            })
        }

        if (registerRole == 'offlist') { //默认
            this.setState({
                offlist: select_data.offlist
            })
        }
    }

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

    InputWdata(e) {
        let Params = {
            legalPersonName: document.getElementById("legalPersonName").value,//法人姓名
            profession: this.state.Params.profession == undefined ? '' : this.state.Params.profession,
            legalPersonIdType: this.state.Params.legalPersonIdType == undefined ? '' : this.state.Params.legalPersonIdType,//法人证件类型
            legalPersonIdNo: document.getElementById("legalPersonIdNo").value, //证件号码
            idEffectiveDateStart: '',//法人证件有效期开始日期
            idEffectiveDateEnd: '',//法人证件有效期结束日期
            cerNoType: this.state.Params.cerNoType == undefined ? '' : this.state.Params.cerNoType,//企业证件类型
            cerNo: document.getElementById("cerNo").value,//企业资质证书编号
            sellingArea: this.state.Params.sellingArea == undefined ? '' : this.state.Params.sellingArea,//营业面积
            staffSize: this.state.Params.staffSize == undefined ? '' : this.state.Params.staffSize,//公司员工规模
            tradingScenarios: this.state.Params.tradingScenarios,//交易场景说明
            webSite: document.getElementById("webSite").value,//网站网址
            webSiteName: document.getElementById("webSiteName").value,//网站名称
            icp: document.getElementById("icp").value,//ICP备案号
            appName: document.getElementById("appName").value,//APP名称
            wechatAppletName: document.getElementById("wechatAppletName").value,//公众号/小程序/生活号
            testAccountInfo: '',//测试账户信息
            businessLicensePath: this.state.Params.businessLicensePath == undefined ? '' : this.state.Params.businessLicensePath,//营业执照照片路径
            openAccountPath: this.state.Params.openAccountPath == undefined ? '' : this.state.Params.openAccountPath,//开户许可证照片路径
            legalIdCardProsPath: this.state.Params.legalIdCardProsPath == undefined ? '' : this.state.Params.legalIdCardProsPath,//法人证件人像面路径
            legalIdCardConsPath: this.state.Params.legalIdCardConsPath == undefined ? '' : this.state.Params.legalIdCardConsPath,//法人证件国徽面路径
            desireAuthPath: this.state.Params.desireAuthPath == undefined ? '' : this.state.Params.desireAuthPath,//确认入网意愿视频路径
            holdingIdCardPath: this.state.Params.holdingIdCardPath == undefined ? '' : this.state.Params.holdingIdCardPath,//法人手持证件影印件路径
            webSitePath: this.state.Params.webSitePath == undefined ? '' : this.state.Params.webSitePath,//商户网址截图影印件路径
            wechatAppletPath: this.state.Params.wechatAppletPath == undefined ? '' : this.state.Params.wechatAppletPath,//公众号/小程序/生活号业务流程截图影印件路径	
            appPath: this.state.Params.appPath == undefined ? '' : this.state.Params.appPath,//APP首页截图影印件路径
            legalPersonBankCardPath: this.state.Params.legalPersonBankCardPath == undefined ? '' : this.state.Params.legalPersonBankCardPath,//法人银行卡图影印件路径
            desireAuthOtherPath: this.state.Params.desireAuthOtherPath == undefined ? '' : this.state.Params.desireAuthOtherPath,//确认入网意愿其他验证方式路径
            otherCerPath: this.state.Params.otherCerPath == undefined ? '' : this.state.Params.otherCerPath,//其他资质文件路径
        }
        localStorage.setItem('wData', JSON.stringify(Params))
        return Params
    }

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

    btnClick(e) {  //区分上传图片类型
        let index = e + 1;
        this.state.imgType = e;
    }

    selectChange_1(value) {  //法人职业类型选择
        this.state.Params.profession = value;
    }

    selectChange_2(value) {  //法人证件类型选择
        this.state.Params.legalPersonIdType = value;
    }

    selectChange_3(value) {  // 企业证件类型选择
        this.state.Params.cerNoType = value;
    }

    selectChange_4(value) {  // 营业面积
        this.state.Params.sellingArea = value;
    }

    selectChange_5(value) {  // 员工规模
        this.state.Params.staffSize = value;
    }

    CheckChange(e) {
        this.state.Params.tradingScenarios = e.toString()
    }

    onChangeUpload(info) {
        let fileList = [...info.fileList];
        this.state.fileList = fileList
    }
    UploadImgstate() {  //修改上传图片状态
        let fileList = this.state.fileList;

        let imgType = this.state.imgType; //当前上传图片点击的Index
        fileList[0].status = 'done'  //上传成功之后的状态 自动修改
        fileList[0].response = fileList[0].name  //图片上传成功之后展示的TIP
        let arr = this.state.fileList;
        arr[imgType] = fileList
        this.setState({
            fileList: arr
        })
    }

    handleChange(e) {
        let imgType = this.state.imgType;
        let file = e.file;
        let that_ = this;
        that_.setState({
            scLodings: true
        })
        const formData = new FormData();
        formData.append('file', file)
        formData.append('merchantSerialNumber', 'MCT_202106262257460929210')
        let config = {
            method: 'post',
            headers: { 'Content-Type': 'multipart/form-data' }
        }
        axios.post('http://paytest.zhongsou.com/payment/file.upload.groovy', formData, config).then((res) => {
            let status = res.data.msg;
            if (status == '获取成功') {
                let dataUrl = res.data.filesResult[0].fileName;
                that_.wjbc(imgType, dataUrl)
            }
        }).catch((error) => { //上传失败后设置回之前的上前数量与状态
            console.log(error);
        })
    }

    wjbc(e, dataUrl) {
        let that_ = this;
        let rightArray = this.state.rightArray;
        switch (e) {
            case 0:
                rightArray[e].txts = '上传成功'
                that_.state.Params.businessLicensePath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    businessLicensePath: dataUrl,
                    scLodings: false
                })
                break;
            case 1:
                rightArray[e].txts = '上传成功'
                that_.state.Params.openAccountPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    openAccountPath: dataUrl,
                    scLodings: false

                })
                break;
            case 2:
                rightArray[e].txts = '上传成功'
                that_.state.Params.legalIdCardProsPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    legalIdCardProsPath: dataUrl,
                    scLodings: false
                })
                break;
            case 3:
                rightArray[e].txts = '上传成功'
                that_.state.Params.legalIdCardConsPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    legalIdCardConsPath: dataUrl,
                    scLodings: false
                })
                break;
            case 4:
                rightArray[e].txts = '上传成功'
                that_.state.Params.desireAuthPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    desireAuthPath: dataUrl,
                    scLodings: false
                })
                break;
            case 5:
                rightArray[e].txts = '上传成功'
                that_.state.Params.holdingIdCardPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    holdingIdCardPath: dataUrl,
                    scLodings: false
                })
                break;
            case 6:
                rightArray[e].txts = '上传成功'
                that_.state.Params.webSitePath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    webSitePath: dataUrl,
                    scLodings: false
                })
                break;
            case 7:
                rightArray[e].txts = '上传成功'
                that_.state.Params.wechatAppletPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    wechatAppletPath: dataUrl,
                    scLodings: false
                })
                break;
            case 8:
                rightArray[e].txts = '上传成功'
                that_.state.Params.appPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    appPath: dataUrl,
                    scLodings: false
                })
                break;
            case 9:
                rightArray[e].txts = '上传成功'
                that_.state.Params.legalPersonBankCardPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    legalPersonBankCardPath: dataUrl,
                    scLodings: false
                })
                break;
            case 10:
                rightArray[e].txts = '上传成功'
                that_.state.Params.desireAuthOtherPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    desireAuthOtherPath: dataUrl,
                    scLodings: false
                })
                break;
            case 11:
                rightArray[e].txts = '上传成功'
                that_.state.Params.otherCerPath = dataUrl;
                that_.setState({
                    rightArray: rightArray,
                    otherCerPath: dataUrl,
                    scLodings: false
                })
                break;
        }
    }


    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,
            rightArray : this.state.rightArray
        })
    }

    render() {
        const { selectData, Params, rightArray, headerProps, scLodings, imgType, validation_list, form_width , registerRole , contactName } = this.state;
        const { Option } = Select;
        const layout = {
            labelCol: { span: 4 },
        };
        const onFinish = (values) => {
            // console.log('xxx: ', values);
        };
        return (
            <div className={styleData.center_up}>
                <Form
                    {...layout}
                    onFinish={onFinish}
                    initialValues={{  //数据回填
                        legalPersonName : contactName, 
                        'tradingScenarios':  Params.tradingScenarios == undefined ? ['WEBSITE'] : Params.tradingScenarios, 
                        'profession' : Params.profession == undefined ? null : Params.profession, 
                        'legalPersonIdType' : Params.legalPersonIdType == undefined ? null : Params.legalPersonIdType, 
 
                    }}
                >
                    <div className={styleData.center_left}>
                        <div className={styleData.cl}>
                            <Form.Item
                                label={registerRole && registerRole == 'NATURAL_PERSON' ? '姓名' : '法人姓名'}
                                name="legalPersonName"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('legalPersonName') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'legalPersonName' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'legalPersonName' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='legalPersonName' style={{ width: form_width }} defaultValue={contactName} placeholder={registerRole && registerRole == 'NATURAL_PERSON' ? '请输入姓名' : '请输入法人姓名'}  disabled />
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label={registerRole && registerRole == 'NATURAL_PERSON' ? '职业' : '法人职业'}
                                name="profession"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('profession') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'profession' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'profession' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder={registerRole && registerRole == 'NATURAL_PERSON' ? '请选择职业' : '请选择法人职业'}  onChange={this.selectChange_1.bind(this)} style={{ width: 200 }}>
                                    {selectData.contractW.map((item, index) => (
                                        <Option key={index} value={item.value}>{item.txt}</Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="法人证件类型"
                                name="legalPersonIdType"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('legalPersonIdType') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'legalPersonIdType' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'legalPersonIdType' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择证件类型"  onChange={this.selectChange_2.bind(this)} style={{ width: 200 }}>
                                    {selectData.certificateW.map((item, index) => (
                                        <Option key={index} value={item.value}>{item.txt}</Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="法人证件号码"
                                name="legalPersonIdNo"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('legalPersonIdNo') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'legalPersonIdNo' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'legalPersonIdNo' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='legalPersonIdNo' style={{ width: form_width }} placeholder="请输入证件号码" defaultValue={Params.legalPersonIdNo} />
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="企业证件类型"
                                name="cerNoType"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('cerNoType') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'cerNoType' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'cerNoType' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择证件类型" defaultValue={Params.cerNoType} onChange={this.selectChange_3.bind(this)} style={{ width: 200 }}>
                                    {selectData.cerNoTypeW.map((item, index) => (
                                        <Option key={index} value={item.value}>{item.txt}</Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="资质证书编号"
                                name="cerNo"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('cerNo') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'cerNo' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'cerNo' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='cerNo' style={{ width: form_width }} placeholder="请输入证书编号" defaultValue={Params.cerNo} />
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="营业面积"
                                name="sellingArea"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('sellingArea') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'sellingArea' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'sellingArea' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择营业面积" defaultValue={Params.sellingArea} onChange={this.selectChange_4.bind(this)} style={{ width: 200 }}>
                                    <Option key={1} value='A'>500平米以上</Option>
                                    <Option key={2} value='B'>200-500平米（含）</Option>
                                    <Option key={3} value='C'>200平米以下</Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="公司员工规模"
                                name="staffSize"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('staffSize') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'staffSize' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'staffSize' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Select size='default' placeholder="请选择员工规模" defaultValue={Params.staffSize} onChange={this.selectChange_5.bind(this)} style={{ width: 200 }}>
                                    <Option key={4} value='A'>100人以上</Option>
                                    <Option key={5} value='B'>50-100人（含）</Option>
                                    <Option key={6} value='C'>50人以下</Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="交易场景说明"
                                name="tradingScenarios"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('tradingScenarios') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'tradingScenarios' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'tradingScenarios' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Checkbox.Group options={selectData.options}   onChange={this.CheckChange.bind(this)} />
                            </Form.Item>

                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="网站网址"
                                name="webSite"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('webSite') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'webSite' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'webSite' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='webSite' style={{ width: form_width }} placeholder="请输入网站网址" defaultValue={Params.webSite} />
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="网站名称"
                                name="webSiteName"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('webSiteName') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'webSiteName' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'webSiteName' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='webSiteName' style={{ width: form_width }} placeholder="请输入网站名称" defaultValue={Params.webSiteName} />
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="ICP备案号"
                                name="icp"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('icp') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'icp' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'icp' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='icp' style={{ width: form_width }} placeholder="请输入ICP备案号" defaultValue={Params.icp} />
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="APP名称"
                                name="appName"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('appName') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'appName' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'appName' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='appName' style={{ width: form_width }} placeholder="请输入APP名称" defaultValue={Params.appName} />
                            </Form.Item>
                        </div>
                        <div className={styleData.cl}>
                            <Form.Item
                                label="公众号/小程序/生活号"
                                name="wechatAppletName"
                                labelCol={{ style: { width: 150 } }}
                                rules={[{ required: this.listTypes('wechatAppletName') == true ? true : false, message: '' }]}
                                validateStatus={validation_list.find((item, index) => { return item == 'wechatAppletName' }) !== undefined ? 'error' : null}
                                help={validation_list.find((item, index) => { return item == 'wechatAppletName' }) !== undefined ? '此项为必填项!' : null}
                            >
                                <Input id='wechatAppletName' style={{ width: form_width }} placeholder="请输入名称" defaultValue={Params.wechatAppletName} />
                            </Form.Item>
                        </div>
                    </div>
                    <div className={styleData.center_right}>
                        {rightArray.map((item, index) => (
                            <Form.Item
                                key={index}
                                label={item.txt}
                                name={item.value}
                                labelCol={{ style: { width: 320 } }}
                                rules={[{ required: this.listTypes(item.value) == true ? true : false, message: '' }]}
                                // validateStatus={validation_list.find((item, index) => { return item == item.value }) !== undefined ? 'error' : null}
                                // help={validation_list.find((item, index) => { return item == item.value }) !== undefined ? '此项为必填项!' : null}
                            >
                                <div className={styleData.cl} key={index}>
                                    <Upload
                                        {...headerProps}
                                        name={item.value}
                                        className={"Upload" + index}
                                        maxCount={1}
                                        showUploadList={false}
                                        accept={item.type}
                                        customRequest={this.handleChange.bind(this)}
                                        onChange={this.onChangeUpload.bind(this)}

                                    >
                                        {
                                            validation_list.find((items, index) => { return items == `${item.value}` }) !== undefined ? 
                                            <Tooltip title="请上传必须文件!" color="red" key={index} defaultVisible={true} placement="rightTop">
                                                <Button  icon={<UploadOutlined />} onClick={() => this.btnClick(index)}>选择文件</Button>
                                            </Tooltip>
                                            : <Button  icon={<UploadOutlined />} onClick={() => this.btnClick(index)} >选择文件</Button>
                                        }
                                        
                                        
                                    </Upload>
                                    <div className={styleData.title_tips} style={{
                                        color: item.txts == '上传成功' ? 'green' : 'red',
                                        display : 'inline-block',
                                        marginLeft : '15px'
                                    }} >
                                        {scLodings == true && imgType == index && <Spin size="small" tip="上传中..." style={{
                                            fontSize: '12px'
                                        }}></Spin>}
                                        {scLodings == true && imgType !== index && item.txts}
                                        {scLodings == null && imgType !== index && item.txts}
                                        {scLodings == false && item.txts}
                                    </div>

                                </div>
                            </Form.Item>
                        ))}
                    </div>
                </Form>
            </div>
        )
    }
}