jurisdiction.jsx 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  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, Popconfirm, Spin, Table, Switch, message, DatePicker, Modal, Upload } from 'antd';
  6. import Addjurisdiction from "./addjurisdiction.jsx"
  7. import './userMangagement.less'
  8. import { techAuditStatusList, station, post,urlType } from '../../../dataDic.js';
  9. const Jurisdiction = Form.create()(React.createClass({
  10. loadData(pageNo) {
  11. this.state.data = [];
  12. this.setState({
  13. loading: true
  14. });
  15. $.ajax({
  16. method: "post",
  17. dataType: "json",
  18. crossDomain: false,
  19. url: globalConfig.context + '/api/admin/permissions',
  20. success: function(data) {
  21. if(!data.data || !data.data.one) {
  22. if(data.error && data.error.length) {
  23. message.warning(data.error[0].message);
  24. };
  25. } else {
  26. this.setState({
  27. dataSource: data.data.one,
  28. });
  29. }
  30. }.bind(this),
  31. }).always(function() {
  32. this.setState({
  33. loading: false
  34. });
  35. }.bind(this));
  36. },
  37. getInitialState() {
  38. return {
  39. datauser: {},
  40. selectedRowKeys: [],
  41. selectedRows: [],
  42. loading: false,
  43. addnextVisible: false,
  44. columns: [{
  45. title: '接口名称',
  46. dataIndex: 'name',
  47. key: 'name',
  48. width: '400px'
  49. }, {
  50. title: '接口路径',
  51. dataIndex: 'url',
  52. key: 'url',
  53. }, {
  54. title: '操作',
  55. dataIndex: 'id',
  56. key: 'id',
  57. render: (text, recard) => {
  58. return(
  59. <div>
  60. {recard.children.length>0&&<Button type="primary" onClick={(e)=>{e.stopPropagation(),this.addNextURL(recard)}} style={{marginRight:'15px'}}>新建下级权限</Button>}
  61. <Popconfirm
  62. title={"是否真的删除?"}
  63. onConfirm={(e)=>{this.delectRow(recard)}}
  64. okText="确认"
  65. cancelText="取消"
  66. placement="topLeft">
  67. <Button type="danger" onClick={(e)=>{e.stopPropagation()}}>删除</Button>
  68. </Popconfirm>
  69. </div>
  70. )
  71. }
  72. }],
  73. dataSource: [],
  74. };
  75. },
  76. componentWillMount() {
  77. this.loadData();
  78. },
  79. tableRowClick(record, index) {
  80. this.state.userDetaile = true;
  81. this.state.datauser = record;
  82. this.setState({
  83. ids:record.id,
  84. showDesc: true
  85. });
  86. },
  87. //删除(已改接口)
  88. delectRow(ids) {
  89. this.setState({
  90. loading: true
  91. });
  92. $.ajax({
  93. method: "POST",
  94. dataType: "json",
  95. crossDomain: false,
  96. url: globalConfig.context + "/api/admin/deleteById",
  97. data: {
  98. id: ids.id
  99. }
  100. }).done(function(data) {
  101. if(!data.error.length) {
  102. message.success('删除成功!');
  103. this.setState({
  104. loading: false,
  105. });
  106. } else {
  107. message.warning(data.error[0].message);
  108. };
  109. this.loadData();
  110. }.bind(this));
  111. },
  112. addClick() {
  113. this.state.userDetaile = false;
  114. this.setState({
  115. showDesc: true
  116. });
  117. },
  118. closeDesc(e, s) {
  119. this.state.userDetaile = false;
  120. this.state.showDesc = e;
  121. if(s) {
  122. this.loadData();
  123. };
  124. },
  125. //新建下级
  126. addNext() {
  127. this.setState({
  128. addnextVisible: false
  129. })
  130. },
  131. nextCancel() {
  132. this.setState({
  133. addnextVisible: false
  134. })
  135. },
  136. addNextURL(e) {
  137. this.state.name = '';
  138. this.state.url = '';
  139. this.state.urlType = undefined;
  140. this.setState({
  141. ids: e.id,
  142. preName: e.name,
  143. addnextVisible: true
  144. })
  145. },
  146. //新建二级接口保存
  147. nextSubmit(e) {
  148. e.preventDefault();
  149. this.setState({
  150. loading: true
  151. });
  152. $.ajax({
  153. method: "POST",
  154. dataType: "json",
  155. crossDomain: false,
  156. url: globalConfig.context + '/api/admin/addPermission',
  157. data: {
  158. superId: this.state.preName,
  159. name: this.state.name, //接口名称
  160. type:this.state.urlType,//接口类型
  161. url: this.state.url //接口路径
  162. }
  163. }).done(function(data) {
  164. this.setState({
  165. loading: false
  166. });
  167. if(!data.error.length) {
  168. message.success('保存成功!');
  169. this.addNext();
  170. this.loadData();
  171. } else {
  172. message.warning(data.error[0].message);
  173. }
  174. }.bind(this));
  175. },
  176. render() {
  177. const FormItem = Form.Item;
  178. const formItemLayout = {
  179. labelCol: { span: 8 },
  180. wrapperCol: { span: 14 },
  181. };
  182. const hasSelected = this.state.selectedRowKeys.length > 0;
  183. return(
  184. <div className="user-content" >
  185. <div className="content-title">
  186. <div className="user-search">
  187. <Button type="primary" className="addButton" onClick={this.addClick} style={{marginBottom:'15px'}}>新增权限<Icon type="user"/></Button>
  188. </div>
  189. <div className="patent-table">
  190. <Spin spinning={this.state.loading}>
  191. <Table columns={this.state.columns}
  192. dataSource={this.state.dataSource}
  193. pagination={false}
  194. onRowClick={this.tableRowClick} />
  195. </Spin>
  196. </div>
  197. <Addjurisdiction
  198. userDetaile={this.state.userDetaile}
  199. datauser={this.state.datauser}
  200. showDesc={this.state.showDesc}
  201. closeDesc={this.closeDesc} />
  202. </div >
  203. <Modal maskClosable={false} visible={this.state.addnextVisible}
  204. onOk={this.addNext} onCancel={this.nextCancel}
  205. width='600px'
  206. title='新建下级权限模块'
  207. footer=''
  208. className="admin-desc-content">
  209. <Form layout="horizontal" onSubmit={this.nextSubmit} id="demand-form">
  210. <Spin spinning={this.state.loading}>
  211. <div className="clearfix">
  212. <FormItem className="half-middle"
  213. {...formItemLayout}
  214. label="接口名称" >
  215. <Input placeholder="接口名称" value={this.state.name} style={{width:'230px'}}
  216. onChange={(e)=>{this.setState({name:e.target.value})}} required="required"/>
  217. <span className="mandatory">*</span>
  218. </FormItem>
  219. <FormItem className="half-middle"
  220. {...formItemLayout}
  221. label="接口路径" >
  222. <Input placeholder="接口路径" value={this.state.url} style={{width:'230px'}}
  223. onChange={(e)=>{this.setState({url:e.target.value})}} required="required"/>
  224. <span className="mandatory">*</span>
  225. </FormItem>
  226. <FormItem className="half-middle"
  227. {...formItemLayout}
  228. label="接口类型" >
  229. <Select placeholder="选择接口类型" style={{width:'230px'}}
  230. value={this.state.urlType}
  231. onChange={(e) => { this.setState({ urlType: e }) }}>
  232. {
  233. urlType.map(function (item) {
  234. return <Select.Option key={item.value} >{item.key}</Select.Option>
  235. })
  236. }
  237. </Select>
  238. <span className="mandatory">*</span>
  239. </FormItem>
  240. <FormItem className="half-middle"
  241. {...formItemLayout}
  242. label="上级功能模块" >
  243. <span>{this.state.preName}</span>
  244. </FormItem>
  245. </div>
  246. <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle">
  247. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  248. <Button className="set-submit" type="ghost" onClick={this.nextCancel}>取消</Button>
  249. </FormItem>
  250. </Spin>
  251. </Form >
  252. </Modal>
  253. </div>
  254. );
  255. }
  256. }));
  257. export default Jurisdiction;