@jiangood/open-admin 2.5.9 → 3.0.1

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

@@ -1,11 +1,12 @@
 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 {Button, Card, Checkbox, Descriptions, Form, Input, InputNumber, Popconfirm, Popover, Space, Spin, Splitter, Switch, Tree, Typography} from 'antd';
 import React from 'react';
 import {
     FieldBoolean,
     FieldDictSelect,
     FieldRemoteTreeSelect,
     FieldUserSelect,
+    FormModal, Gap,
     HttpUtils,
     NamedIcon,
     Page,
@@ -24,12 +25,8 @@ export default class extends React.Component {
         treeData: [],
         treeLoading: false,
         draggable: false,
-
-        modalOpen: false,
-        modalValues: {},
-        modalLoading: false,
     }
-    formRef = React.createRef();
+    modalRef = React.createRef();
     treeRef = React.createRef();
 
     componentDidMount() {
@@ -66,29 +63,18 @@ export default class extends React.Component {
 
     handleAdd = () => {
         const {selectedOrg} = this.state
-        this.setState({
-            modalOpen: true,
-            modalValues: {pid: selectedOrg?.id, enabled: true},
-        })
+        this.modalRef.current.open({pid: selectedOrg?.id, enabled: true})
     }
 
     handleEdit = () => {
-        this.setState({
-            modalOpen: true,
-            modalValues: {...this.state.selectedOrg},
-        })
+        this.modalRef.current.open({...this.state.selectedOrg})
     }
 
-    handleModalFinish = (values) => {
-        this.setState({modalLoading: true})
+    handleModalFinish = async values => {
         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({modalLoading: false})
-        })
+        await HttpUtils.post(url, values)
+        this.loadTree()
     }
 
     onDraggableChange = e => {
@@ -99,14 +85,14 @@ export default class extends React.Component {
         const {selectedOrg} = this.state
         const params = this.state.params
 
-        return <Page title="组织机构" description="管理组织机构树"
-                     actions={<Button type='primary' perm='sys-org:create' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>}>
+        return <Page title="组织机构" description="管理组织机构树" actions={
+            <Button type='primary' perm='sys-org:create' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
+        }>
             <Splitter>
                 <Splitter.Panel defaultSize={400} style={{paddingRight: 8}}>
-                    <Card loading={this.state.treeLoading}
-                          size='small'
-                    >
-                        <div style={{display: 'flex', alignItems: 'center', gap: 4, marginBottom: 8}}>
+
+                    <Card size='small' >
+                        <div style={{display: 'flex', alignItems: 'center', gap: 4}}>
                             <Input.Search placeholder='搜索' value={params.searchText} onChange={e => {
                                 params.searchText = e.target.value
                                 this.setState({params}, this.loadTree)
@@ -115,7 +101,7 @@ export default class extends React.Component {
                                 trigger='click'
                                 placement='bottomRight'
                                 title='设置'
-                                content={<Space direction='vertical'>
+                                content={<Space orientation='vertical'>
                                     <Checkbox checked={params.onlyShowEnabled}
                                               onChange={e => {
                                                   params.onlyShowEnabled = e.target.checked;
@@ -137,17 +123,20 @@ export default class extends React.Component {
                                 <Button type='text' size='small' icon={<SettingOutlined/>}/>
                             </Popover>
                         </div>
-                        <Tree ref={this.treeRef}
-                              treeData={this.state.treeData}
-                              onSelect={this.onSelect}
-                              showIcon
-                              blockNode
-                              icon={item => <NamedIcon name={item.data.iconName}/>}
-                              draggable={this.state.draggable}
-                              onDrop={this.onDrop}
-                              showLine
-                              defaultExpandAll
-                        />
+                        <Gap />
+                        <Spin spinning={this.state.treeLoading}>
+                            <Tree ref={this.treeRef}
+                                  treeData={this.state.treeData}
+                                  onSelect={this.onSelect}
+                                  showIcon
+                                  blockNode
+                                  icon={item => <NamedIcon name={item.data.iconName}/>}
+                                  draggable={this.state.draggable}
+                                  onDrop={this.onDrop}
+                                  showLine
+                                  defaultExpandAll
+                            />
+                        </Spin>
                     </Card>
                 </Splitter.Panel>
 
@@ -183,46 +172,37 @@ export default class extends React.Component {
                 </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>
+            <FormModal ref={this.modalRef} title='编辑组织机构'
+                       onFinish={this.handleModalFinish}
+                       labelCol={{flex: '120px'}}>
+                <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>
+            </FormModal>
         </Page>
     }
 

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

@@ -1,17 +1,14 @@
 import {PlusOutlined} from '@ant-design/icons'
 import {Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Transfer, Tree} from 'antd'
 import React from 'react'
-import {PermActions, FieldBoolean, HttpUtils, Page, PageUtils, ProTable, ViewText} from "../../../framework";
+import {FieldBoolean, FormModal, HttpUtils, Page, PageUtils, PermActions, ProTable, ViewText} from "../../../framework";
 
 
 export default class extends React.Component {
 
     state = {
-        formValues: {},
-        formOpen: false,
-
         usersModalOpen: false,
-
+        selectedRecord: null,
 
         userList: [],
         targetKeys: [],
@@ -24,33 +21,29 @@ export default class extends React.Component {
         menuHalfChecked: []
     }
 
-    formRef = React.createRef()
+    modalRef = React.createRef()
     tableRef = React.createRef()
 
     handleAdd = () => {
-        this.setState({formOpen: true, formValues: {}})
+        this.modalRef.current.open({})
     }
 
     handleEdit = record => {
-        this.setState({formOpen: true, formValues: record}, () => {
-
-        })
+        this.modalRef.current.open(record)
     }
 
     handleEditUser = record => {
-        this.setState({usersModalOpen: true, formValues: record})
+        this.setState({usersModalOpen: true, selectedRecord: record})
         HttpUtils.get('admin/sysRole/user-list', {id: record.id}).then(rs => {
             this.setState({userList: rs.list, targetKeys: rs.selectedKeys})
         })
     }
 
-    onFinish = values => {
+    onFinish = async values => {
         const isNew = !values.id;
         const url = isNew ? 'admin/sysRole/create' : 'admin/sysRole/update';
-        HttpUtils.post(url, values).then(rs => {
-            this.setState({formOpen: false})
-            this.tableRef.current.reload()
-        })
+        await HttpUtils.post(url, values)
+        this.tableRef.current.reload()
     }
 
     handleDelete = record => {
@@ -100,18 +93,6 @@ export default class extends React.Component {
 
 
         },
-        {
-            title: '是否内置',
-            dataIndex: 'builtin',
-
-
-            render(v) {
-                return v == null ? null : (v ? '是' : '否')
-            },
-
-
-        },
-
         {
             title: '权限码',
             dataIndex: 'perms',
@@ -135,14 +116,14 @@ export default class extends React.Component {
                         <Button size='small' perm='sys-role:grant-permission'
                                 onClick={() => this.handleEditUser(record)}>用户设置</Button>
 
-                        <Button size='small' perm='sys-role:grant-permission' disabled={record.builtin}
+                        <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' disabled={record.builtin}
+                        <Button size='small' perm='sys-role:update'
                                 onClick={() => this.handleEdit(record)}>编辑</Button>
-                        <Popconfirm perm='sys-role:delete' disabled={record.builtin} title='是否确定删除系统角色'
+                        <Popconfirm perm='sys-role:delete' title='是否确定删除系统角色'
                                     onConfirm={() => this.handleDelete(record)}>
-                            <Button size='small' disabled={record.builtin}>删除</Button>
+                            <Button size='small'>删除</Button>
                         </Popconfirm>
                     </PermActions>
                 );
@@ -152,7 +133,7 @@ export default class extends React.Component {
 
     handleSaveUsers = () => {
         const params = {
-            id: this.state.formValues.id,
+            id: this.state.selectedRecord.id,
             userIdList: this.state.targetKeys
         }
         HttpUtils.post('admin/sysRole/grant-users', params).then(rs => {
@@ -161,7 +142,7 @@ export default class extends React.Component {
     }
 
     handleEditMenu = (record) => {
-        this.setState({menuOpen: true, formValues: record, menuTreeLoading: true})
+        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})
         })
@@ -171,7 +152,7 @@ export default class extends React.Component {
     }
     handleGrantMenu = () => {
         const params = {
-            id: this.state.formValues.id,
+            id: this.state.selectedRecord.id,
             menuIds: [...this.state.menuChecked, ...this.state.menuHalfChecked]
         }
         HttpUtils.post('admin/sysRole/grantMenu', params).then(rs => {
@@ -183,71 +164,54 @@ export default class extends React.Component {
         return <Page
             title="角色管理"
             description="管理系统角色，包括角色权限分配、用户设置等"
-            actions={<Button perm='sys-role:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>}
         >
             <ProTable
                 actionRef={this.tableRef}
+                toolBarRender={() => (
+                    <PermActions>
+                        <Button perm='sys-role:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
+                    </PermActions>
+                )}
                 request={(params) => HttpUtils.get('admin/sysRole/page', params)}
                 columns={this.columns}
-            >
-                <Form.Item label='角色名称' name='name'>
+                searchFormRender={() => (
+                    <>
+                        <Form.Item label='角色名称' name='name'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='角色编码' name='code'>
+                            <Input/>
+                        </Form.Item>
+                    </>
+                )}
+            />
+
+            <FormModal ref={this.modalRef} title='系统角色' onFinish={this.onFinish}>
+
+                <Form.Item label='名称' name='name' rules={[{required: true}]}>
                     <Input/>
                 </Form.Item>
-                <Form.Item label='角色编码' name='code'>
+
+                <Form.Item label='编码' name='code' rules={[{required: true}]}>
                     <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}
-                   onOk={() => this.formRef.current.submit()}
-                   onCancel={() => this.setState({formOpen: false})}
-                   destroyOnHidden
-                   mask={{ closable: false }}
-                   width={600}
-            >
-
-                <Form ref={this.formRef} labelCol={{flex: '100px'}}
-                      initialValues={this.state.formValues}
-                      onFinish={this.onFinish}
-                >
-                    <Form.Item name='id' noStyle></Form.Item>
-
-
-                    <Form.Item label='名称' name='name' rules={[{required: true}]}>
-                        <Input/>
-                    </Form.Item>
 
-                    <Form.Item label='编码' name='code' rules={[{required: true}]}>
-                        <Input/>
-                    </Form.Item>
-
-
-                    <Form.Item label='排序' name='seq'>
-                        <InputNumber/>
-                    </Form.Item>
-
-
-                    <Form.Item label='备注' name='remark'>
-                        <Input/>
-                    </Form.Item>
+                <Form.Item label='排序' name='seq'>
+                    <InputNumber/>
+                </Form.Item>
 
-                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
-                        <FieldBoolean/>
-                    </Form.Item>
+                <Form.Item label='备注' name='remark'>
+                    <Input/>
+                </Form.Item>
 
+                <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
+                    <FieldBoolean/>
+                </Form.Item>
 
-                </Form>
-            </Modal>
+            </FormModal>
 
 
-            <Modal title={'角色用户' + "【" + this.state.formValues?.name + '】'}
+            <Modal title={'角色用户' + "【" + this.state.selectedRecord?.name + '】'}
                    open={this.state.usersModalOpen}
                    destroyOnHidden
                    mask={{ closable: false }}
@@ -280,7 +244,7 @@ export default class extends React.Component {
 
             </Modal>
 
-            <Modal title={'角色授权菜单权限' + "【" + this.state.formValues?.name + '】'}
+            <Modal title={'角色授权菜单权限' + "【" + this.state.selectedRecord?.name + '】'}
                    open={this.state.menuOpen}
                    destroyOnHidden
                    mask={{ closable: false }}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import {Button, Card, Checkbox, Table, Typography} from "antd";
 import {SaveOutlined} from "@ant-design/icons";
-import {HttpUtils, Page, PageUtils} from "../../../framework";
+import {HttpUtils, Page} from "../../../framework";
 export default class extends React.Component {
 
 
@@ -48,7 +48,7 @@ export default class extends React.Component {
     ]
 
     componentDidMount() {
-        this.roleId = PageUtils.currentParams().id;
+        this.roleId = this.props.location?.query?.id;
         this.loadData();
     }