@jiangood/open-admin 1.0.0-beta.5

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

@@ -0,0 +1,77 @@
+import React, {Fragment} from 'react';
+import {Form, Input, Tag} from "antd";
+import {ViewText, FieldDateRange, HttpUtils, ProTable} from "../../../framework";
+
+export default class extends React.Component {
+
+
+    columns = [
+        {
+            title: '操作',
+            dataIndex: 'operation',
+        },
+        {
+            title: '操作者',
+            dataIndex: 'username'
+        },
+
+        {
+            title: 'ip',
+            dataIndex: 'ip',
+        },
+
+
+        {
+            title: '时间',
+            dataIndex: 'operationTime',
+            sorter: true,
+        },
+        {
+            title: '参数',
+            dataIndex: 'params',
+            render(v) {
+                return <ViewText value={v} ellipsis={true} />
+            }
+
+        },
+        {
+            title: '结果',
+            dataIndex: 'success',
+            render(v) {
+                return <>
+                    <Tag color={v ? 'green' : 'red'}>{v ? '成功' : '失败'}</Tag>
+                </>
+            }
+        },
+        {
+            title: '错误消息',
+            dataIndex: 'error',
+            render(v) {
+                return <ViewText value={v} ellipsis={true} />
+            }
+        },
+    ];
+
+
+    render() {
+        return <>
+            <ProTable
+                request={(params) => HttpUtils.get('admin/sysLog/page', params)}
+                columns={this.columns}
+            >
+                <Form.Item label='操作' name='operation'>
+                    <Input/>
+                </Form.Item>
+                <Form.Item label='时间' name='dateRange'>
+                    <FieldDateRange/>
+                </Form.Item>
+            </ProTable>
+
+        </>
+    }
+
+
+}
+
+
+

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

@@ -0,0 +1,260 @@
+import {DeleteOutlined, EditOutlined, PlusOutlined, SyncOutlined} from '@ant-design/icons';
+import {Button, Card, Checkbox, Empty, Form, Input, Popconfirm, Space, Splitter, Switch, Tree} from 'antd';
+import React from 'react';
+import {
+    FieldBoolean,
+    FieldDictSelect,
+    FieldRemoteTreeSelect,
+    FieldUserSelect,
+    Gap,
+    HttpUtils,
+    NamedIcon,
+    Page
+} from "../../../framework";
+
+
+export default class extends React.Component {
+
+    state = {
+        formLoading: false,
+        formValues: undefined,
+        submitLoading: false,
+        formEditing: false,
+
+
+        params: {
+            onlyShowEnabled: true,
+            onlyShowUnit: false,
+            searchText: null
+        },
+
+        treeData: [],
+        treeLoading: false,
+        draggable: false,
+    }
+    actionRef = React.createRef();
+    treeRef = React.createRef();
+
+    componentDidMount() {
+        this.loadTree()
+    }
+
+    loadTree = () => {
+        this.setState({treeLoading: true})
+
+        const {params} = this.state
+        HttpUtils.get('admin/sysOrg/tree', params).then(rs => {
+            let treeData = rs;
+            this.setState({treeData})
+        }).finally(() => {
+            this.setState({treeLoading: false});
+        })
+    }
+
+    handleDelete = record => {
+        HttpUtils.get('admin/sysOrg/delete', {id: record.id})
+            .then(rs => {
+                this.setState({formValues: null})
+                this.loadTree()
+            })
+    }
+
+
+    onSelect = (selectedKeys) => {
+        if (selectedKeys.length === 0) {
+            this.setState({formValues: null})
+            return
+        }
+
+        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})
+        })
+    }
+
+    onFinish = (values) => {
+        this.setState({submitLoading: true, formEditing: false})
+        HttpUtils.post('admin/sysOrg/save', values).then(rs => {
+            this.loadTree()
+        }).finally(() => {
+            this.setState({submitLoading: false})
+        })
+    }
+
+
+    onDraggableChange = e => {
+        this.setState({draggable: e})
+    };
+
+
+    render() {
+        let {formValues} = this.state;
+        let disabled = formValues == null;
+        let params = this.state.params;
+        return <Page padding>
+            <Card>
+                <Space>
+
+                    <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/>
+            <Splitter>
+                <Splitter.Panel defaultSize={500}>
+                    <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>}>
+
+
+                        <Tree ref={this.treeRef}
+                              treeData={this.state.treeData}
+                              onSelect={this.onSelect}
+                              showIcon
+                              blockNode
+                              icon={item => {
+                                  return <NamedIcon name={item.data.iconName}/>;
+                              }}
+                              draggable={this.state.draggable}
+                              onDrop={this.onDrop}
+                              showLine
+                              defaultExpandAll
+                        >
+                        </Tree>
+                        {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>
+                        }
+
+
+                    </Card>
+                </Splitter>
+
+            </Splitter>
+
+
+        </Page>
+    }
+
+    onDrop = (e) => {
+        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
+
+
+        console.log(dragNode.title, '->', node.title, 'dropToGap:', dropToGap, "dropPosition:", dropPosition)
+        HttpUtils.post('admin/sysOrg/sort', {dropPosition, dropToGap, dropKey, dragKey}).then(this.loadTree)
+    };
+}
+
+
+

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

