【东阳pc】内嵌带缓存主子表暂存

fe/PC/public/config.js

@@ -24,7 +24,16 @@ window.SITE_CONFIG['versionUrl'] = 'http://dev.ccwin-in.com:60070'
 window.SITE_CONFIG['companyName'] = '长春一汽富维东阳汽车塑料零部件（安徽）有限公司'
 // 接口看板地址
 window.SITE_CONFIG['interfaceBoardUrl'] = 'http://dev.ccwin-in.com:60090/'
-// window.SITE_CONFIG['interfaceBoardUrl'] = 'http://dev.ccwin-in.com:60069/'
+// 主子表
+window.SITE_CONFIG['MOrDFasterUrl_store'] = 'http://dev.ccwin-in.com:60075/' // 查看store外链地址
+window.SITE_CONFIG['MOrDFasterUrl_job'] = 'http://dev.ccwin-in.com:60075/' // 查看job外链地址
+window.SITE_CONFIG['MOrDFasterUrl_inventory'] = 'http://dev.ccwin-in.com:60075/' // 查看inventory外链地址
+// 显示主子表按钮的页面，前缀为路由名称。
+// 后缀_mrt显示【查询主表】；后缀_det显示【查询子表】
+window.SITE_CONFIG['pageHasMOrDList'] = [
+    // 'PurchaseOrder_mrt','PurchaseOrder_det',//采购订单信息
+]
+
 
 // mock
 // window.SITE_CONFIG['apifoxToken'] = 'NXHNi5mp0dnUHGt0wkCrjvfcidsFKV33'

fe/PC/src/App.vue

@@ -1,12 +1,19 @@
 <template>
   <div id="app">
     <router-view />
+
+    <!-- 查看主表、查看子表  有缓存的iframe -->
+    <cacheIframeForMOrD></cacheIframeForMOrD>
   </div>
 </template>
 
 <script>
+import cacheIframeForMOrD from "@/components/cacheIframeForMOrD"
 export default {
-  name: 'App'
+  name: 'App',
+  components:{
+    cacheIframeForMOrD
+  },
 }
 localStorage.setItem('base',window.SITE_CONFIG['base'])
 localStorage.setItem('base_direct',window.SITE_CONFIG['base_direct'])
@@ -19,6 +26,10 @@ localStorage.setItem('apifoxToken',window.SITE_CONFIG['apifoxToken'])
 localStorage.setItem('reportsUrl',window.SITE_CONFIG['reportsUrl'])
 localStorage.setItem('companyName',window.SITE_CONFIG['companyName'])
 localStorage.setItem('interfaceBoardUrl',window.SITE_CONFIG['interfaceBoardUrl'])
+localStorage.setItem('MOrDFasterUrl_store',window.SITE_CONFIG['MOrDFasterUrl_store'])
+localStorage.setItem('MOrDFasterUrl_job',window.SITE_CONFIG['MOrDFasterUrl_job'])
+localStorage.setItem('MOrDFasterUrl_inventory',window.SITE_CONFIG['MOrDFasterUrl_inventory'])
+localStorage.setItem('pageHasMOrDList',window.SITE_CONFIG['pageHasMOrDList'])
 
 </script>
 <style lang="scss">

fe/PC/src/components/cacheIframeForMOrD/index.vue

@@ -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>

fe/PC/src/components/currenButton/index.vue

@@ -46,6 +46,11 @@ export default {
       default: false
     }
   },
