import React from 'react'; import { Icon, Form, Button, Input, Spin, Table, message, Select, Modal, InputNumber } from 'antd'; import './annualReport.less'; import { annualReportStateList } from '../../dataDic.js'; import { beforeUploadFile, getAnnualReportState } from '../../tools.js'; import { getProvince } from '../../NewDicProvinceList' import moment from 'moment'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const AnnualReportDescFrom = Form.create()(React.createClass({ getInitialState() { return { loading: false, data: {}, contactsOption: [], contactsObj: {}, yearOption: [] }; }, loadData(theYear) { this.setState({ loading: true }) $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/cognizance/annualReportDetail", data: { year: theYear || this.props.data.year } }).done((data) => { let thisdata = data.data; if (!thisdata) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisdata = {}; } else { thisdata.location = getProvince(thisdata.locationProvince, thisdata.locationCity, thisdata.locationArea); }; this.setState({ data: thisdata }); }).always(function () { this.setState({ loading: false }) }.bind(this)); }, getContactsOption() { let theOption = [], theObj = {}; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/getContacts', success: function (data) { if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let item in data.data) { let theData = data.data[item]; theOption.push( <Select.Option value={item} key={theData}>{theData}</Select.Option> ); }; theObj = data.data || {}; }; this.setState({ contactsOption: theOption, contactsObj: theObj }); }.bind(this) }); }, componentWillMount() { let d = new Date(); let _me = this; d = d.getFullYear(); for (let i = d; i > d - 20; i--) { _me.state.yearOption.push( <Select.Option key={i.toString()} >{i}</Select.Option> ) }; this.getContactsOption(); if (this.props.data) { this.loadData(); }; }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { if (nextProps.data) { this.loadData(nextProps.data.year) }; }; }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { this.props.spinState(true); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/cognizance/disposeAnnualReport", data: { id: this.props.data.id, year: this.props.data.year, totalTax: values.totalTax, incomeTaxRelief: values.incomeTaxRelief, totalExportVolume: values.totalExportVolume, basicResearchCost: values.basicResearchCost, state: 0, } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.props.clickOk(); this.props.spinState(false); this.props.form.resetFields(); } else { message.warning(data.error[0].message); this.props.spinState(false); } }.bind(this)); } }); }, render() { const FormItem = Form.Item; const { getFieldDecorator } = this.props.form; const theData = this.state.data; const formItemLayout = { labelCol: { span: 0 }, wrapperCol: { span: 20 }, }; const _me = this; return ( <Form onSubmit={this.handleSubmit} id="annualReport-form"> <Spin spinning={this.state.loading} className='spin-box'> <div className="activityCost-title"> <span>年份: </span> <span>{this.props.data.year}</span> </div> <div className="clearfix" style={{ padding: '0 10px' }}> <div className="half-item" style={{ marginRight: "50%" }}> <p className="item-title">企业名称: </p> <p>{theData.unitName}</p> </div> <div className="half-item"> <p className="item-title">组织机构代码或统一社会信用代码: </p> <p>{theData.orgCode}</p> </div> <div className="half-item"> <p className="item-title">所属地区: </p> <p>{theData.location}</p> </div> <div className="half-item"> <p className="item-title">高新技术企业认定证书编号: </p> <p>{theData.certificateNumber}</p> </div> <div className="half-item"> <p className="item-title">高新技术企业认定时间: </p> <p>{theData.issuingDate}</p> </div> <div className="half-item"> <p className="item-title">企业是否上市: </p> <p>{theData.listed == 1 ? "是" : "否"}</p> </div> <div className="half-item"> <p className="item-title">上市时间: </p> <p>{theData.listedDate}</p> </div> <div className="half-item"> <p className="item-title">上市类型: </p> <p> {(() => { switch (theData.listedType) { case '0': return "股票型上市公司"; case '1': return "债券型上市公司"; default: return ""; } })()} </p> </div> <div className="half-item"> <p className="item-title">股票代码: </p> <p>{theData.stockCode}</p> </div> <div className="half-item"> <p className="item-title">企业联系人: </p> <p>{this.state.contactsObj[theData.contacts]}</p> </div> </div> <div className="activityCost-title"><span>本年度获得的知识产权数: </span></div> <div className="clearfix annualReport-box"> <div className="four-item"> <p className="item-title">发明专利数: </p> <p>{theData.inventionPatent}</p> </div> <div className="four-item"> <p className="item-title">国防专利数: </p> <p>{theData.defensePatent}</p> </div> <div className="four-item"> <p className="item-title">国家级农作物品种数: </p> <p>{theData.nationalCrop}</p> </div> <div className="four-item"> <p className="item-title">植物新品种数: </p> <p>{theData.newPlantCariety}</p> </div> <div className="four-item"> <p className="item-title">国家新药数: </p> <p>{theData.nationalDrug}</p> </div> <div className="four-item"> <p className="item-title">国家一级中药保护品种数: </p> <p>{theData.chineseMedicine}</p> </div> <div className="four-item"> <p className="item-title">实用新型专利数: </p> <p>{theData.utilityPatent}</p> </div> <div className="four-item"> <p className="item-title">集成电路布图设计专有权数: </p> <p>{theData.circuitDesign}</p> </div> <div className="four-item"> <p className="item-title">外观设计专利数: </p> <p>{theData.exteriorPatent}</p> </div> <div className="four-item"> <p className="item-title">软件著作权数: </p> <p>{theData.softwareWorks}</p> </div> </div> <div className="activityCost-title"><span>本年度人员情况(人): </span></div> <div className="clearfix annualReport-box"> <div className="four-item"> <p className="item-title">职工总人数: </p> <p>{theData.firmTotal}</p> </div> <div className="four-item"> <p className="item-title">科技人员数: </p> <p>{theData.techTotal}</p> </div> <div className="four-item"> <p className="item-title">新增就业人数: </p> <p>{theData.newEmployment}</p> </div> <div className="four-item"> <p className="item-title">高校应届毕业生人数: </p> <p>{theData.graduateNumber}</p> </div> </div> <div className="activityCost-title"><span>企业本年度财务状况(万元): </span></div> <div className="clearfix annualReport-box"> <div className="four-item"> <p className="item-title">企业总收入: </p> <p>{theData.totalRevenue}</p> </div> <div className="four-item"> <p className="item-title">销售收入: </p> <p>{theData.salesRevenue}</p> </div> <div className="four-item"> <p className="item-title">所有者权益(净资产)合计: </p> <p>{theData.netAsset}</p> </div> <div className="four-item"> <p className="item-title">高新技术产品(服务)收入: </p> <p> <span>{theData.lastYearRevenue} </span> {(() => { let s = (theData.lastYearRevenue / theData.totalRevenue * 100).toFixed(2); if (!isNaN(s)) { if (s < 50) { return <span style={{ color: '#ea0862' }}> 占比总收入的{s}%,小于60%</span> } else { return <span> 占比总收入的{s}%</span> }; } else { return <span> 占比总收入的0%</span> } })()} </p> </div> <div className="four-item"> <p className="item-title">利润总额: </p> <p>{theData.grossProfit}</p> </div> <div className="four-item"> <p className="item-title">研发费用总额: </p> <p> <span>{theData.researchCost} </span> {(() => { let s = (theData.researchCost / theData.salesRevenue * 100).toFixed(2); if (!isNaN(s)) { if (theData.salesRevenue < 5000) { if (s < 5) { return <span style={{ color: '#ea0862' }}> 占比总收入的{s}%,小于60%</span> } else { return <span> 占比总收入的{s}%</span> }; } else if (5000 < theData.salesRevenue < 20000) { if (s < 4) { return <span style={{ color: '#ea0862' }}> 占比总收入的{s}%,小于60%</span> } else { return <span> 占比总收入的{s}%</span> }; } else if (theData.salesRevenue >= 20000) { if (s < 3) { return <span style={{ color: '#ea0862' }}> 占比总收入的{s}%,小于60%</span> } else { return <span> 占比总收入的{s}%</span> }; } } else { return <span> 占比总收入的0%</span> } })()} </p> </div> <div className="four-item" style={{ marginRight: '25%' }}> <p className="item-title">其中:在中国境内研发费用: </p> <p>{theData.researchCost}</p> </div> <div className="four-item"> <p className="item-title">纳税总额: </p> <FormItem {...formItemLayout} > {getFieldDecorator('totalTax', { rules: [{ type: 'number', required: true, message: '此项为必填项!' }], initialValue: this.props.data.totalTax })( <InputNumber min={0} max={999999} step={0.01} /> )} <span>万元</span> </FormItem> </div> <div className="four-item"> <p className="item-title">高企所得税减免额: </p> <FormItem {...formItemLayout} > {getFieldDecorator('incomeTaxRelief', { rules: [{ type: 'number', required: true, message: '此项为必填项!' }], initialValue: this.props.data.incomeTaxRelief })( <InputNumber min={0} max={999999} step={0.01} /> )} <span>万元</span> </FormItem> </div> <div className="four-item"> <p className="item-title">出口创汇总额(人民币): </p> <FormItem {...formItemLayout} > {getFieldDecorator('totalExportVolume', { rules: [{ type: 'number', required: true, message: '此项为必填项!' }], initialValue: this.props.data.totalExportVolume })( <InputNumber min={0} max={999999} step={0.01} /> )} <span>万元</span> </FormItem> </div> <div className="four-item"> <p className="item-title">基础研究投入费用: </p> <FormItem {...formItemLayout} > {getFieldDecorator('basicResearchCost', { rules: [{ type: 'number', required: true, message: '此项为必填项!' }], initialValue: this.props.data.basicResearchCost })( <InputNumber min={0} max={999999} step={0.01} /> )} <span>万元</span> </FormItem> </div> </div> <FormItem style={{ marginTop: '20px' }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button> </FormItem> </Spin> </Form > ); }, })); const AnnualReportDesc = React.createClass({ getInitialState() { return { visible: false, loading: false }; }, componentWillReceiveProps(nextProps) { this.state.visible = nextProps.showDesc; }, showModal() { this.setState({ visible: true, }); }, handleOk() { this.setState({ visible: false, }); this.props.closeDesc(false, true); }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeDesc(false); }, render() { return ( <div className="patent-addNew"> <Modal maskClosable={false} title="企业年报详情" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width='1000px' footer='' > <AnnualReportDescFrom data={this.props.data} visible={this.state.visible} detailData={this.state.detailData} closeModal={this.handleCancel} clickOk={this.handleOk} /> </Modal> </div> ); }, }); const AnnualReportAdd = React.createClass({ getInitialState() { return { visible: false, loading: false, yearOption: [] }; }, componentWillReceiveProps(nextProps) { this.state.visible = nextProps.showAdd }, componentWillMount() { let d = new Date(); let _me = this; d = d.getFullYear(); for (let i = d; i > d - 20; i--) { _me.state.yearOption.push( <Select.Option key={i.toString()} >{i}</Select.Option> ) }; }, showModal() { this.setState({ visible: true, }); }, handleOk() { this.setState({ loading: true }); if (!this.state.year) { message.warning('请选择年份!'); this.setState({ loading: false }); return; }; $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/cognizance/disposeAnnualReport", data: { year: this.state.year, totalTax: this.state.totalTax, incomeTaxRelief: this.state.incomeTaxRelief, totalExportVolume: this.state.totalExportVolume, basicResearchCost: this.state.basicResearchCost, state: 0 } }).done(function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success('保存成功!'); this.setState({ visible: false }); this.props.closeAdd(false, true); } else { message.warning(data.error[0].message); } }.bind(this)); }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeAdd(false); }, spinChange(e) { this.setState({ loading: e }); }, render() { return ( <div className="cognizance-add"> <Modal maskClosable={false} title="年报申请" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width='800px' footer={[ <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}> 提交 </Button>, <Button key="back" onClick={this.handleCancel}> 返回 </Button>, ]} > <Spin spinning={this.state.loading} className='spin-box'> <div className="clearfix"> <div className="half-item"> <span>选择申请年份: </span> <Select placeholder="请选择年份" style={{ width: 200 }} onSelect={(e, n) => { this.state.year = e }}> {this.state.yearOption} </Select> </div> </div> <div className="clearfix"> <div className="half-item"> <span>纳税总额: </span> <InputNumber min={0} max={999999} step={0.01} onChange={(e) => { this.state.totalTax = e; }} /> <span> (万元)</span> </div> <div className="half-item"> <span>高企所得税减免额: </span> <InputNumber min={0} max={999999} step={0.01} onChange={(e) => { this.state.incomeTaxRelief = e; }} /> <span> (万元)</span> </div> <div className="half-item"> <span>出口创汇总额(人民币): </span> <InputNumber min={0} max={999999} step={0.01} onChange={(e) => { this.state.totalExportVolume = e; }} /> <span> (万元)</span> </div> <div className="half-item"> <span>基础研究投入费用: </span> <InputNumber min={0} max={999999} step={0.01} onChange={(e) => { this.state.basicResearchCost = e; }} /> <span> (万元)</span> </div> </div> </Spin> </Modal> </div> ); } }); const AnnualReport = React.createClass({ loadData(pageNo) { this.state.data = []; this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/cognizance/annualReport", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, } }).done((data) => { if (!data.data || !data.data.list) { if (data.error.length) { message.warning(data.error[0].message); this.state.ButtonDisabled = true; }; return; }; for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; this.state.data.push({ key: i, id: thisdata.id, uid: thisdata.uid, createTime: thisdata.createTime, lastUpdateTime: thisdata.lastUpdateTime, totalTax: thisdata.totalTax, incomeTaxRelief: thisdata.incomeTaxRelief, totalExportVolume: thisdata.totalExportVolume, year: thisdata.year, state: thisdata.state, createTimeFormattedDate: thisdata.createTimeFormattedDate, lastUpdateTimeFormattedDate: thisdata.lastUpdateTimeFormattedDate, basicResearchCost: thisdata.basicResearchCost }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; this.setState({ dataSource: this.state.data, pagination: this.state.pagination }); }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { selectedRowKeys: [], selectedRows: [], RowData: {}, loading: false, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, columns: [ { title: '年份', dataIndex: 'year', key: 'year' }, { title: '创建时间', dataIndex: 'createTimeFormattedDate', key: 'createTimeFormattedDate' }, { title: '最近更新时间', dataIndex: 'lastUpdateTimeFormattedDate', key: 'lastUpdateTimeFormattedDate' }, { title: '年报状态', dataIndex: 'state', key: 'state', render: (text) => { return getAnnualReportState(text) } } ], dataSource: [] }; }, componentWillMount() { this.loadData(); }, tableRowClick(record, index) { this.state.RowData = record; this.setState({ showDesc: true }); }, // delectRow() { // let deletedIds = []; // for (let idx = 0; idx < this.state.selectedRows.length; idx++) { // let rowItem = this.state.selectedRows[idx]; // if (rowItem.id) { // deletedIds.push(rowItem.id) // } // } // this.setState({ // selectedRowKeys: [], // loading: deletedIds.length > 0 // }); // $.ajax({ // method: "POST", // dataType: "json", // crossDomain: false, // url: globalConfig.context + "/api/user/cognizance/deleteAnnualReport", // data: { // ids: deletedIds // } // }).done(function (data) { // if (!data.error.length) { // message.success('保存成功!'); // this.setState({ // loading: false, // }); // } else { // message.warning(data.error[0].message); // }; // this.loadData(); // }.bind(this)); // }, closeDesc(e, s) { this.state.showDesc = e; if (s) { this.loadData(); }; }, addClick() { this.setState({ showAdd: true }); }, closeAdd(e, s) { this.state.showAdd = e; if (s) { this.loadData(); }; }, // search() { // this.loadData(); // }, // reset() { // this.loadData(); // }, render() { const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows, selectedRowKeys: selectedRowKeys }); } }; const hasSelected = this.state.selectedRowKeys.length > 0; return ( <div className="user-content" > <div className="content-title"> <span>企业年报</span> </div> <div className="user-search"> <p> <Button style={{ background: "#ea0862", border: "none", color: "#fff" }} disabled={this.state.ButtonDisabled} onClick={this.addClick}>添加<Icon type="plus" /></Button> <Button style={{ background: "#3fcf9e", border: "none", color: "#fff", display: 'none' }} disabled={!hasSelected} onClick={this.delectRow}>删除<Icon type="minus" /></Button> </p> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} dataSource={this.state.dataSource} pagination={this.state.pagination} //rowSelection={rowSelection} onRowClick={this.tableRowClick} /> </Spin> </div> <AnnualReportDesc data={this.state.RowData} showDesc={this.state.showDesc} closeDesc={this.closeDesc} /> <AnnualReportAdd showAdd={this.state.showAdd} closeAdd={this.closeAdd} /> </div > ); } }); export default AnnualReport;