roles.jsx 13 KB

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