1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<script setup lang="ts">
import { ViewNeuron } from '@ibiz-template/controller';
import { useIndexViewController } from '@ibiz-template/vue-util';
import { computed, getCurrentInstance, onMounted, ref } from 'vue';
import { createUUID } from 'qx-util';
import { useIndexRouteManage } from './index-view';
interface IndexViewProps {
context: IContext;
params?: IParams;
modelPath: string;
}
const props = withDefaults(defineProps<IndexViewProps>(), {
params: () => ({}),
});
const { proxy } = getCurrentInstance()!;
const c = useIndexViewController(proxy, props.modelPath);
const {
currentKey,
keyHistory,
routeMsgs,
updateRouteMsg,
closeView,
deleteRouteCache,
} = useIndexRouteManage(proxy, c);
const appKeepAliveKey = ref(createUUID());
// 视图初始化，监听事件
const onCreated = (neuron: ViewNeuron) => {
const key = currentKey.value;
neuron.evt.on('closeView', () => {
closeView(key);
});
neuron.evt.on('setTitle', (title: string) => {
updateRouteMsg(key, { caption: title });
});
};
// dfsdfds
onMounted(() => {
setTimeout(() => {
const el = document.querySelector('.app-loading-x') as HTMLDivElement;
if (el) {
el.style.display = 'none';
}
}, 300);
});
const onViewFound = (opts: IData) => {
updateRouteMsg(currentKey.value, opts);
};
// 菜单收缩变化
const collapseChange = (collapse: boolean) => {
c.collapseChange = collapse;
};
const onMenuRouteChange = () => {
deleteRouteCache(keyHistory.value.slice(0));
appKeepAliveKey.value = createUUID();
};
// 后退按钮触发事件,删除上一个路由的缓存
window.onpopstate = () => {
deleteRouteCache([keyHistory.value[1]]);
};
const currentPath = computed(() => {
const routeMsg = routeMsgs.value.find(item => item.key === currentKey.value);
return routeMsg?.modelPath || '';
});
</script>
<template>
<AppLayout
:is-complete="c.complete"
:model="c.model"
@onCollapseChange="collapseChange"
>
<template v-if="c.complete">
<AppMenu
v-if="c.complete"
slot="menu"
:current-path="currentPath"
:model-data="c.model.appMenu"
:context="c.context"
:collapse-change="c.collapseChange"
@menuRouteChange="onMenuRouteChange"
></AppMenu>
<AppKeepAlive :key="appKeepAliveKey" :key-list="keyHistory">
<router-view
:key="currentKey"
@neuronInit="onCreated"
@viewFound="onViewFound"
/>
</AppKeepAlive>
</template>
</AppLayout>
</template>