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, detailApiUrl) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + detailApiUrl, 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)); }, getSalesmanList() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/salesman", success: function (data) { if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } return; }; let _me = this, theArr = []; for (var item in data.data) { theArr.push( {data.data[item]} ) }; this.setState({ salesmanOption: theArr }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getContactsList(theUid) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/getContacts", data: { uid: theUid }, success: function (data) { let theOption = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); 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/admin/demand/update' : globalConfig.context + '/api/admin/demand/apply', data: { id: this.props.data.id, dataCategory: this.props.detailApiUrl.indexOf('org') >= 0 ? 1 : 0, serialNumber: this.props.data.serialNumber, name: values.name, keyword: this.state.tags ? this.state.tags.join(",") : [], infoSources: values.infoSources, 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, employerId: values.employerId || this.state.data.employerId, 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() { this.getSalesmanList(); if (this.props.data.id) { this.loadData(this.props.data.id, this.props.detailApiUrl); if (this.props.data.employerId && this.props.detailApiUrl.indexOf('org') >= 0) { this.getContactsList(this.props.data.employerId) }; } 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, nextProps.detailApiUrl); if (nextProps.data.employerId && nextProps.detailApiUrl.indexOf('org') >= 0) { this.getContactsList(nextProps.data.employerId) }; } 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 })( )} {theData.username} {getFieldDecorator('employerId', { initialValue: theData.employerId })( )} {this.props.detailApiUrl.indexOf('org') >= 0 ? {getFieldDecorator('contacts', { initialValue: theData.contacts })( )} :
} {getFieldDecorator('principalId', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.principalId })( )}
{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('infoSources', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: theData.infoSources })( 平台采集 客户发布 )}
{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/admin/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 })( )}
{getFieldDecorator('employerId', { initialValue: theData.employerName })( )} {getFieldDecorator('employerAddress', { initialValue: theData.employerAddress })( )} {getFieldDecorator('employerContacts', { initialValue: theData.employerContacts })( )} {getFieldDecorator('employerContactsMobile', { initialValue: theData.employerContactsMobile })( )} {getFieldDecorator('employerContactsMailbox', { initialValue: theData.employerContactsMailbox })( )}
{theData.employerAddress} {theData.employerContacts} {theData.employerContactsMobile} {theData.employerContactsMailbox}
) } })); 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;