import React from 'react'; import { Icon, InputNumber, Form, Button, Input, Radio, Select, Spin, Table, DatePicker, message, Cascader, Modal } from 'antd'; import { techFieldList, provinceArr, cognizanceStateList } from '../../../dataDic.js'; import { getTime, getCognizanceState, companySearch } from '../../../tools.js'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import './highTechFoster.less'; const CognizanceDescFrom = Form.create()(React.createClass({ loadData(uid, cid, year) { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/cognizanceDetail", data: { cid: cid || this.props.data.cid, uid: uid || this.props.data.uid, year: year || this.props.data.year }, success: function (data) { if (data.error.length || !data.data) { message.warning(data.error[0].message); return; }; this.state.data = data.data; this.state.cid = this.props.data.cid; this.state.moneyTable = [{ key: 1, year: '第一年', netAsset: data.data.netAsset1, salesRevenue: data.data.salesRevenue1, grossProfit: data.data.grossProfit1 }, { key: 2, year: '第二年', netAsset: data.data.netAsset2, salesRevenue: data.data.salesRevenue2, grossProfit: data.data.grossProfit2 }, { key: 3, year: '第三年', netAsset: data.data.netAsset3, salesRevenue: data.data.salesRevenue3, grossProfit: data.data.grossProfit3 }]; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getStateData(cid) { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/cognizanceLog", data: { cid: cid || this.props.data.cid }, success: function (data) { if (data.error.length || !data.data) { message.warning(data.error[0].message); return; }; this.state.stateTable = []; for (let i = 0; i < data.data.length; i++) { this.state.stateTable.push({ key: i, recordTimeFormattedDate: data.data[i].recordTimeFormattedDate, state: data.data[i].state, principal: data.data[i].principal, operator: data.data[i].operator, comment: data.data[i].comment }); }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getContactsList(uid) { $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/getContacts", data: { uid: uid || this.props.data.uid }, success: function (data) { let theOption = []; if (data.error.length || !data.data) { return; }; for (let item in data.data) { let theData = data.data[item]; theOption.push( <Select.Option value={item} key={theData}>{theData}</Select.Option> ); }; this.setState({ contactsOption: theOption }); }.bind(this), }); }, getInitialState() { return { loading: false, stateOption: [], moneyColumns: [{ title: '', dataIndex: 'year', key: 'year', }, { title: '净资产', dataIndex: 'netAsset', key: 'netAsset', }, { title: '销售收入', dataIndex: 'salesRevenue', key: 'salesRevenue', }, { title: '利润总和', dataIndex: 'grossProfit', key: 'grossProfit', }], stateColumns: [{ title: '认证状态', dataIndex: 'state', key: 'state', render: (text) => { return getCognizanceState(text) } }, { title: '处理时间', dataIndex: 'recordTimeFormattedDate', key: 'recordTimeFormattedDate', }, { title: '负责人', dataIndex: 'principal', key: 'principal', }, { title: '操作人', dataIndex: 'operator', key: 'operator', }, { title: '备注', dataIndex: 'comment', key: 'comment', }] }; }, componentWillMount() { let _me = this; cognizanceStateList.map(function (item) { _me.state.stateOption.push( <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option> ) }); this.loadData(); this.getStateData(); this.getContactsList(); }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { if (values.state || values.principal || values.recordTime || values.comment) { if (!values.state && !values.principal && !values.recordTime) { message.warning("请填写完整的状态流转信息!"); return; }; }; if (!err) { this.props.spinState(true); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/disposeCognizanceDetail", data: { id: this.props.data.cid, uid: this.props.data.uid, technicalField1: values.technicalField[0], technicalField2: values.technicalField[1], technicalField3: values.technicalField[2], basicResearchCost: values.basicResearchCost, contacts: values.contacts, accident: values.accident, certificateNumber: values.certificateNumber, recordTimeFormattedDate: values.recordTime ? values.recordTime.format("YYYY-MM-DD") : undefined, state: values.state, principal: values.principal, comment: values.comment, } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.props.clickOk(); this.props.form.resetFields(); this.state.targetKeys = []; this.state.selectedKeys = []; this.props.spinState(false); } else { message.warning(data.error[0].message); this.props.spinState(false); } }.bind(this)); } }); }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { this.getStateData(nextProps.data.cid); this.loadData(nextProps.data.uid, nextProps.data.cid, nextProps.data.year); this.getContactsList(nextProps.data.uid); }; }, render() { const FormItem = Form.Item; const { getFieldDecorator } = this.props.form; const theData = this.state.data; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 }, }; const _me = this; if (this.state.data) { return ( <Form onSubmit={this.handleSubmit} id="highTechApply-form"> <div className="clearfix"> <div className="half-item"> <span className="item-title">公司名称: </span> <span>{theData.unitName}</span> </div> <div className="half-item"> <span className="item-title">公司组织机构代码: </span> <span>{theData.orgCode}</span> </div> <div className="half-item"> <span className="item-title">公司地址: </span> <span>{theData.postalAddress}</span> </div> <FormItem className="half-item" labelCol={{ span: 3 }} wrapperCol={{ span: 14 }} > <span className="item-title">联系人: </span> {getFieldDecorator('contacts', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.contacts })( <Select style={{ display: 'inline-block', width: '200px' }} placeholder='选择一个联系人'> {this.state.contactsOption} </Select> )} </FormItem> <FormItem className="half-item" labelCol={{ span: 3 }} wrapperCol={{ span: 14 }} > <span className="item-title">证书编号: </span> {getFieldDecorator('certificateNumber', { initialValue: this.props.data.certificateNumber })( <Input style={{ width: '200px' }} placeholder='高企证书编号' /> )} </FormItem> </div> <FormItem style={{ width: '50%' }} labelCol={{ span: 0 }} wrapperCol={{ span: 24 }} label="技术领域" > <span className="item-title">技术领域: </span> {getFieldDecorator('technicalField', { rules: [{ type: 'array', required: true, message: '此项为必填项!' }], initialValue: [Number(theData.technicalField1), Number(theData.technicalField2), Number(theData.technicalField3)] })( <Cascader options={techFieldList} placeholder="请选择技术领域" /> )} </FormItem> <div className="clearfix"> <div> <span className="form-title">获得知识产权数量(件): </span> </div> <div className="half-item"> <span className="item-title">一类: </span> <span>{theData.firstCatagory}</span> </div> <div className="half-item"> <span className="item-title">二类: </span> <span>{theData.secondCatagory}</span> </div> </div> <div className="clearfix"> <div> <span className="form-title">人力资源状况(人): </span> </div> <div className="half-item"> <span className="item-title">职工总数: </span> <span>{theData.firmTotal}</span> </div> <div className="half-item"> <span className="item-title">科技人员数: </span> <span>{theData.techTotal}</span> </div> </div> <div className="form-title">近三年经营状况(万元): </div> <Table pagination={false} dataSource={this.state.moneyTable} columns={this.state.moneyColumns} /> <div className="clearfix"> <div><span className="form-title">近三年研究开发费用总额(万元): </span></div> <div className="third-item"> <div className="item-title">近三年研究开发费用总额</div> <p>{theData.researchCost}</p> </div> <div className="third-item"> <div className="item-title">其中: 在中国境内研发费用总和</div> <p>{theData.territory}</p> </div> <div className="third-item"> <div className="item-title">其中: 基础研究投入费用总额</div> <div> <FormItem labelCol={{ span: 0 }} wrapperCol={{ span: 24 }} > {getFieldDecorator('basicResearchCost', { rules: [{ type: 'number', required: true, message: '此项为必填项!' }], initialValue: theData.basicResearchCost })( <InputNumber /> )} </FormItem> </div> </div> </div> <div> <span className="item-title">近一年企业总收入(万元): </span> <span>{theData.totalRevenue}</span> </div> <div> <span className="item-title">近一年高新技术产品收入(万元): </span> <span>{theData.lastYearRevenue}</span> </div> <div className="item-title">申请认定前一年内是否发生过重大安全、重大质量或严重环境违法行为</div> <FormItem labelCol={{ span: 0 }} wrapperCol={{ span: 24 }} > {getFieldDecorator('accident', { rules: [{ type: 'number', required: true, message: '此项为必填项!' }], initialValue: theData.accident })( <Radio.Group> <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> )} </FormItem> <div className="form-title">状态流转记录: </div> <Table pagination={false} dataSource={this.state.stateTable} columns={this.state.stateColumns} /> <div className="clearfix"> <FormItem className="third-item" {...formItemLayout} label="状态流转" > {getFieldDecorator('state')( <Select placeholder="选择一个状态">{this.state.stateOption}</Select> )} </FormItem> <FormItem className="third-item" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} label="处理时间" > {getFieldDecorator('recordTime')( <DatePicker /> )} </FormItem> <FormItem className="third-item" {...formItemLayout} label="负责人" > {getFieldDecorator('principal')( <Select placeholder="选择负责人">{this.props.authorOption}</Select> )} </FormItem> </div> <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 12 }} label="备注" > {getFieldDecorator('comment')( <Input /> )} </FormItem> <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> </Form > ); } else { return (<div></div>) }; }, })); const CognizanceDesc = 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); }, spinChange(e) { this.setState({ loading: e }); }, render() { return ( <div className="patent-addNew"> <Spin spinning={this.state.loading} className='spin-box'> <Modal title="高企管理" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width='1000px' footer='' > <CognizanceDescFrom visible={this.state.visible} contactsOption={this.props.contactsOption} authorOption={this.props.authorOption} data={this.props.data} spinState={this.spinChange} closeModal={this.handleCancel} clickOk={this.handleOk} /> </Modal> </Spin> </div> ); } }); const CognizanceAdd = React.createClass({ getInitialState() { return { visible: false, loading: false, yearOption: [] }; }, getContactsList(theUid) { $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/getContacts", data: { uid: theUid }, success: function (data) { let theOption = []; if (data.error.length || !data.data) { return; }; for (let item in data.data) { let theData = data.data[item]; theOption.push( <Select.Option value={item} key={theData}>{theData}</Select.Option> ); }; this.setState({ contactsOption: theOption }); }.bind(this), }); }, componentWillReceiveProps(nextProps) { if (!this.props.showAdd && nextProps.showAdd) { this.state.year = undefined; this.state.contacts = undefined; this.state.comment = undefined; this.state.consultant = undefined; this.state.uid = undefined; }; this.state.visible = nextProps.showAdd; }, componentWillMount() { let d = new Date(); let _me = this; d = d.getFullYear() - 1; this.state.thisYear = d; for (let i = d; i < d + 20; i++) { _me.state.yearOption.push( <Select.Option value={i.toString()} key={i}>{i}</Select.Option> ) }; }, showModal() { this.setState({ visible: true, }); }, handleOk() { this.setState({ loading: true }); if (!this.state.year) { message.warning('请选择年份!'); this.setState({ loading: false }); return; }; if (!this.state.contacts) { message.warning('请选择一个联系人!'); this.setState({ loading: false }); return; }; $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/applyCognizance", data: { year: this.state.year, contacts: this.state.contacts, comment: this.state.comment, consultant: this.state.consultant, uid: this.state.uid, state: this.state.year == this.state.thisYear ? 0 : 7 } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.setState({ visible: false, loading: false }); this.props.closeAdd(false, true); } else { message.warning(data.error[0].message); this.setState({ loading: false }); } }.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 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>, ]} > <div className="clearfix" style={{ marginBottom: '10px' }}> <div className="half-item"> <span>选择公司: </span> <Select placeholder="请选择公司" style={{ width: 200 }} showSearch filterOption={companySearch} value={this.state.uid} onSelect={(e, n) => { this.setState({ uid: e }); this.getContactsList(e); }}> {this.props.companyOption} </Select> </div> <div className="half-item"> <span>选择咨询师: </span> <Select placeholder="请选择咨询师" style={{ width: 200 }} value={this.state.consultant} onSelect={(e, n) => { this.setState({ consultant: e }); }}> {this.props.authorOption} </Select> </div> </div> <div className="clearfix"> <div className="half-item"> <span>选择申请年份: </span> <Select placeholder="请选择年份" style={{ width: 200 }} value={this.state.year} onSelect={(e, n) => { this.setState({ year: e }); }}> {this.state.yearOption} </Select> </div> <div className="half-item"> <span>选择联系人: </span> <Select placeholder="请选择联系人" style={{ width: 200 }} value={this.state.contacts} onSelect={(e, n) => { this.setState({ contacts: e }); }}> {this.state.contactsOption} </Select> </div> </div> <div> <div> <Input type="textarea" rows={6} value={this.state.comment} onChange={(e) => { this.setState({ comment: e.target.value }); }} /> </div> </div> </Modal> </div> ); } }); const Cognizance = React.createClass({ loadData(pageNo) { this.state.data = []; this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/listCognizance", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, locationProvince: this.state.province, uid: this.state.unitName, }, success: function (data) { if (data.error.length || !data.data || !data.data.list) { message.warning(data.error[0].message); return; } for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; this.state.data.push({ key: i, uid: thisdata.uid, cid: thisdata.cid, year: thisdata.year, serialNumber: thisdata.serialNumber, locationProvince: thisdata.locationProvince, unitName: thisdata.unitName, contacts: [thisdata.contacts, { '1': thisdata.firstContacts, '2': thisdata.secondContacts, '3': thisdata.thirdContacts }], createTime: thisdata.createTime, comment: thisdata.comment, state: thisdata.state, certificateNumber: thisdata.certificateNumber, issuingDate: thisdata.issuingDate, consultant: thisdata.consultant, createTimeFormattedDate: thisdata.createTimeFormattedDate, issuingDateFormattedDate: thisdata.issuingDateFormattedDate }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; this.setState({ dataSource: this.state.data, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getAuthorList() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/techservice/patent/getAdmin", success: function (data) { if (data.error.length || !data.data) { return; }; let _me = this; for (var item in data.data) { _me.state.authorOption.push( <Select.Option value={item} key={item}>{data.data[item]}</Select.Option> ) }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getCompanyList() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/techservice/patent/getUnitNames", success: function (data) { if (data.error.length || !data.data) { return; }; let _me = this; for (var item in data.data) { _me.state.companyOption.push( <Select.Option value={item} key={item}>{data.data[item]}</Select.Option> ) }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { provinceOption: [], companyOption: [], authorOption: [], selectedRowKeys: [], selectedRows: [], loading: false, showAdd: false, showDesc: 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: 'serialNumber', key: 'serialNumber' }, { title: '省份', dataIndex: 'locationProvince', key: 'locationProvince' }, { title: '公司', dataIndex: 'unitName', key: 'unitName' }, { title: '联系人', dataIndex: 'contacts', key: 'contacts', render: (text) => { for (let item in text[1]) { if (text[0] == item) { return text[1][item]; }; }; } }, { title: '派单日', dataIndex: 'createTimeFormattedDate', key: 'createTimeFormattedDate' }, { title: '状态', dataIndex: 'state', key: 'state', render: (text) => { return getCognizanceState(text) } }, { title: '证书编号', dataIndex: 'certificateNumber', key: 'certificateNumber' }, { title: '发证日', dataIndex: 'issuingDateFormattedDate', key: 'issuingDateFormattedDate' }, { title: '到期日', dataIndex: 'issuingDate', key: 'issuingDate', render: (text) => { return getTime(text, 36) } }, { title: '咨询师', dataIndex: 'consultant', key: 'consultant' } ], dataSource: [] }; }, componentWillMount() { let _me = this; provinceArr.map(function (item) { _me.state.provinceOption.push( <Select.Option value={item} key={item}>{item}</Select.Option> ) }); this.loadData(); this.getAuthorList(); this.getCompanyList(); // this.getContactsList(); }, tableRowClick(record, index) { this.state.RowData = record; this.setState({ showDesc: true }); }, addClick() { this.setState({ showAdd: true }); }, delectRow() { let deletedIds = []; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.cid) { deletedIds.push(rowItem.cid) } } this.setState({ selectedRowKeys: [], loading: deletedIds.length > 0 }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/deleteCognizance", 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(); }; }, closeAdd(e, s) { this.state.showAdd = e; if (s) { this.loadData(); }; }, search() { this.loadData(); }, reset() { this.state.province = undefined; this.state.unitName = undefined; 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="foster-content" > <div className="content-title"> <span>高企申请管理</span> </div> <div className="foster-query"> <Select placeholder="选择省份" style={{ width: 200 }} value={this.state.province} showSearch filterOption={companySearch} onChange={(e) => { this.setState({ province: e }) }}> {this.state.provinceOption} </Select> <Select placeholder="选择公司" style={{ width: 200 }} value={this.state.unitName} showSearch filterOption={companySearch} onChange={(e) => { this.setState({ unitName: e }) }}> {this.state.companyOption} </Select> <Button type="primary" onClick={this.search}>搜索</Button> <Button onClick={this.reset}>重置</Button> </div> <div className="foster-query"> <div> <Button style={{ background: "#ea0862", border: "none", color: "#fff" }} onClick={this.addClick}>添加<Icon type="plus" /></Button> <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }} disabled={!hasSelected} onClick={this.delectRow}>删除<Icon type="minus" /></Button> </div> </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> <CognizanceDesc data={this.state.RowData} authorOption={this.state.authorOption} showDesc={this.state.showDesc} closeDesc={this.closeDesc} /> <CognizanceAdd authorOption={this.state.authorOption} companyOption={this.state.companyOption} showAdd={this.state.showAdd} closeAdd={this.closeAdd} /> </div > ); } }); export default Cognizance;