selecteOrg.js

import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import {Table,Input,Form,Button,Row,Col,Select,DatePicker,Message,Icon,Modal,Tree,Tooltip} from 'antd';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import { API_SYS_MSG,API_SYSORORG_MANAGE } from '@src/Api';
const TreeNode = Tree.TreeNode;

/* 机构选择组件 */
const SelectedOrg = Form.create()(
	class extends Component {
		state = {
			// 展示
			// modalVisible: true,
			// 机构数据
			orgList: [
			],
			// 是否有搜索结果
			isNodata: {display: 'none'},
			// 选择机构数量
			selectedNum: 5,
			// 选中机构数组及key
			selectedOrg: [],
			selectedKeys: []
		}
		componentDidMount () {
			this.props.onRef(this);
			// 加载机构树
			this.getOrgTreeList();
			// 回填机构
			if (this.props.selectedKeys) {
				this.setState({
					selectedKeys: this.props.selectedKeys,
					selectedOrg: this.props.selectedOrg
				});
			}
		}
		componentWillReceiveProps (nextProps) {
			// 回填选择框选中的机构
			// let selectedKeys = nextProps.selectedKeys;
			// let selectedOrg = nextProps.selectedOrg;
			// console.log('机构回填');
			// console.log(selectedKeys);
			// console.log(selectedOrg);
			// this.setState({
			// 	selectedKeys,
			// 	selectedOrg
			// });
		}
		// 加载机构树
		getOrgTreeList = () => {
			axios.ajax({
				url: API_SYSORORG_MANAGE.getOrgTreeList,
			}).then((res) => {
				if (!res.length) {
					this.setState({isNodata: {display: 'block'}});
					this.setState({orgList: res});
				} else {
					this.setState({isNodata: {display: 'none'}});
					this.setState({orgList: res});
				}
			});
		}
		// 渲染机构数列表
		renderOrgNodes = (arr) => {
			return arr.map((item) => {
				if (item.childOrgs) {
					return (
						<TreeNode
						key={item.id}
						title={item.name}>
							{this.renderOrgNodes(item.childOrgs)}
						</TreeNode>
					);
				} else {
					return (
						<TreeNode key={item.id}  title={item.name}></TreeNode>
					);
				}
			});
		}
		// 点击复选框
		onCheckOrg = (checkedKeys,val) => {
			// 设置selectedOrg  selectedKeys
			let selectedKeys = [], selectedOrg = [];
			val.checkedNodes.forEach((item) => {
				selectedKeys.push(item.key);
				selectedOrg.push({title: item.props.title,key: item.key});
			});
			this.setState({selectedKeys,selectedOrg});
		}
		// 点击树节点触发
		onSelectOrg = (selectedKeys, info) => {
			// 获取当前信息
			console.log('selectedKeys' + selectedKeys);
		}
		// 选择标签上取消选中
		cancelSelected = (key) => {
			let newSelectedKeys = [...this.state.selectedKeys];
			let newSelectedOrg = [...this.state.selectedOrg];
			newSelectedOrg.forEach((item,index) => {
				if (item.key == key) {
					newSelectedOrg.splice(index,1);
				}
			});
			this.setState({selectedOrg: newSelectedOrg});
			newSelectedKeys.forEach((item,index) => {
				if (item == key) {
					newSelectedKeys.splice(index,1);
				}
			});
			this.setState({selectedKeys:newSelectedKeys}, () => {
				console.log(this.state.selectedKeys);
			});
		}
		// 根据名称搜索机构
		search = () => {
			let searchData = this.props.form.getFieldsValue();
			if (!searchData.name) {
				Message.warn('请输入机构名称');
			} else {
				axios.ajax({
					url: API_SYSORORG_MANAGE.getOrgByName,
					data: {name: searchData.name}
				}).then((res) => {
					console.log(res);
					if (!res.length) {
						// console.log('没有数据');
						this.setState({orgList: res});
						this.setState({isNodata: {display: 'block'}});
					} else {
						this.setState({orgList: res});
					}
				});
			}
		}
		// 搜索重置
		reset = () => {
			this.props.form.resetFields();
			this.getOrgTreeList();
		}
		// 确认选择
		handleOk = () => {
			if (!this.state.selectedOrg.length) {
				Message.warn('请选择接收机构');
				return;
			}
			this.props.handleOk(this.state.selectedOrg);
		}
		// 取消
		handleCancel = () => {
			// 如果有选择先清空
			this.setState({
				selectedOrg: [],
				selectedKeys: []
			});
			this.props.handleCancel();
		}
		// 父组件seachForm重置
		searchFormReset = () => {
			this.setState({
				selectedOrg: [],
				selectedKeys: []
			});
		}
		// 对名字判断过长时进行截取处理
	    judgeStr = (str) => {
	        if (str.length >= 8) {
	            return (
	                <Tooltip title={str} placement="bottom" >
	                    {str.slice(0,8) + '...'}
	                </Tooltip>
	                )
	        } else {
	            return str;
	        }
	    }
		render () {

			const TreeNode = Tree.TreeNode;
			const FormItem = Form.Item;
			const {getFieldDecorator}  = this.props.form;
			return (
				<Modal
					width={965}
					title="机构选择"
          			visible={this.props.modalVisible}
          			onOk={this.handleOk}
          			onCancel={this.handleCancel}
          			okText="确认"
                	cancelText="取消"
				>
					<div className="com-selectedOrg">
						<Form>
							<Row>
								<Col span={6}>
									<FormItem label="机构名称">
										{
											getFieldDecorator('name',{
												rules: []
											})(<Input type="text" placeholder="机构名称" />)
										}
									</FormItem>
								</Col>
								<Col span={6}>
									<Button onClick={this.search} style={{background: '#00BB29',color:'#fff',marginTop:43,marginLeft:20}}>查询</Button>
									<Button onClick={this.reset} style={{background: '#ED1719',marginLeft:20,color:'#fff',marginTop:43}}>重置</Button>
								</Col>
							</Row>
						</Form>
						<WhiteBar title="详细数据" />
						<div>
							<Row gutter={10}>
								<Col span={14}>
									<div className="treeWrapper">
										<div className="title">机构名称</div>
										<div className="treeBox">
											<Tree
										        checkable
										        onCheck={this.onCheckOrg}
										        onSelect={this.onSelectOrg}
										        checkStrictly={true}
										        checkedKeys={this.state.selectedKeys}
										    >
										        {this.renderOrgNodes(this.state.orgList)}
										    </Tree>
										    <p style={this.state.isNodata} className="noData">No data</p>
										</div>
									</div>
								</Col>
								<Col span={10}>
									<div className="selectWrapper">
										<p className="title">当前已选择{this.state.selectedOrg.length}项</p>
										<ul className="selectBox">
											{
												this.state.selectedOrg.map((item) => {
													return (
														<li key={item.key}>
															<span className="select-item">
								                        		{this.judgeStr(item.title)}
								                        		<span onClick={this.cancelSelected.bind(this,item.key)} className="cancel">×</span>
								                      		</span>
														</li>
													);
												})
											}
										</ul>
									</div>
								</Col>
							</Row>
						</div>
					</div>
				</Modal>
				
			);
		}
	}
)

export default SelectedOrg;