!1086 修复工作台首次关闭页面空白，快捷入口重新过滤出全部应用

Merge pull request !1086 from xin-saul/next

Web/src/views/home/widgets/components/myapp.vue

@@ -1,19 +1,10 @@
 <template>
 	<el-card shadow="hover" header="快捷入口">
-		<template #header>
-			<el-icon style="display: inline; vertical-align: middle"> <ele-Guide /> </el-icon>
-			<span style=""> 快捷入口 </span>
-		</template>
 		<ul class="myMods">
-			<!-- <li v-for="mod in myMods" :key="mod.path" :style="{ background:mod.meta.color||'#eeeeee'}"> -->
-			<li v-for="mod in myMods" :key="mod.path">
-				<a v-if="mod.meta.type == 'link'" :href="mod.path" target="_blank">
-					<SvgIcon :name="mod.meta.icon" style="font-size: 18px" />
-					<p>{{ mod.meta.title }}</p>
-				</a>
-				<router-link v-else :to="{ path: mod.path }">
-					<SvgIcon :name="mod.meta.icon" style="font-size: 18px" />
-					<p>{{ mod.meta.title }}</p>
+			<li v-for="mod in myMods" :key="mod.path!">
+				<router-link :to="{ path: mod.path! }">
+					<SvgIcon :name="mod.meta?.icon" style="font-size: 18px;" />
+					<p>{{ mod.meta?.title }}</p>
 				</router-link>
 			</li>
 			<li class="modItem-add" @click="addMods">
@@ -23,13 +14,21 @@
 			</li>
 		</ul>
 
-		<el-drawer title="添加应用" v-model="modsDrawer" size="20%" destroy-on-close :before-close="beforeClose">
+		<el-drawer title="添加应用" v-model="modsDrawer" :size="520" destroy-on-close :before-close="beforeClose">
 			<div class="setMods mt15">
 				<h4>我的常用 ( {{ myMods.length }} )</h4>
-				<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="app" class="draggable-box" force-fallback fallback-on-body>
+				<draggable tag="ul"
+					v-model="myMods"
+					animation="200"
+					item-key="id"
+					group="app"
+					class="draggable-box"
+					force-fallback
+					fallback-on-body
+				>
 					<template #item="{ element }">
 						<li>
-							<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
+							<SvgIcon :name="element.meta.icon" style="font-size: 18px;" />
 							<p>{{ element.meta.title }}</p>
 						</li>
 					</template>
@@ -37,20 +36,27 @@
 			</div>
 			<div class="setMods">
 				<h4>全部应用 ( {{ filterMods.length }} )</h4>
-				<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" group="app" class="draggable-box" force-fallback fallback-on-body>
+				<draggable
+					tag="ul"
+					v-model="filterMods"
+					animation="200"
+					item-key="id"
+					group="app"
+					class="draggable-box"
+					force-fallback
+					fallback-on-body
+				>
 					<template #item="{ element }">
 						<li :style="{ background: element.meta.color || '#909399' }">
-							<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
+							<SvgIcon :name="element.meta.icon" style="font-size: 18px;" />
 							<p>{{ element.meta.title }}</p>
 						</li>
 					</template>
 				</draggable>
 			</div>
 			<template #footer>
-				<div style="margin-bottom: 20px; margin-right: 20px">
-					<el-button @click="beforeClose">取消</el-button>
-					<el-button type="primary" @click="saveMods">保存</el-button>
-				</div>
+				<el-button @click="beforeClose">取消</el-button>
+				<el-button type="primary" @click="saveMods">保存</el-button>
 			</template>
 		</el-drawer>
 	</el-card>
@@ -58,79 +64,83 @@
 
 <script lang="ts">
 export default {
-	title: '快捷入口',
-	icon: 'ele-Monitor',
-	description: '可以配置的快捷入口',
-};
+	title: "快捷入口",
+	icon: "ele-Monitor",
+	description: "可以配置的快捷入口"
+}
 </script>
 
 <script setup lang="ts" name="myapp">
-import draggable from 'vuedraggable';
-import { onMounted, ref } from 'vue';
-import { Local } from '/@/utils/storage';
-import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
-import { ElMessage } from 'element-plus';
+import draggable from 'vuedraggable'
+import { onMounted, ref } from 'vue'
+import { Local } from '/@/utils/storage'
+import { useRequestOldRoutes } from '/@/stores/requestOldRoutes'
+import { MenuOutput } from '/@/api-services/models'
+import { ElMessage } from 'element-plus'
 
