|
@@ -1,12 +1,11 @@
|
|
|
import React from 'react';
|
|
|
-import { Table, Button, Input, Spin, Message, Select, Modal, Tag } from 'antd';
|
|
|
+import { Table, Button, Input, Spin, Message, Select, Modal, Tag, Icon } from 'antd';
|
|
|
import ajax from 'jquery/src/ajax/xhr.js'
|
|
|
import $ from 'jquery/src/ajax';
|
|
|
|
|
|
-export default class Role extends React.Component {
|
|
|
- constructor(props) {
|
|
|
- super(props);
|
|
|
- this.state = {
|
|
|
+const Role = React.createClass({
|
|
|
+ getInitialState() {
|
|
|
+ return {
|
|
|
visible: false,
|
|
|
disabled: false,
|
|
|
name: '',
|
|
@@ -24,11 +23,11 @@ export default class Role extends React.Component {
|
|
|
permissions: []
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
componentWillMount() {
|
|
|
this.loadData();
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
loadData() {
|
|
|
let _me = this;
|
|
@@ -51,7 +50,7 @@ export default class Role extends React.Component {
|
|
|
this.state.data.push({
|
|
|
key: i,
|
|
|
id: thisdata.id,
|
|
|
- name: thisdata.name,
|
|
|
+ roleName: thisdata.roleName,
|
|
|
permissions: thisdata.permissions.map((p) => { return String(p.id) }) || []
|
|
|
});
|
|
|
};
|
|
@@ -70,7 +69,7 @@ export default class Role extends React.Component {
|
|
|
loading: false
|
|
|
});
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
save() {
|
|
|
this.setState({
|
|
@@ -94,7 +93,7 @@ export default class Role extends React.Component {
|
|
|
disabled: false
|
|
|
});
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
remove() {
|
|
|
let deletedIds = [];
|
|
@@ -103,15 +102,8 @@ export default class Role extends React.Component {
|
|
|
if (rowItem.id) {
|
|
|
deletedIds.push(rowItem.id)
|
|
|
}
|
|
|
- }
|
|
|
- this.state.selectedRowKeys.sort((a, b) => { return b - a });
|
|
|
- for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
|
|
|
- let dataIndex = this.state.selectedRowKeys[idx];
|
|
|
- this.state.data.splice(dataIndex, 1);
|
|
|
- }
|
|
|
+ };
|
|
|
this.setState({
|
|
|
- data: this.state.data,
|
|
|
- selectedRowKeys: [],
|
|
|
loading: deletedIds.length > 0
|
|
|
});
|
|
|
if (deletedIds.length) {
|
|
@@ -124,6 +116,15 @@ export default class Role extends React.Component {
|
|
|
}).done((res) => {
|
|
|
if (!res.error.length) {
|
|
|
Message.success("删除成功");
|
|
|
+ this.state.selectedRowKeys.sort((a, b) => { return b - a });
|
|
|
+ for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
|
|
|
+ let dataIndex = this.state.selectedRowKeys[idx];
|
|
|
+ this.state.data.splice(dataIndex, 1);
|
|
|
+ };
|
|
|
+ this.setState({
|
|
|
+ data: this.state.data,
|
|
|
+ selectedRowKeys: []
|
|
|
+ });
|
|
|
} else {
|
|
|
Message.error(res.error[0].message);
|
|
|
}
|
|
@@ -133,69 +134,62 @@ export default class Role extends React.Component {
|
|
|
});
|
|
|
})
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
addNew() {
|
|
|
this.setState({
|
|
|
visible: true,
|
|
|
modelRecord: {
|
|
|
- id: '',
|
|
|
- name: '',
|
|
|
+ id: null,
|
|
|
+ roleName: '',
|
|
|
permissions: []
|
|
|
}
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
edit(e) {
|
|
|
this.setState({
|
|
|
- modelRecord: e,
|
|
|
+ modelRecord: {
|
|
|
+ id: e.id,
|
|
|
+ roleName: e.roleName,
|
|
|
+ permissions: e.permissions
|
|
|
+ },
|
|
|
visible: true,
|
|
|
disabled: false
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
handleCancel() {
|
|
|
this.setState({
|
|
|
visible: false,
|
|
|
disabled: false
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
render() {
|
|
|
const columns = [{
|
|
|
- title: 'ID',
|
|
|
- dataIndex: 'id',
|
|
|
- key: 'id',
|
|
|
- width: '10%'
|
|
|
- }, {
|
|
|
title: '名字',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name',
|
|
|
- width: '20%'
|
|
|
+ dataIndex: 'roleName',
|
|
|
+ key: 'roleName'
|
|
|
}, {
|
|
|
title: '绑定权限',
|
|
|
dataIndex: 'permissions',
|
|
|
key: 'permissions',
|
|
|
render: (text, record, index) => {
|
|
|
let _me = this;
|
|
|
- return <div>
|
|
|
- {record.permissions && record.permissions.map((tag) => {
|
|
|
- return <Tag key={tag} closable={false}>
|
|
|
- {_me.state.permissions[tag]}
|
|
|
- </Tag>
|
|
|
- }
|
|
|
- )}
|
|
|
- </div>
|
|
|
- },
|
|
|
- width: '60%'
|
|
|
- }, {
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'act',
|
|
|
- key: 'act',
|
|
|
- render: (text, record, index) => {
|
|
|
- return <Button type='primary' onClick={this.edit.bind(this, record)}>编辑</Button>
|
|
|
+ if (record.permissions) {
|
|
|
+ return <div>
|
|
|
+ {record.permissions.map((tag) => {
|
|
|
+ return <Tag key={tag} closable={false}>
|
|
|
+ {_me.state.permissions[tag]}
|
|
|
+ </Tag>
|
|
|
+ }
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ } else {
|
|
|
+ return <div></div>;
|
|
|
+ }
|
|
|
},
|
|
|
- width: '20%'
|
|
|
}];
|
|
|
const rowSelection = {
|
|
|
type: 'checkbox',
|
|
@@ -206,20 +200,20 @@ export default class Role extends React.Component {
|
|
|
selectedRowKeys: selectedRowKeys
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
+ const hasSelected = this.state.selectedRowKeys.length > 0;
|
|
|
return (
|
|
|
<Spin spinning={this.state.loading}>
|
|
|
<Modal title="用户编辑"
|
|
|
closable={false}
|
|
|
visible={this.state.visible}
|
|
|
- onOk={this.save.bind(this)}
|
|
|
- onCancel={this.handleCancel.bind(this)}
|
|
|
- >
|
|
|
+ onOk={this.save}
|
|
|
+ onCancel={this.handleCancel}>
|
|
|
<ul className="modal-content">
|
|
|
<li>
|
|
|
<span className='modal-text'>名字</span>
|
|
|
- <Input value={this.state.modelRecord.name} onChange={(e) => {
|
|
|
- this.state.modelRecord.name = e.target.value;
|
|
|
+ <Input value={this.state.modelRecord.roleName} onChange={(e) => {
|
|
|
+ this.state.modelRecord.roleName = e.target.value;
|
|
|
this.setState({
|
|
|
modelRecord: this.state.modelRecord
|
|
|
})
|
|
@@ -229,12 +223,11 @@ export default class Role extends React.Component {
|
|
|
<span className='modal-text'>权限</span>
|
|
|
<Select
|
|
|
multiple
|
|
|
- style={{ width: '90%' }}
|
|
|
+ style={{ width: '76%' }}
|
|
|
placeholder="选择绑定权限"
|
|
|
disabled={!this.state.modelRecord.id}
|
|
|
value={this.state.modelRecord.permissions}
|
|
|
onChange={(pids) => {
|
|
|
- let _me = this;
|
|
|
this.state.modelRecord.permissions = pids;
|
|
|
this.setState({
|
|
|
modelRecord: this.state.modelRecord
|
|
@@ -246,14 +239,25 @@ export default class Role extends React.Component {
|
|
|
</li>
|
|
|
</ul>
|
|
|
</Modal>
|
|
|
- <div style={{
|
|
|
- marginBottom: '6px'
|
|
|
- }}>
|
|
|
- <Button onClick={this.addNew.bind(this)}>新增</Button>
|
|
|
- <Button onClick={this.remove.bind(this)}>删除选中</Button>
|
|
|
+ <div className="set-content">
|
|
|
+ <div className="set-title">
|
|
|
+ <span>角色控制</span>
|
|
|
+ <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
|
|
|
+ onClick={this.addNew}>添加<Icon type="plus" /></Button>
|
|
|
+ <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
|
|
|
+ disabled={!hasSelected}
|
|
|
+ onClick={this.remove}>删除<Icon type="minus" /></Button>
|
|
|
+ </div>
|
|
|
+ <Table className='member-table'
|
|
|
+ columns={columns}
|
|
|
+ dataSource={this.state.data}
|
|
|
+ onRowClick={this.edit}
|
|
|
+ pagination={false}
|
|
|
+ rowSelection={rowSelection} />
|
|
|
</div>
|
|
|
- <Table columns={columns} dataSource={this.state.data} pagination={false} scroll={{ y: 450 }} rowSelection={rowSelection} />
|
|
|
</Spin>
|
|
|
);
|
|
|
}
|
|
|
-};
|
|
|
+});
|
|
|
+
|
|
|
+export default Role;
|