清除页面缓存方法封装

src/App.vue

@@ -21,6 +21,7 @@ import { Session, Local } from '/@/utils/storage';
 import setIntroduction from '/@/utils/setIconfont';
 import { loginPageInfo } from '/@/api/login';
 import { getImageUrl } from '/@/utils/tools';
+import { useKeepALiveNames } from '/@/stores/keepAliveNames';
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
 const Setings = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/setings.vue'));
@@ -31,6 +32,9 @@ const route = useRoute();
 const stores = useTagsViewRoutes();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
+const storesKeepALiveNames = useKeepALiveNames();
+const storesTagsViewRoutes = useTagsViewRoutes();
+const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
 
 // 设置锁屏时组件显示隐藏
 const setLockScreen = computed(() => {
@@ -79,7 +83,6 @@ onMounted(() => {
 		mittBus.on('openSetingsDrawer', () => {
 			openSetingsDrawer();
 		});
-
 		// 获取缓存中的布局配置
 		if (Local.get('themeConfig')) {
 			storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
@@ -89,6 +92,10 @@ onMounted(() => {
 		if (Session.get('isTagsViewCurrenFull')) {
 			stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
 		}
+		// 清除某个页面的缓存
+		mittBus.on('clearCache', (val: any) => {
+			clearCacheTagsView(val);
+		});
 		// 解决火狐拖动打开新窗口
 		document.body.ondrop = (event) => {
 			event.preventDefault();
@@ -96,9 +103,22 @@ onMounted(() => {
 		};
 	});
 });
+// 清除缓存 name
+const clearCacheTagsView = async (routeName: string) => {
+	let item: any = {};
+	tagsViewRoutes.value.forEach((v: any) => {
+		if (v.name === routeName) {
+			item = v;
+		}
+	});
+	if (!item) return false;
+	await storesKeepALiveNames.delCachedView(item);
+	if (item.meta?.isKeepAlive) storesKeepALiveNames.addCachedView(item);
+};
 // 页面销毁时，关闭监听布局配置/i18n监听
 onUnmounted(() => {
 	mittBus.off('openSetingsDrawer', () => {});
+	mittBus.off('clearCache', () => {});
 });
 // 监听路由的变化，设置网站标题
 watch(

src/components/LogicFlow/index.vue

@@ -37,7 +37,7 @@
         <el-button @click="release" type="primary">发布</el-button>
       </div> -->
 			<!-- 节点内容弹窗 -->
-			<PropertySetting ref="propertySettingRef" v-model="formData" @change="handlePropertyChange" @changeOther="handlePropertyChangeOther"/>
+			<PropertySetting ref="propertySettingRef" v-model="formData" @change="handlePropertyChange" @changeOther="handlePropertyChangeOther" />
 		</div>
 	</div>
 </template>
@@ -334,7 +334,7 @@ const initEvent = () => {
 				name: args.data.text?.value,
 				type: args.data.type,
 				nodes,
-				summarynodes
+				summarynodes,
 			});
 		}
 	});
@@ -377,21 +377,23 @@ const saveOnly = () => {
 				workflowUpdate(submitData).then(() => {
 					// 更新
 					ElMessage.success('操作成功');
+					// 关闭当前 tagsView
+					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+					mittBus.emit('clearCache', 'systemWorkflow');
 					router.push({
 						path: '/system/config/workflow',
 					});
-					// 关闭当前 tagsView
-					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 				});
 			} else {
 				workflowAdd(submitData).then(() => {
 					//保存
 					ElMessage.success('操作成功');
+					// 关闭当前 tagsView
+					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+					mittBus.emit('clearCache', 'systemWorkflow');
 					router.push({
 						path: '/system/config/workflow',
 					});
-					// 关闭当前 tagsView
-					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 				});
 			}
 			emits('on-save', getGraphData());
@@ -434,6 +436,7 @@ const release = async () => {
 							ElMessage.success('操作成功');
 							// 关闭当前 tagsView
 							mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+							mittBus.emit('clearCache', 'systemWorkflow');
 							router.push({
 								path: '/system/config/workflow',
 							});
@@ -456,6 +459,7 @@ const release = async () => {
 							ElMessage.success('操作成功');
 							// 关闭当前 tagsView
 							mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+							mittBus.emit('clearCache', 'systemWorkflow');
 							router.push({
 								path: '/system/config/workflow',
 							});
@@ -515,7 +519,6 @@ const handlePropertyChange = (e: any) => {
 			lf.setProperties(nodeId, {
 				[e.propertyName]: e.propertyValue,
 			});
-			
 		}
 		emits('update:modelValue', getGraphData());
 	}
@@ -542,7 +545,6 @@ const handlePropertyChangeOther = (e: any) => {
 			lf.setProperties(nodeId, {
 				[e.propertyName]: e.propertyValue,
 			});
-			
 		}
 		emits('update:modelValue', getGraphData());
 	}

src/types/mitt.d.ts

@@ -10,8 +10,8 @@ export type MittType = {
 	openShareTagsView?: string; // 布局设置弹窗，开启 TagsView 共用
 	onTagsViewRefreshRouterView?: any; // tagsview 刷新界面
 	onCurrentContextmenuClick?: any; // tagsview 右键菜单每项点击时
-	scrollTopEmit?:object; //点击分页跳转滚动到顶部
-	refreshList?:string; // 刷新当前页面
+	scrollTopEmit?: object; //点击分页跳转滚动到顶部
+	clearCache?: any; //清除某个页面的缓存
 };
 // mitt 参数类型定义
 declare type LayoutMobileResize = {

src/views/business/order/accept/orderAdd.vue

@@ -575,7 +575,7 @@ const state = reactive<any>({
 		duplicateTitle: '',
 		duplicateId: '',
 		content: '',
-		licenceTypeCode:''
+		licenceTypeCode: '',
 	},
 	formLoading: false, // 表单加载状态
 	historyOrderLoading: false, // 历史工单加载状态
@@ -773,11 +773,12 @@ const save = () => {
 					// 新增
 					orderAdd(submitObj).then(() => {
 						ElMessage.success('操作成功');
+						// 关闭当前 tagsView
+						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+						mittBus.emit('clearCache', 'order');
 						router.push({
 							path: '/business/order',
 						});
-						// 关闭当前 tagsView
-						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 					});
 				} else {
 					//不通过 展示弹窗
@@ -787,11 +788,12 @@ const save = () => {
 				// 新增
 				orderAdd(submitObj).then(() => {
 					ElMessage.success('操作成功');
+					// 关闭当前 tagsView
+					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+					mittBus.emit('clearCache', 'order');
 					router.push({
 						path: '/business/order',
 					});
-					// 关闭当前 tagsView
-					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 				});
 			}
 		} else {
@@ -897,11 +899,12 @@ const chooseComment = (item: any) => {
 };
 // 流程提交成功
 const submitProcessSuccess = () => {
+	// 关闭当前 tagsView
+	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+	mittBus.emit('clearCache', 'order');
 	router.push({
 		path: '/business/order',
 	});
-	// 关闭当前 tagsView
-	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {

src/views/business/order/accept/orderEdit.vue

@@ -779,11 +779,12 @@ const save = () => {
 					//验证通过
 					orderEdit(submitObj).then(() => {
 						ElMessage.success('操作成功');
+						// 关闭当前 tagsView
+						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+						mittBus.emit('clearCache', 'order');
 						router.replace({
 							path: '/business/order',
 						});
-						// 关闭当前 tagsView
-						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 					});
 				} else {
 					//不通过 展示弹窗
@@ -793,11 +794,12 @@ const save = () => {
 				// 修改
 				orderEdit(submitObj).then(() => {
 					ElMessage.success('操作成功');
+					// 关闭当前 tagsView
+					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+					mittBus.emit('clearCache', 'order');
 					router.replace({
 						path: '/business/order',
 					});
-					// 关闭当前 tagsView
-					mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 				});
 			}
 		} else {
@@ -883,11 +885,12 @@ const searchKnowledge = (value?: string) => {
 };
 // 流程提交成功
 const submitProcessSuccess = () => {
+	// 关闭当前 tagsView
+	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+	mittBus.emit('clearCache', 'order');
 	router.push({
 		path: '/business/order',
 	});
-	// 关闭当前 tagsView
-	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {

src/views/business/order/index.vue

@@ -261,7 +261,7 @@
 	</div>
 </template>
 <script setup lang="ts" name="order">
-import { defineAsyncComponent, ref, reactive, onMounted, onActivated } from 'vue';
+import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import type { FormInstance } from 'element-plus';
 import { useRouter } from 'vue-router';
@@ -565,9 +565,6 @@ onMounted(async () => {
 	getBaseData();
 	getList();
 });
-onActivated(() => {
-	getList();
-});
 </script>
 <style scoped lang="scss">
 .business-oreder-container {

src/views/knowledge/knowledge/component/editKnowledge.vue

@@ -263,11 +263,11 @@ const onSubmitReview = async (formEl: FormInstance | undefined) => {
 };
 // 流程提交成功
 const submitProcessSuccess = () => {
+	// 关闭当前 tagsView
+	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 	router.push({
 		path: '/knowledge',
 	});
-	// 关闭当前 tagsView
-	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 };
 // 预览
 const onPreview = () => {
@@ -295,21 +295,25 @@ const onSaveOnly = async (formEl: FormInstance | undefined) => {
 					// 如果从草稿进来 // 更新
 					KnowledgeUpdate(submitObj).then(() => {
 						ElMessage.success('操作成功');
+						// 关闭当前 tagsView
+						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+						mittBus.emit('clearCache', 'knowledge');
+						mittBus.emit('clearCache', 'knowledgeDraft');
 						router.push({
 							path: '/knowledge/draft',
 						});
-						// 关闭当前 tagsView
-						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 					});
 				} else {
 					//如果是直接从知识库编辑 新增
 					KnowledgeAdd(submitObj).then(() => {
 						ElMessage.success('操作成功');
+						// 关闭当前 tagsView
+						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+						mittBus.emit('clearCache', 'knowledge');
+						mittBus.emit('clearCache', 'knowledgeDraft');
 						router.push({
 							path: '/knowledge/draft',
 						});
-						// 关闭当前 tagsView
-						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 					});
 				}
 			} else {
@@ -318,21 +322,25 @@ const onSaveOnly = async (formEl: FormInstance | undefined) => {
 					submitObj.id = state.knowledgeId;
 					KnowledgeUpdate(submitObj).then(() => {
 						ElMessage.success('操作成功');
+						// 关闭当前 tagsView
+						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+						mittBus.emit('clearCache', 'knowledge');
+						mittBus.emit('clearCache', 'knowledgeDraft');
 						router.push({
 							path: '/knowledge/draft',
 						});
-						// 关闭当前 tagsView
-						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 					});
 				} else {
 					// 新增
 					KnowledgeAdd(submitObj).then(() => {
 						ElMessage.success('操作成功');
+						// 关闭当前 tagsView
+						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+						mittBus.emit('clearCache', 'knowledge');
+						mittBus.emit('clearCache', 'knowledgeDraft');
 						router.push({
 							path: '/knowledge/draft',
 						});
-						// 关闭当前 tagsView
-						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
 					});
 				}
 			}

src/views/knowledge/knowledge/index.vue

@@ -225,7 +225,7 @@
 </template>
 
 <script lang="ts" setup name="knowledge">
-import { ref, reactive, onMounted, watch, onActivated, defineAsyncComponent } from 'vue';
+import { ref, reactive, onMounted, watch, defineAsyncComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 import type { FormInstance } from 'element-plus';
@@ -592,9 +592,6 @@ onMounted(() => {
 	getOrgListApi();
 	getBaseData();
 });
-onActivated(() => {
-	getList();
-});
 </script>
 <style lang="scss" scoped>
 .knowledge-knowledge-container {

src/views/system/config/workflow/index.vue

@@ -109,7 +109,7 @@
 </template>
 
 <script lang="ts" setup name="systemWorkflow">
-import { ref, reactive, onMounted, defineAsyncComponent, onActivated } from 'vue';
+import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import type { FormInstance } from 'element-plus';
 import { ElMessage, ElMessageBox } from 'element-plus';
@@ -345,9 +345,6 @@ onMounted(async () => {
 	const res: any = await baseData();
 	state.moduleOptions = res.result?.moduleOptions ?? [];
 });
-onActivated(() => {
-	getList();
-});
 </script>
 <style lang="scss" scoped>
 .system-workflow-container {

src/views/system/roles/component/addRole.vue

@@ -4,14 +4,12 @@
 			<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="角色名称" prop="displayName"
-							:rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' }]">
+						<el-form-item label="角色名称" prop="displayName" :rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' }]">
 							<el-input v-model="state.ruleForm.displayName" placeholder="请输入角色名称" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="角色编码" prop="name"
-							:rules="[{ required: false, message: '请输入角色编码', trigger: 'blur' }]">
+						<el-form-item label="角色编码" prop="name" :rules="[{ required: false, message: '请输入角色编码', trigger: 'blur' }]">
 							<el-input v-model="state.ruleForm.name" placeholder="请输入角色编码" clearable></el-input>
 						</el-form-item>
 					</el-col>
@@ -23,10 +21,8 @@
 						</el-form-item>
 					</el-col> -->
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-						<el-form-item label="角色说明" prop="description"
-							:rules="[{ required: false, message: '请输入角色说明', trigger: 'blur' }]">
-							<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入角色说明"
-								maxlength="150"></el-input>
+						<el-form-item label="角色说明" prop="description" :rules="[{ required: false, message: '请输入角色说明', trigger: 'blur' }]">
+							<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入角色说明" maxlength="150"></el-input>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -45,6 +41,7 @@
 import { reactive, ref } from 'vue';
 import { addRole } from '/@/api/system/roles';
 import { ElMessage } from 'element-plus';
+import mittBus from '/@/utils/mitt';
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['updateList']);
@@ -77,16 +74,20 @@ const onCancel = () => {
 const onSubmit = () => {
 	ruleFormRef.value.validate((valid: boolean) => {
 		if (valid) {
-			addRole(state.ruleForm).then(() => {
-				ElMessage({
-					message: '新增成功',
-					type: 'success',
+			addRole(state.ruleForm)
+				.then(() => {
+					ElMessage({
+						message: '新增成功',
+						type: 'success',
+					});
+					closeDialog();
+					emit('updateList');
+					mittBus.emit('clearCache', 'systemUser');
 				})
-				closeDialog();
-				emit("updateList")
-			}).catch(() => { // 新增失败
-				closeDialog();
-			})
+				.catch(() => {
+					// 新增失败
+					closeDialog();
+				});
 		} else {
 			return false;
 		}
@@ -95,7 +96,7 @@ const onSubmit = () => {
 // 暴露变量
 defineExpose({
 	openDialog,
-	closeDialog
+	closeDialog,
 });
 </script>
 

src/views/system/roles/component/editRole.vue

@@ -4,14 +4,12 @@
 			<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="角色名称" prop="displayName"
-							:rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' }]">
+						<el-form-item label="角色名称" prop="displayName" :rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' }]">
 							<el-input v-model="state.ruleForm.displayName" placeholder="请输入角色名称" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-						<el-form-item label="角色编码" prop="name"
-							:rules="[{ required: false, message: '请输入角色编码', trigger: 'blur' }]">
+						<el-form-item label="角色编码" prop="name" :rules="[{ required: false, message: '请输入角色编码', trigger: 'blur' }]">
 							<el-input v-model="state.ruleForm.name" placeholder="请输入角色编码" clearable></el-input>
 						</el-form-item>
 					</el-col>
@@ -23,10 +21,8 @@
 						</el-form-item>
 					</el-col> -->
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-						<el-form-item label="角色说明" prop="description"
-							:rules="[{ required: false, message: '请输入角色说明', trigger: 'blur' }]">
-							<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入角色说明"
-								maxlength="150"></el-input>
+						<el-form-item label="角色说明" prop="description" :rules="[{ required: false, message: '请输入角色说明', trigger: 'blur' }]">
+							<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入角色说明" maxlength="150"></el-input>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -45,6 +41,7 @@
 import { reactive, ref } from 'vue';
 import { updateRole } from '/@/api/system/roles';
 import { ElMessage } from 'element-plus';
+import mittBus from '/@/utils/mitt';
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['updateList']);
@@ -57,7 +54,7 @@ const state = reactive<any>({
 		name: '', // 角色名称
 		displayName: '', // 角色标识
 		description: '', // 角色描述
-		creationTime: "",
+		creationTime: '',
 	},
 });
 
@@ -81,16 +78,20 @@ const onSubmit = () => {
 	ruleFormRef.value.validate((valid: boolean) => {
 		if (valid) {
 			delete state.ruleForm.creationTime;
-			updateRole(state.ruleForm).then(() => {
-				ElMessage({
-					message: '操作成功',
-					type: 'success',
+			updateRole(state.ruleForm)
+				.then(() => {
+					ElMessage({
+						message: '操作成功',
+						type: 'success',
+					});
+					closeDialog();
+					emit('updateList');
+					mittBus.emit('clearCache', 'systemUser');
 				})
-				closeDialog();
-				emit("updateList")
-			}).catch(() => { // 新增失败
-				closeDialog();
-			})
+				.catch(() => {
+					// 新增失败
+					closeDialog();
+				});
 		} else {
 			return false;
 		}
@@ -99,7 +100,7 @@ const onSubmit = () => {
 // 暴露变量
 defineExpose({
 	openDialog,
-	closeDialog
+	closeDialog,
 });
 </script>
 

src/views/system/roles/index.vue

@@ -83,6 +83,7 @@ import { useRouter } from 'vue-router';
 import { throttle } from '/@/utils/tools';
 import { getRoleListPaged, delRole } from '/@/api/system/roles';
 import { formatDate } from '/@/utils/formatTime';
+import mittBus from '/@/utils/mitt';
 // 引入组件
 const AddRole = defineAsyncComponent(() => import('/@/views/system/roles/component/addRole.vue'));
 const EditRole = defineAsyncComponent(() => import('/@/views/system/roles/component/editRole.vue'));
@@ -188,6 +189,7 @@ const onRowDel = (row: any) => {
 			delRole(row.id).then(() => {
 				ElMessage.success('删除成功');
 				handleQuery();
+				mittBus.emit('clearCache', 'systemUser');
 			});
 		})
 		.catch(() => {});