roles.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload ,Checkbox} from 'antd';
  6. import Newrole from "./newRole.jsx"
  7. import './userMangagement.less'
  8. import {roleResources} from '../../../dataDic.js';
  9. const CheckboxGroup = Checkbox.Group;
  10. const Roles=Form.create()(React.createClass({
  11. loadData(pageNo) {
  12. this.state.data = [];
  13. this.setState({
  14. loading: true
  15. });
  16. $.ajax({
  17. method: "post",
  18. dataType: "json",
  19. crossDomain: false,
  20. url: globalConfig.context + '/api/admin/roles',
  21. data: {
  22. pageNo: pageNo || 1,
  23. pageSize: this.state.pagination.pageSize,
  24. roleName:this.state.roleNameSearch,
  25. },
  26. success: function (data) {
  27. let theArr = [];
  28. if (!data.data) {
  29. if (data.error && data.error.length) {
  30. message.warning(data.error[0].message);
  31. };
  32. } else {
  33. for (let i = 0; i < data.data.list.length; i++) {
  34. let thisdata = data.data.list[i];
  35. theArr.push({
  36. key: i,
  37. id: thisdata.id,
  38. roleName: thisdata.roleName,
  39. creater:thisdata.creater,
  40. createTime:thisdata.createTimez,
  41. });
  42. };
  43. this.state.pagination.current = data.data.pageNo;
  44. this.state.pagination.total = data.data.totalCount;
  45. };
  46. if(!data.data.list.length){
  47. this.state.pagination.current=0
  48. this.state.pagination.total=0
  49. }
  50. this.setState({
  51. dataSource: theArr,
  52. pagination: this.state.pagination,
  53. selectedRowKeys:[]
  54. });
  55. }.bind(this),
  56. }).always(function () {
  57. this.setState({
  58. loading: false
  59. });
  60. }.bind(this));
  61. },
  62. getInitialState() {
  63. return {
  64. datauser:{},
  65. selectedRowKeys: [],
  66. selectedRows: [],
  67. loading: false,
  68. pagination: {
  69. defaultCurrent: 1,
  70. defaultPageSize: 10,
  71. showQuickJumper: true,
  72. pageSize: 10,
  73. onChange: function (page) {
  74. this.loadData(page);
  75. }.bind(this),
  76. showTotal: function (total) {
  77. return '共' + total + '条数据';
  78. }
  79. },
  80. columns: [
  81. {
  82. title: '角色名称',
  83. dataIndex: 'roleName',
  84. key: 'roleName',
  85. width:'300px'
  86. }, {
  87. title: '创建人',
  88. dataIndex: 'creater',
  89. key: 'creater',
  90. width:'300px'
  91. }, {
  92. title: '创建时间',
  93. dataIndex: 'createTime',
  94. key: 'createTime',
  95. },{
  96. title: '离职转交配置',
  97. dataIndex: 'ee',
  98. key: 'ee',
  99. render: (text, record, index) => {
  100. return <div>
  101. <Button onClick={(e) =>{ e.stopPropagation(), this.visit(record)}} type="primary">离职转交配置</Button>
  102. </div>
  103. }
  104. },
  105. ],
  106. dataSource: [],
  107. };
  108. },
  109. //进入离职权限配置
  110. visit(record) {
  111. let rid=record.id;
  112. this.state.resources=undefined;
  113. this.setState({
  114. visible2: true,
  115. rid:record.id,
  116. name:record.roleName,
  117. });
  118. this.resourcesDetail(rid);
  119. },
  120. //关闭离职配置
  121. handleCancel2(){
  122. this.setState({
  123. visible2: false
  124. });
  125. },
  126. //点击离职资源配置保存
  127. resourcesDetail(rid) {
  128. this.setState({
  129. selectedRowKeys: [],
  130. loading: true,
  131. });
  132. $.ajax({
  133. method: "POST",
  134. dataType: "json",
  135. crossDomain: false,
  136. url: globalConfig.context + "/api/admin/role/ResourcesDetail",
  137. data: {
  138. rid:rid,
  139. }
  140. }).done(function (data) {
  141. if (!data.error.length) {
  142. let resourcesData=[];
  143. for(let i=0;i<data.data.length;i++){
  144. resourcesData.push(data.data[i].resources.toString())
  145. }
  146. this.setState({
  147. loading: false,
  148. resources:resourcesData
  149. });
  150. } else {
  151. message.warning(data.error[0].message);
  152. };
  153. }.bind(this));
  154. },
  155. //点击离职资源配置保存
  156. resourcesSubmit(e) {
  157. e.preventDefault();
  158. this.setState({
  159. selectedRowKeys: [],
  160. loading: true
  161. });
  162. $.ajax({
  163. method: "POST",
  164. dataType: "json",
  165. crossDomain: false,
  166. url: globalConfig.context + "/api/admin/role/addResources",
  167. data: {
  168. rid:this.state.rid,
  169. resources:this.state.resources.join(","),
  170. }
  171. }).done(function (data) {
  172. if (!data.error.length) {
  173. message.success('配置成功!');
  174. this.setState({
  175. loading: false,
  176. visible2: false
  177. });
  178. } else {
  179. message.warning(data.error[0].message);
  180. };
  181. }.bind(this));
  182. },
  183. componentWillMount() {
  184. this.loadData();
  185. },
  186. tableRowClick(record, index) {
  187. this.state.userDetaile=true;
  188. this.state.datauser = record;
  189. this.setState({
  190. showDesc: true
  191. });
  192. },
  193. //删除
  194. delectRow() {
  195. let deletedIds = [];
  196. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  197. let rowItem = this.state.selectedRows[idx];
  198. if (rowItem.id) {
  199. deletedIds.push(rowItem.id)
  200. };
  201. };
  202. this.setState({
  203. selectedRowKeys: [],
  204. loading: true
  205. });
  206. $.ajax({
  207. method: "POST",
  208. dataType: "json",
  209. crossDomain: false,
  210. url: globalConfig.context + "/api/admin/role/delete",
  211. data: {
  212. data:JSON.stringify(
  213. deletedIds
  214. )
  215. }
  216. }).done(function (data) {
  217. if (!data.error.length) {
  218. message.success('删除成功!');
  219. this.setState({
  220. loading: false,
  221. });
  222. } else {
  223. message.warning(data.error[0].message);
  224. };
  225. this.loadData();
  226. }.bind(this));
  227. },
  228. addClick() {
  229. this.state.userDetaile=false;
  230. this.setState({
  231. showDesc: true
  232. });
  233. },
  234. closeDesc(e, s) {
  235. this.state.userDetaile=false;
  236. this.state.showDesc = e;
  237. if (s) {
  238. this.loadData();
  239. };
  240. },
  241. search() {
  242. this.loadData();
  243. },
  244. reset() {
  245. this.state.roleNameSearch='';
  246. this.loadData();
  247. },
  248. render() {
  249. const rowSelection = {
  250. selectedRowKeys: this.state.selectedRowKeys,
  251. onChange: (selectedRowKeys, selectedRows) => {
  252. this.setState({
  253. selectedRows: selectedRows.slice(-1),
  254. selectedRowKeys: selectedRowKeys.slice(-1)
  255. });
  256. },
  257. onSelectAll: (selected, selectedRows, changeRows) => {
  258. this.setState({
  259. selectedRowKeys:[]
  260. })
  261. },
  262. };
  263. const hasSelected = this.state.selectedRowKeys.length > 0;
  264. const FormItem = Form.Item
  265. return (
  266. <div className="user-content" >
  267. <div className="content-title">
  268. <div className="user-search">
  269. <Input placeholder="角色名称" style={{width:'150px'}}
  270. value={this.state.roleNameSearch}
  271. onChange={(e) => { this.setState({ roleNameSearch: e.target.value }); }} />
  272. <Button type="primary" onClick={this.search}>搜索</Button>
  273. <Button onClick={this.reset}>重置</Button>
  274. <Button type="danger"
  275. disabled={!hasSelected}
  276. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  277. <Button type="primary" className="addButton" onClick={this.addClick} >新增用户<Icon type="user" /></Button>
  278. </div>
  279. <div className="patent-table">
  280. <Spin spinning={this.state.loading}>
  281. <Table columns={this.state.columns}
  282. dataSource={this.state.dataSource}
  283. rowSelection={rowSelection}
  284. pagination={this.state.pagination}
  285. onRowClick={this.tableRowClick} />
  286. </Spin>
  287. </div>
  288. <Newrole
  289. userDetaile={this.state.userDetaile}
  290. datauser={this.state.datauser}
  291. showDesc={this.state.showDesc}
  292. closeDesc={this.closeDesc} />
  293. </div >
  294. <div className="patent-desc">
  295. <Modal maskClosable={false} visible={this.state.visible2}
  296. onOk={this.checkResources} onCancel={this.handleCancel2}
  297. width='600px'
  298. title='离职转交配置'
  299. footer=''
  300. className="admin-desc-content">
  301. <Form horizontal onSubmit={this.resourcesSubmit} id="add-form">
  302. <Spin spinning={this.state.loading}>
  303. <FormItem
  304. labelCol={{ span: 10 }}
  305. wrapperCol={{ span: 4 }}
  306. label="角色名称"
  307. >
  308. {this.state.name}
  309. </FormItem>
  310. <FormItem
  311. labelCol={{ span: 10 }}
  312. wrapperCol={{ span: 4 }}
  313. label="请选择离职转交配置"
  314. >
  315. <CheckboxGroup options={roleResources} value={this.state.resources} onChange={(e)=>{this.setState({resources:e})}} />
  316. </FormItem>
  317. <FormItem wrapperCol={{ span: 12, offset: 7 }}>
  318. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  319. <Button className="set-submit" type="ghost" onClick={this.handleCancel2} style={{marginLeft:'100px'}}>取消</Button>
  320. </FormItem>
  321. </Spin>
  322. </Form >
  323. </Modal>
  324. </div>
  325. </div>
  326. );
  327. }
  328. }));
  329. export default Roles;