# 树组件
# 一、安装
npm i -S party_fe_component

# 二、使用
## 1、初始化
首先需要初始化登录环境和后台服务地址（全局调用一次即可）:

    import { initEnviorment } from 'party_fe_component';
    //传入当前具体的值。除apiServer外，其他都是flaginfojssdk带入的值
    initEnviorment({
        token: '',
        spId: '',
        businessType: '',
        color: '#f67a17',
        theme: 'default',
        apiServer: '党组织后台服务地址'
        apiServerFile: '文件上传后台服务地址'
    });


## 2、组件使用
目前共5个组件，组件的属性名称、作用基本相同。
OrgTree,OrgTreeCheck,OrgSearchTree,OrgTreeDialog,orgTreeDialogPermit。

            [CommonTree]
                 |
           [OrgTreeBase]
           /           \
        OrgTree     OrgTreeCheck
                         |
                    OrgSearchTree
                         |
                    orgTreeDialog
                         |
                  OrgTreeDialogPermit
各组件的使用方法参考源码中的 src/components/tree/samples.vue 文件。  


### 属性
### showMember: Boolean
true=树显示组织和成员；其他=只显示组织

### checkType: String
member= 只可勾选成员  
both= 可勾选组织和部门  
其他= 只可勾选部门

对于搜索：member=只搜索成员; both=二者都搜索; 默认=只搜索组织

### selectedNodeDatas: Array
数组，指当前选中的节点数据列表。数据需含id、name、isOrg属性。
注意，当showMember设置true时，selectedNodeDatas中的数据项必须有isOrg=true的属性（因为组织id和成员id可能相同）


### setNodeData: Function(nodeData, parentNode, selectedDatas)
节点初次加载时，设置节点数据的方法。支持在树节点数据nodeData上设置如下属性：  
checked：选中状态，true=选中。如果修改了此属性，需要同步到selectedDatas数组
disabled：禁用（锁定click、check）  
locked：锁定（锁定check，可click）   
name: 显示文本    
isLeaf：是否叶子节点（无展开）

### clickRoot: Boolean=[true]
（仅OrgTree）树加载后，自动点击根节点，触发一次nodeClick事件。

### singleCheck: Boolean
节点只能选择一个；对话框不显示右侧选中列表。


### 事件
### @nodeClick=(nodeData, node)=>{}
节点点击时触发。

### @nodeCheckChanged=(selectedDatas, nodeData, node)=>{}
节点勾选时触发。

### 举例如下：

    <template>
        <div class="permit-add full">
            <org-tree-dialog
                    ref="memberTree"
                    :show-member="showMember"
                    :checkType="checkType"
                    :selectedNodeDatas="[]"
            >
            </org-tree-dialog>
            <button @click="handleMemDialog">选择成员</button>
            <button @click="handleGroupDialog">选择组织</button>
        </div>
    </template>

    <script>
        import { OrgTreeDialog } from 'party_fe_component';

        export default {
            data() {
                return {
                    showMember: false,
                    checkType: '',
                };
            },
            methods: {
                handleMemDialog() { //成员树
                     this.checkType = 'member';
                    this.showMember = true;
                    this.$refs.memberTree.showOrgDialog()
                        .then(selectedDatas => {
                            this.handelSure(selectedDatas)
                        })
                        .catch(e => {})
                },
                handleGroupDialog() { //组织树
                    this.checkType = 'dep'; //both 表示选组织或成员
                    this.showMember = false;
                    this.$refs.memberTree.showOrgDialog()
                        .then(selectedDatas => {
                            this.handelSure(selectedDatas)
                        })
                        .catch(e => {});
                },
                handelSure(nodes) { //树点击确定
                    this.members = nodes;

                },
            },
            components: { OrgTreeDialog}
        }
    </script>