@jiangood/open-admin 3.0.5 → 3.0.7

package/package.json

@@ -48,5 +48,5 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   },
-  "version": "3.0.5"
+  "version": "3.0.7"
 }

package/src/framework/biz/PermActions.tsx

@@ -1,26 +1,143 @@
 import React from 'react';
-import { Space } from 'antd';
+import { Button, Dropdown, Popconfirm, Space } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
 import { PermUtils } from '../utils';
 
-interface PermActionsProps {
-    gap?: boolean;
+export interface PermAction {
+    /** 按钮文本 */
+    label: React.ReactNode;
+    /** 权限码，无权限时隐藏该操作（如 `sys-user:update`） */
+    perm?: string;
+    /** 点击回调（配合 confirm 时在确认后触发） */
+    onClick?: () => void;
+    /** 确认提示文案，设置后点击需二次确认 */
+    confirm?: React.ReactNode;
+    /** 危险操作样式（红色），常与 confirm 配合用于删除 */
+    danger?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 按钮类型，仅非下拉模式生效 */
+    type?: 'primary' | 'dashed' | 'link' | 'text' | 'default';
+}
+
+export interface PermActionsProps {
+    /** 是否折叠为「第一个操作 + 更多下拉」，多余操作进入 `...` 菜单 */
+    more?: boolean;
+    /** 按钮尺寸 */
+    size?: 'small' | 'middle' | 'large';
+    /** 传统写法：包裹带 `perm` 属性的子元素，按 `perm` 过滤。不推荐，建议改用 `actions` 数据驱动 */
     children?: React.ReactNode;
+    /** 数据驱动模式：操作数组，按每个 action 的 perm 过滤 */
+    actions?: PermAction[];
 }
 
 export class PermActions extends React.Component<PermActionsProps> {
+    static defaultProps: Partial<PermActionsProps> = {
+        more: false,
+        size: 'middle',
+    };
+
     render() {
-        const { children, gap = true } = this.props;
+        const { children, more, size, actions } = this.props;
+
+        if (actions) {
+            return this.renderActions(actions, more, size);
+        }
 
         const checkPerm = (element) => {
             const _props = element?.props;
             return !_props?.perm || PermUtils.hasPermission(_props.perm);
         };
 
+        if (children != null) {
+            console.warn(
+                '[PermActions] children 写法已不推荐，请改用 actions 数据驱动模式：' +
+                '<PermActions actions={[{ label, perm, onClick }]} />'
+            );
+        }
+
         const nodes = React.Children.toArray(children).filter(
             (child) => child != null && checkPerm(child)
         );
 
-        if (!gap) return <>{nodes}</>;
+        if (nodes.length === 0) return null;
         return <Space>{nodes}</Space>;
     }
+
+    private renderButton(action: PermAction, size: 'small' | 'middle' | 'large') {
+        const button = (
+            <Button
+                size={size}
+                type={action.type}
+                icon={action.icon}
+                danger={action.danger}
+                disabled={action.disabled}
+                onClick={action.confirm ? undefined : action.onClick}
+            >
+                {action.label}
+            </Button>
+        );
+        if (action.confirm) {
+            return (
+                <Popconfirm title={action.confirm} onConfirm={action.onClick}>
+                    {button}
+                </Popconfirm>
+            );
+        }
+        return button;
+    }
+
+    private renderActions(
+        actions: PermAction[],
+        more?: boolean,
+        size: 'small' | 'middle' | 'large' = 'small'
+    ) {
+        const visible = actions.filter((a) => !a.perm || PermUtils.hasPermission(a.perm));
+        if (visible.length === 0) return null;
+
+        if (!more || visible.length <= 1) {
+            const buttons = visible.map((action, index) => (
+                <React.Fragment key={index}>{this.renderButton(action, size)}</React.Fragment>
+            ));
+            return <Space>{buttons}</Space>;
+        }
+
+        const [first, ...rest] = visible;
+
+        const items = rest.map((action, index) => {
+            const label = action.confirm ? (
+                <Popconfirm title={action.confirm} onConfirm={action.onClick}>
+                    <span>{action.label}</span>
+                </Popconfirm>
+            ) : (
+                action.label
+            );
+            return {
+                key: `more-${index}`,
+                label,
+                icon: action.icon,
+                danger: action.danger,
+                disabled: action.disabled,
+                onClick: (info) => {
+                    if (action.confirm) {
+                        info.domEvent.preventDefault();
+                        info.domEvent.stopPropagation();
+                    } else {
+                        action.onClick?.();
+                    }
+                },
+            };
+        });
+
+        return (
+            <Space.Compact>
+                {this.renderButton(first, size)}
+                <Dropdown menu={{ items }} placement="bottomRight">
+                    <Button size={size} icon={<EllipsisOutlined/>}/>
+                </Dropdown>
+            </Space.Compact>
+        );
+    }
 }

package/src/framework/components/OrgSwitcher/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {TreeSelect} from "antd";
+import {HttpUtils} from "../../utils";
+
+interface OrgNode {
+    title: string;
+    key: string;
+    children?: OrgNode[];
+}
+
+const countUnits = (nodes: OrgNode[] = []): number =>
+    nodes.reduce((sum, n) => sum + 1 + countUnits(n.children), 0);
+
+/**
+ * 组织机构切换器：切换当前组织机构（单位），默认隐藏，由 Layouts 的 orgSwitcher 插槽按需渲染。
+ */
+export class OrgSwitcher extends React.Component<{}, {tree: OrgNode[]; currentOrgId: string | null}> {
+    state = {tree: [], currentOrgId: null};
+
+    componentDidMount() {
+        HttpUtils.get("admin/myOrgs").then(data => {
+            if (data) {
+                this.setState({tree: data.tree || [], currentOrgId: data.currentOrgId || null});
+            }
+        });
+    }
+
+    handleChange = (orgId: string) => {
+        HttpUtils.post("admin/switchOrg", {orgId}).then(() => {
+            setTimeout(() => location.reload(), 1000);
+        }).catch(() => {
+        });
+    };
+
+    render() {
+        const {tree, currentOrgId} = this.state;
+
+        if (countUnits(tree) === 0) {
+            return <span style={{marginRight: 8, color: "#999"}}>暂无组织机构</span>;
+        }
+
+        if (countUnits(tree) === 1) {
+            return <span style={{marginRight: 8}}>{tree[0].title}</span>;
+        }
+
+        return (
+            <TreeSelect
+                style={{width: 160, marginRight: 8}}
+                treeData={tree}
+                value={currentOrgId || undefined}
+                placeholder="选择组织机构"
+                onChange={this.handleChange}
+                treeDefaultExpandAll
+                showSearch
+            />
+        );
+    }
+}

package/src/framework/components/index.ts

@@ -7,5 +7,6 @@ export * from './Page'
 export * from './ValueType'
 export * from './ContextMenu'
 export * from './DownloadModal'
+export * from './OrgSwitcher'
 export { default as ErrorBoundary } from './ErrorBoundary'
 export { default as FormModal } from './FormModal'

package/src/layouts/admin/HeaderRight.jsx

@@ -38,7 +38,7 @@ export class HeaderRight extends React.Component {
     }
 
     account = () => {
-        PageUtils.open('/account', '个人中心')
+        PageUtils.open('/userCenter', '个人中心')
     }
 
     openArticle = (code, title) => {
@@ -61,7 +61,7 @@ export class HeaderRight extends React.Component {
         }))
 
         const menuItems = [
-            {key: 'account', label: '个人中心'},
+            {key: 'userCenter', label: '个人中心'},
             ...articleItems,
             {key: 'logout', label: '退出登录'},
         ]
