import React from 'react'; import { Icon, Form, Button, Input, message, InputNumber, DatePicker, Select, Checkbox, Cascader, Table, Radio } from 'antd'; import './techProduct.less'; import { getProvince, areaSelect } from '../../NewDicProvinceList'; import { industryList, scaleList, companyType } from '../../dataDic'; import { techFieldList } from '../../DicTechFieldList'; import moment from 'moment'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const CompanyDetail = Form.create()(React.createClass({ loadInfoData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/basic/info", }).done(function (data) { let thisdata = data.data; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; return; }; this.setState({ data: thisdata, id: thisdata.id, uid: thisdata.uid, hid: thisdata.hid, unitName: thisdata.unitName, postalAddress: thisdata.postalAddress, postcode: thisdata.postcode, firstMobile: thisdata.firstMobile, firstContacts: thisdata.firstContacts, contactsFixedTel: thisdata.contactsFixedTel, contactsFax: thisdata.contactsFax, legalPersonTel: thisdata.legalPersonTel, legalPersonFax: thisdata.legalPersonFax, legalPersonEmail: thisdata.legalPersonEmail, registeredCapital: thisdata.registeredCapital, registrationTime: thisdata.registrationTime, legalPerson: thisdata.legalPerson, legalPersonIdCard: thisdata.legalPersonIdCard, orgCode: thisdata.orgCode, ratepayCode: thisdata.ratepayCode, industry: thisdata.industry, enterpriseScale: thisdata.enterpriseScale, foreignInvestment: thisdata.foreignInvestment, taxAuthority: thisdata.taxAuthority, ratepayMethod: thisdata.ratepayMethod, listed: thisdata.listed, listedDate: thisdata.listedDate, listedType: thisdata.listedType, stockCode: thisdata.stockCode, highTechZone: thisdata.highTechZone, highTechName: thisdata.highTechName, riskInvestment: thisdata.riskInvestment, businessScope: thisdata.businessScope, firmTotal: thisdata.firmTotal, techTotal: thisdata.techTotal, listedDateFormattedDate: thisdata.listedDateFormattedDate, registrationTimeFormattedDate: thisdata.registrationTimeFormattedDate, address: [thisdata.licenceProvince, thisdata.licenceCity, thisdata.licenceArea], field: thisdata.field ? thisdata.field.split(',') : [], registerType: thisdata.registerType ? thisdata.registerType.split(',') : [] }); }.bind(this)).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadHumanData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/basic/listNature", }).done(function (data) { let theTableData = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; return; }; data.data.map(function (item) { theTableData.push({ id: item.id, uid: item.uid, type: item.type, name: item.name, idNumber: item.idNumber, investment: item.investment }); }); this.setState({ humanTableData: theTableData }); }.bind(this)).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadLegalData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/basic/listLegalPerson", }).done(function (data) { let theTableData = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; return; }; data.data.map(function (item) { theTableData.push({ id: item.id, uid: item.uid, type: item.type, name: item.name, orgCode: item.orgCode, investment: item.investment }); }); this.setState({ legalTableData: theTableData }); }.bind(this)).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { loading: false, industryOption: [], scaleOption: [], humanTableData: [], legalTableData: [], humanColumns: [ { title: '公民类型', dataIndex: 'type', key: 'type', width: '130px', render: (text, record, index) => { return <Select value={record.type} onChange={(e) => { record.type = e; this.setState({ humanTableData: this.state.humanTableData }); }}> <Select.Option value="0">中国公民</Select.Option> <Select.Option value="1">外籍公民</Select.Option> </Select> } }, { title: '姓名', dataIndex: 'name', key: 'name', render: (text, record, index) => { return <Input value={record.name} onChange={(e) => { record.name = e.target.value; this.setState({ humanTableData: this.state.humanTableData }); }} /> } }, { title: '身份证(护照)号', dataIndex: 'idNumber', key: 'idNumber', render: (text, record, index) => { return <Input value={record.idNumber} onChange={(e) => { record.idNumber = e.target.value; this.setState({ humanTableData: this.state.humanTableData }); }} /> } }, { title: '投资额(万元)', dataIndex: 'investment', key: 'investment', render: (text, record, index) => { return <InputNumber min={0} max={999999} step={0.01} value={record.investment} onChange={(e) => { record.investment = e; this.setState({ humanTableData: this.state.humanTableData }); }} /> } } ], legalColumns: [ { title: '法人类型', dataIndex: 'type', key: 'type', width: '130px', render: (text, record, index) => { return <Select value={record.type} onChange={(e) => { record.type = e; this.setState({ legalTableData: this.state.legalTableData }); }}> <Select.Option value="0">中国企业法人</Select.Option> <Select.Option value="1">外籍企业法人</Select.Option> </Select> } }, { title: '名称', dataIndex: 'name', key: 'name', render: (text, record, index) => { return <Input value={record.name} onChange={(e) => { record.name = e.target.value; this.setState({ legalTableData: this.state.legalTableData }); }} /> } }, { title: '组织机构代码或统一社会信用代码', dataIndex: 'orgCode', key: 'orgCode', render: (text, record, index) => { return <Input value={record.orgCode} onChange={(e) => { record.orgCode = e.target.value; this.setState({ legalTableData: this.state.legalTableData }); }} /> } }, { title: '投资额(万元)', dataIndex: 'investment', key: 'investment', render: (text, record, index) => { return <InputNumber min={0} max={999999} step={0.01} value={record.investment} onChange={(e) => { record.investment = e; this.setState({ legalTableData: this.state.legalTableData }); }} /> } } ], humanSelectedRowKeys: [], humanSelectedRows: [], legalSelectedRowKeys: [], legalSelectedRows: [] }; }, handleSubmit(e) { this.setState({ loading: true }); e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/basic/disposeInfo", data: { id: this.state.data.id, uid: this.state.data.uid, hid: this.state.data.hid, unitName: values.unitName, licenceProvince: values.address[0], licenceCity: values.address[1], licenceArea: values.address[2], postalAddress: values.postalAddress, postcode: values.postcode, firstMobile: values.firstMobile, firstContacts: values.firstContacts, contactsFixedTel: values.contactsFixedTel, contactsFax: values.contactsFax, legalPersonTel: values.legalPersonTel, legalPersonFax: values.legalPersonFax, legalPersonEmail: values.legalPersonEmail, registeredCapital: values.registeredCapital, legalPerson: values.legalPerson, legalPersonIdCard: values.legalPersonIdCard, orgCode: values.orgCode, ratepayCode: values.ratepayCode, industry: values.industry, enterpriseScale: values.enterpriseScale, registerType: values.registerType ? values.registerType.join(',') : '', foreignInvestment: values.foreignInvestment, field: values.field ? values.field.join(',') : '', taxAuthority: values.taxAuthority, ratepayMethod: values.ratepayMethod, listed: values.listed, listedType: values.listedType ? Number(values.listedType) : null, stockCode: values.stockCode, highTechZone: values.highTechZone, highTechName: values.highTechName, riskInvestment: values.riskInvestment, businessScope: values.businessScope, firmTotal: values.firmTotal, techTotal: values.techTotal, listedDateFormattedDate: values.listedDate ? values.listedDate.format("YYYY-MM-DD") : '', registrationTimeFormattedDate: values.registrationTime ? values.registrationTime.format("YYYY-MM-DD") : '' } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.setState({ loading: false }); } else { message.warning(data.error[0].message); } }.bind(this)); } }); }, componentWillMount() { let _me = this; industryList.map(function (item) { _me.state.industryOption.push( <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option> ) }); scaleList.map(function (item) { _me.state.scaleOption.push( <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option> ) }); this.loadHumanData(); this.loadLegalData(); this.loadInfoData(); }, humanRemove() { let deletedIds = []; for (let idx = 0; idx < this.state.humanSelectedRows.length; idx++) { let rowItem = this.state.humanSelectedRows[idx]; if (rowItem.id) { deletedIds.push(rowItem.id) } }; this.setState({ loading: deletedIds.length > 0 }); if (deletedIds.length) { $.ajax({ url: globalConfig.context + '/api/user/basic/deleteNature', method: 'post', data: { ids: deletedIds } }).done((res) => { if (!res.error.length) { message.success("删除成功"); this.state.humanSelectedRowKeys.sort((a, b) => { return b - a }); for (let idx = 0; idx < this.state.humanSelectedRowKeys.length; idx++) { let dataIndex = this.state.humanSelectedRowKeys[idx]; this.state.humanTableData.splice(dataIndex, 1); }; this.setState({ humanTableData: this.state.humanTableData, humanSelectedRowKeys: [] }); } else { message.error(res.error[0].message); } }).always(() => { this.setState({ loading: false }); }) } }, humanAdd() { this.state.humanTableData.push({ id: null, type: null, uid: this.state.uid, name: '', idNumber: '', investment: 0 }); this.setState({ humanTableData: this.state.humanTableData }) }, humanSave() { this.setState({ loading: true }); $.ajax({ url: globalConfig.context + '/api/user/basic/nature', method: 'post', data: { data: JSON.stringify(this.state.humanTableData) } }).done((res) => { if (!res.error.length) { message.success("保存成功"); } else { message.error(res.error[0].message); } }).always(() => { this.setState({ loading: false }); }) }, legalRemove() { let deletedIds = []; for (let idx = 0; idx < this.state.legalSelectedRows.length; idx++) { let rowItem = this.state.legalSelectedRows[idx]; if (rowItem.id) { deletedIds.push(rowItem.id) } }; this.setState({ loading: deletedIds.length > 0 }); if (deletedIds.length) { $.ajax({ url: globalConfig.context + '/api/user/basic/deleteLegalPerson', method: 'post', data: { ids: deletedIds } }).done((res) => { if (!res.error.length) { message.success("删除成功"); this.state.legalSelectedRowKeys.sort((a, b) => { return b - a }); for (let idx = 0; idx < this.state.legalSelectedRowKeys.length; idx++) { let dataIndex = this.state.legalSelectedRowKeys[idx]; this.state.legalTableData.splice(dataIndex, 1); }; this.setState({ legalTableData: this.state.legalTableData, legalSelectedRowKeys: [] }); } else { message.error(res.error[0].message); } }).always(() => { this.setState({ loading: false }); }) } }, legalAdd() { this.state.legalTableData.push({ id: null, type: null, uid: this.state.uid, name: '', idNumber: '', investment: 0 }); this.setState({ legalTableData: this.state.legalTableData }) }, legalSave() { this.setState({ loading: true }); $.ajax({ url: globalConfig.context + '/api/user/basic/legalPerson', method: 'post', data: { data: JSON.stringify(this.state.legalTableData) } }).done((res) => { if (!res.error.length) { message.success("保存成功"); } else { message.error(res.error[0].message); } }).always(() => { this.setState({ loading: false }); }) }, render() { const FormItem = Form.Item; const { getFieldDecorator } = this.props.form; const theData = this.state; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 }, }; const humanRowSelection = { type: 'checkbox', selectedRowKeys: this.state.humanSelectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ humanSelectedRows: selectedRows, humanSelectedRowKeys: selectedRowKeys }); } }; const humanHasSelected = this.state.humanSelectedRowKeys.length > 0; const legalRowSelection = { type: 'checkbox', selectedRowKeys: this.state.legalSelectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ legalSelectedRows: selectedRows, legalSelectedRowKeys: selectedRowKeys }); } }; const legalHasSelected = this.state.legalSelectedRowKeys.length > 0; if (this.state.data) { return ( <Form onSubmit={this.handleSubmit} className="company-detail-form"> <div className="content-title"> <span>企业基本信息</span> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="企业名称" > {getFieldDecorator('unitName', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.unitName })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="行政区域" > {getFieldDecorator('address', { rules: [{ type: 'array', required: true, message: '此项为必填项!' }], initialValue: theData.address })( <Cascader options={areaSelect()} /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="通信地址" > {getFieldDecorator('postalAddress', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.postalAddress })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="邮编" > {getFieldDecorator('postcode', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.postcode })( <Input /> )} </FormItem> </div> <div className="clearfix"> <p className="content-title">联系人信息</p> <FormItem className="half-item" {...formItemLayout} label="姓名" > {getFieldDecorator('contacts', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.firstContacts })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="手机" > {getFieldDecorator('contactMobile', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.firstMobile })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="电话" > {getFieldDecorator('contactsFixedTel', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.contactsFixedTel })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="传真" > {getFieldDecorator('contactsFax', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.contactsFax })( <Input /> )} </FormItem> </div> <div className="clearfix"> <p className="content-title">企业法人信息</p> <FormItem className="half-item" {...formItemLayout} label="电话" > {getFieldDecorator('legalPersonTel', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.legalPersonTel })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="传真" > {getFieldDecorator('legalPersonFax', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.legalPersonFax })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="E-mail" > {getFieldDecorator('legalPersonEmail', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.legalPersonEmail })( <Input /> )} </FormItem> </div> <div className="content-title"> <span>企业重要信息</span> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="注册资金" > {getFieldDecorator('registeredCapital', { rules: [{ type: 'number', required: true, message: '此项为必填项!' }], initialValue: theData.registeredCapital })( <InputNumber min={0} max={999999} step={0.01} /> )} <span>万元</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="注册时间" > {getFieldDecorator('registrationTime', { rules: [{ type: 'object', required: true, message: '此项为必填项!' }], initialValue: theData.registrationTime ? moment(theData.registrationTime) : null })( <DatePicker /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="法人代表姓名" > {getFieldDecorator('legalPerson', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.legalPerson })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="身份证号" > {getFieldDecorator('legalPersonIdCard', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.legalPersonIdCard })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="组织机构代码/统一社会信用代码" > {getFieldDecorator('orgCode', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.orgCode })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="税务登记号/统一社会信用代码" > {getFieldDecorator('ratepayCode', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.ratepayCode })( <Input /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="所属行业" > {getFieldDecorator('industry', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.industry })( <Select>{this.state.industryOption}</Select> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="企业规模(注册资金)" > {getFieldDecorator('enterpriseScale', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.enterpriseScale })( <Select>{this.state.scaleOption}</Select> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="注册类型" > {getFieldDecorator('registerType', { rules: [{ type: 'array', required: true, message: '此项为必填项!' }], initialValue: theData.registerType })( <Cascader options={companyType} /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="外资来源地" > {getFieldDecorator('foreignInvestment', { //rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.foreignInvestment })( <Input /> )} </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="领域" > {getFieldDecorator('field', { rules: [{ type: 'array', required: true, message: '此项为必填项!' }], initialValue: theData.field })( <Cascader options={techFieldList} /> )} </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="企业所得税主管税务机关" > {getFieldDecorator('taxAuthority', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.taxAuthority })( <Radio.Group> <Radio value="0">国税</Radio> <Radio value="1">地税</Radio> </Radio.Group> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="企业所得税征收方式" > {getFieldDecorator('ratepayMethod', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.ratepayMethod })( <Radio.Group> <Radio value="0">查账征收</Radio> <Radio value="1">核定征收</Radio> </Radio.Group> )} </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="是否上市" > {getFieldDecorator('listed', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.listed })( <Radio.Group> <Radio value="0">否</Radio> <Radio value="1">是</Radio> </Radio.Group> )} </FormItem> </div> <div className="clearfix" style={{ display: this.props.form.getFieldValue('listed') == 1 ? 'block' : 'none' }}> <FormItem className="half-item" {...formItemLayout} label="上市时间" > {getFieldDecorator('listedDate', { initialValue: theData.listedDate ? moment(theData.listedDate) : null })( <DatePicker /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="上市类型" > {getFieldDecorator('listedType', { initialValue: theData.listedType })( <Select placeholder="请选择上市类型"> <Select.Option value='0'>股票型上市公司</Select.Option> <Select.Option value='1'>债券型上市公司</Select.Option> </Select> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="股票代码" > {getFieldDecorator('stockCode', { initialValue: theData.stockCode })( <Input /> )} </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="是否属于国家级高新区内企业" > {getFieldDecorator('highTechZone', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.highTechZone })( <Radio.Group> <Radio value="0">否</Radio> <Radio value="1">是</Radio> </Radio.Group> )} </FormItem> </div> <div className="clearfix" style={{ display: this.props.form.getFieldValue('highTechZone') == 1 ? 'block' : 'none' }}> <FormItem className="half-item" {...formItemLayout} label="国家级高新区名称" > {getFieldDecorator('highTechName', { initialValue: theData.highTechName })( <Input /> )} </FormItem> </div> <div className="content-title"> <span>股权结构</span> </div> <div className="clearfix"> <div className="half-item"> <div className="table-title"> <span>自然人股权</span> <Button style={{ background: "#ea0862", border: "none", color: "#fff" }} onClick={this.humanAdd}>添加<Icon type="plus" /></Button> <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }} disabled={!humanHasSelected} onClick={this.humanRemove}>删除<Icon type="minus" /></Button> <Button type="primary" onClick={this.humanSave}>保存修改</Button> </div> <Table className="company-table" style={{ padding: '10px 20px' }} columns={this.state.humanColumns} dataSource={this.state.humanTableData} pagination={false} rowSelection={humanRowSelection} /> </div> <div className="half-item"> <div className="table-title"> <span>法人股权</span> <Button style={{ background: "#ea0862", border: "none", color: "#fff" }} onClick={this.legalAdd}>添加<Icon type="plus" /></Button> <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }} disabled={!legalHasSelected} onClick={this.legalRemove}>删除<Icon type="minus" /></Button> <Button type="primary" onClick={this.legalSave}>保存修改</Button> </div> <Table className="company-table" style={{ padding: '10px 20px' }} columns={this.state.legalColumns} dataSource={this.state.legalTableData} pagination={false} rowSelection={legalRowSelection} /> </div> </div> <FormItem style={{ width: '50%' }} {...formItemLayout} label="是否引入风险投资" > {getFieldDecorator('riskInvestment', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.riskInvestment })( <Radio.Group> <Radio value="0">否</Radio> <Radio value="1">是</Radio> </Radio.Group> )} </FormItem> <FormItem style={{ width: '50%' }} {...formItemLayout} label="经营范围(限400字)" > {getFieldDecorator('businessScope', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.businessScope })( <Input type='textarea' rows={6} /> )} </FormItem> <div className="content-title"> <span>员工情况</span> </div> <div className="clearfix"> <FormItem className="half-item" style={{ width: '25%' }} {...formItemLayout} label="企业职工" > {getFieldDecorator('firmTotal', { initialValue: theData.firmTotal || 0 })( <InputNumber min={0} max={999999} step={1} /> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="科技人员" > {getFieldDecorator('techTotal', { initialValue: theData.techTotal || 0 })( <InputNumber min={0} max={999999} step={1} /> )} <span>其中科技人员占比 {(() => { if (!this.props.form.getFieldValue('techTotal') || !this.props.form.getFieldValue('firmTotal')) { return 0 } return (this.props.form.getFieldValue('techTotal') / this.props.form.getFieldValue('firmTotal') * 100).toFixed(2) })()} %</span> </FormItem> </div> <FormItem style={{ marginTop: '20px' }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> </FormItem> </Form > ); } else { return (<div></div>) }; } })); export default CompanyDetail;