@jiangood/open-admin 2.4.7 → 2.5.0

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

@@ -1,38 +1,35 @@
-import {DeleteOutlined, EditOutlined, PlusOutlined, SyncOutlined} from '@ant-design/icons';
-import {Button, Card, Checkbox, Empty, Form, Input, Popconfirm, Space, Splitter, Switch, Tree} from 'antd';
+import {DeleteOutlined, EditOutlined, PlusOutlined, SettingOutlined, SyncOutlined} from '@ant-design/icons';
+import {Button, Card, Checkbox, Descriptions, Form, Input, InputNumber, Modal, Popconfirm, Popover, Space, Splitter, Switch, Tree, Typography} from 'antd';
 import React from 'react';
 import {
     FieldBoolean,
     FieldDictSelect,
     FieldRemoteTreeSelect,
     FieldUserSelect,
-    Gap,
     HttpUtils,
     NamedIcon,
-    Page
+    Page,
+    ViewBooleanEnableDisable,
 } from "../../../framework";
 
-
 export default class extends React.Component {
 
     state = {
-        formLoading: false,
-        formValues: undefined,
-        submitLoading: false,
-        formEditing: false,
-
-
+        selectedOrg: null,
         params: {
             onlyShowEnabled: true,
             onlyShowUnit: false,
-            searchText: null
+            searchText: null,
         },
-
         treeData: [],
         treeLoading: false,
         draggable: false,
+
+        modalOpen: false,
+        modalValues: {},
+        modalLoading: false,
     }
-    actionRef = React.createRef();
+    formRef = React.createRef();
     treeRef = React.createRef();
 
     componentDidMount() {
@@ -41,205 +38,191 @@ export default class extends React.Component {
 
     loadTree = () => {
         this.setState({treeLoading: true})
-
-        const {params} = this.state
-        HttpUtils.get('admin/sysOrg/tree', params).then(rs => {
-            const treeData = rs;
-            this.setState({treeData})
+        HttpUtils.get('admin/sysOrg/tree', this.state.params).then(rs => {
+            this.setState({treeData: rs})
         }).finally(() => {
             this.setState({treeLoading: false});
         })
     }
 
-    handleDelete = record => {
-        HttpUtils.post('admin/sysOrg/delete', {id: record.id})
-            .then(rs => {
-                this.setState({formValues: null})
-                this.loadTree()
-            })
+    handleDelete = () => {
+        const {selectedOrg} = this.state
+        if (!selectedOrg) return
+        HttpUtils.post('admin/sysOrg/delete', {id: selectedOrg.id}).then(() => {
+            this.setState({selectedOrg: null})
+            this.loadTree()
+        })
     }
 
-
     onSelect = (selectedKeys) => {
         if (selectedKeys.length === 0) {
-            this.setState({formValues: null})
+            this.setState({selectedOrg: null})
             return
         }
+        HttpUtils.get("admin/sysOrg/detail", {id: selectedKeys[0]}).then(rs => {
+            this.setState({selectedOrg: rs})
+        })
+    }
 
-        const key = selectedKeys[0]
-        this.setState({formLoading: true, formEditing: false})
-        HttpUtils.get("admin/sysOrg/detail", {id: key}).then(rs => {
-            this.setState({formValues: rs})
-        }).finally(() => {
-            this.setState({formLoading: false})
+    handleAdd = () => {
+        const {selectedOrg} = this.state
+        this.setState({
+            modalOpen: true,
+            modalValues: {pid: selectedOrg?.id, enabled: true},
+        })
+    }
+
+    handleEdit = () => {
+        this.setState({
+            modalOpen: true,
+            modalValues: {...this.state.selectedOrg},
         })
     }
 
-    onFinish = (values) => {
-        this.setState({submitLoading: true, formEditing: false})
-        const isNew = !values.id;
-        const url = isNew ? 'admin/sysOrg/create' : 'admin/sysOrg/update';
-        HttpUtils.post(url, values).then(rs => {
+    handleModalFinish = (values) => {
+        this.setState({modalLoading: true})
+        const isNew = !values.id
+        const url = isNew ? 'admin/sysOrg/create' : 'admin/sysOrg/update'
+        HttpUtils.post(url, values).then(() => {
+            this.setState({modalOpen: false})
             this.loadTree()
         }).finally(() => {
-            this.setState({submitLoading: false})
+            this.setState({modalLoading: false})
         })
     }
 
-
     onDraggableChange = e => {
         this.setState({draggable: e})
     };
 
-
     render() {
-        const {formValues} = this.state;
-        const disabled = formValues == null;
-        const params = this.state.params;
-        return <Page>
-            <Card>
-                <Space>
+        const {selectedOrg} = this.state
+        const params = this.state.params
 
-                    <Input.Search placeholder='搜索' value={params.searchText} onChange={e => {
-                        params.searchText = e.target.value
-                        this.setState({params}, this.loadTree)
-                    }}/>
-                    <Checkbox checked={params.onlyShowEnabled}
-                              onChange={e => {
-                                  params.onlyShowEnabled = e.target.checked;
-                                  this.setState({params}, this.loadTree);
-                              }}>仅显示启用</Checkbox>
-
-                    <Checkbox checked={params.onlyShowUnit}
-                              onChange={e => {
-                                  params.onlyShowUnit = e.target.checked;
-                                  this.setState({params}, this.loadTree);
-                              }}>仅显示单位</Checkbox>
-
-
-                </Space>
-            </Card>
-            <Gap/>
+        return <Page title="组织机构" description="管理组织机构树"
+                     actions={<Button type='primary' perm='sys-org:create' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>}>
             <Splitter>
-                <Splitter.Panel defaultSize={500}>
+                <Splitter.Panel defaultSize={400} style={{paddingRight: 8}}>
                     <Card loading={this.state.treeLoading}
-                          title='组织机构'
-                          extra={<Space>
-
-                              <div>
-                                  拖拽排序&nbsp;<Switch
-                                  value={this.state.draggable}
-                                  onChange={this.onDraggableChange}/>
-                              </div>
-                              <Button size='small' shape={"round"} icon={<SyncOutlined/>}
-                                      onClick={this.loadTree}></Button>
-                          </Space>}>
-
-
+                          size='small'
+                    >
+                        <div style={{display: 'flex', alignItems: 'center', gap: 4, marginBottom: 8}}>
+                            <Input.Search placeholder='搜索' value={params.searchText} onChange={e => {
+                                params.searchText = e.target.value
+                                this.setState({params}, this.loadTree)
+                            }} style={{flex: 1}}/>
+                            <Popover
+                                trigger='click'
+                                placement='bottomRight'
+                                title='设置'
+                                content={<Space direction='vertical'>
+                                    <Checkbox checked={params.onlyShowEnabled}
+                                              onChange={e => {
+                                                  params.onlyShowEnabled = e.target.checked;
+                                                  this.setState({params}, this.loadTree);
+                                              }}>仅显示启用</Checkbox>
+                                    <Checkbox checked={params.onlyShowUnit}
+                                              onChange={e => {
+                                                  params.onlyShowUnit = e.target.checked;
+                                                  this.setState({params}, this.loadTree);
+                                              }}>仅显示单位</Checkbox>
+                                    <div>
+                                        拖拽排序&nbsp;<Switch
+                                        value={this.state.draggable}
+                                        onChange={this.onDraggableChange}/>
+                                    </div>
+                                    <Button size='small' shape='round' icon={<SyncOutlined/>} onClick={this.loadTree}>刷新</Button>
+                                </Space>}
+                            >
+                                <Button type='text' size='small' icon={<SettingOutlined/>}/>
+                            </Popover>
+                        </div>
                         <Tree ref={this.treeRef}
                               treeData={this.state.treeData}
                               onSelect={this.onSelect}
                               showIcon
                               blockNode
-                              icon={item => {
-                                  return <NamedIcon name={item.data.iconName}/>;
-                              }}
+                              icon={item => <NamedIcon name={item.data.iconName}/>}
                               draggable={this.state.draggable}
                               onDrop={this.onDrop}
                               showLine
                               defaultExpandAll
                         />
-                        {this.state.treeData.length === 0 && <Empty/>}
                     </Card>
                 </Splitter.Panel>
 
-                <Splitter>
-                    <Card
-                        loading={this.state.formLoading}
-                        extra={<Space>
-                            <Button type='primary' onClick={() => {
-                                this.setState({
-                                    formLoading: true,
-                                    formEditing: true,
-                                    formValues: {
-                                        pid: formValues?.id,
-                                    }
-                                }, () => {
-                                    this.setState({formLoading: false})
-                                })
-                            }}>
-                                <PlusOutlined/> 新增
-                            </Button>
-                            <Button disabled={disabled} onClick={() => {
-                                this.setState({
-                                    formEditing: true
-                                })
-                            }}>
-                                <EditOutlined/> 编辑
-                            </Button>
-
-                            <Popconfirm title={'是否确定删除组织机构'} disabled={disabled}
-                                        onConfirm={() => this.handleDelete(formValues)}>
-                                <Button icon={<DeleteOutlined/>} disabled={disabled}>删除</Button>
-                            </Popconfirm>
-
-
-                        </Space>}
-                    >
-
-                        {formValues == null ? <Empty description='未选择机构'/> : <Form
-                            disabled={!this.state.formEditing}
-                            labelCol={{flex: '150px'}}
-                            wrapperCol={{flex: '400px'}}
-                            initialValues={formValues}
-                            onFinish={this.onFinish}
-                        >
-                            <Form.Item noStyle name='id'>
-                            </Form.Item>
-                            <Form.Item label='父节点' name='pid'>
-                                <FieldRemoteTreeSelect url='admin/sysOrg/tree'/>
-                            </Form.Item>
-                            <Form.Item label='名称' name='name' rules={[{required: true}]}>
-                                <Input/>
-                            </Form.Item>
-
-
-                            <Form.Item label='类型' name='type' rules={[{required: true}]}>
-                                <FieldDictSelect typeCode='orgType'/>
-                            </Form.Item>
-
-                            <Form.Item label='部门领导' name={['leader', 'id']}>
-                                <FieldUserSelect/>
-                            </Form.Item>
-                            <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
-                                <FieldBoolean/>
-                            </Form.Item>
-                            <Form.Item label='扩展字段1' name='extra1'>
-                                <Input/>
-                            </Form.Item>
-                            <Form.Item label='扩展字段2' name='extra2'>
-                                <Input/>
-                            </Form.Item>
-                            <Form.Item label='扩展字段3' name='extra3'>
-                                <Input/>
-                            </Form.Item>
-
-
-                            <Form.Item label=' ' colon={false}>
-                                <Button type="primary" htmlType='submit'
-                                        loading={this.state.submitLoading}>保存</Button>
-                            </Form.Item>
-
-                        </Form>
-                        }
-
-
+                <Splitter.Panel style={{paddingLeft: 8}}>
+                    <Card size='small' style={{marginBottom: 8}}>
+                        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8}}>
+                            <Typography.Text strong>机构信息</Typography.Text>
+                            {selectedOrg && (
+                                <span>
+                                    <Button size='small' icon={<EditOutlined/>} perm='sys-org:update'
+                                            onClick={this.handleEdit} style={{marginRight: 4}}>编辑</Button>
+                                    <Popconfirm perm='sys-org:delete' title='是否确定删除组织机构'
+                                                onConfirm={this.handleDelete}>
+                                        <Button size='small' icon={<DeleteOutlined/>}>删除</Button>
+                                    </Popconfirm>
+                                </span>
+                            )}
+                        </div>
+                        {selectedOrg && (
+                            <Descriptions size='small' column={2}>
+                                <Descriptions.Item label="名称">{selectedOrg.name}</Descriptions.Item>
+                                <Descriptions.Item label="类型">{selectedOrg.typeLabel}</Descriptions.Item>
+                                <Descriptions.Item label="上级机构">{selectedOrg.parentName || '-'}</Descriptions.Item>
+                                <Descriptions.Item label="序号">{selectedOrg.seq ?? '-'}</Descriptions.Item>
+                                <Descriptions.Item label="部门领导">{selectedOrg.leader?.name || '-'}</Descriptions.Item>
+                                <Descriptions.Item label="启用"><ViewBooleanEnableDisable value={selectedOrg.enabled}/></Descriptions.Item>
+                                {selectedOrg.extra1 && <Descriptions.Item label="扩展字段1">{selectedOrg.extra1}</Descriptions.Item>}
+                                {selectedOrg.extra2 && <Descriptions.Item label="扩展字段2">{selectedOrg.extra2}</Descriptions.Item>}
+                                {selectedOrg.extra3 && <Descriptions.Item label="扩展字段3">{selectedOrg.extra3}</Descriptions.Item>}
+                            </Descriptions>
+                        )}
                     </Card>
-                </Splitter>
-
+                </Splitter.Panel>
             </Splitter>
 
-
+            <Modal title={this.state.modalValues?.id ? '编辑组织机构' : '新增组织机构'}
+                   open={this.state.modalOpen}
+                   onOk={() => this.formRef.current.submit()}
+                   onCancel={() => this.setState({modalOpen: false})}
+                   destroyOnClose
+            >
+                <Form ref={this.formRef} labelCol={{flex: '120px'}}
+                      initialValues={this.state.modalValues}
+                      onFinish={this.handleModalFinish}
+                >
+                    <Form.Item name='id' noStyle/>
+                    <Form.Item label='父节点' name='pid'>
+                        <FieldRemoteTreeSelect url='admin/sysOrg/tree'/>
+                    </Form.Item>
+                    <Form.Item label='名称' name='name' rules={[{required: true}]}>
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item label='序号' name='seq'>
+                        <InputNumber/>
+                    </Form.Item>
+                    <Form.Item label='类型' name='type' rules={[{required: true}]}>
+                        <FieldDictSelect typeCode='orgType'/>
+                    </Form.Item>
+                    <Form.Item label='部门领导' name={['leader', 'id']}>
+                        <FieldUserSelect/>
+                    </Form.Item>
+                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
+                        <FieldBoolean/>
+                    </Form.Item>
+                    <Form.Item label='扩展字段1' name='extra1'>
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item label='扩展字段2' name='extra2'>
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item label='扩展字段3' name='extra3'>
+                        <Input/>
+                    </Form.Item>
+                </Form>
+            </Modal>
         </Page>
     }
 
@@ -247,11 +230,8 @@ export default class extends React.Component {
         const {dragNode, dropToGap, node} = e;
         const dropKey = node.key;
         const dragKey = dragNode.key;
-
         const dropPos = e.node.pos.split('-');
-        const dropPosition = e.dropPosition - Number(dropPos[dropPos.length - 1]); // the drop position relative to the drop node, inside 0, top -1, bottom 1
-
-
+        const dropPosition = e.dropPosition - Number(dropPos[dropPos.length - 1]);
         HttpUtils.post('admin/sysOrg/sort', {dropPosition, dropToGap, dropKey, dragKey}).then(this.loadTree)
     };
 }

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

@@ -1,5 +1,5 @@
 import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Modal, Popconfirm, Transfer, Tree} from 'antd'
+import {Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Transfer, Tree} from 'antd'
 import React from 'react'
 import {ButtonList, FieldBoolean, HttpUtils, Page, PageUtils, ProTable, ViewText} from "../../../framework";
 
@@ -142,7 +142,7 @@ export default class extends React.Component {
                                 onClick={() => this.handleEdit(record)}>编辑</Button>
                         <Popconfirm perm='sys-role:delete' disabled={record.builtin} title='是否确定删除系统角色'
                                     onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small'>删除</Button>
+                            <Button size='small' disabled={record.builtin}>删除</Button>
                         </Popconfirm>
                     </ButtonList>
                 );
@@ -180,20 +180,29 @@ export default class extends React.Component {
     }
 
     render() {
-        return <Page>
+        return <Page
+            title="角色管理"
+            description="管理系统角色，包括角色权限分配、用户设置等"
+            actions={<Button perm='sys-role:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>}
+        >
             <ProTable
                 actionRef={this.tableRef}
-                toolBarRender={() => {
-                    return <ButtonList>
-                        <Button perm='sys-role:create' type='primary' onClick={this.handleAdd}>
-                            <PlusOutlined/> 新增
-                        </Button>
-                    </ButtonList>
-                }}
                 request={(params) => HttpUtils.get('admin/sysRole/page', params)}
                 columns={this.columns}
-
-            />
+            >
+                <Form.Item label='角色名称' name='name'>
+                    <Input/>
+                </Form.Item>
+                <Form.Item label='角色编码' name='code'>
+                    <Input/>
+                </Form.Item>
+                <Form.Item label='是否内置' name='builtin'>
+                    <Select allowClear placeholder='全部'>
+                        <Select.Option value={true}>是</Select.Option>
+                        <Select.Option value={false}>否</Select.Option>
+                    </Select>
+                </Form.Item>
+            </ProTable>
 
             <Modal title='系统角色'
                    open={this.state.formOpen}

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

@@ -89,8 +89,7 @@ export default class extends React.Component {
 
 
     render() {
-        return <Page>
-
+        return <Page title="角色权限设置" description="设置角色的菜单和权限">
             <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

@@ -1,16 +1,16 @@
 import {PlusOutlined} from '@ant-design/icons';
-import {Button, Form, Input, Modal, Popconfirm, Splitter, Tabs} from 'antd';
+import {Button, Card, Form, Input, Modal, Popconfirm, Select, Splitter} from 'antd';
 import React from 'react';
 import {
     ButtonList,
     DictUtils,
     FieldBoolean,
+    FieldRemoteSelect,
     FieldSysOrgTreeSelect,
     HttpUtils,
     OrgTree,
     Page,
     ProTable,
-    RoleTree
 } from "../../../framework";
 import UserPerm from "./UserPerm";
 
@@ -22,7 +22,6 @@ export default class extends React.Component {
         formValues: {},
 
         currentOrgId: null,
-        currentRoleId: null,
     }
     permRef = React.createRef();
 
@@ -48,10 +47,6 @@ export default class extends React.Component {
         this.setState({currentOrgId: key}, () => this.tableRef.current.reload())
     }
 
-    onSelectRole = (key) => {
-        this.setState({currentRoleId: key}, () => this.tableRef.current.reload())
-    }
-
     handleAdd = () => {
         this.setState({formOpen: true, formValues: {}})
     }
@@ -154,51 +149,41 @@ export default class extends React.Component {
 
     render() {
 
-        return <Page>
+        return <Page title="用户管理" description="管理系统用户" actions={<Button perm='sys-user:create' type="primary" icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>}>
             <Splitter>
-                <Splitter.Panel defaultSize={400}>
-                    <Tabs
-                        type='card'
-                        size='small'
-                        items={[
-                            {
-                                key: 'org',
-                                label: '按组织机构',
-                                children: <OrgTree onChange={this.onSelectOrg}/>
-                            },
-                            {
-                                key: 'role',
-                                label: '按角色',
-                                children: <RoleTree onSelect={this.onSelectRole}/>
-                            }
-                        ]}/>
-
+                <Splitter.Panel defaultSize={350} style={{paddingRight: 8}}>
+                    <Card size='small'>
+                        <OrgTree onChange={this.onSelectOrg}/>
+                    </Card>
                 </Splitter.Panel>
-                <Splitter.Panel style={{paddingLeft: 16}}>
+                <Splitter.Panel style={{paddingLeft: 8}}>
                     <ProTable
+                        searchColumns={3}
                         actionRef={this.tableRef}
-                        toolBarRender={() => {
-                            return <ButtonList>
-                                <Button
-                                    perm='sys-user:create'
-                                    type="primary"
-                                    onClick={this.handleAdd}>
-                                    <PlusOutlined/> 新增
-                                </Button>
-
-
-                            </ButtonList>
-                        }}
-                        showToolbarSearch
                         request={(params) => {
                             params.orgId = this.state.currentOrgId
-                            params.roleId = this.state.currentRoleId
                             return HttpUtils.get('admin/sysUser/page', params)
-                        }
-                        }
+                        }}
                         columns={this.columns}
                     >
-
+                        <Form.Item label='姓名' name='name'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='登录账号' name='account'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='手机号' name='phone'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='角色' name='roleId'>
+                            <FieldRemoteSelect url='admin/sysRole/options' placeholder='请选择角色'/>
+                        </Form.Item>
+                        <Form.Item label='状态' name='enabled'>
+                            <Select allowClear placeholder='全部'>
+                                <Select.Option value={true}>启用</Select.Option>
+                                <Select.Option value={false}>停用</Select.Option>
+                            </Select>
+                        </Form.Item>
                     </ProTable>
                 </Splitter.Panel>
             </Splitter>

package/src/pages/userCenter/index.jsx

@@ -17,7 +17,8 @@ export default class extends React.Component {
 
     render() {
         const {info} = this.state;
-        return <Page backgroundGray>
+        return <Page backgroundGray title="个人中心" description="查看和编辑个人资料">
+
             <Row gutter={[16, 16]}>
                 <Col md={6} sm={24}>
                     <Card title='个人信息'>
@@ -27,7 +28,7 @@ export default class extends React.Component {
                         </div>
 
 
-                        <table className='tmgg-table'>
+                        <table className='oa-table'>
                             <tbody>
                             <tr>
                                 <td>用户名称</td>

package/src/pages/userCenter/message.jsx

@@ -54,7 +54,7 @@ export default class extends React.Component {
     ]
 
     render() {
-        return <Page>
+        return <Page title="消息中心" description="查看系统消息通知">
             <Card variant={"borderless"}>
 
             <Tabs defaultActiveKey="0" destroyOnClose

package/src/style/global.less

@@ -1,5 +1,5 @@
 /*主要在layout中导入*/
-table.tmgg-table {
+table.oa-table {
   width: 100%;
   border-collapse: collapse; /* 合并边框 */
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* 轻微阴影 */