import React from 'react';
|
import { Link } from 'react-router-dom';
|
import { Card, Row, Col, Form, Input, Button, message, Spin, TreeSelect } from 'antd';
|
import MultiSelect from '../../components/common/multiSelect';
|
import { createHashHistory } from 'history';
|
import fetch from '../../api/request';
|
|
const history = createHashHistory();
|
const { TextArea } = Input;
|
const FormItem = Form.Item;
|
|
class RoleDetail extends React.Component {
|
constructor(props) {
|
super(props)
|
this.id = props.match.params.id == 'new' ? '' : props.match.params.id;
|
this.flag = props.match.params.flag == 'Modify' ? '修改' : '新增';
|
|
this.state = {
|
spinning: false,//页面loading
|
groupList: [],
|
ownGroups: [],
|
title: '修改',
|
dataSet: {},
|
}
|
}
|
|
componentDidMount() {
|
let p = [this.findGroups()];
|
if (this.id) {
|
p = p.concat(this.getRoleDetail())
|
}
|
this.setState({ spinning: true });
|
Promise.all(p).then(res => {
|
console.log('res', res);
|
if (res.length == p.length) {
|
this.setState({ spinning: false });
|
this.setState({
|
groupList: res[0], //所有组
|
})
|
if (this.id) {
|
this.setState({
|
dataSet: res[res.length - 1],//角色信息
|
groupIds: res[res.length -1].groupIds || []//拥有组
|
})
|
}
|
}
|
})
|
}
|
|
//组
|
findGroups = () => {
|
return new Promise((resolve, reject) => {
|
fetch({
|
url: `api/group/finds`,
|
}).then(res => {
|
resolve(res)
|
})
|
})
|
}
|
|
//角色详情
|
getRoleDetail = () => {
|
return new Promise((resolve, reject) => {
|
fetch({
|
url: `api/role/getById`,
|
params: { id: this.id }
|
}).then(res => {
|
resolve(res)
|
})
|
})
|
}
|
|
groupChange = checkedValues => {
|
this.setState({ groupIds: checkedValues })
|
}
|
|
// 提交表单数据（新增 | 编辑）
|
handleSubmit = (e) => {
|
e.preventDefault();
|
this.props.form.validateFields((err, values) => {
|
if (err) return;
|
this.setState({ spinning: true });
|
fetch({
|
url: `api/role/save`,
|
method: 'POST',
|
data: {
|
role: { ...values, id: this.id },
|
groupIds: this.state.groupIds
|
}
|
}).then(res => {
|
this.setState({ spinning: false });
|
if (res) {
|
message.success('保存角色成功');
|
history.goBack();
|
}
|
})
|
});
|
}
|
|
//返回函数
|
onBack = () => {
|
history.goBack();
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const formItemLayout1 = {
|
labelCol: { xs: { span: 24 }, sm: { span: 10 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, },
|
};
|
const formItemLayout2 = {
|
labelCol: { xs: { span: 24 }, sm: { span: 5 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 19 }, },
|
};
|
const { groupList, dataSet, groupIds } = this.state;
|
|
return (
|
<div className="roledetail-main h-100 margin padding bg-white">
|
<Spin spinning={this.state.spinning}>
|
<div>
|
<Form onSubmit={this.handleSubmit}>
|
<Card title={'基础信息'} bordered={false}
|
extra={
|
<Row type="flex" gutter={20}>
|
<Col>
|
<Button onClick={this.onBack}>返回</Button>
|
</Col>
|
<Col>
|
<Button htmlType="submit" type='primary'>确定</Button>
|
</Col>
|
</Row>
|
}
|
>
|
<Row type="flex">
|
<Col span={8}>
|
<FormItem label={"标识符"} {...formItemLayout1}>
|
{getFieldDecorator('symbol', {
|
rules: [{ required: true, message: '标识符必填' }],
|
initialValue: dataSet.symbol || ''
|
})(
|
<Input placeholder="请输入标识符" />
|
)}</FormItem>
|
</Col>
|
<Col span={8}>
|
<FormItem label={"角色名称"} {...formItemLayout1}>
|
{getFieldDecorator('name', {
|
rules: [{ required: true, message: '角色名称必填' }],
|
initialValue: dataSet.name || ''
|
})(
|
<Input placeholder="请输入角色名称" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={16}>
|
<FormItem label={"描述"} {...formItemLayout2}>
|
{getFieldDecorator('description', {
|
rules: [{ max: 200, message: '描述的内容不能超过200字' }],
|
initialValue: dataSet.description || ''
|
})(
|
<TextArea placeholder="请输入描述" rows={5} />
|
)}</FormItem>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
<Card title={'拥有组'} bordered={false} extra={
|
<Row>
|
<Link to={{ pathname: "/baseManage/group/Detail/new/Add", state: { id: '' } }}>
|
没有组？点击新建
|
</Link>
|
</Row>
|
}>
|
<Row>
|
<MultiSelect key={groupIds ? groupIds.toString() : 'init'} all={groupList} own={groupIds} onChange={this.groupChange} />
|
</Row>
|
</Card>
|
</div>
|
</Spin>
|
</div>
|
)
|
}
|
}
|
|
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
const RoleDetailForm = Form.create()(RoleDetail);
|
export default RoleDetailForm;
|
