custom

app_Web/src/pages/uaa/sys-role-permission-custom-view/sys-role-permission-custom-view.less

-.sys-role-permission-custom-view{
+
+.sys-permissionmpickup-view{
+    position: relative;
+    .tree-right-menu {
+        .ivu-divider-horizontal {
+            width: calc(100% - 32px);
+            min-width: calc(100% - 32px);
+            margin: 0 auto;
+        }
+        .ivu-dropdown-item {
             position: relative;
+            padding-left: 32px;
+            > i {
+                position: absolute;
+                left: 16px;
+                top: 10px;
+            }
+            .ivu-icon-ios-arrow-forward {
+                left: initial;
+                right: 4px;
+            }
+        }
+        .ivu-dropdown {
+            .ivu-select-dropdown {
+                margin: 0;
+            }
+        }
+    }
+    .text{
+        font-weight: 700;color: #303133;font-size: 15px;margin-left:10px;margin-top:20px;
+    }
+    .col{
+        display: inline-block;
+        width: 400px;
+    }
+    .search{
+        width:200px;margin-left:20px;margin-top:30px;margin-bottom:20px;
+    }
+    .save{
+        margin-top:30px;margin-bottom:20px;margin-left:40px;
+    }
+    .roll{
+        height:calc(100vh - 305px) ;overflow:hidden;overflow-x: hidden;overflow-y: auto;
+    }
+    .tre{
+        margin-left:20px;
+    }
+
 }
 
 
+
+.pickup-view {
+    >.translate-contant {
+        flex-grow: 1;
+        display: flex;
+        justify-content: flex-end;
+        height: calc(100% - 64px);
+        .translate-buttons {
+            width: 80px;
+            display: flex;
+            align-items: center;
+            text-align: center;
+            button {
+                margin-bottom: 5px;
+            }
+        }
+        .left, .right {
+            width: 300px;
+        }
+        .right {
+            border: 1px solid #e9e9e9;
+            .mpicker-select {
+                font-family: helvetica, sans-serif;
+                font-size: 16px;
+                text-align: justify;
+                word-spacing: -3.8pt;
+                line-height: 1.6;
+                font-weight: bold;
+                word-spacing: 10px;
+                //height: 100%;
+                overflow: auto;
+            }
+            .mpicker-select > div {
+                padding: 3px 10px;
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.85);
+                font-weight: initial;
+                cursor: pointer;
+                min-height: 28px;
+                border: 1px solid #e9e9e9;
+                margin: 4px 4px;
+                transition: all .3s;
+            }
+            .mpicker-select > div:hover {
+                background: #ecf6fd;
+            }
+            .mpicker-select > .select{
+                color: #108ee9;
+                background: #ecf6fd;
+            }
+        }
+        .center{
+            width: calc(100% - 380px);
+            .pickupviewpanel {
+                width: 100%;
+                //height: 100%;
+            }
+        }
+    }
+
+}
+
+
+
+// this is less

app_Web/src/pages/uaa/sys-role-permission-custom-view/sys-role-permission-custom-view.vue

