sggkui v2.1.12

SGGK React组件库

组件列表

• SGTable
• SGList
• Alert

组件说明

• SGTable

增、删、改、查、批量删除、分页、过滤、搜索于一体的表格

类型说明

interface SGTableProps {
    // 表格名称
    tableName?: string
    // 表格样式名
    className?: string
    //开启行选择
    checkable?: boolean
    // 表格尺寸大小
    size?: 'small' | 'large'
    // 查询接口
    request: ReqProps
    // 添加接口
    onAdd?: ReqProps
    // 编辑接口
    onEdit?: ReqProps
    // 单条删除接口
    onDelete?: ReqProps
    // 批量删除接口
    onDeleteMulti?: ReqProps
    // 表格元数据配置
    columns: Array<SGTableColumns>
    // 固定列
    sticky?: Partial<SGTableSticky>
    // 顶部栏是否隐藏
    topShow?: boolean,
    // 右侧操作按钮列是否显示
    rightShow?: boolean,
    // 表格的样式
    style?: CSSProperties
    // 自定义page、pageSize、total、rows字段
    fieldsName?: ReqPaginationFieldsName,
    // 表格行点击事件
    onRowClick?: (record: Record<string, any>, rowIndex: number) => void
    // 表格列点击事件
    onColumnClick?: (value: string, columnIndex: number, key: string) => void
    // 自定义右侧操作按钮渲染
    renderRightButtons?: (record: any, rowIndex: number) => React.ReactElement
    // 自定义右上角按钮区域
    renderTopRightButtons?: React.ReactNode
    // 自定义添加抽屉页面渲染
    renderAddDrawer?: (props: AddDrawerProps) => React.ReactElement
    // 自定义编辑抽屉页面渲染
    renderEditDrawer?: (props: EditDrawerProps) => React.ReactElement
    // 上传之前直接修改数据
    onBeforeAddMutate?: (obj: Record<string, any>) => Record<string, any>
    // 模板项目传进来的配置信息上下文
    context: SGTableContextProps
    // 流程定义id
    pid?: string
}

const subListMockReq = useRequest(() => new Promise((res, rej) => {
  const total = faker_zh_CN.number.int({ min: 1, max: 100 })
  const arr = Array.from({ length: total }).fill(0).map((v, i) => ({
    id: faker_zh_CN.datatype.uuid(),
    name: faker_zh_CN.person.lastName() + faker_zh_CN.person.firstName(),
    age: faker_zh_CN.number.int({ min: 10, max: 70 }),
    phone: faker_zh_CN.phone.number(),
    location: faker_zh_CN.location.city()
  }))
  setTimeout(() => {
    res({
      records: total,
      page: 1,
      pageSize: 10,
      rows: arr,
    })
  }, 1000);
}), {
  // manual: true,
  onSuccess(res: any) {
    // notification.success({
    //     message: '查询成功',
    // })
  },
  onError(e) {
    notification.error({
        message: '字表获取数据失败',
    })
  },
})

<SGTable
  tableName='子表数据'
  className='p-[50px]'
  size='small'
  rightShow
  request={subListMockReq}
  onAdd={subListMockReq}
  topShow={true}
  checkable
  columns={[
    {
      key: 'id',
      value: '序号',
      search: true,
    },
    {
      key: 'name',
      value: '姓名',
      filter: true
    },
    {
      key: 'age',
      value: '年龄',
      sorter: true,
    },
    {
      key: 'phone',
      value: '手机号码',
    },
    {
      key: 'location',
      value: '住址',
    },
  ]}
/>

• SGList

渲染超大数据虚拟滚动列表

const listdata = Array.from({ length: 200000 }).fill(0).map((v, i) => ({
  id: i,
  name: 'name' + i,
  age: 'age' + i,
}))

<SGList
  containerHeight={300}
  list={listdata}
  itemHeight={50}
  renderItem={(data) => {
    const { index, row: { id, name, age }, style } = data;
    return (
      <div key={index} style={{
        ...style,
        overflowY: 'auto',
        display: 'flex',
        flexDirection: 'row',
        padding: 5,
        backgroundColor: index % 2 === 0 ? '#fff' : '#eee'
      }}>
        <span>index: {index}</span>
        <span>id: {id}</span>
        <span>name: {name}</span>
        <span>age: {age}</span>
      </div>
    )
  }}
/>

• Alert

信息弹层

// 参数说明
showAlert({
  title: '标题', // 必填
  description: '子标题', // 选填
  type: 'success' | 'info' | 'warning' | 'error' | 'glassmorphism', //选填 , 默认 info
  position: 'center' | 'top' | 'left-top' | 'right-top' | 'bottom', // 选填, 默认位置 top
  timeout: 2000,   // 选填, 单位(毫秒) , 若传入参数, 则会在指定时间后自动关闭 
  animate: 'fadeInDown' | 'fadeInUp' | 'fadeInLeft' |'fadeInRight' | 'fadeIn' | 'scale' // 选填, 进入离开动画 默认为 fadeIn
})

//推荐在顶层引入
import { AlertProvider } from 'sggkui'
<AlertProvider>
  <App />
</AlertProvider>

// 在任意需要使用的组件中
import React from 'react'
import { Button } from 'antd'
import { useAlert } from 'sggkui'

export default function AlertTest() {

  const { showAlert, closeAlert } = useAlert()
  
  return (
    <>
      <Button type='primary' onClick={() => showAlert({ title: '这是一个alert', description: '这是具体的描述这是具体的描述这是具体的描述这是具体的描述这是具体的描述这是具体的描述'})}>Show Alert</Button>
      <Button type='primary' onClick={() => closeAlert()}>Close Alert</Button>
    </>
  )
}