支持局部页面刷新

src/App.vue

@@ -15,6 +15,12 @@
           @click="showMessageBoxList" placeholder="显示消息" />
       </a-layout-content>
 
+      <!-- <a-layout-content :style="{ overflow: 'auto' }">
+        <div :style="{ padding: '15px' }">
+          {{pageRefCnt}}
+        </div>
+      </a-layout-content> -->
+
       <a-layout-content :style="{ overflow: 'auto' }">
         <div :style="{ padding: '15px' }">
           <service-configuration :service-key="activeServiceKey"></service-configuration>
@@ -44,7 +50,9 @@
 
 </template>
 <script setup>
-import { onMounted, ref, h } from 'vue';
+import { onMounted, ref, h ,watch, nextTick} from 'vue';
+import { inject } from 'vue';
+
 import ApiClient from '@/utils/ApiClient';
 import ServiceConfiguration from './components/ServiceConfiguration.vue';
 import { Modal } from 'ant-design-vue';
@@ -59,6 +67,9 @@ const isSiderCollapsed = ref(false);
 const message = ref(''); // 添加一个响应式变量来存储消息
 const messageColor = ref('black'); // 添加一个响应式变量来存储消息颜色
 const messageBoxList = ref([]); // 添加一个响应式变量来存储消息列表
+const pageRefCnt = inject('pageRefCnt'); // 获取 pageRefCnt 的引用
+
+watch(() => pageRefCnt.value, onPageRefCntChange);
 
 // on mounted
 onMounted(mounted);
@@ -82,6 +93,14 @@ function actionMenuItemClick(event) {
 
 }
 
+async function onPageRefCntChange() {
+  console.log('onPageRefCntChange', pageRefCnt.value);
+  var oldServiceKey = activeServiceKey.value;
+  activeServiceKey.value = null;
+  await nextTick();
+  activeServiceKey.value = oldServiceKey;
+}
+
 // handle open change
 function handleOpenChange(keys) {
   openKeys.value = keys.length ? [keys[keys.length - 1]] : [];

src/components/ServiceConfiguration.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch ,getCurrentInstance,inject } from 'vue';
 import ApiClient from '@/utils/ApiClient';
 import ServiceConfigurationParamValueEdit from './ServiceConfigurationParamValueEdit.vue'
 import ServiceConfigurationActionLog from './ServiceConfigurationActionLog.vue'
@@ -24,6 +24,7 @@ const props = defineProps({
 const params = ref([]);
 /** @var {Object} */
 const actionLog = ref(null);
+
 // watch service key
 watch(() => props.serviceKey, handleServiceKeyChange);
 

src/components/ServiceConfigurationActions.vue

@@ -39,7 +39,7 @@
   </div>
 </template>
 <script setup>
-import { nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch, inject } from 'vue';
 import ApiClient from '@/utils/ApiClient';
 import ServiceConfigurationActionParamFile from './ServiceConfigurationActionParamFile.vue'
 const emits = defineEmits(['update:actionLog']);
@@ -51,6 +51,9 @@ const props = defineProps({
 const actions = ref([]);
 /** @var {Object} */
 const actionLog = ref(null);
+
+var pageRefCnt = inject('pageRefCnt'); // 获取 pageRefCnt 的引用
+
 // watch service key
 watch(() => props.serviceKey, handleServiceKeyChange);
 
@@ -106,7 +109,7 @@ async function actionServiceExecute(action) {
 
     if (action.key.indexOf('RefreshPage') !== -1) {
       await client.call('service-config/service-action-exec', params);
-      window.location.reload();
+      pageRefCnt.value++;
     } else {
       emits('update:actionLog', null);
       await nextTick();

src/main.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
+import { onMounted, ref, reactive,h } from 'vue';
+
 import { createWebHashHistory, createRouter } from 'vue-router'
 import App from './App.vue'
 import Antd from 'ant-design-vue';
@@ -6,15 +8,21 @@ import TestFeeder from './components/TestFeeder.vue';
 import TestTubePreProcess from './components/TestTubePreProcess.vue';
 import './style/app.css'
 
+
 const router = createRouter({
     history: createWebHashHistory(),
-    routes : [
-        {name:'feeder', path:'/feeder', component:TestFeeder},
-        {name:'tube-pre-process', path:'/tube-pre-process', component:TestTubePreProcess},
+    routes: [
+        { name: 'feeder', path: '/feeder', component: TestFeeder },
+        { name: 'tube-pre-process', path: '/tube-pre-process', component: TestTubePreProcess },
     ],
 })
 
 let app = createApp(App)
+// 创建一个全局响应式对象
+const pageRefCnt = ref(1);
+  // 使用 provide 提供全局状态
+app.provide('pageRefCnt', pageRefCnt);
+
 app.use(router);
 app.use(Antd);
 app.mount('#app')