YYZS-Xzhifu/src/component/center-tab/center-tab.jsx

import React, { useState } from 'react';
import { Spin, Table, Modal , message  } from 'antd';
import { $Axios, format } from '../../common/publish';
import select_data from '../../common/ssq';
import '../center-tab/center-tab.scss'
const { Column, ColumnGroup } = Table;
export default class centerTab extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            headTxt: '商户入网 > 商户入网列表',
            select_data: select_data,
            data: [],
            columns: [
                {
                    title: '序号',
                    dataIndex: 'num',
                    key: 'num',

                },
                {
                    title: '签约名称',
                    dataIndex: 'signedName',
                    key: 'signedName',
                },
                {
                    title: '商户简称',
                    dataIndex: 'signedShorthand',
                    key: 'signedShorthand',
                },
                {
                    title: '入网时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                },
                {
                    title: '操作',
                    dataIndex: 'cz',
                    key: 'cz',
                    row: { xxx: 'xxx' },
                    render: (text, record, index) => <a onClick={() => this.xqClick(text, record, index)}>查看详情</a>,
                },
            ],
            pNo: 1,
            isModalVisible: false,
            bankCardInfo: null,
            baseInfo: null,
            merchantInfo: null,
            tk_data: [],
            tklodins: false,
            cityList : [],
            areaList : [],
            isModalVisibleImg : false,
            paginationProps: {
                showSizeChanger: false,//设置每页显示数据条数
                showQuickJumper: false,
                showTotal: () => `共${this.state.total}条`,
                pageSize: 10,
                total: null,  //数据的总的条数
                onChange: (current) => this.changePage(current), //点击当前页码
            },
            lodings : true
        }

    }

    componentDidMount() {
        this.initData()
    }

    changePage(e) {
        this.state.params.pNo = e
        this.setState({
            current: e
        });
        this.initData();
    }


    initData() {
        let that_ = this;
        that_.setState({
            lodings: true
        })
        let url = '/payment/merchant.query.groovy'
        let params = {
            action: "queryList",//查询商户入网列表
            merchantStatus: 1, //当前固定为1  //商户状态0待激活1活动中2关闭3删除4已冻结5清退6退驻
            pSize: 10,//每页条数
            pNo: this.state.pNo, //最后一个排序号,即最后一条记录的id值
            queryType: 1,//用户权限 1最高权限  2商城权限  3商户权限
            appName: '' // queryType=2时为指定商户appname，:queryType=3时为二级商户所属上级parentAppName
        }
        $Axios('get', url, params, (res) => {
            let status = res.data.head.status;
            if (status == 200) {
                let data = res.data.body.list;
                let arr = [];
                data.map((item, index) => {
                    let obj = {
                        num: index + 1,
                        key: item.id,
                        name: item.name,
                        signedName: item.signedName == '' ? '--' : item.signedName,
                        signedShorthand: item.signedShorthand == '' ? '--' : item.signedShorthand,
                        createTime: format(item.createTime),
                        appName: item.appName
                    }
                    arr.push(obj)
                });
                let total = res.data.body.totalCount;
                that_.state.paginationProps.total = total
                that_.setState({
                    data: arr,
                    total: total,  //数据的总的条数
                    lodings: false
                })
            }
        })
    }

    xqClick = (text, record, index) => {
        this.queryData(record)
        this.setState({
            isModalVisible: true
        });
    }



    queryData(record) {
        let that_ = this;
        that_.setState({
            tklodins : false
        })
        let url = '/payment/merchant.query.groovy'
        let params = {
            appName: record.appName,//当前需要查询用户的 appName
            action: 'queryInfo' // 查询当前商户信息
        }
        $Axios('get', url, params, (res) => {
            let status = res.data.head.status;
            if (status == 200) {
                let bankCardInfo = JSON.parse(res.data.body.bankCardInfo);
                let baseInfo = JSON.parse(res.data.body.baseInfo);
                let merchantInfo = JSON.parse(res.data.body.merchantInfo);
                let certificateInfo = merchantInfo.certificateInfo;
                let data = [
                    { txt: '签约类型', value: '被分账方' , type : false},
                    { txt: '签约名称', value: baseInfo.signedName , type : false },
                    { txt: '商户简称', value: baseInfo.signedShorthand , type : false },
                    { txt: '商户手机号', value: baseInfo.contactPhone , type : false },
                    { txt: '商户邮箱', value: baseInfo.contactEmail , type : false },
                    { txt: '经营地址省', value: this.businessAddressProvince(baseInfo.businessAddressProvince,1).provinceName , type : false },
                    { txt: '经营地址市' , value : this.businessAddressProvince(baseInfo.businessAddressCity,2).cityName , type : false},
                    { txt: '经营地址区' , value : this.businessAddressProvince(baseInfo.businessAddressArea,3).areaName , type : false},
                    { txt: '经营地址' , value : baseInfo.businessAddress , type : false},
                    { txt: '业务类型' , value : this.businessClassification(baseInfo.businessClassification) , type : false},
                    { txt: '证书类型' , value : this.cerType(baseInfo.cerType) , type : false},
                    { txt: '签约性质' , value : this.registerRole(baseInfo.registerRole) , type : false},
                    { txt: '法人姓名' , value : certificateInfo.legalPersonName == undefined ? '' : certificateInfo.legalPersonName , type : false},
                    { txt: '法人职业' , value : this.profession(certificateInfo.profession) , type : false},
                    { txt: '法人证件类型' , value : this.legalPersonIdType(certificateInfo.legalPersonIdType) , type : false},
                    { txt: '证件号码' , value : certificateInfo.legalPersonIdNo == undefined ? '' : certificateInfo.legalPersonIdNo , type : false},
                    { txt: '企业证件类型' , value :  this.cerNoType(certificateInfo.cerNoType) , type : false},
                    { txt: '企业资质证书编号' , value :  certificateInfo.cerNo == undefined ? '' : certificateInfo.cerNo , type : false},
                    { txt: '营业面积' , value :  this.sellingArea(certificateInfo.sellingArea,1) , type : false},
                    { txt: '公司员工规模' , value :  this.sellingArea(certificateInfo.staffSize,2) , type : false},
                    { txt: '交易场景说明' , value :  this.tradingScenarios(certificateInfo.tradingScenarios == undefined ? [] : certificateInfo.tradingScenarios) , type : false},
                    { txt: '网站网址' , value : certificateInfo.webSite == undefined ? '' : certificateInfo.webSite , type : false},
                    { txt: '网站名称' , value : certificateInfo.webSiteName == undefined ? '' : certificateInfo.webSiteName , type : false},
                    { txt: 'ICP备案号' , value : certificateInfo.icp == undefined ? '' : certificateInfo.icp , type : false},
                    { txt: 'APP名称' , value : certificateInfo.appName == undefined ? '' : certificateInfo.appName , type : false},
                    { txt: '公众号/小程序/生活号' , value : certificateInfo.wechatAppletName == undefined ? '' : certificateInfo.wechatAppletName , type : false},
                    { txt: '营业执照照片路径' , value : certificateInfo.businessLicensePath == undefined ? '' : certificateInfo.businessLicensePath , type : true},
                    { txt: '开户许可证照片路径' , value : certificateInfo.openAccountPath == undefined ? '' : certificateInfo.openAccountPath , type : true},
                    { txt: '法人证件人像面路径' , value : certificateInfo.legalIdCardProsPath == undefined ? '' : certificateInfo.legalIdCardProsPath , type : true},
                    { txt: '法人证件国徽面路径' , value : certificateInfo.legalIdCardConsPath == undefined ? '' : certificateInfo.legalIdCardConsPath , type : true},
                    { txt: '法人手持证件影印件路径' , value : certificateInfo.holdingIdCardPath == undefined ? '' : certificateInfo.holdingIdCardPath , type : true},
                    { txt: '商户网址截图影印件路径' , value : certificateInfo.webSitePath == undefined ? '' : certificateInfo.webSitePath , type : true},
                    { txt: '公众号/小程序/生活号业务流程截图影印件路径	' , value : certificateInfo.wechatAppletPath == undefined ? '' : certificateInfo.wechatAppletPath , type : true},
                    { txt: '商户网址截图影印件路径' , value : certificateInfo.appPath == undefined ? '' : certificateInfo.appPath , type : true},
                    { txt: '法人银行卡图影印件路径' , value : certificateInfo.legalPersonBankCardPath == undefined ? '' : certificateInfo.legalPersonBankCardPath , type : true},
                    { txt: '其他资质文件路径' , value : certificateInfo.otherCerPath == undefined ? '' : certificateInfo.otherCerPath , type : true},
                    { txt: '开户行' , value : this.bankCode(bankCardInfo.bankCode) , type : false},
                    { txt: '支行名称' , value : bankCardInfo.bankBranchName == undefined ? '' : bankCardInfo.bankBranchName , type : false},
                    { txt: '开户名称' , value : bankCardInfo.accountName == undefined ? '' : bankCardInfo.accountName , type : false},
                    { txt: '开户账号' , value : bankCardInfo.bankCardNo == undefined ? '' : bankCardInfo.bankCardNo , type : false},
                    { txt: '市编码' , value : bankCardInfo.cityCode == undefined ? '' : bankCardInfo.cityCode , type : false},
                    { txt: '省编码' , value : bankCardInfo.provinceCode == undefined ? '' : bankCardInfo.provinceCode , type : false},
                    { txt: '结算银行卡属性' , value :  this.accountType(bankCardInfo.accountType,1) , type : false},
                    { txt: '清算方式' , value :  this.accountType(bankCardInfo.liquidationType,2) , type : false},
                    { txt: '提现费率类型' , value : bankCardInfo.withdrawRateType == undefined ? '' : bankCardInfo.withdrawRateType , type : false},
                    { txt: '提现费率' , value : bankCardInfo.withdrawRate == undefined ? '' : bankCardInfo.withdrawRate , type : false},
                ]
                that_.setState({
                    tk_data: data,
                    tklodins : true
                    
                },function(){
                    that_.setState({
                        isModalVisible: true,
                    })
                });
            }else{
                console.log(123)
                let txt = res.data.body.msg
                that_.setState({
                    isModalVisible: true,
                })
                message.error(txt);
            }
            console.log(status)

        })

    }

    handleOk_c() {
        this.setState({
            isModalVisible: false
        })
    }

    bankCode(e){ //开户行反查
        console.log(e)
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.contractS.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }

    accountType(e,n){//结算银行卡属性反查 && 清算方式liquidationType
        let s;
        if(e !== '' && e !== undefined){  
           if(n == 1){
            if(e == 'PUBLIC'){
                s = '对公'
            }else if(e == 'PRIVATE'){
                s = '对私'
            }
           }else{
            if(e == 'WITHDRAW'){
                s = '提现'
            }else if(e == 'SETTLE'){
                s = '结算'
            }
           }
        }
        return s
    }

    tradingScenarios(e){//交易场景说明反查
        let s;
        if(e && e.length > 0){
            e.map((item,index) => {
                s += `${item}`
            });
        }
        return s
    }

    sellingArea(e,n){ //营业面积与员工规模反查
        let s;
        if(e !== '' && e !== undefined){  
           if(n == 1){
                if(e == 'A'){
                    s = '500平米以上'
                }else if(e == 'B'){
                    s = '200-500平米（含）'
                }else if(e == 'C'){
                    s = '200平米以下'
                }
           }else{
                if(e == 'A'){
                    s = '100人以上'
                }else if(e == 'B'){
                    s = '50-100人（含）'
                }else if(e == 'C'){
                    s = '50人以下'
                }
           }
        }
        return s
    }

    cerNoType(e){ //企业证件类型反查
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.cerNoTypeW.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }

    legalPersonIdType(e){ //法人证件类型反查
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.certificateW.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }

    legalPersonIdType(e){ //法人证件类型反查
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.certificateW.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }

    profession(e){//法人职业反查
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.contractW.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }

    registerRole(e){ //签约性质反查
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.contract.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }

    cerType(e){ //证书类型反查
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.certificate.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }
    businessClassification(e){//业务类型反查
        let s;
        if(e !== '' && e !== undefined){
            s = this.state.select_data.fication.find((item, index) => { return e == item.value }).txt;
        }
        return s
    }


    businessAddressProvince(e,n) { //经营地反查
        let provinceName,cityName,areaName,cityList,areaList;
        if(n == 1){
            provinceName = this.state.select_data.Area.find((item, index) => { return e == item.provinceCode }).provinceName;
            cityList = this.state.select_data.Area.find((item, index) => { return e == item.provinceCode }).mallCityList;
            this.setState({
                cityList : cityList
            })
        }
        if(n == 2){
            cityName = this.state.cityList.find((item, index) => { return e == item.cityCode }).cityName;
            areaList = this.state.cityList.find((item, index) => { return e == item.cityCode }).mallAreaList;
            this.setState({
                areaList : areaList
            })
        }
        if(n == 3){
            areaName = this.state.areaList.find((item, index) => { return e == item.areaCode }).areaName;
        }
        return { provinceName ,cityName ,areaName }
    }

    cktuImg(url){
        this.setState({
            isModalVisibleImg : true
        })
        console.log(url)
    }
    handleOk_img(){
        this.setState({
            isModalVisibleImg : false
        })
    }


    render() {
        const { data, columns, headTxt, isModalVisible, tk_data, tklodins ,isModalVisibleImg,paginationProps ,lodings } = this.state;
        return (
            <div className='wrap_table'>
                <div className='header_center'>
                    {headTxt}
                </div>
                <div className='tables'>
                    <Table 
                    columns={columns} 
                    dataSource={data} 
                    pagination={paginationProps}
                    loading={lodings}
                    />
                </div>
                <Modal title="详细信息"
                    wrapClassName={'webs'}
                    footer={[]}
                    visible={isModalVisible}
                    closable={true}
                    onCancel={this.handleOk_c.bind(this)}
                >
                    {
                        tklodins == false && <div style={{
                            width: '100%',
                            height: '300px',
                            textAlign : 'center',
                            fontSize : '20px',
                            color : '#ccc',
                            lineHeight : '300px',
                            overflow:'auto'
                        }}>
                             <Spin tip="加载中请稍后..."></Spin>
                        </div>
                    }
                    {
                        (tklodins == true &&  tk_data !== []) && <div style={{maxHeight:'300px',overflow : 'auto'}}>
                            {tk_data.map((item, index) => (
                                //item.type == false ? <div key={index} style={{height:'50px',lineHeight :'50px'}} value={item.value}>{item.txt} : {item.value}</div> : <div key={index} style={{height:'50px',lineHeight :'50px'}} >{item.txt} :  <Button type="primary" onClick={ (e) => this.cktuImg(item.value) } >查看图片</Button></div>
                                <div key={index} style={{height:'50px',lineHeight :'50px'}} value={item.value}>{item.txt} : {item.value}</div>
                            ))}
                         </div>
                    }
                </Modal>
                <Modal title="图片详情"
                    wrapClassName={'webs'}
                    footer={[]}
                    visible={isModalVisibleImg}
                    closable={true}
                    onCancel={this.handleOk_img.bind(this)}
                >
                    
                        <div style={{
                            width: '100%',
                            height: '300px',
                            textAlign : 'center',
                            fontSize : '20px',
                            color : '#ccc',
                            lineHeight : '300px',
                            overflow:'auto'
                        }}>
                             <Spin tip="加载中请稍后..."></Spin>
                        </div>
                </Modal>
            </div>
        )
    }
}