```vue
<template>
    <div class="article">
        <YYButton @click="handleOpen">显示选择人员</YYButton>
        <YYButton @click="handleOpenOrg">显示选择范围</YYButton>
        <YYSelectMember 
            qzId="64"
            host="http://ezone.imp-test.pub.caep"
            :defineTabs="['out', 'outMember']"
            :deptList="[]"
            :haveSelected="haveSelected"
            :chooseDeptType="0"
            :enableContainChild="true"
            :keep-alive="false"
            token="asdasdqweqeasdadasasd"
            closable
            :customTabs="customTabs"
            v-model="showSelectMember"
            @on-search="handleSearch"
            @on-ok="handleOk"/>
        <YYSelectMember 
            qzId="64"
            host="http://ezone.imp-test.pub.caep"
            :enableContainChild="true"
            :defineTabs="['dept', 'member']"
            :customTabs="customTabs"
            v-model="showSelectMemberOrg"
            @on-ok="handleOkOrg"/>
    </div>
</template>
<script>
let count = 1
let dept = {
    deptId: 2,
    deptName: '用友',
}
let member = {
    memberId: 1,
    userName: '倪占军',
    type: 0,
}
export default {
    data() {
        return {
            showSelectMember: false,
            showSelectMemberOrg: false,
            haveSelected: {
                dept: {},
                group: {},
                team: {},
                member: {
                }
            },
            customTabs: [
                {
                    title: 'List Demo',
                    key: 'list',
                    type: 'list',
                    data: [
                        {
                            id: 123,
                            name: '岗位',
                            checked: true
                        }
                    ]
                },
                {
                    title: '单据相关人员',
                    key: 'cooperation',
                    type: 'member',
                    data: [
                        {
                            id: 123,
                            name: '岗位'
                        }
                    ]
                },
                {
                    title: '单据相关组织',
                    key: 'cooperation-dept',
                    type: 'dept',
                    onLoad: this.onLoadDept,
                    data: []
                },
                {
                    title: '单据相关组织成员',
                    key: 'cooperation-dept-member',
                    type: 'dept',
                    onLoad: this.onLoadDeptMember,
                    withMembers: true,
                    data: [
                        {
                            deptId: 123,
                            deptName: 'nizhja1',
                            checked: true
                        },
                        {
                            deptId: 789,
                            deptName: 'nizhja2',
                            checked: true
                        },
                    ]
                },
            ],
            // customTabs: [
            //     {
            //         title: '0',
            //         key: '0',
            //         sort: '0',
            //         type: 'dept',
            //         data: [
            //             {
            //                 deptId: 501,
            //                 deptName: 501
            //             }
            //         ]
            //     }
            // ],
            deptList: [
                {
                    deptId: 182980,
                    deptName: "用友股份"
                }
            ]
        }
    },
    methods: {
        onLoadDept({
            deptId,
            callback
        }) {
            dept.deptId += count
            dept.deptName += count
            count++
            return new Promise((resolve)=>{
                resolve([dept])
            }).then((res)=>{
                setTimeout(()=> {
                    callback && callback(res)
                }, 500)
            })
        },
        onLoadDeptMember({
            deptId,
            callback
        }) { 
            let data
            if(count % 2) {
                member.memberId += count
                member.memberName += count
                data = member
            } else {
                dept.deptId += count
                dept.deptName += count
                data = dept
            }
            count++
            return new Promise((resolve)=>{
                resolve([data])
            }).then((res)=>{
                setTimeout(()=> {
                    callback && callback(res)
                }, 500)
            })
        },
        onLoad(call) {
            return new Promise((resolve)=>{
                resolve([{
                    id: 123,
                    name: '岗位',
                    checked: true
                }])
            }).then((res)=>{
                call && call(res)
            })
        },
        handleOpen() {
            this.showSelectMember = true
        },
        handleOk(res) {
            console.log(res)
            this.haveSelected = res
        //    YYRenderSelectMember({
        //         el: this.$refs.YYRenderSelectMember,
        //         showSelectMember: true,
        //         qzId: 917,
        //         host: 'http://ezone.yyuap.com:6058'
        //     })
        },
        handleOpenOrg() {
            // this.deptList.push({
            //     deptId: 0,
            //     deptName: "用友股份"
            // })
            this.showSelectMemberOrg = true
        },
        handleOkOrg(res) {
            console.log(res)
            
        },
        handleSearch(value) {
            console.log(value)
        }
    }
} 
</script>

```