@beisen-phoenix/lookup
Version:
---
423 lines (413 loc) • 21.5 kB
JavaScript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Lookup from '../../src/index';
import Button from '@beisen-phoenix/button';
import Layer from '@beisen-phoenix/unmodeled-layer';
import {options, advanceParam, selectOption, options50, advanceParamSearch } from './mock/data';
import CmpDemo from '@beisen-phoenix/demo-container';
import './index.scss'
import clonedeep from 'lodash.clonedeep';
export default class extends Component {
constructor (props) {
super(props);
this.state = {
}
}
setVisible = (param) => {
this.setState(param)
}
getLook = (param, visible, selectedValue) => {
return <Lookup
//mode={'advanced'}
options={clonedeep(options)}
onConfirm={(data) => {
let _state = {}
_state[visible] = false
_state[selectedValue] = !(data instanceof Array) ? [data] : data
this.setVisible(_state)
}}
onVisibleChange={() => {
let _state = {}
_state[visible] = false
this.setVisible(_state)
}}
selectValue={this.state[selectedValue] || selectOption}
{...param}
//advanceParam={advanceParam}
/>
}
render () {
return (
<div>
<div className="phoenix-lookup-example--title">Lookup多选</div>
<div className="phoenix-lookup-example--wrapper">
<div className="phoenix-lookup-example--flex-item">
<CmpDemo
title="搜索多选"
desc="带头像、搜索、全部查找、选中样式、搜索200字限制、选中项内容自动打点、表格中默认选中值"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
visible={this.state.visible || false}
onVisibleChange={(visible) =>{
this.setState({visible: visible})
}}
destroyPopupOnHide={true}
content={this.getLook({
isAvator: true,
multiple:true,
isAdvanceVbl:true,
selectValue: selectOption,
advanceParam: advanceParam
}, 'visible', 'selectedValue')}
footer={null}
onOk={()=> {}}
>
<Button>多选头像无搜索，默认选中样式</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="搜索、全部查找、头象，无全部查找"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
visible={this.state.visible_w || false}
onVisibleChange={(visible) =>{
this.setState({visible_w: visible})
}}
destroyPopupOnHide={true}
content={this.getLook({
isAvator: false,
multiple:true,
isAdvanceSearchVbl:false,
advanceParam: advanceParam
}, 'visible_w', 'selectedValue_w')}
footer={null}
onOk={()=> {}}
>
<Button>搜索、全部查找、选中样式，无头象</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="全部查找, 无搜索、无头像"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
visible={this.state.visible_r || false}
onVisibleChange={(visible) =>{
this.setState({visible_r: visible})
}}
destroyPopupOnHide={true}
content={this.getLook({
isAvator: false,
multiple:true,
isAdvanceSearchVbl:true,
isSearchBox: false,
advanceParam: advanceParam
}, 'visible_r', 'selectedValue_r')}
footer={null}
onOk={()=> {}}
>
<Button>全部查找, 无搜索、无头像</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="自定义按钮，自定义全部查询"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_u || false}
onVisibleChange={(visible) =>{
this.setState({visible_u: visible})
}}
content={this.getLook({
isAvator: false,
multiple:true,
moreText:'自定义名称',
btnOkText:'自定义名称',
advanceParam: Object.assign({}, advanceParam, {dlgTitle: '自定义modal弹层标题弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层弹层'})
}, 'visible_u', 'selectedValue_u')}
footer={null}
onOk={()=> {}}
>
<Button>自定义按钮，自定义全部查询，自定义modal弹层标题</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="数据为空展示"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_o || false}
onVisibleChange={(visible) =>{
this.setState({visible_o: visible})
}}
content={this.getLook({
isAvator: false,
multiple:true,
options: [],
searchUrl: 'https://www.italent.cn/api/v1/110006/114573828/RemindV2/Get?dateTime&qqqq',
advanceParam: advanceParam
}, 'visible_o', 'selectedValue_o')}
footer={null}
onOk={()=> {}}
>
<Button>数据为空展示</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="跟随父容器宽度, 选中后点击其他区域隐藏，选中状态不选中"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
//size={'large'}
width={500}
destroyPopupOnHide={true}
visible={this.state.visible_s || false}
onVisibleChange={(visible) =>{
this.setState({visible_s: visible})
}}
content={this.getLook({
isAvator: false,
multiple:true,
isAdvanceSearchVbl:true,
isSearchBox: false,
advanceParam: advanceParam
}, 'visible_s', 'selectedValue_s')}
footer={null}
onOk={()=> {}}
>
<Button>自定义宽父容器宽度，lookup跟随父容器宽度</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="高级模式"
desc="直接弹出高级模式多选"
>
<Button onClick={() => {
this.setState({visible_p: true})
}}>高级模式</Button>
{this.getLook({
mode:'advanced',
isAvator: false,
advancedVbl: this.state.visible_p,
multiple:true,
options: [],
advanceParam: advanceParam
}, 'visible_p', 'selectedValue_p')}
</CmpDemo>
</div>
<div className="phoenix-lookup-example--flex-item">
<CmpDemo
title="搜索多选"
desc="搜索、全部查找、选中样式，无头象"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_q || false}
onVisibleChange={(visible) =>{
this.setState({visible_q: visible})
}}
content={this.getLook({
isAvator: false,
multiple:true,
isAdvanceVbl:true,
advanceParam: advanceParam
}, 'visible_q', 'selectedValue_q')}
footer={null}
onOk={()=> {}}
>
<Button>搜索、全部查找、选中样式，无头象</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="搜索、头像，无全部查找"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_e || false}
onVisibleChange={(visible) =>{
this.setState({visible_e: visible})
}}
content={this.getLook({
isAvator: true,
multiple:true,
isAdvanceVbl:true,
isSearchBox: false,
advanceParam: advanceParam
}, 'visible_e', 'selectedValue_e')}
footer={null}
onOk={()=> {}}
>
<Button>搜索、头像，无全部查找</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="全部查找，无搜索、无头像"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_y || false}
onVisibleChange={(visible) =>{
this.setState({visible_y: visible})
}}
content={this.getLook({
isAvator: true,
multiple:true,
isAdvanceSearchVbl:false,
isSearchBox: false,
advanceParam: advanceParam
}, 'visible_y', 'selectedValue_y')}
footer={null}
onOk={()=> {}}
>
<Button>头像, 无全部查找、无搜索</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="loading"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_i || false}
onVisibleChange={(visible) =>{
this.setState({visible_i: visible})
}}
content={this.getLook({
isAvator: false,
multiple:true,
options: [],
advanceParam: advanceParam
}, 'visible_i', 'selectedValue_i')}
footer={null}
onOk={()=> {}}
>
<Button>loading</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="最多限制加载50条"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_a || false}
onVisibleChange={(visible) =>{
this.setState({visible_a: visible})
}}
content={this.getLook({
isAvator: true,
multiple:true,
isSearchBox: false,
options: clonedeep(options50),
advanceParam: advanceParam
}, 'visible_a', 'selectedValue_a')}
footer={null}
onOk={()=> {}}
>
<Button>最多限制加载50条</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="多选记录数自定义，默认不限制，自定义10条"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_d || false}
onVisibleChange={(visible) =>{
this.setState({visible_d: visible})
}}
content={this.getLook({
isAvator: true,
multiple:true,
isSearchBox: false,
options: clonedeep(options50),
advanceParam: Object.assign({}, advanceParam, {maxSize: 10})
}, 'visible_d', 'selectedValue_d')}
footer={null}
onOk={()=> {}}
>
<Button>多选记录数自定义，默认不限制，自定义10条</Button>
</Layer>
</CmpDemo>
<CmpDemo
title="搜索多选"
desc="搜索关联，改变searchform的值，table的数据进行联动"
>
<Layer
extraCls="unmodeled-layer-lookup"
trigger={['click']}
size={'large'}
destroyPopupOnHide={true}
visible={this.state.visible_f || false}
onVisibleChange={(visible) =>{
this.setState({visible_f: visible})
}}
content={this.getLook({
isAvator: true,
multiple:true,
isSearchBox: false,
options: clonedeep(options),
advanceParam: Object.assign({}, clonedeep(advanceParamSearch), {advanceSearchFunction: (param, cb) => {
let data = clonedeep(advanceParamSearch.tableMeta.data)
if (param.items.length >0 ) {
let item = param.items[0]
data = data.filter(n => {
return n.name == item.data.value
})
}
cb(data)
}})
}, 'visible_f', 'selectedValue_f')}
footer={null}
onOk={()=> {}}
>
<Button>搜索关联，改变searchform的值，table的数据进行联动</Button>
</Layer>
</CmpDemo>
</div>
</div>
</div>
)
}
}