import React from 'react'; import { Icon, Tooltip, Modal, message, Spin, Upload, Input, InputNumber, Select, DatePicker, Button, Radio, Form, Cascader, Tag } from 'antd'; import moment from 'moment'; import './techDemand.less'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import { IndustryObject } from '../../DicIndustryList.js'; import { beforeUploadFile, splitUrl, companySearch } from '../../tools.js'; const KeyWordTagGroup = React.createClass({ getInitialState() { return { tags: [], inputVisible: false, inputValue: '' }; }, handleClose(removedTag) { const tags = this.state.tags.filter(tag => tag !== removedTag); this.props.tagsArr(tags); this.setState({ tags }); }, showInput() { this.setState({ inputVisible: true }, () => this.input.focus()); }, handleInputChange(e) { this.setState({ inputValue: e.target.value }); }, handleInputConfirm() { const state = this.state; const inputValue = state.inputValue; let tags = state.tags; if (inputValue && tags.indexOf(inputValue) === -1) { tags = [...tags, inputValue]; } this.props.tagsArr(tags); this.setState({ tags, inputVisible: false, inputValue: '', }); }, componentWillMount() { this.state.tags = this.props.keyWordArr; }, componentWillReceiveProps(nextProps) { if (this.props.keyWordArr != nextProps.keyWordArr) { this.state.tags = nextProps.keyWordArr; }; }, render() { const { tags, inputVisible, inputValue } = this.state; return (
{tags.map((tag, index) => { const isLongTag = tag.length > 10; const tagElem = ( this.handleClose(tag)}> {isLongTag ? `${tag.slice(0, 10)}...` : tag} ); return isLongTag ? {tagElem} : tagElem; })} {inputVisible && ( this.input = input} type="text" style={{ width: 78 }} value={inputValue} onChange={this.handleInputChange} onBlur={this.handleInputConfirm} onPressEnter={this.handleInputConfirm} /> )} {!inputVisible && }
); } }); const PicturesWall = React.createClass({ getInitialState() { return { previewVisible: false, previewImage: '', fileList: [], } }, handleCancel() { this.setState({ previewVisible: false }) }, handlePreview(file) { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }, handleChange(info) { let fileList = info.fileList; this.setState({ fileList }); this.props.fileList(fileList); }, componentWillReceiveProps(nextProps) { this.state.fileList = nextProps.pictureUrl; }, render() { const { previewVisible, previewImage, fileList } = this.state; const uploadButton = (
点击上传
); return (
{fileList.length >= 5 ? null : uploadButton} example
); } }); const DemandDetailForm = Form.create()(React.createClass({ getInitialState() { return { visible: false, loading: false, textFileList: [], videoFileList: [], pictureUrl: [], tags: [] }; }, loadData(id) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + (window.userData.type == 0 ? '/api/user/demand/userDemandDetail' : '/api/user/demand/orgDemandDetail'), 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 = {}; }; let d = new Date() if (thisData && thisData.dateOfBirthMonth && thisData.dateOfBirthYear) { d.setMonth(thisData.dateOfBirthMonth - 1); d.setYear(parseInt(thisData.dateOfBirthYear)); }; 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)); }, getContactsList() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/cognizance/getContacts", 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( {theData} ); }; this.setState({ contactsOption: theOption }); }.bind(this), }); }, getTagsArr(e) { this.setState({ tags: e }); }, getPictureUrl(e) { this.setState({ pictureUrl: e }); }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { //keyword长度判断 if (this.state.tags.length < 3) { message.warning('关键词数量不能小于3个!'); }; //url转化 let thePictureUrl = []; if (this.state.pictureUrl.length) { let picArr = []; this.state.pictureUrl.map(function (item) { picArr.push(item.response.data); }); thePictureUrl = picArr.join(","); }; if (!err) { this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: this.props.data.id ? globalConfig.context + '/api/user/demand/update' : globalConfig.context + '/api/user/demand/apply', data: { id: this.props.data.id, dataCategory: window.userData.type ? Number(window.userData.type) : undefined, serialNumber: this.props.data.serialNumber, name: values.name, keyword: this.state.tags ? this.state.tags.join(",") : [], industryCategoryA: values.industryCategory ? values.industryCategory[0] : undefined, industryCategoryB: values.industryCategory ? values.industryCategory[1] : undefined, demandType: values.demandType, problemDes: values.problemDes, technicalRequirements: values.technicalRequirements, pictureUrl: thePictureUrl, textFileUrl: this.state.textFileUrl, videoUrl: values.videoUrl, fixedBudget: values.fixedBudget, fixedCycle: values.fixedCycle, peopleNumber: values.peopleNumber, fixedScheme: values.fixedScheme, costEscrow: values.costEscrow, budgetCost: values.budgetCost, releaseStatus: values.releaseStatus, principalId: values.principalId, validityPeriodFormattedDate: values.validityPeriod ? values.validityPeriod.format('YYYY-MM-DD') : undefined, // contacts: values.contacts, status: this.state.status } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.setState({ visible: false }); this.props.handleOk(); } else { message.warning(data.error[0].message); } }.bind(this)); } }); }, componentWillMount() { if (window.userData.type == "1") { this.getContactsList(); }; if (this.props.data.id) { this.loadData(this.props.data.id); } else { this.state.data = {}; }; }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { this.state.textFileList = []; this.state.videoFileList = []; if (nextProps.data.id) { this.loadData(nextProps.data.id); } else { this.state.data = {}; this.state.tags = []; this.state.pictureUrl = []; }; this.props.form.resetFields(); }; }, render() { const theData = this.state.data || {}; const { getFieldDecorator } = this.props.form; const FormItem = Form.Item const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 }, }; return (
{theData.serialNumber} {getFieldDecorator('name', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.name })( )} {window.userData.type == "1" ? {getFieldDecorator('contacts', { initialValue: theData.contacts })( )} :
}
{getFieldDecorator('releaseStatus', { initialValue: theData.releaseStatus })( 未发布 发布 )} {theData.releaseDateFormattedDate}
{(() => { if (theData.status > 1) { return { this.setState({ status: e }); }}> 未解决 已解决 } else { switch (theData.status) { case "0": return 草稿; case "1": return 进行中; }; }; })()} {theData.createTimeFormattedDate}
{getFieldDecorator('industryCategory', { rules: [{ type: 'array', required: true, message: '此项为必填项!' }], initialValue: [theData.industryCategoryA, theData.industryCategoryB] })( )}
{getFieldDecorator('demandType', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.demandType })( )}
{getFieldDecorator('problemDes', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.problemDes })( )} {getFieldDecorator('technicalRequirements', { initialValue: theData.technicalRequirements })( )} { 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.textFileUrl = info.file.response.data; } else if (info.file.status === 'error') { message.error(`${info.file.name} 文件上传失败。`); }; this.setState({ textFileList: info.fileList.slice(-1) }); }} >

