@ditari/bsui 1.1.39 → 1.1.41

package/src/layout/Main.vue

@@ -22,7 +22,9 @@ const props = withDefaults(
     showConfig: { backBtn: "LeftOutlined" } as any
   }
 );
-
+// 注入show组件的配置文件
+// eslint-disable-next-line vue/no-setup-props-destructure
+provide("showConfig", props.showConfig);
 // 缓存store
 const store = useKeepAliveStore();
 // 缓存的names
@@ -31,8 +33,6 @@ const keepAliveNames = computed(() => store.get);
 const settingsStore = useSettingsStore();
 const { switchCollapsed } = settingsStore;
 const collapsedStatus = computed(() => settingsStore.getCollapsed);
-// 注入show组件的配置文件
-provide("showConfig", props.showConfig);
 </script>
 <template>
   <a-layout class="ditari-layout">
@@ -81,14 +81,13 @@ provide("showConfig", props.showConfig);
         class="ditari-layout-content"
         :style="{ marginLeft: collapsedStatus ? '80px' : '200px' }"
       >
-        <router-view />
-        <!--        <router-view v-slot="{ Component }">-->
-        <!--          <transition name="main" mode="out-in" appear>-->
-        <!--            <keep-alive ref="keepAliveRef" :include="keepAliveNames">-->
-        <!--              <component :is="Component" :key="$route.path" />-->
-        <!--            </keep-alive>-->
-        <!--          </transition>-->
-        <!--        </router-view>-->
+        <router-view v-slot="{ Component }">
+          <transition name="main" mode="out-in" appear>
+            <keep-alive ref="keepAliveRef" :include="keepAliveNames">
+              <component :is="Component" :key="$route.path" />
+            </keep-alive>
+          </transition>
+        </router-view>
         <slot name="micro"></slot>
       </a-layout-content>
     </a-layout>

