kede-client/js/component/manageCenter/demand/sichuan/sichuan.jsx

import React from 'react';
import {
	Icon,
	Button,
	Input,
	Select,
	Spin,
	Checkbox,
	Cascader,
	Table,
	Form,
	Switch,
	message,
	DatePicker,
	Modal,
	Row,
	Col,
	InputNumber, Tabs,
} 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';
import {ChooseList} from "../../order/orderNew/chooseList";
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;

const TabPane = Tabs.TabPane;

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>
						);
					}
				}
			]
		};
		this.changeList = this.changeList.bind(this);
	}


	//删除
	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);
	}
	changeList(arr) {
		const newArr = [];
		this.state.columns.forEach(item => {
			arr.forEach(val => {
				if (val === item.title) {
					newArr.push(item);
				}
			});
		});
		this.setState({
			changeList: newArr
		});
	}
	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>
				<Tabs defaultActiveKey="1" className="test">
					<TabPane tab="搜索" key="1">
						<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>
					</TabPane>
					<TabPane tab="更改表格显示数据" key="2">
						<div style={{ marginLeft: 10 }}>
							<ChooseList
								columns={this.state.columns}
								changeFn={this.changeList}
								changeList={this.state.changeList}
								top={55}
								margin={11}
							/>
						</div>
					</TabPane>
				</Tabs>
				<div className="patent-table">
					<Spin spinning={this.state.loading}>
						<Table
							columns={
								this.state.changeList
									? this.state.changeList
									: this.state.columns
							}
							style={{
								cursor: 'pointer',
							}}
							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;