@beisen-phoenix/lookup/examples/originExp/index.js

---

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 { fields, columns, options, options1, selectOption, tableData, advanceParam, options50 } from './mock/data';
import CmpDemo from '@beisen-phoenix/demo-container';


export default class extends Component {


    constructor (props) {
        super(props);
        this.state = {
            visible: true,
            visibleNoSearch: true,
            visible1: true,
            visibleLook1: true,
            visibleLookcheck:true,
            visibleLooknosearch: true,
            visibleLooknosearch1: true,
            visibleLook50: true,
            visibleLooknosearchFetch: true,
            advancedVbl: false,
            advancedcheckVbl: true,
        }
    }

    onOk () {
        alert()
    }

    callVisible = () => {
        this.setState({visible1: false})
    }

    getLookNoSearch = () => {
        let advanceParam = {
            tableMeta: {
                columns: columns,
                dataSource: tableData,
                pagination:{
                    pageSize: 15
                }
            },
            searchFormMeta: {
                fields: fields
            }
        }

        return <Lookup
            //mode={'advanced'}
            isSearchBox={false}
            isAvator={true}
            multiple={false}
            options={options}
            onConfirm={(data) => {
                this.callVisible()
                console.log(data)
            }}
            onVisibleChange={this.callVisible}
            isAdvanceVbl={true}
            selectValue={selectOption}
            //advanceParam={advanceParam}
        />
    }

    getLook = () => {
        let advanceParam = {
            tableMeta: {
                columns: columns,
                dataSource: tableData,
                pagination:{
                    pageSize: 15
                }
            },
            searchFormMeta: {
                fields: fields
            }
        }

        return <Lookup
            //mode={'advanced'}
                isAvator={true}
                multiple={false}
                options={options}
                onConfirm={(data) => {
                    this.callVisible()
                    console.log(data)
                }}
                onVisibleChange={this.callVisible}
                isAdvanceVbl={true}
                selectValue={selectOption}
                //advanceParam={advanceParam}
            />
    }

    getLook1 = () => {
        return <Lookup
            searchUrl={'https://www.italent.cn/api/v1/110006/114573828/RemindV2/Get?dateTime&qqqq'}
            onConfirm={(data) => {
                alert(JSON.stringify(data))
                this.setState({visibleLook1: false})
            }}
            //advanceParam={advanceParam}
            options={options}
        />
    }

    getLook50 = () => {

        let advanceParam = {
            tableMeta: {
                columns: columns,
                dataSource: tableData,
                pagination:{
                    pageSize: 15
                }
            },
            searchFormMeta: {
                fields: fields
            }
        }

        return <Lookup
            //mode={'advanced'}
            isSearchBox={false}
            isAvator={true}
            multiple={false}
            options={options50}
            onConfirm={(data) => {
                this.callVisible()
                console.log(data)
            }}
            onVisibleChange={this.callVisible}
            isAdvanceVbl={true}
            //selectValue={selectOption}
            //advanceParam={advanceParam}
        />
    }

    getLookcheck= () => {
        return <Lookup
            multiple={true}
            selectValue={selectOption}
            onConfirm={(data) => {
                console.log(data)
                this.setState({
                    advancedcheckVbl:false,
                    visibleLookcheck: false})
            }}
            //advanceParam={advanceParam}
            onVisibleChange={() => {
                this.setState({
                    visibleLookcheck: false})
            }}
            options={options}
        />
    }


    getLooknosearch= () => {
        return <Lookup
            isSearchBox={false}
            multiple={true}
            onConfirm={(data) => {
                console.log(data)
                this.setState({visibleLooknosearch: false})
            }}
            advanceParam={advanceParam}
            options={options}
        />
    }

    getLooknosearch1= () => {
        return <Lookup
            multiple={true}
            isAvator={true}
            moreText={'自定义名称'}
            btnOkText={'自定义名称'}
            onConfirm={(data) => {
                console.log(data)
                this.setState({visibleLooknosearch1: false})
            }}
            //advanceParam={advanceParam}
            options={options1}
        />
    }

    getLooknosearchLoading = () => {
        return <Lookup
            multiple={true}
            isAvator={true}
            moreText={'自定义名称'}
            btnOkText={'自定义名称'}
            onConfirm={(data) => {
                console.log(data)
                this.setState({visibleLooknosearch1: false})
            }}
            //advanceParam={advanceParam}
            //options={options1}
        />
    }

    getLooknosearchFetch= () => {
        return <Lookup
            searchUrl={'https://www.italent.cn/api/v1/110006/114573828/RemindV2/Get?dateTime&qqqq'}
            //isSearchBox={false}
            onConfirm={(data) => {
                console.log(data)
                this.setState({visibleLooknosearchFetch: false})
            }}
            advanceParam={advanceParam}
            multiple={true}
        />
    }

    lookupShowModal = () => {
        this.setState({advancedVbl: true})
    }