+<template>
+    <div class="view-container dempickupview sys-permissionmpickup-view">
+        <card class='view-card view-no-caption  view-no-toolbar' :dis-hover="true" :padding="0" :bordered="false">
+            <div class="content-container pickup-view">
+                <div class="translate-contant">
+                    <!--应用菜单-->
+                    <div class="center" :style="{width : '33%',border:'1px solid #dcdee2', margin: '0 10px 0 0'}">
+                        <context-menu-container class='design-tree-container'>
+                            <div>
+                                <div class="text">应用菜单</div>
+                                <div class="roll">
+                                    <el-tree
+                                            class="tre"
+                                            :data="this.CDdata"
+                                            ref="CDtree"
+                                            show-checkbox
+                                            node-key="id"
+                                            :default-expand-all="false"
+                                            highlight-current
+                                            :default-expanded-keys="this.CDdataexpandedKeys"
+                                            :props="this.defaultProps"
+                                            @check-change="handleCheckChange"
+                                    >
+                                    </el-tree>
+                                </div>
+                            </div>
+                        </context-menu-container>
+                    </div>
+                    <!--数据能力-->
+                    <div class="center" :style="{width : '33%',border:'1px solid #dcdee2', margin: '0 10px 0 0' }">
+                        <context-menu-container class='design-tree-container'>
+                            <div>
+                                <div class="text">数据能力</div>
+                                <div class="roll">
+                                    <el-tree
+                                            class="tre"
+                                            :data="this.QXdata"
+                                            ref="QXtree"
+                                            show-checkbox
+                                            node-key="id"
+                                            :default-expand-all="false"
+                                            highlight-current
+                                            :default-expanded-keys="this.QXdataexpandedKeys"
+                                            :props="this.defaultProps"
+                                            @check-change="handleCheckChange"
+                                    >
+                                    </el-tree>
+                                </div>
+                            </div>
+                        </context-menu-container>
+                    </div>
+                    <!--统一资源-->
+                    <div class="center" :style="{width : '33%',border:'1px solid #dcdee2' }">
+                        <context-menu-container class='design-tree-container'>
+                            <div>
+                                <div class="text">统一资源</div>
+                                <div class="roll">
+                                    <el-tree
+                                            class="tre"
+                                            :data="this.ZYdata"
+                                            ref="ZYtree"
+                                            show-checkbox
+                                            node-key="id"
+                                            :default-expand-all="false"
+                                            highlight-current
+                                            :default-expanded-keys="this.ZYdataexpandedKeys"
+                                            :props="this.defaultProps"
+                                            @check-change="handleCheckChange"
+                                    >
+                                    </el-tree>
+                                </div>
+                            </div>
+                        </context-menu-container>
+                    </div>
+                </div>
+
+            </div>
+        </card>
+    </div>
+</template>
+
 <script lang='tsx'>
-import { Component } from 'vue-property-decorator';
-import SysRolePermissionCustomViewBase from './sys-role-permission-custom-view-base.vue';
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+    import view_pickupviewpanel
+        from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue';
+    import ContextMenuContainer from "@components/context-menu-container/context-menu-container.vue";
+    import {Subject} from "rxjs";
 
