| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658 | import React from 'react';import $ from 'jquery/src/ajax';import 'react-quill/dist/quill.bubble.css';import {	Form,	Icon,	Button,	Input,	Select,	Spin,	Table,	message,	DatePicker,	Modal,	Upload,	Popconfirm,	Cascader,	InputNumber,	Radio} from 'antd';import { getGameState, splitUrl, getprovince ,getReleaseStateList,getTypeModule} from '@/tools.js';import { releaseStateList } from '@/dataDic.js';//主体const BusinessProject = Form.create()(	React.createClass({		loadData(pageNo) {			this.state.data = [];			this.setState({				loading: true,				page: pageNo			});			$.ajax({				method: 'get',				dataType: 'json',				crossDomain: false,				url: globalConfig.context + '/portal/service/jtProject/list',				data: {					pageNo: pageNo || 1,					pageSize: this.state.pagination.pageSize,					topId: this.state.typeSearch? this.state.typeSearch[0]:'',					secondId:this.state.typeSearch?this.state.typeSearch[1]:'',					name: this.state.nameSearch,					privateProject: 1,					isHot:this.state.hotSearch,					auditStatus:this.state.stateSearch				},				success: function(data) {					let theArr = [];					if (!data.data || !data.data.list) {						if (data.error && data.error.length) {							message.warning(data.error[0].message);						}					} else {						for (let i = 0; i < data.data.list.length; i++) {							let thisdata = data.data.list[i],								ProvinceCityArr = [],								cname = '',								superName = '',								ProvinceS = thisdata.province, //getprovince								citys = thisdata.city,								Areas = thisdata.area;							ProvinceCityArr.push(ProvinceS, citys, Areas);							this.state.categoryList.map((item) => {								if (thisdata.categoryId == item.id) {									cname = item.name;									superName = item.superName;								}							});							theArr.push({								key: i,								id: thisdata.id, //业务名称								name: thisdata.name, //业务名称								categoryId: thisdata.categoryId, //业务品类								number: thisdata.number,								price: thisdata.price, //市场价								superName: superName,								cname: cname,								module:thisdata,module,								companyName:thisdata.companyName,								city: thisdata.city,								activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //最低折扣								memberPrice: thisdata.memberPrice ? thisdata.memberPrice : '', //会员价								offset: thisdata.offset ? thisdata.offset : '',								activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //活动价								activityFlag: thisdata.activityFlag, //活动生效标识								status: thisdata.status, //项目状态								province: thisdata.province,								auditStatus:thisdata.auditStatus,								introduce: thisdata.introduce,								createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : '',								value: thisdata.value,								applyConditions: thisdata.applyConditions							});						}						this.state.pagination.current = data.data.pageNo;						this.state.pagination.total = data.data.totalCount;					}					this.setState({						dataSource: theArr,						pagination: this.state.pagination					});				}.bind(this)			}).always(				function() {					this.setState({						loading: false					});				}.bind(this)			);		},		getInitialState() {			return {				searchMore: true,				selectedRowKeys: [],				selectedRows: [],				loading: false,				orgCodeUrl: [],				typeSearch:[],				companyLogoUrl: [],				pagination: {					defaultCurrent: 1,					defaultPageSize: 10,					showQuickJumper: true,					pageSize: 10,					onChange: function(page) {						this.loadData(page);						this.setState({							selectedRowKeys: []						});					}.bind(this),					showTotal: function(total) {						return '共' + total + '条数据';					}				},				columns: [					{						title: '项目名称',						dataIndex: 'name',						key: 'bname'					},					{						title: '发布人账户昵称',						dataIndex: 'companyName',						key: 'companyName'					},					{						title: '品类名称',						dataIndex: 'cname',						key: 'cname',						render:(text,recard)=>{							let ids =recard.categoryId,categoryList =this.state.categoryList,txt='' ;							 categoryList.map(item=>{								if(item.children){									(item.children).map(atem=>{										if(atem.value==ids){											txt= atem.label										}									})								}							})							return txt;													}					},					{						title: '上级品类',						dataIndex: 'superName',						key: 'superName',						render:(text,recard)=>{							let ids =recard.categoryId,categoryList =this.state.categoryList,txt='' ;							 categoryList.map(item=>{								if(item.children){									(item.children).map(atem=>{										if(atem.value==ids){											txt= item.label										}									})								}							})							return txt;													}					},					{						title: '业务地区',						dataIndex: 'area',						key: 'area',						render: (text, rocard) => {							return (								<div>									{rocard.province != 0 ? (										<span>{getprovince(rocard.province) + '-' + getprovince(rocard.city)}</span>									) : (										'全国'									)}								</div>							);						}					},					{						title: '发布状态',						dataIndex: 'auditStatus',						key: 'auditStatus',						render:text=>{							return getReleaseStateList(text);						}					},					{						title: '市场价(万元)',						dataIndex: 'price',						key: 'price'					},					{						title: '最低折扣',						dataIndex: 'offset',						key: 'offset'					},					{						title: '会员价(万元)',						dataIndex: 'memberPrice',						key: 'memberPrice'					},					{						title: '活动价(万元)',						dataIndex: 'activityPrice',						key: 'activityPrice'					},					{						title: '活动生效标识',						dataIndex: 'activityFlag',						key: 'activityFlag',						render: (text) => {							return getGameState(text);						}					}				],				dataSource: []			};		},		//业务品类列表获取		topLevel() {			$.ajax({				method: 'get',				dataType: 'json',				crossDomain: false,				url: globalConfig.context + '/portal/service/jtBusiness/getCategoryList',				data: {									},				success: function(data) {					let theArr = [],thisdata=data.data;					if (!data.data) {						if (data.error && data.error.length) {							message.warning(data.error[0].message);						}					} else {						thisdata.map((item,index) => {							theArr.push({								'value':item.topLevelId,								'label':item.topLevel,								'children':[]							})							if (item.children) {								item.children.map(atem => {									(theArr[index].children).push({										'value':atem.id,										'label':atem.name									})								})							}						})					}					this.setState({						categoryList: theArr,					});					this.loadData();				}.bind(this)			}).always(				function() {					this.setState({						loading: false					});				}.bind(this)			);		},		componentWillMount() {			this.topLevel();		},		detailes(recard) {			this.setState({				loading:true			});			$.ajax({				method: 'get',				dataType: 'json',				crossDomain: false,				url: globalConfig.context + '/api/user/jtBusiness/project/detail',				data: {					id: recard.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.state.categoryList,name='';                    categoryList.map(item=>{						if((item.children).length){							(item.children).map(atem=>{								if(atem.value==thisData.categoryId){									name=item.label+'/'+atem.label;									return;								}							})						}					});					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,						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)			);		},		//项目列表整行点击		tableRowClick(record, index) {			this.state.RowData = record;			this.setState({				editvisible: true			});			this.detailes(record);		},		edithandleCancel(e) {			this.setState({				editvisible: false			});		},		search() {			this.loadData();		},		//搜索部分的清零		reset() {			this.state.nameSearch = ''; //项目名称清零			this.state.typeSearch = undefined; //品类名称清零			this.state.ressSearch = undefined; //省市区清零			this.state.activityFlag = undefined; //活动生效清零			this.state.status = undefined; //项目状态清零			this.state.stateSearch=undefined;			this.state.hotSearch=undefined;			this.loadData();		},		//更多搜索的显示与否		searchSwitch() {			this.setState({				searchMore: !this.state.searchMore			});		},		render() {			const FormItem = Form.Item;			const rowSelection = {				selectedRowKeys: this.state.selectedRowKeys,				onChange: (selectedRowKeys, selectedRows) => {					this.setState({						selectedRows: selectedRows.slice(-1),						selectedRowKeys: selectedRowKeys.slice(-1)					});				}			};			const theData = this.state.data || {};			return (				<div className="user-content">					<div className="content-title">							<span>项目业务库</span>						<div className="user-search">							<Input								placeholder="业务项目名称"								style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}								value={this.state.nameSearch}								onChange={(e) => {									this.setState({ nameSearch: e.target.value });								}}							/>							<Cascader placeholder='业务项目品类' 								options={this.state.categoryList} 								style={{width:200,marginRight:10}} 								value={this.state.typeSearch} onChange={(e)=>{this.setState({typeSearch:e})}}/>							<Select 								placeholder="发布状态"							 	style={{width:150,marginRight:10}} 							 	onChange={(e)=>{this.setState({									stateSearch:e								})}}								value={this.state.stateSearch}								>								{releaseStateList.map(item=>{									return	<Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>								})}							</Select>							<Select 								value={this.state.hotSearch}								placeholder="是否热点"								style={{width:150,marginRight:10}}								onChange={(e)=>{this.setState({hotSearch:e})}}>								<Select.Option value='0'>非热点</Select.Option>								<Select.Option value='1'>热点</Select.Option>							</Select>							<Button type="primary" onClick={this.search} style={{ marginRight: '10px' }}>								搜索							</Button>							<Button onClick={this.reset} style={{ marginRight: '10px' }}>								重置							</Button>						</div>						<div className="patent-table">							<Spin spinning={this.state.loading}>								<Table									columns={this.state.columns}									dataSource={this.state.dataSource}									rowSelection={rowSelection}									pagination={this.state.pagination}									onRowClick={this.tableRowClick}								/>							</Spin>						</div>						<div className="patent-desc">							<Modal								className="customeDetails"								title="业务项目"								width="1000px"								visible={this.state.editvisible}								onOk={this.edithandleCancel}								onCancel={this.edithandleCancel}								footer=""							>								<Form layout="horizontal" onSubmit={this.edithandleSubmit} 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>										</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>{this.state.createTime}</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>									</Spin>								</Form>							</Modal>						</div>					</div>				</div>			);		}	}));export default BusinessProject;
 |