party_fe_component v1.0.27

树组件

一、安装

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: '文件上传后台服务地址',
    onLogin(){ } //token失效, 进行自定义跳转登录。如果是嵌入门户，就别传
});

2、组件使用

目前共6个组件，组件的属性名称、作用基本相同。 OrgTree,OrgTreeCheck,OrgSearchTree,OrgTreeDialog,orgTreeDialogPermit、OrgDropdownTree。 分别是 左侧组织点击用的树、可选择树、搜索树、弹出树对话框，权限级联控制的树、下拉树。 OrgDropdownTree支持v-model。

        [CommonTree]
             |
       [OrgTreeBase]
       /           \
    OrgTree     OrgTreeCheck
                     |
                OrgSearchTree
                   /       \
          orgTreeDialog  OrgDropdownTree
                |
        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事件。

required: Boolean=true

（仅Dialog）对话框是否必须选择一项。

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>