提交 3587e60e 编写于 作者: lzlhxj's avatar lzlhxj

首页导航栏树形下拉框组件:选中树叶子节点全局刷新

上级 8a853f04
<template>
<div style="margin-right: 16px;">
<!--树形下拉框-->
<el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle">
<el-option :value="valueTitle" :label="valueTitle" :key="valueId">
<el-tree id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
:default-expanded-keys="defaultExpandedKey"
@node-click="handleNodeClick">
</el-tree>
</el-option>
</el-select>
</div>
</template>
<script lang="ts">
import {Vue, Component, Prop, Model, Emit, Inject} from "vue-property-decorator";
import {Subject} from "rxjs";
@Component({})
export default class AppTreeselectRefreshview extends Vue {
// 树数据
public options: any = [];
// 树显示说明
public props: any = {
value: 'id', // ID字段名
label: 'label', // 显示名称
children: 'apps' // 子级字段名
};
// 下拉框初始值key
public valueId: any = null;
// 下拉框初始值
public valueTitle: any = '';
// 默认展开节点key
public defaultExpandedKey: any = [];
// 是否每次只打开一个同级树节点展开
public accordion: boolean = false;
// 可清空选项
public clearable: boolean = true;
/**
* vue创建
*/
created(): void {
}
/**
* vue挂载
*/
mounted(): void {
// 初始化数据
this.initHandle();
}
/**
* 获取初始化数据
*/
public initHandle() {
let url: any = '/lite/sysapps';
this.$http.get(url).then((response: any) => {
if (response && response.status == 200) {
const data: any = response.data;
if (data && data.length > 0) {
// 处理数据,生成有相同结构的父子节点结构
let tempData: any = [];
data.forEach((item: any) => {
let tempItem: any = item;
if (tempItem.pssystemid) {
tempItem.id = tempItem.pssystemid;
tempItem.systemId = tempItem.pssystemid;
}
if (tempItem.pssystemname) {
tempItem.label = tempItem.pssystemname;
}
tempData.push(tempItem);
});
// 给树赋值
this.options = tempData;
this.$nextTick(() => {
// 树
let tree: any = this.$refs.selectTree;
// 第一个叶子节点
let firstNode:any = {};
if (tempData[0].apps) {
firstNode = tempData[0].apps;
}else {
firstNode = tempData[0];
}
// 设置树当前选中值
tree.setCurrentKey(firstNode[0].id);
// 从local中拿刷新前选中值
if (localStorage.getItem('localdata')) {
const localdata:any = JSON.parse(localStorage.getItem('localdata') as string);
this.valueId = localdata.dstappid;
this.valueTitle = localdata.title;
this.defaultExpandedKey.push(localdata.dstappid);
}else {
// 设置下拉框默认值
this.valueId = firstNode[0].id;
this.valueTitle = firstNode[0].systemId + "-" + firstNode[0].label;
this.defaultExpandedKey.push(firstNode[0].id);
}
});
}
} else {
console.warn("加载数据错误");
}
}).catch((error: any) => {
console.warn("加载数据错误," + error);
})
}
/**
* 注入加载行为
*/
@Inject("reload")
reload!:any;
/**
* 处理下拉框选中项
*/
public handleNodeClick(node: any) {
// 父级节点不进行处理
if (node.apps) {
return;
}
// 从local中拿刷新前选中值
if (localStorage.getItem('localdata')) {
const localdata:any = JSON.parse(localStorage.getItem('localdata') as string);
if (localdata.dstappid==node[this.props.value]) {
return;
}
}
// 重新赋值
this.valueId = node[this.props.value];
const dstsystemid:any = node.systemId;
this.valueTitle = dstsystemid +"-"+ node[this.props.label];
// 添加本地应用数据
const localdata:any = {'dstsystemid':dstsystemid,'dstappid':this.valueId, 'title': this.valueTitle};
this.$store.commit('addLocalData',localdata);
// 调用App.vue的加载行为
// this.reload();
// 浏览器window的加载行为
window.location.reload();
}
/**
* 清空选中项
*/
public clearHandle() {
this.valueId = null;
this.valueTitle = '';
this.defaultExpandedKey = [];
// 清空当前选中节点
let tree: any = this.$refs.selectTree;
tree.setCurrentKey(null);
// 收缩所有节点
this.$nextTick(() => {
for (let i = 0; i < this.options.length; i++) {
tree.store.nodesMap[this.options[i].id].expanded = false;
}
});
}
/**
* 销毁之前
*/
beforeDestroy(): void {
this.valueId = null;
this.valueTitle = '';
this.defaultExpandedKey = [];
this.options = [];
}
}
</script>
<style lang='less'>
@import "app-treeselect-refreshview.less";
</style>
\ No newline at end of file
......@@ -40,6 +40,7 @@
</div>
</div>
<div class="header-right" style="display: flex;align-items: center;justify-content: space-between;">
<app-treeselect-refreshview/>
<app-header-menus />
<app-lang style='font-size: 15px;padding: 0 10px;'></app-lang>
<app-orgsector></app-orgsector>
......@@ -73,10 +74,12 @@ import { Subject,Subscription } from 'rxjs';
import { appConfig } from '@/config/appConfig';
import AppTreeselectRefreshview from "@components/app-treeselect-refreshview/app-treeselect-refreshview.vue";
@Component({
components: {
AppTreeselectRefreshview
},
})
export default class LiteIndexBase extends Vue {
......
......@@ -111,13 +111,3 @@ export const getDepData = (state: any) => (srfkey: string) => {
let depData = state.depDataMap[srfkey];
return depData;
}
\ No newline at end of file
/**
* 获取视图信息
*
* @param state
*/
export const getViewMessage = (state: any) => (tag: string) => {
let id = state.viewMessage[tag];
return id;
}
\ No newline at end of file
......@@ -292,15 +292,3 @@ export const addDepData = (state: any, args: {srfkey: string,depData: any}) => {
state.depDataMap[args.srfkey] = JSON.parse(JSON.stringify(args.depData));
}
}
\ No newline at end of file
/**
* 添加视图信息
*
* @param state
* @param args
*/
export const addViewMessage = (state: any, args: { tag: string, id: any }) => {
if(args && args.tag && args.id) {
state.viewMessage[args.tag] = args.id;
}
}
\ No newline at end of file
import AvueComponent from './components/avue-component/avue-component.vue'
import AppAvueCrud from './components/app-avue-crud/app-avue-crud.vue'
import AppTreeselectRefreshview from './components/app-treeselect-refreshview/app-treeselect-refreshview.vue'
export const UserComponent = {
install(v: any, opt: any) {
v.component('avue-component', AvueComponent);
v.component('app-avue-crud', AppAvueCrud);
v.component('app-treeselect-refreshview', AppTreeselectRefreshview);
}
};
\ No newline at end of file
......@@ -41,11 +41,10 @@ export class AuthGuard {
private constructor() { }
/**
* 获取应用数据
* post请求
*
* @param {string} url url 请求路径
* @param {*} [params={}] 请求参数
* @param {*} [router] 路由对象
* @returns {Promise<any>} 请求相响应对象
* @memberof AuthGuard
*/
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册