jitao-client/js/component/administration/authentication/authDetaiel.jsx

import React from 'react';
import $ from 'jquery/src/ajax';
import {
    Modal,
    message,
    Spin,
    Upload,
    Input,
    Button,
    Form, Icon
} from 'antd';

import { getAdviserType,getIndustry,getSocialAttribute,splitUrl } from '@/tools.js';
import { getProvince } from '@/NewDicProvinceList';
const AuthDetail = Form.create()(React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false,
            pictureUrl: [],
            headPortraitUrl: [],
			adviserUrl:[],
			positiveIdUrl: [],
            oppositeIdUrl: [],
            lawUrl:[],
        };
    },
    loadData(id) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context +  '/api/admin/getUserIdentityByUid' ,
            data: {
                uid: id
            },
            success: function (data) {
                let thisData = data.data;
                if (!thisData) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    thisData = {};
                };
                let provice;
                provice=getProvince(thisData.province,thisData.city,thisData.area);
                this.setState({
                    id:thisData.id,
                    data: thisData,
                    ProvinceCity:provice,
					headPortraitUrl: thisData.headPortraitUrl //专家照片
						? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					adviserUrl: thisData.adviserUrl		//顾问照片
						? splitUrl(thisData.adviserUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					positiveIdUrl: thisData.positiveIdUrl
						? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					oppositeIdUrl: thisData.oppositeIdUrl
						? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload')
                        : [],
                    lawUrl:thisData.consultantCertificateUrl
                        ? splitUrl(thisData.consultantCertificateUrl, ',', globalConfig.avatarHost + '/upload')
                        : [],
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
	cancelFun(){
		this.props.closeDesc();
    },
    //审核通过/拒绝
    updateFun(index){
        this.setState({
            loading:true
        });
        $.ajax({
            method: "post",
            dataType: "JSON",
            crossDomain: false,
            url: globalConfig.context +  '/api/admin/auditing',
            data: {
                id: this.state.id,
                auditStatus:index,
                auditInfo:this.state.refuseValue
            }
        }).done(function (data) {
            if (!data.error.length) {
                message.success('操作成功！');
                this.setState({
                    loading: false,
                });
                this.props.handOk()
            } else {
                message.warning(data.error[0].message);
            };
        }.bind(this));
    },
    beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
        if (!isJPG) {
            message.error('只能上传图片文件!');
            return isJPG;
        }
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
            message.error('图片大小不能超过 10MB!');
            return isLt2M;
        }
        return isJPG && isLt2M;
    },
    //上传图片
    updateConsultantFun(){
        this.setState({
            loading:true
        });
        $.ajax({
            method: "get",
            dataType: "JSON",
            crossDomain: false,
            url: globalConfig.context +  '/api/admin/updatePictureUrl',
            data: {
                url:this.state.consultantFileData,
                uid:this.props.data.uid,
            }
        }).done(function (data) {
            if (!data.error.length) {
                message.success('操作成功！');
                this.setState({
                    loading: false,
                    consultantFileData: '',
                });
                // this.props.handOk()
            } else {
                message.warning(data.error[0].message);
            };
        }.bind(this));
    },
    //审核拒绝
    refuse(){
        this.setState({
            refuseValue:'',
            refuseVisible:true
        })
    },
    refuseOk(){
        if(!this.state.refuseValue){
            message.warning('请填写拒绝原因。')
            return;
        }
        this.setState({
            refuseVisible:false
        })
        this.updateFun(3)
    },
    refuseCancel(){
        this.setState({
            refuseValue:'',
            refuseVisible:false
        })
    },
    componentWillMount() {
        if (this.props.data.id) {
            this.loadData(this.props.data.uid);
        } else {
            this.state.data = {};
        };
    },
    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            if (nextProps.data.id) {
                this.loadData(nextProps.data.uid);
            } else {
				this.state.data = {};
            };
            this.props.form.resetFields();
        };
    },
    render() {
        const theData = this.state.data || {};
        const FormItem = Form.Item
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
        };
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">点击上传</div>
            </div>
        );
        return (
			<div className='login'>
			<Form layout="horizontal" id="demand-form">
				<Spin spinning={this.state.loading}>
                    <div className="clearfix">
						<FormItem className="half-item" {...formItemLayout} label="姓名">
                            <span>{theData.identifyName}</span>
                        </FormItem>
						<FormItem className="half-item" {...formItemLayout} label="行业">
                            <span>{getIndustry(theData.industry)}</span>
						</FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="社会属性">
                            <span>{getSocialAttribute(theData.societyTag)}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="性别">
                            <span>{theData.sex}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="出生日期">
                            <span>{theData.dateOfBirthYear?theData.dateOfBirthYear + '/' + theData.dateOfBirthMonth:''}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="身份证号码">
                            <span>{theData.idNumber}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="省-市-区">
                            <span>{this.state.ProvinceCity}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="通信地址">
                            <span>{theData.postalAddress}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="手机号码">
                            <span>{theData.contactMobile}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="固定电话">
                            <span>{theData.fixedTel}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="QQ">
                            <span>{theData.qq}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="电子邮箱">
                            <span>{theData.email}</span>
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem 
                            labelCol={{ span: 3 }}
                            wrapperCol={{ span: 18 }} 
                            label="个人简介">
                            <span>{theData.introduction}</span>
                        </FormItem>     
                    </div>
                    <p style={{fontSize:16}}>{theData.expert=='1'?'专家认证':'顾问认证'}</p>
                    {theData.expert=='1'?<div>
                        <FormItem className="half-item" {...formItemLayout} label="毕业院校">
                            <span>{theData.graduateSchool}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="专业类别">
                            <span>{theData.majorCategory}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="职业资格">
                            <span>{theData.qualification}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="就职单位">
                            <span>{theData.workUnit}</span>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="职称">
                            <span>{theData.professionalTitle}</span>
                        </FormItem>
                        <div className="clearfix">
                            <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 13 }} label="专家照片">
                                    <Upload className="demandDetailShow-upload"
                                        listType="picture-card"
                                        fileList={this.state.headPortraitUrl}                               
                                        onPreview={(file) => {
                                            this.setState({
                                                previewImage: file.url || file.thumbUrl,
                                                previewVisible: true,
                                            });
                                        }} >
                                    </Upload>
                                    <Modal maskClosable={false} footer={null}
                                        visible={this.state.previewVisible}
                                        onCancel={() => { this.setState({ previewVisible: false }) }}>
                                        <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
                                    </Modal>
                            </FormItem>
                        </div>
                    </div>:<div>
                        <FormItem className="half-item" {...formItemLayout} label="顾问类型">
                            <span>{getAdviserType(theData.consultantType)}</span>
                        </FormItem>
                        {
								theData.consultantType=='4'?<div className="clearfix">
								<div className="clearfix">
									<FormItem className="half-item" {...formItemLayout} label="律师事务所">
										<span>{theData.workUnit1}</span>
								    </FormItem>
								</div>
                                <div className="clearfix">
									<FormItem className="half-item" {...formItemLayout} label="职称">
										<span>{theData.honer}</span>
								    </FormItem>
								</div>
                                <div className="clearfix">
									<FormItem
										labelCol={{ span: 3 }}
										wrapperCol={{ span: 10 }}
										label="擅长行业"
									>
										<span>{theData.goodAtIndustry}</span>
									</FormItem>
								</div>
								<div className="clearfix">
									<FormItem
										labelCol={{ span: 3 }}
										wrapperCol={{ span: 10 }}
										label="典型案例"
									>
										<span>{theData.typicalCase}</span>
									</FormItem>
								</div></div>:''
							}
                        <div className="clearfix">
                            <FormItem className="half-item" labelCol={{ span: 6 }} wrapperCol={{ span: 10 }} label="顾问照片">
                                    {/*<Upload className="demandDetailShow-upload"*/}
                                    {/*    listType="picture-card"*/}
                                    {/*    fileList={this.state.headPortraitUrl}                               */}
                                    {/*    onPreview={(file) => {*/}
                                    {/*        this.setState({*/}
                                    {/*            previewImage: file.url || file.thumbUrl,*/}
                                    {/*            previewVisible: true,*/}
                                    {/*        });*/}
                                    {/*    }} >*/}
                                    {/*</Upload>*/}
                                <Upload
                                    action={globalConfig.context + '/api/admin/uploadPicture'}
                                    data={{ sign: 'user_picture',uid:this.props.data.uid}}
                                    listType="picture-card"
                                    fileList={this.state.headPortraitUrl}
                                    beforeUpload={this.beforeUpload}
                                    onPreview={(file) => {
                                        this.setState({
                                            previewImage: file.url || file.thumbUrl,
                                            previewVisible: true,
                                        });
                                    }}
                                    onChange={(info)=>{
                                        if(info.file.status) {
                                            let fileList = info.fileList;
                                            this.setState({
                                                headPortraitUrl: fileList,
                                            });
                                            if (info.file.status === 'done') {
                                                this.setState({
                                                    consultantFileData: info.file.response.data,
                                                });
                                            }
                                        }
                                    }}>
                                    {this.state.headPortraitUrl.length === 0 ? uploadButton : null}
                                </Upload>
                                <Button
                                    style={{
                                        marginLeft:'30px'
                                    }}
                                    type="primary"
                                    onClick={(e)=>{this.updateConsultantFun()}}
                                    disabled={!this.state.consultantFileData || this.state.headPortraitUrl.length === 0}
                                >
                                    保存
                                </Button>
                                <Modal maskClosable={false} footer={null}
                                    visible={this.state.previewVisible}
                                    onCancel={() => { this.setState({ previewVisible: false }) }}>
                                    <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
                                </Modal>
                            </FormItem>
                            {theData.consultantType=='4'&&<FormItem  className="half-item" labelCol={{ span: 6 }} wrapperCol={{ span: 10 }} label="律师职业资格证">
                                    <Upload className="demandDetailShow-upload"
                                        listType="picture-card"
                                        fileList={this.state.lawUrl}
                                        onPreview={(file) => {
                                            this.setState({
                                                previewImage: file.url || file.thumbUrl,
                                                previewVisible: true,
                                            });
                                        }} >
                                    </Upload>
                                    <Modal maskClosable={false} footer={null}
                                        visible={this.state.previewVisible}
                                        onCancel={() => { this.setState({ previewVisible: false }) }}>
                                        <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
                                    </Modal>
                            </FormItem>}
                        </div>
                    </div>}
                    <div>
                        <FormItem className="half-item" labelCol={{ span: 6 }} wrapperCol={{ span: 10 }} label="身份证正面">
                            <div className="clearfix">
                                <Upload className="demandDetailShow-upload"
                                    listType="picture-card"
                                    fileList={this.state.positiveIdUrl}                               
                                    onPreview={(file) => {
                                        this.setState({
                                            previewImage: file.url || file.thumbUrl,
                                            previewVisible: true,
                                        });
                                    }} >
                                </Upload>
                                <Modal maskClosable={false} footer={null}
                                    visible={this.state.previewVisible}
                                    onCancel={() => { this.setState({ previewVisible: false }) }}>
                                    <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
                                </Modal>
                            </div>
                        </FormItem>
                        <FormItem className="half-item" labelCol={{ span:6 }} wrapperCol={{ span: 10 }} label="身份证反面">
                            <div className="clearfix">
                                <Upload className="demandDetailShow-upload"
                                    listType="picture-card"
                                    fileList={this.state.oppositeIdUrl}                               
                                    onPreview={(file) => {
                                        this.setState({
                                            previewImage: file.url || file.thumbUrl,
                                            previewVisible: true,
                                        });
                                    }} >
                                </Upload>
                                <Modal maskClosable={false} footer={null}
                                    visible={this.state.previewVisible}
                                    onCancel={() => { this.setState({ previewVisible: false }) }}>
                                    <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
                                </Modal>
                            </div>
                        </FormItem>	   
                    </div>
					<div className="clearfix">
						{this.props.examineState&&<FormItem wrapperCol={{ span: 12, offset: 3 }}>
							<Button className="set-submit" type="primary"  onClick={(e)=>{this.updateFun(2)}} >
								审核通过
							</Button>
							<Button type="danger" style={{marginRight:20}} onClick={(e)=>{this.refuse()}}>
								审核拒绝
							</Button>
							<Button className="set-submit" type="ghost" onClick={this.cancelFun}>
								取消
							</Button>
						</FormItem>}
					</div>
				</Spin>
			</Form>   
            <Modal
                title="审核拒绝"
                visible={this.state.refuseVisible}
                onOk={this.refuseOk}
                onCancel={this.refuseCancel}
                >   
                    <div>
                        <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="拒绝原因">
                            <Input type="textarea" rows={4} value={this.state.refuseValue} placeholder="输入拒绝原因" onChange={(e)=>{this.setState({refuseValue:e.target.value})}}/>
                        </FormItem>
                    </div>
                </Modal> 
		</div>
        )
    }
}));
export default AuthDetail;