<template>
|
<div class="layout-subpage-containter-compontent" ref="subpage">
|
<el-scrollbar>
|
<div class="subpage-outer">
|
<sub-home v-if="pages.indexOf('home')>=0" v-show="page==='home'" :key="pagesKey['home'] || 0" />
|
<sub-archives-goods v-if="pages.indexOf('archives-goods')>=0" v-show="page==='archives-goods'" :key="pagesKey['archives-goods'] || 0" />
|
<sub-archives-carriers v-if="pages.indexOf('archives-carriers')>=0" v-show="page==='archives-carriers'" :key="pagesKey['archives-carriers'] || 0" />
|
<sub-users-management v-if="pages.indexOf('users-management')>=0" v-show="page==='users-management'" :key="pagesKey['users-management'] || 0" />
|
<sub-special-management v-if="pages.indexOf('special-management')>=0" v-show="page==='special-management'" :key="pagesKey['special-management'] || 0" />
|
<sub-roles-management v-if="pages.indexOf('roles-management')>=0" v-show="page==='roles-management'" :key="pagesKey['roles-management'] || 0" />
|
<sub-permissions-management v-if="pages.indexOf('permissions-management')>=0" v-show="page==='permissions-management'" :key="pagesKey['permissions-management'] || 0" />
|
<sub-order-number-management v-if="pages.indexOf('order-number-management')>=0" v-show="page==='order-number-management'" :key="pagesKey['order-number-management'] || 0" />
|
<sub-dictionaries-management v-if="pages.indexOf('dictionaries-management')>=0" v-show="page==='dictionaries-management'" :key="pagesKey['dictionaries-management'] || 0" />
|
<sub-tasks-output-plan v-if="pages.indexOf('tasks-output-plan')>=0" v-show="page==='tasks-output-plan'" :key="pagesKey['tasks-output-plan'] || 0" />
|
<sub-tasks-output v-if="pages.indexOf('tasks-output')>=0" v-show="page==='tasks-output'" :key="pagesKey['tasks-output'] || 0" />
|
<sub-tasks-input v-if="pages.indexOf('tasks-input')>=0" v-show="page==='tasks-input'" :key="pagesKey['tasks-input'] || 0" />
|
<sub-tasks-carriers-input v-if="pages.indexOf('carriers-input')>=0" v-show="page==='carriers-input'" :key="pagesKey['carriers-input'] || 0" />
|
<sub-tasks-carriers-output v-if="pages.indexOf('carriers-output')>=0" v-show="page==='carriers-output'" :key="pagesKey['carriers-output'] || 0" />
|
<sub-tasks-virtual-input v-if="pages.indexOf('virtual-input')>=0" v-show="page==='virtual-input'" :key="pagesKey['virtual-input'] || 0" />
|
<sub-tasks-virtual-output v-if="pages.indexOf('virtual-output')>=0" v-show="page==='virtual-output'" :key="pagesKey['virtual-output'] || 0" />
|
<sub-statistics-inventory v-if="pages.indexOf('statistics-inventory')>=0" v-show="page==='statistics-inventory'" :key="pagesKey['statistics-inventory'] || 0" />
|
<sub-statistics-virtual-inventory v-if="pages.indexOf('statistics-virtual-inventory')>=0" v-show="page==='statistics-virtual-inventory'" :key="pagesKey['statistics-virtual-inventory'] || 0" />
|
<sub-statistics-in-out v-if="pages.indexOf('statistics-in-out')>=0" v-show="page==='statistics-in-out'" :key="pagesKey['statistics-in-out'] || 0" />
|
<sub-statistics-virtual-in-out v-if="pages.indexOf('statistics-virtual-in-out')>=0" v-show="page==='statistics-virtual-in-out'" :key="pagesKey['statistics-virtual-in-out'] || 0" />
|
<sub-statistics-agv v-if="pages.indexOf('statistics-agv')>=0" v-show="page==='statistics-agv'" :key="pagesKey['statistics-agv'] || 0" />
|
<sub-statistics-store-location v-if="pages.indexOf('statistics-store-location')>=0" v-show="page==='statistics-store-location'" :key="pagesKey['statistics-store-location'] || 0" />
|
<sub-statistics-equipments v-if="pages.indexOf('statistics-equipments')>=0" v-show="page==='statistics-equipments'" :key="pagesKey['statistics-equipments'] || 0" />
|
<sub-statistics-eqp-errs v-if="pages.indexOf('statistics-eqp-errs')>=0" v-show="page==='statistics-eqp-errs'" :key="pagesKey['statistics-eqp-errs'] || 0" />
|
<sub-statistics-overdue v-if="pages.indexOf('statistics-overdue')>=0" v-show="page==='statistics-overdue'" :key="pagesKey['statistics-overdue'] || 0" />
|
<sub-test v-if="pages.indexOf('test')>=0" v-show="page==='test'" :key="pagesKey['test'] || 0" />
|
<sub-error v-if="pageError" />
|
</div>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script>
|
import { defineAsyncComponent } from 'vue'
|
const SubTest = defineAsyncComponent(() => import('@/pages/test.vue'))
|
const SubHome = defineAsyncComponent(() => import('@/pages/home/Index.vue'))
|
const SubArchivesGoods = defineAsyncComponent(() => import('@/pages/archives/goods/Index.vue'))
|
const SubArchivesCarriers = defineAsyncComponent(() => import('@/pages/archives/carriers/Index.vue'))
|
const SubUsersManagement = defineAsyncComponent(() => import('@/pages/system/users/Index.vue'))
|
const SubSpecialManagement = defineAsyncComponent(() => import('@/pages/system/special/Index.vue'))
|
const SubRolesManagement = defineAsyncComponent(() => import('@/pages/system/roles/Index.vue'))
|
const SubOrderNumberManagement = defineAsyncComponent(() => import('@/pages/system/orderNo/Index.vue'))
|
const SubPermissionsManagement = defineAsyncComponent(() => import('@/pages/system/permissions/Index.vue'))
|
const SubDictionariesManagement = defineAsyncComponent(() => import('@/pages/system/dictionaries/Index.vue'))
|
const SubTasksOutputPlan = defineAsyncComponent(() => import('@/pages/tasks/outputPlan/Index.vue'))
|
const SubTasksOutput = defineAsyncComponent(() => import('@/pages/tasks/output/Index.vue'))
|
const SubTasksInput = defineAsyncComponent(() => import('@/pages/tasks/input/Index.vue'))
|
const SubTasksCarriersInput = defineAsyncComponent(() => import('@/pages/tasks/carriersInput/Index.vue'))
|
const SubTasksCarriersOutput = defineAsyncComponent(() => import('@/pages/tasks/carriresOutput/Index.vue'))
|
const SubTasksVirtualInput = defineAsyncComponent(() => import('@/pages/tasks/virtualInput/Index.vue'))
|
const SubTasksVirtualOutput = defineAsyncComponent(() => import('@/pages/tasks/virtualOutput/Index.vue'))
|
const SubStatisticsInventory= defineAsyncComponent(() => import('@/pages/statistics/inventory/Index.vue'))
|
const SubStatisticsVirtualInventory= defineAsyncComponent(() => import('@/pages/statistics/virtualInventory/Index.vue'))
|
const SubStatisticsInOut = defineAsyncComponent(() => import('@/pages/statistics/inout/Index.vue'))
|
const SubStatisticsVirtualInOut = defineAsyncComponent(() => import('@/pages/statistics/virtualInOut/Index.vue'))
|
const SubStatisticsAgv = defineAsyncComponent(() => import('@/pages/statistics/agv/Index.vue'))
|
const SubStatisticsStoreLocation = defineAsyncComponent(() => import('@/pages/statistics/storeLocation/Index.vue'))
|
const SubStatisticsEquipments = defineAsyncComponent(() => import('@/pages/statistics/equipments/Index.vue'))
|
const SubStatisticsEqpErrs = defineAsyncComponent(() => import('@/pages/statistics/eqpErrs/Index.vue'))
|
const SubStatisticsOverdue = defineAsyncComponent(() => import('@/pages/statistics/overdue/index.vue'))
|
const SubError = defineAsyncComponent(() => import('@/pages/NotFound.vue'))
|
export default {
|
name:'layoutSubpageContainterCompontent',
|
components:{
|
SubHome,
|
SubArchivesGoods,
|
SubArchivesCarriers,
|
SubUsersManagement,
|
SubSpecialManagement,
|
SubRolesManagement,
|
SubOrderNumberManagement,
|
SubPermissionsManagement,
|
SubDictionariesManagement,
|
SubTasksOutputPlan,
|
SubTasksOutput,
|
SubTasksInput,
|
SubTasksCarriersInput,
|
SubTasksCarriersOutput,
|
SubTasksVirtualInput,
|
SubTasksVirtualOutput,
|
SubStatisticsInventory,
|
SubStatisticsVirtualInventory,
|
SubStatisticsInOut,
|
SubStatisticsVirtualInOut,
|
SubStatisticsAgv,
|
SubStatisticsStoreLocation,
|
SubStatisticsEquipments,
|
SubStatisticsEqpErrs,
|
SubStatisticsOverdue,
|
SubTest,
|
SubError
|
},
|
data(){
|
return {
|
$dom:null,
|
pageSize:{},
|
page:'',
|
pages:[]
|
}
|
},
|
computed:{
|
pageError(){
|
let _pages = this.$store.getters['system/getActiveSubpages'];
|
let _page = this.$store.getters['system/getVisibleSubpage'];
|
this.pages = _pages;
|
this.page = _page;
|
if (_pages.indexOf(_page)<0) {
|
return true
|
} else {
|
return false
|
}
|
},
|
pagesKey(){
|
return this.$store.getters['system/getSubRefreshKey'];
|
}
|
},
|
provide(){
|
return {
|
getSubPageSize: () => this.pageSize
|
}
|
},
|
mounted() {
|
this.createEleResize()
|
},
|
beforeDestroy() {
|
this.destroyEleResize()
|
},
|
methods:{
|
createEleResize(){
|
this.$dom = this.$refs.subpage
|
this.pageSize = {
|
width:this.calSize(this.$dom.clientWidth,'width'),
|
height:this.calSize(this.$dom.clientHeight)
|
}
|
this.$utils.eleResize.on(this.$dom, this.eleListener);
|
},
|
eleListener(resize){
|
let res = {width:0,height:0}
|
try{
|
res.width = this.calSize(resize.target.__resizeTrigger__.clientWidth,'width');
|
res.height = this.calSize(resize.target.__resizeTrigger__.clientHeight);
|
}catch(e){
|
//TODO handle the exception
|
}
|
this.pageSize = res;
|
},
|
calSize(size,type='height'){
|
let res = 0;
|
if (type==='width') {
|
res = size - 48; /* 减去padding值 */
|
} else {
|
res = size - 32; /* 减去padding值 */
|
}
|
if (res<0) res = 0;
|
return res;
|
},
|
destroyEleResize(){
|
try{
|
this.$utils.eleResize.off(this.$dom, this.eleListener);
|
}catch(e){
|
//TODO handle the exception
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.layout-subpage-containter-compontent{
|
height: 100%;
|
overflow: auto;
|
.subpage-outer{
|
padding: 8px 24px 24px 24px;
|
}
|
}
|
</style>
|
