Poised_flw
4 years ago
11 changed files with 438 additions and 14 deletions
-
1src/tis_app_template_kt/bus.min.js
-
1src/tis_app_template_kt/package.json
-
1src/tis_app_template_kt/public/index.html
-
363src/tis_app_template_kt/public/lib/bus.min.js
-
16src/tis_app_template_kt/rollup.config.js
-
1src/tis_app_template_kt/src/components/controlMixins.js
-
2src/tis_app_template_kt/src/pc.vue
-
5src/tis_app_template_kt/src/tis/bus.js
-
2src/tis_app_template_kt/src/tis/index.js
-
3src/tis_app_template_kt/vue.config.js
-
57src/tis_app_template_kt/yarn.lock
1
src/tis_app_template_kt/bus.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,363 @@ |
|||||
|
(function (global, factory) { |
||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : |
||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : |
||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TISBUS = {}, global.Vue)); |
||||
|
})(this, (function (exports, Vue) { 'use strict'; |
||||
|
|
||||
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } |
||||
|
|
||||
|
var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue); |
||||
|
|
||||
|
const jsAttachPoint = document.querySelector('body'); |
||||
|
|
||||
|
//const cssAttachPoint = document.querySelector('head')
|
||||
|
|
||||
|
async function loadResources(resources) { |
||||
|
if (!resources.length) return |
||||
|
for (const resource of resources) { |
||||
|
//
|
||||
|
jsAttachPoint.appendChild(resource); |
||||
|
await onLoad(resource).catch(() => { |
||||
|
|
||||
|
// resourcesLoaded.forEach(item => {
|
||||
|
// if (resource.src.indexOf(item) > 0) {
|
||||
|
// let res = item.replace(new RegExp("/\static\/","gm"),``);
|
||||
|
// console.error(`${res}资源加载失败，请检查该软件段是否正确安装!`);
|
||||
|
// resourcesLoaded.delete(item);
|
||||
|
// }
|
||||
|
// });
|
||||
|
// console.log(resourcesLoaded.entries());
|
||||
|
jsAttachPoint.removeChild(resource); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function createStylesheet(href) { |
||||
|
const link = document.createElement('link'); |
||||
|
link.setAttribute('rel', 'stylesheet'); |
||||
|
link.setAttribute('href', href); |
||||
|
return link |
||||
|
} |
||||
|
|
||||
|
function createScript(src) { |
||||
|
// const script = document.createElement('script')
|
||||
|
// script.setAttribute('type', 'text/javascript')
|
||||
|
// script.setAttribute('src', src.src? src.src :src);
|
||||
|
// if (/require.min.js/.test(src)) script.setAttribute("data-main", '/TIS_DLTS_WEB/esapp-map/Build/Js/main.js');
|
||||
|
|
||||
|
const script = document.createElement('script'); |
||||
|
script.setAttribute('type', 'text/javascript'); |
||||
|
// if (src && src === "/TIS_DLTS_WEB/esapp-map/Build/Js/require.min.js") script.setAttribute("data-main", '/TIS_DLTS_WEB/esapp-map/Build/Js/main.js');
|
||||
|
if (/require.min.js/.test(src)) { |
||||
|
script.setAttribute('src', "/TIS_DLTS_WEB/esapp-map/Build/Js/require.min.js"); |
||||
|
script.setAttribute("data-main", '/TIS_DLTS_WEB/esapp-map/Build/Js/main.js'); |
||||
|
} else { |
||||
|
script.setAttribute('src', src.src ? src.src : src); |
||||
|
} |
||||
|
return script |
||||
|
} |
||||
|
|
||||
|
function onLoad(el) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
el.onload = el.onreadystatechange = function () { |
||||
|
let readyState = el.readyState; |
||||
|
if (typeof readyState === 'undefined' || /^(loaded|complete)$/.test(readyState)) { |
||||
|
resolve(); |
||||
|
// 卸载事件和断开dom引用，避免内存泄漏
|
||||
|
el.onload = el.onerror = el.onreadystatechange = null; |
||||
|
} |
||||
|
}; |
||||
|
el.onerror = function () { |
||||
|
let readyState = el.readyState; |
||||
|
if (typeof readyState === 'undefined' || /^(loaded|complete)$/.test(readyState)) { |
||||
|
console.log('load js resources failed'); |
||||
|
reject({error: 'load js resources failed'}); |
||||
|
// 卸载事件和断开dom引用，避免内存泄漏
|
||||
|
el.onload = el.onerror = el.onreadystatechange = null; |
||||
|
} |
||||
|
}; |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const resourcesLoaded = new Set(); |
||||
|
const baseUrl$1 = "" ; |
||||
|
let currentBaseUrl = ""; |
||||
|
async function registerApps(appObject,curBaseUrl) { |
||||
|
//开发态需要根据域名加载资源，运行态不需要加publicPath
|
||||
|
let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)/; |
||||
|
currentBaseUrl = reg.test(curBaseUrl) ? curBaseUrl : ""; |
||||
|
// if("development" === 'development'){
|
||||
|
// console.log('ppppp',baseUrl)
|
||||
|
// const response = await fetch(`${baseUrl}/tisplatform.json`,{method:'get'});
|
||||
|
// const scripts = await response.json()
|
||||
|
// console.log('000000000000',Object.values(scripts))
|
||||
|
// Object.values(scripts).map(async script => await getAppLoader(script)())
|
||||
|
// }else{
|
||||
|
if (appObject === undefined || appObject == null) { |
||||
|
return Promise.resolve('[所加载资源为null]'); |
||||
|
} |
||||
|
await getAppLoader(appObject)(); |
||||
|
// }
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
function getAppLoader(info) { |
||||
|
return async function () { |
||||
|
if (info === undefined || info == null) return |
||||
|
const {cssFiles, jsFiles} = info; |
||||
|
if (cssFiles) { |
||||
|
await loadResources([ |
||||
|
...cssFiles.filter(notLoaded).map(appendBaseUrl).map(createStylesheet), |
||||
|
...jsFiles.filter(notLoaded).map(appendBaseUrl).map(createScript) |
||||
|
]); |
||||
|
} else { |
||||
|
await loadResources([ |
||||
|
...jsFiles.filter(notLoaded).map(appendBaseUrl).map(createScript) |
||||
|
]); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function appendBaseUrl(target) { |
||||
|
return (currentBaseUrl ? currentBaseUrl : baseUrl$1) + target; |
||||
|
} |
||||
|
|
||||
|
function notLoaded(file) { |
||||
|
const loaded = resourcesLoaded.has(file); |
||||
|
resourcesLoaded.add(file); |
||||
|
return !loaded |
||||
|
} |
||||
|
|
||||
|
// temp
|
||||
|
let curBaseUrl = ''; |
||||
|
const baseUrl = "" ; |
||||
|
// 数据机制，考虑vuex来实现
|
||||
|
const bus = new Vue__default["default"]({ |
||||
|
data: { |
||||
|
components: [], // components
|
||||
|
asserts: {}, |
||||
|
deviceType: "pc", |
||||
|
actives: [],//从菜单中激活的组件,
|
||||
|
layouts: [],//由自定义组件和第三方组件组成的布局组件集合
|
||||
|
widgets: [],//在应用模板内部需要加载的widgets
|
||||
|
}, |
||||
|
methods: { |
||||
|
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__default["default"].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 = "development" === 'development'; |
||||
|
curBaseUrl = props.tis ? props.tis.entry : baseUrl; |
||||
|
const esData = await Vue__default["default"].prototype.$axios.get(`${curBaseUrl}/esplug.json`).catch(err => console.error(err)); |
||||
|
const asserts = await Vue__default["default"].prototype.$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); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function onSetup(options = {}) { |
||||
|
bus.layouts = options.layout; |
||||
|
} |
||||
|
|
||||
|
async function onMount(props) { |
||||
|
await bus.initData(props); |
||||
|
bus.initLayouts(bus.components); |
||||
|
bus.initLayouts(bus.widgets); |
||||
|
} |
||||
|
|
||||
|
exports["default"] = bus; |
||||
|
exports.onMount = onMount; |
||||
|
exports.onSetup = onSetup; |
||||
|
|
||||
|
Object.defineProperty(exports, '__esModule', { value: true }); |
||||
|
|
||||
|
})); |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue