GovAlist

@aligov/gov-alist

基于Alist，符合政务系统设计标准的定制版，API与Alist完全一致

组件列表

List

GovAlist 容器组件

引入

import { List } from '@aligov/gov-alist'

属性

属性名	描述	类型	默认值
effects	副作用配置	IListEffect
schema	通过schema渲染列表	IListSchema
actions	列表操作API	IList
url	请求接口URL，优先级高于 dataSource	string
dataSource	设置此值则默认为 手动控制数据模式	string
defaultFilterValues	初始化搜索区域值，设置此值后，执行reset方法将恢复	{[key:string]:any}
filterValues	设置搜索区域值	{[key:string]:any}
params	初始化绑定搜索字段的URL参数	{[key:string]: string}
paramsFields	需要绑定URL参数的搜索字段列表	string[]
method	请求类型	GET or POST
autoLoad	是否初始化发起请求	boolean	true
formatFilter	格式化搜索区域值	() => {[key:string]:any}
formatBefore	格式化请求前参数	(IListQueryData) => any
formatAfter	格式化请求返回结果	(any) => IListResponse
query	代理整个请求过程	() => IListQuery
expandStatus	初始化搜索条件展开状态	'collapse' or 'expand'	collapse

Filter/Filter.Item

GovAlist 搜索区域，Filter / Filter.Item 完全等价于 Formily 的 SchemaForm 和 SchemaMarkupField。

引入

import { Filter } from '@aligov/gov-alist'
const FilterItem = Filter.Item

Table

GovAlist 核心内容展示区域，无须关心 dataSource，GovAlist会负责管理， 属性通过 setTableProps 管理。

引入

import { Table } from '@aligov/gov-alist'

Pagination

GovAlist 分页区域，无须管理页面配置，GovAlist会负责管理，在这里仅做占位符，可以自由选定出现的位置。

Clear

清空按钮

属性

属性名	描述	类型	默认值
render	自定义渲染清空按钮内容，默认为Button	clear方法

用法

import { Clear, List, Filter } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Clear>清空</Clear>
    </Filter>
</List>)

Reset

重置按钮, 与 defaultFilterValues 配合使用, 如果有此属性则恢复，若无则与 clear 一致。

属性

属性名	描述	类型	默认值
render	自定义渲染清空按钮内容，默认为Button	(reset) => React.ReactElement

用法

import { Reset, List, Filter } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Reset>重置</Reset>
    </Filter>
</List>)

Search

搜索按钮

属性

属性名	描述	类型	默认值
render	自定义渲染搜索按钮内容，默认为Button	(search) => React.ReactElement

用法

import { Search, List, Filter } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Search>搜索</Search>
    </Filter>
</List>)

ConnectProvider

无须手动维护组件与GovAlist的关系，简单包裹即可，方便在页面任何脱离搜索区域的地方使用改变搜索条件的组件。

属性名	描述	类型	默认值
name	表单组件名	string
searchOnChange	值改变时是否立即发起请求	boolean	false
children	设置返回内容	({ value, setValue })
defaultEmptyValue	设置默认空值	any	null

import React, { useState } from 'react'
import {
  List, Table, Pagination, Filter,
  Layout, Search, Clear,
  createListActions, ConnectProvider
} from '@aligov/gov-alist'
import { Select } from '@alifd/next';

const actions = createListActions()
const App = () => {  
  const url = 'https://mocks.alibaba-inc.com/mock/alist/data'

  return <div>
    <List actions={actions} url={url}>
      <Filter inline>
        <Filter.Item type="input" name="username" title="username"/>
        <Filter.Item type="input" name="age" title="age"/>
        <Layout.ButtonGroup>
          <Search>搜索</Search>
          <Clear>重置</Clear>
        </Layout.ButtonGroup>
      </Filter>
      <div>
        <h5>自定义组件搜索</h5>
        <ConnectProvider name="custom" searchOnChange>
            {({ value, setValue }) => {
                console.log('===', value)
                return <Select style={{ width: '200px' }} onChange={setValue} value={value}>
                    <Select.Option value="a">a</Select.Option>
                    <Select.Option value="b">b</Select.Option>
                </Select>
            }}
        </ConnectProvider>
      </div>
    </List>
  </div>
}

ReactDOM.render(<App />, document.getElementById('root'))

Consumer

自定义消费列表状态组件

属性

属性名	描述	类型	默认值
selector	监听变更的生命周期	ListLifeCycleTypes	*
children	监听变更的生命周期	(list) => React.ReactElement

用法

import { Consumer, List, Filter, ListLifeCycleTypes } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Reset>重置</Reset>
    </Filter>
    <Consumer selector={[ListLifeCycleTypes.ON_LIST_FILTER_ITEM_CHANGE]}>
        {(list) => {
            const username = list.getFieldState('username', state => state.value)
            return <div>username: {username}</div>
        }}
    </Consumer>
</List>)

ExpandContainer

搜索区域折叠字段容器, 被包裹的搜索字段会被默认收起。初始化状态根据 <List> 传入的 expandStatus 决定。

用法

import { List, Filter, ExpandContainer } from '@aligov/gov-alist'
const App = () => (<List expandStatus="expand">
    <Filter>
        <ExpandContainer>
            <Filter.Item type="input" name="username" />
        </ExpandContainer>
    </Filter>
</List>)

ExpandTrigger

搜索区域折叠字段触发器，与 <ExpandContainer> 配合

属性名	描述	类型	默认值
render	自定义渲染内容，默认为Button	({ toggleExpandStatus, expandStatus }) => React.ReactElement
unExpandText	监听变更的生命周期	(list) => React.ReactElement
expandText	监听变更的生命周期	(list) => React.ReactElement

用法

import { List, Filter, ExpandContainer, ExpandTrigger } from '@aligov/gov-alist'
const App = () => (<List expandStatus="expand">
    <Filter>
        <ExpandContainer>
            <Filter.Item type="input" name="username" />
        </ExpandContainer>
        <ExpandTrigger expandText="展开" unExpandText="收起" />
    </Filter>
</List>)

ToggleTrigger

内容区域展开收起的触发器, 与 expandedRowRender 配合， 此模式对于 Fusion-Next 更合适。

用法

import { Table, List, Filter, ToggleTrigger } from '@alist/next'
const App = () => (<List
    dataSource={[
        { id: '1', username: 'username-a' },
        { id: '2', username: 'username-b' }
    ]}
>
    <Table
        expandedRowRender={(record) => (record.id + '-' + record.username)}
        hasExpandedRowCtrl={false}
    >
    <Table.Column title="username" dataIndex="username" />
    <Table.Column title="operation" dataIndex="id" cell={(val, idx, record) => {
        return <ToggleTrigger id={record.id} expandText="展开" unExpandText="收起" />
    }} />
    </Table>
</List>)