@@ -76,7 +76,7 @@ export class HeaderRight extends React.Component {
 
             <Dropdown menu={{
                 onClick: ({key}) => {
-                    if (key === 'account') {
+                    if (key === 'userCenter') {
                         this.account()
                     } else if (key === 'logout') {
                         this.logout();

package/src/layouts/admin/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Layout, Menu, Skeleton, Watermark} from 'antd';
 
 import "./index.less"
-import {HttpUtils, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT} from "../../framework";
+import {HttpUtils, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT, OrgSwitcher} from "../../framework";
 
 import { HeaderRight } from "./HeaderRight";
 import { TabLayout } from "./TabLayout";
@@ -204,6 +204,10 @@ return <Layout className='main-layout'>
                         <div key={a.code} className='item' style={{cursor: 'pointer', padding: '0 12px', whiteSpace: 'nowrap'}}
                              onClick={() => PageUtils.open('/article/' + a.code, a.title)}>{a.title}</div>
                     ))}
+                    {this.props.showOrgSwitcher?.({
+                        activeTopMenu: this.getActiveTopMenu(),
+                        loginInfo: this.props.loginInfo,
+                    }) && <OrgSwitcher/>}
                     {this.props.headerExtra?.({
                         activeTopMenu: this.getActiveTopMenu(),
                         loginInfo: this.props.loginInfo,

package/src/layouts/index.tsx

@@ -29,6 +29,7 @@ export interface HeaderExtraContext {
 
 interface LayoutsProps {
     headerExtra?: (context: HeaderExtraContext) => React.ReactNode;
+    showOrgSwitcher?: (context: HeaderExtraContext) => boolean;
 }
 
 export class Layouts extends React.Component<LayoutsProps> {
@@ -128,7 +129,7 @@ export class Layouts extends React.Component<LayoutsProps> {
         return (
             <ErrorBoundary minimal>
                 <ConfigProvider {...configProps}>
-                    {showPageFrame ? <PageFrame url={pathname + search}/> : ready ? <AdminLayout headerExtra={this.props.headerExtra} loginInfo={GlobalData.getLoginInfo()}/> : (
+                    {showPageFrame ? <PageFrame url={pathname + search}/> : ready ? <AdminLayout headerExtra={this.props.headerExtra} showOrgSwitcher={this.props.showOrgSwitcher} loginInfo={GlobalData.getLoginInfo()}/> : (
                         <PageLoading messages={[
                             !siteInfoLoaded && '加载站点信息...',
                             !loginChecked && '检查登录中...',

package/src/pages/system/article/index.jsx

@@ -1,5 +1,5 @@
 import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Modal, Popconfirm} from 'antd'
+import {Button, Form, Input, InputNumber, Modal} from 'antd'
 import React from 'react'
 import {
     DictUtils,
@@ -85,15 +85,15 @@ export default class extends React.Component {
             title: '操作',
             dataIndex: 'option',
             render: (_, record) => {
-                return (
-                    <PermActions>
-                        <Button size='small' onClick={() => this.handlePreview(record)}>预览</Button>
-                        <Button size='small' perm='article:update' onClick={() => this.handleEdit(record)}>编辑</Button>
-                        <Popconfirm perm='article:delete' title='确定删除?' onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </PermActions>
-                );
+                return <PermActions
+                    more
+                    size="small"
+                    actions={[
+                        {label: '预览', onClick: () => this.handlePreview(record)},
+                        {label: '编辑', perm: 'article:update', onClick: () => this.handleEdit(record)},
+                        {label: '删除', perm: 'article:delete', confirm: '确定删除?', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
     ]

package/src/pages/system/dict/index.jsx

@@ -1,10 +1,9 @@
 import {DeleteOutlined, EditOutlined, PlusOutlined} from '@ant-design/icons';
-import {Button, Card, Descriptions, Empty, Form, Input, InputNumber, Popconfirm, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
+import {AutoComplete, Button, Card, Descriptions, Empty, Form, Input, InputNumber, Popconfirm, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
 import React from 'react';
 import {
     PermActions,
     FieldBoolean,
-    FieldDictSelect,
     FormModal,
     HttpUtils,
     Page,
@@ -12,6 +11,18 @@ import {
     ViewSwitch,
 } from "../../../framework";
 
+const COLOR_OPTIONS = [
+    {value: 'SUCCESS', label: '成功'},
+    {value: 'PROCESSING', label: '处理中'},
+    {value: 'ERROR', label: '错误'},
+    {value: 'WARNING', label: '警告'},
+    {value: 'DEFAULT', label: '默认'},
+    {value: 'RED', label: '红色'},
+    {value: 'BLUE', label: '蓝色'},
+    {value: 'GREEN', label: '绿色'},
+    {value: 'GRAY', label: '灰色'},
+]
+
 export default class extends React.Component {
 
     state = {
@@ -134,16 +145,14 @@ export default class extends React.Component {
         {
             title: '操作', dataIndex: 'option',
             render: (_, record) => {
-                return (
-                    <PermActions>
-                        <Button size='small' perm='sys-dict:update'
-                                onClick={() => this.handleItemEdit(record)}>编辑</Button>
-                        <Popconfirm perm='sys-dict:delete' title='是否确定删除字典项'
-                                    onConfirm={() => this.handleItemDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </PermActions>
-                );
+                return <PermActions
+                    more
+                    size="small"
+                    actions={[
+                        {label: '编辑', perm: 'sys-dict:update', onClick: () => this.handleItemEdit(record)},
+                        {label: '删除', perm: 'sys-dict:delete', confirm: '是否确定删除字典项', onClick: () => this.handleItemDelete(record)},
+                    ]}
+                />;
             },
         },
     ]
@@ -249,7 +258,15 @@ export default class extends React.Component {
                     <Input/>
                 </Form.Item>
                 <Form.Item label='颜色' name='color'>
-                    <FieldDictSelect typeCode='statusColor'/>
+                    <AutoComplete
+                        allowClear
+                        maxLength={20}
+                        options={COLOR_OPTIONS}
+                        filterOption={(input, option) =>
+                            (option.value + option.label).toLowerCase().includes(input.toLowerCase())
+                        }
+                        placeholder='如 SUCCESS、#ff0000'
+                    />
                 </Form.Item>
                 <Form.Item label='序号' name='seq'>
                     <InputNumber/>

package/src/pages/system/file/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import {Button, Form, Input, Modal, Popconfirm} from 'antd'
+import {Button, Form, Input, Modal} from 'antd'
 import {CloudUploadOutlined} from "@ant-design/icons";
 
-import {PermActions, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, UrlUtils} from "../../../framework";
+import {PermActions, DictUtils, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, UrlUtils} from "../../../framework";
 
 export default class extends React.Component {
 
@@ -27,6 +27,14 @@ export default class extends React.Component {
             dataIndex: 'originName',
             width: 200,
         },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            width: 120,
+            render(status) {
+                return DictUtils.dictTag('fileStatus', status) || (status || '-')
+            },
+        },
         {
             title: '存储名称',
             dataIndex: 'objectName',
@@ -66,12 +74,13 @@ export default class extends React.Component {
             title: '操作',
             dataIndex: 'option',
             render: (_, record) => (
-                <PermActions>
-                    <Popconfirm perm='sys-file:delete' title='是否确定删除文件信息'
-                                onConfirm={() => this.handleDelete(record)}>
-                        <a>删除</a>
-                    </Popconfirm>
-                </PermActions>
+                <PermActions
+                    more
+                    size="small"
+                    actions={[
+                        {label: '删除', perm: 'sys-file:delete', confirm: '是否确定删除文件信息', onClick: () => this.handleDelete(record)},
+                    ]}
+                />
             ),
         },
     ]
@@ -98,6 +107,9 @@ export default class extends React.Component {
                         <Form.Item label='对象名称' name='objectName'>
                             <Input/>
                         </Form.Item>
+                        <Form.Item label='状态' name='status'>
+                            <FieldDictSelect typeCode='fileStatus'/>
+                        </Form.Item>
                         <Form.Item label='类型' name='type'>
                             <FieldDictSelect typeCode='materialType'/>
                         </Form.Item>

package/src/pages/system/job/index.jsx

@@ -8,9 +8,7 @@ import {
     Input,
     message,
     Modal,
-    Popconfirm,
     Select,
-    Space,
     Switch,
     Tag
 } from 'antd'
@@ -153,16 +151,16 @@ export default class extends React.Component {
             fixed: 'right',
             render: (_, record) => {
 
-                return (
-                    <Space>
-                        <Button size='small' onClick={() => this.showExecuteRecord(record)}>执行记录</Button>
-                        <Button size='small' perm='job:trigger' onClick={() => this.handleTriggerJob(record)}>执行一次</Button>
-                        <Button size='small' perm='job:update' onClick={() => this.handleEdit(record)}> 编辑 </Button>
-                        <Popconfirm perm='job:delete' title='是否确定删除?' onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </Space>
-                );
+                return <PermActions
+                    more
+                    size="small"
+                    actions={[
+                        {label: '执行记录', onClick: () => this.showExecuteRecord(record)},
+                        {label: '执行一次', perm: 'job:trigger', onClick: () => this.handleTriggerJob(record)},
+                        {label: '编辑', perm: 'job:update', onClick: () => this.handleEdit(record)},
+                        {label: '删除', perm: 'job:delete', confirm: '是否确定删除?', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
 

package/src/pages/system/role/index.jsx

@@ -1,5 +1,5 @@
 import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Transfer, Tree} from 'antd'
+import {Button, Form, Input, InputNumber, Modal, Transfer} from 'antd'
 import React from 'react'
 import {FieldBoolean, FormModal, HttpUtils, Page, PageUtils, PermActions, ProTable, ViewText} from "../../../framework";
 
@@ -14,12 +14,6 @@ export default class extends React.Component {
         userList: [],
         targetKeys: [],
         selectedKeys: [],
-
-        menuOpen: false,
-        menuTree: [],
-        menuTreeLoading: false,
-        menuChecked: [],
-        menuHalfChecked: []
     }
 
     modalRef = React.createRef()
@@ -112,22 +106,16 @@ export default class extends React.Component {
             dataIndex: 'option',
             render: (_, record) => {
 
-                return (
-                    <PermActions>
-                        <Button size='small' perm='sys-role:grant-permission'
-                                onClick={() => this.handleEditUser(record)}>用户设置</Button>
-
-                        <Button size='small' perm='sys-role:grant-permission'
-                                onClick={() => PageUtils.open('/system/role/rolePerm?id=' + record.id, '角色权限设置')}>权限设置</Button>
-
-                        <Button size='small' perm='sys-role:update'
-                                onClick={() => this.handleEdit(record)}>编辑</Button>
-                        <Popconfirm perm='sys-role:delete' title='是否确定删除系统角色'
-                                    onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small'>删除</Button>
-                        </Popconfirm>
-                    </PermActions>
-                );
+                return <PermActions
+                    more
+                    size="small"
+                    actions={[
+                        {label: '用户设置', perm: 'sys-role:grant-permission', onClick: () => this.handleEditUser(record)},
+                        {label: '权限设置', perm: 'sys-role:grant-permission', onClick: () => PageUtils.open('/system/role/rolePerm?id=' + record.id, '角色权限设置')},
+                        {label: '编辑', perm: 'sys-role:update', onClick: () => this.handleEdit(record)},
+                        {label: '删除', perm: 'sys-role:delete', confirm: '是否确定删除系统角色', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
     ]
@@ -145,25 +133,6 @@ export default class extends React.Component {
         })
     }
 
-    handleEditMenu = (record) => {
-        this.setState({menuOpen: true, selectedRecord: record, menuTreeLoading: true})
-        HttpUtils.get('admin/sysRole/ownMenu', {id: record.id}).then(rs => {
-            this.setState({menuChecked: rs.checked, menuHalfChecked: rs.halfChecked})
-        })
-        HttpUtils.get('admin/sysRole/menuTree').then(rs => {
-            this.setState({menuTree: rs, menuTreeLoading: false})
-        })
-    }
-    handleGrantMenu = () => {
-        const params = {
-            id: this.state.selectedRecord.id,
-            menuIds: [...this.state.menuChecked, ...this.state.menuHalfChecked]
-        }
-        HttpUtils.post('admin/sysRole/grantMenu', params).then(rs => {
-            this.setState({menuOpen: false})
-        })
-    }
-
     render() {
         return <Page
             title="角色管理"
@@ -248,31 +217,6 @@ export default class extends React.Component {
 
 
             </Modal>
-
-            <Modal title={'角色授权菜单权限' + "【" + this.state.selectedRecord?.name + '】'}
-                   open={this.state.menuOpen}
-                   destroyOnHidden
-                   mask={{ closable: false }}
-                   width={800}
-                   onCancel={() => this.setState({menuOpen: false})}
-                   onOk={this.handleGrantMenu}
-                   loading={this.state.menuTreeLoading}
-            >
-                <Tree
-                    height={600}
-                    treeData={this.state.menuTree}
-                    multiple
-                    checkable
-                    checkedKeys={{checked: this.state.menuChecked}}
-                    onCheck={(keys, e) => {
-                        this.setState({menuChecked: keys, menuHalfChecked: e.halfCheckedKeys})
-                    }}
-                    defaultExpandAll
-                    titleRender={node => {
-                        return <span title={node.perm}>{node.title}</span>
-                    }}
-                />
-            </Modal>
         </Page>
 
 

package/src/pages/system/user/index.jsx

@@ -1,5 +1,5 @@
 import {PlusOutlined} from '@ant-design/icons';
-import {Button, Card, Form, Input, Modal, Popconfirm, Select, Splitter, message} from 'antd';
+import {Button, Card, Form, Input, Modal, Select, Splitter, message} from 'antd';
 import React from 'react';
 import {
     PermActions,
@@ -123,19 +123,16 @@ export default class extends React.Component {
             dataIndex: 'option',
             fixed: 'right',
             render: (_, record) => {
-                return <PermActions>
-                    <Button size='small' perm='sys-user:update' onClick={() => this.handleEdit(record)}> 编辑 </Button>
-
-                    <Button size='small' perm='sys-user:grant-permission'
-                            onClick={() => this.permRef.current.show(record)}> 授权 </Button>
-
-                    <Button size='small' perm='sys-user:reset-password' onClick={() => this.resetPwd(record)}>重置密码</Button>
-
-                    <Popconfirm perm='sys-user:delete' title={'是否确定删除用户'}
-                                onConfirm={() => this.handleDelete(record)}>
-                        <Button size='small'>删除</Button>
-                    </Popconfirm>
-                </PermActions>;
+                return <PermActions
+                    more
+                    size="small"
+                    actions={[
+                        {label: '编辑', perm: 'sys-user:update', onClick: () => this.handleEdit(record)},
+                        {label: '授权', perm: 'sys-user:grant-permission', onClick: () => this.permRef.current.show(record)},
+                        {label: '重置密码', perm: 'sys-user:reset-password', onClick: () => this.resetPwd(record)},
+                        {label: '删除', perm: 'sys-user:delete', confirm: '是否确定删除用户', onClick: () => this.handleDelete(record)},
+                    ]}
+                />;
             },
         },
     ];
@@ -160,7 +157,7 @@ export default class extends React.Component {
 
         return <Page title="用户管理" description="管理系统用户">
             <Splitter>
-                <Splitter.Panel defaultSize={350} style={{paddingRight: 8}}>
+                <Splitter.Panel defaultSize={240} style={{paddingRight: 8}}>
                     <Card size='small'>
                         <OrgTree onChange={this.onSelectOrg}/>
                     </Card>

package/src/pages/userCenter/index.jsx

@@ -0,0 +1,99 @@
+import React from "react";
+import {Button, Card, Descriptions, Form, Input, Modal} from "antd";
+import PermView from "./permView";
+import {HttpUtils, history, Page} from "../../framework";
+
+export default class extends React.Component {
+
+    formRef = React.createRef();
+
+    state = {
+        info: {},
+        changePwdOpen: false,
+        changePwdSuccess: false,
+    }
+
+    componentDidMount() {
+        HttpUtils.get('admin/userCenter/info').then(rs => {
+            this.setState({info: rs})
+        })
+    }
+
+    onPwdFinish = (values) => {
+        HttpUtils.post('admin/userCenter/update-pwd', values).then(() => {
+            this.setState({changePwdOpen: false, changePwdSuccess: true});
+        })
+    }
+
+    pwdValidator = (rule, value) => {
+        return new Promise((resolve, reject) => {
+            HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false}).then(response => {
+                const rs = response.data
+                if (!rs.success) {
+                    reject(rs.message)
+                }
+                resolve()
+            })
+        })
+    }
+
+    render() {
+        const {info, changePwdOpen, changePwdSuccess} = this.state;
+        return <Page backgroundGray>
+
+            <Card title="个人信息"
+                  style={{marginBottom: 16}}
+                  extra={<Button onClick={() => this.setState({changePwdOpen: true})}>修改密码</Button>}>
+                <Descriptions column={2} size="middle">
+                    <Descriptions.Item label="用户名称">{info.name}</Descriptions.Item>
+                    <Descriptions.Item label="账号">{info.account}</Descriptions.Item>
+                    <Descriptions.Item label="手机号码">{info.phone}</Descriptions.Item>
+                    <Descriptions.Item label="用户邮箱">{info.email}</Descriptions.Item>
+                    <Descriptions.Item label="所属单位">{info.unit}</Descriptions.Item>
+                    <Descriptions.Item label="所属机构">{info.org}</Descriptions.Item>
+                    <Descriptions.Item label="所属角色">{(info.roles || []).join('、') || '-'}</Descriptions.Item>
+                    <Descriptions.Item label="创建日期">{info.createTime}</Descriptions.Item>
+                </Descriptions>
+            </Card>
+
+            <Card title="我的权限">
+                <PermView/>
+            </Card>
+
+            <Modal open={changePwdOpen} title="修改密码" okText="确定" cancelText="取消"
+                   onCancel={() => this.setState({changePwdOpen: false})}
+                   onOk={() => this.formRef?.submit()}>
+                <Form ref={this.formRef} onFinish={this.onPwdFinish} style={{maxWidth: 400}}>
+                    <Form.Item name='oldPassword'
+                               label='原密码'
+                               rules={[{required: true, message: '请输入原密码'}]}
+                    >
+                        <Input.Password></Input.Password>
+                    </Form.Item>
+                    <Form.Item name='newPassword'
+                               label='新密码'
+                               extra={'请输入字母、数字、特殊字符'}
+                               rules={[
+                                   {required: true, message: '请输入新密码'},
+                                   {
+                                       validator: this.pwdValidator
+                                   }
+                               ]}
+                    >
+                        <Input.Password></Input.Password>
+                    </Form.Item>
+                </Form>
+            </Modal>
+
+            <Modal open={changePwdSuccess} title="提示" okText="确定"
+                   onCancel={() => this.setState({changePwdSuccess: false})}
+                   onOk={() => {
+                       this.setState({changePwdSuccess: false});
+                       history.push('/public/login');
+                   }}>
+                修改密码成功
+            </Modal>
+
+        </Page>
+    }
+}

package/src/pages/userCenter/permView.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import {Empty, Table, Tag} from "antd";
+import {HttpUtils, Gap} from "../../framework";
+
+export default class PermView extends React.Component {
+
+    state = {
+        data: null,
+    }
+
+    componentDidMount() {
+        HttpUtils.get('admin/userCenter/perms').then(rs => {
+            this.setState({data: rs})
+        })
+    }
+
+    render() {
+        const {data} = this.state;
+        if (!data) {
+            return <Empty description='加载中...'/>;
+        }
+
+        const orgColumns = [
+            {
+                title: '机构名称', dataIndex: 'title', key: 'title',
+            },
+            {
+                title: '状态', dataIndex: 'status', key: 'status', width: 140,
+                render: (status) => {
+                    if (status === 'mine') {
+                        return <Tag color='blue'>我的机构</Tag>;
+                    }
+                    if (status === 'owned') {
+                        return <Tag color='green'>已授权</Tag>;
+                    }
+                    return '-';
+                }
+            },
+        ];
+
+        const menuColumns = [
+            {
+                title: '菜单名称', dataIndex: 'title', key: 'title',
+            },
+            {
+                title: '权限名称', dataIndex: 'perms', key: 'perms',
+                render: (perms) => (perms || []).join('、') || '-',
+            },
+            {
+                title: '状态', dataIndex: 'status', key: 'status', width: 140,
+                render: (status) => {
+                    if (status === 'all') {
+                        return <Tag color='green'>已授权</Tag>;
+                    }
+                    if (status === 'partial') {
+                        return <Tag color='orange'>部分授权</Tag>;
+                    }
+                    return '-';
+                }
+            },
+        ];
+
+        return <div>
+            <div style={{marginBottom: 16}}>
+                <span>数据权限：
+                    <Tag color='processing'>{data.dataPermLabel || '-'}</Tag>
+                </span>
+            </div>
+            {data.orgRows && data.orgRows.length
+                ? <Table size='small' rowKey='key' columns={orgColumns} dataSource={data.orgRows}
+                         pagination={false} expandable={{defaultExpandAllRows: true}}/>
+                : <Empty description='暂无机构数据'/>}
+            <Gap/>
+            {data.menuRows && data.menuRows.length
+                ? <Table size='small' rowKey='key' columns={menuColumns} dataSource={data.menuRows}
+                         pagination={false} expandable={{defaultExpandAllRows: true}}/>
+                : <Empty description='暂无权限数据'/>}
+        </div>;
+    }
+}

package/src/pages/account/changePassword.jsx

@@ -1,65 +0,0 @@
-import React from "react";
-import {Button, Form, Input, Modal} from "antd";
-import {HttpUtils, history} from "../../framework";
-
-export default class extends React.Component {
-
-    state = {
-        successModalOpen: false,
-    };
-
-    onFinish = (values) => {
-        HttpUtils.post('admin/userCenter/update-pwd', values).then(() => {
-            this.setState({successModalOpen: true});
-        })
-    }
-
-    validator = (rule, value) => {
-        return new Promise((resolve, reject) => {
-            HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false}).then(response => {
-                const rs = response.data
-                if (!rs.success) {
-                    reject(rs.message)
-                }
-                resolve()
-            })
-        })
-
-    }
-
-    render() {
-        return <div>
-            <Modal open={this.state.successModalOpen} title="提示" okText="确定"
-                   onCancel={() => this.setState({successModalOpen: false})}
-                   onOk={() => {
-                       this.setState({successModalOpen: false});
-                       history.push('/public/login');
-                   }}>
-                修改密码成功
-            </Modal>
-
-            <Form onFinish={this.onFinish} style={{maxWidth: 400}}>
-
-                <Form.Item name='newPassword'
-                           label='新密码'
-                           extra={'请输入字母、数字、特殊字符'}
-                           rules={[
-                               {required: true},
-                               {
-                                   validator: this.validator
-                               }
-                           ]}
-                >
-                    <Input.Password></Input.Password>
-                </Form.Item>
-
-                <Form.Item wrapperCol={{offset: 5}} style={{marginTop: 40}}>
-                    <Button type="primary" htmlType="submit">
-                        确定
-                    </Button>
-                </Form.Item>
-            </Form>
-
-        </div>
-    }
-}

package/src/pages/account/index.jsx

@@ -1,87 +0,0 @@
-import React from "react";
-import {Avatar, Card, Col, Row, Tabs} from "antd";
-import ChangePassword from "./changePassword";
-import {HttpUtils, Page} from "../../framework";
-
-export default class extends React.Component {
-
-    state = {
-        info: {}
-    }
-
-    componentDidMount() {
-        HttpUtils.get('admin/userCenter/info').then(rs => {
-            this.setState({info: rs})
-        })
-    }
-
-    render() {
-        const {info} = this.state;
-        return <Page backgroundGray title="个人中心" description="查看和编辑个人资料">
-
-            <Row gutter={[16, 16]}>
-                <Col md={6} sm={24}>
-                    <Card title='个人信息'>
-
-                        <div className='flex-center' style={{marginBottom: 32}}>
-                            <Avatar size={128} title='点击修改头像'/>
-                        </div>
-
-
-                        <table className='oa-table'>
-                            <tbody>
-                            <tr>
-                                <td>用户名称</td>
-                                <td align='right'>{info.name}</td>
-                            </tr>
-                            <tr>
-                                <td>账号</td>
-                                <td align='right'>{info.account}</td>
-                            </tr>
-                            <tr>
-                                <td>手机号码</td>
-                                <td>{info.phone}</td>
-                            </tr>
-                            <tr>
-                                <td>用户邮箱</td>
-                                <td>{info.email}</td>
-                            </tr>
-                            <tr>
-                                <td>所属部门</td>
-                                <td>{info.unit} {info.dept}</td>
-                            </tr>
-                            <tr>
-                                <td>所属角色</td>
-                                <td>{info.roles}</td>
-                            </tr>
-                            <tr>
-                                <td>创建日期</td>
-                                <td>{info.createTime}</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </Card>
-                </Col>
-                <Col md={18} sm={24}>
-                    <Card title='个人设置'>
-                        <Tabs
-                            items={[
-                                {
-                                    label: '修改密码', key: 'pwd', children: <div>
-                                        <ChangePassword/>
-                                    </div>
-                                },
-
-                            ]}
-                            tabPlacement='left'
-                        >
-                        </Tabs>
-                    </Card>
-                </Col>
-            </Row>
-
-
-        </Page>
-
-    }
-}