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

app_web/src/components/app-treeselect-refreshview/app-treeselect-refreshview.vue

+<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

app_web/src/pages/lite/lite-index/lite-index-base.vue

@@ -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 {

app_web/src/store/getters.ts

@@ -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

app_web/src/store/mutations.ts

@@ -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

app_web/src/user-register.ts

 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

app_web/src/utils/auth-guard/auth-guard.ts

@@ -41,11 +41,10 @@ export class AuthGuard {
     private constructor() { }
 
     /**
-     * 获取应用数据
+     * post请求
      *
      * @param {string} url url 请求路径
      * @param {*} [params={}] 请求参数
-     * @param {*} [router] 路由对象
      * @returns {Promise<any>} 请求相响应对象
      * @memberof AuthGuard
      */