-@Component({
+    @Component({
         components: {
+            ContextMenuContainer,
+            view_pickupviewpanel,
         },
         beforeRouteEnter: (to: any, from: any, next: any) => {
             next((vm: any) => {
-            vm.$store.commit('addCurPageViewtag', { fullPath: to.fullPath, viewtag: vm.viewtag });
+                vm.$store.commit('addCurPageViewtag', {fullPath: to.fullPath, viewtag: vm.viewtag});
             });
         },
-})
-export default class SysRolePermissionCustomView extends SysRolePermissionCustomViewBase {
+    })
+    export default class SYS_ROLE_PERMISSIONCustomView extends Vue {
+
+
+        /*应用菜单数据*/
+        protected CDdata: any = [];
+        /*数据能力数据*/
+        protected QXdata: any = [];
+        /*统一资源数据*/
+        protected ZYdata: any = [];
+        /*默认选中节点*/
+        protected defaultCheckedNodes: any = [];
+        /*应用菜单数据默认展开节点*/
+        protected CDdataexpandedKeys: any = [];
+        /*数据能力数据默认展开节点*/
+        protected QXdataexpandedKeys: any = [];
+        /*统一资源数据默认展开节点*/
+        protected ZYdataexpandedKeys: any = [];
+
+        /**
+         * 树显示说明：子树为节点对象的children,节点标签为节点对象的label
+         */
+        protected defaultProps: any = {
+            children: 'children',
+            label: 'label'
+        }
+        /**
+         * 选中数据
+         */
+        protected selectData: any = {};
+        /**
+         * 初始选中的数据
+         */
+        protected ininselectData: any = {};
+
+        /**
+         * 视图选中数据
+         */
+        public viewSelections: any[] = [];
+
+        /**
+         * 父数据
+         */
+        protected parentData: any = {};
+        /**
+         * 父数据主键
+         */
+        protected srfparentkey: any;
+
+        /**
+         * 视图标识
+         *
+         * @type {string}
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public viewtag: string = 'e791be173ed0f4bbe9cce942b6edde63';
+
+        /**
+         * 是否嵌入关系界面
+         *
+         * @type {boolean}
+         * @memberof SYS_USER_ROLEGridViewBase
+         */
+        @Prop({default:false}) public isformDruipart?: boolean;
+
+        /**
+         * 界面关系通讯对象
+         *
+         * @type {Subject<ViewState>}
+         * @memberof SYS_USER_ROLEGridViewBase
+         */
+        @Prop() public formDruipart?: Subject<ViewState>;
+
+        /**
+         * 应用上下文
+         *
+         * @type {*}
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public context:any = {};
+
+        /**
+         * 视图参数
+         *
+         * @type {*}
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public viewparams:any = {};
+
+        /**
+         * 传入视图上下文
+         *
+         * @type {string}
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        @Prop() public viewdata!: string;
+
+        /**
+         * 视图默认使用
+         *
+         * @type {boolean}
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        @Prop({ default: true }) public viewDefaultUsage!: boolean;
+
+        /**
+         * 自定义视图导航上下文集合
+         *
+         * @type {*}
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public customViewNavContexts:any ={};
+        /**
+         * 自定义视图导航参数集合
+         *
+         * @type {*}
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public customViewParams:any ={};
+
+        /**
+         * 解析视图参数
+         *
+         * @public
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public parseViewParam(): void {
+            for(let key in this.context){
+                delete this.context[key];
+            }
+            if (!this.viewDefaultUsage && this.viewdata && !Object.is(this.viewdata, '')) {
+                Object.assign(this.context, JSON.parse(this.viewdata));
+                if(this.context && this.context.srfparentdename){
+                    Object.assign(this.viewparams,{srfparentdename:this.context.srfparentdename});
+                }
+                if(this.context && this.context.srfparentkey){
+                    Object.assign(this.viewparams,{srfparentkey:this.context.srfparentkey});
+                }
+                this.handleCustomViewData();
+                return;
+            }
+            const path = (this.$route.matched[this.$route.matched.length - 1]).path;
+            const keys: Array<any> = [];
+            const curReg = this.$pathToRegExp.pathToRegexp(path, keys);
+            const matchArray = curReg.exec(this.$route.path);
+            let tempValue: Object = {};
+            keys.forEach((item: any, index: number) => {
+                Object.defineProperty(tempValue, item.name, {
+                    enumerable: true,
+                    value: matchArray[index + 1]
+                });
+            });
+            this.$viewTool.formatRouteParams(tempValue,this.$route,this.context,this.viewparams);
+            if(this.$store.getters.getAppData() && this.$store.getters.getAppData().context){
+                Object.assign(this.context,this.$store.getters.getAppData().context);
+            }
+            //初始化视图唯一标识
+            Object.assign(this.context,{srfsessionid:this.$util.createUUID()});
+            this.handleCustomViewData();
+        }
+
+        /**
+         * 处理自定义视图数据
+         *
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public handleCustomViewData(){
+            if(Object.keys(this.customViewNavContexts).length > 0){
+                Object.keys(this.customViewNavContexts).forEach((item:any) =>{
+                    let tempContext:any = {};
+                    let curNavContext:any = this.customViewNavContexts[item];
+                    this.handleCustomDataLogic(curNavContext,tempContext,item);
+                    Object.assign(this.context,tempContext);
+                })
+            }
+            if(Object.keys(this.customViewParams).length > 0){
+                Object.keys(this.customViewParams).forEach((item:any) =>{
+                    let tempParam:any = {};
+                    let curNavParam:any = this.customViewParams[item];
+                    this.handleCustomDataLogic(curNavParam,tempParam,item);
+                    Object.assign(this.viewparams,tempParam);
+                })
+            }
+        }
+
+        /**
+         * 处理自定义视图数据逻辑
+         *
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public handleCustomDataLogic(curNavData:any,tempData:any,item:string){
+            // 直接值直接赋值
+            if(curNavData.isRawValue){
+                if(Object.is(curNavData.value,"null") || Object.is(curNavData.value,"")){
+                    Object.defineProperty(tempData, item.toLowerCase(), {
+                        value: null,
+                        writable : true,
+                        enumerable : true,
+                        configurable : true
+                    });
+                }else{
+                    Object.defineProperty(tempData, item.toLowerCase(), {
+                        value: curNavData.value,
+                        writable : true,
+                        enumerable : true,
+                        configurable : true
+                    });
+                }
+            }else{
+                // 先从导航上下文取数，没有再从导航参数（URL）取数，如果导航上下文和导航参数都没有则为null
+                if(this.context[(curNavData.value).toLowerCase()]){
+                    Object.defineProperty(tempData, item.toLowerCase(), {
+                        value: this.context[(curNavData.value).toLowerCase()],
+                        writable : true,
+                        enumerable : true,
+                        configurable : true
+                    });
+                }else{
+                    if(this.viewparams[(curNavData.value).toLowerCase()]){
+                        Object.defineProperty(tempData, item.toLowerCase(), {
+                            value: this.viewparams[(curNavData.value).toLowerCase()],
+                            writable : true,
+                            enumerable : true,
+                            configurable : true
+                        });
+                    }else{
+                        Object.defineProperty(tempData, item.toLowerCase(), {
+                            value: null,
+                            writable : true,
+                            enumerable : true,
+                            configurable : true
+                        });
+                    }
+                }
+            }
+        }
+
+        /**
+         * vue 创建
+         */
+        public created() {
+            this.afterCreated();
+        }
+
+        /**
+         * 执行created后的逻辑
+         *
+         * @memberof SYS_USER_ROLEGridViewBase
+         */
+        public afterCreated(){
+            const secondtag = this.$util.createUUID();
+            this.$store.commit('viewaction/createdView', { viewtag: this.viewtag, secondtag: secondtag });
+            this.viewtag = secondtag;
+            this.parseViewParam();
 
-}
+            const _this: any = this;
+            // 获取父数据
+            if (_this && _this.viewdata) {
+                _this.parentData = JSON.parse(_this.viewdata);
+            }
+            if (_this.parentData && _this.parentData.sysrole) {
+                // console.log("当前角色id：" + _this.parentData.sysrole);
+                _this.srfparentkey = _this.parentData.sysrole;
+            }
+            // 监听父页面
+            if(this.formDruipart){
+                this.formDruipart.subscribe((res:any) =>{
+                    if(Object.is(res.action,'load')){
+                        // 父数据保存时调用当前视图的事件
+                        if(this.selectData.length>0){
+                            // 选中了数据
+                            this.onClickOk();
+                        }else{
+                            // 没选中数据
+                            this.onClear();
+                        }
+                    }
+                });
+            }
+
+        }
+
+
+        /**
+         * vue 挂载
+         */
+        public mounted() {
+            this.initTree();
+        }
+
+        /**
+         * 初始化树
+         */
+        private initTree() {
+            const _this = this;
+            // get全部菜单和数据能力和统一资源的请求路径
+            const url = `sysroles/`+_this.srfparentkey+`/sysrolepermissions/tree`;
+            this.$http.get(url).then((response: any) => {
+                if (!response || response.status !== 200) {
+                    this.$Notice.error({title: '错误', desc: response.message});
+                    return;
+                } else {
+                    // 给树赋值，数据结构在后台已经按照eltree格式化
+                    _this.CDdata = response.data.APPMENU;
+                    _this.QXdata = response.data.OPPRIV;
+                    _this.ZYdata = response.data.UNIRES;
+                    _this.defaultCheckedNodes = response.data.SELECTED;
+
+                    // 设置默认第一级展开
+                    for (let i = 0; i < _this.CDdata.length; i++) {
+                        _this.CDdataexpandedKeys.push(_this.CDdata[i].id);
+                    }
+                    for (let i = 0; i < _this.QXdata.length; i++) {
+                        _this.QXdataexpandedKeys.push(_this.QXdata[i].id);
+                    }
+                    for (let i = 0; i < _this.ZYdata.length; i++) {
+                        _this.ZYdataexpandedKeys.push(_this.ZYdata[i].id);
+                    }
+
+                    // 设置默认选中节点，即当前角色所有权限
+                    this.$nextTick(()=>{
+                        const CDtree: any = this.$refs.CDtree;
+                        const QXtree: any = this.$refs.QXtree;
+                        const ZYtree: any = this.$refs.ZYtree;
+
+                        CDtree.setCheckedNodes(_this.defaultCheckedNodes);
+                        QXtree.setCheckedNodes(_this.defaultCheckedNodes);
+                        ZYtree.setCheckedNodes(_this.defaultCheckedNodes);
+
+                        // 保存初始选中的节点数据，便于后续保存时比较
+                        const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes()).concat(ZYtree.getCheckedNodes());
+                        this.ininselectData = arr;
+                    });
+
+
+                }
+            }).catch((e) => {
+                console.log(e);
+            });
+        }
+
+        /**
+         * 销毁之前
+         *
+         * @memberof SYS_ROLE_PERMISSIONCustomViewBase
+         */
+        public beforeDestroy() {
+            // 清空选中数据
+            this.selectData = {};
+            // 清空视图选中数据
+            this.viewSelections = [];
+            this.$store.commit('viewaction/removeView', this.viewtag);
+        }
+
+
+        /**
+         * 处理选中节点
+         */
+        protected handleCheckChange() {
+            // console.log("SYS_PERMISSIONMPickupView执行了handleCheckChange")
+            // 获取当前三棵树
+            const CDtree: any = this.$refs.CDtree;
+            const QXtree: any = this.$refs.QXtree;
+            const ZYtree: any = this.$refs.ZYtree;
+            // 获取选中状态的节点
+            const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes()).concat(ZYtree.getCheckedNodes());
+            this.selectData = arr;
+            // console.log("选中的node:" + JSON.stringify(this.selectData));
+        }
+
+        /**
+         * 容器模型
+         */
+        public containerModel: any = {
+            view_okbtn: {name: 'okbtn', type: 'button', text: '确定', disabled: true},
+        };
+
+        /**
+         * 确定
+         */
+        public onClickOk(): void {
+            // 处理选中的数据
+            if (this.selectData && this.selectData.length > 0) {
+                // 判断选中的数据和初始数据
+                if (JSON.stringify(this.selectData) == JSON.stringify(this.ininselectData)) {
+                    return;
+                }
+                this.selectData.forEach((item: any) => {
+                                            let _itemTemp: any = JSON.parse(JSON.stringify(item));
+                                            let _item: any = {};
+                                            if (_itemTemp.type) {
+                                                _item.permissionid = _itemTemp.id;
+                                                _item.permissiontype = _itemTemp.type;
+                                                _item.permissionname = _itemTemp.fullName;
+                                                Object.assign(_item, {_select: false})
+                                                this.viewSelections.push(_item);
+                                            }
+                                        });
+
+               // 保存选中的权限信息
+               let url = '/sysroles/'+this.srfparentkey+'/sysrolepermissions/refreshbatch';
+               this.$http.post(url,this.viewSelections).then((response: any) => {
+                    if (!(!response || response.status !== 200)) {
+                    } else {
+                           this.$Notice.error({title: '错误', desc: response.message});
+                           return;
+                    }
+                  }).catch((e) => {
+               });
+            }
+            // 清空视图选中数据，避免重复添加
+            this.viewSelections = [];
+        }
+
+        /**
+         * 清除
+         */
+        private onClear(){
+            // 未选中数据,即没有赋予任何权限，需要清除当前角色的所有权限
+            if (this.selectData.length==0) {
+                // 保存选中的权限信息
+                let url = '/sysroles/'+this.srfparentkey+'/sysrolepermissions/refreshbatch';
+                this.$http.post(url,[]).then((response: any) => {
+                    if (!(!response || response.status !== 200)) {
+                    } else {
+                        this.$Notice.error({title: '错误', desc: response.message});
+                        return;
+                    }
+                }).catch((e) => {
+                });
+            }
+
+        }
+    }
 </script>