-const mods = ref<any>([]); // 所有应用
-const myMods = ref<any>([]); // 我的常用
-const myModsName = ref<any>([]); // 我的常用
-const filterMods = ref<any>([]); // 过滤我的常用后的应用
-const modsDrawer = ref<boolean>(false);
+const mods = ref<MenuOutput[]>([]) // 所有应用
+const myMods = ref<MenuOutput[]>([]) // 我的常用
+const myModsName = ref<Array<string | null | undefined>>([]) // 我的常用
+const filterMods = ref<MenuOutput[]>([]) // 过滤我的常用后的应用
+const modsDrawer = ref<boolean>(false)
 
 onMounted(() => {
-	getMods();
-});
+	getMods()
+})
 
 const addMods = () => {
-	modsDrawer.value = true;
-};
+	modsDrawer.value = true
+}
 
 const getMods = () => {
-	myModsName.value = Local.get('my-mods') || [];
-	var menuTree = useRequestOldRoutes().requestOldRoutes || [];
-	filterMenu(menuTree);
-	myMods.value = mods.value.filter((item: any) => {
+	myModsName.value = Local.get('my-mods') || []
+	var menuTree = useRequestOldRoutes().requestOldRoutes as MenuOutput[] || []
+	filterMenu(menuTree)
+	myMods.value = mods.value.filter((item: MenuOutput) => {
 		return myModsName.value.includes(item.name);
-	});
-
-	filterMods.value = mods.value.filter((item: any) => {
-		return !myModsName.value.includes(item.name);
-	});
-};
+	})
+	
+	filterMods.value = mods.value.filter((item: MenuOutput) => {
+		return !myModsName.value.includes(item.name)
+	})
+}
 
 // 递归拿到所有可显示非iframe的2级菜单
-const filterMenu = (map: any) => {
-	map.forEach((item: any) => {
-		if (item.meta.isHide || item.type == 3 || item.status != 1) {
-			return false;
+const filterMenu = (map: MenuOutput[]) => {
+	map.forEach((item: MenuOutput) => {
+		if (item.meta?.isHide || item.type == 3 || item.status != 1) {
+			return false
 		}
-		if (item.meta.isIframe) {
-			item.path = `/i/${item.name}`;
+		if (item.meta?.isIframe) {
+			item.path = `/i/${item.name}`
 		}
 		if (item.children && item.children.length > 0) {
-			filterMenu(item.children);
+			filterMenu(item.children)
 		} else {
-			mods.value.push(item);
+			mods.value.push(item)
 		}
-	});
-};
+	})
+}
 
 // 保存我的常用
 const saveMods = () => {
-	const myModsName = myMods.value.map((v: any) => v.name);
-	Local.set('my-mods', myModsName);
-	ElMessage.success('设置常用成功');
-	modsDrawer.value = false;
-};
+	const myModsName = myMods.value.map((v: MenuOutput) => v.name)
+	Local.set('my-mods', myModsName)
+	ElMessage.success('设置常用成功')
+	modsDrawer.value = false
+}
 
 // 取消
 const beforeClose = () => {
-	myModsName.value = Local.get('my-mods') || [];
-	myMods.value = mods.value.filter((item: any) => {
-		return myModsName.value.includes(item.name);
-	});
-	modsDrawer.value = false;
-};
+	myModsName.value = Local.get('my-mods') || []
+	myMods.value = mods.value.filter((item: MenuOutput) => {
+		return myModsName.value.includes(item.name)
+	})
+	filterMods.value = mods.value.filter((item: MenuOutput) => {
+		return !myModsName.value.includes(item.name)
+	})
+	modsDrawer.value = false
+}
 </script>
 
 <style scoped lang="scss">
@@ -192,7 +202,7 @@ const beforeClose = () => {
 
 .draggable-box {
 	border: 1px dashed var(--el-color-primary);
-	padding: 15px;
+	padding: 15px
 }
 
 .setMods {

Web/src/views/home/widgets/index.vue

@@ -208,7 +208,7 @@ const backDefault = () => {
 const close = () => {
 	customizing.value = false;
 	widgetsRef.value?.style.removeProperty('transform');
-	grid.value = Local.get('grid');
+	grid.value = Local.get('grid') ? Local.get('grid') : defaultGrid;
 };
 </script>