# shareui-xzqh

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

![sf](/example/image/12.png)

## 安装

```
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'}}`

### 多个行政区划

详见example下的示例。。。。。。

### TODO

- 更改样式为社区4.0的shareui风格；

- 根据需要开放更多配置；