fix: 如果新建的页面已填写内容，在离开当前页面时添加确认离开的弹窗

src/dashboard-front/package.json

@@ -25,7 +25,7 @@
     "@blueking/bkui-form": "1.0.0-beta.5",
     "@blueking/notice-component": "^2.0.2",
     "art-template": "^4.13.2",
-    "bkui-vue": "1.0.3-beta.11",
+    "bkui-vue": "1.0.3-beta.20",
     "connect-history-api-fallback": "^2.0.0",
     "cookie": "^0.5.0",
     "cookie-parser": "^1.4.5",

src/dashboard-front/src/app.vue

@@ -20,7 +20,9 @@ import { useUser } from '@/store';
 import { getUser, getFeatureFlags } from '@/http';
 import { Message } from 'bkui-vue';
 import { ILoginData } from '@/common/auth';
+import { useSidebar } from '@/hooks';
 
+const { initSidebarFormData, isSidebarClosed } = useSidebar();
 const { t } = useI18n();
 const router = useRouter();
 const route = useRoute();
@@ -35,6 +37,7 @@ const user = useUser();
 const showNoticeAlert = ref(true);
 const enableShowNotice = ref(false);
 const noticeApi = ref(`${BK_DASHBOARD_URL}/notice/`);
+const curLeavePageData = ref({});
 
 // getUser()
 //   .then((data) => {
