125 lines
1.8 KiB
Vue
125 lines
1.8 KiB
Vue
<template>
|
|
|
|
<div class="main">
|
|
|
|
<div> {{ CurrentKag.name || '' }}</div>
|
|
|
|
<div class="menu">
|
|
|
|
<my-button :class="{Active: menu.component=='History'} " @click="menu.component='History'" >Акты</my-button>
|
|
<my-button :class="{Active: menu.component=='Collect'} " @click="menu.component='Collect'" >Сборка</my-button>
|
|
<my-button :class="{Active: menu.component=='downloads'} " @click="menu.component='downloads'" >Загрузка</my-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<component v-if="kag" :is="menu.component"></component>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState,mapActions,mapMutations} from 'vuex'
|
|
import Collect from "./Collect.vue";
|
|
import downloads from "./downloads.vue";
|
|
import History from "./History.vue";
|
|
export default {
|
|
name: 'MainMenu',
|
|
components: {Collect,downloads,History},
|
|
|
|
data() {
|
|
return {
|
|
menu:{
|
|
component:'History',
|
|
} ,
|
|
|
|
|
|
|
|
|
|
}
|
|
},
|
|
|
|
props:{
|
|
id:String,
|
|
|
|
},
|
|
|
|
|
|
|
|
computed:{
|
|
|
|
...mapState({
|
|
|
|
data: state => state.ApiClass.data,
|
|
karArr: state => state.ApiClass.kagArr,
|
|
kag: state => state.ApiClass.kag,
|
|
}),
|
|
|
|
CurrentKag(){
|
|
return this.karArr.find(item=>item.firma==this.id);
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
methods:{
|
|
|
|
...mapMutations({
|
|
kagSet:'ApiClass/kagSet',
|
|
|
|
|
|
}),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted(){
|
|
|
|
this.kagSet(this.CurrentKag);//устанавливаем глобально выбранный kag
|
|
|
|
},
|
|
created(){
|
|
this.kagSet(null);
|
|
|
|
},
|
|
watch:{
|
|
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
}
|
|
.menu{
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
align-items: center;
|
|
|
|
}
|
|
.menu > button{
|
|
border: 1px solid #d3d3d3;
|
|
}
|
|
|
|
.Active{
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px #cbd6ee;
|
|
|
|
}
|
|
|
|
</style> |