@jiangood/open-admin 3.1.6 → 3.1.8

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

@@ -2,18 +2,17 @@ import React from 'react'
 import {
     Alert,
     AutoComplete,
-    Button,
     Divider,
     Form,
     Input,
-    message,
     Modal,
     Select,
+    Spin,
     Switch,
     Tag
 } from 'antd'
-import {PlusOutlined} from "@ant-design/icons";
-import {FormModal, HttpClient, Page, PermActions, ProTable, UrlUtils, ValueType} from "../../../framework";
+import {PlusOutlined, SearchOutlined} from "@ant-design/icons";
+import {FormModal, getMessageApi, HttpClient, Page, PermActions, ProTable, UrlUtils, ValueType} from "../../../framework";
 
 
 const cronOptions = [
@@ -53,6 +52,10 @@ export default class JobPage extends React.Component {
         status: null,
 
         executeRecordOpen: false,
+
+        logOpen: false,
+        logLoading: false,
+        logContent: '',
     }
     tableRef = React.createRef()
     modalRef = React.createRef()
@@ -91,7 +94,7 @@ export default class JobPage extends React.Component {
     }
 
     handleDelete = row => {
-        const hide = message.loading("删除任务中...")
+        const hide = getMessageApi().loading("删除任务中...")
         HttpClient.post('admin/job/delete', {id: row.id}, null, {toastError: false}).then(() => {
             hide();
             this.tableRef.current.reload();
@@ -178,26 +181,40 @@ export default class JobPage extends React.Component {
         this.setState({executeRecordOpen: true, selectedRecord: record})
     }
 
+    showLog = (record) => {
+        this.setState({logOpen: true, logLoading: true, logContent: '', selectedLogRecord: record})
+        HttpClient.get('admin/sys/log/job/' + record.id, null, {toastError: false}).then(content => {
+            this.setState({
+                logContent: typeof content === 'string' ? content : JSON.stringify(content),
+                logLoading: false
+            })
+        }).catch(e => {
+            console.error('[Job] 加载任务日志失败:', e)
+            this.setState({logContent: '日志加载失败：' + (e?.message || ''), logLoading: false})
+        })
+    }
+
 
     render() {
         return <Page>
             <ProTable
                 actionRef={this.tableRef}
-                toolBarRender={() => ( // NOSONAR: AntD 渲染函数惯例
-                    <PermActions>
-                        <Button type='primary' perm='job:create' icon={<PlusOutlined/>} onClick={() => this.handleAdd()}>新增</Button>
-                        <Button perm='job:read' onClick={this.showStatus}>查看状态</Button>
-                    </PermActions>
+                searchInline
+                toolBarRightRender={() => (
+                    <PermActions actions={[
+                        {label: '新增', type: 'primary', icon: <PlusOutlined/>, perm: 'job:create', onClick: () => this.handleAdd()},
+                        {label: '查看状态', perm: 'job:read', onClick: this.showStatus},
+                    ]}/>
                 )}
                 request={(params) => HttpClient.get('admin/job/page', params)}
                 columns={this.columns}
-                searchFormRender={() => ( // NOSONAR: AntD 渲染函数惯例
+                searchFormRender={() => (
                     <>
-                        <Form.Item label='名称' name='name'>
-                            <Input/>
+                        <Form.Item name='name' noStyle>
+                            <Input prefix={<SearchOutlined/>} placeholder='任务名称' allowClear/>
                         </Form.Item>
-                        <Form.Item label='执行类' name='jobClass'>
-                            <Input/>
+                        <Form.Item name='jobClass' noStyle>
+                            <Input placeholder='执行类' allowClear/>
                         </Form.Item>
                     </>
                 )}
@@ -291,10 +308,7 @@ export default class JobPage extends React.Component {
                     {
                         title: '操作',
                         dataIndex: 'option',
-                        render: (_, record) => {
-                            const url = UrlUtils.contextPath('/admin/sys/log/job/' + record.id);
-                            return <a href={url} target='_blank'>日志</a>;
-                        },
+                        render: (_, record) => <a onClick={() => this.showLog(record)}>日志</a>,
                     }
                 ]} request={(params) => {
                     params.jobId = this.state.selectedRecord.id
@@ -302,6 +316,29 @@ export default class JobPage extends React.Component {
                 }}></ProTable>
 
             </Modal>
+
+            <Modal title='任务日志'
+                   open={this.state.logOpen}
+                   onCancel={() => this.setState({logOpen: false})}
+                   width={1024}
+                   destroyOnHidden
+                   footer={this.state.selectedLogRecord ? (
+                       <a href={UrlUtils.contextPath('/admin/sys/log/job/' + this.state.selectedLogRecord.id)}
+                          target='_blank' rel='noreferrer'>在新窗口打开</a>
+                   ) : null}
+            >
+                <Spin spinning={this.state.logLoading}>
+                    <pre style={{
+                        margin: 0,
+                        maxHeight: '60vh',
+                        overflow: 'auto',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all',
+                        fontSize: 12,
+                        lineHeight: 1.6
+                    }}>{this.state.logContent}</pre>
+                </Spin>
+            </Modal>
         </Page>
     }
 
@@ -311,7 +348,7 @@ export default class JobPage extends React.Component {
             const option = this.state.jobClassOptions.find(o => o.value === changed.jobClass)
             if (option) {
                 const {label} = option;
-                const match = label.match(/[（(](.*?)[）)]/); // NOSONAR: 匹配中英文括号内内容，已最简
+                const match = label.match(/[（(](.*?)[）)]/);
                 if (match) { // 取括号内中文描述设置为name
                     this.modalRef.current.formInstance.setFieldValue("name", match[1])
                 }

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

@@ -53,11 +53,11 @@ export default class LogPage extends React.Component {
 
 
     render() {
-        return <Page title="操作日志" description="查看系统操作日志">
+        return <Page>
             <ProTable
                 request={(params) => HttpClient.get('admin/sysLog/page', params)}
                 columns={this.columns}
-                searchFormRender={() => ( // NOSONAR: AntD 渲染函数惯例
+                searchFormRender={() => (
                     <>
                         <Form.Item label='操作' name='operation'>
                             <Input/>

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

@@ -94,13 +94,13 @@ export default class OrgPage extends React.Component {
         const params = this.state.params
         const canSort = PermUtils.hasPermission('sys-org:update')
 
-        return <Page title="组织机构" description="管理组织机构树" actions={
-            <Button type='primary' perm='sys-org:create' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
-        }>
+        return <Page>
             <Splitter>
                 <Splitter.Panel defaultSize={400} style={{paddingRight: 8}}>
 
-                    <Card size='small' >
+
+                    <Card title="机构树" extra={<Button type='primary' perm='sys-org:create'
+                                              icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>}>
                         <div style={{display: 'flex', alignItems: 'center', gap: 4}}>
                             <Input.Search placeholder='搜索' value={params.searchText} onChange={e => {
                                 params.searchText = e.target.value
@@ -140,7 +140,7 @@ export default class OrgPage extends React.Component {
                                   onSelect={this.onSelect}
                                   showIcon
                                   blockNode
-                                  icon={item => <NamedIcon name={item.data.iconName}/>} // NOSONAR: AntD 渲染函数惯例
+                                  icon={item => <NamedIcon name={item.data.iconName}/>}
                                   draggable={this.state.draggable}
                                   onDrop={this.onDrop}
                                   showLine

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

@@ -1,19 +1,17 @@
-import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Modal, Transfer} from 'antd'
+import {PlusOutlined, SearchOutlined} from '@ant-design/icons'
+import {Form, Input, InputNumber} from 'antd'
 import React from 'react'
-import {FieldBoolean, FormModal, HttpClient, Page, PageUtils, PermActions, ProTable, ViewText} from "../../../framework";
+import {FieldBoolean, FormModal, HttpClient, Page, PageUtils, PermActions, ProTable, UserPicker, ViewText} from "../../../framework";
 
 
 export default class RolePage extends React.Component {
 
     state = {
-        usersModalOpen: false,
+        pickerOpen: false,
         usersModalLoading: false,
         selectedRecord: null,
 
-        userList: [],
         targetKeys: [],
-        selectedKeys: [],
     }
 
     modalRef = React.createRef()
@@ -28,9 +26,8 @@ export default class RolePage extends React.Component {
     }
 
     handleEditUser = record => {
-        this.setState({usersModalOpen: true, selectedRecord: record})
         HttpClient.get('admin/sysRole/user-list', {id: record.id}).then(rs => {
-            this.setState({userList: rs.data.list, targetKeys: rs.data.selectedKeys})
+            this.setState({pickerOpen: true, selectedRecord: record, targetKeys: rs.data?.selectedKeys || []})
         })
     }
 
@@ -121,14 +118,14 @@ export default class RolePage extends React.Component {
         },
     ]
 
-    handleSaveUsers = () => {
+    handleSaveUsers = userIdList => {
         this.setState({usersModalLoading: true})
         const params = {
             id: this.state.selectedRecord.id,
-            userIdList: this.state.targetKeys
+            userIdList
         }
         HttpClient.post('admin/sysRole/grant-users', params, null, {toastError: false}).then(() => {
-            this.setState({usersModalOpen: false, usersModalLoading: false})
+            this.setState({pickerOpen: false, usersModalLoading: false})
         }).catch(() => {
             this.setState({usersModalLoading: false})
         })
@@ -136,25 +133,24 @@ export default class RolePage extends React.Component {
 
     render() {
         return <Page
-            title="角色管理"
-            description="管理系统角色，包括角色权限分配、用户设置等"
         >
             <ProTable
                 actionRef={this.tableRef}
-                toolBarRender={() => ( // NOSONAR: AntD 渲染函数惯例
-                    <PermActions>
-                        <Button perm='sys-role:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
-                    </PermActions>
+                toolBarRightRender={() => (
+                    <PermActions actions={[
+                        {label: '新增', type: 'primary', icon: <PlusOutlined/>, perm: 'sys-role:create', onClick: this.handleAdd},
+                    ]}/>
                 )}
                 request={(params) => HttpClient.get('admin/sysRole/page', params)}
                 columns={this.columns}
-                searchFormRender={() => ( // NOSONAR: AntD 渲染函数惯例
+                searchInline
+                searchFormRender={() => (
                     <>
-                        <Form.Item label='角色名称' name='name'>
-                            <Input/>
+                        <Form.Item name='name' noStyle>
+                            <Input prefix={<SearchOutlined/>} placeholder='角色名称' allowClear/>
                         </Form.Item>
-                        <Form.Item label='角色编码' name='code'>
-                            <Input/>
+                        <Form.Item name='code' noStyle>
+                            <Input placeholder='角色编码' allowClear/>
                         </Form.Item>
                     </>
                 )}
@@ -185,39 +181,16 @@ export default class RolePage extends React.Component {
             </FormModal>
 
 
-            <Modal title={'角色用户' + "【" + this.state.selectedRecord?.name + '】'}
-                   open={this.state.usersModalOpen}
-                   confirmLoading={this.state.usersModalLoading}
-                   destroyOnHidden
-                   mask={{ closable: false }}
-                   width={800}
-                   onCancel={() => this.setState({usersModalOpen: false})}
-                   onOk={this.handleSaveUsers}
-            >
-
-
-                <Transfer
-                    styles={{ section: { height: '60vh', width: 300 } }}
-
-                    dataSource={this.state.userList} titles={["未选择", "已选择"]}
-                    targetKeys={this.state.targetKeys}
-                    selectedKeys={this.state.selectedKeys}
-                    render={item => item.title}
-                    onChange={(nextTargetKeys, _direction, _moveKeys) => {
-                        this.setState({
-                            targetKeys: nextTargetKeys
-                        })
-                    }}
-                    onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
-                        this.setState({
-                            selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys]
-                        })
-                    }}
-                    showSearch
-                />
-
-
-            </Modal>
+            <UserPicker
+                open={this.state.pickerOpen}
+                title={'为「' + (this.state.selectedRecord?.name || '') + '」角色分配用户'}
+                value={this.state.targetKeys}
+                confirmLoading={this.state.usersModalLoading}
+                requestUrl='admin/sysRole/user-page'
+                usersUrl='admin/sysRole/user-by-ids'
+                onOk={this.handleSaveUsers}
+                onCancel={() => this.setState({pickerOpen: false})}
+            />
         </Page>
 
 

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

@@ -93,7 +93,7 @@ export default class RolePermPage extends React.Component {
 
 
     render() {
-        return <Page title="角色权限设置" description="设置角色的菜单和权限">
+        return <Page>
             <Card title='角色权限设置' loading={this.state.loading}
                   variant={"borderless"}
                   extra={<Button type='primary' icon={<SaveOutlined/>} onClick={this.savePerms}>保存权限</Button>}>

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

@@ -80,10 +80,6 @@ export default class UserPage extends React.Component {
         },
 
 
-        {
-            title: '手机',
-            dataIndex: 'phone'
-        },
         {
             title: '邮箱',
             dataIndex: 'email'
@@ -156,9 +152,9 @@ export default class UserPage extends React.Component {
 
     render() {
 
-        return <Page title="用户管理" description="管理系统用户">
+        return <Page >
             <Splitter>
-                <Splitter.Panel defaultSize={240} style={{paddingRight: 8}}>
+                <Splitter.Panel defaultSize={340} style={{paddingRight: 8}}>
                     <Card size='small'>
                         <OrgTree onChange={this.onSelectOrg}/>
                     </Card>
@@ -167,17 +163,17 @@ export default class UserPage extends React.Component {
                     <ProTable
                         searchFormCols={3}
                         actionRef={this.tableRef}
-                        toolBarRender={() => ( // NOSONAR: AntD 渲染函数惯例
-                            <PermActions>
-                                <Button perm='sys-user:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
-                            </PermActions>
+                        toolBarRightRender={() => (
+                            <PermActions actions={[
+                                {label: '新增', type: 'primary', icon: <PlusOutlined/>, perm: 'sys-user:create', onClick: this.handleAdd},
+                            ]}/>
                         )}
                         request={(params) => {
                             params.orgId = this.state.currentOrgId
                             return HttpClient.get('admin/sysUser/page', params)
                         }}
                         columns={this.columns}
-                        searchFormRender={() => ( // NOSONAR: AntD 渲染函数惯例
+                        searchFormRender={() => (
                             <>
                                 <Form.Item label='姓名' name='name'>
                                     <Input/>

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

@@ -1,6 +1,6 @@
-import {Form, Modal, message} from 'antd';
+import {Form, Modal} from 'antd';
 import React from 'react';
-import {FieldDictSelect, FieldRemoteSelect, FieldSysOrgTree, HttpClient} from "../../../framework";
+import {FieldDictSelect, FieldRemoteSelect, FieldSysOrgTree, getMessageApi, HttpClient} from "../../../framework";
 
 
 export default class UserPerm extends React.Component {
@@ -15,9 +15,9 @@ export default class UserPerm extends React.Component {
             dataPermType: null
         },
     }
-    formRef = React.createRef() // NOSONAR: React ref，内部通过 this.formRef 使用
+    formRef = React.createRef()
 
-    show(item) { // NOSONAR: ref 暴露给父组件调用的公共 API
+    show(item) {
         this.setState({visible: true})
 
         HttpClient.get('admin/sysUser/get-perm-info', {id: item.id}).then(rs => {
@@ -41,7 +41,7 @@ export default class UserPerm extends React.Component {
             })
             this.props.onOk()
         }).catch(e => {
-            message.error(HttpClient.errToMsg(e))
+            getMessageApi().error(HttpClient.errToMsg(e))
             this.setState({
                 confirmLoading: false
             })

package/src/pages/userCenter/permView.jsx

@@ -26,7 +26,7 @@ export default class PermView extends React.Component {
             },
             {
                 title: '状态', dataIndex: 'status', key: 'status', width: 140,
-                render: (status) => { // NOSONAR: 返回元素或占位文本，类型不同属预期
+                render: (status) => {
                     if (status === 'mine') {
                         return <Tag color='blue'>我的机构</Tag>;
                     }
@@ -48,7 +48,7 @@ export default class PermView extends React.Component {
             },
             {
                 title: '状态', dataIndex: 'status', key: 'status', width: 140,
-                render: (status) => { // NOSONAR: 返回元素或占位文本，类型不同属预期
+                render: (status) => {
                     if (status === 'all') {
                         return <Tag color='green'>已授权</Tag>;
                     }

package/src/style/global.less

@@ -6,29 +6,29 @@ table.oa-table {
   table-layout: fixed;
 
   th {
-    background-color: #f2f2f2; /* 背景色 */
-    color: #333; /* 文字颜色 */
+    background-color: var(--oa-color-fill, #fafafa); /* 背景色（跟随明暗主题） */
+    color: var(--oa-color-text, #333); /* 文字颜色 */
     font-weight: bold; /* 加粗 */
     padding: 12px 15px; /* 内边距 */
     text-align: left; /* 文字对齐 */
-    border-bottom: 2px solid #ddd; /* 底部边框 */
+    border-bottom: 2px solid var(--oa-color-border, #ddd); /* 底部边框 */
   }
 
   td {
     padding: 10px 15px; /* 内边距 */
-    border-bottom: 1px solid #ddd; /* 底部边框 */
+    border-bottom: 1px solid var(--oa-color-border, #ddd); /* 底部边框 */
     text-align: left; /* 文字对齐 */
   }
 
   /* 表格行悬停效果 */
 
   tr:hover {
-    background-color: #f5f5f5; /* 悬停背景色 */
+    background-color: var(--oa-color-fill, #f5f5f5); /* 悬停背景色 */
   }
 
   /* 斑马纹效果 - 交替行颜色 */
   tr:nth-child(even) {
-    background-color: #f9f9f9;
+    background-color: var(--oa-color-bg-layout, #f9f9f9);
   }
 
   /* 响应式表格 - 在小屏幕上添加水平滚动 */