@@ -0,0 +1,302 @@
+import {PlusOutlined} from '@ant-design/icons'
+import {Button, Form, Input, InputNumber, Modal, Popconfirm, Transfer, Tree} from 'antd'
+import React from 'react'
+import {ButtonList, FieldBoolean, HttpUtils, Page, PageUtils, ProTable, ViewText} from "../../../framework";
+
+
+export default class extends React.Component {
+
+    state = {
+        formValues: {},
+        formOpen: false,
+
+        usersModalOpen: false,
+
+
+        userList: [],
+        targetKeys: [],
+        selectedKeys: [],
+
+        menuOpen: false,
+        menuTree: [],
+        menuTreeLoading: false,
+        menuChecked: [],
+        menuHalfChecked: []
+    }
+
+    formRef = React.createRef()
+    tableRef = React.createRef()
+
+    handleAdd = () => {
+        this.setState({formOpen: true, formValues: {}})
+    }
+
+    handleEdit = record => {
+        this.setState({formOpen: true, formValues: record}, () => {
+
+        })
+    }
+
+    handleEditUser = record => {
+        this.setState({usersModalOpen: true, formValues: record})
+        HttpUtils.get('admin/sysRole/userList', {id: record.id}).then(rs => {
+            this.setState({userList: rs.list, targetKeys: rs.selectedKeys})
+        })
+    }
+
+    onFinish = values => {
+        HttpUtils.post('admin/sysRole/save', values).then(rs => {
+            this.setState({formOpen: false})
+            this.tableRef.current.reload()
+        })
+    }
+
+    handleDelete = record => {
+        HttpUtils.get('admin/sysRole/delete', {id: record.id}).then(rs => {
+            this.tableRef.current.reload()
+        })
+    }
+
+    columns = [
+
+        {
+            title: '名称',
+            dataIndex: 'name',
+
+
+        },
+
+        {
+            title: '编号',
+            dataIndex: 'code',
+
+
+        },
+
+        {
+            title: '排序',
+            dataIndex: 'seq',
+
+
+        },
+
+        {
+            title: '备注',
+            dataIndex: 'remark',
+
+
+        },
+
+        {
+            title: '启用',
+            dataIndex: 'enabled',
+
+
+            render(v) {
+                return v == null ? null : (v ? '是' : '否')
+            },
+
+
+        },
+        {
+            title: '是否内置',
+            dataIndex: 'builtin',
+
+
+            render(v) {
+                return v == null ? null : (v ? '是' : '否')
+            },
+
+
+        },
+
+        {
+            title: '权限码',
+            dataIndex: 'perms',
+            width: 300,
+            render(v) {
+                if (v) {
+                    return <ViewText value={v.join(',')} ellipsis={true} />
+                }
+            }
+
+        },
+
+
+        {
+            title: '操作',
+            dataIndex: 'option',
+            render: (_, record) => {
+
+                return (
+                    <ButtonList>
+                        <Button size='small' perm='sysRole:manage'
+                                onClick={() => this.handleEditUser(record)}>用户设置</Button>
+
+                        <Button size='small' perm='sysRole:manage' disabled={record.builtin}
+                                onClick={() => PageUtils.open('/system/role/perm?id=' + record.id, '角色权限设置')}>权限设置</Button>
+
+                        <Button size='small' perm='sysRole:manage' disabled={record.builtin}
+                                onClick={() => this.handleEdit(record)}>编辑</Button>
+                        <Popconfirm perm='sysRole:manage' disabled={record.builtin} title='是否确定删除系统角色'
+                                    onConfirm={() => this.handleDelete(record)}>
+                            <Button size='small'>删除</Button>
+                        </Popconfirm>
+                    </ButtonList>
+                );
+            },
+        },
+    ]
+
+    handleSaveUsers = () => {
+        const params = {
+            id: this.state.formValues.id,
+            userIdList: this.state.targetKeys
+        }
+        HttpUtils.post('admin/sysRole/grantUsers', params).then(rs => {
+            this.setState({usersModalOpen: false})
+        })
+    }
+
+    handleEditMenu = (record) => {
+        this.setState({menuOpen: true, formValues: 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.formValues.id,
+            menuIds: [...this.state.menuChecked, ...this.state.menuHalfChecked]
+        }
+        HttpUtils.post('admin/sysRole/grantMenu', params).then(rs => {
+            debugger
+            this.setState({menuOpen: false})
+        })
+    }
+
+    render() {
+        return <Page padding>
+            <ProTable
+                actionRef={this.tableRef}
+                toolBarRender={() => {
+                    return <ButtonList>
+                        <Button perm='sysRole:manage' type='primary' onClick={this.handleAdd}>
+                            <PlusOutlined/> 新增
+                        </Button>
+                    </ButtonList>
+                }}
+                request={(params) => HttpUtils.get('admin/sysRole/page', params)}
+                columns={this.columns}
+
+            />
+
+            <Modal title='系统角色'
+                   open={this.state.formOpen}
+                   onOk={() => this.formRef.current.submit()}
+                   onCancel={() => this.setState({formOpen: false})}
+                   destroyOnHidden
+                   maskClosable={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='enabled' rules={[{required: true}]}>
+                        <FieldBoolean/>
+                    </Form.Item>
+
+
+                </Form>
+            </Modal>
+
+
+            <Modal title={'角色用户' + "【" + this.state.formValues?.name + '】'}
+                   open={this.state.usersModalOpen}
+                   destroyOnHidden
+                   maskClosable={false}
+                   width={800}
+                   onCancel={() => this.setState({usersModalOpen: false})}
+                   onOk={this.handleSaveUsers}
+            >
+
+
+                <Transfer
+                    listStyle={{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>
+
+            <Modal title={'角色授权菜单权限' + "【" + this.state.formValues?.name + '】'}
+                   open={this.state.menuOpen}
+                   destroyOnHidden
+                   maskClosable={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>
+
+
+    }
+}
+