| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 | 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: "get",			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;
 |