newRole.jsx 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. import React from 'react';
  2. import { Icon, Table, Modal, message, Spin, Input, Select, Button, Form ,Tree} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './userMangagement.less';
  6. import {} from '../../../dataDic.js';
  7. const TreeNodet = Tree.TreeNode;
  8. const treeData = [
  9. {
  10. title: '0-0',
  11. key: '0-0',
  12. children: [
  13. {
  14. title: '0-0-0',
  15. key: '0-0-0',
  16. children: [
  17. { title: '0-0-0-0', key: '0-0-0-0' },
  18. { title: '0-0-0-1', key: '0-0-0-1' },
  19. { title: '0-0-0-2', key: '0-0-0-2' },
  20. ],
  21. },
  22. {
  23. title: '0-0-1',
  24. key: '0-0-1',
  25. children: [
  26. { title: '0-0-1-0', key: '0-0-1-0' },
  27. { title: '0-0-1-1', key: '0-0-1-1' },
  28. { title: '0-0-1-2', key: '0-0-1-2' },
  29. ],
  30. }, {
  31. title: '0-0-2',
  32. key: '0-0-2',
  33. }],
  34. },
  35. {
  36. title: '0-1',
  37. key: '0-1',
  38. children: [
  39. { title: '0-1-0-0', key: '0-1-0-0' },
  40. { title: '0-1-0-1', key: '0-1-0-1' },
  41. { title: '0-1-0-2', key: '0-1-0-2' },
  42. ],
  43. }, {
  44. title: '0-2',
  45. key: '0-2',
  46. }];
  47. const Newrole = Form.create()(React.createClass({
  48. addloadData() {
  49. this.setState({
  50. loading: true
  51. });
  52. $.ajax({
  53. method: "post",
  54. dataType: "json",
  55. crossDomain: false,
  56. url: globalConfig.context + '/api/admin/permissions',
  57. data: {
  58. },
  59. success: function(data) {
  60. let theArr = [];
  61. if(!data.data || !data.data.one) {
  62. if(data.error && data.error.length) {
  63. message.warning(data.error[0].message);
  64. };
  65. } else {
  66. this.setState({
  67. Interface: data.data.one,
  68. });
  69. };
  70. }.bind(this),
  71. }).always(function() {
  72. this.setState({
  73. loading: false
  74. });
  75. }.bind(this));
  76. },
  77. getInitialState() {
  78. return {
  79. loading: false,
  80. visible: false,
  81. expandedKeys: [],
  82. autoExpandParent: true,
  83. checkedKeys: [],
  84. selectedKeys: [],
  85. renderTreeNodes: undefined,
  86. Interface:[]
  87. };
  88. },
  89. handleSubmit(e) {
  90. e.preventDefault();
  91. this.props.form.validateFields((err, values) => {
  92. let selectAllId = this.state.checkedKeys;
  93. if(!err) {
  94. this.setState({
  95. loading: true
  96. });
  97. $.ajax({
  98. method: "POST",
  99. dataType: "json",
  100. crossDomain: false,
  101. url: globalConfig.context + '/api/admin/role',
  102. data: {
  103. data:JSON.stringify({
  104. 'id':this.state.id?this.state.id:null,
  105. 'roleName': this.state.roleName,
  106. 'permissions': selectAllId
  107. })
  108. }
  109. }).done(function(data) {
  110. this.setState({
  111. loading: false
  112. });
  113. if(!data.error.length) {
  114. message.success('保存成功!');
  115. this.handleCancel()
  116. } else {
  117. message.warning(data.error[0].message);
  118. }
  119. }.bind(this));
  120. }
  121. });
  122. },
  123. //查看基本详情基本信息
  124. loaduser(record){
  125. if(record){
  126. $.ajax({
  127. method: "post",
  128. dataType: "json",
  129. crossDomain: false,
  130. url: globalConfig.context + '/api/admin/role/rolePermission',
  131. data: {
  132. id: record.id
  133. },
  134. success: function (data) {
  135. let thisData = data.data;
  136. if (!thisData) {
  137. if (data.error && data.error.length) {
  138. message.warning(data.error[0].message);
  139. };
  140. thisData = {};
  141. };
  142. let idList=[];
  143. thisData.map(function(item){
  144. idList.push(
  145. item.pid
  146. )
  147. })
  148. this.setState({
  149. roleName:thisData[0].rname,
  150. checkedKeys:idList,
  151. });
  152. }.bind(this),
  153. }).always(function () {
  154. this.setState({
  155. loading: false
  156. });
  157. }.bind(this));
  158. }
  159. },
  160. handleOk(e) {
  161. this.setState({
  162. visible: false,
  163. });
  164. this.props.closeDesc(false, true);
  165. },
  166. handleCancel(e) {
  167. this.setState({
  168. visible: false,
  169. });
  170. this.props.closeDesc(false);
  171. },
  172. componentWillMount() {
  173. this.addloadData()
  174. },
  175. componentWillReceiveProps(nextProps) { //props改变时触发
  176. this.state.visible = nextProps.showDesc;
  177. if(nextProps.userDetaile && nextProps.showDesc) {
  178. if(nextProps.datauser && nextProps.datauser.id) {
  179. this.loaduser(nextProps.datauser)
  180. }
  181. }else{
  182. this.setState({
  183. selectedRowKeyst: [],
  184. datauser: {},
  185. roleName:''
  186. })
  187. }
  188. },
  189. //权限多选
  190. onExpand(expandedKeys){
  191. this.setState({
  192. expandedKeys,
  193. autoExpandParent: false,
  194. });
  195. },
  196. onCheck(checkedKeys){
  197. this.setState({checkedKeys:checkedKeys });
  198. },
  199. onSelect(selectedKeys, info){
  200. this.setState({ selectedKeys });
  201. },
  202. renderTreeNodes(data){
  203. return data.map((item) => {
  204. if(item.children) {
  205. return(
  206. <TreeNodet title={item.name} key={item.id} dataRef={item}>
  207. {this.renderTreeNodes(item.children)}
  208. </TreeNodet>
  209. );
  210. }
  211. return <TreeNodet {...item} />;
  212. });
  213. },
  214. tableRowClick(record, index) {
  215. },
  216. render() {
  217. const FormItem = Form.Item
  218. const formItemLayout = {
  219. labelCol: { span: 8 },
  220. wrapperCol: { span: 14 },
  221. };
  222. return(
  223. <div>
  224. <Modal maskClosable={false} visible={this.state.visible}
  225. onOk={this.handleOk} onCancel={this.handleCancel}
  226. width='1000px'
  227. title={!this.props.userDetaile?'添加角色':'编辑角色'}
  228. footer=''
  229. className="admin-desc-content">
  230. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} required="required">
  231. <Spin spinning={this.state.loading}>
  232. <div className="clearfix">
  233. <div className="clearfix">
  234. <FormItem className="half-item"
  235. {...formItemLayout}
  236. label="角色名称" >
  237. <Input placeholder="角色名称" value={this.state.roleName} onChange={(e)=>{this.setState({roleName:e.target.value})}} style={{width:'200px'}} required="required"/>
  238. <span className="mandatory">*</span>
  239. </FormItem>
  240. <FormItem className="half-item"
  241. {...formItemLayout}
  242. label="" >
  243. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  244. <Button className="set-submit" type="ghost" onClick={this.handleCancel}>返回</Button>
  245. </FormItem>
  246. </div>
  247. <div className="clearfix" style={{marginLeft:'90px'}}>
  248. <Tree
  249. checkable
  250. onExpand={this.onExpand}
  251. expandedKeys={this.state.expandedKeys}
  252. autoExpandParent={this.state.autoExpandParent}
  253. onCheck={this.onCheck}
  254. checkedKeys={this.state.checkedKeys}
  255. onSelect={this.onSelect}
  256. selectedKeys={this.state.selectedKeys}
  257. >
  258. {this.renderTreeNodes(this.state.Interface)}
  259. </Tree>
  260. </div>
  261. </div>
  262. </Spin>
  263. </Form >
  264. </Modal>
  265. </div>
  266. )
  267. }
  268. }));
  269. export default Newrole;