引入并注册Empty，组织结构树选择组件新增起始节点
This commit is contained in:
qinjie
parent
8ed75d939c
commit
64631ef5d0
|
|
@ -1,9 +1,12 @@
|
|||
<template>
|
||||
<div class="organization-popover">
|
||||
<!-- :overlayStyle="{paddingTop: '0px', marginTop: '0px', border: '1px solid #1890ff'}" -->
|
||||
<a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree">
|
||||
<!-- 气泡框位置 placement="bottomLeft" -->
|
||||
<!-- 触发行为 trigger="click" -->
|
||||
<!-- 卡片类名 overlayClassName="popover-tree" 注意这里的css类要放到index.html才会生效-->
|
||||
<!-- 隐藏后是否销毁 :destroyTooltipOnHide="true" -->
|
||||
<a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree" :destroyTooltipOnHide="true">
|
||||
<template slot="content" id="popover-tree">
|
||||
<a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear></a-input>
|
||||
<a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear v-show="treeData.length != 0"></a-input>
|
||||
<!-- 树数据源 :tree-data="treeData" -->
|
||||
<!-- 是否自动展开父节点 :auto-expand-parent="false" -->
|
||||
<!-- 是否节点占据一行 :blockNode="true" -->
|
||||
|
|
@ -14,6 +17,7 @@
|
|||
<!-- 点击树节点触发 :select="selectTree" -->
|
||||
<!-- 展开/收起节点时触发 @expand="onExpand" -->
|
||||
<a-tree :tree-data="treeData" :auto-expand-parent="autoExpandParent" :blockNode="true" :defaultSelectedKeys="defaultSelectedKeys" :expanded-keys="expandedKeys" @select="selectTree" @expand="onExpand"></a-tree>
|
||||
<a-empty v-show="treeData.length == 0" description="没有找到组织机构树数据" :image-style="{height: '60px', marginTop: '10px'}" />
|
||||
</template>
|
||||
<a-button class="organization-tree-button" type="primary">组织机构树
|
||||
<a-icon type="down" />
|
||||
|
|
@ -42,29 +46,12 @@
|
|||
export default {
|
||||
props: {
|
||||
defaultOrganizationId: String, // 默认显示的组织机构节点
|
||||
startOrganizationId: String, // 组织机构数从那个节点开始显示
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 组织机构树的数据，后续应该从localStorage取
|
||||
treeData: [
|
||||
{
|
||||
title: '三峡大学',
|
||||
key: '0001',
|
||||
children: [
|
||||
{ title: '三峡大学文学院', key: '00010001' },
|
||||
{
|
||||
title: '三峡大学水利学院', key: '00010002', children: [
|
||||
{ title: '三峡大学水利学院第一学院', key: '000100020001' },
|
||||
{ title: '三峡大学水利学院第二学院', key: '000100020002' },
|
||||
{ title: '三峡大学水利学院第三学院', key: '000100020003' },
|
||||
{ title: '三峡大学水利学院第四学院', key: '000100020004' },
|
||||
{ title: '三峡大学水利学院第五学院', key: '000100020005' },
|
||||
{ title: '三峡大学水利学院第六学院', key: '000100020006' }
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
treeData: [],
|
||||
filterText: null, // 搜索关键字
|
||||
selectTitle: "", // 选择的组织机构数节点的标题
|
||||
selectKey: "", // 选择的组织机构数节点的Key
|
||||
|
|
@ -74,12 +61,40 @@ export default {
|
|||
};
|
||||
},
|
||||
created: function () {
|
||||
// 组织机构树数据源过滤
|
||||
const listData = [
|
||||
{
|
||||
title: '三峡大学',
|
||||
key: '0001',
|
||||
children: [
|
||||
{ title: '三峡大学文学院', key: '00010001' },
|
||||
{
|
||||
title: '三峡大学水利学院', key: '00010002', children: [
|
||||
{ title: '三峡大学水利学院第一学院', key: '000100020001' },
|
||||
{ title: '三峡大学水利学院第二学院', key: '000100020002' },
|
||||
{ title: '三峡大学水利学院第三学院', key: '000100020003' },
|
||||
{ title: '三峡大学水利学院第四学院', key: '000100020004' },
|
||||
{ title: '三峡大学水利学院第五学院', key: '000100020005' },
|
||||
{ title: '三峡大学水利学院第六学院', key: '000100020006' }
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
if (!this.startOrganizationId) {
|
||||
this.treeData = listData;
|
||||
} else {
|
||||
let currentNode = this.getCurrentNode(this.startOrganizationId, listData);
|
||||
if (currentNode) this.treeData.push(currentNode);
|
||||
}
|
||||
|
||||
|
||||
// 检查传入的默认显示组织机构节点，如果正确则显示并回调
|
||||
if (this.defaultOrganizationId) {
|
||||
let selectTitle = this.getCurrentTtile(this.defaultOrganizationId, this.treeData);
|
||||
if (selectTitle) {
|
||||
let currentNode = this.getCurrentNode(this.defaultOrganizationId, this.treeData);
|
||||
if (currentNode) {
|
||||
this.defaultSelectedKeys.push(this.defaultOrganizationId);
|
||||
this.selectTitle = selectTitle;
|
||||
this.selectTitle = currentNode.title;
|
||||
this.selectKey = this.defaultOrganizationId;
|
||||
this.$emit('getSelectTreeKey', this.selectKey);
|
||||
}
|
||||
|
|
@ -115,18 +130,20 @@ export default {
|
|||
}
|
||||
},
|
||||
// 获取组织机构树Key的Title
|
||||
getCurrentTtile(key, tree) {
|
||||
if (!key) return;
|
||||
getCurrentNode(key, tree) {
|
||||
if (!key) return null;
|
||||
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
|
||||
if (node.key === key) return node.title;
|
||||
if (node.key === key) return node;
|
||||
|
||||
if (node.children) {
|
||||
return this.getCurrentTtile(key, node.children);
|
||||
return this.getCurrentNode(key, node.children);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
// 搜索框内容发生变化时调用
|
||||
onChange(e) {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,8 @@ import {
|
|||
notification,
|
||||
space,
|
||||
Transfer,
|
||||
Tree
|
||||
Tree,
|
||||
Empty
|
||||
} from 'ant-design-vue'
|
||||
import Viser from 'viser-vue'
|
||||
|
||||
|
|
@ -103,6 +104,7 @@ Vue.use(Descriptions)
|
|||
Vue.use(space)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Transfer)
|
||||
Vue.use(Empty)
|
||||
|
||||
Vue.prototype.$confirm = Modal.confirm
|
||||
Vue.prototype.$message = message
|
||||
|
|
|
|||
Loading…
Reference in New Issue