新增组织机构数选择组件

This commit is contained in:
qinjie 2021-08-28 08:37:30 +08:00
parent 7c2c95b74f
commit cded48a4e6
1 changed files with 175 additions and 0 deletions

View File

@ -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 IDID
// @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);
}
}
},
// KeyTitle
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>