c1

www/first.loc/src/components/TSD/MainMenu.vue

@@ -0,0 +1,125 @@
+<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>