Skip to main content

前端组件库

本文档介绍了 open-admin 前端框架中提供的核心组件。

基础组件​

ProTable​

数据表格组件，提供分页、筛选、工具栏等功能。

参数：

参数说明类型默认值
request数据请求函数(params) => Promise-
columns表格列定义Array-
rowKey表格行的唯一标识stringid
actionRef表格操作引用ref-
toolBarRender工具栏渲染函数Function-
rowSelection行选择配置object-
defaultPageSize默认每页条数number10
scrollY表格垂直滚动区域高度number-
bordered是否显示边框boolean-
toolbarOptions是否显示工具栏booleantrue
showToolbarSearch是否显示工具栏搜索boolean-
formRef表单引用ref-

示例：

<ProTable
  actionRef={this.tableRef}
  toolBarRender={(params, {selectedRows, selectedRowKeys}) => {
    return <ButtonList>
      <Button perm='user:save' type='primary' onClick={this.handleAdd}>
        <PlusOutlined/> 新增
      </Button>
    </ButtonList>
  }}
  request={(params) => HttpUtils.get('admin/user/page', params)}
  columns={this.columns}
/>

ProModal​

弹窗组件，用于展示对话框内容。

参数：

参数说明类型默认值
title弹窗标题string-
actionRef弹窗操作引用（已弃用）ref-
ref弹窗引用ref-
onShow弹窗显示回调Function-
footer弹窗底部内容ReactNode-
width弹窗宽度number800
children弹窗内容ReactNode-

示例：

<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.handleSave}
  >
    <Form.Item name='id' noStyle></Form.Item>
    <Form.Item label='名称' name='name' rules={[{required: true}]}>
      <Input/>
    </Form.Item>
  </Form>
</Modal>

Ellipsis​

文本省略组件，用于文本过长时以省略号显示，并可点击展开查看。

参数：

参数说明类型默认值
length文本截取长度number15
children要处理的文本内容ReactNode-
pre是否以预格式化文本显示boolean-

LinkButton​

链接按钮组件，用于跳转到指定页面。

参数：

参数说明类型默认值
path跳转路径string-
label页面标签string-
size按钮大小stringsmall
children按钮内容ReactNode-

DownloadFileButton​

下载文件按钮组件。

参数：

参数说明类型默认值
url文件下载地址string-
params下载参数object-
children按钮内容ReactNode-

PageLoading​

页面加载组件。

参数：无

NamedIcon​

命名图标组件。

参数：

参数说明类型默认值
name图标名称string-

Page​

页面组件。

参数：

参数说明类型默认值
padding是否添加内边距booleanfalse
backgroundGray是否设置背景为灰色booleanfalse
children页面内容ReactNode-

使用示例​

完整页面示例​

import {PlusOutlined} from '@ant-design/icons'
import {Button, Form, Input, Modal, Popconfirm} from 'antd'
import React from 'react'
import {ButtonList, FieldUploadFile, HttpUtils, Page, ProTable} from "@jiangood/open-admin";

export default class extends React.Component {

    state = {
        formValues: {},
        formOpen: false
    }

    formRef = React.createRef()
    tableRef = React.createRef()

    columns = [
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (_, record) => (
                <ButtonList>
                    <Button size='small' perm='user:save' onClick={() => this.handleEdit(record)}>编辑</Button>
                    <Popconfirm perm='user: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})
    }

    handleSave = values => {
        HttpUtils.post('admin/user/save', values).then(rs => {
            this.setState({formOpen: false})
            this.tableRef.current.reload()
        })
    }

    handleDelete = record => {
        HttpUtils.get('admin/user/delete', {id: record.id}).then(rs => {
            this.tableRef.current.reload()
        })
    }

    render() {
        return <Page padding={true}>
            <ProTable
                actionRef={this.tableRef}
                toolBarRender={(params, {selectedRows, selectedRowKeys}) => {
                    return <ButtonList>
                        <Button perm='user:save' type='primary' onClick={this.handleAdd}>
                            <PlusOutlined/> 新增
                        </Button>
                    </ButtonList>
                }}
                request={(params) => HttpUtils.get('admin/user/page', params)}
                columns={this.columns}
            />

            <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.handleSave}
                >
                    <Form.Item name='id' noStyle></Form.Item>

                    <Form.Item label='名称' name='name' rules={[{required: true}]}>
                        <Input/>
                    </Form.Item>

                    <Form.Item label='爱好' name='fav' >
                        <Input/>
                    </Form.Item>

                </Form>
            </Modal>
        </Page>
    }
}