提交 328c7b83 编写于 作者: laizhilong's avatar laizhilong

重写组织树

上级 2a3f1b78
<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 = [];
@Component({
components: {
/**
* 选中数据
*/
public selectData: any = {};
/**
* 初始选中的数据
*/
public ininselectData: any = {};
/**
* 视图选中数据
*/
public viewSelections: any[] = [];
/**
* vue 创建
*/
public created() {
}
/**
* vue 挂载
*/
public mounted() {
this.initTree();
}
})
export default class OrgTree extends OrgTreeBase {
}
/**
* 初始化树
*/
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));
}
}
</script>
<style lang='less'>
@import './org-tree-treeview.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册