import React from 'react'; import { Icon, Modal, message, Spin, Button, Row, Col, Upload, Tooltip, Tag, Input, Table } 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, getDemandType, beforeUploadFile, getOrderStatus } from '../../tools.js'; const DemandDetail = React.createClass({ getInitialState() { return { visible: false, loading: false, buttonLoading: false, dataSource: [], orderVisible: false, fileList: false, tags: [], pictureUrl: [], columns: [ { title: '状态', dataIndex: 'status', key: 'status', render: (text) => { return getOrderStatus(text) } }, { title: '处理时间', dataIndex: 'recordTimeFormattedDate', key: 'recordTimeFormattedDate', }, { title: '备注', dataIndex: 'comment', key: 'comment', } ] }; }, 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/demandDetail', 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(",") : [], pictureUrl: thisData.pictureUrl ? splitUrl(thisData.pictureUrl, ',', 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/demandOrderLog', data: { demandOrderId: 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/demandInterest', 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/demandCancelInterest', data: { id: this.state.data.demandInterestId }, 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/orderDemand', data: { demandId: this.state.data.id, enclosureUrl: this.state.enclosureUrl, 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/demandShutdown', data: { id: this.state.data.demandOrderId }, 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.pictureUrl = []; }; }; }, 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.demandInterestId ? <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>; } })()} </Col> <Col span={4}>需求类型</Col> <Col span={8}>{getDemandType(theData.demandType)}</Col> </Row> <Row> <Col span={4}>应用领域</Col> <Col span={8}>{getIndustryCategory(theData.industryCategoryA, theData.industryCategoryB)}</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.problemDes}</Col> </Row> <Row> <Col span={4}>技术指标要求</Col> <Col span={20}>{theData.technicalRequirements}</Col> </Row> <Row> <Col span={4}>需求相关文件(图片)</Col> <Col span={20}> <div className="clearfix"> <Upload listType="picture-card" fileList={this.state.pictureUrl} 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={20}> {theData.textFileUrl ? <span className="download-file"> <a onClick={() => { window.open(globalConfig.context + '/api/user/demand/download?id=' + this.props.data.id + '&sign=demand_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.videoUrl}</Col> </Row> <Row> <Col span={4}>雇佣方名称</Col> <Col span={8}>{theData.username || theData.unitName}</Col> <Col span={4}>固定周期</Col> <Col span={8}>{theData.fixedCycle}</Col> </Row> <Row> <Col span={4}>固定人数</Col> <Col span={8}>{theData.peopleNumber}</Col> <Col span={4}>预算价格</Col> <Col span={8}>{theData.budgetCost}</Col> </Row> <Row> <Col span={4}>固定方案</Col> <Col span={20}>{theData.fixedScheme}</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.demandOrderId ? <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={8}> <Upload action={globalConfig.context + "/api/user/portal/order/demandUpload"} data={{ 'sign': 'demand_order_file' }} beforeUpload={beforeUploadFile} fileList={this.state.fileList} onChange={(info) => { if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { if (!info.file.response.error.length) { message.success(`${info.file.name} 文件上传成功!`); } else { message.warning(info.file.response.error[0].message); return; }; this.state.enclosureUrl = info.file.response.data; } else if (info.file.status === 'error') { message.error(`${info.file.name} 文件上传失败。`); }; this.setState({ fileList: info.fileList.slice(-1) }); }} > <Button><Icon type="upload" /> 上传相关资质附件 </Button> </Upload> </Col> </Row> <Row style={{ marginTop: '20px' }} > <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 DemandDetail;