A 账户管理新增角色展示

spug_web/src/pages/system/account/Form.js

@@ -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>

spug_web/src/pages/system/account/Table.js

@@ -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="禁用"/>

spug_web/src/pages/system/account/index.js

@@ -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>

spug_web/src/pages/system/role/store.js

@@ -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/')