Alawn/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin synced 2026-10-21 23:23:43 +00:00
Code Issues Releases Wiki Activity

Search Doc

Browse Source
This commit is contained in:
zuiidea
2017-01-09 23:02:21 +08:00
parent 41ed8233b7
commit 9963e753d4
9 changed files with 145 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2
View File
@@ -8,6 +8,7 @@
- 基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发
- 基于Antd UI 设计语言，提供后台管理系统常见使用场景
- 基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载
- 浅度响应式设计
## To do list
- [x] 登录页面
@@ -20,6 +21,7 @@
- [ ] 交互动效
- [x] 扩展UI组件
- [x] Ico
- [x] Search
- [ ] 可视化图表
## 开发及构建
src/components/ui/index.js
+2 -1
View File
@@ -1,3 +1,4 @@
import Ico from './ico.js'
import Search from './search.js'
export {Ico}
export { Ico, Search }
src/components/ui/search.js
+5 -5
View File
@@ -6,7 +6,7 @@ import { Input, Select, Button, Icon } from 'antd'
class Search extends React.Component {
state = {
clearVisible: false,
selectValue: this.props.selectProps.defaultValue || ''
selectValue: (this.props.select && this.props.selectProps) ? this.props.selectProps.defaultValue : ''
}
handleSearch = () => {
const data = {
@@ -15,7 +15,7 @@ class Search extends React.Component {
if (this.props.select) {
data.field = this.state.selectValue
}
this.props.onSearch(data)
this.props.onSearch && this.props.onSearch(data)
}
handleInputChange = e => {
this.setState({
@@ -37,12 +37,12 @@ class Search extends React.Component {
this.handleSearch()
}
render () {
const {size, select, selectOptions, selectProps} = this.props
const {size, select, selectOptions, selectProps, style} = this.props
const {clearVisible} = this.state
return (
<Input.Group compact size={size} className={styles.search} >
<Input.Group compact size={size} className={styles.search} style={style}>
{select && <Select ref='searchSelect' onChange={this.handeleSelectChange} size={size} {...selectProps}>
{selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
{selectOptions && selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
</Select>}
<Input ref='searchInput' size={size} onChange={this.handleInputChange} />
<Button size={size} type='primary' onClick={this.handleSearch}>搜索</Button>
src/router.js
+8
View File
@@ -40,6 +40,14 @@ export default function ({history, app}) {
cb(null, require('./routes/ui/ico'))
})
}
}, {
path: 'ui/search',
name: 'ui/search',
getComponent (nextState, cb) {
require.ensure([], require => {
cb(null, require('./routes/ui/search'))
})
}
}, {
path: '*',
name: 'error',
src/routes/ui/ico.js
+33 -29
View File
@@ -1,6 +1,6 @@
import React from 'react'
import { Ico } from '../../components/ui'
import { Table } from 'antd'
import { Table, Row, Col } from 'antd'
import styles from './ico.less'
const iconlist = ['Cherry', 'Cheese', 'Bread', 'Beer', 'Beet', 'Bacon', 'Banana', 'Asparagus', 'Apple']
@@ -10,34 +10,38 @@ const IcoPage = () => <div className='content-inner'>
{iconlist.map(item => <li key={item}><Ico className={styles.icon} type={item} /><span className={styles.name}>{item}</span></li>)}
</ul>
<h2 style={{margin: '16px 0'}}>Props</h2>
<Table rowKey={(record, key) => key}
pagination={false}
bordered
columns={[
{
title: '参数',
dataIndex: 'props'
},
{
title: '说明',
dataIndex: 'desciption'
},
{
title: '类型',
dataIndex: 'type'
},
{
title: '默认值',
dataIndex: 'default'
}
]}
dataSource={[
{
props: 'type',
desciption: '图标类型',
type: 'string',
default: '-'
}]} />
<Row>
<Col lg={18} md={24}>
<Table rowKey={(record, key) => key}
pagination={false}
bordered
columns={[
{
title: '参数',
dataIndex: 'props'
},
{
title: '说明',
dataIndex: 'desciption'
},
{
title: '类型',
dataIndex: 'type'
},
{
title: '默认值',
dataIndex: 'default'
}
]}
dataSource={[
{
props: 'type',
desciption: '图标类型',
type: 'String',
default: '-'
}]} />
</Col>
</Row>
</div>
export default IcoPage
src/routes/ui/search.js
+89
View File
@@ -0,0 +1,89 @@
import React from 'react'
import { Search } from '../../components/ui'
import { Table, Row, Col, Card } from 'antd'
const SearchPage = () => <div className='content-inner'>
<Row gutter={32}>
<Col lg={8} md={12}>
<Card title='默认'>
<Search />
</Card>
</Col>
<Col lg={8} md={12}>
<Card title='附带选择'>
<Search {...{
select: true,
selectOptions: [{ value: 'components', name: '组件' }, { value: 'page', name: '页面' }],
selectProps: {
defaultValue: 'components'
}
}} />
</Card>
</Col>
<Col lg={8} md={12}>
<Card title='大小'>
<Search size='large' style={{marginBottom: 16}} />
<Search size='small' />
</Card>
</Col>
</Row>
<h2 style={{margin: '16px 0'}}>Props</h2>
<Row>
<Col lg={18} md={24}>
<Table rowKey={(record, key) => key}
pagination={false}
bordered
columns={[
{
title: '参数',
dataIndex: 'props'
},
{
title: '说明',
dataIndex: 'desciption'
},
{
title: '类型',
dataIndex: 'type'
},
{
title: '默认值',
dataIndex: 'default'
}
]}
dataSource={[
{
props: 'size',
desciption: '设置Search大小，可选值为 【small】 【large】 或者不设',
type: 'String',
default: '-'
},
{
props: 'select',
desciption: '设置是否有选择器',
type: 'Boolean',
default: 'false'
},
{
props: 'selectOptions',
desciption: '选择器的选项，格式为[{name:"",value:""}]或者[{value:""}]',
type: 'Array',
default: '-'
},
{
props: 'selectProps',
desciption: '选择器的属性，可参考antd的【Select】组件',
type: 'Object',
default: '-'
},
{
props: 'onSearch',
desciption: '点击搜索按钮或者点击清除时的回调',
type: 'Function({keyword:string,field:string})',
default: '-'
}]} />
</Col>
</Row>
</div>
export default SearchPage
src/routes/ui/search.less
View File
src/theme.js
+1 -1
View File
@@ -7,7 +7,7 @@ module.exports = () => {
'@border-color-split': '#f4f4f4',
'@border-color-base': '#e5e5e5',
'@menu-dark-bg': '#3e3e3e',
'@text-color':'#666',
'@text-color': '#666',
'@font-family': 'monospace,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif'
}
}
src/utils/menu.js
+5 -1
View File
@@ -17,7 +17,11 @@ module.exports = [
child: [
{
key: 'ico',
name: '业务图标'
name: 'Ico 图标'
},
{
key: 'search',
name: 'Search 搜索'
}
]
},