|
@@ -0,0 +1,259 @@
|
|
|
+import React from 'react';
|
|
|
+import { Table, Button, Input, Spin, Message, Select, Modal, Tag } 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 = {
|
|
|
+ visible: false,
|
|
|
+ disabled: false,
|
|
|
+ name: '',
|
|
|
+ selectOption: [],
|
|
|
+ data: [],
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectedRows: [],
|
|
|
+ loading: false,
|
|
|
+ permissions: {
|
|
|
+
|
|
|
+ },
|
|
|
+ modelRecord: {
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ permissions: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillMount() {
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+
|
|
|
+ loadData() {
|
|
|
+ let _me = this;
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.when($.ajax({
|
|
|
+ url: globalConfig.context + '/api/roles',
|
|
|
+ method: 'get',
|
|
|
+ cache: false
|
|
|
+ }), $.ajax({
|
|
|
+ url: globalConfig.context + '/api/permissions',
|
|
|
+ method: 'get',
|
|
|
+ cache: false
|
|
|
+ })).done((roles, permissions) => {
|
|
|
+ if (!roles[0].error.length && roles[0].data) {
|
|
|
+ this.state.data = [];
|
|
|
+ for (let i = 0; i < roles[0].data.length; i++) {
|
|
|
+ let thisdata = roles[0].data[i];
|
|
|
+ this.state.data.push({
|
|
|
+ key: i,
|
|
|
+ id: thisdata.id,
|
|
|
+ name: thisdata.name,
|
|
|
+ permissions: thisdata.permissions.map((p) => { return String(p.id) }) || []
|
|
|
+ });
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (!permissions[0].error.length && permissions[0].data) {
|
|
|
+ _me.state.selectOption = [];
|
|
|
+ permissions[0].data.map(function (item) {
|
|
|
+ _me.state.selectOption.push(
|
|
|
+ <Select.Option key={item.id}>{item.name}</Select.Option>
|
|
|
+ )
|
|
|
+ _me.state.permissions[String(item.id)] = item.name;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).always(() => {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ save() {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ url: globalConfig.context + '/api/role',
|
|
|
+ method: 'post',
|
|
|
+ data: { data: JSON.stringify(this.state.modelRecord) },
|
|
|
+ }).done((res) => {
|
|
|
+ if (!res.error.length) {
|
|
|
+ Message.success("保存成功");
|
|
|
+ this.loadData();
|
|
|
+ } else {
|
|
|
+ Message.error(res.error[0].message);
|
|
|
+ }
|
|
|
+ }).always(() => {
|
|
|
+ this.setState({
|
|
|
+ loading: false,
|
|
|
+ visible: false,
|
|
|
+ disabled: false
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ remove() {
|
|
|
+ let deletedIds = [];
|
|
|
+ for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
|
|
|
+ let rowItem = this.state.selectedRows[idx];
|
|
|
+ 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) {
|
|
|
+ $.ajax({
|
|
|
+ url: globalConfig.context + '/api/role/delete',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ data: JSON.stringify(deletedIds)
|
|
|
+ }
|
|
|
+ }).done((res) => {
|
|
|
+ if (!res.error.length) {
|
|
|
+ Message.success("删除成功");
|
|
|
+ } else {
|
|
|
+ Message.error(res.error[0].message);
|
|
|
+ }
|
|
|
+ }).always(() => {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ addNew() {
|
|
|
+ this.setState({
|
|
|
+ visible: true,
|
|
|
+ modelRecord: {
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ permissions: []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ edit(e) {
|
|
|
+ this.setState({
|
|
|
+ modelRecord: e,
|
|
|
+ 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%'
|
|
|
+ }, {
|
|
|
+ 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>
|
|
|
+ },
|
|
|
+ width: '20%'
|
|
|
+ }];
|
|
|
+ const rowSelection = {
|
|
|
+ type: 'checkbox',
|
|
|
+ selectedRowKeys: this.state.selectedRowKeys,
|
|
|
+ onChange: (selectedRowKeys, selectedRows) => {
|
|
|
+ this.setState({
|
|
|
+ selectedRows: selectedRows,
|
|
|
+ selectedRowKeys: selectedRowKeys
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ <Modal title="用户编辑"
|
|
|
+ closable={false}
|
|
|
+ visible={this.state.visible}
|
|
|
+ onOk={this.save.bind(this)}
|
|
|
+ onCancel={this.handleCancel.bind(this)}
|
|
|
+ >
|
|
|
+ <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;
|
|
|
+ this.setState({
|
|
|
+ modelRecord: this.state.modelRecord
|
|
|
+ })
|
|
|
+ }} />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span className='modal-text'>权限</span>
|
|
|
+ <Select
|
|
|
+ multiple
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {this.state.selectOption}
|
|
|
+ </Select>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </Modal>
|
|
|
+ <div style={{
|
|
|
+ marginBottom: '6px'
|
|
|
+ }}>
|
|
|
+ <Button onClick={this.addNew.bind(this)}>新增</Button>
|
|
|
+ <Button onClick={this.remove.bind(this)}>删除选中</Button>
|
|
|
+ </div>
|
|
|
+ <Table columns={columns} dataSource={this.state.data} pagination={false} scroll={{ y: 450 }} rowSelection={rowSelection} />
|
|
|
+ </Spin>
|
|
|
+ );
|
|
|
+ }
|
|
|
+};
|