@@ -189,7 +192,21 @@ watch(
 
 const isExternalLink  = (url?: string) => /^https?:\/\//.test(url);
 
-const handleToPage = (routeName: string, index: number, link: string) => {
+const handleToPage = async (routeName: string, index: number, link: string) => {
+  let result = true;
+  console.log(curLeavePageData.value);
+  if (Object.keys(curLeavePageData.value).length > 0) {
+    result = await isSidebarClosed(JSON.stringify(curLeavePageData.value)) as boolean;
+    if (result) {
+      getRouteData(routeName, index, link);
+    }
+  } else {
+    getRouteData(routeName, index, link);
+  }
+};
+
+const getRouteData = (routeName: string, index: number, link: string) => {
+  curLeavePageData.value = {};
   activeIndex.value = index;
   // 常用工具
   if (!!link) {
@@ -217,6 +234,11 @@ const goPage = (routeName: string) => {
 };
 
 onMounted(() => {
+  // 处理其他页面离开页面前是否会出现提示框的判断
+  mitt.on('on-leave-page-change', (payload: Record<string, any>) => {
+    curLeavePageData.value = payload;
+    initSidebarFormData(payload);
+  });
   mitt.on('show-login-modal', (payload: ILoginData) => {
     authRef.value.showLoginModal(payload);
   });
@@ -232,7 +254,6 @@ onBeforeMount(() => {
   mitt.off('show-login-modal');
   mitt.off('close-login-modal');
 });
-
 </script>
 
 <template>

src/dashboard-front/src/components/language-toggle.vue

@@ -20,32 +20,50 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import jsCookie from 'js-cookie';
-
 import { jsonpRequest } from '@/common/util';
+import { useSidebar } from '@/hooks';
+import mitt from '@/common/event-bus';
 
+const curLeavePageData = ref({});
+const { initSidebarFormData, isSidebarClosed } = useSidebar();
 const { locale } = useI18n();
 const router = useRouter();
 
 const toggleLanguage = async (idx: string) => {
-  const targetLanguage = idx === 'english' ? 'en' : 'zh-cn';
-  const res: any = await jsonpRequest(
-    `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fe_update_user_language/`,
-    {
-      language: targetLanguage,
-    },
-    'languageToggle',
-  );
-  if (res.code === 0) {
-    jsCookie.set('blueking_language', targetLanguage, {
-      domain: window.BK_DOMAIN,
-      path: '/',
-    });
-    router.go(0);
+  let result = true;
+  if (Object.keys(curLeavePageData.value).length > 0) {
+    result = await isSidebarClosed(JSON.stringify(curLeavePageData.value)) as boolean;
+  }
+  if (result) {
+    curLeavePageData.value = {};
+    const targetLanguage = idx === 'english' ? 'en' : 'zh-cn';
+    const res: any = await jsonpRequest(
+      `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fe_update_user_language/`,
+      {
+        language: targetLanguage,
+      },
+      'languageToggle',
+    );
+    if (res.code === 0) {
+      jsCookie.set('blueking_language', targetLanguage, {
+        domain: window.BK_DOMAIN,
+        path: '/',
+      });
+      router.go(0);
+    }
   }
 };
+
+onMounted(() => {
+  mitt.on('on-leave-page-change', (payload: Record<string, any>) => {
+    curLeavePageData.value = payload;
+    initSidebarFormData(payload);
+  });
+});
 </script>
 
 <style lang="scss" scoped>

src/dashboard-front/src/hooks/sidebar.ts

@@ -30,6 +30,7 @@ export function useSidebar() {
           title: t('确认离开当前页？'),
           subTitle: t('离开将会导致未保存信息丢失'),
           confirmText: t('离开'),
+          cancelText: t('取消'),
           onConfirm() {
             resolve(true);
             // isBackDialogShow.value = false;

src/dashboard-front/src/language/lang.ts

@@ -1394,6 +1394,7 @@ const lang: ILANG = {
   '变量管理': ['VariableManage'],
   '下架环境': ['Unpublish Stage'],
   '版本列表': ['VersionList'],
+  '请输入网关名称': ['Please enter gateway name'],
   '': [''],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })

src/dashboard-front/src/store/user.ts

@@ -17,7 +17,6 @@ export const useUser = defineStore('user', {
       this.user = user;
     },
     setFeatureFlags(data: IFeatureFlags) {
-      console.log(data, '调用了配置接口');
       this.featureFlags = data;
     },
   },

src/dashboard-front/src/views/main.vue

@@ -36,7 +36,10 @@
                     </bk-badge>
                   </template>
                   <template v-for="child in menu.children">
-                    <bk-menu-item v-if="child.enabled" :key="child.name" @click="handleGoPage(child.name, apigwId)">
+                    <bk-menu-item
+                      v-if="child.enabled"
+                      :key="child.name"
+                      @click.stop="handleGoPage(child.name, apigwId, 'menu')">
                       {{ child.title }}
                       <bk-badge
                         :count="permission.count"
@@ -53,7 +56,8 @@
               <template v-else>
                 <bk-menu-item
                   :key="menu.name"
-                  @click="handleGoPage(menu.name, apigwId)">
+                  @click.stop="handleGoPage(menu.name, apigwId, 'menu')"
+                >
                   <template #icon>
                     <i :class="['icon apigateway-icon', `icon-ag-${menu.icon}`]"></i>
                   </template>
@@ -66,9 +70,11 @@
       </template>
       <template #side-header>
         <bk-select
-          class="header-select" filterable
+          ref="apigwSelect"
+          class="header-select"
+          filterable
           v-model="apigwId"
-          @change="handleGoPage(activeMenuKey, apigwId)"
+          @change="handleGoPage(activeMenuKey, apigwId, 'select')"
           :clearable="false">
           <bk-option
             v-for="item in gatewaysList" :key="item.id" :id="item.id" :name="item.name"
@@ -98,16 +104,20 @@
 import { ref, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { createMenuData } from '@/common/menu';
-import { useGetApiList } from '@/hooks';
+import { useGetApiList, useSidebar } from '@/hooks';
 import { useCommon, usePermission } from '@/store';
 import { getPermissionApplyList, getGatewaysDetail } from '@/http';
+import mitt from '@/common/event-bus';
+import { cloneDeep } from 'lodash';
 
+const { initSidebarFormData, isSidebarClosed } = useSidebar();
 const route = useRoute();
 const router = useRouter();
 // 全局公共字段存储
 const common = useCommon();
 const permission = usePermission();
 const filterData = ref({ name: '' });
+const apigwSelect = ref();
 // 获取网关数据方法
 const {
   getGatewaysListData,
@@ -120,9 +130,14 @@ const openedKeys = ref<string[]>([]);
 
 // 当前网关Id
 const apigwId = ref(0);
+const apigwIdBack = ref(0);
 
 // 页面header名
 const headerTitle = ref('');
+
+// 当前离开页面的数据
+const curLeavePageData = ref({});
+
 const handleCollapse = (v: boolean) => {
   collapse.value = !v;
 };
@@ -148,6 +163,7 @@ watch(
   (val: any) => {
     activeMenuKey.value = val.meta.matchRoute;
     apigwId.value = Number(val.params.id);
+    apigwIdBack.value = cloneDeep(apigwId.value);
     headerTitle.value = val.meta.title;
     // 设置全局网关id
     common.setApigwId(apigwId.value);
@@ -178,7 +194,7 @@ watch(
 );
 
 // 获取权限审批的数量
-const getPermiList = async () => {
+const getPermList = async () => {
   try {
     const res = await getPermissionApplyList(apigwId.value, { offset: 0, limit: 10 });
     permission.setCount(res.count);
@@ -187,29 +203,50 @@ const getPermiList = async () => {
   }
 };
 
-onMounted(async () => {
-  gatewaysList.value = await getGatewaysListData();
-  console.log('gatewaysList', gatewaysList);
-  // 初始化设置一次
-  handleSetApigwName();
-  getPermiList();
-});
+const handleGoPage = async (routeName: string, id?: number, type?: string) => {
+  console.log(type);
+  let result = true;
+  if (Object.keys(curLeavePageData.value).length > 0) {
+    result = await isSidebarClosed(JSON.stringify(curLeavePageData.value)) as boolean;
+    if (result) {
+      getRouteData(routeName, id);
+      // apigwId.value = apigwIdBack.value;
+    }
+  } else {
+    getRouteData(routeName, id);
+  }
+};
 
-const handleGoPage = (routeName: string, apigwId?: number) => {
-  common.setApigwId(apigwId);
+const getRouteData = (routeName: string, id?: number) => {
+  curLeavePageData.value = {};
+  common.setApigwId(id);
   router.push({
     name: routeName,
     params: {
-      id: apigwId,
+      id,
     },
   });
-  getPermiList();
+  getPermList();
 };
 
 const handleBack = () => {
   router.back();
 };
+
+onMounted(async () => {
+  // 处理其他页面离开页面前是否会出现提示框的判断
+  mitt.on('on-leave-page-change', (payload: Record<string, any>) => {
+    curLeavePageData.value = payload;
+    initSidebarFormData(payload);
+  });
+  gatewaysList.value = await getGatewaysListData();
+  console.log('gatewaysList', gatewaysList);
+  // 初始化设置一次
+  handleSetApigwName();
+  getPermList();
+});
 </script>
+
 <style lang="scss" scoped>
 .navigation-main {
   height: calc(100vh - 52px);

src/dashboard-front/src/views/resource/setting/edit.vue

@@ -61,7 +61,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import mitt from '@/common/event-bus';
+import { ref, computed, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import BaseInfo from './comps/base-info.vue';
 import FrontConfig from './comps/front-config.vue';
@@ -71,7 +72,9 @@ import { useCommon } from '@/store';
 import { createResources, getResourceDetailData, updateResources } from '@/http';
 import { Message } from 'bkui-vue';
 import { AngleUpFill, RightShape } from 'bkui-vue/lib/icon';
+import { useSidebar } from '@/hooks';
 
+const { initSidebarFormData, isSidebarClosed } = useSidebar();
 const { t } = useI18n();
 const router = useRouter();
 const route = useRoute();
@@ -87,16 +90,18 @@ const backConfigRef = ref(null);
 const submitLoading = ref(false);
 const resourceId = ref<any>(0);
 const resourceDetail = ref<any>({});
+// 获取初始化表单数据做对比
+const formDataBack = ref({});
 
 const isClone = computed(() => {
   return route.name === 'apigwResourceClone';
 });
 
-const init = () => {
+const init = async () => {
   if (route.params.resourceId) {
     resourceId.value = route.params.resourceId;
     // 获取资源详情
-    getResourceDetails();
+    await getResourceDetails();
   }
 };
 const getResourceDetails = async () => {
@@ -143,11 +148,30 @@ const handleSubmit = async () => {
 };
 
 // 取消
-const handleCancel = () => {
-  router.back();
+const handleCancel = async () => {
+  const params = {
+    baseFormData: baseInfoRef.value?.formData,
+    frontFormData: frontConfigRef.value.frontConfigData,
+    backFormData: backConfigRef.value.backConfigData,
+  };
+  const result = await isSidebarClosed(JSON.stringify(params));
+  if (result) {
+    router.back();
+  }
 };
 
-init();
+onMounted(async () => {
+  await init();
+  formDataBack.value = {
+    baseFormData: baseInfoRef.value?.formData,
+    frontFormData: frontConfigRef.value?.frontConfigData,
+    backFormData: backConfigRef.value?.backConfigData,
+  };
+  mitt.emit('on-leave-page-change', formDataBack.value);
+  nextTick(() => {
+    initSidebarFormData(formDataBack.value);
+  });
+});
 </script>
 <style lang="scss" scoped>
   .edit-container {