kede-client/js/component/manageCenter/set/userManagementS/newRole.jsx

import React from 'react';
import { Icon, Table, Modal, message, Spin, Input, Select, Button, Form, Tree } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import './userMangagement.less';
const TreeNodet = Tree.TreeNode;

const Newrole = Form.create()(React.createClass({
	addloadData() {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "post",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/permissions',
			data: {
			},
			success: function (data) {
				let theArr = [];
				if (!data.data || !data.data.one) {
					if (data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
				} else {
					this.setState({
						Interface: data.data.one,
					});
				};
			}.bind(this),
		}).always(function () {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	getInitialState() {
		return {
			loading: false,
			visible: false,
			expandedKeys: [],
			autoExpandParent: true,
			checkedKeys: [],
			selectedKeys: [],
			renderTreeNodes: undefined,
			Interface: []
		};
	},
	handleSubmit(e) {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			let selectAllId = this.state.checkedKeys || [];
			if (!err) {
				this.setState({
					loading: true
				});
				// if(selectAllId){
				// 	if(selectAllId[0]==null){
				// 		selectAllId.splice(0,1)
				// 	}
				// }
				$.ajax({
					method: "POST",
					dataType: "json",
					crossDomain: false,
					url: globalConfig.context + '/api/admin/role',
					data: {
						data: JSON.stringify({
							'id': this.state.ids ? this.state.ids : null,
							'roleName': this.state.roleName,
							'roleType': this.state.roleType,
							'permissions': selectAllId.checked ? selectAllId.checked : selectAllId
						})
					}
				}).done(function (data) {
					this.setState({
						loading: false
					});
					if (!data.error.length) {
						message.success('保存成功！');
						this.handleOk()
					} else {
						message.warning(data.error[0].message);
					}
				}.bind(this));
			}
		});
	},
	//查看基本详情基本信息
	loaduser(record) {
		if (record) {
			$.ajax({
				method: "post",
				dataType: "json",
				crossDomain: false,
				url: globalConfig.context + '/api/admin/role/rolePermission',
				data: {
					id: record.id
				},
				success: function (data) {
					let thisData = data.data;
					if (!thisData) {
						if (data.error && data.error.length) {
							message.warning(data.error[0].message);
						};
						thisData = {};
					};
					let idList = [];
					thisData.map(function (item) {
						idList.push(
							item.pid
						)
					})
					this.setState({
						ids: record.id,
						roleName: thisData[0].rname,
						roleType: thisData[0].roleType,
						checkedKeys: idList,
					});
				}.bind(this),
			}).always(function () {
				this.setState({
					loading: false
				});
			}.bind(this));
		}
	},
	handleOk(e) {
		this.setState({
			visible: false,
		});
		this.props.closeDesc(false, true);
	},
	handleCancel(e) {
		this.setState({
			visible: false,
		});
		this.props.closeDesc(false);
	},
	componentWillMount() {
		this.addloadData()
	},
	componentWillReceiveProps(nextProps) { //props改变时触发
		this.state.visible = nextProps.showDesc;
		if (nextProps.userDetaile && nextProps.showDesc) {
			if (nextProps.datauser && nextProps.datauser.id) {
				this.loaduser(nextProps.datauser)
			}
		} else {
			this.setState({
				checkedKeys: [],
				datauser: {},
				roleName: '',
				roleType: '',
				ids: '',
			})
		}
	},
	//权限多选
	onExpand(expandedKeys) {
		this.setState({
			expandedKeys,
			autoExpandParent: false,
		});
	},
	onCheck(checkedKeys) {
		this.setState({ checkedKeys: checkedKeys });
	},
	onSelect(selectedKeys, info) {
		this.setState({ selectedKeys });
	},
	renderTreeNodes(data) {
		return data.map((item) => {
			if (item.children) {
				return (
					<TreeNodet title={item.name} key={item.id} dataRef={item}>
						{this.renderTreeNodes(item.children)}
					</TreeNodet>
				);
			}
			return <TreeNodet title={item.name} key={item.id} dataRef={item} />
			// return <TreeNodet {...item} />;
		});
	},
	tableRowClick(record, index) {
	},
	render() {
		const FormItem = Form.Item
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 14 },
		};
		return (
			<div>
				<Modal maskClosable={false} visible={this.state.visible}
					onOk={this.handleOk} onCancel={this.handleCancel}
					width='1200px'
					title={!this.props.userDetaile ? '添加角色' : '编辑角色'}
					footer=''
					className="admin-desc-content">
					<Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{ paddingBottom: '40px' }} required="required">
						<Spin spinning={this.state.loading}>
							<div className="clearfix">
								<div className="clearfix">
									<FormItem className="half-item"
										{...formItemLayout}
										label="角色名称" >
										<Input placeholder="角色名称" value={this.state.roleName} onChange={(e) => { this.setState({ roleName: e.target.value }) }} style={{ width: '200px' }} required="required" />
										<span className="mandatory">*</span>
									</FormItem>
									<FormItem className="half-item"
										{...formItemLayout}
										label="" >
										<Button className="set-submit" type="primary" htmlType="submit">保存</Button>
										<Button className="set-submit" type="ghost" onClick={this.handleCancel}>返回</Button>
									</FormItem>
									<FormItem className="half-item"
										{...formItemLayout}
										label="权限编号" >
										<Input placeholder="权限编号" value={this.state.roleType} onChange={(e) => { this.setState({ roleType: e.target.value }) }} style={{ width: '200px' }} />
									</FormItem>
								</div>
								<div className="clearfix" style={{ marginLeft: '90px' }}>
									<Tree
										checkable
										onExpand={this.onExpand}
										checkStrictly={true}
										expandedKeys={this.state.expandedKeys}
										autoExpandParent={this.state.autoExpandParent}
										onCheck={this.onCheck}
										checkedKeys={this.state.checkedKeys}
										onSelect={this.onSelect}
										selectedKeys={this.state.selectedKeys}
									>
										{this.renderTreeNodes(this.state.Interface)}
									</Tree>
								</div>
							</div>
						</Spin>
					</Form >
				</Modal>
			</div>
		)
	}
}));

export default Newrole;