123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260 |
- 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>
- );
- }
- };
|