update 搬迁icon-selector
This commit is contained in:
@@ -773,14 +773,14 @@
|
||||
<summary>
|
||||
获取人员允许绑定的房屋编码列表
|
||||
</summary>
|
||||
<param name="userId"></param>
|
||||
<param name="input"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:Ewide.Application.Service.HouseSelectorService.HouseSelectedList(Ewide.Application.QueryHouseSelectorInput)">
|
||||
<summary>
|
||||
获取人员已经绑定的房屋编码列表
|
||||
</summary>
|
||||
<param name="userId"></param>
|
||||
<param name="input"></param>
|
||||
<returns></returns>
|
||||
</member>
|
||||
<member name="M:Ewide.Application.Service.HouseSelectorService.Select(Ewide.Application.HouseSelectInput)">
|
||||
|
||||
@@ -4,7 +4,6 @@ import * as Icon from '@ant-design/icons'
|
||||
export default class AntIcon extends Component {
|
||||
|
||||
render() {
|
||||
|
||||
const type = (this.props.type || '').toUpperCase()
|
||||
|
||||
if (type) {
|
||||
@@ -19,7 +18,6 @@ export default class AntIcon extends Component {
|
||||
return <I {...this.props} />
|
||||
}
|
||||
}
|
||||
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
34
web-react/src/components/icon-selector/icons.js
Normal file
34
web-react/src/components/icon-selector/icons.js
Normal file
@@ -0,0 +1,34 @@
|
||||
const icons = [
|
||||
{
|
||||
key: 'directional',
|
||||
title: '方向性图标',
|
||||
icons: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'double-right', 'double-left', 'vertical-left', 'vertical-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'up-square', 'down-square', 'left-square', 'right-square', 'login', 'logout', 'menu-fold', 'menu-unfold', 'border-bottom', 'border-horizontal', 'border-inner', 'border-left', 'border-right', 'border-top', 'border-verticle', 'pic-center', 'pic-left', 'pic-right', 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'fullscreen', 'fullscreen-exit']
|
||||
},
|
||||
{
|
||||
key: 'suggested',
|
||||
title: '提示建议性图标',
|
||||
icons: ['question', 'question-circle', 'plus', 'plus-circle', 'pause', 'pause-circle', 'minus', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle', 'exclamation', 'exclamation-circle', 'close', 'close-circle', 'close-square', 'check', 'check-circle', 'check-square', 'clock-circle', 'warning', 'issues-close', 'stop']
|
||||
},
|
||||
{
|
||||
key: 'editor',
|
||||
title: '编辑类图标',
|
||||
icons: ['edit', 'form', 'copy', 'scissor', 'delete', 'snippets', 'diff', 'highlight', 'align-center', 'align-left', 'align-right', 'bg-colors', 'bold', 'italic', 'underline', 'strikethrough', 'redo', 'undo', 'zoom-in', 'zoom-out', 'font-colors', 'font-size', 'line-height', 'column-height', 'dash', 'small-dash', 'sort-ascending', 'sort-descending', 'drag', 'ordered-list', 'radius-setting']
|
||||
},
|
||||
{
|
||||
key: 'data',
|
||||
title: '数据类图标',
|
||||
icons: ['area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart', 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', 'sliders']
|
||||
},
|
||||
{
|
||||
key: 'brand_logo',
|
||||
title: '网站通用图标',
|
||||
icons: ['lock', 'unlock', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-markdown', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'meh', 'smile', 'inbox', 'laptop', 'appstore', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload', 'star', 'heart', 'environment', 'eye', 'camera', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'calculator', 'pushpin', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'table', 'profile', 'alert', 'audit', 'branches', 'build', 'border', 'crown', 'experiment', 'fire', 'money-collect', 'property-safety', 'read', 'reconciliation', 'rest', 'security-scan', 'insurance', 'interaction', 'safety-certificate', 'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit', 'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect', 'file-search', 'file-sync', 'gateway', 'gold', 'robot', 'shopping']
|
||||
},
|
||||
{
|
||||
key: 'application',
|
||||
title: '品牌和标识',
|
||||
icons: ['android', 'apple', 'windows', 'ie', 'chrome', 'github', 'aliwangwang', 'dingding', 'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', 'code-sandbox', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun', 'zhihu', 'slack', 'slack-square', 'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque', 'alibaba', 'yahoo']
|
||||
}
|
||||
]
|
||||
|
||||
export default icons
|
||||
@@ -1,11 +1,86 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Drawer, Tabs } from 'antd'
|
||||
import { AntIcon } from 'components'
|
||||
import icons from './icons'
|
||||
|
||||
export default class IconSelector extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
state = {
|
||||
visible: false,
|
||||
activeKey: icons[0].key,
|
||||
selected: ''
|
||||
}
|
||||
|
||||
open(icon) {
|
||||
if (icon) {
|
||||
const activeKey = (icons.find(p => p.icons.includes(icon)) || icons[0]).key
|
||||
this.setState({
|
||||
visible: true,
|
||||
activeKey,
|
||||
selected: icon
|
||||
})
|
||||
} else {
|
||||
this.setState({ visible: true })
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.setState({ visible: false })
|
||||
}
|
||||
|
||||
onSelectIcon(icon) {
|
||||
if (this.props.onSelect) {
|
||||
this.props.onSelect(icon)
|
||||
}
|
||||
this.close()
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { visible, activeKey, selected } = this.state
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
visible={visible}
|
||||
className="yo-icon-selector"
|
||||
title="选择图标"
|
||||
width={600}
|
||||
destroyOnClose
|
||||
onClose={() => this.close()}
|
||||
>
|
||||
<Tabs
|
||||
tabPosition="left"
|
||||
activeKey={activeKey}
|
||||
>
|
||||
{
|
||||
icons.map(iconGroup => {
|
||||
return (
|
||||
<Tabs.TabPane
|
||||
key={iconGroup.key}
|
||||
tab={iconGroup.title}
|
||||
>
|
||||
<Card>
|
||||
{
|
||||
iconGroup.icons.map(icon => {
|
||||
return (
|
||||
<Card.Grid
|
||||
key={icon}
|
||||
className={selected === icon ? 'yo-icon--selected' : ''}
|
||||
onClick={() => this.onSelectIcon(icon)}
|
||||
>
|
||||
<AntIcon type={icon} style={{ fontSize: '36px' }} />
|
||||
<span>{icon}</span>
|
||||
</Card.Grid>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Card>
|
||||
</Tabs.TabPane>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Tabs>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Form, Input, InputNumber, Spin } from 'antd'
|
||||
import { AntIcon } from 'components'
|
||||
import { AntIcon, IconSelector } from 'components'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const initialValues = {
|
||||
@@ -17,6 +17,8 @@ export default class form extends Component {
|
||||
// 表单实例
|
||||
form = React.createRef()
|
||||
|
||||
iconSelector = React.createRef()
|
||||
|
||||
// 初始化数据
|
||||
record = {}
|
||||
|
||||
@@ -74,6 +76,7 @@ export default class form extends Component {
|
||||
<Form
|
||||
initialValues={initialValues}
|
||||
ref={this.form}
|
||||
className="yo-form"
|
||||
>
|
||||
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
||||
<div className="yo-form-group">
|
||||
@@ -83,6 +86,23 @@ export default class form extends Component {
|
||||
<Form.Item label="唯一编码" name="code" rules={[{ required: true, message: '请输入唯一编码' }]}>
|
||||
<Input autoComplete="off" placeholder="请输入唯一编码" />
|
||||
</Form.Item>
|
||||
<Form.Item label="图标" name="icon">
|
||||
<Input
|
||||
disabled
|
||||
placeholder="请选择图标"
|
||||
addonAfter={
|
||||
<AntIcon
|
||||
type="setting"
|
||||
onClick={() =>
|
||||
this
|
||||
.iconSelector
|
||||
.current
|
||||
.open(this.form.current.getFieldValue('icon'))
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="排序" name="sort">
|
||||
<InputNumber
|
||||
max={1000}
|
||||
@@ -93,6 +113,9 @@ export default class form extends Component {
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Spin>
|
||||
<IconSelector ref={this.iconSelector} onSelect={(icon) => this.form.current.setFieldsValue({
|
||||
icon
|
||||
})} />
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user