+
+
+<style lang='less'>
+    @import './sys-role-permission-custom-view';
+</style>
\ No newline at end of file

app_Web/src/widgets/ibzdepartment/dept-tree-treeview/dept-tree-treeview.vue

+<template>
+    <div class="design-tree-container">
+        <context-menu-container>
+            <el-tree
+                    class="tre"
+                    :data="this.TreeData"
+                    ref="DeptTree"
+                    :show-checkbox="false"
+                    node-key="id"
+                    :default-expand-all="false"
+                    highlight-current
+                    :default-expanded-keys="this.defaultExpandedKeys"
+                    :props="this.defaultProps"
+                    @node-click="handleNodeClick"
+            >
+
+            </el-tree>
+        </context-menu-container>
+    </div>
+</template>
+
 <script lang='tsx'>
-import { Component } from 'vue-property-decorator';
-import DeptTreeBase from './dept-tree-treeview-base.vue';
+    import {Component, Vue} from 'vue-property-decorator';
+
+
+    @Component({
+        components: {}
+    })
+    export default class DeptTree extends Vue {
+
+        /*树数据*/
+        public TreeData: any = [];
+
+        /*树显示说明：子树为节点对象的children,节点标签为节点对象的label*/
+        public defaultProps: any = {
+            children: 'children',
+            label: 'label'
+        }
+
+        /*默认展开节点*/
+        public defaultExpandedKeys: any = [];
+
+        /*当前登录人信息*/
+        public curUserContext: any = {};
+
+
+        /**
+         * vue 创建
+         */
+        public created() {
+            var _this: any = this;
+            // 获取当前登录人信息
+            if (_this && _this.$attrs && _this.$attrs.context) {
+                _this.curUserContext = _this.$attrs.context;
+            }
+        }
+
+        /**
+         * vue 挂载
+         */
+        public mounted() {
+            this.initTree();
+        }
+
+        /**
+         * 初始化树
+         */
+        private initTree() {
+            const _this = this;
+            // 获取当前登录人所处组织的部门及下级组织的部门
+            var url;
+            if (_this.curUserContext && _this.curUserContext.srforgid) {
+                url = 'ibzorganizations/' + _this.curUserContext.srforgid + '/suborg/ibzdepartments/picker';
+            } else {
+                // 获取所有组织的部门及下级组织的部门
+                url = 'ibzorganizations/alls/suborg/ibzdepartments/picker';
+            }
+            this.$http.get(url).then((response: any) => {
+                if (!response || response.status !== 200) {
+                    this.$Notice.error({title: '错误', desc: response.message});
+                    return;
+                } else {
+                    // 给树赋值，数据结构在后台已经按照eltree格式化
+                    _this.TreeData = response.data;
+                    if (response.data && response.data.length > 0) {
+                        // 设置默认选中第一个节点，即高亮显示
+                        this.$nextTick(function(){
+                            let deptTree:any = this.$refs.DeptTree;
+                            deptTree.setCurrentKey(response.data[0].id);
+                        })
+                        // 默认加载第一个节点的右侧视图，调用选中数据变更事件
+                        _this.selectionChange(response.data[0]);
+                    }
+                }
+            }).catch((e) => {
+                console.log(e);
+            });
+        }
+
 
+        /**
+         * 处理点击节点
+         */
+        protected handleNodeClick() {
+            // 获取当前树
+            const DeptTree: any = this.$refs.DeptTree;
+            // 获取点击状态的节点
+            let node = DeptTree.getCurrentNode();
+            // console.log("选中的node:" + JSON.stringify(node));
+            // if (node.isLeaf && node.isLeaf == true)
+            // 选中数据变更事件
+            this.selectionChange(node);
+        }
 
-@Component({
-    components: {
+        /**
+         * 选中数据变更事件
+         *
+         * @public
+         * @param {*} node 节点对应node对象
+         * @memberof OrgTree
+         */
+        public selectionChange(node: any) {
+            // 获取右侧视图渲染数据需要的参数
+            let temp = JSON.parse(JSON.stringify(node));
+            let srfappctx: any = {};
+            if (node.disabled == true) {// 单位
+                temp.id = "Dept;" + node.id;
+                temp.srfparentdename = "IBZOrganization";
+                temp.ibzorganization = node.id;
+                srfappctx.ibzorganization = temp.ibzorganization;
+            }else {// 部门
+                temp.id = "Dept;" + node.id;
+                temp.srfparentdename = "IBZDepartment";
+                temp.ibzdepartment = node.id;
+                srfappctx.ibzdepartment = temp.ibzdepartment;
+            }
+            temp.srfparentkey = node.id;
+            temp.navparams = "{}";
+            srfappctx.srfparentkey = temp.srfparentkey;
+            srfappctx.srfparentdename = temp.srfparentdename;
 
+            temp.srfappctx = srfappctx;
+            // 抛出参数
+            let selectiondata: any = [temp];
+            this.$emit('selectionchange', selectiondata);
         }
-})
-export default class DeptTree extends DeptTreeBase {
 
-}
+    }
 </script>
+<style lang='less'>
+    @import './dept-tree-treeview.less';
+</style>
\ No newline at end of file

app_Web/src/widgets/ibzorganization/org-tree-treeview/org-tree-treeview.vue

+<template>
+    <div class="design-tree-container">
+        <context-menu-container>
+            <el-tree
+                    class="tre"
+                    :data="this.TreeData"
+                    ref="OrgTree"
+                    :show-checkbox="false"
+                    node-key="id"
+                    :default-expand-all="false"
+                    highlight-current
+                    :default-expanded-keys="this.defaultExpandedKeys"
+                    :props="this.defaultProps"
+                    @node-click="handleNodeClick"
+            >
+
+            </el-tree>
+        </context-menu-container>
+    </div>
+</template>
+
 <script lang='tsx'>
-import { Component } from 'vue-property-decorator';
-import OrgTreeBase from './org-tree-treeview-base.vue';
+    import {Component, Vue} from 'vue-property-decorator';
+
+    @Component({
+        components: {}
+    })
+    export default class OrgTree extends Vue {
+
+        /*树数据*/
+        public TreeData: any = [];
+
+        /*树显示说明：子树为节点对象的children,节点标签为节点对象的label*/
+        public defaultProps: any = {
+            children: 'children',
+            label: 'label'
+        }
 
+        /*默认展开节点*/
+        public defaultExpandedKeys: any = [];
 
-@Component({
-    components: {
+        /*当前登录人信息*/
+        public curUserContext: any = {};
 
+
+        /**
+         * vue 创建
+         */
+        public created() {
+            var _this: any = this;
+            // 获取当前登录人信息
+            if (_this && _this.$attrs && _this.$attrs.context) {
+                _this.curUserContext = _this.$attrs.context;
+            }
+        }
+
+        /**
+         * vue 挂载
+         */
+        public mounted() {
+            this.initTree();
         }
-})
-export default class OrgTree extends OrgTreeBase {
 
-}
+        /**
+         * 初始化树
+         */
+        private initTree() {
+            const _this = this;
+            // 获取当前登录人所处组织及其下级组织
+            var url;
+            if (_this.curUserContext && _this.curUserContext.srforgid) {
+                url = 'ibzorganizations/' + _this.curUserContext.srforgid + '/suborg/picker';
+            } else {
+                // 获取所有组织及其下级组织
+                url = 'ibzorganizations/picker';
+            }
+            this.$http.get(url).then((response: any) => {
+                if (!response || response.status !== 200) {
+                    this.$Notice.error({title: '错误', desc: response.message});
+                    return;
+                } else {
+                    // 给树赋值，数据结构在后台已经按照eltree格式化
+                    _this.TreeData = response.data;
+                    if (response.data && response.data.length > 0) {
+                        // 设置默认选中第一个节点，即高亮显示
+                        this.$nextTick(function(){
+                            let orgTree:any = this.$refs.OrgTree;
+                            orgTree.setCurrentKey(response.data[0].id);
+                        })
+                        // 默认加载第一个节点的右侧视图，调用选中数据变更事件
+                        _this.selectionChange(response.data[0]);
+                    }
+                }
+            }).catch((e) => {
+                console.log(e);
+            });
+        }
+
+
+        /**
+         * 处理点击节点
+         */
+        protected handleNodeClick() {
+            // 获取当前树
+            const OrgTree: any = this.$refs.OrgTree;
+            // 获取点击状态的节点
+            let node = OrgTree.getCurrentNode();
+            // console.log("选中的node:" + JSON.stringify(node));
+            // if (node.isLeaf && node.isLeaf == true)
+            // 选中数据变更事件
+            this.selectionChange(node);
+        }
+
+        /**
+         * 选中数据变更事件
+         *
+         * @public
+         * @param {*} node 节点对应node对象
+         * @memberof OrgTree
+         */
+        public selectionChange(node: any) {
+            // 获取右侧视图渲染数据需要的参数
+            let temp = JSON.parse(JSON.stringify(node));
+            temp.id = "Org;" + node.id;
+            temp.srfparentdename = "IBZOrganization";
+            temp.srfparentkey = node.id;
+            temp.navparams = "{}";
+            temp.ibzorganization = node.id;
+            let srfappctx: any = {};
+            srfappctx.srfparentkey = temp.srfparentkey;
+            srfappctx.srfparentdename = temp.srfparentdename;
+            srfappctx.ibzorganization = temp.ibzorganization;
+            temp.srfappctx = srfappctx;
+            // 抛出参数
+            let selectiondata: any = [temp];
+            this.$emit('selectionchange', selectiondata);
+        }
+
+    }
 </script>
+
+
+<style lang='less'>
+    @import './org-tree-treeview.less';
+</style>
\ No newline at end of file