Shareui-xzqh NPM

shareui-xzqh

公司内部使用：基于react以及EOS的行政区划组件，包括：区、街道、社区、网格、路名、门牌、室号。其他情况自己编写。

安装

npm install --save shareui-xzqh

依赖js

eos3.js
zeus.auth.js（内置获取登录用户所在行政区划）
auth/xzqhService
building/addressService

使用

为了方便，该组件注入了初始化时的行政区划：_initQu(代表登录用户所在的区)，_initJd(代表登录用户所在的街道)，_initSq(代表登录用户所在的社区)，所以在操作如“重置”时不要把他们也置空，见如下在redux中的示例，react下同理。

在React下使用

import React, { Component } from 'react';

import './static/sslib/eos3/eos3.min';
import './static/sslib/zeus.auth';
import './static/sslib/auth/xzqhService';
import './static/sslib/building/addressService';
import { Qu, Jd, Sq, Wg, Lm, Mp, Sh } from 'path/to/shareui-xzqh';

class Demo extends Component{
    constructor(){
        super(...arguments);

        this.state = {
        };
    }
    componentDidMount(){
        ajaxloading('eos3');
    }
    changeXzqh(type, val, isInit){
        this.setState({
            [type]: val
        }, () => {
            //todo 改变行政区划后的逻辑
            if(isInit){
                //todo 初始化完成
            }
        });
    }
    render(){
        return (
            <div>
                <div>
                    行政区划：<Qu {...this.state} onChange={this.changeXzqh.bind(this)}/>
                    <Jd {...this.state} onChange={this.changeXzqh.bind(this)}/>
                    <Sq {...this.state} onChange={this.changeXzqh.bind(this)}/>
                    网格：<Wg {...this.state} onChange={this.changeXzqh.bind(this)}/>
                    <div style={{marginTop: 25}}>
                        路名：<Lm {...this.state} onChange={this.changeXzqh.bind(this)}/>
                        门牌：<Mp {...this.state} onChange={this.changeXzqh.bind(this)}/>
                        室号：<Sh {...this.state} onChange={this.changeXzqh.bind(this)} requestType="getAddrOrBuildOrUnitList"/>
                    </div>
                </div>
            </div>
        );
    }
}

export default Demo;

包括：区（Qu）、街道（Jd）、社区（Sq）、网格（Wg）、路名（Lm）、门牌（Mp）、室号（Sh），根据需要引入；

注意：一定要传{...state}把所有的状态传入；和onChange={this.changeXzqh.bind(this)}改变行政区划时的回调函数

在Redux下使用

经常我们要在表单中操作，要实现：初始化后读取列表；重置时不能重置登录用户所在的行政区划；