+  watch: {
+    Butttondata(n,o) {
+      this.initButtonsData()
+    }
+  },
   data () {
     return {
       buttonsLeft:null,//左侧按钮数据

fe/PC/src/mixins/TableHeaderMixins.js

@@ -131,6 +131,50 @@ export const TableHeaderMixins = {
       else if(val == 'custom'){
         item.customHandle()
       }
+      // 查看主表
+      if(val == 'showMrt'){
+        // this.$store.dispatch('outerIframeForMOrD/removeMOrDShow', {name:this.$route.name,type:'det'})
+        this.$store.dispatch('outerIframeForMOrD/addMOrDShow', {
+          name:this.$route.name,
+          type:'mrt',
+          moudle:this.getMOrDUrlMoudle(),
+          listUrl:this.getMOrDUrlSuffix()
+        })
+      }
+      // 查看子表
+      if(val == 'showDet'){
+        // this.$store.dispatch('outerIframeForMOrD/removeMOrDShow', {name:this.$route.name,type:'mrt'})
+        this.$store.dispatch('outerIframeForMOrD/addMOrDShow', {
+          name:this.$route.name,
+          type:'det',
+          moudle:this.getMOrDUrlMoudle(),
+          listUrl:this.getMOrDUrlSuffix()
+        })
+      }
+    },
+    // 获取主子表列表url模块
+    getMOrDUrlMoudle(url){
+      let _url = url || this.URL
+      let _type = null
+      if(_url.indexOf('wms/store/') >= 0){
+        _type = 'store'
+      }
+      else if(_url.indexOf('wms/job/') >= 0){
+        _type = 'job'
+      }
+      else if(_url.indexOf('wms/inventory/') >= 0){
+        _type = 'inventory'
+      }
+      return _type
+    },
+    // 获取主子表列表url后缀
+    getMOrDUrlSuffix(){
+      let _url = this.MOrDURL || this.URL
+      let _suffix = null
+      let _moudle = this.getMOrDUrlMoudle()
+      let _index = _url.indexOf(_moudle) + _moudle.length + 1
+      _suffix = _url.slice(_index,_url.length)
+      return _moudle + '-' + _suffix
     },
     // 快速搜索按钮
     quicklySearchClick(val,option,searchOverallRef){

fe/PC/src/mixins/TableMixins.js

@@ -42,8 +42,38 @@ export const tableMixins = {
     }
   },
   methods: {
+    // 批量添加判断显示主子表默认按钮、字段设置
+    initPagingHeaderBtn(){
+      let _allBtns = []
+      this.currenButtonData.forEach(item => {
+        _allBtns.push(item.name)
+      });
+      if(_allBtns.indexOf('showMrt') < 0){
+        this.currenButtonData = [
+          ...this.currenButtonData,
+          {
+            label: "查看主表",
+            name: "showMrt",
+            size: "small",
+            hide: ()=>{return localStorage.getItem('pageHasMOrDList').indexOf(this.$route.name+'_mrt') < 0}
+          },
+        ]
+      }
+      if(_allBtns.indexOf('showDet') < 0){
+        this.currenButtonData = [
+          ...this.currenButtonData,
+          {
+            label: "查看子表",
+            name: "showDet",
+            size: "small",
+            hide: ()=>{return localStorage.getItem('pageHasMOrDList').indexOf(this.$route.name+'_det') < 0}
+          },
+        ]
+      }
+    },
     //渲染数据
     paging(callback) {
+      this.initPagingHeaderBtn()
       this.Loading.tableLoading = true;
       this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount,
         getPageList(this.PageListParams, this.URL).then(res => {

fe/PC/src/store/getters.js

@@ -12,6 +12,9 @@ const getters = {
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
   errorLogs: state => state.errorLog.logs,
-  dictionaries: state => state.dictionaries.dict
+  dictionaries: state => state.dictionaries.dict,
+  currentShowMrtOrDet: state => state.outerIframeForMOrD.showMrtOrDet,//当前展开的主表/子表集合
+  pageListMrt: state => state.outerIframeForMOrD.pageList_Mrt,//所有有【查看主表】的页面配置
+  pageListDet: state => state.outerIframeForMOrD.pageList_Det,//所有有【查看子表】的页面配置
 }
 export default getters

fe/PC/src/store/modules/outerIframeForMOrD.js

@@ -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
+}
+