Compare commits
merge into: journey:master
journey:feature/bus
journey:feature/vuex
journey:master
pull from: journey:feature/bus
journey:feature/bus
journey:feature/vuex
journey:master
1 Commits
master
...
feature/bu
| Author | SHA1 | Message | Date |
|---|---|---|---|
Poised_flw
|
102beecbde |
添加bus更改方案（共享Vue方式）
|
4 years ago |
14 changed files with 288 additions and 284 deletions
-
1src/tis_app_template_kt/public/index.html
-
20src/tis_app_template_kt/sdk/tisplatform.json
-
8src/tis_app_template_kt/src/App.vue
-
3src/tis_app_template_kt/src/components/Dialog/DialogPc.vue
-
7src/tis_app_template_kt/src/components/Dialog/dialogMixins.js
-
6src/tis_app_template_kt/src/components/LeftView.vue
-
10src/tis_app_template_kt/src/components/controlMixins.js
-
19src/tis_app_template_kt/src/main.js
-
5src/tis_app_template_kt/src/pc.vue
-
430src/tis_app_template_kt/src/tis/bus.js
-
38src/tis_app_template_kt/src/tis/index.js
-
3src/tis_app_template_kt/src/tis/layouts/BackContainer.vue
-
3src/tis_app_template_kt/src/tis/layouts/DialogContainer.vue
-
5src/tis_app_template_kt/src/tis/public-path.js
@ -1,224 +1,248 @@ |
|||||
import Vue from "vue"; |
|
||||
|
import EE from 'eventemitter3' |
||||
import axios from 'axios' |
import axios from 'axios' |
||||
import {registerApps} from './scriptsLoader/index' |
import {registerApps} from './scriptsLoader/index' |
||||
|
|
||||
// temp
|
// temp
|
||||
let curBaseUrl = '' |
let curBaseUrl = '' |
||||
// 挂载vue的示例
|
|
||||
let vueInstance = null |
|
||||
// 数据机制，考虑vuex来实现
|
|
||||
const bus = new Vue({ |
|
||||
data: { |
|
||||
components: [], // components
|
|
||||
asserts: {}, |
|
||||
deviceType: "pc", |
|
||||
actives: [],//从菜单中激活的组件,
|
|
||||
layouts: [],//由自定义组件和第三方组件组成的布局组件集合
|
|
||||
widgets: [],//在应用模板内部需要加载的widgets
|
|
||||
}, |
|
||||
methods: { |
|
||||
setVueInstance(instance) { |
|
||||
vueInstance = instance |
|
||||
}, |
|
||||
|
|
||||
getDeviceType() { |
|
||||
return this.deviceType |
|
||||
}, |
|
||||
getTemplateLayouts(){ |
|
||||
return this.layouts; |
|
||||
}, |
|
||||
|
|
||||
// 传递当前所处组件的上下文环境
|
|
||||
menuStatusUpdate(){ |
|
||||
const onActives = this.getTemplateLayouts().filter(l => !l.lazy).map(c=>c.component.name || c.component); |
|
||||
const appId = '' |
|
||||
console.log('============>', appId) |
|
||||
// TODO 这里通过event-bus来实现吧，Vue实例获取不到
|
|
||||
this.$emit('TIS_TEMPLATE_MENU_ACTIVE', {appId, onActives: onActives,system:true}) |
|
||||
}, |
|
||||
async loadComponent(component) { |
|
||||
|
|
||||
const comp = this.components.find(arg => arg.component === component) || {}; |
|
||||
console.log('所有组件...', this.components,); |
|
||||
console.log('所有资源...', this.asserts); |
|
||||
console.log('当前加载组件...', component,); |
|
||||
console.log('匹配到的组件...', comp); |
|
||||
let assets = null; |
|
||||
let dependencies = []; |
|
||||
let isLib = false; |
|
||||
try { |
|
||||
const info = comp.segprefix; |
|
||||
assets = this.asserts[info]; |
|
||||
dependencies = comp.dependencies || []; |
|
||||
isLib = comp.lib; |
|
||||
} catch (e) { |
|
||||
console.error(e) |
|
||||
} |
|
||||
|
const dev = process.env.NODE_ENV === 'development'; |
||||
|
const baseUrl = dev ? process.env.BASE_URL : ""; |
||||
|
|
||||
|
let state = { |
||||
|
components: [], // components
|
||||
|
asserts: {}, |
||||
|
deviceType: "pc", |
||||
|
actives: [],//从菜单中激活的组件,
|
||||
|
layouts: [],//由自定义组件和第三方组件组成的布局组件集合
|
||||
|
widgets: [],//在应用模板内部需要加载的widgets
|
||||
|
} |
||||
|
|
||||
|
class Bus extends EE { |
||||
|
appId = '' |
||||
|
|
||||
|
getDeviceType() { |
||||
|
return state.deviceType |
||||
|
} |
||||
|
getTemplateLayouts(){ |
||||
|
return state.layouts; |
||||
|
} |
||||
|
|
||||
//等待依赖下载完毕
|
|
||||
for (const refer of dependencies) { |
|
||||
let reference = this.asserts[refer] || null; |
|
||||
await registerApps(reference, curBaseUrl); |
|
||||
} |
|
||||
return new Promise((resolve, reject) => { |
|
||||
//加载组件资源
|
|
||||
console.log('开始加载组件资源', assets, curBaseUrl) |
|
||||
registerApps(assets, curBaseUrl).then(() => { |
|
||||
if (!isLib) {//正常组件的加载流程,isLib为true代表纯js lib库的加载
|
|
||||
let startTime = new Date().getTime(); |
|
||||
const looper = setInterval(() => { |
|
||||
|
|
||||
if (Vue.component(`${component}`)) { |
|
||||
resolve(comp) |
|
||||
clearInterval(looper); |
|
||||
} else { |
|
||||
let nowTime = new Date().getTime(); |
|
||||
if (nowTime - startTime > 2000) { |
|
||||
if (!assets) { |
|
||||
reject(`[loading error:${component}]:组件资源加载失败`) |
|
||||
} else { |
|
||||
reject(`[loading error:${component}]:loading component timed out`) |
|
||||
} |
|
||||
clearInterval(looper) |
|
||||
|
// 传递当前所处组件的上下文环境
|
||||
|
menuStatusUpdate(){ |
||||
|
const onActives = this.getTemplateLayouts().filter(l => !l.lazy).map(c=>c.component.name || c.component); |
||||
|
const appId = '' |
||||
|
console.log('============>', appId) |
||||
|
// TODO 这里通过event-bus来实现吧，Vue实例获取不到
|
||||
|
this.emit('TIS_TEMPLATE_MENU_ACTIVE', {appId, onActives: onActives,system:true}) |
||||
|
} |
||||
|
async loadComponent(component) { |
||||
|
|
||||
|
const comp = state.components.find(arg => arg.component === component) || {}; |
||||
|
console.log('所有组件...', state.components,); |
||||
|
console.log('所有资源...', state.asserts); |
||||
|
console.log('当前加载组件...', component,); |
||||
|
console.log('匹配到的组件...', comp); |
||||
|
let assets = null; |
||||
|
let dependencies = []; |
||||
|
let isLib = false; |
||||
|
try { |
||||
|
const info = comp.segprefix; |
||||
|
assets = state.asserts[info]; |
||||
|
dependencies = comp.dependencies || []; |
||||
|
isLib = comp.lib; |
||||
|
} catch (e) { |
||||
|
console.error(e) |
||||
|
} |
||||
|
|
||||
|
//等待依赖下载完毕
|
||||
|
for (const refer of dependencies) { |
||||
|
let reference = state.asserts[refer] || null; |
||||
|
await registerApps(reference, curBaseUrl); |
||||
|
} |
||||
|
return new Promise((resolve, reject) => { |
||||
|
//加载组件资源
|
||||
|
console.log('开始加载组件资源', assets, curBaseUrl) |
||||
|
registerApps(assets, curBaseUrl).then(() => { |
||||
|
if (!isLib) {//正常组件的加载流程,isLib为true代表纯js lib库的加载
|
||||
|
let startTime = new Date().getTime(); |
||||
|
const looper = setInterval(() => { |
||||
|
|
||||
|
if (Vue.component(`${component}`)) { |
||||
|
resolve(comp) |
||||
|
clearInterval(looper); |
||||
|
} else { |
||||
|
let nowTime = new Date().getTime(); |
||||
|
if (nowTime - startTime > 2000) { |
||||
|
if (!assets) { |
||||
|
reject(`[loading error:${component}]:组件资源加载失败`) |
||||
|
} else { |
||||
|
reject(`[loading error:${component}]:loading component timed out`) |
||||
} |
} |
||||
|
clearInterval(looper) |
||||
} |
} |
||||
}, 300) |
|
||||
} else { |
|
||||
resolve(comp); |
|
||||
} |
|
||||
}).catch(err => { |
|
||||
if (!assets) { |
|
||||
reject(`[loading error:${component}]:组件资源加载失败`) |
|
||||
} else { |
|
||||
reject(`[loading error:${component}]:${err}`) |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
}) |
|
||||
|
|
||||
}, |
|
||||
//自定义函数,支持开发者按需增加接口
|
|
||||
|
|
||||
openComponentByMenu(components) { |
|
||||
//长度变化才会触发computed?
|
|
||||
this.components.filter(c => { |
|
||||
const component = c.component.name || c.component; |
|
||||
//激活组件命中此组件,更改状态
|
|
||||
const hit = components.includes(component); |
|
||||
if (hit) { |
|
||||
c.lazy = !hit; |
|
||||
return c; |
|
||||
} |
|
||||
}).forEach(c => { |
|
||||
if (!this.layouts.some(l => (l.component.name || l.component) === c.component)) { |
|
||||
this.layouts.push(c); |
|
||||
}else{ |
|
||||
//改变状态
|
|
||||
this.layouts.forEach(l => { |
|
||||
if((l.component.name || l.component) === c.component ){ |
|
||||
l.lazy = false; |
|
||||
} |
} |
||||
}) |
|
||||
|
}, 300) |
||||
|
} else { |
||||
|
resolve(comp); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
if (!assets) { |
||||
|
reject(`[loading error:${component}]:组件资源加载失败`) |
||||
|
} else { |
||||
|
reject(`[loading error:${component}]:${err}`) |
||||
} |
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
if (!this.actives.some(l => l.component === c.component)) { |
|
||||
//弹窗暂定为同一时间只能打开一个
|
|
||||
if (c.type === 'dialog') { |
|
||||
this.actives = [c]; |
|
||||
} else { |
|
||||
this.actives.push(c); |
|
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
//自定义函数,支持开发者按需增加接口
|
||||
|
|
||||
|
openComponentByMenu(components) { |
||||
|
//长度变化才会触发computed?
|
||||
|
state.components.filter(c => { |
||||
|
const component = c.component.name || c.component; |
||||
|
//激活组件命中此组件,更改状态
|
||||
|
const hit = components.includes(component); |
||||
|
if (hit) { |
||||
|
c.lazy = !hit; |
||||
|
return c; |
||||
|
} |
||||
|
}).forEach(c => { |
||||
|
if (!state.layouts.some(l => (l.component.name || l.component) === c.component)) { |
||||
|
state.layouts.push(c); |
||||
|
}else{ |
||||
|
//改变状态
|
||||
|
state.layouts.forEach(l => { |
||||
|
if((l.component.name || l.component) === c.component ){ |
||||
|
l.lazy = false; |
||||
} |
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
if (!state.actives.some(l => l.component === c.component)) { |
||||
|
//弹窗暂定为同一时间只能打开一个
|
||||
|
if (c.type === 'dialog') { |
||||
|
state.actives = [c]; |
||||
|
} else { |
||||
|
state.actives.push(c); |
||||
} |
} |
||||
}); |
|
||||
//有 加入 无 删除？
|
|
||||
|
|
||||
console.log('layouts变化状态', this.layouts); |
|
||||
console.log('actives变化状态', this.actives); |
|
||||
this.menuStatusUpdate(); |
|
||||
}, |
|
||||
// 关闭组件
|
|
||||
closeComponent(components) { |
|
||||
//修改layout中的状态
|
|
||||
this.layouts.forEach(c => { |
|
||||
const component = c.component.name || c.component; |
|
||||
//激活组件命中此组件,更改状态
|
|
||||
const hit = components.includes(component); |
|
||||
if (hit) { |
|
||||
c.lazy = hit; |
|
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
//有 加入 无 删除？
|
||||
|
|
||||
|
console.log('layouts变化状态', state.layouts); |
||||
|
console.log('actives变化状态', state.actives); |
||||
|
this.menuStatusUpdate(); |
||||
|
} |
||||
|
// 关闭组件
|
||||
|
closeComponent(components) { |
||||
|
//修改layout中的状态
|
||||
|
state.layouts.forEach(c => { |
||||
|
const component = c.component.name || c.component; |
||||
|
//激活组件命中此组件,更改状态
|
||||
|
const hit = components.includes(component); |
||||
|
if (hit) { |
||||
|
c.lazy = hit; |
||||
|
} |
||||
|
}) |
||||
|
//active中删除该组件
|
||||
|
console.log('待删除组件', components) |
||||
|
components.forEach(c => { |
||||
|
const index = state.actives.findIndex(b => b.component === c); |
||||
|
console.log('aaaaaa', index); |
||||
|
if (index >= 0) { |
||||
|
state.actives.splice(index, 1); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
console.log('layouts变化状态', state.layouts) |
||||
|
console.log('actives变化状态', state.actives) |
||||
|
this.menuStatusUpdate(); |
||||
|
} |
||||
|
//initLayouts //layouts 初始化,外部组件
|
||||
|
initLayouts(layouts = []) { |
||||
|
console.log('initLayouts', layouts, state) |
||||
|
state.layouts.push(...layouts.filter(l => !l.lazy)) |
||||
|
console.log('after initLayouts', state.layouts) |
||||
|
} |
||||
|
|
||||
|
//获取组件
|
||||
|
getWidgetsByType(type) { |
||||
|
console.log('getWidgetsByType', type, state) |
||||
|
//以type 或 position 命中widget,背景板默认lazy=false
|
||||
|
return state.layouts.filter(f => (f.type === type || f.position === type) && !f.lazy).map(f => { |
||||
|
//string类型，来自配置文件，需要下载资源才能使用，懒加载组件不加载但是需要加入到数组中、、
|
||||
|
|
||||
|
if (typeof f.component === "string") { |
||||
|
console.log('下载component资源', f.component); |
||||
|
return this.loadComponent(f.component); |
||||
|
} else { |
||||
|
return f |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
//获取含有当前类型的激活组件
|
||||
|
getActivesByType(type) { |
||||
|
return state.actives.filter(a => a.type === type); |
||||
|
} |
||||
|
|
||||
|
// 初始化配置信息
|
||||
|
async initData(props) { |
||||
|
const dev = process.env.NODE_ENV === 'development'; |
||||
|
curBaseUrl = props.tis ? props.tis.entry : baseUrl; |
||||
|
console.log('initData curBaseUrl', curBaseUrl, props) |
||||
|
const esData = await axios.get(`${curBaseUrl}/esplug.json`).catch(err => console.error(err)); |
||||
|
const asserts = await axios.get(`${curBaseUrl}/tisplatform.json`).catch(err => console.error(err)); |
||||
|
try { |
||||
|
//运行模式才取用框架返回的数据
|
||||
|
if (props.tis && !dev) { |
||||
|
console.log('框架传入的components:',props.tis.components) |
||||
|
state.components = props.tis.components ? [...props.tis.components,...esData.data.components] : esData.data.components; |
||||
|
state.asserts = Object.keys(props.tis.asserts).length !== 0 ? props.tis.asserts : asserts.data; |
||||
|
state.widgets = props.tis.widgets ? props.tis.widgets : esData.data.widgets; |
||||
|
} else { |
||||
|
state.components = esData.data.components |
||||
|
state.asserts = asserts.data; |
||||
|
state.widgets = esData.data.widgets; |
||||
|
} |
||||
|
//避免不填此属性，默认懒加载
|
||||
|
state.components = state.components.map(c => { |
||||
|
if (!Object.prototype.hasOwnProperty.call(c, "lazy") && c.type !== "background") { |
||||
|
c.lazy = true |
||||
} |
} |
||||
|
return c; |
||||
}) |
}) |
||||
//active中删除该组件
|
|
||||
console.log('待删除组件', components) |
|
||||
components.forEach(c => { |
|
||||
const index = this.actives.findIndex(b => b.component === c); |
|
||||
console.log('aaaaaa', index); |
|
||||
if (index >= 0) { |
|
||||
this.actives.splice(index, 1); |
|
||||
} |
|
||||
|
} catch (e) { |
||||
|
console.error(e) |
||||
|
} |
||||
|
} |
||||
|
|
||||
}) |
|
||||
console.log('layouts变化状态', this.layouts) |
|
||||
console.log('actives变化状态', this.actives) |
|
||||
this.menuStatusUpdate(); |
|
||||
}, |
|
||||
//initLayouts //layouts 初始化,外部组件
|
|
||||
initLayouts(layouts = []) { |
|
||||
this.layouts.push(...layouts.filter(l => !l.lazy)) |
|
||||
}, |
|
||||
|
|
||||
//获取组件
|
|
||||
getWidgetsByType(type) { |
|
||||
//以type 或 position 命中widget,背景板默认lazy=false
|
|
||||
return this.layouts.filter(f => (f.type === type || f.position === type) && !f.lazy).map(f => { |
|
||||
//string类型，来自配置文件，需要下载资源才能使用，懒加载组件不加载但是需要加入到数组中、、
|
|
||||
|
|
||||
if (typeof f.component === "string") { |
|
||||
console.log('下载component资源', f.component); |
|
||||
return this.loadComponent(f.component); |
|
||||
} else { |
|
||||
return f |
|
||||
} |
|
||||
|
setup(options = {}) { |
||||
|
state.layouts = options.layout || [] |
||||
|
} |
||||
|
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
//获取含有当前类型的激活组件
|
|
||||
getActivesByType(type) { |
|
||||
return this.actives.filter(a => a.type === type); |
|
||||
}, |
|
||||
|
|
||||
// 初始化配置信息
|
|
||||
async initData(props) { |
|
||||
const dev = process.env.NODE_ENV === 'development'; |
|
||||
curBaseUrl = props.tis ? props.tis.entry : baseUrl; |
|
||||
const esData = await axios.get(`${curBaseUrl}/esplug.json`).catch(err => console.error(err)); |
|
||||
const asserts = await axios.get(`${curBaseUrl}/tisplatform.json`).catch(err => console.error(err)); |
|
||||
try { |
|
||||
//运行模式才取用框架返回的数据
|
|
||||
if (props.tis && !dev) { |
|
||||
console.log('框架传入的components:',props.tis.components) |
|
||||
this.components = props.tis.components ? [...props.tis.components,...esData.data.components] : esData.data.components; |
|
||||
this.asserts = Object.keys(props.tis.asserts).length !== 0 ? props.tis.asserts : asserts.data; |
|
||||
this.widgets = props.tis.widgets ? props.tis.widgets : esData.data.widgets; |
|
||||
} else { |
|
||||
this.components = esData.data.components |
|
||||
this.asserts = asserts.data; |
|
||||
this.widgets = esData.data.widgets; |
|
||||
} |
|
||||
//避免不填此属性，默认懒加载
|
|
||||
this.components = this.components.map(c => { |
|
||||
if (!Object.prototype.hasOwnProperty.call(c, "lazy") && c.type !== "background") { |
|
||||
c.lazy = true |
|
||||
} |
|
||||
return c; |
|
||||
}) |
|
||||
} catch (e) { |
|
||||
console.error(e) |
|
||||
} |
|
||||
}, |
|
||||
|
bootstrap(props) { |
||||
|
this.appId = props.tis?.appId |
||||
} |
} |
||||
}); |
|
||||
|
|
||||
|
async mount(props = {}) { |
||||
|
await this.initData(props) |
||||
|
console.log('app frame', state.components, state.asserts, state.widgets) |
||||
|
this.initLayouts(state.components) |
||||
|
this.initLayouts(state.widgets) |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
Object.freeze(Bus) |
||||
|
const bus = new Bus() |
||||
|
|
||||
|
export function unmount() { |
||||
|
state = null |
||||
|
bus = null |
||||
|
} |
||||
|
|
||||
export default bus |
export default bus |
||||
@ -0,0 +1,5 @@ |
|||||
|
const devLib = process.env.VUE_APP_DEVLIB === "dev"; |
||||
|
if (window.__POWERED_BY_QIANKUN__) { |
||||
|
// eslint-disable-next-line no-undef
|
||||
|
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + (devLib ? "/TIS_APP_TEMPLATE_KT/" : ''); |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue