@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/stock/moviment/ProductSelected.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <b-tabs>
+      <b-tab :title="title">
+        <div class="div-action">
+          <b-row>
+            <b-col sm="6">
+              <div class="input-container">
+                <input type="text" v-model="search" placeholder="Pesquisar..." />
+              </div>
+            </b-col>
+            <b-col sm="6">
+              <div class="text-right">
+                <Button _key="removeAll" type="danger" classIcon="fa-solid fa-trash" title="Excluir todos"
+                  :disabled="productSelected.length == 0" size="small" :clicked="removeAll" />
+              </div>
+            </b-col>
+          </b-row>
+        </div>
+        <ScrollBar :minHeight="300" :maxHeight="600">
+          <table class="table table-responsive-xs">
+            <thead>
+              <tr>
+                <th>
+                  <span class="title-header">Produto</span>
+                </th>
+                <th class="text-center">
+                  <span class="title-header">Patrimônio</span>
+                </th>
+                <th class="text-center">
+                  <span class="title-header">Qtd</span>
+                </th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody v-for="item in productSelectedFiltered">
+              <ItemProductSelected :item="item" :type="type" />
+            </tbody>
+            <tbody v-show="productSelectedFiltered.length == 0">
+              <tr>
+                <td colspan="12">
+                  <span>Nenhum produto adicionado!</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </ScrollBar>
+      </b-tab>
+      <b-tab title="Anexo">
+        <FileManager :showInModal="true" source="moviment" :genericId="genereteGuidTemp" />
+      </b-tab>
+    </b-tabs>
+  </div>
+
+</template>
+<script>
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import FileManager from "@nixweb/nixloc-ui/src/component/shared/file-manager/FileManager";
+
+import ItemProductSelected from "./ItemProductSelected.vue";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ProductSelected",
+  components: { Molded, ScrollBar, Button, ItemProductSelected, FileManager },
+  props: {
+    rentId: String,
+    title: String,
+    type: String,
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      search: "",
+      productSelectedFiltered: []
+    }
+  },
+  computed: {
+    ...mapGetters("generateMoviment", ["productSelectedByPeriod"]),
+    ...mapState("user", ["userLogged"]),
+    manageByPatrimony() {
+      return this.userLogged.parameterStock.manageByPatrimony;
+    },
+    productSelected() {
+      return this.productSelectedByPeriod;
+    },
+    genereteGuidTemp() {
+      var guidTemp = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0,
+          v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+      this.addGuidTemp(guidTemp);
+      return guidTemp;
+    },
+    applyFilter() {
+      const searchLower = this.search.toLowerCase();
+      this.productSelectedFiltered = this.productSelected.filter(item =>
+        item.productFullName.toLowerCase().includes(searchLower) ||
+        (item.barCode && item.barCode.toLowerCase().includes(searchLower))
+      );
+    }
+  },
+  methods: {
+    ...mapMutations("generateMoviment", [
+      "removeProductSelected",
+      "cleanProductSelected",
+      "addGuidTemp"
+    ]),
+    ...mapMutations("generic", ["removeLoading"]),
+    remove(item) {
+      this.removeProductSelected(item);
+    },
+    removeAll() {
+      this.cleanProductSelected();
+      this.removeLoading(["removeAll"]);
+    },
+  },
+  watch: {
+    search: {
+      handler() {
+        this.applyFilter();
+      },
+      deep: true,
+    },
+    productSelected: {
+      handler() {
+        this.productSelectedFiltered = this.productSelected;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  padding-left: 10px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.td-product {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 210px;
+}
+
+.td-bar-code {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50px;
+}
+
+.td-quantity {
+  width: 120px;
+}
+
+.div-action {
+  margin-bottom: 13px;
+}
+
+.div-title {
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 15px;
+}
+
+.input-container {
+  display: flex;
+  justify-content: center;
+  margin: 0px;
+}
+
+input {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border: 1px solid #E5E4E8;
+  border-radius: 20px;
+  outline: none;
+  font-size: 13px;
+  width: 300px;
+}
+</style>

package/src/components/modules/stock/moviment/RentAndSelected.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <br />
+    <SelectOptionPeriodRent
+      :rentId="rentId"
+      :showPeriodAll="false"
+    />
+    <br />
+    <Molded>
+      <ProductAdd
+        :rentId="rentId"
+        :type="type"
+        :statusPatrimony="statusPatrimony"
+      />
+    </Molded>
+    <br />
+    <b-row>
+      <b-col sm="6">
+        <ProductRent
+          :title="titleProductRent"
+          :type="type"
+        />
+      </b-col>
+      <b-col sm="6">
+        <ProductSelected
+          :title="titleProductSelected"
+          :type="type"
+        />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+
+import ProductAdd from "./ProductAdd.vue";
+import SelectOptionPeriodRent from "../../rental/period-rental/SelectOptionPeriodRent.vue";
+import ProductRent from "./ProductRent.vue";
+import ProductSelected from "./ProductSelected.vue";
+
+export default {
+  components: {
+    SelectOptionPeriodRent,
+    InputText,
+    ProductRent,
+    Molded,
+    ProductSelected,
+    ProductAdd,
+    SelectOptionPeriodRent,
+  },
+  name: "RentAndSelected",
+  props: {
+    rentId: String,
+    statusPatrimony: Number,
+    titleProductRent: String,
+    titleProductSelected: String,
+    type: String,
+  },
+};
+</script>

package/src/components/modules/stock/moviment/ReplacementPatrimony.vue

@@ -0,0 +1,273 @@
+<template>
+    <div class="main">
+        <div v-show="!success">
+            <div class="box-replace">
+                <div class="box-search rent">
+                    <h6 class="title">Patrimônio Atual</h6>
+                    <b-row>
+                        <b-col xs="12" sm="12" md="12" lg="8" xl="8">
+                            <div>
+                                <input type="text" name="search" placeholder="Digite o patrimônio atual..."
+                                    @keyup.enter.prevent="getFirstSearch()" v-model="firstSearch" />
+                                <Loading v-if="loadingRent" type="line" :center="false" />
+                            </div>
+                        </b-col>
+                        <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+                            <div class="div-btn">
+                                <Button _key="btnRent" color="white" backGroundColor="#B8860B"
+                                    classIcon="fa-solid fa-magnifying-glass" size="small" :clicked="getFirstSearch" />
+                                <Button _key="btnCleanRent" color="white" backGroundColor="#B8860B"
+                                    classIcon="fa-solid fa-broom" size="small" :clicked="cleanRent" />
+                            </div>
+                        </b-col>
+                    </b-row>
+                    <div class="div-legend title" v-if="!disabled">
+                        <i class="fas fa-box"></i>
+                        Substituir <b>{{ firstData.productFullName }}</b> referente a locação <b> Nº{{
+                            firstData.number }} {{
+                                firstData.customerFullName }} </b>
+                    </div>
+                </div>
+
+                <div class="box-search new" v-if="!disabled">
+                    <h6 class="title">Novo Patrimônio </h6>
+                    <b-row>
+                        <b-col xs="12" sm="12" md="12" lg="8" xl="8">
+                            <div>
+                                <input type="text" name="search" placeholder="Digite o novo patrimônio ..."
+                                    @keyup.enter.prevent="getPatrimony()" v-model="secondSearch" />
+                                <Loading v-if="loadingReplace" type="line" :center="false" />
+                            </div>
+                        </b-col>
+                        <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+                            <div class="div-btn">
+                                <Button _key="btnReplace" :disabled="disabled" color="white" backGroundColor="#00058B"
+                                    classIcon="fa-solid fa-magnifying-glass" size="small" :clicked="getPatrimony" />
+                                <Button _key="btnCleanReplace" :disabled="disabled" color="white"
+                                    backGroundColor="#00058B" classIcon="fa-solid fa-broom" size="small"
+                                    :clicked="cleanReplace" />
+                            </div>
+                        </b-col>
+                    </b-row>
+                    <div class="div-legend title" v-if="secondData.id">
+                        <i class="fas fa-box"></i>
+                        Patrimônio Nº <b>{{ secondData.barCode }}</b> referente o produto <b>{{
+                            secondData.product.typeProduct.name
+                            }} ({{ secondData.product.name }})</b>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center" v-if="!disabled">
+                <Button _key="btnTransfer" :disabled="!secondData.id" title="Substituir" color="white"
+                    backGroundColor="#156EBE" classIcon="fas fa-random" size="large" :clicked="replacePatrimony" />
+            </div>
+        </div>
+        <div v-show="success">
+            <div class="div-molded text-center">
+                <Molded>
+                    <div class="msg-success">Patrimônio substituído com sucesso!</div>
+                    <div class="icon-success">
+                        <i class="fa-light fa-circle-check"></i>
+                    </div>
+                    <div>
+                        <Button _key="btnBack" type="info" title="Voltar" classIcon="fa-solid fa-circle-arrow-left"
+                            size="small" :clicked="back" />
+                    </div>
+                    <br />
+                </Molded>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import { mapActions, mapMutations, mapState } from "vuex";
+
+export default {
+    name: "ReplacementPatrimony",
+    props: ["value"],
+    components: {
+        Button,
+        Molded,
+        Loading
+    },
+    data() {
+        return {
+            urlGetAll: "/api/v1/operational/search",
+            urlGetPatrimony: "/api/v1/stock/patrimony/get-by-barcode-replace",
+            urlReplace: "/api/v1/stock/patrimony-moviment/replace-patrimony",
+            firstSearch: "",
+            secondSearch: "",
+            firstData: { number: 0 },
+            secondData: {},
+            loadingRent: false,
+            loadingReplace: false,
+            success: false,
+        };
+    },
+    mounted() {
+        this.removeLoading(["panel"]);
+    },
+    computed: {
+        disabled() {
+            if (this.firstData.number > 0) {
+                return false;
+            } else { return true; }
+        }
+    },
+    methods: {
+        ...mapActions("generic", ["getApi", "putApi"]),
+        ...mapMutations("generic", ["addNotifications", "removeLoading"]),
+        getFirstSearch() {
+            this.loadingRent = true;
+            let params = {
+                url: this.urlGetAll,
+                obj: {
+                    filter: "patrimonyBarCode",
+                    search: this.firstSearch,
+                },
+            };
+            this.getApi(params).then((response) => {
+                if (response.content.length > 0) {
+                    this.firstData = response.content[0];
+                } else {
+                    this.addNotifications([{ message: "Patrimônio não encontrado!" }]);
+                    this.cleanRent();
+                }
+                this.removeLoading(["btnRent"]);
+                this.loadingRent = false;
+            });
+        },
+        getPatrimony() {
+            this.loadingReplace = true;
+            let params = {
+                url: this.urlGetPatrimony,
+                obj: {
+                    productId: this.firstData.productId,
+                    barCode: this.secondSearch,
+                },
+            };
+            this.getApi(params).then((response) => {
+                if (response.success) {
+                    this.secondData = response.content;
+                } else {
+                    this.cleanReplace();
+                }
+                this.removeLoading(["btnReplace"]);
+                this.loadingReplace = false;
+            });
+        },
+        replacePatrimony() {
+            let params = {
+                url: this.urlReplace,
+                obj: {
+                    id: this.firstData.patrimonyMovimentId,
+                    any: this.secondData.barCode
+                }
+            };
+            this.putApi(params).then((response) => {
+                if (response.success) {
+                    this.success = true;
+                }
+                this.removeLoading(["btnTransfer"]);
+            });
+        },
+        cleanRent() {
+            this.firstSearch = "";
+            this.firstData = { number: 0 };
+            this.loadingRent = false;
+            this.removeLoading(["btnRent", "btnCleanRent"]);
+        },
+        cleanReplace() {
+            this.secondSearch = "";
+            this.secondData = {};
+            this.loadingReplace = false;
+            this.removeLoading(["btnReplace", "btnCleanReplace"]);
+        },
+        back() {
+            this.success = false;
+            this.firstSearch = "";
+            this.secondSearch = "";
+            this.firstData = { number: 0 };
+            this.secondData = {};
+            this.removeLoading(["btnBack"]);
+        }
+    },
+};
+</script>
+
+<style scoped>
+.box-replace {
+    display: flex;
+    flex-direction: column;
+    width: 1200px;
+    margin: auto;
+    border-radius: 10px;
+    padding: 20px;
+}
+
+
+.box-search {
+    padding-left: 20px;
+    margin: 20px 0;
+    position: relative;
+    background-color: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    transition: transform 0.3s;
+    box-shadow: 0px 10px 100px -6px rgb(0 0 0 / 5%);
+}
+
+.molded-search {
+    border: 1px solid #CED4DA;
+    border-radius: 50px;
+}
+
+
+.rent {
+    border-left: 2px solid #B8860B;
+}
+
+.new {
+    border-left: 2px solid #00058B;
+}
+
+
+input {
+    width: 100%;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    padding-left: 20px;
+    margin: 10px;
+    border: 1px solid #ced4da;
+    border-radius: 50px;
+    transition: border-color 0.3s;
+}
+
+.div-btn {
+    margin-top: 20px;
+}
+
+.div-legend {
+    margin-left: 15px;
+}
+
+.div-molded {
+    width: 550px;
+    margin: auto;
+}
+
+.msg-success {
+    font-size: 18px;
+}
+
+.icon-success {
+    font-size: 55px;
+    color: #38a169;
+    margin-top: 10px;
+    margin-bottom: 15px;
+}
+</style>

package/src/components/modules/stock/moviment/SuccessMoviment.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <br />
+    <div class="text-center">
+      <div class="div-molded">
+        <Molded>
+          <div class="msg-success">{{ msgSuccess }}</div>
+          <div class="icon-success">
+            <i class="fa-light fa-circle-check"></i>
+          </div>
+          <div>
+            <Button _key="btnPrint" type="info" title="Imprimir" classIcon="fa-solid fa-print-magnifying-glass"
+              size="small" :clicked="executePrint" />
+          </div>
+          <br />
+        </Molded>
+      </div>
+    </div>
+    <PrintPreview v-if="print" module="MovementStock" :rentId="rentId" :movimentId="movimentId"
+      :onHideModal="onHideModal" />
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+
+import PrintPreview from "../../adm/document/PrintPreview.vue";
+
+import { mapState, mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "SuccessMoviment",
+  components: {
+    Button,
+    Molded,
+    PrintPreview,
+  },
+  props: {
+    msgSuccess: String,
+    rentId: String,
+    movimentId: String,
+  },
+  data() {
+    return {
+      print: false,
+      urlUpdate: "/api/v1/adm/attachment/update-guid-temp-to-moviment-id",
+    };
+  },
+  mounted() {
+    this.updateGuidTempToMovimentId();
+  },
+  computed: {
+    ...mapState("generateMoviment", ["guidTemp"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapActions("generic", ["putApi"]),
+    ...mapMutations("generateMoviment", ["addGuidTemp"]),
+    executePrint() {
+      this.print = true;
+      this.removeLoading(["btnPrint"]);
+    },
+    onHideModal() {
+      this.print = false;
+    },
+    updateGuidTempToMovimentId() {
+      let params = {
+        url: this.urlUpdate,
+        obj: {
+          id: this.guidTemp,
+          any: this.movimentId,
+        },
+        notNotifyToast: true
+      };
+      this.putApi(params).then((response) => {
+        this.addGuidTemp("");
+      });
+    }
+  },
+};
+</script>
+
+<style scoped>
+.div-molded {
+  width: 550px;
+  margin: auto;
+}
+
+.msg-success {
+  font-size: 18px;
+}
+
+.icon-success {
+  font-size: 55px;
+  color: #38a169;
+  margin-top: 10px;
+  margin-bottom: 15px;
+}
+</style>