@nixweb/nixloc-ui 1.10.0 → 1.12.0

package/@nixweb/nixloc-ui/src/component/template/ListViewWithDataHandler.vue

@@ -1,429 +1,429 @@
-<template>
-  <div>
-    <div :class="{ 'g-div-molded': showMolded }">
-      <b-row>
-        <b-col sm="12">
-          <div>
-            <!-- <HorizontalFilter v-if="showHorizontalFilter">
-              <div slot="content-filter-horizontal">
-                <slot name="content-filter-horizontal"></slot>
-              </div>
-            </HorizontalFilter>  -->
-            <TableTotalPerPage />
-          </div>
-        </b-col>
-      </b-row>
-      <br>
-      <b-row>
-        <b-col sm="8">
-          <div v-if="templateList.dragAndDrop">
-            <i class="fa-regular fa-maximize"></i> Clique e arraste para ordenar
-          </div>
-          <TableTotalization :totalization="content.totalization" />
-        </b-col>
-        <b-col sm="4">
-          <TableTotalRecords :totalRecords="content.totalRecords" />
-        </b-col>
-      </b-row>
-      <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
-      <BarFloating>
-        <div class="fixed-bar-options" v-show="selected.length > 0">
-          <div class="side-by-side">
-            <Button v-if="buttonRemove" key="remove" :title="`Remover  ${selected.length}`" type="danger" size="small"
-              :clicked="confirmRemoved" />
-          </div>
-          <div class="side-by-side">
-            <slot name="content-buttons-table-header"></slot>
-          </div>
-        </div>
-      </BarFloating>
-      <Table :header="templateList.headerTable" :data="content.data" :showChecks="templateList.showChecks"
-        :dragAndDrop="templateList.dragAndDrop">
-        <div slot="content-buttons-table">
-          <slot name="content-buttons-table"></slot>
-        </div>
-      </Table>
-    </div>
-    <br />
-    <Pagination _key="templateList" :totalRecords="content.totalRecords" />
-    <Modal title="Tem certeza que deseja remover?" :width="500" v-show="showModal('confirmRemoved')">
-      <Alert type="warning">
-        <span>
-          ATENÇÃO, todos os registros relacionados também serão excluídos/cancelados, esta ação é irreversível...
-        </span>
-      </Alert>
-      <InputText title="Digite Remover para confirmar" :maxLength="7" :required="false" v-model="confirmRemove" />
-      <Confirmation :isModal="false" :disabled="confirmRemove != 'Remover'" title="Você tem certeza?" type="danger"
-        :confirmed="removeSelected" />
-    </Modal>
-  </div>
-</template>
-
-<script>
-import Pagination from "@nixweb/nixloc-ui/src/component/shared/Pagination.vue";
-import TableTotalPerPage from "@nixweb/nixloc-ui/src/component/shared/TableTotalPerPage.vue";
-import Table from "../shared/Table.vue";
-import Button from "../forms/Button.vue";
-import FixedBar from "../layout/FixedBar.vue";
-import BarFloating from "@nixweb/nixloc-ui/src/component/layout/BarFloating.vue";
-import TableTotalRecords from "../shared/TableTotalRecords.vue";
-import TableTotalization from "../shared/TableTotalization.vue";
-import HorizontalFilter from "../shared/HorizontalFilter.vue";
-import Loading from "../shared/Loading.vue";
-import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
-import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
-
-import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
-
-export default {
-  name: "ListViewWithDataHandler",
-  props: {
-    templateList: Object,
-    propsParam: Object,
-    showMolded: {
-      type: Boolean,
-      default: true,
-    },
-    showHorizontalFilter: {
-      type: Boolean,
-      default: true,
-    },
-    buttonRemove: {
-      type: Boolean,
-      default: true,
-    },
-    isFilterStorage: {
-      type: Boolean,
-      default: false
-    }
-  },
-  components: {
-    HorizontalFilter,
-    TableTotalization,
-    TableTotalRecords,
-    Confirmation,
-    BarFloating,
-    Alert,
-    Modal,
-    Loading,
-    FixedBar,
-    Button,
-    Table,
-    InputText,
-    Pagination,
-    TableTotalPerPage
-  },
-  data() {
-    return {
-      content: {
-        data: [],
-        totalRecords: 0,
-      },
-      baseParams: {
-        search: "",
-        filter: "contains",
-        currentPage: 1,
-        totalPerPage: 10,
-      },
-      paramsFilter: [],
-      dynamicFilter: {},
-      confirmRemove: "",
-    };
-  },
-  created() {
-    var filter = this.getFilterStorage(this.$route.name);
-    if (filter) {
-      this.updateCurrentPage(filter.baseParams.currentPage);
-    }
-    this.getAll();
-  },
-  beforeDestroy() {
-    let search = { content: "", filter: { content: "Contém", id: "contains" } };
-    this.updateSearch(search);
-    this.cleanTags();
-  },
-  computed: {
-    ...mapState("generic", [
-      "selected",
-      "methodExecutedApi",
-      "search",
-      "executedSearch",
-      "clearedSearch",
-      "totalPerPage",
-      "selectStatic",
-      "paginations",
-      "filterStorage",
-      "tags"
-    ]),
-    ...mapGetters("generic", ["isLoading", "getFilterStorage", "event", "showModal"]),
-  },
-  methods: {
-    ...mapActions("generic", ["getApi", "orderAllApi", "deleteAllApi"]),
-    ...mapMutations("generic", [
-      "addEvent",
-      "addLoading",
-      "removeLoading",
-      "addSelected",
-      "updateSearch",
-      "updateCurrentPage",
-      "addTag",
-      "removeTag",
-      "cleanTags",
-      "openModal",
-      "hideModal",
-      "addFilterStorage",
-      "removeFilterStorage"
-    ]),
-    getAll() {
-      this.addLoading("loadingLine");
-      var filter = this.getFilterStorage(this.$route.name);
-
-      let self = this;
-      if (filter) {
-        this.baseParams = filter.baseParams;
-        this.dynamicFilter = filter.dynamicFilter;
-        this.propsParam = filter.propsParam;
-        this.paramsFilter = filter.paramsFilter;
-
-        setTimeout(function () {
-          let search = { content: filter.baseParams.search, filter: { content: "Contém", id: "contains" } };
-          self.updateSearch(search);
-          self.updateCurrentPage(filter.baseParams.currentPage);
-          self.generateDynamicFilter();
-        }, 200);
-      }
-
-      setTimeout(function () {
-        let obj = {
-          ...self.baseParams,
-          ...self.dynamicFilter,
-          ...self.propsParam,
-        };
-
-        let params = { url: self.templateList.urlGetApi, obj: obj };
-        self.getApi(params).then((response) => {
-          self.content = response.content;
-          setTimeout(function () {
-            self.removeLoading(["panel", "loadingLine", "btnSearch", "btnClean"]);
-          }, 350);
-        });
-      }, 250);
-    },
-    orderAll(data) {
-      if (this.templateList.urlOrderAllApi) {
-        let obj = { listIds: data.listIds };
-
-        let params = {
-          url: this.templateList.urlOrderAllApi,
-          obj: obj,
-          notNotifyToast: true,
-        };
-
-        this.orderAllApi(params).then((response) => { });
-      }
-    },
-    selectFilter(value) {
-
-      let fieldTarget = value.fieldTarget;
-
-      if (fieldTarget != "totalPerPage") {
-        let obj = { tag: value.tag, key: fieldTarget, value: value.value };
-
-        if (obj.value !== "") {
-          const existingIndex = this.paramsFilter.findIndex(item => item.key === obj.key);
-          if (existingIndex !== -1) {
-            // Se já existe, atualiza o valor
-            this.paramsFilter[existingIndex] = obj;
-          } else {
-            // Se não existe, adiciona ao paramsFilter
-            this.paramsFilter.push(obj);
-          }
-        }
-      } else { this.baseParams.currentPage = 1; }
-      this.convertToObjectAndGetAll();
-    },
-    convertToObjectAndGetAll() {
-      this.generateDynamicFilter();
-      this.getAll();
-    },
-    generateDynamicFilter() {
-      var result = {};
-      for (var i = 0; i < this.paramsFilter.length; i++) {
-        let key = this.paramsFilter[i].key;
-        let value = this.paramsFilter[i].value;
-        let tag = this.paramsFilter[i].tag;
-
-        if (key == "period") {
-          result["start"] = value.start;
-          result["end"] = value.end;
-
-          if (value.start)
-            tag = `Período: ${value.start}-${value.end}`;
-
-        } else {
-          result[key] = value;
-        }
-
-        result["tag"] = tag;
-
-        if (tag) {
-          this.removeTag(key); // para não duplicar
-          this.addTag({ tag: tag, key: key });
-        } else {
-          this.removeTag(key);
-        }
-      }
-
-      this.dynamicFilter = result;
-    },
-    confirmRemoved() {
-      this.confirmRemove = "";
-      this.removeLoading(["remove"]);
-      this.openModal("confirmRemoved");
-
-    },
-    removeSelected() {
-      let params = {
-        url: this.templateList.urlDeleteAllApi,
-        selected: this.selected,
-      };
-      this.deleteAllApi(params).then(() => {
-        this.hideModal("confirmRemoved");
-        this.removeLoading(["confirm"]);
-        this.addSelected([]);
-      });
-    },
-    cleanParams() {
-      this.baseParams.currentPage = 1;
-    },
-    addStorage() {
-      let obj =
-      {
-        key: this.$route.name,
-        baseParams: this.baseParams,
-        dynamicFilter: this.dynamicFilter,
-        propsParam: this.propsParam,
-        paramsFilter: this.paramsFilter
-      };
-
-      if (this.isFilterStorage)
-        this.addFilterStorage(obj);
-    }
-  },
-  watch: {
-    event: {
-      handler(event) {
-        if (event.name == "tableDragAndDrop") this.orderAll(event.data);
-
-        if (event.name == "stringFilter") {
-          this.getAll();
-        }
-
-        if (event.name == "tagRemoved") {
-
-          this.removeTag(event.data);
-
-          let filter = this.paramsFilter.filter(x => x.key != event.data);
-          this.paramsFilter = filter;
-
-          this.addStorage();
-          this.getAll();
-        }
-
-        if (event.name == "filterStorageRemoved") {
-
-          let self = this;
-          this.tags.forEach(tag => {
-            self.removeTag(tag.key);
-            self.addEvent({ name: "tagRemoved", data: tag.key });
-          });
-
-          this.paramsFilter = [];
-
-          this.baseParams.search = "";
-          this.baseParams.filter = "contains";
-          this.baseParams.currentPage = 1;
-          this.baseParams.totalPerPage = 10;
-          this.propsParam = {};
-
-
-
-          this.addStorage();
-          this.getAll();
-        }
-
-
-
-        if (event.name == "getAllListViewWithDataHandler") {
-          this.addSelected([]);
-          this.getAll();
-        }
-
-        if (event.name == "page-click") {
-          this.baseParams.currentPage = event.data;
-          this.addStorage();
-          this.getAll();
-        }
-      },
-      deep: true,
-    },
-    methodExecutedApi: function (value) {
-      if (
-        value === "postApi" ||
-        value === "putApi" ||
-        value === "deleteAllApi" ||
-        value === "deleteAllApiErro"
-      ) {
-        this.getAll();
-      }
-    },
-    executedSearch: function () {
-      this.addStorage();
-
-      this.baseParams.search = this.search.content;
-      if (this.search.filter.id) this.baseParams.filter = this.search.filter.id;
-      this.cleanParams();
-      this.getAll();
-    },
-    clearedSearch: function () {
-      this.baseParams.search = "";
-      this.baseParams.filter = "";
-      this.cleanParams();
-      this.getAll();
-    },
-    selectStatic: {
-      handler(value) {
-        this.selectFilter(value);
-      },
-      deep: true,
-    },
-    dynamicFilter: {
-      handler(value) {
-        this.addStorage();
-      },
-      deep: true,
-    },
-    propsParam: {
-      handler(value) {
-        this.addStorage();
-      },
-      deep: true,
-    },
-    paginations: {
-      handler(value) {
-        this.baseParams.totalPerPage = value.totalPerPage;
-        this.addStorage();
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.div-button-excluir {
-  padding-bottom: 10px;
-}
-</style>
+<template>
+  <div>
+    <div :class="{ 'g-div-molded': showMolded }">
+      <b-row>
+        <b-col sm="12">
+          <div>
+            <!-- <HorizontalFilter v-if="showHorizontalFilter">
+              <div slot="content-filter-horizontal">
+                <slot name="content-filter-horizontal"></slot>
+              </div>
+            </HorizontalFilter>  -->
+            <TableTotalPerPage />
+          </div>
+        </b-col>
+      </b-row>
+      <br>
+      <b-row>
+        <b-col sm="8">
+          <div v-if="templateList.dragAndDrop">
+            <i class="fa-regular fa-maximize"></i> Clique e arraste para ordenar
+          </div>
+          <TableTotalization :totalization="content.totalization" />
+        </b-col>
+        <b-col sm="4">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+      <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
+      <BarFloating>
+        <div class="fixed-bar-options" v-show="selected.length > 0">
+          <div class="side-by-side">
+            <Button v-if="buttonRemove" key="remove" :title="`Remover  ${selected.length}`" type="danger" size="small"
+              :clicked="confirmRemoved" />
+          </div>
+          <div class="side-by-side">
+            <slot name="content-buttons-table-header"></slot>
+          </div>
+        </div>
+      </BarFloating>
+      <Table :header="templateList.headerTable" :data="content.data" :showChecks="templateList.showChecks"
+        :dragAndDrop="templateList.dragAndDrop">
+        <div slot="content-buttons-table">
+          <slot name="content-buttons-table"></slot>
+        </div>
+      </Table>
+    </div>
+    <br />
+    <Pagination _key="templateList" :totalRecords="content.totalRecords" />
+    <Modal title="Tem certeza que deseja remover?" :width="500" v-show="showModal('confirmRemoved')">
+      <Alert type="warning">
+        <span>
+          ATENÇÃO, todos os registros relacionados também serão excluídos/cancelados, esta ação é irreversível...
+        </span>
+      </Alert>
+      <InputText title="Digite Remover para confirmar" :maxLength="7" :required="false" v-model="confirmRemove" />
+      <Confirmation :isModal="false" :disabled="confirmRemove != 'Remover'" title="Você tem certeza?" type="danger"
+        :confirmed="removeSelected" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Pagination from "@nixweb/nixloc-ui/src/component/shared/Pagination.vue";
+import TableTotalPerPage from "@nixweb/nixloc-ui/src/component/shared/TableTotalPerPage.vue";
+import Table from "../shared/Table.vue";
+import Button from "../forms/Button.vue";
+import FixedBar from "../layout/FixedBar.vue";
+import BarFloating from "@nixweb/nixloc-ui/src/component/layout/BarFloating.vue";
+import TableTotalRecords from "../shared/TableTotalRecords.vue";
+import TableTotalization from "../shared/TableTotalization.vue";
+import HorizontalFilter from "../shared/HorizontalFilter.vue";
+import Loading from "../shared/Loading.vue";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ListViewWithDataHandler",
+  props: {
+    templateList: Object,
+    propsParam: Object,
+    showMolded: {
+      type: Boolean,
+      default: true,
+    },
+    showHorizontalFilter: {
+      type: Boolean,
+      default: true,
+    },
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+    isFilterStorage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    HorizontalFilter,
+    TableTotalization,
+    TableTotalRecords,
+    Confirmation,
+    BarFloating,
+    Alert,
+    Modal,
+    Loading,
+    FixedBar,
+    Button,
+    Table,
+    InputText,
+    Pagination,
+    TableTotalPerPage
+  },
+  data() {
+    return {
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      baseParams: {
+        search: "",
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 10,
+      },
+      paramsFilter: [],
+      dynamicFilter: {},
+      confirmRemove: "",
+    };
+  },
+  created() {
+    var filter = this.getFilterStorage(this.$route.name);
+    if (filter) {
+      this.updateCurrentPage(filter.baseParams.currentPage);
+    }
+    this.getAll();
+  },
+  beforeDestroy() {
+    let search = { content: "", filter: { content: "Contém", id: "contains" } };
+    this.updateSearch(search);
+    this.cleanTags();
+  },
+  computed: {
+    ...mapState("generic", [
+      "selected",
+      "methodExecutedApi",
+      "search",
+      "executedSearch",
+      "clearedSearch",
+      "totalPerPage",
+      "selectStatic",
+      "paginations",
+      "filterStorage",
+      "tags"
+    ]),
+    ...mapGetters("generic", ["isLoading", "getFilterStorage", "event", "showModal"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "orderAllApi", "deleteAllApi"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "addLoading",
+      "removeLoading",
+      "addSelected",
+      "updateSearch",
+      "updateCurrentPage",
+      "addTag",
+      "removeTag",
+      "cleanTags",
+      "openModal",
+      "hideModal",
+      "addFilterStorage",
+      "removeFilterStorage"
+    ]),
+    getAll() {
+      this.addLoading("loadingLine");
+      var filter = this.getFilterStorage(this.$route.name);
+
+      let self = this;
+      if (filter) {
+        this.baseParams = filter.baseParams;
+        this.dynamicFilter = filter.dynamicFilter;
+        this.propsParam = filter.propsParam;
+        this.paramsFilter = filter.paramsFilter;
+
+        setTimeout(function () {
+          let search = { content: filter.baseParams.search, filter: { content: "Contém", id: "contains" } };
+          self.updateSearch(search);
+          self.updateCurrentPage(filter.baseParams.currentPage);
+          self.generateDynamicFilter();
+        }, 200);
+      }
+
+      setTimeout(function () {
+        let obj = {
+          ...self.baseParams,
+          ...self.dynamicFilter,
+          ...self.propsParam,
+        };
+
+        let params = { url: self.templateList.urlGetApi, obj: obj };
+        self.getApi(params).then((response) => {
+          self.content = response.content;
+          setTimeout(function () {
+            self.removeLoading(["panel", "loadingLine", "btnSearch", "btnClean"]);
+          }, 350);
+        });
+      }, 250);
+    },
+    orderAll(data) {
+      if (this.templateList.urlOrderAllApi) {
+        let obj = { listIds: data.listIds };
+
+        let params = {
+          url: this.templateList.urlOrderAllApi,
+          obj: obj,
+          notNotifyToast: true,
+        };
+
+        this.orderAllApi(params).then((response) => { });
+      }
+    },
+    selectFilter(value) {
+
+      let fieldTarget = value.fieldTarget;
+
+      if (fieldTarget != "totalPerPage") {
+        let obj = { tag: value.tag, key: fieldTarget, value: value.value };
+
+        if (obj.value !== "") {
+          const existingIndex = this.paramsFilter.findIndex(item => item.key === obj.key);
+          if (existingIndex !== -1) {
+            // Se já existe, atualiza o valor
+            this.paramsFilter[existingIndex] = obj;
+          } else {
+            // Se não existe, adiciona ao paramsFilter
+            this.paramsFilter.push(obj);
+          }
+        }
+      } else { this.baseParams.currentPage = 1; }
+      this.convertToObjectAndGetAll();
+    },
+    convertToObjectAndGetAll() {
+      this.generateDynamicFilter();
+      this.getAll();
+    },
+    generateDynamicFilter() {
+      var result = {};
+      for (var i = 0; i < this.paramsFilter.length; i++) {
+        let key = this.paramsFilter[i].key;
+        let value = this.paramsFilter[i].value;
+        let tag = this.paramsFilter[i].tag;
+
+        if (key == "period") {
+          result["start"] = value.start;
+          result["end"] = value.end;
+
+          if (value.start)
+            tag = `Período: ${value.start}-${value.end}`;
+
+        } else {
+          result[key] = value;
+        }
+
+        result["tag"] = tag;
+
+        if (tag) {
+          this.removeTag(key); // para não duplicar
+          this.addTag({ tag: tag, key: key });
+        } else {
+          this.removeTag(key);
+        }
+      }
+
+      this.dynamicFilter = result;
+    },
+    confirmRemoved() {
+      this.confirmRemove = "";
+      this.removeLoading(["remove"]);
+      this.openModal("confirmRemoved");
+
+    },
+    removeSelected() {
+      let params = {
+        url: this.templateList.urlDeleteAllApi,
+        selected: this.selected,
+      };
+      this.deleteAllApi(params).then(() => {
+        this.hideModal("confirmRemoved");
+        this.removeLoading(["confirm"]);
+        this.addSelected([]);
+      });
+    },
+    cleanParams() {
+      this.baseParams.currentPage = 1;
+    },
+    addStorage() {
+      let obj =
+      {
+        key: this.$route.name,
+        baseParams: this.baseParams,
+        dynamicFilter: this.dynamicFilter,
+        propsParam: this.propsParam,
+        paramsFilter: this.paramsFilter
+      };
+
+      if (this.isFilterStorage)
+        this.addFilterStorage(obj);
+    }
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "tableDragAndDrop") this.orderAll(event.data);
+
+        if (event.name == "stringFilter") {
+          this.getAll();
+        }
+
+        if (event.name == "tagRemoved") {
+
+          this.removeTag(event.data);
+
+          let filter = this.paramsFilter.filter(x => x.key != event.data);
+          this.paramsFilter = filter;
+
+          this.addStorage();
+          this.getAll();
+        }
+
+        if (event.name == "filterStorageRemoved") {
+
+          let self = this;
+          this.tags.forEach(tag => {
+            self.removeTag(tag.key);
+            self.addEvent({ name: "tagRemoved", data: tag.key });
+          });
+
+          this.paramsFilter = [];
+
+          this.baseParams.search = "";
+          this.baseParams.filter = "contains";
+          this.baseParams.currentPage = 1;
+          this.baseParams.totalPerPage = 10;
+          this.propsParam = {};
+
+
+
+          this.addStorage();
+          this.getAll();
+        }
+
+
+
+        if (event.name == "getAllListViewWithDataHandler") {
+          this.addSelected([]);
+          this.getAll();
+        }
+
+        if (event.name == "page-click") {
+          this.baseParams.currentPage = event.data;
+          this.addStorage();
+          this.getAll();
+        }
+      },
+      deep: true,
+    },
+    methodExecutedApi: function (value) {
+      if (
+        value === "postApi" ||
+        value === "putApi" ||
+        value === "deleteAllApi" ||
+        value === "deleteAllApiErro"
+      ) {
+        this.getAll();
+      }
+    },
+    executedSearch: function () {
+      this.addStorage();
+
+      this.baseParams.search = this.search.content;
+      if (this.search.filter.id) this.baseParams.filter = this.search.filter.id;
+      this.cleanParams();
+      this.getAll();
+    },
+    clearedSearch: function () {
+      this.baseParams.search = "";
+      this.baseParams.filter = "";
+      this.cleanParams();
+      this.getAll();
+    },
+    selectStatic: {
+      handler(value) {
+        this.selectFilter(value);
+      },
+      deep: true,
+    },
+    dynamicFilter: {
+      handler(value) {
+        this.addStorage();
+      },
+      deep: true,
+    },
+    propsParam: {
+      handler(value) {
+        this.addStorage();
+      },
+      deep: true,
+    },
+    paginations: {
+      handler(value) {
+        this.baseParams.totalPerPage = value.totalPerPage;
+        this.addStorage();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-button-excluir {
+  padding-bottom: 10px;
+}
+</style>