@jiangood/open-admin 1.0.0

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

@@ -0,0 +1,268 @@
+import {PlusOutlined} from '@ant-design/icons'
+import {Button, Form, Input, Modal, Popconfirm, Tabs} from 'antd'
+import React from 'react'
+import {
+    ButtonList,
+    FieldBoolean,
+    FieldDate, HttpUtils,
+    Page,
+    PageUtils,
+    ProTable,
+    StringUtils,
+    ViewPassword
+} from "../../../framework";
+import {ApiDoc} from "./ApiDoc";
+
+
+export default class extends React.Component {
+
+    state = {
+        formValues: {},
+        formOpen: false
+    }
+
+    formRef = React.createRef()
+    tableRef = React.createRef()
+
+    columns = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+        },
+        {
+            title: 'appId',
+            dataIndex: 'appId',
+        },
+
+        {
+            title: 'appSecret',
+            dataIndex: 'appSecret',
+            render(v) {
+                return <ViewPassword value={v}></ViewPassword>;
+            }
+        },
+        {
+            title: '准入IP',
+            dataIndex: 'accessIp',
+        },
+        {
+            title: '有效期',
+            dataIndex: 'endTime',
+        },
+        {
+            title: '启用',
+            dataIndex: 'enable',
+            render(v) {
+                return v == null ? null : (v ? '是' : '否')
+            },
+        },
+        {
+            title: '操作',
+            dataIndex: 'option',
+            render: (_, record) => (
+                <ButtonList>
+                    <Button size='small' perm='api'
+                            onClick={() => PageUtils.open('/system/api/perm?accountId=' + record.id, '账户权限')}
+                            type='primary'>权限</Button>
+                    <Button size='small' perm='api' onClick={() => this.handleEdit(record)}>编辑</Button>
+                    <Popconfirm perm='api' title='是否确定删除接口访客' onConfirm={() => this.handleDelete(record)}>
+                        <Button size='small'>删除</Button>
+                    </Popconfirm>
+                </ButtonList>
+            ),
+        },
+    ]
+
+    handleAdd = () => {
+        this.setState({formOpen: true, formValues: {}})
+    }
+
+    handleEdit = record => {
+        this.setState({formOpen: true, formValues: record})
+    }
+
+
+    onFinish = values => {
+        HttpUtils.post('admin/apiAccount/save', values).then(rs => {
+            this.setState({formOpen: false})
+            this.tableRef.current.reload()
+        })
+    }
+
+
+    handleDelete = record => {
+        HttpUtils.get('admin/apiAccount/delete', {id: record.id}).then(rs => {
+            this.tableRef.current.reload()
+        })
+    }
+
+    randomAppSecret = () => {
+        const appSecret = StringUtils.random(32)
+        this.formRef.current.setFieldsValue({appSecret})
+    }
+
+    render() {
+        return <Page padding>
+            <Tabs items={[
+
+                {
+                    label: '接口列表',
+                    key: '2',
+                    children: <ProTable
+                        rowKey='action'
+                        columns={[
+                            {dataIndex: 'name', title: '名称'},
+                            {dataIndex: 'action', title: '动作'},
+                            {dataIndex: 'desc', title: '描述'},
+
+                        ]}
+                        request={(params,) => HttpUtils.get('admin/api/resource/page', params)}
+                    />
+                },
+
+                {
+                    label: '账号列表',
+                    key: '1',
+                    children: <ProTable
+                        actionRef={this.tableRef}
+                        toolBarRender={() => {
+                            return <ButtonList>
+                                <Button perm='api' type='primary' onClick={this.handleAdd}>
+                                    <PlusOutlined/> 新增
+                                </Button>
+                            </ButtonList>
+                        }}
+                        request={(params) => HttpUtils.get('admin/apiAccount/page', params)}
+                        columns={this.columns}
+                    />
+                }, {
+                    label: '接口文档',
+                    key: '3',
+                    children: <ApiDoc/>
+                },
+                {
+                    label: '访问记录',
+                    key: '4',
+                    children: <ProTable
+                        request={(params) => HttpUtils.get('admin/apiAccessLog/page', params)}
+                        columns={[
+
+                            {
+                                title: '接口名称',
+                                dataIndex: 'name',
+
+
+                            },
+
+                            {
+                                title: '接口',
+                                dataIndex: 'action',
+
+
+                            },
+
+                            {
+                                title: 'requestId',
+                                dataIndex: 'requestId',
+
+                            },
+
+                            {
+                                title: '请求数据',
+                                dataIndex: 'requestData',
+
+
+                            },
+
+                            {
+                                title: '响应数据',
+                                dataIndex: 'responseData',
+
+
+                            },
+
+                            {
+                                title: 'ip',
+                                dataIndex: 'ip',
+
+
+                            },
+
+                            {
+                                title: 'ipLocation',
+                                dataIndex: 'ipLocation',
+
+
+                            },
+
+                            {
+                                title: '执行时间',
+                                dataIndex: 'executionTime',
+
+
+                            },
+
+                            {
+                                title: '接口账户',
+                                dataIndex: 'accountName',
+
+
+                            },
+
+
+                        ]}
+                    />
+                },
+
+            ]}>
+
+            </Tabs>
+
+
+            <Modal title='接口访客'
+                   open={this.state.formOpen}
+                   onOk={() => this.formRef.current.submit()}
+                   onCancel={() => this.setState({formOpen: false})}
+                   destroyOnHidden
+                   maskClosable={false}
+            >
+
+                <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='appId' name='appId'>
+                        <Input placeholder='多个用逗号分隔'/>
+                    </Form.Item>
+                    <Form.Item label='appSecret' name='appSecret' rules={[{required: true}, {len: 32}]}
+                               help={<Button size='small' type='link' onClick={this.randomAppSecret}>随机生成</Button>}
+                    >
+                        <Input/>
+                    </Form.Item>
+
+                    <Form.Item label='准入IP' name='accessIp'>
+                        <Input placeholder='多个用逗号分隔'/>
+                    </Form.Item>
+                    <Form.Item label='有效期' name='endTime' style={{marginTop: 32}}>
+                        <FieldDate type='YYYY-MM-DD'/>
+                    </Form.Item>
+                    <Form.Item label='启用' name='enable' rules={[{required: true}]}>
+                        <FieldBoolean/>
+                    </Form.Item>
+
+                </Form>
+            </Modal>
+        </Page>
+
+
+    }
+}
+

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

@@ -0,0 +1,69 @@
+import {message, Switch} from 'antd'
+import React from 'react'
+import {ArrUtils, HttpUtils, Page, PageUtils, ProTable} from "../../../framework";
+
+
+export default class extends React.Component {
+
+
+    constructor(props) {
+        super(props);
+        this.accountId = PageUtils.currentParams().accountId
+    }
+
+    state = {
+        perms: []
+    }
+
+    async componentDidMount() {
+        const rs = await HttpUtils.get('admin/apiAccount/get', {id: this.accountId})
+        this.setState({perms: rs.perms})
+    }
+
+    onChange = async (action, checked) => {
+        const hide = message.loading('保存中...', 0)
+        await HttpUtils.post('admin/apiAccount/grant', {accountId: this.accountId, action, checked});
+
+        const perms = this.state.perms
+        if (checked) {
+            ArrUtils.add(perms, action)
+        } else {
+            ArrUtils.remove(perms, action)
+        }
+        this.setState({perms})
+        hide();
+    }
+
+
+    render() {
+        return <Page>
+
+
+            <ProTable
+                rowKey='action'
+                columns={[
+                    {dataIndex: 'name', title: '名称'},
+                    {dataIndex: 'action', title: '动作'},
+                    {dataIndex: 'desc', title: '描述'},
+                    {
+                        dataIndex: 'option', title: '操作',
+                        render: (_, record) => {
+                            let action = record.action;
+                            return <Switch checked={this.state.perms.includes(action)}
+                                           onChange={(checked) => {
+                                               this.onChange(action, checked)
+
+                                           }}> </Switch>
+                        }
+                    }
+                ]}
+                request={(params,) => HttpUtils.get('admin/api/resource/page', params)}
+            />
+
+        </Page>
+
+
+    }
+}
+
+

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import {HttpUtils, ProTable} from "../../../framework";
+
+
+export default class extends React.Component {
+
+    state = {
+        formValues: {},
+        formOpen: false,
+        selectedRowKeys: []
+    }
+
+    formRef = React.createRef()
+    tableRef = React.createRef()
+
+    columns = [
+
+
+
+        {
+            title: '编码',
+            dataIndex: 'code',
+
+
+        },
+        {
+            title: '文本',
+            dataIndex: 'text',
+        },
+
+
+
+    ]
+
+
+
+    render() {
+        return <>
+            <ProTable
+                actionRef={this.tableRef}
+
+                request={(params) => HttpUtils.get('admin/sysDict/page', params)}
+                columns={this.columns}
+                rowKey='id'
+
+                rowSelection={{
+                    type: 'radio',
+                    selectedRowKeys: this.state.selectedRowKeys,
+                    onChange: (selectedRowKeys, selectedRows) => {
+                        this.setState({selectedRowKeys: selectedRowKeys})
+                        this.props.onChange(selectedRowKeys[0])
+                    }
+                }}
+                onRow={(record) => ({
+                    onClick: () => {
+                        this.setState({selectedRowKeys: [record.id]})
+                        this.props.onChange(record.id)
+                    }
+                })}
+            />
+
+
+
+
+        </>
+
+
+    }
+}
+
+
+

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

@@ -0,0 +1,177 @@
+import {PlusOutlined} from '@ant-design/icons'
+import {Button, Col, Form, Input, InputNumber, Modal, Popconfirm, Row, Tag} from 'antd'
+import React from 'react'
+
+import {ButtonList, FieldBoolean, HttpUtils, ProTable} from '../../../framework'
+
+
+export default class extends React.Component {
+
+    state = {
+        formValues: {},
+        formOpen: false
+    }
+
+    formRef = React.createRef()
+    tableRef = React.createRef()
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.sysDictId !== this.props.sysDictId) {
+            this.tableRef.current.reload()
+        }
+    }
+
+    columns = [
+        {
+            title: '文本',
+            dataIndex: 'text',
+        },
+        {
+            title: '编码',
+            dataIndex: 'code',
+        },
+
+        {
+            title: '启用',
+            dataIndex: 'enabled',
+            render(v) {
+                return v ? '是' : '否'
+            }
+
+        },
+        {
+            title: '显示颜色',
+            dataIndex: 'color',
+            render(v) {
+                return <Tag color={v}>COLOR</Tag>
+            }
+        },
+        {
+            title: '系统内置',
+            dataIndex: 'builtin',
+            render(v) {
+                return v ? '是' : '否'
+            }
+
+        },
+        {
+            title: '序号',
+            dataIndex: 'seq',
+        },
+        {
+            title: '操作',
+            dataIndex: 'option',
+            render: (_, record) => {
+
+                return (
+                    <ButtonList>
+                        <Button size='small' perm='sysDict:save'
+                                onClick={() => this.handleEdit(record)}> 编辑 </Button>
+                        <Popconfirm perm='sysDict:delete' title='是否确定删除字典项'
+                                    onConfirm={() => this.handleDelete(record)}>
+                            <Button size='small'>删除</Button>
+                        </Popconfirm>
+                    </ButtonList>
+                );
+            },
+        },
+    ]
+
+    handleAdd = () => {
+        this.setState({formOpen: true, formValues: {}})
+    }
+
+    handleEdit = record => {
+        this.setState({formOpen: true, formValues: record})
+    }
+
+
+    onFinish = values => {
+        values.sysDict = {id: this.props.sysDictId}
+        HttpUtils.post('admin/sysDictItem/save', values).then(rs => {
+            this.setState({formOpen: false})
+            this.tableRef.current.reload()
+        })
+    }
+
+
+    handleDelete = row => {
+        HttpUtils.get('admin/sysDictItem/delete', row).then(rs => {
+            this.tableRef.current.reload()
+        })
+    }
+
+    render() {
+        return <>
+            <ProTable
+                headerTitle='字典项列表'
+                actionRef={this.tableRef}
+                toolBarRender={() => {
+                    return <ButtonList>
+                        <Button perm='sysDictItem:save' type='primary' onClick={this.handleAdd}>
+                            <PlusOutlined/> 新增
+                        </Button>
+                    </ButtonList>
+                }}
+                request={(params) => {
+                    params.sysDictId = this.props.sysDictId
+                    return HttpUtils.get('admin/sysDictItem/page', params);
+                }}
+                columns={this.columns}
+                rowKey='id'
+                search={false}
+            />
+
+            <Modal
+                title='编辑数据字典项'
+                open={this.state.formOpen}
+                onOk={() => this.formRef.current.submit()}
+                onCancel={() => this.setState({formOpen: false})}
+                destroyOnHidden
+            >
+
+                <Form ref={this.formRef} labelCol={{flex: '100px'}}
+                      initialValues={this.state.formValues}
+                      onFinish={this.onFinish}>
+                    <Form.Item name='id' noStyle></Form.Item>
+
+                    <Row>
+                        <Col span={12}>
+                            <Form.Item label='编码' name='code' rules={[{required: true}]}>
+                                <Input/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label='文本' name='text' rules={[{required: true}]}>
+                                <Input/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Row>
+                        <Col span={12}>
+                            <Form.Item label='颜色' name='color' rules={[{required: true}]}>
+                                <Input/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label='序号' name='seq' rules={[{required: true}]}>
+                                <InputNumber/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
+                       <FieldBoolean />
+                    </Form.Item>
+
+                </Form>
+            </Modal>
+        </>
+
+
+    }
+}
+
+
+

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

@@ -0,0 +1,25 @@
+import React from "react";
+import Dict from "./Dict";
+import DictItem from "./DictItem";
+import {Splitter} from "antd";
+
+export default class extends React.Component {
+
+    state = {
+        selectedKey: null
+    }
+
+
+    render() {
+        return <Splitter>
+            <Splitter.Panel defaultSize={600} style={{paddingRight:16}}>
+                <Dict onChange={selectedKey => this.setState({selectedKey})}/>
+            </Splitter.Panel>
+            <Splitter.Panel style={{paddingLeft:16}}>
+                <DictItem sysDictId={this.state.selectedKey}/>
+            </Splitter.Panel>
+        </Splitter>
+
+
+    }
+}