|
@@ -1,114 +1,81 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<a-input-search style="margin: 10px;width: 90%" placeholder="搜索" @change="onChange" />
|
|
|
- <a-tree
|
|
|
- :expanded-keys="expandedKeys"
|
|
|
- :auto-expand-parent="autoExpandParent"
|
|
|
- :tree-data="gData"
|
|
|
- @expand="onExpand"
|
|
|
- >
|
|
|
- <template slot="title" slot-scope="{ title }">
|
|
|
- <span v-if="title.indexOf(searchValue) > -1">
|
|
|
- {{ title.substr(0, title.indexOf(searchValue)) }}
|
|
|
- <span style="color: #f50">{{ searchValue }}</span>
|
|
|
- {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
|
|
|
- </span>
|
|
|
- <span v-else>{{ title }}</span>
|
|
|
- </template>
|
|
|
- </a-tree>
|
|
|
+ <el-tree
|
|
|
+ class="filter-tree"
|
|
|
+ :data="treeData"
|
|
|
+ :props="defaultProps" :default-expand-all="false"
|
|
|
+ :filter-node-method="filterNode" highlight-current @node-click="checkChange"
|
|
|
+ ref="tree">
|
|
|
+ </el-tree>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- const x = 3;
|
|
|
- const y = 2;
|
|
|
- const z = 1;
|
|
|
- const gData = [];
|
|
|
+ import {querySystem} from "@/api/editer";
|
|
|
|
|
|
- const generateData = (_level, _preKey, _tns) => {
|
|
|
- const preKey = _preKey || '0';
|
|
|
- const tns = _tns || gData;
|
|
|
-
|
|
|
- const children = [];
|
|
|
- for (let i = 0; i < x; i++) {
|
|
|
- const key = `${preKey}-${i}`;
|
|
|
- tns.push({ title: key, key, scopedSlots: { title: 'title' } });
|
|
|
- if (i < y) {
|
|
|
- children.push(key);
|
|
|
- }
|
|
|
- }
|
|
|
- if (_level < 0) {
|
|
|
- return tns;
|
|
|
- }
|
|
|
- const level = _level - 1;
|
|
|
- children.forEach((key, index) => {
|
|
|
- tns[index].children = [];
|
|
|
- return generateData(level, key, tns[index].children);
|
|
|
- });
|
|
|
- };
|
|
|
- generateData(z);
|
|
|
-
|
|
|
- const dataList = [];
|
|
|
- const generateList = data => {
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- const node = data[i];
|
|
|
- const key = node.key;
|
|
|
- dataList.push({ key, title: key });
|
|
|
- if (node.children) {
|
|
|
- generateList(node.children);
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- generateList(gData);
|
|
|
-
|
|
|
- const getParentKey = (key, tree) => {
|
|
|
- let parentKey;
|
|
|
- for (let i = 0; i < tree.length; i++) {
|
|
|
- const node = tree[i];
|
|
|
- if (node.children) {
|
|
|
- if (node.children.some(item => item.key === key)) {
|
|
|
- parentKey = node.key;
|
|
|
- } else if (getParentKey(key, node.children)) {
|
|
|
- parentKey = getParentKey(key, node.children);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return parentKey;
|
|
|
- };
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- expandedKeys: [],
|
|
|
- searchValue: '',
|
|
|
- autoExpandParent: true,
|
|
|
- gData,
|
|
|
+ treeData: [],
|
|
|
+ filterText: '',
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- onExpand(expandedKeys) {
|
|
|
- this.expandedKeys = expandedKeys;
|
|
|
- this.autoExpandParent = false;
|
|
|
+ onChange(e){
|
|
|
+ this.$refs.tree.filter(e.target.value);
|
|
|
+ if(e.target.value==''){
|
|
|
+ for(let i=0;i<this.$refs.tree.$children.length;i++){
|
|
|
+ this.$refs.tree.$children[i].expanded = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
},
|
|
|
- onChange(e) {
|
|
|
- const value = e.target.value;
|
|
|
- const expandedKeys = dataList
|
|
|
- .map(item => {
|
|
|
- if (item.title.indexOf(value) > -1) {
|
|
|
- return getParentKey(item.key, gData);
|
|
|
- }
|
|
|
- return null;
|
|
|
+ querySystem(){
|
|
|
+ querySystem().then(res =>{
|
|
|
+ if(res.result == 'success') {
|
|
|
+ let data = res.data;
|
|
|
+ (function recursion(newObj) {
|
|
|
+ newObj.map(item=>{
|
|
|
+ item.label = item.name;
|
|
|
+ if(item.children){
|
|
|
+ recursion(item.children);
|
|
|
+ }
|
|
|
})
|
|
|
- .filter((item, i, self) => item && self.indexOf(item) === i);
|
|
|
- Object.assign(this, {
|
|
|
- expandedKeys,
|
|
|
- searchValue: value,
|
|
|
- autoExpandParent: true,
|
|
|
- });
|
|
|
+ })(data)
|
|
|
+
|
|
|
+ this.treeData = data;
|
|
|
+ }else{
|
|
|
+ this.$message.error('获取失败');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkChange(data) {
|
|
|
+ this.$emit('getTreeId',data.id)
|
|
|
},
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.querySystem();
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-
|
|
|
+<style scoped lang="less">
|
|
|
+.filter-tree{
|
|
|
+ padding: 0 10px;
|
|
|
+ /deep/ .el-tree-node__content{
|
|
|
+ height:38px;
|
|
|
+ }
|
|
|
+ /deep/.el-tree-node:focus >.el-tree-node__content {
|
|
|
+ background-color: #E1F2FF!important;
|
|
|
+ color: #0091FF!important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|