kede-client/js/component/manageCenter/set/userManagementS/jurisdiction.jsx

import React from 'react';
import ReactDom from 'react-dom';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import {
	Form,
	Radio,
	Icon,
	Button,
	Input,
	Select,
	Popconfirm,
	Spin,
	Table,
	Switch,
	message,
	DatePicker,
	Modal,
	Upload,
	Tabs
} from 'antd';
import Addjurisdiction from "./addjurisdiction.jsx"
import './userMangagement.less'
import { techAuditStatusList, station, post,urlType } from '../../../dataDic.js';
import {ChooseList} from "../../order/orderNew/chooseList";

const TabPane = Tabs.TabPane;

const Jurisdiction = Form.create()(React.createClass({
	loadData(pageNo) {
		this.state.data = [];
		this.setState({
			loading: true
		});
		$.ajax({
			method: "post",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/permissions',
			success: function(data) {
				console.log(data)
				if(!data.data || !data.data.one) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
				} else {
					this.setState({
						dataSource: data.data.one,
					});
				}
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	getInitialState() {
		return {
			datauser: {},
			selectedRowKeys: [],
			selectedRows: [],
			loading: false,
			addnextVisible: false,
			columns: [{
				title: '接口名称',
				dataIndex: 'name',
				key: 'name',
				width: '400px'
			}, {
				title: '接口路径',
				dataIndex: 'url',
				key: 'url',
			}, {
				title: '操作',
				dataIndex: 'id',
				key: 'id',
				render: (text, recard) => {
					return(
						<div>
							{recard.url.indexOf('.html#')<=0&&<Button type="primary" onClick={(e)=>{e.stopPropagation(),this.addNextURL(recard)}} style={{marginRight:'15px'}}>新建下级权限</Button>}
	                        <Popconfirm
	                                title={"是否真的删除?"}
	                                onConfirm={(e)=>{this.delectRow(recard)}}
	                                okText="确认"
	                                cancelText="取消"
	                                placement="topLeft">
	                                <Button type="danger" onClick={(e)=>{e.stopPropagation()}}>删除</Button>
	                        </Popconfirm>
                        </div>
					)
				}
			}],
			dataSource: [],
		};
	},
	componentWillMount() {
		this.loadData();
	},
	tableRowClick(record, index) {
		this.state.userDetaile = true;
		this.state.datauser = record;
		this.setState({
			ids:record.id,
			showDesc: true
		});
	},
	//删除(已改接口)
	delectRow(ids) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "POST",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/deleteById",
			data: {
				id: ids.id
			}
		}).done(function(data) {
			if(!data.error.length) {
				message.success('删除成功！');
				this.setState({
					loading: false,
				});
			} else {
				message.warning(data.error[0].message);
			};
			this.loadData();
		}.bind(this));
	},
	addClick() {
		this.state.userDetaile = false;
		this.setState({
			showDesc: true
		});
	},
	closeDesc(e, s) {
		this.state.userDetaile = false;
		this.state.showDesc = e;
		if(s) {
			this.loadData();
		};
	},
	//新建下级
	addNext() {
		this.setState({
			addnextVisible: false
		})
	},
	nextCancel() {
		this.setState({
			addnextVisible: false
		})
	},
	addNextURL(e) {
		this.state.name = '';
		this.state.url = '';
		this.state.urlType = undefined;
		this.setState({
			ids: e.id,
			preName: e.name,
			addnextVisible: true
		})
	},
	//项目任务旧数据处理
	 handles(){
		$.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/open/pushOrderArrearsDun",
      data: {},
      success: function (data) {
		  if(data.error.length) {
			  message.warning(data.error[0].message)
		  }else {
			  message.warning("调用成功!")
		  }
	  }.bind(this),
    }).always(
      function () {
      }.bind(this)
    );
    },
	//新建二级接口保存
	nextSubmit(e) {
		e.preventDefault();
		this.setState({
			loading: true
		});
		$.ajax({
			method: "POST",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/addPermission',
			data: {
				superId: this.state.preName,
				name: this.state.name, //接口名称
				type:this.state.urlType,//接口类型
				url: this.state.url //接口路径
			}
		}).done(function(data) {
			this.setState({
				loading: false
			});
			if(!data.error.length) {
				message.success('保存成功！');
				this.addNext();
				this.loadData();
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},
	changeList(arr) {
		const newArr = [];
		this.state.columns.forEach(item => {
			arr.forEach(val => {
				if (val === item.title) {
					newArr.push(item);
				}
			});
		});
		this.setState({
			changeList: newArr
		});
	},
	render() {
		const FormItem = Form.Item;
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 14 },
		};
		const hasSelected = this.state.selectedRowKeys.length > 0;
		return(
			<div className="user-content" >
                <div className="content-title">
					<Tabs defaultActiveKey="1" className="test">
						<TabPane tab="操作" key="1">
							<div className="user-search">
								{/*<Button type="primary" onClick={this.handles} style={{marginLeft:'10px',float:'right'}}>测试欠款催发</Button>*/}
								<Button type="primary" className="addButton" onClick={this.addClick} style={{marginBottom:'15px'}}>新增权限<Icon type="user"/></Button>
							</div>
						</TabPane>
						<TabPane tab="更改表格显示数据" key="2">
							<div style={{ marginLeft: 10 }}>
								<ChooseList
									columns={this.state.columns}
									changeFn={this.changeList}
									changeList={this.state.changeList}
									top={55}
									margin={11}
								/>
							</div>
						</TabPane>
					</Tabs>
	                <div className="patent-table">
	                    <Spin spinning={this.state.loading}>
	                        <Table columns={
								this.state.changeList
									? this.state.changeList
									: this.state.columns
								}
							    style={{
								   cursor: 'pointer',
							    }}
	                            dataSource={this.state.dataSource}
	                            pagination={false}
	                            onRowClick={this.tableRowClick} />
	                    </Spin>
	                </div>
	                <Addjurisdiction
	                    userDetaile={this.state.userDetaile}
	                    datauser={this.state.datauser}
	                    showDesc={this.state.showDesc}
	                    closeDesc={this.closeDesc} />
	            </div >
	            <Modal maskClosable={false} visible={this.state.addnextVisible}
                        onOk={this.addNext} onCancel={this.nextCancel}
                        width='600px'
                        title='新建下级权限模块'
                        footer=''
                        className="admin-desc-content">
			            <Form layout="horizontal" onSubmit={this.nextSubmit} id="demand-form">
			                <Spin spinning={this.state.loading}>
			                        <div className="clearfix">
				                    	<FormItem className="half-middle"
					                            {...formItemLayout}
					                            label="接口名称" >
				                                    <Input placeholder="接口名称" value={this.state.name} style={{width:'230px'}}
				                                    onChange={(e)=>{this.setState({name:e.target.value})}} required="required"/>
					                   			<span className="mandatory">*</span>
					                   </FormItem>
					                    <FormItem className="half-middle"
					                            {...formItemLayout}
					                            label="接口路径" >
				                                    <Input placeholder="接口路径" value={this.state.url} style={{width:'230px'}}
				                                    onChange={(e)=>{this.setState({url:e.target.value})}} required="required"/>
					                    		<span className="mandatory">*</span>
					                    </FormItem>
					                     <FormItem className="half-middle"
					                            {...formItemLayout}
					                            label="接口类型" >
			                                    <Select placeholder="选择接口类型" style={{width:'230px'}}
						                            value={this.state.urlType}
						                            onChange={(e) => { this.setState({ urlType: e }) }}>
						                            {
					                                    urlType.map(function (item) {
					                                            return <Select.Option key={item.value} >{item.key}</Select.Option>
					                                    })
					                                }
							                    </Select>
					                    		<span className="mandatory">*</span>
					                    </FormItem>
			                   		    <FormItem className="half-middle"
					                            {...formItemLayout}
					                            label="上级功能模块" >
				                                   <span>{this.state.preName}</span>
					                    </FormItem>
				                    </div>
			                    <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle">
			                        <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
			                        <Button className="set-submit" type="ghost" onClick={this.nextCancel}>取消</Button>
			                    </FormItem>
			                </Spin>
			            </Form >
			        </Modal>
            </div>
		);
	}
}));

export default Jurisdiction;