{theData.textFileUrl ? { window.open(globalConfig.context + '/api/user/demand/download?id=' + this.props.data.id) }}>需求文件(文本文件) : 未上传!}

{getFieldDecorator('videoUrl', { initialValue: theData.videoUrl })( )}
{getFieldDecorator('fixedCycle', { initialValue: theData.fixedCycle })( )} {getFieldDecorator('peopleNumber', { initialValue: theData.peopleNumber })( )}
{getFieldDecorator('fixedScheme', { initialValue: theData.fixedScheme })( )}
{getFieldDecorator('budgetCost', { initialValue: theData.budgetCost })( )} 万元 {getFieldDecorator('costEscrow', { initialValue: theData.costEscrow })( )} {getFieldDecorator('validityPeriod', { initialValue: theData.validityPeriod ? moment(theData.validityPeriod) : null })( )}
) } })); const DemandDetail = React.createClass({ getInitialState() { return { visible: false }; }, showModal() { this.setState({ visible: true, }); }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeDesc(false); }, handleOk(e) { this.setState({ visible: false, }); this.props.closeDesc(false, true); }, componentWillReceiveProps(nextProps) { this.state.visible = nextProps.showDesc; }, render() { if (this.props.data) { return (
); } else { return
} }, }); export default DemandDetail;