import React from 'react'; import { Icon, Modal, message, Spin, Timeline, Button, Popconfirm } from 'antd'; import { getPatentType, getPatentState, getTime, getIndustryType, newDownloadFile } from '../../tools.js'; import './patent.less'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const PatentDesc = React.createClass({ getInitialState() { return { visible: false, loading: false, stepList: [] }; }, showModal() { this.setState({ visible: true, }); }, handleOk() { this.setState({ visible: false, }); this.props.closeDesc(false, true); }, getPatentInfo(thepid) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/patent/clientPatentInfo", data: { pid: thepid }, success: function (data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thisData = {}; }; this.setState({ patentInfoData: thisData, stepList: this.state.stepList }); }.bind(this), }); }, getStepList(thepid) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/patent/patentProcess', data: { pid: thepid || this.props.pid }, success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (var item in data.data) { theArr.push( <Timeline.Item key={item}> <span>{getPatentState(data.data[item].state)}</span> {data.data[item].recordTimeFormattedDate} </Timeline.Item> ) }; }; this.setState({ stepList: theArr }); }.bind(this), }); }, componentWillReceiveProps(nextProps) { if (!this.state.visible && nextProps.showDesc) { if (nextProps.data && nextProps.data.pid) { this.getStepList(nextProps.data.pid); this.getPatentInfo(nextProps.data.pid); }; }; this.state.visible = nextProps.showDesc; }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeDesc(false); }, confirmButton() { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/patent/clientConfirm", data: { pid: this.props.data.pid } }).done(function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('已确认完成!'); this.state.patentInfoData.confirmState = 1; }; }.bind(this)).always(function () { this.setState({ loading: false }); }.bind(this)); }, render() { let theData = this.state.patentInfoData; if (theData) { return ( <div className="patent-desc"> <Spin spinning={this.state.loading} className='spin-box'> <Modal maskClosable={false} title="专利详情" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width='800px' footer='' className="patent-desc-content"> <div> <p className="widthHalf"><span>编号:</span>{theData.serialNumber}</p> <p className="widthHalf"><span>申请号/专利号:</span>{theData.patentNumber}</p> </div> <div> <p className="widthHalf"><span>专利名称:</span>{theData.patentName}</p> <p className="widthHalf"><span>专利类型:</span>{getPatentType(theData.patentCatagory)}</p> </div> <div> <p className="widthHalf"><span>专利状态:</span>{getPatentState(theData.patentState)}</p> <p className="widthHalf"><span>所属行业:</span>{getIndustryType(theData.patentField)}</p> </div> <div> <span>简介:</span>{theData.patentDes} </div> <div className="patent-download"> <span>专利相关材料:</span> {theData.patentWritingUrl ? <p className="download-file"> <a onClick={newDownloadFile.bind(this, theData.id, 'patent_writing', '/api/user/patent/download')}>专利稿件下载</a> {theData.confirmState == 0 ? <Popconfirm title={"您将确认专利名称为 [ " + theData.patentName + " ] 的稿件,确认操作?"} onConfirm={this.confirmButton} okText="确认" cancelText="取消" placement="topLeft"> <Button>确认稿件</Button> </Popconfirm> : <span></span>} </p> : <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />专利稿件未上传</p> } {theData.authorizationNoticeUrl ? <p className="download-file"> <a onClick={newDownloadFile.bind(this, theData.id, 'authorization_notice', '/api/user/patent/download')}>授权通知书下载</a> </p> : <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />授权通知书未上传</p> } {theData.patentCertificateUrl ? <p className="download-file"> <a onClick={newDownloadFile.bind(this, theData.id, 'patent_certificate', '/api/user/patent/download')}>专利证书下载</a> </p> : <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />专利证书未上传</p> } {theData.patentProryStatementUrl ? <p className="download-file"> <a onClick={newDownloadFile.bind(this, theData.id, 'patent_prory_statement', '/api/user/patent/download')}>专利代理委托书下载</a> </p> : <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />专利代理委托书未上传</p> } </div> <div> <span>专利申请日:</span>{theData.patentApplicationFormattedDate} </div> <div> <span>专利授权日:</span>{theData.authorizedFormattedDate} </div> <div> <span>每年年费缴费截止日:</span>{getTime(theData.patentApplicationDate, 12)} </div> <div> <p>第一发明人:</p> <p><span>姓名:</span>{theData.firstInventorName}</p> <p><span>身份证:</span>{theData.firstInventorIdNumber}</p> </div> <div style={theData.secondInventorName === '' ? { display: 'none' } : {}}> <p>第二发明人:</p> <p><span>姓名:</span>{theData.secondInventorName}</p> </div> <div style={theData.thirdInventorName === '' ? { display: 'none' } : {}}> <p>第三发明人:</p> <p><span>姓名:</span>{theData.thirdInventorName}</p> </div> <Timeline className="time-line"> {this.state.stepList} </Timeline> </Modal> </Spin> </div> ); } else { return <div></div> } }, }); export default PatentDesc;