formulario de compras

APP/assets/sass/dashboard/custom/_fixed-plugin.scss

@@ -2,9 +2,9 @@
     position: fixed;
     right: 0;
     width: 64px;
-    background: rgba(0,0,0,.3);
+    background: rgba(12, 44, 133, 0.5);
     z-index: 1031;
-    border-radius: 8px 0 0 8px;
+    border-radius: 10px 10px 10px 10px;
     text-align: center;
     top: 130px;
 
@@ -28,7 +28,7 @@
         top: -52px !important;
         width: 290px;
         border-radius: 0.1875rem;
-        padding: 0 10px;
+        padding: 0 0;
         background: linear-gradient($black, $black-states);
     }
 

APP/components/Formularios/Fcompras.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="fixed-plugin" v-click-outside="closeDropDown">
+    <div class="dropdown show-dropdown" :class="{ show: isOpen }">
+      <a data-toggle="dropdown" class="settings-icon">
+        <i class="fa fa-plus fa-2x" @click="toggleDropDown"> </i>
+      </a>
+      <span class="dropdown-menu" :class="{ show: isOpen }">
+        <div class="color_fondo p-3">
+          <base-input
+            label="Fecha"
+            v-model="newCompra.fecha"
+            type="Date"
+            
+          ></base-input>
+          <base-input
+            label="Descripcion"
+            v-model="newCompra.detalle"
+          ></base-input>
+          <base-input
+            label="Valor"
+            type="Number"
+            v-model="newCompra.valor"
+          ></base-input>
+          <base-input label="Metodo de pago">
+            <select class="form-control" v-model="newCompra.metodo_pago">
+              <option v-for="metodo in metodos_pago">
+                {{ metodo.metodo }}
+              </option>
+            </select>
+          </base-input>
+          <base-input label="categoría">
+            <select class="form-control" v-model="newCompra.categoria">
+              <option v-for="categoria in categorias">
+                {{ categoria.ctg }}
+              </option>
+            </select>
+          </base-input>
+          <base-button
+            type="primary"
+            class="mb-3 col-12"
+            size="lg"
+            @click="saveCompra()"
+            >Guardar</base-button
+          >
+        </div>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Fcompras",
+  props: ["categorias", "metodos_pago", "newCompra", "saveCompra"],
+  data() {
+    return {
+      isOpen: false,
+      
+    };
+  },
+  methods: {
+    toggleDropDown() {
+      this.isOpen = !this.isOpen;
+    },
+    closeDropDown() {
+      this.isOpen = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.settings-icon {
+  cursor: pointer;
+}
+
+.badge-vue {
+  background-color: #ffffff;
+}
+
+.color_fondo {
+  background-color: #ffffff;
+}
+</style>

APP/components/Formularios/Prueba.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="fixed-plugin" v-click-outside="closeDropDown">
+    <div class="dropdown show-dropdown" :class="{ show: isOpen }">
+      <a data-toggle="dropdown" class="settings-icon">
+        <i class="fa fa-cog fa-2x" @click="toggleDropDown"> </i>
+      </a>
+      <ul class="dropdown-menu" :class="{ show: isOpen }">
+        
+            <base-input label="Hola"></base-input>
+    
+
+     </ul>
+    </div>
+  </div>
+</template>
+<script>
+  
+  export default {
+    name: 'Prueba',
+    
+    data() {
+      return {
+        isOpen: false,
+        
+      };
+    },
+    methods: {
+      toggleDropDown() {
+        this.isOpen = !this.isOpen;
+      },
+      closeDropDown() {
+        this.isOpen = false;
+      },
+
+    }
+  };
+</script>
+<style scoped lang="scss">
+  @import '~@/assets/sass/dashboard/custom/variables';
+
+  .settings-icon {
+    cursor: pointer;
+  }
+
+  .badge-vue {
+    background-color: $vue;
+  }
+</style>

APP/components/Layout/SidebarSharePlugin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed-plugin" v-click-outside="closeDropDown">
+  <div class="" v-click-outside="closeDropDown">
     <div class="dropdown show-dropdown" :class="{ show: isOpen }">
       <a data-toggle="dropdown" class="settings-icon">
         <i class="fa fa-cog fa-2x" @click="toggleDropDown"> </i>

APP/layouts/default.vue

@@ -47,7 +47,7 @@
       </template>
     </side-bar>
     <!--Share plugin (for demo purposes). You can remove it if don't plan on using it-->
-    <sidebar-share :background-color.sync="sidebarBackground"> </sidebar-share>
+    <!-- <sidebar-share :background-color.sync="sidebarBackground"> </sidebar-share> -->
     <div class="main-panel" :data="sidebarBackground">
       <dashboard-navbar></dashboard-navbar>
       <router-view name="header"></router-view>

APP/pages/compras.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
+   
     <div class="row">
-      <card class="col-8">
+      <card class="col-12">
         <el-table
           :data="
             compras.filter(
@@ -63,36 +64,16 @@
         </el-table>
       </card>
 
-      <card class="col-4">
-        <base-input
-          label="Fecha"
-          v-model="newCompra.fecha"
-          type="Date"
-        ></base-input>
-        <base-input
-          label="Descripcion"
-          v-model="newCompra.detalle"
-        ></base-input>
-        <base-input
-          label="Valor"
-          type="Number"
-          v-model="newCompra.valor"
-        ></base-input>
-        <base-input label="Metodo de pago">
-          <select class="form-control" v-model="newCompra.metodo_pago">
-            <option v-for="metodo in metodos_pago">{{ metodo.metodo }}</option>
-          </select>
-        </base-input>
-        <base-input label="categoría">
-          <select class="form-control" v-model="newCompra.categoria">
-            <option v-for="categoria in categorias">{{ categoria.ctg }}</option>
-          </select>
-        </base-input>
-        <base-button type="primary" class="mb-3" size="lg" @click="saveCompra()"
-          >Guardar</base-button
-        >
-      </card>
+      
+        <Fcompras 
+        :categorias="categorias"
+        :metodos_pago="metodos_pago"
+        :newCompra="newCompra"
+        :saveCompra="saveCompra"
+        />
+      
     </div>
+ 
   </div>
 </template>
 <script>
@@ -108,7 +89,7 @@ export default {
   data() {
     return {
       newCompra: {
-        fecha: "",
+        fecha:"",
         detalle: "",
         valor: 0,
         metodo_pago: "",
@@ -140,6 +121,9 @@ export default {
       ],
     };
   },
+  mounted() {
+    this.getDate()
+  },
   methods: {
     saveCompra() {
       var compra = JSON.stringify(this.newCompra);
@@ -150,6 +134,15 @@ export default {
       this.compras.splice(index, 1);
       //console.log(index)
     },
+    getDate(){
+      let data = new Date();
+      let year= data.getFullYear();
+      let month = (data.getMonth() + 1)<9?"0"+(data.getMonth() + 1):(data.getMonth() + 1)
+      let day = data.getDate()<9?"0"+data.getDate():data.getDate()
+      let dataF=`${year}-${month}-${day}`
+      this.newCompra.fecha=dataF;
+    }
+
   },
 };
 </script>