/* @author:李霆 @update:2018/05/29 */ import React from 'react'; import { Radio, Icon, Button, Input, Select, Spin, message, DatePicker, Modal, Upload, Form, Row, Col, InputNumber } from 'antd'; import $ from 'jquery/src/ajax'; import './unit.less'; import { socialAttribute, industry, } from '@/dataDic.js'; import { splitUrl, } from '@/tools.js'; const FormItem = Form.Item; import Crop from '@/crop/cropBlock'; //图片组件 const PicturesWall = React.createClass({ getInitialState() { return { previewVisible: false, previewImage: '', fileList: [] }; }, handleCancel() { this.setState({ previewVisible: false }); }, handlePreview(file) { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }, handleChange(info) { let fileList = info.fileList; this.setState({ fileList }); this.props.fileList(fileList); }, componentWillReceiveProps(nextProps) { this.state.fileList = nextProps.pictureUrl; }, render() { const { previewVisible, previewImage, fileList } = this.state; const uploadButton = ( <div> <Icon type="plus" /> <div className="ant-upload-text">点击上传</div> </div> ); return ( <div style={{ display: 'inline-block' }}> <Upload action={globalConfig.context + '/api/user/uploadPicture'} data={{ sign: 'user_picture' }} listType="picture-card" fileList={fileList} onPreview={this.handlePreview} onChange={this.handleChange} > {fileList.length >= 1 ? null : uploadButton} </Upload> <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{ width: '100%' }} src={previewImage} /> </Modal> </div> ); } }); const PicturesWallMore = React.createClass({ getInitialState() { return { previewVisible: false, previewImage: '', fileList: [] }; }, handleCancel() { this.setState({ previewVisible: false }); }, handlePreview(file) { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }, handleChange(info) { let fileList = info.fileList; this.setState({ fileList }); this.props.fileList(fileList); }, componentWillReceiveProps(nextProps) { this.state.fileList = nextProps.pictureUrl; }, render() { const { previewVisible, previewImage, fileList } = this.state; const uploadButton = ( <div> <Icon type="plus" /> <div className="ant-upload-text">点击上传</div> </div> ); return ( <div style={{ display: 'inline-block' }}> <Upload action={globalConfig.context + '/api/user/uploadHonerPicture'} data={{ sign: 'honor_picture' }} listType="picture-card" fileList={fileList} onPreview={this.handlePreview} onChange={this.handleChange} > {fileList.length >= 8 ? null : uploadButton} </Upload> <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{ width: '100%' }} src={previewImage} /> </Modal> </div> ); } }); const Unit = React.createClass({ getInitialState() { return { loading: false, orgCodeUrl: [], companyLogoUrl: [], ProvinceCity:[], qualiUrl:[] }; }, loadInformation(record) { this.setState({ loading:true }) $.ajax({ method: 'get', dataType: 'json', url: globalConfig.context + '/api/user/getOrganizationDetail', success: function(data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thisData = {}; } this.setState({ InformationId: thisData.id, InformationUid: thisData.uid, identifyName: thisData.identifyName, listed: thisData.listed, highTechZone: thisData.highTechZone, orgCodeUrl: thisData.orgCodeUrl ? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload') : [], companyLogoUrl:thisData.companyLogoUrl?thisData.companyLogoUrl.split(','):[], qualiUrl: thisData.honorPicture ? splitUrl(thisData.honorPicture, ',', globalConfig.avatarHost + '/upload') : [], dataInformation: thisData, //ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined, industry: String(thisData.industry) == 'null' ? undefined : String(thisData.industry), societyTag: thisData.societyTag || undefined, introduction: thisData.introduction, postalAddress: thisData.postalAddress, fixedTel: thisData.fixedTel, registeredCapital: thisData.registeredCapital, enterpriseScale: thisData.enterpriseScale, legalPerson: thisData.legalPerson, legalPersonIdCard: thisData.legalPersonIdCard, legalPersonTel: thisData.legalPersonTel, legalPersonEmail: thisData.legalPersonEmail, businessScope: thisData.businessScope, orgCode: thisData.orgCode, type:thisData.type, qq:thisData.qq, email:thisData.email, authentication:thisData.authentication }); }.bind(this) }).always( function() { this.setState({ loading: false }); }.bind(this) ); }, //图片 getOrgCodeUrl(e) { this.setState({ orgCodeUrl: e }); }, getCompanyLogoUrl(e) { this.setState({ companyLogoUrl: e }); }, getQualiUrl(e) { this.setState({ qualiUrl: e }); }, //基本信息提交 newSubmit(e) { this.setState({ selectedRowKeys: [] }); let theorgCodeUrl = []; if (this.state.orgCodeUrl.length) { let picArr = []; this.state.orgCodeUrl.map(function(item) { if (item.response && item.response.data && item.response.data.length) { picArr.push(item.response.data); } }); theorgCodeUrl = picArr.join(','); } let thequaliUrl = []; if (this.state.qualiUrl.length) { let picArr = []; this.state.qualiUrl.map(function(item) { if (item.response && item.response.data && item.response.data.length) { picArr.push(item.response.data); } }); thequaliUrl = picArr.join(','); } this.setState({ loading: true }); $.ajax({ method: 'post', dataType: 'json', url: globalConfig.context + '/api/user/updateOrganizationDetail', data: { id: this.state.InformationId, uid: this.state.InformationUid, societyTag: this.state.societyTag, identifyName: this.state.identifyName, //单位名称 introduction: this.state.introduction, unitName: this.state.unitName, industry: this.state.industry, postalAddress: this.state.postalAddress, fixedTel: this.state.fixedTel, contactsFax: this.state.contactsFax, registeredCapital: this.state.registeredCapital ? this.state.registeredCapital : 0, enterpriseScale: this.state.enterpriseScale, legalPerson: this.state.legalPerson, legalPersonIdCard: this.state.legalPersonIdCard, legalPersonTel: this.state.legalPersonTel, legalPersonEmail: this.state.legalPersonEmail, highTechZone: this.state.highTechZone, listed: this.state.listed, contacts: this.state.contacts, orgCode: this.state.orgCode, businessScope: this.state.businessScope, introduction: this.state.introduction, // companyLogoUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '', companyLogoUrl:this.state.companyLogoUrl.length>0?(this.state.companyLogoUrl).join(','):[], honorPicture: thequaliUrl.length != 0 ? thequaliUrl : '', orgCodeUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '', auditStatus: this.state.auditStatus, authentication:this.state.authentication, type:this.state.type, qq:this.state.qq, email:this.state.email } }).done( function(data) { this.setState({ loading: false }); if (!data.error.length) { message.success('保存成功'); this.loadInformation(); } else { message.warning(data.error[0].message); } }.bind(this) ); }, subFun(){ if(!this.state.identifyName){ message.warning("请填写单位名称") return; } if (!this.state.industry) { message.warning('请选择行业!'); return false; } if (!this.state.societyTag) { message.warning('请选择社会性质!'); return false; } if (isNaN(this.state.registeredCapital)) { message.warning('注册资本只能输入数字!'); return false; } if (!this.state.email) { message.warning('请填写企业邮箱!'); return false; } if (!this.state.qq) { message.warning('请填写企业QQ!'); return false; } if (this.state.companyLogoUrl&&(this.state.companyLogoUrl.length)<1) { message.warning('请上传企业LOGO.'); return false; } if(!this.state.businessScope){ message.warning('请填写业务范围!'); return false; } if(!this.state.introduction){ message.warning('请填写企业简介!'); return false; } if (this.state.qualiUrl&&(this.state.qualiUrl.length)<1) { message.warning('请上传资质荣誉照片.'); return false; } this.newSubmit() }, handleOk(){ this.newSubmit(); this.setState({ visible:false }) }, handleCancel(){ this.setState({ visible:false }) }, //logo图片获取 getAllImg(imgArr){ this.setState({ companyLogoUrl:imgArr }) }, componentWillMount() { this.loadInformation(); }, componentWillReceiveProps(nextProps) { }, render() { return ( <div className="unit-wrap"> <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form" style={{width:'80%'}}> <Spin spinning={this.state.loading}> <Row style={{ marginBottom: 20 }}> <Col offset={2} span={4}> <h4 style={{fontSize:20}}>企业资料</h4> </Col> </Row> <div className="clearfix" style={{ paddingLeft: '60px' }}> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>企业名称</span>} > <Input maxLength={128} value={this.state.identifyName} onChange={(e) => { this.setState({ identifyName: e.target.value }); }} placeholder="请输入企业名称" /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="企业规模" > <InputNumber placeholder="企业规模" value={this.state.enterpriseScale} InputNumber min={0} maxLength={16} style={{width:120,marginRight:10}} onChange={(e) => { this.setState({ enterpriseScale: e }); }} /> <span>人</span> </FormItem> </div> <div className="clearfix" style={{ paddingLeft: '60px' }}> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>行业</span>}> <Select placeholder="选择行业" value={this.state.industry} onChange={(e) => { this.setState({ industry: e }); }} > {industry.map(function(item) { return <Select.Option key={item.value}>{item.key}</Select.Option>; })} </Select> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>社会属性</span>} > <Select placeholder="客户社会属性" value={this.state.societyTag} onChange={(e) => { this.setState({ societyTag: e }); }} > {socialAttribute.map(function(item) { return <Select.Option key={item.value}>{item.key}</Select.Option>; })} </Select> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="通信地址" > <Input maxLength={255} placeholder="客户通信地址" value={this.state.postalAddress} onChange={(e) => { this.setState({ postalAddress: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="固定电话" > <Input maxLength={16} placeholder="客户固定电话" value={this.state.fixedTel} onChange={(e) => { this.setState({ fixedTel: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="注册资本" > <Input placeholder="注册资本单位为万元" value={this.state.registeredCapital} maxLength={6} onChange={(e) => { this.setState({ registeredCapital: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="法人名称" > <Input maxLength={16} placeholder="法人名称" value={this.state.legalPerson} onChange={(e) => { this.setState({ legalPerson: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="法人身份证号码" > <Input maxLength={32} placeholder="法人身份证号码" value={this.state.legalPersonIdCard} onChange={(e) => { this.setState({ legalPersonIdCard: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="法人电话" > <Input maxLength={16} placeholder="法人电话" value={this.state.legalPersonTel} onChange={(e) => { this.setState({ legalPersonTel: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="法人电子邮箱" > <Input maxLength={32} placeholder="法人电子邮箱" value={this.state.legalPersonEmail} onChange={(e) => { this.setState({ legalPersonEmail: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="机构代码" > <Input maxLength={32} placeholder="社会同意机构代码" value={this.state.orgCode} onChange={(e) => { this.setState({ orgCode: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>企业邮箱</span>} > <Input maxLength={32} placeholder="请填写企业邮箱" value={this.state.email} onChange={(e) => { this.setState({ email: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>企业QQ</span>} > <Input maxLength={16} placeholder="填写企业QQ" value={this.state.qq} onChange={(e) => { this.setState({ qq: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="高新"> <Radio.Group value={this.state.highTechZone} onChange={(e) => { this.setState({ highTechZone: e.target.value }); }} > <Radio value={0}>是</Radio> <Radio value={1}>否 </Radio> </Radio.Group> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="上市"> <Radio.Group value={this.state.listed} onChange={(e) => { this.setState({ listed: e.target.value }); }} > <Radio value={0}>是</Radio> <Radio value={1}>否 </Radio> </Radio.Group> </FormItem> <div className="clearfix pictures"> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{ marginTop: 15 }} label="机构证(PIC)" > <PicturesWall pictureSign="PIC" fileList={this.getOrgCodeUrl} pictureUrl={this.state.orgCodeUrl} /> <p>图片建议:图片要清晰。</p> </FormItem> <FormItem className="half-item" style={{paddingTop:15}} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>企业logo</span>} > <Crop getAllImg={this.getAllImg} number = {1} aspectRatio = {1/1} url ={globalConfig.context + '/api/user/uploadPicture64'} uploadData = {{sign:'user_picture'}} urlArr = {this.state.companyLogoUrl} /> <p>图片建议 : 图片要清晰。</p> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>业务范围</span>} > <Input type="textarea" rows={4} maxLength={400} value={this.state.businessScope} placeholder="请输入业务范围" onChange={(e) => { this.setState({ businessScope: e.target.value }); }} /> </FormItem> <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>企业简介</span>} > <Input type="textarea" rows={4} maxLength={512} value={this.state.introduction} placeholder="请输入企业简介" onChange={(e) => { this.setState({ introduction: e.target.value }); }} /> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 18 }} style={{ marginTop: 15 }} label={<span><span className="color-red"> * </span>荣誉资质</span>} > <PicturesWallMore pictureSign="PIC" fileList={this.getQualiUrl} pictureUrl={this.state.qualiUrl} /> <p>图片建议:图片要清晰。</p> </FormItem> </div> <Row style={{ marginBottom: 20 ,marginTop:10}}> <Col offset={2} span={4}> <Button size="large" className="set-submit" type="primary" onClick={this.subFun} > 保存 </Button> </Col> </Row> </div> </Spin> </Form> </div> ); } }); export default Unit;