fix: fix form,transition,build bug

陈文彬
1 parent 351f60a8
Showing 19 changed files with 80 additions and 227 deletions
src/App.vue
src/components/Form/src/BasicForm.vue
src/components/Form/src/FormItem.tsx
src/components/Tree/src/BasicTree.tsx
src/enums/eventBusEnum.ts
src/hooks/event/useEventHub.ts
src/layouts/default/LayoutBreadcrumb.tsx
src/layouts/default/LayoutHeader.tsx
src/router/guard/pageLoadingGuard.ts
src/router/routes/modules/demo/exception.ts
src/router/types.d.ts
src/store/modules/permission.ts
src/utils/eventHub.ts
src/views/demo/form/RefForm.vue
src/views/sys/error-log/DetailModal.vue
src/views/sys/error-log/data.tsx
src/views/sys/error-log/index.vue
src/views/sys/iframe/index.vue
vite.config.ts
@@ -30,7 +30,6 @@
       createBreakpointListen();
       const { renderEmpty, transformCellText } = useConfigProvider();
       const { on: lockOn } = useLockPage();
-
       return {
         renderEmpty,
         transformCellText,
@@ -48,7 +48,7 @@
   import { isArray, isBoolean, isFunction, isNumber, isObject, isString } from '/@/utils/is';
   import { cloneDeep } from 'lodash-es';
   import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
-  import { useThrottle } from '/@/hooks/core/useThrottle';
+  // import { useThrottle } from '/@/hooks/core/useThrottle';
   import { useFormValues } from './hooks/useFormValues';
   import type { ColEx } from './types';
   import { NamePath } from 'ant-design-vue/types/form/form-item';
@@ -163,13 +163,13 @@
       });
       const { realWidthRef, screenEnum, screenRef } = useBreakpoint();
-      const [throttleUpdateAdvanced] = useThrottle(updateAdvanced, 30, { immediate: true });
+      // const [throttleUpdateAdvanced] = useThrottle(updateAdvanced, 30, { immediate: true });
       watch(
         [() => unref(getSchema), () => advanceState.isAdvanced, () => unref(realWidthRef)],
         () => {
           const { showAdvancedButton } = unref(getProps);
           if (showAdvancedButton) {
-            throttleUpdateAdvanced();
+            updateAdvanced();
           }
         },
         { immediate: true }
@@ -189,14 +189,13 @@ export default defineComponent({
       const bindValue = {
         [isCheck ? 'checked' : 'value']: (props.formModel as any)[field],
       };
+      if (!renderComponentContent) {
+        return <Comp {...propsData} {...on} {...bindValue} />;
+      }
       return (
         <Comp {...propsData} {...on} {...bindValue}>
           {{
-            ...(renderComponentContent
-              ? renderComponentContent(unref(getValuesRef))
-              : {
-                  default: () => '',
-                }),
+            ...renderComponentContent(unref(getValuesRef)),
           }}
         </Comp>
       );
@@ -161,6 +161,7 @@ export default defineComponent({
       const treeData: any = cloneDeep(unref(treeDataRef));
       if (!parentKey) {
         treeData[push](node);
+        treeDataRef.value = treeData;
         return;
       }
       const { key: keyField, children: childrenField } = unref(getReplaceFields);
+export const MENU_DRAG_STATE = 'MENU_DRAG_STATE';
+import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
+import {} from 'vue';
+import EventHub from '/@/utils/eventHub';
+const eventHub = new EventHub();
+export function useEventHub(): EventHub {
+  tryOnUnmounted(() => {
+    eventHub.clear();
+  });
+
+  return eventHub;
+}
@@ -65,7 +65,7 @@ export default defineComponent({
     return () => (
       <>
-        <Breadcrumb class="layout-breadcrumb">
+        <Breadcrumb class="layout-breadcrumb flex-grow">
           {() => (
             <>
               <TransitionGroup name="breadcrumb">
@@ -68,7 +68,7 @@ export default defineComponent({
                 {showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />}
                 {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
-                  <LayoutBreadcrumb class="flex-grow " />
+                  <LayoutBreadcrumb />
                 )}
                 {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && (
                   <div class={[`layout-header__menu flex-grow `, `justify-${topMenuAlign}`]}>
@@ -28,12 +28,15 @@ export function createPageLoadingGuard(router: Router) {
     }
     return true;
   });
-  router.afterEach(async () => {
+  router.afterEach(async (to) => {
     const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
-    if ((!openRouterTransition && openPageLoading) || isFirstLoad) {
-      appStore.commitPageLoadingState(false);
+    if ((!openRouterTransition && openPageLoading) || isFirstLoad || to.meta.afterCloseLoading) {
+      setTimeout(() => {
+        appStore.commitPageLoadingState(false);
+      }, 110);
       isFirstLoad = false;
     }
+
     return true;
   });
 }
@@ -27,6 +27,7 @@ export default {
       },
       meta: {
         title: '404',
+        afterCloseLoading: true,
       },
     },
     {
@@ -38,6 +39,7 @@ export default {
       },
       meta: {
         title: '500',
+        afterCloseLoading: true,
       },
     },
     {
@@ -49,6 +51,7 @@ export default {
       },
       meta: {
         title: '网络错误',
+        afterCloseLoading: true,
       },
     },
     {
@@ -60,6 +63,7 @@ export default {
       },
       meta: {
         title: '页面超时',
+        afterCloseLoading: true,
       },
     },
     {
@@ -71,6 +75,7 @@ export default {
       },
       meta: {
         title: '无数据',
+        afterCloseLoading: true,
       },
     },
   ],
@@ -26,6 +26,9 @@ export interface RouteMeta {
   // disabled redirect
   disabledRedirect?: boolean;
+
+  // close loading
+  afterCloseLoading?: boolean;
 }
 export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
-import { REDIRECT_ROUTE } from './../../router/constant';
+import { REDIRECT_ROUTE } from '/@/router/constant';
 import type { AppRouteRecordRaw, Menu } from '/@/router/types';
 import store from '/@/store/index';
 import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper';
@@ -19,7 +19,7 @@ import { genRouteModule, transformObjToRoute } from &#39;/@/utils/helper/routeHelper
 import { transformRouteToMenu } from '/@/utils/helper/menuHelper';
 import { useMessage } from '/@/hooks/web/useMessage';
-
+import { warn } from 'vue';
 const { createMessage } = useMessage();
 const NAME = 'permission';
 hotModuleUnregisterModule(NAME);
@@ -107,7 +107,7 @@ class Permission extends VuexModule {
       });
       // this.commitRoutesState(routes);
       // Background permissions
-      console.warn(
+      warn(
         `当前权限模式为:${PermissionModeEnum.ROLE},请将src/store/modules/permission.ts内的后台菜单获取函数注释,如果已注释可以忽略此信息!`
       );
       //  如果确定不需要做后台动态权限,请将下面整个判断注释
+class EventHub {
+  private cache: { [key: string]: Array<(data: any) => void> } = {};
+  on(eventName: string, fn: (data: any) => void) {
+    this.cache[eventName] = this.cache[eventName] || [];
+    this.cache[eventName].push(fn);
+  }
+
+  once(eventName: string, fn: (data: any) => void) {
+    const decor = (...args: any[]) => {
+      fn && fn.apply(this, args);
+      this.off(eventName, decor);
+    };
+    this.on(eventName, decor);
+    return this;
+  }
+
+  emit(eventName: string, data?: any) {
+    if (this.cache[eventName] === undefined) return;
+    console.log('======================');
+    console.log(this.cache, eventName);
+    console.log('======================');
+    this.cache[eventName].forEach((fn) => fn(data));
+  }
+  off(eventName: string, fn: (data: any) => void) {
+    if (this.cache[eventName] === undefined || this.cache[eventName].length === 0) return;
+    const i = this.cache[eventName].indexOf(fn);
+    if (i === -1) return;
+    this.cache[eventName].splice(i, 1);
+  }
+
+  clear() {
+    this.cache = {};
+  }
+}
+
+export default EventHub;
@@ -58,6 +58,7 @@
       <BasicForm
         :schemas="schemas"
         ref="formElRef"
+        :labelWidth="100"
         @submit="handleSubmit"
         :actionColOptions="{ span: 24 }"
       />
-<script lang="tsx">
-  import { defineComponent, PropOptions } from 'compatible-vue';
-  import { BasicModal } from '@/components/modal/index';
-  import { ErrorInfo } from '@/store/modules/error';
-  import { Description, useDescription } from '@/components/description/index';
-  import { getDescSchema } from './data';
-
-  export default defineComponent({
-    name: 'ErrorLogDetailModal',
-    props: {
-      info: {
-        type: Object,
-        default: null,
-      } as PropOptions<ErrorInfo>,
-    },
-    setup(props, { listeners }) {
-      const [register] = useDescription({
-        column: 2,
-        schema: getDescSchema(),
-      });
-      return () => {
-        return (
-          <BasicModal width={800} title="错误详情" on={listeners}>
-            <Description data={props.info} onRegister={register} />
-          </BasicModal>
-        );
-      };
-    },
-  });
-</script>
-import { Tag } from 'ant-design-vue';
-import { BasicColumn } from '@/components/table/index';
-import { ErrorTypeEnum } from '@/store/modules/error';
-import { DescItem } from '@/components/description/index';
-
-export function getColumns(): BasicColumn[] {
-  return [
-    {
-      dataIndex: 'type',
-      title: '类型',
-      width: 80,
-      customRender: (text: string) => {
-        const color =
-          text === ErrorTypeEnum.VUE
-            ? 'green'
-            : text === ErrorTypeEnum.RESOURCE
-            ? 'cyan'
-            : text === ErrorTypeEnum.PROMISE
-            ? 'blue'
-            : ErrorTypeEnum.AJAX
-            ? 'red'
-            : 'purple';
-        return <Tag color={color}>{text}</Tag>;
-      },
-    },
-    {
-      dataIndex: 'url',
-      title: '地址',
-      width: 200,
-    },
-    {
-      dataIndex: 'time',
-      title: '时间',
-      width: 160,
-    },
-    {
-      dataIndex: 'file',
-      title: '文件',
-      width: 200,
-    },
-    {
-      dataIndex: 'name',
-      title: 'Name',
-      width: 200,
-    },
-    {
-      dataIndex: 'message',
-      title: '错误信息',
-      width: 300,
-    },
-    {
-      dataIndex: 'stack',
-      title: 'stack信息',
-      width: 300,
-    },
-  ];
-}
-
-export function getDescSchema(): DescItem[] {
-  return getColumns().map((column) => {
-    return {
-      field: column.dataIndex!,
-      label: column.title,
-    };
-  });
-}
-<script lang="tsx">
-  import { defineComponent, watch, ref, unref } from 'compatible-vue';
-
-  import DetailModal from './DetailModal.vue';
-  import { useModal } from '@/components/modal/index';
-
-  import { useDesign } from '@/hooks/core/useDesign';
-
-  import { BasicTable, useTable } from '@/components/table/index';
-
-  import { errorStore, ErrorInfo } from '@/store/modules/error';
-
-  import { fireErrorApi } from '@/api/demo/error';
-
-  import { getColumns } from './data';
-
-  const { prefixCls } = useDesign('error-handle');
-
-  export default defineComponent({
-    name: 'ErrorHandler',
-    setup() {
-      const rowInfoRef = ref<ErrorInfo>();
-      const imgListRef = ref<string[]>([]);
-      const [register, { setTableData }] = useTable({
-        titleHelpMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效！',
-        title: '错误日志列表',
-        columns: getColumns(),
-        actionColumn: {
-          width: 80,
-          title: '操作',
-          dataIndex: 'action',
-          customRender: (text: string, recoed: ErrorInfo) => {
-            return (
-              <a-button type="link" size="small" onClick={handleDetail.bind(null, recoed)}>
-                详情
-              </a-button>
-            );
-          },
-        },
-      });
-
-      const [registerModal, { openModal }] = useModal();
-      watch(
-        () => errorStore.getErrorInfoState,
-        (list: any[]) => {
-          setTableData(list);
-        },
-        {
-          immediate: true,
-        }
-      );
-
-      // 查看详情
-      function handleDetail(row: ErrorInfo) {
-        rowInfoRef.value = row;
-        openModal({
-          visible: true,
-        });
-      }
-
-      function fireVueError() {
-        throw new Error('fire vue error!');
-      }
-
-      function fireResourceError() {
-        imgListRef.value.push(`${new Date().getTime()}.png`);
-      }
-
-      async function fireAjaxError() {
-        await fireErrorApi();
-      }
-
-      return () => (
-        <div class={[prefixCls, 'p-4']}>
-          {unref(imgListRef).map((src) => {
-            return <img src={src} key={src} class="hidden" />;
-          })}
-
-          <DetailModal info={unref(rowInfoRef)} onRegister={registerModal} />
-
-          <BasicTable onRegister={register} class={`${prefixCls}-table`}>
-            <template slot="toolbar">
-              <a-button onClick={fireVueError} type="primary">
-                点击触发vue错误
-              </a-button>
-              <a-button onClick={fireResourceError} type="primary">
-                点击触发resource错误
-              </a-button>
-              <a-button onClick={fireAjaxError} type="primary">
-                点击触发ajax错误
-              </a-button>
-            </template>
-          </BasicTable>
-        </div>
-      );
-    },
-  });
-</script>
-<style scoped lang="less">
-  @import (reference) '~@design';
-  @prefix-cls: ~'@{namespace}-error-handle';
-
-  .@{prefix-cls} {
-    &-table {
-      background: #fff;
-    }
-  }
-</style>
 <template>
   <div class="iframe-page" :style="getWrapStyle">
     <Spin :spinning="loading" size="large" :style="getWrapStyle">
-      <div class="iframe-page__mask" v-show="menuStore.getDragStartState" />
       <iframe :src="frameSrc" class="iframe-page__main" ref="frameRef" />
     </Spin>
   </div>
@@ -12,7 +11,7 @@
   import { getViewportOffset } from '/@/utils/domUtils';
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
-  import { menuStore } from '/@/store/modules/menu';
+
   export default defineComponent({
     name: 'IFrame',
     components: { Spin },
@@ -76,7 +75,6 @@
         }),
         loading: loadingRef,
         frameRef,
-        menuStore,
       };
     },
   });
@@ -51,7 +51,7 @@ const viteConfig: UserConfig = {
    */
   port: 3100,
   /**
-   * 运行自动打开浏览器
+   * 运行自动打开浏览器·
    * @default 'false'
    */
   open: false,
@@ -88,9 +88,9 @@ const viteConfig: UserConfig = {
   assetsInlineLimit: 4096,
   /**
    * esbuild转换目标。
-   * @default 'es2020'
+   * @default 'es2019'
    */
-  esbuildTarget: 'es2020',
+  esbuildTarget: 'es2019',
   // 别名
   alias: {