重写组织树

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="CDtree"
+                    show-checkbox
+                    node-key="id"
+                    :check-strictly="true"
+                    :default-expand-all="false"
+                    highlight-current
+                    :default-expanded-keys="this.dataexpandedKeys"
+                    :props="this.defaultProps"
+                    @check-change="handleCheckChange"
+            >
+                <template slot-scope="{ node, data }">
+                    <context-menu :contextMenuStyle="{width: '100%'}" :data="node" :renderContent="renderContextMenu">
+                        <tooltip transfer style="width: 100%;" max-width="2000" placement="right">
+                            <div class="tree-node" @dblclick="doDefaultAction(node)">
+                            <span class="icon">
+                                <i v-if=" data.iconcls && !Object.is(data.iconcls, '')" :class="data.iconcls"></i>
+                                <img v-else-if="data.icon && !Object.is(data.icon, '')" :src="data.icon" />
+                                <icon v-else-if="isOutputIconDefault" type="ios-paper-outline"></icon>&nbsp;
+                            </span>
+                                <span class="text">
+                                <span v-if="data.html" v-html="data.html"></span>
+                                <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
+                            </span>
+                            </div>
+                            <template slot="content">
+                                <span v-if="data.html" v-html="data.html"></span>
+                                <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
+                            </template>
+                        </tooltip>
+                    </context-menu>
+                </template>
+            </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 {Vue, Component, Prop, Provide, Emit, Watch, Model} from 'vue-property-decorator';
+    import {CreateElement} from 'vue';
+    import {Subject, Subscription} from 'rxjs';
+    import {ControlInterface} from '@/interface/control';
+    import {UIActionTool, Util} from '@/utils';
+    import IBZOrganizationService from '@/service/ibzorganization/ibzorganization-service';
+    import OrgTreeService from './org-tree-treeview-service';
+
+
+    @Component({
+        components: {}
+    })
+    export default class OrgTree extends Vue {
+        /**
+         * 树数据
+         */
+        public TreeData: any = [];
+
+        /**
+         * 树显示说明：子树为节点对象的children,节点标签为节点对象的label
+         */
+        public defaultProps: any = {
+            children: 'children',
+            label: 'label'
+        }
+
+        /*应用菜单数据默认展开节点*/
+        public dataexpandedKeys: any = [];
+
+        /**
+         * 选中数据
+         */
+        public selectData: any = {};
+        /**
+         * 初始选中的数据
+         */
+        public ininselectData: any = {};
+
+        /**
+         * 视图选中数据
+         */
+        public viewSelections: any[] = [];
+
+        /**
+         * vue 创建
+         */
+        public created() {
+
+        }
+
+        /**
+         * vue 挂载
+         */
+        public mounted() {
+            this.initTree();
+        }
+
+        /**
+         * 初始化树
+         */
+        private initTree() {
+            const _this = this;
+            // get全部菜单和数据能力和统一资源的请求路径
+            const url = `ibzorganizations/picker`;
+            this.$http.get(url).then((response: any) => {
+                if (!response || response.status !== 200) {
+                    this.$Notice.error({title: '错误', desc: response.message});
+                    return;
+                } else {
+                    // console.log(JSON.stringify(response.data));
+                    // 给树赋值，数据结构在后台已经按照eltree格式化
+                    _this.TreeData = response.data;
+                }
+            }).catch((e) => {
+                console.log(e);
+            });
+        }
+
+        /**
+         * 处理选中节点
+         */
+        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));
+        }
 
- 
-@Component({
-    components: {
-         
     }
-})
-export default class OrgTree extends OrgTreeBase {
+</script>
+
 
-}
-</script>
\ No newline at end of file
+<style lang='less'>
+    @import './org-tree-treeview.less';
+</style>
\ No newline at end of file