U 角色关联的账户信息现可以通过弹窗查看

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Badge, Table } from 'antd';
+import uStore from '../account/store';
+
+
+export default observer(function (props) {
+  const users = uStore.records.filter(x => x.role_ids.includes(props.id))
+  return (
+    <Table rowKey="id" dataSource={users} pagination={false}>
+      <Table.Column title="姓名" dataIndex="nickname"/>
+      <Table.Column title="状态" dataIndex="is_active"
+                    render={v => v ? <Badge status="success" text="正常"/> : <Badge status="default" text="禁用"/>}/>
+      <Table.Column title="最近登录" dataIndex="last_login"/>
+    </Table>
+  )
+})

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

@@ -5,16 +5,22 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Modal, message } from 'antd';
+import { Modal, Popover, Button, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { TableCard, AuthButton, Action } from 'components';
+import RoleUsers from './RoleUsers';
 import http from 'libs/http';
 import store from './store';
+import uStore from '../account/store';
+import styles from './index.module.css';
 
 @observer
 class ComTable extends React.Component {
   componentDidMount() {
     store.fetchRecords()
+    if (uStore.records.length === 0) {
+      uStore.fetchRecords()
+    }
   }
 
   columns = [{
@@ -22,7 +28,11 @@ class ComTable extends React.Component {
     dataIndex: 'name',
   }, {
     title: '关联账户',
-    dataIndex: 'used',
+    render: info => info.used ? (
+      <Popover overlayClassName={styles.roleUser} content={<RoleUsers id={info.id}/>}>
+        <Button type="link">{info.used}</Button>
+      </Popover>
+    ) : <Button type="link" disabled>{info.used}</Button>
   }, {
     title: '描述信息',
     dataIndex: 'desc',
@@ -58,7 +68,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
-        rowKey="sr"
+        rowKey="id"
         title="角色列表"
         loading={store.isFetching}
         dataSource={store.dataSource}

spug_web/src/pages/system/role/index.module.css

@@ -36,4 +36,8 @@
 
 .delIcon:hover {
     color: #f5222d;
+}
+
+.roleUser :global(.ant-popover-inner-content) {
+  padding: 0;
 }