class Home extends Component{
    //监听改变行政区划，设置state
    changeXzqh(type, value, isInit){
        let { dispatch } = this.props;
        dispatch(homeAction.changeForm(type, value));
        //监听初始化完成
        if(isInit){
            this.refs.submitBtn.click();
        }
    }
    componentDidMount(){
        ajaxloading('eos3');
    }
    handleSubmit(e){
        e.preventDefault();
        let { home } = this.props;
        console.info(home);
    }
    //监听重置事件
    handleReset(e){
        e.preventDefault();
        let { home, dispatch } = this.props;
        
        //首先清空除_initQu,_initJd,_initSq外实有state字段为空
        for(let [key, val] of Object.entries(home)){
            if(key !== '_initQu' && key !== '_initJd' && key !== '_initSq'){
                dispatch(homeAction.changeForm(key, ''));
            }
        }
        //设置初始化行政区划
        if(home._initQu){
            dispatch(homeAction.changeForm('qu', home._initQu));
        }
        if(home._initJd){
            dispatch(homeAction.changeForm('jd', home._initJd));
        }
        if(home._initSq){
            dispatch(homeAction.changeForm('sq', home._initSq));
        }
    }
    changeField(fieldName, value){
        let { dispatch } = this.props;
        dispatch(homeAction.changeForm(fieldName, value));
    }
    render(){
        let { home } = this.props;
        return (
            <div className="ui-content">
                <div className="ui-title">
                    <ol className="breadcrumb">
                        <li>采集核实</li>
                    </ol>
                    <div className="title-btns">
                        <button type="button" className="btn btn-danger noCheckList">已排查未关联地址列表</button>
                        {' '}
                        <button type="button" className="btn btn-info faq">常见问题</button>
                    </div>
                </div>
                <div className="ui-page-main">
                    <div className="ui-page-main-wrap">
                        <div className="page-main-item-inset">
                            <form className="form-search-list getAddressList clearfix"
                                  onReset={this.handleReset.bind(this)}
                                  onSubmit={this.handleSubmit.bind(this)}>
                                <div className="clearfix">
                                    <div className="item g-14">
                                        <label>行政区划：</label>
                                        <div className="sub-item clearfix g-12">
                                            <Qu className="g-3" {...home} onChange={this.changeXzqh.bind(this)}/>
                                            <Jd className="g-4" {...home} onChange={this.changeXzqh.bind(this)}/>
                                            <Sq className="g-4" {...home} onChange={this.changeXzqh.bind(this)}/>
                                        </div>
                                    </div>
                                    <div className="item">
                                        <label>是否关联：</label>
                                        <div className="sub-item clearfix">
                                            <select value={home.glqk || ''} name="glqk" className="form-control"
                                                    onChange={e => this.changeField('glqk', e.target.value)}>
                                                <option value="">全部</option>
                                                <option value="1">已关联</option>
                                                <option value="0">未关联</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div className="clearfix">
                                    <div className="item">
                                        <label>路名：</label>
                                        <div className="sub-item clearfix">
                                            <select value={home.jlx || ''} className="form-control" name="jlx"
                                                    onChange={e => this.changeField('jlx', e.target.value)}>
                                                <option value="">全部</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div className="item">
                                        <label>门牌：</label>
                                        <div className="sub-item clearfix">
                                            <select value={home.mphm || ''} className="form-control g-4 mphm" name="mphm"
                                                    onChange={e => this.changeField('mphm', e.target.value)}>
                                                <option value="">全部</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div className="item">
                                        <label className="g-4">是否完成排查：</label>
                                        <div className="sub-item clearfix">
                                            <select value={home.cjqk || ''} name="cjqk" className="g-4 form-control"
                                                    onChange={e => this.changeField('cjqk', e.target.value)}>
                                                <option value=""></option>
                                                <option value="0">未完成</option>
                                                <option value="1">部分完成</option>
                                                <option value="2">全部完成</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div className="item btn-item clearfix">
                                        <button ref="submitBtn" type="submit" className="btn btn-primary">查询</button>
                                        <button type="reset" className="btn btn-default">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div className="page-part-split"></div>
                        <div className="table-toolbox clearfix">
                            <div className="pull-left toolbox-left">
                                <span>（注：红色字表示该地址存在未核实人员）</span>
                            </div>
                        </div>
                        <div className="has-data">
                            <div id="verificatTab"></div>
                            <div id="verificatPagebar"></div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

API

onChange：改变行政区划时的回调函数，参数为：
- type: 状态名；
- val：值；
- isInit: （布尔值）是否初始化完成，可以通过这个参数监听初始化完成；
stateName: 配置将要注入的状态名，未配置时值如下：

{
    qu: 'qu',
    jd: 'jd',
    sq: 'sq',
    wg: 'wg',
    lm: 'lm',
    mp: 'mp',
    sh: 'sh'
}

这个字段在如有多个行政区划时很有用，可以配置多个stateName防止重名，见下面多个行政区划的情况。

requestType: 获取室号方法，Sh组件特有，默认getBuildingOrUnitList，还可以配置成getAddrOrBuildOrUnitList
className: 字符串，默认：form-control，可以通过配置改选项增加类名，如：<Qu className="qu qu2" .../>，则Qu组件的类名为：form-control qu qu2
style: 样式，对象类型，默认无，用于配置组件的样式，如隐藏：style={{display: 'none'}}