Poised_flw
4 years ago
2 changed files with 546 additions and 194 deletions
-
224src/tis/index.js
-
280src/tis/utils/bus.js
@ -0,0 +1,280 @@ |
|||
import Vue from "vue"; |
|||
import EE from "eventemitter3"; |
|||
import axios from "axios"; |
|||
import { registerApps } from "./scriptsLoader/index"; |
|||
|
|||
// temp
|
|||
let curBaseUrl = ""; |
|||
const dev = process.env.NODE_ENV === "development"; |
|||
const baseUrl = dev ? process.env.BASE_URL : ""; |
|||
|
|||
// 数据机制，考虑vuex来实现
|
|||
class Bus extends EE { |
|||
components = []; // components
|
|||
asserts = {}; |
|||
deviceType = "pc"; |
|||
appId = ""; |
|||
actives = []; //从菜单中激活的组件,
|
|||
layouts = []; //由自定义组件和第三方组件组成的布局组件集合
|
|||
|
|||
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); |
|||
} |
|||
|
|||
//等待依赖下载完毕
|
|||
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); |
|||
} |
|||
} |
|||
}, 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; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
if (!this.actives.some(l => l.component === c.component)) { |
|||
//弹窗暂定为同一时间只能打开一个
|
|||
if (c.type === "dialog") { |
|||
this.actives = [c]; |
|||
} else { |
|||
this.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; |
|||
} |
|||
}); |
|||
//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); |
|||
} |
|||
}); |
|||
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; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
//获取含有当前类型的激活组件
|
|||
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); |
|||
} |
|||
} |
|||
|
|||
$emit(event) { |
|||
return this.emit(event); |
|||
} |
|||
|
|||
$on(event, fn) { |
|||
return this.on(event, fn); |
|||
} |
|||
|
|||
$off(event, fn) { |
|||
return this.off(event, fn); |
|||
} |
|||
|
|||
$once(event, fn) { |
|||
return this.once(event, fn); |
|||
} |
|||
} |
|||
|
|||
export function createBus(appId) { |
|||
const bus = new Bus(); |
|||
bus.appId = appId; |
|||
|
|||
function onSetup(options = {}) { |
|||
bus.layouts = options.layout; |
|||
} |
|||
|
|||
async function onMount(props) { |
|||
await bus.initData(props); |
|||
bus.initLayouts(bus.components); |
|||
bus.initLayouts(bus.widgets); |
|||
} |
|||
|
|||
return { |
|||
bus, |
|||
onSetup, |
|||
onMount |
|||
}; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue