jitao-client/js/component/account/business/businessDetails.jsx

import React from 'react';
import $ from 'jquery/src/ajax';
import { Modal, message, Spin, Upload, Button, Form } from 'antd';
import { getprovince, splitUrl } from '@/tools.js';
import './business.less';
import 'react-quill/dist/quill.bubble.css';

const DemandDetail = Form.create()(
	React.createClass({
		getInitialState() {
			return {
				visible: false,
				loading: false,
				auditStatus: 0,
				textFileList: [],
				videoFileList: [],
				pictureUrl: []
			};
		},
		loadData(id) {
			this.setState({
				loading: true
			});
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/user/jtBusiness/project/detail',
				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 categoryList = this.props.categoryList,name='';
                    categoryList.map(item=>{
						if((item.children).length){
							(item.children).map(atem=>{
								if(atem.value==thisData.categoryId){
									name=item.label+'/'+atem.label;
									return;
								}
							})
						}
					})
					let tagFirst =thisData.tags,tagTxt=[];
						tagFirst.map(item=>{
							tagTxt.push(item.name);
						})
					//富文本处理
					document.querySelector('.txt').innerHTML='';
					let eleDiv = document.createElement('div');
					eleDiv.innerHTML=thisData.introduce;
					document.querySelector('.txt').append(eleDiv);
					this.setState({
						id: thisData.id,
                        data: thisData,
						name:name,
						tags:tagTxt.join(' - '),
						createTime: thisData.createTime ? new Date(thisData.createTime).toLocaleString() : '',
						auditStatus: thisData.auditStatus,
						orgCodeUrl: thisData.minImgUrl
							? splitUrl(thisData.minImgUrl, ',', globalConfig.avatarHost + '/upload')
							: [],
						companyLogoUrl: thisData.maxImgUrl
							? splitUrl(thisData.maxImgUrl, ',', globalConfig.avatarHost + '/upload')
							: []
					});
				}.bind(this)
			}).always(
				function() {
					this.setState({
						loading: false
					});
				}.bind(this)
			);
		},
		cancelFun() {
			this.props.closeDesc();
		},
		//刷新发布
		updateFun(inex) {
			this.setState({
				loading: true
			});
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/user/jtBusiness/project/refreshPublish',
				data: {
					id: this.state.id,
					auditStatus: this.state.auditStatus
				}
			}).done(
				function(data) {
					if (!data.error.length) {
						message.success('刷新成功！');
						this.setState({
							loading: false
						});
					} else {
						message.warning(data.error[0].message);
					}
					this.props.handOk();
				}.bind(this)
			);
		},
		//撤销发布
		revokeFun() {
			this.setState({
				loading: true
			});
			$.ajax({
				method: 'get',
				dataType: 'json',
				crossDomain: false,
				url: globalConfig.context + '/api/user/jtBusiness/project/offShelf',
				data: {
                    id: this.state.id,
                    auditStatus:this.state.auditStatus
				}
			}).done(
				function(data) {
					if (!data.error.length) {
						message.success('撤销成功！');
						this.setState({
							loading: false
						});
					} else {
						message.warning(data.error[0].message);
					}
					this.props.handOk();
				}.bind(this)
			);
		},
		componentWillMount() {
			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.pictureUrl = [];
				}
				this.props.form.resetFields();
			}
		},
		render() {
			const theData = this.state.data || {};
            const FormItem = Form.Item;
            
			return (
				<div className="patent-desc">
					<Form
						layout="horizontal"
						onSubmit={(e) => {
							this.handleSubmit(e, 0);
						}}
						id="demand-form"
					>
						<Spin spinning={this.state.loading}>
							<div className="clearfix">
								<FormItem
									className="half-item"
									labelCol={{ span:8 }}
									wrapperCol={{ span: 12 }}
									label="项目名称"
								>
									<span>{theData.name}</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 12 }}
									label="业务品类"
								>
									<span>{this.state.name}</span>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem
									className="half-item"
									labelCol={{ span:8 }}
									wrapperCol={{ span: 12 }}
									label="省份"
								>
									<span>{theData.province!='0'?getprovince(theData.province):'全国'}</span>
								</FormItem>
								{/*<FormItem
									className="half-item"
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 12 }}
									label="热点"
								>
									<span>{theData.isHot=='1' ? '是' :theData.isHot=='0'?'否':''}</span>
								</FormItem>*/}
								<FormItem
									className="half-item"
									labelCol={{ span: 8}}
									wrapperCol={{ span: 12 }}
									label="创建时间"
								>
									<span>{this.state.createTime}</span>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem
									className="half-item"
									labelCol={{ span:8 }}
									wrapperCol={{ span: 12 }}
									label="市场价"
								>
									<span>{theData.price?theData.price+' 万元':''}</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span:8 }}
									wrapperCol={{ span: 12 }}
									label="活动价"
								>
									<span>{theData.activityPrice?theData.activityPrice+' 万元':''}</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span:8 }}
									wrapperCol={{ span: 12 }}
									label="最低折扣"
								>
									<span>{theData.offset?theData.offset+' 万元':''}</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span:8 }}
									wrapperCol={{ span: 12 }}
									label="会员价"
								>
									<span>{theData.memberPrice?theData.memberPrice+' 万元':''}</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 12 }}
									label="活动生效"
								>
									<span>{theData.activityFlag=='1' ? '有效' :theData.activityFlag=='0'?'无效':''}</span>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span:8 }}
									wrapperCol={{ span: 12 }}
									label="关键字"
								>
									<span>{theData.keyword}</span>
								</FormItem>
								
							</div>
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="标签">
									<span>{this.state.tags}</span>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="项目简介">
									<span>{theData.summary}</span>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="项目营销说明">
									<span>{theData.advertisement}</span>
								</FormItem>
							</div>
							{/*
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目价值及作用">
									<span>{theData.value}</span>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目客户基本条件">
									<span>{theData.applyConditions}</span>
								</FormItem>
							</div>*/}
							<div className="clearfix">
								<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="业务项目服务内容">
									<div className="ql-editor">
										<div className="txt"></div>
									</div>
								</FormItem>
							</div>
							<div className="clearfix pictures">
								<FormItem
									className="half-item"
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 10 }}
									label="业务项目图标(小)"
								>
									<Upload
										className="demandDetailShow-upload"
										listType="picture-card"
										fileList={this.state.orgCodeUrl}
										onPreview={(file) => {
											this.setState({
												previewImage: file.url || file.thumbUrl,
												previewVisible: true
											});
										}}
									/>
									<Modal
										maskClosable={false}
										footer={null}
										visible={this.state.previewVisible}
										onCancel={() => {
											this.setState({ previewVisible: false });
										}}
									>
										<img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
									</Modal>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 12 }}
									label="业务项目图标(大)"
								>
									<Upload
										className="demandDetailShow-upload"
										listType="picture-card"
										fileList={this.state.companyLogoUrl}
										onPreview={(file) => {
											this.setState({
												previewImage: file.url || file.thumbUrl,
												previewVisible: true
											});
										}}
									/>
									<Modal
										maskClosable={false}
										footer={null}
										visible={this.state.previewVisible}
										onCancel={() => {
											this.setState({ previewVisible: false });
										}}
									>
										<img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
									</Modal>
								</FormItem>
							</div>
							<div className="clearfix">
								{this.props.data.auditStatus == '2' && (
									<FormItem wrapperCol={{ span: 12, offset: 3 }}>
										<Button
											className="set-submit"
											type="primary"
											onClick={(e) => {
												this.updateFun();
											}}
										>
											刷新发布
										</Button>
										<Button
											type="danger"
											style={{ marginRight: 20 }}
											onClick={(e) => {
												this.revokeFun();
											}}
										>
											撤销发布
										</Button>
										<Button className="set-submit" type="ghost" onClick={this.cancelFun}>
											取消
										</Button>
									</FormItem>
								)}
							</div>
						</Spin>
					</Form>
				</div>
			);
		}
	})
);
export default DemandDetail;