From a92f7fa4a461f40a3981534dc3f06fe3e6e6be02 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Mon, 27 Dec 2021 16:47:57 +0800
Subject: [PATCH] =?UTF-8?q?U=20=E8=A7=92=E8=89=B2=E5=85=B3=E8=81=94?=
 =?UTF-8?q?=E7=9A=84=E8=B4=A6=E6=88=B7=E4=BF=A1=E6=81=AF=E7=8E=B0=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E9=80=9A=E8=BF=87=E5=BC=B9=E7=AA=97=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/pages/system/role/RoleUsers.js   | 22 +++++++++++++++++++
 spug_web/src/pages/system/role/Table.js       | 16 +++++++++++---
 .../src/pages/system/role/index.module.css    |  4 ++++
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 spug_web/src/pages/system/role/RoleUsers.js

diff --git a/spug_web/src/pages/system/role/RoleUsers.js b/spug_web/src/pages/system/role/RoleUsers.js
new file mode 100644
index 0000000..952f023
--- /dev/null
+++ b/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>
+  )
+})
\ No newline at end of file
diff --git a/spug_web/src/pages/system/role/Table.js b/spug_web/src/pages/system/role/Table.js
index d8682ae..07b6334 100644
--- a/spug_web/src/pages/system/role/Table.js
+++ b/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}
diff --git a/spug_web/src/pages/system/role/index.module.css b/spug_web/src/pages/system/role/index.module.css
index 4cfb060..4f2cacb 100644
--- a/spug_web/src/pages/system/role/index.module.css
+++ b/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;
 }
\ No newline at end of file