package/src/menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, resolveComponent, watchEffect } from "vue";
+import { defineComponent, h, inject, resolveComponent, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 import { storeToRefs } from "pinia";
@@ -18,19 +18,36 @@ export default defineComponent({
     const settingsStore = useSettingsStore();
     const { getCollapsed } = storeToRefs(settingsStore) as any;
 
-    watchEffect(() => {
-      if (getCollapsed.value) {
-        // 如果菜单是收缩的状态，则不匹配激活的菜单
-        // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
-        return;
+    // watchEffect(() => {
+    //   if (getCollapsed.value) {
+    //     // 如果菜单是收缩的状态，则不匹配激活的菜单
+    //     // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
+    //     return;
+    //   }
+    //   // 会被触发两次
+    //   // 当前激活的url
+    //   const activatedUrl =
+    //     selectedMenuKeys.value.length > 0 ? selectedMenuKeys.value[0] : "";
+    //   const parentUrls = getParentUrls(list.value, activatedUrl);
+    //   openMenusKeys.value = parentUrls || [];
+    // });
+
+    watch(
+      () => selectedMenuKeys.value,
+      (newValue: any) => {
+        if (getCollapsed.value) {
+          // 如果菜单是收缩的状态，则不匹配激活的菜单
+          // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
+          return;
+        }
+        const activatedUrl = newValue.length > 0 ? newValue[0] : "";
+        const parentUrls = getParentUrls(list.value, activatedUrl);
+        openMenusKeys.value = parentUrls || [];
+      },
+      {
+        deep: true
       }
-      // 会被触发两次
-      // 当前激活的url
-      const activatedUrl =
-        selectedMenuKeys.value.length > 0 ? selectedMenuKeys.value[0] : "";
-      const parentUrls = getParentUrls(list.value, activatedUrl);
-      openMenusKeys.value = parentUrls || [];
-    });
+    );
 
     function getParentUrls(menus: any, url: any) {
       for (let i = 0; i < menus.length; i++) {

package/src/table/Table.tsx

@@ -2,11 +2,13 @@ import {
   computed,
   defineComponent,
   nextTick,
+  onBeforeUnmount,
+  onDeactivated,
   PropType,
   reactive,
   ref,
-  watch,
-  watchEffect
+  watch
+  // watchEffect
 } from "vue";
 import { Pagination, Space, Table } from "ant-design-vue";
 import { useEleHeight } from "../_utils/html";
@@ -109,10 +111,11 @@ const DXTable = defineComponent({
     paginationConfig.defaultPageSize =
       props.config?.pageOption?.defaultSize ?? paginationConfig.defaultPageSize;
 
-    watchEffect(() => {
-      const { expandedRowKeys } = props;
-      expandedKeys.value = expandedRowKeys;
-    });
+    //TODO 后续改进
+    // watchEffect(() => {
+    //   const { expandedRowKeys } = props;
+    //   expandedKeys.value = expandedRowKeys;
+    // });
 
     // 初始化表格
     const {
@@ -168,21 +171,49 @@ const DXTable = defineComponent({
         }
       };
       //监听传入的height的变化 默认组件创建的时候会执行一次
-      watchEffect(() => {
-        if (props.height !== 0) {
-          nextTick(() => {
-            if (isInit.value) {
-              playHeight(props.height);
-            } else {
-              // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
-              setTimeout(() => {
+      // watchEffect(() => {
+      //   if (props.height !== 0) {
+      //     nextTick(() => {
+      //       if (isInit.value) {
+      //         playHeight(props.height);
+      //       } else {
+      //         // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
+      //         setTimeout(() => {
+      //           playHeight(props.height);
+      //           // 如果表格头有很多列的情况下，获取到的头部高度不对，需要延迟执行获取高度方法
+      //         }, 100);
+      //       }
+      //     });
+      //   }
+      // });
+
+      let playTimeout: any = null;
+      watch(
+        () => props.height,
+        (val) => {
+          if (val !== 0) {
+            nextTick(() => {
+              if (isInit.value) {
                 playHeight(props.height);
-                // 如果表格头有很多列的情况下，获取到的头部高度不对，需要延迟执行获取高度方法
-              }, 100);
-            }
-          });
+              } else {
+                // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
+                playTimeout = setTimeout(() => {
+                  playHeight(props.height);
+                  // 如果表格头有很多列的情况下，获取到的头部高度不对，需要延迟执行获取高度方法
+                }, 100);
+              }
+            });
+          }
         }
+      );
+
+      onBeforeUnmount(() => {
+        playTimeout && clearTimeout(playTimeout);
       });
+      onDeactivated(() => {
+        playTimeout && clearTimeout(playTimeout);
+      });
+
       // 监听分页组件
       const onPageChange = (page: number, size: number) => {
         onChange ? onChange({ page: page === 0 ? 1 : page, size }) : null;
@@ -258,23 +289,45 @@ const DXTable = defineComponent({
 
       const rowSelection = ref<any>(undefined);
 
-      watchEffect(() => {
-        const { selection } = props.config;
-        localSelection = selection as any;
-        if (localSelection !== "N") {
-          rowSelection.value = {
-            selectedRowKeys,
-            onSelect,
-            onSelectAll,
-            fixed: true,
-            columnTitle: localSelection === "S" ? "选择" : null,
-            columnWidth: localSelection === "S" ? 60 : 40,
-            getCheckboxProps: getCheckboxProps
-          };
-        } else {
-          rowSelection.value = undefined;
+      // watchEffect(() => {
+      //   const { selection } = props.config;
+      //   localSelection = selection as any;
+      //   if (localSelection !== "N") {
+      //     rowSelection.value = {
+      //       selectedRowKeys,
+      //       onSelect,
+      //       onSelectAll,
+      //       fixed: true,
+      //       columnTitle: localSelection === "S" ? "选择" : null,
+      //       columnWidth: localSelection === "S" ? 60 : 40,
+      //       getCheckboxProps: getCheckboxProps
+      //     };
+      //   } else {
+      //     rowSelection.value = undefined;
+      //   }
+      // });
+      watch(
+        () => props.config.selection,
+        (val) => {
+          localSelection = val as any;
+          if (localSelection !== "N") {
+            rowSelection.value = {
+              selectedRowKeys,
+              onSelect,
+              onSelectAll,
+              fixed: true,
+              columnTitle: localSelection === "S" ? "选择" : null,
+              columnWidth: localSelection === "S" ? 60 : 40,
+              getCheckboxProps: getCheckboxProps
+            };
+          } else {
+            rowSelection.value = undefined;
+          }
+        },
+        {
+          immediate: true
         }
-      });
+      );
 
       // return {
       //   selectedRowKeys,