新增组织机构数选择组件
This commit is contained in:
qinjie
parent
7c2c95b74f
commit
cded48a4e6
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<div class="organization-popover">
|
||||
<!-- :overlayStyle="{paddingTop: '0px', marginTop: '0px', border: '1px solid #1890ff'}" -->
|
||||
<a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree">
|
||||
<template slot="content" id="popover-tree">
|
||||
<a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear></a-input>
|
||||
<!-- 树数据源 :tree-data="treeData" -->
|
||||
<!-- 是否自动展开父节点 :auto-expand-parent="false" -->
|
||||
<!-- 是否节点占据一行 :blockNode="true" -->
|
||||
<!-- 是否展示连接线 showLine 默认false -->
|
||||
<!-- 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 replaceFields -->
|
||||
<!-- 默认选中的树节点 defaultSelectedKeys -->
|
||||
<!-- 展开指定的树节点 :expanded-keys="expandedKeys" -->
|
||||
<!-- 点击树节点触发 :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>
|
||||
</template>
|
||||
<a-button class="organization-tree-button" type="primary">组织机构树
|
||||
<a-icon type="down" />
|
||||
</a-button>
|
||||
</a-popover>
|
||||
<div class="organization-tree-organizationName">
|
||||
<p class="">{{ selectTitle || '请选择组织机构树' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 组件使用方法
|
||||
// 1. 引入 import orgTree from '@/components/OrgTree/Index'
|
||||
// 2. 注册 components: { orgTree },
|
||||
// 3. 在需要展示的位置放置组件
|
||||
// <org-tree defaultOrganizationId="000100020001" @getSelectTreeKey="getSelectTreeKey"></org-tree>
|
||||
// 说明
|
||||
// :defaultOrganizationId 传入默认组织机构ID，可为空，会检查传入的组织结构ID是否在组织机构树中，如不存在则会忽略
|
||||
// @getSelectTreeKey 当选中某一个组织机构数节点时的回调，传入默认组织机构ID时也会触发回调
|
||||
//
|
||||
// 回调函数示例
|
||||
// getSelectTreeKey(key) {
|
||||
// this.organizationId = key;
|
||||
// }
|
||||
export default {
|
||||
props: {
|
||||
defaultOrganizationId: 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' }
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
filterText: null, // 搜索关键字
|
||||
selectTitle: "", // 选择的组织机构数节点的标题
|
||||
selectKey: "", // 选择的组织机构数节点的Key
|
||||
autoExpandParent: true, // 是否自动展开父节点
|
||||
defaultSelectedKeys: [], // 默认选中的树节点
|
||||
expandedKeys: [], // 展开指定的树节点
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
// 检查传入的默认显示组织机构节点，如果正确则显示并回调
|
||||
if (this.defaultOrganizationId) {
|
||||
let selectTitle = this.getCurrentTtile(this.defaultOrganizationId, this.treeData);
|
||||
if (selectTitle) {
|
||||
this.defaultSelectedKeys.push(this.defaultOrganizationId);
|
||||
this.selectTitle = selectTitle;
|
||||
this.selectKey = this.defaultOrganizationId;
|
||||
this.$emit('getSelectTreeKey', this.selectKey);
|
||||
}
|
||||
}
|
||||
console.log(this.defaultSelectedKeys)
|
||||
},
|
||||
methods: {
|
||||
// 点击组织机构数节点时调用
|
||||
selectTree(selectedKeys, e) {
|
||||
this.selectKey = e.node.eventKey;
|
||||
this.selectTitle = e.node.title;
|
||||
this.$emit('getSelectTreeKey', this.selectKey);
|
||||
},
|
||||
// 展开/收起节点时触发
|
||||
onExpand(expandedKeys) {
|
||||
this.expandedKeys = expandedKeys;
|
||||
this.autoExpandParent = false;
|
||||
},
|
||||
// 筛选组织机构数方法
|
||||
getParentKey(value, tree) {
|
||||
if (!value) return;
|
||||
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
|
||||
if (node.children) {
|
||||
if (node.children.some(item => item.title.indexOf(value) > -1)) {
|
||||
this.expandedKeys.push(node.key);
|
||||
}
|
||||
|
||||
this.getParentKey(value, node.children);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取组织机构树Key的Title
|
||||
getCurrentTtile(key, tree) {
|
||||
if (!key) return;
|
||||
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
|
||||
if (node.key === key) return node.title;
|
||||
|
||||
if (node.children) {
|
||||
return this.getCurrentTtile(key, node.children);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 搜索框内容发生变化时调用
|
||||
onChange(e) {
|
||||
const value = e.target.value;
|
||||
const this_ = this;
|
||||
this.expandedKeys = [];
|
||||
this.getParentKey(value, this.treeData);
|
||||
// console.log(this.expandedKeys);
|
||||
this.filterText = value;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.organization-popover {
|
||||
display: flex;
|
||||
border: 1px solid #ebeef5;
|
||||
height: 40px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.organization-popover > .organization-tree-organizationName {
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
}
|
||||
.organization-popover > .organization-tree-organizationName > p {
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.organization-tree-button {
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
margin-top: -1px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue