| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689 | import React from 'react';import {	Icon,	Button,	Input,	Select,	Spin,	Checkbox,	Cascader,	Table,	Form,	Switch,	message,	DatePicker,	Modal,	Row,	Col,	InputNumber,} from 'antd';import { citySelect, provinceList ,areaSelect} from '@/NewDicProvinceList';import {demandProfile} from '../../../dataDic.js';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';//import axios from 'axios';import 'antd/dist/antd.css';const FormItem = Form.Item;import './sichuan.css';const { TextArea } = Input;const CheckboxGroup = Checkbox.Group;class Achievement extends React.Component {	loadData(pageNo) {		this.setState({			page: pageNo,			loading: true		});		$.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/open/api/demandList",            data: {                pageNo: pageNo || 1,                pageSize: this.state.pagination.pageSize,                type:0,                orgName:this.state.seachName,//企业名称                name:this.state.seachNames,//需求名称                reserveButtUnit:this.state.seachReserveButtUnit,//对接单位                            },            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];                        theArr.push({                            key: i,                            id: thisdata.id,//需求编号                            name: thisdata.name,//需求名称                            industry: thisdata.industry,//行业                            reserveButtUnit:thisdata.reserveButtUnit,//对接单位                            orgName:thisdata.orgName,//企业名称                        });                    };                    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));	}	constructor(props) {		super(props);		this.state = {			loading:false,			publishPages: [],			nature:'',			visible: false,			pagination: {				defaultCurrent: 1,				defaultPageSize: 10,				showQuickJumper: true,				pageSize: 10,				onChange: function(page) {					this.loadData(page);				}.bind(this),				showTotal: function(total) {					return '共' + total + '条数据';				}			},			columns: [				{					title: '需求名称',					dataIndex: 'name',					key: 'name'				},				{					title: '行业领域',					dataIndex: 'industry',					key: 'industry'				},				{					title: '企业名称',					dataIndex: 'orgName',					key: 'orgName'				},				{					title: '拟对接单位',					dataIndex: 'reserveButtUnit',					key: 'reserveButtUnit'				},				{					title: '操作',					dataIndex: 'caozuo',					key: 'caozuo',					render: (text, recard) => {						return (							<div className="btnRight">								<Button									type="danger"									onClick={(e) => {										e.stopPropagation();										this.delectRow(recard);									}}								>									删除								</Button>							</div>						);					}				}			]		};	}			//删除	delectRow(recard) {		$.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/open/api/delectDemand",            data: {                id:recard.id            },            success: function (data) {	            if (!data.error.length) {	                message.success('删除成功!');	                this.setState({	                    loading: false,	                });	                this.loadData();	            } else {	                message.warning(data.error[0].message);	            };            }.bind(this),        }).always(function () {            this.setState({                loading: false            });        }.bind(this));	}	details(recard){		this.state({			loading:true		})	}	add() {		this.setState({			id:"",			uid: '',			visible: true,			addState: true,			name: '',			introduce: '',			industry: '',			summary: [],			ownerName: '',			reserveButtMode: '',			patentNumber: '',			transferPrice: '',			telephone: '',			cname: ''		});	}	search() {		this.loadData(1);	}	reset() {		this.state.seachName = '';		this.state.seachNames = '';		this.state.seachReserveButtUnit = '';		this.loadData(1);	}	tableRowClick(record, index) {		this.setState({			visible: true,			addState: false,			id:record.id,		});		$.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/open/api/demandDetails",            data: {                id: record.id,//需求名称                            }        }).done(function (data) {            if (!data.error.length) {               let thisData=data.data;               let ProvinceCityArr = [];               let ProvinceS =thisData.province? parseInt(thisData.province):""; //省			   let citys = thisData.city?parseInt(thisData.city):"";//市			   ProvinceCityArr.push(ProvinceS, citys);               this.setState({               		id:thisData.id,					name: thisData.name,//需求名称	                industry:(thisData.industry||thisData.industry==0)?thisData.industry.toString():undefined,//行业	                investmentCost: thisData.investmentCost,//经费投入	                reserveButtUnit: thisData.reserveButtUnit,//拟对接单位	                reserveButtMode: (thisData.reserveButtMode||thisData.reserveButtMode==0)?thisData.reserveButtMode.toString():undefined,//拟对接方式	                reserveSolveMode:(thisData.reserveSolveMode||thisData.reserveSolveMode==0)?thisData.reserveSolveMode.toString():undefined ,//拟解决方式	                publisherName: thisData.publisherName,//联系人	                telephone: thisData.telephone,//联系方式	                summary: thisData.summary?thisData.summary.split(","):[],//需求项目概况this.state.shehui?this.state.shehui.join(","):undefined	                introduce: thisData.introduce,//需求内容	                Pname: thisData.pname,//企业名称	                nature: thisData.nature,//企业特质	                feature: thisData.feature,//企业特征	                ProvinceCity:ProvinceCityArr[0]!=null?ProvinceCityArr:undefined,//地区	                zipCode: thisData.zipCode,//邮政编码	                legalPerson: thisData.legalPerson,//法人名称	                website: thisData.website,//企业网址	                email: thisData.email,//企业邮箱	                pintroduce:thisData.pintroduce,//企业简介				});            } else {                message.warning(data.error[0].message);            };            this.setState({                loading: false,            });        }.bind(this));	}	handleOk() {		this.handleSubmit();	}	handleCancel() {		this.resets();		this.setState({			visible: false		});	}	handleSubmit() {		this.setState({			loading: true		});		if(!this.state.name){			 message.warning("需求名称必须填写");			 this.setState({				loading: false			});			 return;		}		console.log(this.state.ProvinceCity);		if(!this.state.ProvinceCity||this.state.ProvinceCity.length==0||this.state.ProvinceCity[0]==""){			 message.warning("地区必须选择");			 this.setState({				loading: false			});		return;		}		$.ajax({            method: "POST",            dataType: "json",            crossDomain: false,            url: globalConfig.context +( this.state.addState?"/open/api/addDemand":"/open/api/updateDemand"),            data: {            	id:this.state.id,//需求ID                name: this.state.name,//需求名称                type:0,//需求类型                industry:this.state.industry,//行业                investmentCost: this.state.investmentCost,//经费投入                reserveButtUnit: this.state.reserveButtUnit,//拟对接单位                reserveButtMode: this.state.reserveButtMode,//拟对接方式                reserveSolveMode: this.state.reserveSolveMode,//拟解决方式                publisherName: this.state.publisherName,//联系人                telephone: this.state.telephone,//联系方式                summary: this.state.summary?this.state.summary.join(","):undefined,//需求项目概况this.state.shehui?this.state.shehui.join(","):undefined                introduce: this.state.introduce,//需求内容                pname: this.state.Pname,//企业名称                nature: this.state.nature,//企业特质                feature: this.state.feature,//企业特征                province: this.state.ProvinceCity?this.state.ProvinceCity[0]:"",//省                city: this.state.ProvinceCity?this.state.ProvinceCity[1]:"",//市                zipCode: this.state.zipCode,//邮政编码                legalPerson: this.state.legalPerson,//法人名称                website: this.state.website,//企业网址                email: this.state.email,//企业邮箱                pintroduce: this.state.pintroduce,//企业简介            }        }).done(function (data) {            if (!data.error.length) {                message.success(this.state.addState?'新建成功!':"修改成功!");                this.setState({	                visible: false,	            });                this.loadData();                this.resets();            } else {                message.warning(data.error[0].message);            };            this.setState({                loading: false,            });        }.bind(this));	}	resets(){		this.state.name = '',//需求名称        this.state.industry = undefined,//行业        this.state.investmentCost = '',//经费投入        this.state.reserveButtUnit = '',//拟对接单位        this.state.reserveButtMode = '',//拟对接方式        this.state.reserveSolveMode = '',//拟解决方式        this.state.publisherName = '',//联系人        this.state.telephone = '',//联系方式        this.state.summary = '',        this.state.introduce = '',//需求内容        this.state.Pname = '',//企业名称        this.state.nature = undefined,//企业特质        this.state.feature = '',//企业特征        this.state.ProvinceCity =undefined,//省        this.state.zipCode = '',//邮政编码        this.state.legalPerson = '',//法人名称        this.state.website = '',//企业网址        this.state.email = '',//企业邮箱        this.state.pintroduce = ''//企业简介	}	componentWillMount() {		this.loadData(1);	}	render() {		const url="https://api.qrserver.com/v1/create-qr-code/?data=http://"+window.location.host+"/open/demandDetails?id="+this.state.id+"&size=100x100"		const rowSelection = {			selectedRowKeys: this.state.selectedRowKeys,			onChange: (selectedRowKeys, selectedRows) => {				this.setState({					selectedRows: selectedRows.slice(-1),					selectedRowKeys: selectedRowKeys.slice(-1)				});			}		};		const formItemLayout = {			labelCol: { span: 6 },			wrapperCol: { span: 12 }		};		return (			<div className="user-content">				<div className="content-title">					<span className="title">四川科技需求</span>					<div className="patent-addNew">						<Button type="primary" onClick={this.add.bind(this)}>							发布需求<Icon type="plus" />						</Button>					</div>				</div>				<div className="user-search">					<Input						placeholder="需求名称"						value={this.state.seachNames}						className="searchInp"						onChange={(e) => {							this.setState({ seachNames: e.target.value });						}}						style={{ width: 120 }}					/>					<Input						placeholder="企业名称"						value={this.state.seachName}						className="searchInp"						onChange={(e) => {							this.setState({ seachName: e.target.value });						}}						style={{ width: 120 }}					/>					<Input						placeholder="对接单位"						value={this.state.seachReserveButtUnit}						onChange={(e) => {							this.setState({ seachReserveButtUnit: e.target.value });						}}						style={{ width: 120 }}					/>					<Button type="primary" onClick={this.search.bind(this)} className="interval">						搜索					</Button>					<Button onClick={this.reset.bind(this)} className="interval">						重置					</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.bind(this)}						/>					</Spin>				</div>				<Modal					title={this.state.addState ? '新建需求' : '需求详情'}					visible={this.state.visible}					width="900px"					onOk={this.handleOk.bind(this)}					onCancel={this.handleCancel.bind(this)}					okText="保存"					cancelText="取消"				>					<Form layout="horizontal" id="demand-form">						<Spin spinning={this.state.loading}>							<div className="clearfix">								<div className="clearfix">									<FormItem										className="half-item"										{...formItemLayout}										label={											<span>												<strong style={{ color: '#f00' }}>*</strong>需求名称											</span>										}									>										<Input											placeholder="需求名称"											value={this.state.name}											onChange={(e) => {												this.setState({ name: e.target.value });											}}										/>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="行业领域">										<Select											value={this.state.industry}											onChange={(e) => {												this.setState({ industry: e });											}}											placeholder="请选择"										>											<Select.Option value="1">先进制造与自动化</Select.Option>											<Select.Option value="2">电子信息技术</Select.Option>											<Select.Option value="3">新材料技术</Select.Option>											<Select.Option value="4">生物与新药</Select.Option>											<Select.Option value="5">资源与环境</Select.Option>											<Select.Option value="6">新能源</Select.Option>										</Select>									</FormItem>																	<FormItem className="half-item" {...formItemLayout} label="经费投入计划">										<Input											placeholder="经费投入计划"											value={this.state.investmentCost}											onChange={(e) => {												this.setState({ investmentCost: e.target.value });											}}										/>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="拟对接单位">										<Input											placeholder="拟对接单位"											value={this.state.reserveButtUnit}											onChange={(e) => {												this.setState({ reserveButtUnit: e.target.value });											}}										/>																			</FormItem>									<FormItem className="half-item" {...formItemLayout} label="拟对接方式">										<Select											value={this.state.reserveButtMode}											onChange={(e) => {												this.setState({ reserveButtMode: e });											}}											placeholder="请选择对接方式"										>											<Select.Option value="0">直接对接</Select.Option>											<Select.Option value="1">技术合作</Select.Option>																					</Select>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="拟合作方式">										<Select											value={this.state.reserveSolveMode}											onChange={(e) => {												this.setState({ reserveSolveMode: e });											}}											placeholder="请选择解决方式"										>											<Select.Option value="0">技术转让</Select.Option>											<Select.Option value="1">技术入股</Select.Option>											<Select.Option value="2">合作实施</Select.Option>											<Select.Option value="3">委托开发</Select.Option>										</Select>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="项目负责人">										<Input											placeholder="项目负责人"											value={this.state.publisherName}											onChange={(e) => {												this.setState({ publisherName: e.target.value });											}}										/>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="联系电话">										<Input											placeholder="联系电话"											value={this.state.telephone}											onChange={(e) => {												this.setState({ telephone: e.target.value });											}}										/>									</FormItem>								</div>									<FormItem  				                         	labelCol={{ span: 3 }}					                        wrapperCol={{ span: 18 }}				                           	label="需求项目概况"				                         >    			                              <CheckboxGroup options={demandProfile} value={this.state.summary} onChange={(e)=>{this.setState({summary:e})}} />				                   	</FormItem>								<div className="clearfix">																		<FormItem										labelCol={{ span: 3 }}										wrapperCol={{ span: 18 }}										label={											<span>												<strong style={{ color: '#f00' }}>*</strong>需求内容											</span>										}										style={{ margin: '10px 0px' }}									>										<TextArea											autosize={{ minRows: 4, maxRows: 10 }}											placeholder="输入需求内容"											value={this.state.introduce}											onChange={(e) => {												this.setState({ introduce: e.target.value });											}}										/>									</FormItem>								</div>								<Row>									<Col span={8} style={{ fontSize: 18 }}>										技术成果企业情况									</Col>								</Row>								<div className="clearfix">									<FormItem										className="half-item"										{...formItemLayout}										label={											<span>												<strong style={{ color: '#f00' }}>*</strong>企业名称											</span>										}									>										<Input											placeholder="企业名称"											value={this.state.Pname}											onChange={(e) => {												this.setState({ Pname: e.target.value });											}}										/>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="单位性质">										<Select											value={this.state.nature}											onChange={(e) => {												this.setState({ nature: e });											}}											placeholder="请选择单位性质"										>											<Select.Option value="1">国家行政企业</Select.Option>											<Select.Option value="2">公私合作企业</Select.Option>											<Select.Option value="3">中外合资企业</Select.Option>											<Select.Option value="4">社会组织机构</Select.Option>											<Select.Option value="5">国际组织机构</Select.Option>											<Select.Option value="6">外资企业</Select.Option>											<Select.Option value="7">私营企业</Select.Option>											<Select.Option value="8">集体企业</Select.Option>											<Select.Option value="9">国防军事企业</Select.Option>										</Select>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="企业特征">										<Input											placeholder="企业特征"											value={this.state.feature}											onChange={(e) => {												this.setState({ feature: e.target.value });											}}										/>									</FormItem>									<FormItem  className="half-item"	                            		{...formItemLayout}			                           label={											<span>												<strong style={{ color: '#f00' }}>*</strong>企业所在地											</span>										}			                          > 										<Cascader options={citySelect()}  value={this.state.ProvinceCity} placeholder="选择城市"    										onChange={(e,pre) => { this.setState({ ProvinceCity: e }) }} />					                    </FormItem>									<FormItem className="half-item" {...formItemLayout} label="邮政编码">										<Input											placeholder="邮政编码"											value={this.state.zipCode}											onChange={(e) => {												this.setState({ zipCode: e.target.value });											}}										/>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="法定代表人">										<Input											placeholder="法定代表人"											value={this.state.legalPerson}											onChange={(e) => {												this.setState({ legalPerson: e.target.value });											}}										/>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="企业网址">										<Input											placeholder="企业网址"											value={this.state.website}											onChange={(e) => {												this.setState({ website: e.target.value });											}}										/>									</FormItem>									<FormItem className="half-item" {...formItemLayout} label="E-Mail">										<Input											placeholder="E-Mail"											value={this.state.email}											onChange={(e) => {												this.setState({ email: e.target.value });											}}										/>									</FormItem>									</div>									<div className="clearfix">										<FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 19 }} label="企业简介">											<Input type="textarea" rows={4} placeholder="企业简介" value={this.state.pintroduce}	                           				 	onChange={(e) => { this.setState({ pintroduce: e.target.value }) }} style={{width:'95%'}}/>										</FormItem>									</div>									{!this.state.addState&&<div className="clearfix" style={{marginTop:"10px"}}>											<FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 19 }} label="二维码">												<img src={url} style={{width:"100px",height:"100px"}}/>											</FormItem>										</div>									}								</div>													</Spin>					</Form>				</Modal>			</div>		);	}}export default Achievement;
 |