    render () {
        let defaultValue = {id:'',value:'qqqqqq'}

        return (
            <div style={{'fontSize': '12px','display': 'flex', 'textAlign': 'center',flexWrap: 'wrap'}}>
              <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                  <Layer
                      extraCls="unmodeled-layer-lookup"
                      trigger={['click']}
                      size={'large'}
                      visible={true}
                      onVisibleChange={(visible) =>{
                          this.setState({visible1: visible})
                      }}
                      content={this.getLook()}
                      footer={null}
                      onOk={this.onOk.bind(this)}
                  >
                  <Button>单选头像无搜索，默认选中样式</Button>
                  </Layer>
              </div>

                <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                    <Layer
                        extraCls="unmodeled-layer-lookup"
                        trigger={['click']}
                        size={'large'}
                        visible={true}
                        onVisibleChange={(visible) =>{
                            this.setState({visibleNoSearch: visible})
                        }}
                        content={this.getLookNoSearch()}
                        footer={null}
                        onOk={this.onOk.bind(this)}
                    >
                        <Button>单选头像无搜索</Button>
                    </Layer>
                </div>

                <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                  <Layer
                      extraCls="unmodeled-layer-lookup"
                      trigger={['click']}
                      size={'large'}
                      visible={true}
                      onVisibleChange={(visible) => {
                          this.setState({visibleLook1: visible})
                      }}
                      content={this.getLook1()}
                      footer={null}
                      onOk={this.onOk.bind(this)}
                  >
                  <Button>单选搜索</Button>
                  </Layer>
                 </div>

                <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                    <Layer
                        extraCls="unmodeled-layer-lookup"
                        trigger={['click']}
                        size={'large'}
                        visible={true}
                        onVisibleChange={(visible) => {
                            this.setState({visibleLook50: visible})
                        }}
                        content={this.getLook50()}
                        footer={null}
                        onOk={this.onOk.bind(this)}
                    >
                        <Button>单选最多显示50条</Button>
                    </Layer>
                </div>

                 <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                     <Layer
                         extraCls="unmodeled-layer-lookup"
                         trigger={['click']}
                         size={'large'}
                         visible={true}
                         onVisibleChange={(visible) => {
                             this.setState({visibleLookcheck: visible})
                         }}
                         content={this.getLookcheck()}
                         footer={null}
                         onOk={this.onOk.bind(this)}
                     >
                         <Button>多选搜索</Button>
                     </Layer>
                 </div>

                 <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                     <Layer
                         extraCls="unmodeled-layer-lookup"
                         trigger={['click']}
                         size={'large'}
                         content={this.getLooknosearch()}
                         visible={true}
                         onVisibleChange={(visible) => {
                             this.setState({visibleLooknosearch: visible})
                         }}
                         footer={null}
                         onOk={this.onOk.bind(this)}
                     >
                         <Button>无头像多选</Button>
                     </Layer>
                 </div>

                 <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                     <Layer
                         extraCls="unmodeled-layer-lookup"
                         trigger={['click']}
                         size={'large'}
                         content={this.getLooknosearch1()}
                         visible={true}
                         onVisibleChange={(visible) => {
                             this.setState({visibleLooknosearch1: visible})
                         }}
                         footer={null}
                         onOk={this.onOk.bind(this)}
                     >
                         <Button>选多头像搜索</Button>
                     </Layer>
                 </div>

                <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                    <Layer
                        extraCls="unmodeled-layer-lookup"
                        trigger={['click']}
                        size={'large'}
                        visible={true}
                        onVisibleChange={(visible) => {
                            this.setState({visibleLooknosearchFetch: visible})
                        }}
                        content={this.getLooknosearchLoading()}
                        footer={null}
                        onOk={this.onOk.bind(this)}
                    >
                        <Button>加载loading</Button>
                    </Layer>
                </div>

                 <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                     <Layer
                         extraCls="unmodeled-layer-lookup"
                         trigger={['click']}
                         size={'large'}
                         visible={true}
                         onVisibleChange={(visible) => {
                             this.setState({visibleLooknosearchFetch: visible})
                         }}
                         content={this.getLooknosearchFetch()}
                         footer={null}
                         onOk={this.onOk.bind(this)}
                     >
                         <Button>发送请求</Button>
                     </Layer>
                 </div>


                <div style={{ width: '200px',height: '300px',padding: '50px 220px 50px 50px'}}>
                    <Button onClick={this.lookupShowModal.bind(this)}>直接弹出高级模式
                    </Button>
                    {
                        <Lookup
                            mode={'advanced'}
                            isAvator={true}
                            multiple={false}
                            advancedVbl={this.state.advancedVbl}
                            options={options}
                            advanceParam={advanceParam}
                            onConfirm={(data) => {
                                console.log(data)
                                this.setState({advancedVbl: false})
                            }}
                            onVisibleChange={(visible) => {
                                this.setState({advancedVbl: visible})
                            }}
                            isAdvanceSearchVbl={true}
                            selectValue={selectOption}
                        />
                    }
                </div>

            </div>
        )
  }
}