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( {item.name} ) _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
{record.permissions && record.permissions.map((tag) => { return {_me.state.permissions[tag]} } )}
}, width: '60%' }, { title: '操作', dataIndex: 'act', key: 'act', render: (text, record, index) => { return }, width: '20%' }]; const rowSelection = { type: 'checkbox', selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows, selectedRowKeys: selectedRowKeys }); } } return (
); } };