A 账户管理新增角色展示

4.0
vapao 2022-10-21 17:08:52 +08:00
parent b1244ab73d
commit b8fbb0e8eb
4 changed files with 26 additions and 11 deletions

View File

@ -3,24 +3,19 @@
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Form, Select, Input, message } from 'antd';
import http from 'libs/http';
import store from './store';
import roleStore from '../role/store';
import { Link } from "react-router-dom";
import rStore from '../role/store';
export default observer(function () {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
useEffect(() => {
if (roleStore.records.length === 0) {
roleStore.fetchRecords()
}
}, [])
function handleSubmit() {
setLoading(true);
const formData = form.getFieldsValue();
@ -55,7 +50,7 @@ export default observer(function () {
<Form.Item hidden={store.record.is_supper} label="角色" style={{marginBottom: 0}}>
<Form.Item name="role_ids" style={{display: 'inline-block', width: '80%'}} extra="权限最大化原则,组合多个角色权限。">
<Select mode="multiple" placeholder="请选择">
{roleStore.records.map(item => (
{rStore.records.map(item => (
<Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
))}
</Select>

View File

@ -10,6 +10,7 @@ import { Form, Radio, Modal, Button, Badge, message, Input } from 'antd';
import { TableCard, Action } from 'components';
import http from 'libs/http';
import store from './store';
import rStore from '../role/store';
@observer
class ComTable extends React.Component {
@ -30,6 +31,10 @@ class ComTable extends React.Component {
}, {
title: '姓名',
dataIndex: 'nickname',
}, {
title: '角色',
dataIndex: 'role_ids',
render: v => v.map(x => rStore.idMap[x]?.name).join(',')
}, {
title: '状态',
render: text => text['is_active'] ? <Badge status="success" text="正常"/> : <Badge status="default" text="禁用"/>

View File

@ -3,15 +3,22 @@
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import React, { useEffect } from 'react';
import { observer } from 'mobx-react';
import { Input } from 'antd';
import { SearchForm, AuthDiv, Breadcrumb } from 'components';
import ComTable from './Table';
import ComForm from './Form';
import store from './store';
import rStore from '../role/store';
export default observer(function () {
useEffect(() => {
if (rStore.records.length === 0) {
rStore.fetchRecords()
}
}, [])
return (
<AuthDiv auth="system.account.view">
<Breadcrumb>

View File

@ -33,6 +33,14 @@ class Store {
this.initPermissions()
}
@computed get idMap() {
const tmp = {}
for (let item of this.records) {
tmp[item.id] = item
}
return tmp
}
fetchRecords = () => {
this.isFetching = true;
http.get('/api/account/role/')