From e1e3d04629569712c12e54772a20d5538d56437f Mon Sep 17 00:00:00 2001 From: JEECG <445654970@qq.com> Date: Mon, 18 Mar 2024 10:44:12 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E3=80=91=E5=A4=A7=E7=BB=84=E4=BB=B6=E6=94=B9=E6=88=90=E6=8C=89?= =?UTF-8?q?=E9=9C=80=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Form/src/componentMap.ts | 45 ++++++++++++++----- src/components/JVxeCustom/index.ts | 8 +++- src/components/jeecg/JVxeTable/index.ts | 2 +- .../JVxeTable/src/utils/registerUtils.ts | 13 ++++++ src/components/registerGlobComp.ts | 15 +++++-- src/settings/registerThirdComp.ts | 23 ++++++++-- .../message/components/SysMessageModal.vue | 24 ++++++++-- vite.config.ts | 9 ++-- 8 files changed, 109 insertions(+), 30 deletions(-) diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index fcfb645..8c859ec 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -1,6 +1,14 @@ +/** + * 目前实现了异步加载的组件清单 ： + * JAreaLinkage + * JEditor + * JMarkdownEditor + * JCodeEditor + * JEasyCron + */ import type { Component } from 'vue'; import type { ComponentType } from './types/index'; - +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; /** * Component list, register here to setting it in the form */ @@ -29,7 +37,7 @@ import { StrengthMeter } from '/@/components/StrengthMeter'; import { IconPicker } from '/@/components/Icon'; import { CountdownInput } from '/@/components/CountDown'; //自定义组件 -import JAreaLinkage from './jeecg/components/JAreaLinkage.vue'; +// import JAreaLinkage from './jeecg/components/JAreaLinkage.vue'; import JSelectUser from './jeecg/components/JSelectUser.vue'; import JSelectPosition from './jeecg/components/JSelectPosition.vue'; import JSelectRole from './jeecg/components/JSelectRole.vue'; @@ -37,10 +45,10 @@ import JImageUpload from './jeecg/components/JImageUpload.vue'; import JDictSelectTag from './jeecg/components/JDictSelectTag.vue'; import JSelectDept from './jeecg/components/JSelectDept.vue'; import JAreaSelect from './jeecg/components/JAreaSelect.vue'; -import JEditor from './jeecg/components/JEditor.vue'; -import JMarkdownEditor from './jeecg/components/JMarkdownEditor.vue'; +// import JEditor from './jeecg/components/JEditor.vue'; +// import JMarkdownEditor from './jeecg/components/JMarkdownEditor.vue'; import JSelectInput from './jeecg/components/JSelectInput.vue'; -import JCodeEditor from './jeecg/components/JCodeEditor.vue'; +// import JCodeEditor from './jeecg/components/JCodeEditor.vue'; import JCategorySelect from './jeecg/components/JCategorySelect.vue'; import JSelectMultiple from './jeecg/components/JSelectMultiple.vue'; import JPopup from './jeecg/components/JPopup.vue'; @@ -50,7 +58,7 @@ import JPopupDict from './jeecg/components/JPopupDict.vue'; import JSwitch from './jeecg/components/JSwitch.vue'; import JTreeDict from './jeecg/components/JTreeDict.vue'; import JInputPop from './jeecg/components/JInputPop.vue'; -import { JEasyCron } from './jeecg/components/JEasyCron'; +// import { JEasyCron } from './jeecg/components/JEasyCron'; import JCheckbox from './jeecg/components/JCheckbox.vue'; import JInput from './jeecg/components/JInput.vue'; import JTreeSelect from './jeecg/components/JTreeSelect.vue'; @@ -104,7 +112,10 @@ componentMap.set('Upload', BasicUpload); componentMap.set('Divider', Divider); //注册自定义组件 -componentMap.set('JAreaLinkage', JAreaLinkage); +componentMap.set( + 'JAreaLinkage', + createAsyncComponent(() => import('./jeecg/components/JAreaLinkage.vue')) +); componentMap.set('JSelectPosition', JSelectPosition); componentMap.set('JSelectUser', JSelectUser); componentMap.set('JSelectRole', JSelectRole); @@ -112,10 +123,19 @@ componentMap.set('JImageUpload', JImageUpload); componentMap.set('JDictSelectTag', JDictSelectTag); componentMap.set('JSelectDept', JSelectDept); componentMap.set('JAreaSelect', JAreaSelect); -componentMap.set('JEditor', JEditor); -componentMap.set('JMarkdownEditor', JMarkdownEditor); +componentMap.set( + 'JEditor', + createAsyncComponent(() => import('./jeecg/components/JEditor.vue')) +); +componentMap.set( + 'JMarkdownEditor', + createAsyncComponent(() => import('./jeecg/components/JMarkdownEditor.vue')) +); componentMap.set('JSelectInput', JSelectInput); -componentMap.set('JCodeEditor', JCodeEditor); +componentMap.set( + 'JCodeEditor', + createAsyncComponent(() => import('./jeecg/components/JCodeEditor.vue')) +); componentMap.set('JCategorySelect', JCategorySelect); componentMap.set('JSelectMultiple', JSelectMultiple); componentMap.set('JPopup', JPopup); @@ -125,7 +145,10 @@ componentMap.set('JPopupDict', JPopupDict); componentMap.set('JSwitch', JSwitch); componentMap.set('JTreeDict', JTreeDict); componentMap.set('JInputPop', JInputPop); -componentMap.set('JEasyCron', JEasyCron); +componentMap.set( + 'JEasyCron', + createAsyncComponent(() => import('./jeecg/components/JEasyCron/EasyCronInput.vue')) +); componentMap.set('JCheckbox', JCheckbox); componentMap.set('JInput', JInput); componentMap.set('JTreeSelect', JTreeSelect); diff --git a/src/components/JVxeCustom/index.ts b/src/components/JVxeCustom/index.ts index e2d0caa..b0d48cb 100644 --- a/src/components/JVxeCustom/index.ts +++ b/src/components/JVxeCustom/index.ts @@ -1,6 +1,7 @@ -import { registerComponent, registerAsyncComponent } from '/@/components/jeecg/JVxeTable'; +import { registerComponent, registerAsyncComponent, registerASyncComponentReal } from '/@/components/jeecg/JVxeTable'; import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types'; import { DictSearchSpanCell, DictSearchInputCell } from './src/components/JVxeSelectDictSearchCell'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export async function registerJVxeCustom() { // ----------------- ⚠ 注意事项 ⚠ ----------------- @@ -23,5 +24,8 @@ export async function registerJVxeCustom() { // 注册【部门选择】组件 await registerAsyncComponent(JVxeTypes.departSelect, import('./src/components/JVxeDepartSelectCell.vue')); // 注册【省市区选择】组件 - await registerAsyncComponent(JVxeTypes.pca, import('./src/components/JVxePcaCell.vue')); + registerASyncComponentReal( + JVxeTypes.pca, + createAsyncComponent(() => import('./src/components/JVxePcaCell.vue')) + ); } diff --git a/src/components/jeecg/JVxeTable/index.ts b/src/components/jeecg/JVxeTable/index.ts index b288fbb..6ce9d1f 100644 --- a/src/components/jeecg/JVxeTable/index.ts +++ b/src/components/jeecg/JVxeTable/index.ts @@ -1,4 +1,4 @@ export { default as JVxeTable } from './src/JVxeTable'; export { registerJVxeTable } from './src/install'; export { deleteComponent } from './src/componentMap'; -export { registerComponent, registerAsyncComponent } from './src/utils/registerUtils'; +export { registerComponent, registerAsyncComponent, registerASyncComponentReal } from './src/utils/registerUtils'; diff --git a/src/components/jeecg/JVxeTable/src/utils/registerUtils.ts b/src/components/jeecg/JVxeTable/src/utils/registerUtils.ts index 374f5a6..0203f8c 100644 --- a/src/components/jeecg/JVxeTable/src/utils/registerUtils.ts +++ b/src/components/jeecg/JVxeTable/src/utils/registerUtils.ts @@ -17,6 +17,19 @@ export function isRegistered(type: JVxeTypes | string) { return componentMap.has(type); } +/** + * 2024-03-08 + * liaozhiyang + * 异步注册vxe自定义组件 + * 【QQYUN-8241】 + * @param type + * @param promise + */ +export function registerASyncComponentReal(type: JVxeTypes, component) { + addComponent(type, component); + registerOneComponent(type); +} + /** * 注册vxe自定义组件 * diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts index 9d4025b..8ca0a11 100644 --- a/src/components/registerGlobComp.ts +++ b/src/components/registerGlobComp.ts @@ -1,8 +1,8 @@ import type { App } from 'vue'; import { Icon } from './Icon'; import AIcon from '/@/components/jeecg/AIcon.vue'; -//Tinymce富文本 -import Editor from '/@/components/Tinymce/src/Editor.vue' +// //Tinymce富文本 +// import Editor from '/@/components/Tinymce/src/Editor.vue' import { Button, JUploadButton } from './Button'; @@ -61,6 +61,7 @@ import { } from 'ant-design-vue'; const compList = [AntButton.Group, Icon, AIcon, JUploadButton]; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export function registerGlobComp(app: App) { compList.forEach((comp) => { @@ -68,7 +69,13 @@ export function registerGlobComp(app: App) { }); //仪表盘依赖Tinymce，需要提前加载（没办法按需加载了） - app.component(Editor.name, Editor); + //app.component(Editor.name, Editor); + app.component( + 'Tinymce', + createAsyncComponent(() => import('./Tinymce/src/Editor.vue'), { + loading: true, + }) + ); app.use(Select) .use(Alert) @@ -119,5 +126,5 @@ export function registerGlobComp(app: App) { .use(Cascader) .use(Rate) .use(Progress); - console.log("---初始化---， 全局注册Antd、仪表盘、流程设计器、online、流程等组件--------------") + console.log("---初始化---全局注册Antd等组件--------------") } diff --git a/src/settings/registerThirdComp.ts b/src/settings/registerThirdComp.ts index bb74e6a..a63beb1 100644 --- a/src/settings/registerThirdComp.ts +++ b/src/settings/registerThirdComp.ts @@ -2,12 +2,13 @@ import type { App } from 'vue'; import { registerJVxeTable } from '/@/components/jeecg/JVxeTable'; import { registerJVxeCustom } from '/@/components/JVxeCustom'; -// 注册全局聊天表情包 -import { Picker } from 'emoji-mart-vue-fast/src'; +// // 注册全局聊天表情包 +// import { Picker } from 'emoji-mart-vue-fast/src'; // 注册全局dayjs import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import customParseFormat from 'dayjs/plugin/customParseFormat'; +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export async function registerThirdComp(app: App) { //--------------------------------------------------------------------- @@ -17,8 +18,22 @@ export async function registerThirdComp(app: App) { await registerJVxeCustom(); //--------------------------------------------------------------------- // 注册全局聊天表情包 - app.component('Picker', Picker); - + //app.component('Picker', Picker); + app.component( + 'Picker', + createAsyncComponent(() => { + return new Promise((resolve, rejected) => { + import('emoji-mart-vue-fast/src') + .then((res) => { + const { Picker } = res; + resolve(Picker); + }) + .catch((err) => { + rejected(err); + }); + }); + }) + ); //--------------------------------------------------------------------- // 注册全局dayjs dayjs.locale('zh-cn'); diff --git a/src/views/system/message/components/SysMessageModal.vue b/src/views/system/message/components/SysMessageModal.vue index 8b56113..6170065 100644 --- a/src/views/system/message/components/SysMessageModal.vue +++ b/src/views/system/message/components/SysMessageModal.vue @@ -124,9 +124,10 @@ import { FilterOutlined, CloseOutlined, BellFilled, ExclamationOutlined, PlusOutlined } from '@ant-design/icons-vue'; import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue'; import { ref, unref, reactive, computed } from 'vue'; - import SysMessageList from './SysMessageList.vue' + // import SysMessageList from './SysMessageList.vue' import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue' import DetailModal from '/@/views/monitor/mynews/DetailModal.vue'; + import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export default { name: 'SysMessageModal', @@ -137,7 +138,7 @@ BellFilled, ExclamationOutlined, JSelectUser, - SysMessageList, + SysMessageList: createAsyncComponent(() => import('./SysMessageList.vue')), UserSelectModal, PlusOutlined, DetailModal @@ -170,7 +171,9 @@ rangeDate: searchParams.rangeDate, } if(activeKey.value == 'all'){ - allMessageRef.value.reload(params); + getRefPromise(allMessageRef).then(() => { + allMessageRef.value.reload(params); + }); }else{ starMessageRef.value.reload(params); } @@ -279,6 +282,21 @@ searchParams.fromUser = '' searchParams.realname = '' } + + function getRefPromise(componentRef) { + return new Promise((resolve) => { + (function next() { + let ref = componentRef.value; + if (ref) { + resolve(ref); + } else { + setTimeout(() => { + next(); + }, 100); + } + })(); + }); + } function clearAll(){ searchParams.fromUser=''; diff --git a/vite.config.ts b/vite.config.ts index cb32b8d..63ed8f3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -82,13 +82,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称 // manualChunks配置 (依赖包从大到小排列) manualChunks: { - 'tinymce-vendor': ['tinymce','@tinymce/tinymce-vue'], - 'echarts-vendor': ['echarts'], + // vue vue-router合并打包 + 'vue-vendor': ['vue', 'vue-router'], 'antd-vue-vendor': ['ant-design-vue','@ant-design/icons-vue','@ant-design/colors'], 'vxe-table-vendor': ['vxe-table','vxe-table-plugin-antd','xe-utils'], - 'codemirror-vendor': ['codemirror'], - 'jeecg-online-vendor': ['@jeecg/online'], - 'cron-parser-vendor': ['cron-parser'], + 'emoji-mart-vue-fast': ['emoji-mart-vue-fast'], + 'china-area-data-vendor': ['china-area-data'] }, }, },