From 2f268ca8f43d98687ffd809e2c1d140d29033bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=96=87=E5=BD=AC?= Date: Thu, 1 Oct 2020 00:24:14 +0800 Subject: [PATCH] fix: fix form,transition,build bug --- src/App.vue | 1 - src/components/Form/src/BasicForm.vue | 6 +- src/components/Form/src/FormItem.tsx | 9 +- src/components/Tree/src/BasicTree.tsx | 1 + src/enums/eventBusEnum.ts | 1 + src/hooks/event/useEventHub.ts | 11 + src/layouts/default/LayoutBreadcrumb.tsx | 2 +- src/layouts/default/LayoutHeader.tsx | 2 +- src/router/guard/pageLoadingGuard.ts | 9 +- src/router/routes/modules/demo/exception.ts | 5 + src/router/types.d.ts | 3 + src/store/modules/permission.ts | 6 +- src/utils/eventHub.ts | 36 + src/views/demo/form/RefForm.vue | 1 + src/views/sys/error-log/DetailModal.vue | 30 - src/views/sys/error-log/data.tsx | 66 - src/views/sys/error-log/index.vue | 108 - src/views/sys/iframe/index.vue | 4 +- vite.config.ts | 6 +- yarn.lock | 7235 +++++++++++++++++++ 20 files changed, 7315 insertions(+), 227 deletions(-) create mode 100644 src/enums/eventBusEnum.ts create mode 100644 src/hooks/event/useEventHub.ts create mode 100644 src/utils/eventHub.ts delete mode 100644 src/views/sys/error-log/DetailModal.vue delete mode 100644 src/views/sys/error-log/data.tsx delete mode 100644 src/views/sys/error-log/index.vue create mode 100644 yarn.lock diff --git a/src/App.vue b/src/App.vue index 617aa4c1..74625242 100644 --- a/src/App.vue +++ b/src/App.vue @@ -30,7 +30,6 @@ createBreakpointListen(); const { renderEmpty, transformCellText } = useConfigProvider(); const { on: lockOn } = useLockPage(); - return { renderEmpty, transformCellText, diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index fabb1036..11c7d071 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -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 } diff --git a/src/components/Form/src/FormItem.tsx b/src/components/Form/src/FormItem.tsx index 04321e55..2f6bff2a 100644 --- a/src/components/Form/src/FormItem.tsx +++ b/src/components/Form/src/FormItem.tsx @@ -189,14 +189,13 @@ export default defineComponent({ const bindValue = { [isCheck ? 'checked' : 'value']: (props.formModel as any)[field], }; + if (!renderComponentContent) { + return ; + } return ( {{ - ...(renderComponentContent - ? renderComponentContent(unref(getValuesRef)) - : { - default: () => '', - }), + ...renderComponentContent(unref(getValuesRef)), }} ); diff --git a/src/components/Tree/src/BasicTree.tsx b/src/components/Tree/src/BasicTree.tsx index 10b1b113..ac8ccc51 100644 --- a/src/components/Tree/src/BasicTree.tsx +++ b/src/components/Tree/src/BasicTree.tsx @@ -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); diff --git a/src/enums/eventBusEnum.ts b/src/enums/eventBusEnum.ts new file mode 100644 index 00000000..b02078c0 --- /dev/null +++ b/src/enums/eventBusEnum.ts @@ -0,0 +1 @@ +export const MENU_DRAG_STATE = 'MENU_DRAG_STATE'; diff --git a/src/hooks/event/useEventHub.ts b/src/hooks/event/useEventHub.ts new file mode 100644 index 00000000..45af4c0e --- /dev/null +++ b/src/hooks/event/useEventHub.ts @@ -0,0 +1,11 @@ +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; +} diff --git a/src/layouts/default/LayoutBreadcrumb.tsx b/src/layouts/default/LayoutBreadcrumb.tsx index 302fb79a..0a07cf29 100644 --- a/src/layouts/default/LayoutBreadcrumb.tsx +++ b/src/layouts/default/LayoutBreadcrumb.tsx @@ -65,7 +65,7 @@ export default defineComponent({ return () => ( <> - + {() => ( <> diff --git a/src/layouts/default/LayoutHeader.tsx b/src/layouts/default/LayoutHeader.tsx index 44ced55b..9356871f 100644 --- a/src/layouts/default/LayoutHeader.tsx +++ b/src/layouts/default/LayoutHeader.tsx @@ -68,7 +68,7 @@ export default defineComponent({ {showLogo && !isSidebarType && } {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && ( - + )} {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && (
diff --git a/src/router/guard/pageLoadingGuard.ts b/src/router/guard/pageLoadingGuard.ts index 805f9c9c..03d28519 100644 --- a/src/router/guard/pageLoadingGuard.ts +++ b/src/router/guard/pageLoadingGuard.ts @@ -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; }); } diff --git a/src/router/routes/modules/demo/exception.ts b/src/router/routes/modules/demo/exception.ts index 48718b15..e95f2cdf 100644 --- a/src/router/routes/modules/demo/exception.ts +++ b/src/router/routes/modules/demo/exception.ts @@ -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, }, }, ], diff --git a/src/router/types.d.ts b/src/router/types.d.ts index 7bf31239..40e02bf9 100644 --- a/src/router/types.d.ts +++ b/src/router/types.d.ts @@ -26,6 +26,9 @@ export interface RouteMeta { // disabled redirect disabledRedirect?: boolean; + + // close loading + afterCloseLoading?: boolean; } export interface AppRouteRecordRaw extends Omit { diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index cc3a589a..e05bae3f 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -1,4 +1,4 @@ -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 '/@/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内的后台菜单获取函数注释,如果已注释可以忽略此信息!` ); // 如果确定不需要做后台动态权限,请将下面整个判断注释 diff --git a/src/utils/eventHub.ts b/src/utils/eventHub.ts new file mode 100644 index 00000000..006dcfd0 --- /dev/null +++ b/src/utils/eventHub.ts @@ -0,0 +1,36 @@ +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; diff --git a/src/views/demo/form/RefForm.vue b/src/views/demo/form/RefForm.vue index 77ef138a..e4fc0978 100644 --- a/src/views/demo/form/RefForm.vue +++ b/src/views/demo/form/RefForm.vue @@ -58,6 +58,7 @@ diff --git a/src/views/sys/error-log/DetailModal.vue b/src/views/sys/error-log/DetailModal.vue deleted file mode 100644 index 59df5fe8..00000000 --- a/src/views/sys/error-log/DetailModal.vue +++ /dev/null @@ -1,30 +0,0 @@ - diff --git a/src/views/sys/error-log/data.tsx b/src/views/sys/error-log/data.tsx deleted file mode 100644 index 3cd2cef8..00000000 --- a/src/views/sys/error-log/data.tsx +++ /dev/null @@ -1,66 +0,0 @@ -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 {text}; - }, - }, - { - 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, - }; - }); -} diff --git a/src/views/sys/error-log/index.vue b/src/views/sys/error-log/index.vue deleted file mode 100644 index 2685b395..00000000 --- a/src/views/sys/error-log/index.vue +++ /dev/null @@ -1,108 +0,0 @@ - - diff --git a/src/views/sys/iframe/index.vue b/src/views/sys/iframe/index.vue index 8298a56a..f7da201c 100644 --- a/src/views/sys/iframe/index.vue +++ b/src/views/sys/iframe/index.vue @@ -1,7 +1,6 @@