项目实战二：共享单车后台3
权限设计：http://www.imooc.com/article/40553
import ....
const Option= Select.Option;
const FormItem =Form.Item;
const TreeNode =Tree.TreeNode;
state={}
componentWillMount(){
axios.requestList(this,'/role/list',{})
//已经封装好的axios里面的requestList this指的是指向本元素this
}
//封装好的函数如下
requestList = ()=>{
axios.ajax({
url:'/role/list',
data:{
params:{}
}
}).then((res)=>{
if(res.code == 0){
let list = res.result.item_list.map((item,i)=>{
item.key = i;
return item;
})
this.setState({
list
})
}
})
}
// 角色创建
handleRole = ()=>{
this.setState({
isRoleVisible:true
})
}
// 角色提交
handleRoleSubmit = ()=>{
let data = this.roleForm.props.form.getFieldsValue();
axios.ajax({
url:'role/create',
data:{
params:{
...data
}
}
}).then((res)=>{
if(res.code ==0){
this.setState({
isRoleVisible:false
})
this.roleForm.props.form.resetFields();//清空角色创建弹框表单
axios.requestList(this,'role/list',{});
}
})
}
handlePermission = ()=>{
let item =this.state.selectedItem;//检查是否选中了项
if (!item) {
Modal.info({
text: '请选择一个角色'
})
return;
}
this.setState({
isPermVisible: true,
detailInfo: item，
menuInfo:item.menus
});
let menuList = this.state.selectedItem.menus;
this.setState({
menuInfo:menuList
})
}
handlePermEditSubmit = ()=>{
let data = this.permForm.props.form.getFieldsValue();
data.role_id = this.state.selectedItem.id;//被选中项的id获取到
data.menus = this.state.menuInfo;//选中的key值
axios.ajax({
url:'/permission/edit',
data:{
params:{
...data
}
}
}).then((res)=>{
if(res){
this.setState({
isPermVisible:false
})
axios.requestList(this,'role/list',{});
}
})
}
// 用户授权提交
handleUserSubmit = ()=>{
let data = {};
data.user_ids = this.state.targetKeys || [];
data.role_id = this.state.selectedItem.id;//大列表里面那一行的id(不是modal里的表单
axios.ajax({
url:'/role/user_role_edit',
data:{
params:{
...data
}
}
}).then((res)=>{
if(res){
this.setState({
isUserVisible:false
})
axios.requestList(this,'/role/list',{});
}
})
}
render(){
const columns = [
{
title: '角色ID',
dataIndex: 'id'
}, {
title: '角色名称',
dataIndex: 'role_name'
},{
title: '创建时间',
dataIndex: 'create_time',
render: Utils.formatTime //引用封装好的时间格式转换函数
}, {
title: '使用状态',
dataIndex: 'status',
render(status){
return status ==1?'启用':'停用'
}
}, {
title: '授权时间',
dataIndex: 'authorize_time',
render: Utils.formatTime
}, {
title: '授权人',
dataIndex: 'authorize_user_name'
}
];
return (
<div>
<Card>
<Button type="primary" onClick={this.handleRole}>创建角色</Button>
<Button type="primary" onClick={this.handlePermission}>设置权限</Button>
<Button type="primary" onClick={this.handleUserAuth}>用户授权</Button>
</Card>
<div className="content-wrap">
<ETable
updateSelectedItem={Utils.updateSelectedItem.bind(this)}
selectedRowKeys={this.state.selectedRowKeys}
dataSource={this.state.list}
columns={columns}
/>
</div>
<Modal
title="创建角色"
visible={this.state.isRoleVisible}
onOk={this.handleRoleSubmit}
onCancel={()=>{
this.roleForm.props.form.resetFields();//重置
this.setState({
isRoleVisible:false
})
}}
>
<RoleForm wrappedComponentRef={(inst) => this.roleForm = inst }/>//wrappedComponentRef获取该元素的值为inst 然后赋给this.roleForm
</Modal>
<Modal
title="权限设置"
visible={this.state.isPermVisible}
width={600}
onOk={this.handlePermEditSubmit}
onCancel={()=>{
this.setState({
isPermVisible:false
})
}}>
<PermEditForm
wrappedComponentRef={(inst) => this.permForm = inst }
detailInfo={this.state.detailInfo}
menuInfo={this.state.menuInfo||[]}
patchMenuInfo={(checkedKeys)=>{
this.setState({
menuInfo: checkedKeys
});
}}
/>
</Modal>
<Modal
title="用户授权"
visible={this.state.isUserVisible}
width={800}
onOk={this.handleUserSubmit}
onCancel={()=>{
this.setState({
isUserVisible:false
})
}}>
<RoleAuthForm
wrappedComponentRef={(inst) => this.userAuthForm = inst }
isClosed={this.state.isAuthClosed}
detailInfo={this.state.detailInfo}
targetKeys={this.state.targetKeys}
mockData={this.state.mockData}
patchUserInfo={(targetKeys)=>{
this.setState({ targetKeys})
}}
/>
</Modal>
</div>
);
}
}
// 角色创建
class RoleForm extends React.Component{
render(){
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {span: 5},
wrapperCol: {span: 19}
};
return (
<Form layout="horizontal">
<FormItem label="角色名称" {...formItemLayout}>
{
getFieldDecorator('role_name',)(
<Input type="text" placeholder="请输入角色名称"/>
)
}
</FormItem>
<FormItem label="状态" {...formItemLayout}>
{
getFieldDecorator('state')(
<Select>
<Option value={1}>开启</Option>
<Option value={0}>关闭</Option>
</Select>
)}
</FormItem>
</Form>
);
}
}
RoleForm = Form.create({})(RoleForm);
// 设置权限
class PermEditForm extends React.Component {
state = {};
// 设置选中的节点，通过父组件方法再传递回来
onCheck = (checkedKeys) => {
this.props.patchMenuInfo(checkedKeys);//批量传回
};
//递归权限树
renderTreeNodes = (data) => {
return data.map((item) => {
//要分是否有子节点 如果有子节点继续递归
if (item.children) {
return (
<TreeNode title={item.title} key={parentKey} >
{this.renderTreeNodes(item.children)}
</TreeNode>
)
} else {
return
<TreeNode title={item.title} key={item.Key} />
//方法二：return