8 changed files with 342 additions and 3 deletions
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<!-- 查看主表、查看子表 有缓存的iframe --> |
|||
<div class="allCacheIframeForMOrD"> |
|||
<!-- 查看主表 --> |
|||
<el-dialog |
|||
v-for="(item,key) in pageListMrt" |
|||
:key="'mrt'+key" |
|||
v-show="routerName == item.name && item.url && currentShowMrtOrDet.indexOf(item.name+'-mrt') >= 0" |
|||
class="iframeOuterDialog" |
|||
:visible="true" |
|||
:modal-append-to-body="false" |
|||
:append-to-body="false" |
|||
:modal="false" |
|||
:fullscreen="true" |
|||
:style="{left:iframeLeft}" |
|||
> |
|||
<iframe :src="item.url" frameborder="0"></iframe> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="danger" size="mini" @click="iframeClose(item,'mrt')">关闭主表查询</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<!-- 查看子表 --> |
|||
<el-dialog |
|||
v-for="(item,key) in pageListDet" |
|||
:key="'det'+key" |
|||
v-show="routerName == item.name && currentShowMrtOrDet.indexOf(item.name+'-det') >= 0" |
|||
class="iframeOuterDialog" |
|||
:visible="true" |
|||
:modal-append-to-body="false" |
|||
:append-to-body="false" |
|||
:modal="false" |
|||
:fullscreen="true" |
|||
:style="{left:iframeLeft}" |
|||
> |
|||
<iframe :src="item.url" frameborder="0"></iframe> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="danger" size="mini" @click="iframeClose(item,'det')">关闭子表查询</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'cacheIframeForMOrD', |
|||
computed: { |
|||
// 获取当前未关闭(保留缓存)的ifram项 |
|||
currentShowMrtOrDet () { |
|||
return this.$store.getters.currentShowMrtOrDet |
|||
}, |
|||
// 所有打开过的主表iframe |
|||
pageListMrt(){ |
|||
return this.$store.getters.pageListMrt |
|||
}, |
|||
// 所有打开过的子表iframe |
|||
pageListDet(){ |
|||
return this.$store.getters.pageListDet |
|||
} |
|||
}, |
|||
watch: { |
|||
'$route.name'(to){ |
|||
this.routerName = to |
|||
}, |
|||
// 导航收缩更改iframe宽度，模拟内嵌 |
|||
'$store.getters.sidebar.opened'(n){ |
|||
this.initIframeLeft(n) |
|||
} |
|||
}, |
|||
created(){ |
|||
this.initIframeLeft(this.$store.getters.sidebar.opened) |
|||
}, |
|||
data () { |
|||
return { |
|||
routerName:null, |
|||
iframeLeft:'220px' |
|||
} |
|||
}, |
|||
methods: { |
|||
// iframe关闭 |
|||
iframeClose(data,type){ |
|||
this.$store.dispatch('outerIframeForMOrD/removeMOrDShow', {name:data.name,type:type}) |
|||
}, |
|||
// iframe宽度计算 |
|||
initIframeLeft(data){ |
|||
let _time = data ? 0 : 150 |
|||
setTimeout(()=>{ |
|||
this.iframeLeft = data ? '230px' : '55px' |
|||
},_time) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
|
|||
.iframeOuterDialog{ |
|||
position: fixed; |
|||
top: 85px; |
|||
|
|||
::v-deep .el-dialog__header{ |
|||
padding: 0; |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer{ |
|||
text-align: center; |
|||
padding: 10px; |
|||
} |
|||
|
|||
::v-deep .el-dialog__body{ |
|||
padding: 10px 10px 0 10px; |
|||
height: calc(100% - 50px); |
|||
} |
|||
|
|||
iframe{ |
|||
width: 100%; |
|||
height:100%; |
|||
border:none; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
const state = { |
|||
showMrtOrDet: [],// 当前未关闭(保留缓存)的ifram项
|
|||
pageList_Mrt: [],// 主表iframe的数据
|
|||
pageList_Det: [],// 子表iframe的数据
|
|||
} |
|||
|
|||
// 驼峰转义
|
|||
const changeToHump = (sName) => { |
|||
const reg = /-(.)/g; |
|||
return sName.replace(reg, (fullMatch, g1, index) => { |
|||
if (index === 0) return g1; |
|||
return g1.toUpperCase(); |
|||
}); |
|||
} |
|||
|
|||
// 首字母转换 type='Lower'(小写，默认) Upper（大写）
|
|||
const firstWordSizeChange = (str,type='Upper') => { |
|||
switch(type){ |
|||
case 'Lower': |
|||
return str.substring(0,1).toLowerCase() + str.substring(1,str.length); |
|||
case 'Upper': |
|||
return str.substring(0,1).toUpperCase() + str.substring(1,str.length); |
|||
} |
|||
} |
|||
|
|||
// 添加时候，pageList处理
|
|||
const addPageListHandle = (list,data) => { |
|||
let urlName = firstWordSizeChange(changeToHump(data.option.listUrl)) |
|||
|
|||
let mrt_url = localStorage.getItem('MOrDFasterUrl_'+data.option.moudle) + '#/' + urlName |
|||
let det_url = localStorage.getItem('MOrDFasterUrl_'+data.option.moudle) + '#/' + urlName + 'Detail' |
|||
// 查看主表、查看子表 有缓存的iframe 相关配置
|
|||
const singlePage = '?isSinglePage=true' |
|||
const RefreshId = '&RefreshId=' |
|||
let _userName = localStorage.getItem('userName') |
|||
const loginName = _userName && _userName.length > 0 ? '&loginName='+_userName : '' |
|||
let _type_url = data.option.type == 'mrt' ? mrt_url : det_url |
|||
let _url_pr = _type_url + singlePage + loginName + RefreshId |
|||
let _has_index |
|||
// 判断列表中是否已经存在当前项
|
|||
let _list = list.filter((item,key)=>{ |
|||
if(item.name == data.option.name)_has_index=key |
|||
return item.name == data.option.name |
|||
}) |
|||
// 如果不存在追加
|
|||
if(_list.length <= 0){ |
|||
list.push({ |
|||
name:data.option.name, |
|||
url:_url_pr + new Date().getTime() |
|||
}) |
|||
} |
|||
// 如果存在更改其url的RefreshId，重新渲染
|
|||
else{ |
|||
list[_has_index].url = _url_pr + new Date().getTime() |
|||
} |
|||
return list |
|||
} |
|||
|
|||
|
|||
// 移除时候，pageList处理
|
|||
const removePageListHandle = (list,data) => { |
|||
let _has_index |
|||
let _list = list.filter((item,key)=>{ |
|||
if(item.name == data.option.name)_has_index=key |
|||
return item.name == data.option.name |
|||
}) |
|||
// 如果存在删除url 目的：重新渲染页面，处理没关遮罩时候全部关闭，遮罩错乱问题
|
|||
if(_list.length > 0){ |
|||
list[_has_index].url = null |
|||
} |
|||
return list |
|||
} |
|||
|
|||
|
|||
const mutations = { |
|||
// 添加当前显示项集合元素
|
|||
ADD_MORD_SHOW: (state, data) => { |
|||
if(state.showMrtOrDet.indexOf(data.name) < 0){ |
|||
state.showMrtOrDet.push(data.name) |
|||
} |
|||
//新增时候 pageList处理
|
|||
if(data.option.type == 'mrt'){ |
|||
state.pageList_Mrt = addPageListHandle(state.pageList_Mrt,data) |
|||
}else{ |
|||
state.pageList_Det = addPageListHandle(state.pageList_Det,data) |
|||
} |
|||
}, |
|||
// 删除当前显示项集合元素
|
|||
REMOVE_MORD_SHOW: (state, data) => { |
|||
if(state.showMrtOrDet.indexOf(data.name) >= 0){ |
|||
state.showMrtOrDet = state.showMrtOrDet.filter(item=>{ |
|||
return item != data.name |
|||
}) |
|||
} |
|||
//移除时候 pageList处理
|
|||
if(data.option.type == 'mrt'){ |
|||
state.pageList_Mrt = removePageListHandle(state.pageList_Mrt,data) |
|||
}else{ |
|||
state.pageList_Det = removePageListHandle(state.pageList_Det,data) |
|||
} |
|||
}, |
|||
} |
|||
|
|||
const actions = { |
|||
addMOrDShow({ commit }, option) { |
|||
commit('ADD_MORD_SHOW', {name:option.name + '-' + option.type,option:option}) |
|||
}, |
|||
removeMOrDShow({ commit }, option) { |
|||
commit('REMOVE_MORD_SHOW', {name:option.name + '-' + option.type,option:option}) |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
actions |
|||
} |
|||
|
|||
Loading…
Reference in new issue