formulario de compras

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>