16 changed files with 724 additions and 414 deletions
-
2src/tis_app_template_kt/src/App.vue
-
2src/tis_app_template_kt/src/components/BottomView.vue
-
10src/tis_app_template_kt/src/components/Dialog/DialogPc.vue
-
217src/tis_app_template_kt/src/components/Dialog/Pc.vue
-
2src/tis_app_template_kt/src/components/EventBusExample.vue
-
8src/tis_app_template_kt/src/components/LeftView.vue
-
2src/tis_app_template_kt/src/components/RightCardComponent.vue
-
2src/tis_app_template_kt/src/components/RightView.vue
-
192src/tis_app_template_kt/src/components/controlMixins.js
-
104src/tis_app_template_kt/src/main.js
-
16src/tis_app_template_kt/src/pc.vue
-
271src/tis_app_template_kt/src/tis/index.js
-
2src/tis_app_template_kt/src/tis/layouts/BackContainer.vue
-
3src/tis_app_template_kt/src/tis/layouts/DialogContainer.vue
-
11src/tis_app_template_kt/src/tis/store/index.js
-
294src/tis_app_template_kt/src/tis/store/modules/tisbus.js
@ -1,107 +1,111 @@ |
|||||
|
|
||||
export const controlMixins = { |
export const controlMixins = { |
||||
data() { |
data() { |
||||
return { |
|
||||
active: 0, |
|
||||
hidden: [], |
|
||||
activeCache: -1, |
|
||||
show: true, |
|
||||
showRightContent: true, |
|
||||
type1: '' |
|
||||
}; |
|
||||
|
return { |
||||
|
active: 0, |
||||
|
hidden: [], |
||||
|
activeCache: -1, |
||||
|
show: true, |
||||
|
showRightContent: true, |
||||
|
type1: '', |
||||
|
} |
||||
}, |
}, |
||||
asyncComputed: { |
asyncComputed: { |
||||
list: { |
|
||||
lazy: false, |
|
||||
async get() { |
|
||||
let list = []; |
|
||||
const lefts = this.$tis.getWidgetsByType(this.type); |
|
||||
if (lefts) { |
|
||||
const lfs = lefts.filter(l => l && !l.lazy); |
|
||||
for (let i = 0; i < lfs.length; i++) { |
|
||||
let l = lfs[i]; |
|
||||
|
|
||||
if (l instanceof Promise) { |
|
||||
const r = await l.then(r => r) |
|
||||
list.push(r); |
|
||||
} else { |
|
||||
list.push(l); |
|
||||
} |
|
||||
} |
|
||||
|
list: { |
||||
|
lazy: false, |
||||
|
async get() { |
||||
|
let list = [] |
||||
|
// const lefts = this.$tis.getWidgetsByType(this.type)
|
||||
|
return this.$store |
||||
|
.dispatch('tisbus/getWidgetsByType', this.type) |
||||
|
.then(lefts => { |
||||
|
if (lefts.length > 0) { |
||||
|
const lfs = lefts.filter(l => l && !l.lazy) |
||||
|
for (let i = 0; i < lfs.length; i++) { |
||||
|
let l = lfs[i] |
||||
|
if (l instanceof Promise) { |
||||
|
console.log('tetetetete4t') |
||||
|
l.then(s => list.push(rl)) |
||||
|
} else { |
||||
|
list.push(l) |
||||
|
} |
||||
} |
} |
||||
console.log(this.type, list); |
|
||||
///记录激活数量
|
|
||||
return list; |
|
||||
}, |
|
||||
watch: ['$tis.layouts'], |
|
||||
default() { |
|
||||
return []; |
|
||||
}, |
|
||||
|
|
||||
|
} |
||||
|
///记录激活数量
|
||||
|
return list |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
}, |
}, |
||||
|
watch: ['$store.state.tisbus.layouts'], |
||||
|
default() { |
||||
|
return [] |
||||
|
}, |
||||
|
}, |
||||
}, |
}, |
||||
computed: { |
computed: { |
||||
actives() { |
|
||||
return this.$tis.getActivesByType(this.type); |
|
||||
}, |
|
||||
allHiddened() { |
|
||||
if (this.hidden.length === 0) return false; |
|
||||
return this.list.every((i, index) => { |
|
||||
return this.hidden[index] === true; |
|
||||
}); |
|
||||
}, |
|
||||
|
actives() { |
||||
|
// return this.$tis.getActivesByType(this.type);
|
||||
|
return this.$store.getters['tisbus/getActivesByType'](this.type) |
||||
|
}, |
||||
|
allHiddened() { |
||||
|
if (this.hidden.length === 0) return false |
||||
|
return this.list.every((i, index) => { |
||||
|
return this.hidden[index] === true |
||||
|
}) |
||||
|
}, |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
onClose(index) { |
|
||||
console.log("删除", index); |
|
||||
// //最小化后
|
|
||||
this.list[index].lazy = true; |
|
||||
this.$tis.closeComponent([this.list[index].component]); |
|
||||
this.activeCache > 0 ? this.activeCache-- : ""; |
|
||||
}, |
|
||||
onMinize(index) { |
|
||||
this.$set(this.hidden, index, true); |
|
||||
if (this.active === index) { |
|
||||
this.active = -1; |
|
||||
for (let i = index + 1; i < this.list.length; i++) { |
|
||||
if (!this.hidden[i]) { |
|
||||
this.active = i; |
|
||||
return; |
|
||||
} |
|
||||
} |
|
||||
|
onClose(index) { |
||||
|
console.log('删除', index) |
||||
|
// //最小化后
|
||||
|
this.list[index].lazy = true |
||||
|
this.$tis.closeComponent([this.list[index].component]) |
||||
|
this.activeCache > 0 ? this.activeCache-- : '' |
||||
|
}, |
||||
|
onMinize(index) { |
||||
|
this.$set(this.hidden, index, true) |
||||
|
if (this.active === index) { |
||||
|
this.active = -1 |
||||
|
for (let i = index + 1; i < this.list.length; i++) { |
||||
|
if (!this.hidden[i]) { |
||||
|
this.active = i |
||||
|
return |
||||
} |
} |
||||
}, |
|
||||
onClickMenu(index) { |
|
||||
if(this.active === index){ |
|
||||
this.showRightContent = !this.showRightContent |
|
||||
this.type1 = 'self' |
|
||||
}else{ |
|
||||
this.showRightContent = true |
|
||||
this.type1 = 'ohter' |
|
||||
} |
|
||||
this.active = index; |
|
||||
this.$set(this.hidden, index, false); |
|
||||
// const appCard = this.$refs.appCards[index];
|
|
||||
// // console.log('99999999',index,this.$refs.appCards,this.$refs.appCards[index]);
|
|
||||
// appCard.scrollIntoView({
|
|
||||
// behavior: "smooth",
|
|
||||
// block: "start",
|
|
||||
// inline: "start",
|
|
||||
// });
|
|
||||
this.$forceUpdate(); |
|
||||
|
|
||||
}, |
|
||||
onHideAll() { |
|
||||
this.list.forEach((item, index) => { |
|
||||
this.$set(this.hidden, index, true); |
|
||||
}); |
|
||||
this.active = -1; |
|
||||
}, |
|
||||
onOpenAll() { |
|
||||
this.list.forEach((item, index) => { |
|
||||
this.$set(this.hidden, index, false); |
|
||||
}); |
|
||||
this.active = 0; |
|
||||
}, |
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
onClickMenu(index) { |
||||
|
if (this.active === index) { |
||||
|
this.showRightContent = !this.showRightContent |
||||
|
this.type1 = 'self' |
||||
|
} else { |
||||
|
this.showRightContent = true |
||||
|
this.type1 = 'ohter' |
||||
|
} |
||||
|
this.active = index |
||||
|
this.$set(this.hidden, index, false) |
||||
|
// const appCard = this.$refs.appCards[index];
|
||||
|
// // console.log('99999999',index,this.$refs.appCards,this.$refs.appCards[index]);
|
||||
|
// appCard.scrollIntoView({
|
||||
|
// behavior: "smooth",
|
||||
|
// block: "start",
|
||||
|
// inline: "start",
|
||||
|
// });
|
||||
|
this.$forceUpdate() |
||||
|
}, |
||||
|
onHideAll() { |
||||
|
this.list.forEach((item, index) => { |
||||
|
this.$set(this.hidden, index, true) |
||||
|
}) |
||||
|
this.active = -1 |
||||
|
}, |
||||
|
onOpenAll() { |
||||
|
this.list.forEach((item, index) => { |
||||
|
this.$set(this.hidden, index, false) |
||||
|
}) |
||||
|
this.active = 0 |
||||
|
}, |
||||
}, |
}, |
||||
} |
|
||||
|
} |
||||
@ -0,0 +1,294 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import {registerApps} from '../.././scriptsLoader/index' |
||||
|
|
||||
|
export default { |
||||
|
namespaced: true, |
||||
|
state: { |
||||
|
dialogZIndex: 400, |
||||
|
curBaseUrl: '', |
||||
|
baseUrl: process.env.NODE_ENV === 'development' ? process.env.BASE_URL : '', |
||||
|
components: [], // components
|
||||
|
asserts: {}, // 所有资源
|
||||
|
deviceType: 'pc', |
||||
|
actives: [], // 从菜单中激活的组件,
|
||||
|
layouts: [], // 由自定义组件和第三方组件组成的布局组件集合
|
||||
|
widgets: [], // 在应用模板内部需要加载的widgets
|
||||
|
}, |
||||
|
getters: { |
||||
|
// 获取设备型号
|
||||
|
getDeviceType(state) { |
||||
|
return state.deviceType |
||||
|
}, |
||||
|
// 获取布局组件集合
|
||||
|
getTemplateLayouts(state) { |
||||
|
return state.layouts |
||||
|
}, |
||||
|
// 计算弹窗的z-index
|
||||
|
getNextDialogZIndex(state) { |
||||
|
let zIndex = 0 |
||||
|
for (let item of state.actives) { |
||||
|
if (item.zIndex && item.zIndex > zIndex) { |
||||
|
zIndex = item.zIndex |
||||
|
} |
||||
|
} |
||||
|
return zIndex > 0 ? zIndex + 1 : state.dialogZIndex |
||||
|
}, |
||||
|
// 获取含有当前类型的激活组件
|
||||
|
getActivesByType(state) { |
||||
|
return type => { |
||||
|
console.log( |
||||
|
'获取含有当前类型的激活组件', |
||||
|
state.actives.filter(a => a.type === type) |
||||
|
) |
||||
|
return state.actives.filter(a => a.type === type) |
||||
|
} |
||||
|
// return type => state.actives.filter(a => a.type === type)
|
||||
|
}, |
||||
|
}, |
||||
|
mutations: { |
||||
|
// 传递当前所处组件的上下文环境
|
||||
|
menuStatusUpdate(state) { |
||||
|
const onActives = state.layouts |
||||
|
.filter(l => !l.lazy) |
||||
|
.map(c => ({ |
||||
|
component: c.component.name || c.component, |
||||
|
status: c.status, |
||||
|
})) |
||||
|
const appId = '' |
||||
|
console.log('============>', appId, onActives) |
||||
|
// TODO 这里通过event-bus来实现吧，Vue实例获取不到
|
||||
|
// window.esapp.tis.$emit('TIS_TEMPLATE_MENU_ACTIVE', {
|
||||
|
// appId,
|
||||
|
// onActives: onActives,
|
||||
|
// system: true,
|
||||
|
// })
|
||||
|
}, |
||||
|
// 初始化配置信息
|
||||
|
async initData(state, props) { |
||||
|
const dev = process.env.NODE_ENV === 'development' |
||||
|
state.curBaseUrl = props.tis ? props.tis.entry : state.baseUrl |
||||
|
const esData = await Vue.prototype.$axios.get(`${state.curBaseUrl}/esplug.json`).catch(err => console.error(err)) |
||||
|
console.log('初始化配置信息', esData) |
||||
|
const asserts = await Vue.prototype.$axios |
||||
|
.get(`${state.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.actives = esData.data.components
|
||||
|
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 |
||||
|
}) |
||||
|
console.log('初始化配置信息components', state.components) |
||||
|
} catch (e) { |
||||
|
console.error(e) |
||||
|
} |
||||
|
}, |
||||
|
// 激活窗口
|
||||
|
activeComponent(state, component) { |
||||
|
const curComponent = state.actives.find(v => (v.component.name || v.component) === component) |
||||
|
const maxZIndex = Math.max.apply( |
||||
|
Math, |
||||
|
state.actives.map(function(o) { |
||||
|
return o.zIndex |
||||
|
}) |
||||
|
) |
||||
|
const maxComponent = state.actives.find(v => v.zIndex === maxZIndex) |
||||
|
if (curComponent === maxComponent) return |
||||
|
maxComponent.zIndex = curComponent.zIndex |
||||
|
curComponent.zIndex = maxZIndex |
||||
|
state.actives = [...state.actives] |
||||
|
}, |
||||
|
// 最小化激活的弹窗
|
||||
|
minimizeComponent(state, component) { |
||||
|
state.actives.forEach(c => { |
||||
|
const comp = c.component.name || c.component |
||||
|
console.log(comp, component, c) |
||||
|
if (comp === component) { |
||||
|
c.status = 'minimize' |
||||
|
c.zIndex = 0 |
||||
|
} |
||||
|
}) |
||||
|
state.actives = [...state.actives] |
||||
|
console.log('after minimize', state.actives) |
||||
|
this.commit('menuStatusUpdate') |
||||
|
}, |
||||
|
// 关闭组件
|
||||
|
closeComponent(state, 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.commit('menuStatusUpdate') |
||||
|
}, |
||||
|
// initLayouts state.layouts 初始化,外部组件
|
||||
|
initLayouts(state, layouts = []) { |
||||
|
state.layouts.push(...layouts.filter(l => !l.lazy)) |
||||
|
}, |
||||
|
onSetup(state, options = {}) { |
||||
|
state.layouts = options.layout |
||||
|
}, |
||||
|
}, |
||||
|
actions: { |
||||
|
// 加载组件资源
|
||||
|
async loadComponent({state}, 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, |
||||
|
dependencies = [], |
||||
|
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, state.curBaseUrl) |
||||
|
} |
||||
|
return new Promise((resolve, reject) => { |
||||
|
// 加载组件资源
|
||||
|
console.log('开始加载组件资源', assets, state.curBaseUrl) |
||||
|
registerApps(assets, state.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({commit, state, getters}, components) { |
||||
|
// 长度变化才会触发computed?
|
||||
|
state.components |
||||
|
.filter(c => { |
||||
|
const component = c.component.name || c.component |
||||
|
// 激活组件命中此组件,更改状态
|
||||
|
const hit = components.includes(component) |
||||
|
if (hit) { |
||||
|
c.lazy = !hit |
||||
|
c.status = c.status === 'minimize' ? 'normal' : c.status |
||||
|
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)) { |
||||
|
// 弹窗暂定为同一时间只能打开一个 "PopupWidget" 非dialog
|
||||
|
// 计算z-index
|
||||
|
if (!c.zIndex) { |
||||
|
// c.zIndex = commit('getNextDialogZIndex')
|
||||
|
c.zIndex = getters.getNextDialogZIndex |
||||
|
} |
||||
|
if (c.type === 'dialog') { |
||||
|
state.actives = [c] |
||||
|
} else { |
||||
|
state.actives.push(c) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
// 有 加入 无 删除？
|
||||
|
// 强制触发更新
|
||||
|
state.actives = [...state.actives] |
||||
|
console.log('layouts变化状态', state.layouts) |
||||
|
console.log('actives变化状态', state.actives) |
||||
|
commit('menuStatusUpdate') |
||||
|
}, |
||||
|
// 获取组件
|
||||
|
getWidgetsByType({dispatch, state}, type) { |
||||
|
//以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 dispatch('loadComponent', f.component) |
||||
|
} else { |
||||
|
return f |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
async onMount({commit, state}, props) { |
||||
|
await commit('initData', props) |
||||
|
commit('initLayouts', state.components) |
||||
|
commit('initLayouts', state.widgets) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue