import React from 'react'; import { Icon, Modal, message, Spin, Button, Row, Col, Upload, Tooltip, Tag, Table, Input } from 'antd'; import '../portal.less'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import { getIndustryCategory } from '@/DicIndustryList.js'; import { splitUrl, getAchievementCategory, getMaturity, getInnovation, getOrderStatus, beforeUploadFile } from '@/tools.js'; const AchievementDetail = React.createClass({ getInitialState() { return { visible: false, loading: false, buttonLoading: false, dataSource: [], orderVisible: false, tags: [], technicalPictureUrl: [], maturityPictureUrl: [], columns: [ { title: '状态', dataIndex: 'status', key: 'status', render: (text) => { return getOrderStatus(text) } }, { title: '处理时间', dataIndex: 'recordTimeFormattedDate', key: 'recordTimeFormattedDate', }, { title: '备注', dataIndex: 'comment', key: 'comment', } ], logsOrderStatus: 0 }; }, handleCancel(e) { this.props.closeDesc(false); }, loadData(id) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/portal/achievementDetail', data: { id: id }, success: function (data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thisData = {}; }; this.setState({ data: thisData, tags: thisData.keyword ? thisData.keyword.split(",") : [], technicalPictureUrl: thisData.technicalPictureUrl ? splitUrl(thisData.technicalPictureUrl, ',', globalConfig.avatarHost + '/upload') : [], maturityPictureUrl: thisData.maturityPictureUrl ? splitUrl(thisData.maturityPictureUrl, ',', globalConfig.avatarHost + '/upload') : [] }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadLogsData(id) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/portal/order/achievementOrderLog', data: { achievementOrderId: id }, success: function (data) { let thisData = data.data, theArr = [], _me = this; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { thisData.map(function (item, i) { theArr.push({ key: i, recordTime: item.recordTime, recordTimeFormattedDate: item.recordTimeFormattedDate, status: item.status, comment: item.comment }); _me.state.logsOrderStatus = item.status; }); }; this.setState({ dataSource: theArr }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, interestClick() { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/portal/achievementInterest', data: { id: this.props.data.id }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { this.loadData(this.props.data.id); }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this));; }, cancelInterestClick() { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/portal/achievementCancelInterest', data: { id: this.state.data.achievementInterestId }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { this.loadData(this.props.data.id); }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this));; }, handleSubmit() { this.setState({ buttonLoading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/portal/order/orderAchievement', data: { achievementId: this.state.data.id, comment: this.state.comment }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success("提交成功!") }; }.bind(this), }).always(function () { this.loadData(this.state.data.id); this.setState({ orderVisible: false, buttonLoading: false }); }.bind(this)); }, cancelSubmit() { this.setState({ buttonLoading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/user/portal/order/achievementShutdown', data: { id: this.state.data.achievementOrderId }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success("撤销成功!") }; }.bind(this), }).always(function () { this.loadData(this.state.data.id); this.setState({ buttonLoading: false }); }.bind(this)); }, componentWillReceiveProps(nextProps) { if (!this.props.showDesc && nextProps.showDesc) { if (nextProps.data.id) { this.loadData(nextProps.data.id); if (nextProps.data.orderId) { this.loadLogsData(nextProps.data.orderId) } } else { this.state.data = {}; this.state.tags = []; this.state.maturityPictureUrl = []; this.state.technicalPictureUrl = []; }; }; }, render() { const theData = this.state.data || {}; if (this.props.data) { return ( <Modal maskClosable={false} visible={this.props.showDesc} onCancel={this.handleCancel} title={<div className="interest clearfix"> <span>成果详情</span> {theData.achievementInterestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a> : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>} </div>} width='1000px' footer='' className="portal-desc-content"> <Spin spinning={this.state.loading} className="portal-desc"> <Row> <Col span={4}>编号</Col> <Col span={8}>{theData.serialNumber}</Col> <Col span={4}>名称</Col> <Col span={8}>{theData.name}</Col> </Row> <Row> <Col span={4}>数据类别</Col> <Col span={8}> {(() => { switch (theData.dataCategory) { case "0": return <span>成果</span>; case "1": return <span>技术</span>; case "2": return <span>项目</span>; } })()} </Col> <Col span={4}>类型</Col> <Col span={8}>{getAchievementCategory(theData.category)}</Col> </Row> <Row> <Col span={4}>应用领域</Col> <Col span={8}>{getIndustryCategory(theData.fieldA, theData.fieldB)}</Col> <Col span={4}>发布时间</Col> <Col span={8}>{theData.releaseDateFormattedDate}</Col> </Row> <Row> <Col span={4}>关键词</Col> <Col span={20}> {this.state.tags.map((tag) => { return <Tooltip key={tag} title={tag}> <Tag key={tag}>{tag}</Tag> </Tooltip>; })} </Col> </Row> <Row> <Col span={4}>摘要</Col> <Col span={20}>{theData.summary}</Col> </Row> <Row> <Col span={4}>成果简介</Col> <Col span={20}>{theData.introduction}</Col> </Row> <Row> <Col span={4}>技术图片</Col> <Col span={20}> <div className="clearfix"> <Upload listType="picture-card" fileList={this.state.technicalPictureUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }} > </Upload> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }) }}> <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </div> </Col> </Row> <Row> <Col span={4}>成熟度</Col> <Col span={8}>{getMaturity(theData.maturity)}</Col> <Col span={4}>创新度</Col> <Col span={8}>{getInnovation(theData.innovation)}</Col> </Row> <Row> <Col span={4}>成熟度证明材料(图片)</Col> <Col span={20}> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.maturityPictureUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }} > </Upload> </Col> </Row> <Row> <Col span={4}>成熟度证明材料(文本)</Col> <Col span={20}> {theData.maturityTextFileUrl ? <span className="download-file"> <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + theData.id + '&sign=achievement_maturity_text_file') }}>成熟度证明材料(文本文件)</a> </span> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>} </Col> </Row> <Row> <Col span={4}>成熟度证明材料(视频地址)</Col> <Col span={20}>{theData.maturityVideoUrl}</Col> </Row> <Row> <Col span={4}>成果所有人名称</Col> <Col span={8}>{theData.ownerName}</Col> <Col span={4}>合作方式</Col> <Col span={8}> {(() => { switch (theData.cooperationMode) { case "0": return <span>技术转让</span>; case "1": return <span>授权生产</span>; } })()} </Col> </Row> <Row> <Col span={4}>转让方式</Col> <Col span={8}> {(() => { switch (theData.transferMode) { case "0": return <span>完全转让</span>; case "1": return <span>许可转让</span>; case "2": return <span>技术入股</span>; } })()} </Col> <Col span={4}>转让价格</Col> <Col span={8}> {(() => { switch (theData.bargainingMode) { case "0": return <span>面议</span>; case "1": return <span>{theData.transferPrice} 万元</span>; } })()} </Col> </Row> <Row> <Col span={4}>技术场景</Col> <Col span={20}>{theData.technicalScene}</Col> </Row> <Row> <Col span={4}>技术突破</Col> <Col span={20}>{theData.breakthrough}</Col> </Row> <Row> <Col span={4}>专利情况</Col> <Col span={20}>{theData.patentCase}</Col> </Row> <Row> <Col span={4}>获奖情况</Col> <Col span={20}>{theData.awards}</Col> </Row> <Row> <Col span={4}>技术团队情况</Col> <Col span={20}>{theData.teamDes}</Col> </Row> <Row> <Col span={4}>技术参数</Col> <Col span={20}>{theData.parameter}</Col> </Row> <Row> <Col span={4}>技术方案</Col> <Col span={20}> {theData.techPlanUrl ? <span className="download-file"> <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + theData.id + '&sign=achievement_tech_plan') }}>技术方案</a> </span> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>} </Col> </Row> <Row> <Col span={4}>商业计划书</Col> <Col span={20}> {theData.businessPlanUrl ? <span className="download-file"> <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + theData.id + '&sign=achievement_business_plan') }}>商业计划书</a> </span> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>} </Col> </Row> {this.props.data.orderId ? <div> <p>状态流转记录: </p> <Table style={{ margin: '10px 0', background: "#eee" }} pagination={false} dataSource={this.state.dataSource} columns={this.state.columns} /> </div> : <div></div>} {this.state.logsOrderStatus == 6 ? <div> <Button type="ghost" onClick={() => { this.handleCancel() }}>取消</Button> </div> : <div> {theData.achievementOrderId ? <Button type="ghost" loading={this.state.buttonLoading} disabled={Boolean(theData.orderStatus != "0")} onClick={this.cancelSubmit}>我要撤销</Button> : <Button type="primary" onClick={() => { if (window.userData.number) { this.setState({ orderVisible: true }); } else { message.warning("请先登录!"); } }}>我要购买</Button>} </div>} <Modal maskClosable={false} title="我要购买" width={600} style={{ 'top': '160px' }} visible={this.state.orderVisible} footer={null} onCancel={() => { this.setState({ orderVisible: false }); }}> <Row> <Col span={2}>备注 : </Col> <Col span={22}> <Input type="textarea" rows={4} onChange={(e) => { this.state.comment = e.target.value }} /> </Col> </Row> <Button loading={this.state.buttonLoading} style={{ marginTop: '20px' }} type="primary" onClick={this.handleSubmit}>提交</Button> </Modal> </Spin> </Modal> ); } else { return <div></div> } }, }); export default AchievementDetail;