@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/tax-document/nfe/NfeCreateUpdate.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="margin">
+    <br />
+    <Button v-if="id" _key="btnNfseCreate" title="Nfe" classIcon="fas fa-plus-circle" type="primary" size="small"
+      eventName="rentCreate" :clicked="newInvoice" />
+    <DropdownOptionsNfs v-if="id" type="nfe" :nf="nfe" />
+    <div v-if="id">
+      <br />
+      <b-row>
+        <b-col sm="5">
+          <Badge v-if="nfe.number" :title="'Nº' + nfe.number.toString()" type="primary" size="medium" />
+          <Badge :title="titleStatus" :type="typeStatus" size="small" />
+        </b-col>
+      </b-row>
+      <br>
+      <NfeTotalization :nfeId="id" />
+      <div class="div-message-rejection" v-if="nfe.status == 3">
+        <Alert type="danger">
+          <span>
+            {{ nfe.messageRejection }}
+          </span>
+        </Alert>
+      </div>
+    </div>
+    <Molded>
+      <b-row>
+        <b-col sm="4">
+          <RadioGroup :formName="formName" field="group" :options="[
+            { text: 'Entrada', value: false },
+            { text: 'Saída', value: true },
+          ]" v-model="nfe.output" />
+        </b-col>
+        <b-col sm="8">
+          <RadioGroup :formName="formName" field="group" :options="[
+            { text: 'Operação Interna', value: 1 },
+            { text: 'Operação Interestadual', value: 2 },
+          ]" v-model="nfe.codigoIdentificacaoDestino" />
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="4">
+          <Select title="Natureza da Operação" field="type" :formName="formName" :required="false"
+            url="/api/v1/tax-document/nature-operation/select-all" v-model="nfe.natureOperation"
+            nameNewRegister="natureOperationCreateUpdate" titleNewRegister="Natureza da Operação"
+            :widthNewRegister="500" :heightNewRegister="250">
+            <NatureOperationCreateUpdate :registerInSelect="true" v-model="nfe.natureOperation" />
+          </Select>
+        </b-col>
+        <b-col sm="8">
+          <Select title="Destino (CFOP)" field="type" :formName="formName" :required="true"
+            url="/api/v1/tax-document/cfop/select-all" v-model="nfe.codeDestination" nameNewRegister="cfopCreateUpdate"
+            titleNewRegister="CFOP" :widthNewRegister="600" :heightNewRegister="250">
+            <CfopCreateUpdate :registerInSelect="true" v-model="nfe.codeDestination" />
+          </Select>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="12">
+          <CustomerWithCreate :formName="formName" :disabled="disabled" v-model="nfe.customer" />
+        </b-col>
+      </b-row>
+    </Molded>
+    <br>
+    <b-tabs v-if="id">
+      <b-tab title="Produto">
+        <ItemsNfeCreate v-if="!disabled" :nfe="nfe" />
+        <br>
+        <ItemsNfeList :disabled="disabled" :nfeId="id" />
+      </b-tab>
+      <b-tab title="Observações">
+        <b-row>
+          <b-col sm="12">
+            <TextArea title="Observações" field="observation" :disabled="disabled" :required="false"
+              v-model="nfe.observation" />
+          </b-col>
+        </b-row>
+      </b-tab>
+    </b-tabs>
+    <br />
+  </div>
+</template>
+
+<script>
+import NfeTotalization from './NfeTotalization.vue'
+
+
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Badge from "@nixweb/nixloc-ui/src/component/layout/Badge.vue";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import TextArea from "@nixweb/nixloc-ui/src/component/forms/TextArea";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import DropdownOptionsNfs from '../shared/DropdownOptionsNfs.vue'
+
+import CfopCreateUpdate from '../cfop/CfopCreateUpdate.vue'
+import NatureOperationCreateUpdate from '../nature-operation/NatureOperationCreateUpdate.vue'
+import CustomerWithCreate from "../../rental/shared/CustomerWithCreate.vue";
+import ItemsNfeCreate from '../items-nfe/ItemsNfeCreate.vue'
+import ItemsNfeList from '../items-nfe/ItemsNfeList.vue'
+
+import Nfe from "@/components/modules/tax-document/nfe/Nfe.js";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "NfeCreateUpdate",
+  components: {
+    Molded,
+    Button,
+    Badge,
+    SelectStatic,
+    Select,
+    RadioGroup,
+    Alert,
+    InputText,
+    CustomerWithCreate,
+    InputDecimal,
+    TextArea,
+    DropdownOptionsNfs,
+    ItemsNfeCreate,
+    ItemsNfeList, NatureOperationCreateUpdate, CfopCreateUpdate, NfeTotalization
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      formName: "nfseCreateUpdate",
+      nfe: new Nfe(),
+      urlCreate: "/api/v1/tax-document/nfe/create",
+      urlUpdate: "/api/v1/tax-document/nfe/update",
+      urlGetById: "/api/v1/tax-document/nfe/get-by-id",
+      tabIndex: 0,
+    }
+  },
+  created() {
+    if (this.id) this.getById();
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event", "isLoading"]),
+    titleStatus() {
+      if (this.nfe.status == 1) return "Autorizada";
+      if (this.nfe.status == 2) return "Concluída";
+      if (this.nfe.status == 3) return "Rejeitada";
+      if (this.nfe.status == 4) return "Cancelada";
+      if (this.nfe.status == 5) return "Em processamento";
+      if (this.nfe.status == 6) return "Pendente";
+    },
+    typeStatus() {
+      if (this.nfe.status == 1) return "blue";
+      if (this.nfe.status == 2) return "success";
+      if (this.nfe.status == 3) return "danger";
+      if (this.nfe.status == 4) return "danger";
+      if (this.nfe.status == 5) return "info";
+      if (this.nfe.status == 6) return "warning";
+    },
+    disabled() {
+      if (this.nfe.status == 6 || !this.id) return false;
+      return true;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi", "getApi"]),
+    ...mapMutations("generic", ["removeLoading", "hideVodal"]),
+    ...mapMutations("validation", ["resetValidation", "removeFormDirty"]),
+    create() {
+      let params = { url: this.urlCreate, obj: this.nfe };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.$router.replace({
+            name: "nfeUpdate",
+            params: { id: response.content.id },
+          });
+        }
+        this.removeLoading(["saveSaveCancel"]);
+      });
+    },
+    update() {
+      let params = { url: this.urlUpdate, obj: this.nfe };
+      this.putApi(params).then(() => {
+        this.removeLoading(["saveSaveCancel"]);
+      });
+    },
+    getById() {
+      let params = { url: this.urlGetById, obj: { id: this.id } };
+      this.getApi(params).then((response) => {
+        this.nfe.update(response.content);
+        let self = this;
+        setTimeout(function () {
+          self.removeLoading(["panel"]);
+          self.removeFormDirty();
+        }, 100);
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "saveSaveCancel") {
+          if (!this.id) this.create();
+          if (this.id) this.update();
+        }
+
+        if (event.name == "customerOnRent") {
+          if (!this.id) this.create();
+          if (this.id) this.update();
+        }
+
+        if (event.name == "updateNf") {
+          this.getById();
+        }
+      },
+      deep: true,
+    },
+    'nfe.taxation': {
+      handler(taxation) {
+        if (!this.nfe.description)
+          this.nfe.description = taxation.description;
+      },
+      deep: true,
+    }
+  },
+};
+</script>
+
+<style scoped>
+.margin {
+  margin-right: 10px;
+}
+
+.div-message-rejection {
+  margin-bottom: 30px;
+}
+</style>

package/src/components/modules/tax-document/nfe/NfeTotalization.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <DisplayTotalization title="Total" :value="totalization" />
+  </div>
+</template>
+<script>
+
+import DisplayTotalization from "@nixweb/nixloc-ui/src/component/rental/DisplayTotalization";
+
+import { mapActions, mapState } from "vuex";
+
+export default {
+  name: "NfeTotalization",
+  components: { DisplayTotalization },
+  props: {
+    nfeId: String,
+  },
+  data() {
+    return {
+      urlGetTotalization: "/api/v1/tax-document/nfe/totalization",
+      totalization: 0,
+    };
+  },
+  created() {
+    this.getTotalization();
+  },
+  computed: {
+    ...mapState("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getTotalization() {
+      let params = { url: this.urlGetTotalization, obj: { nfeId: this.nfeId } };
+      this.getApi(params).then((response) => {
+        this.totalization = response.content;
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "updateTotalizationOrderService")
+          this.getTotalization();
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/components/modules/tax-document/nfse/ConfigNfse.vue

@@ -0,0 +1,233 @@
+<template>
+    <div>
+        <div v-if="loadingConsultaPrefeitura">
+            <span>Aguarde, estamos verificando informações da prefeitura...</span>
+            <Loading type="line" :center="false" />
+        </div>
+        <div v-else>
+            <Alert type="danger" v-if="certificateOrLogin == 'nao disponivel'">
+                Não é possível emitir Nfse, sua prefeitura ainda não foi homologada!
+            </Alert>
+            <div v-if="certificateOrLogin == 'certificado'">
+                <div v-if="!certificate.id">
+                    <Alert type="warning">
+                        <span>
+                            Sua prefeitura requer autenticação por <b>Certificado Digital</b>, clique abaixo para
+                            adicionar.
+                        </span>
+                    </Alert>
+                    <Button _key="btnloadCertificate" type="primary" title="Certificado"
+                        classIcon="fa-solid fa-circle-plus" size="small" :clicked="loadCertificate" />
+                </div>
+                <div v-else>
+                    <Alert type="success">
+                        <span>
+                            Certificado Digital com vencimento em {{ certificado.vencimento }}.
+                        </span>
+                    </Alert>
+                    <Button _key="btnRemoveCertificate" type="danger" title="Remover" classIcon="fa-solid fa-trash"
+                        size="small" :clicked="removeCertificate" />
+                </div>
+            </div>
+            <div v-if="certificateOrLogin == 'login'">
+                <Alert type="warning">
+                    <span>
+                        Sua prefeitura requer autenticação por <b>Login e Senha</b>, insira as informações abaixo.
+                    </span>
+                </Alert>
+            </div>
+        </div>
+        <Modal title="Certificado Digital" :width="650" v-if="showModal('certificate')">
+            <div v-if="loading">
+                <span>Aguarde, estamos carregando os dados, isso pode levar alguns segundos...</span>
+                <Loading type="line" :center="false" />
+            </div>
+            <div v-else>
+                <div v-if="certificateOrLogin == 'certificado'">
+                    <Alert type="info">
+                        <span>
+                            Selecione o certificado no formato
+                            <b>.pfx </b>.
+                        </span>
+                        <br />
+                    </Alert>
+                    <FileUpload title="Carregar .pfx" classIcon="fa-solid fa-file-export" container="nixloc-certificate"
+                        accepted=".pfx" allowed=".pfx" :disabled="true" urlPost="/api/v1/adm/file-upload/upload"
+                        urlRemove="/api/v1/adm/file-upload/delete" :nameDataBase="certificate.file"
+                        v-model="certificate.file" />
+                </div>
+                <b-row>
+                    <b-col sm="6">
+                        <InputPassword title="Senha" field="number" :required="true" :maxLength="100"
+                            v-model="certificate.password" :markFormDirty="false" />
+                    </b-col>
+                    <b-col sm="6">
+                        <InputText title="E-mail de Notificação" field="name" :required="true" :maxLength="100"
+                            v-model="certificate.email" :markFormDirty="false" />
+                    </b-col>
+                </b-row>
+                <b-row>
+                    <b-col sm="12">
+                        <div class="text-right">
+                            <Button _key="btnSaveCertificate" :disabled="disabled" type="success" title="Salvar"
+                                classIcon="fas fa-save" size="medium" :clicked="saveCertificate" />
+                        </div>
+                    </b-col>
+                </b-row>
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import FileUpload from "@nixweb/nixloc-ui/src/component/forms/FileUpload";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputPassword from "@nixweb/nixloc-ui/src/component/forms/InputPassword";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { mapMutations, mapActions, mapGetters } from "vuex";
+
+export default {
+    name: "Certificate",
+    components: {
+        Alert, FileUpload, InputText, InputPassword, Button, Loading, Modal
+    },
+    props: ["value"],
+    data() {
+        return {
+            certificateOrLogin: "",
+            certificate: {
+                id: "",
+                file: "",
+                login: "",
+                password: "",
+                email: "",
+            },
+            certificado: {},
+            urlCreate: "/api/v1/tax-document/certificate/create",
+            urlGetConsultaPrefeitura: "/api/v1/tax-document/certificate/consulta-prefeitura",
+            urlGetIdCertificate: "/api/v1/tax-document/certificate/get-id-certificate",
+            urlGetConsultaCertificado: "/api/v1/tax-document/certificate/consulta-certificado",
+            urlRemoveCertificado: "/api/v1/tax-document/certificate/remove-certificado",
+            loading: false,
+            loadingConsultaPrefeitura: false
+        }
+    },
+    mounted() {
+        this.getIdCertificate();
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal"]),
+        disabled() {
+            if (this.certificateOrLogin == 'certificado') {
+                if (!this.certificate.password) return true;
+                if (!this.certificate.email) return true;
+                return false;
+            }
+        }
+    },
+    methods: {
+        ...mapActions("generic", ["postApi", "putApi", "getApi", "deleteAllApi"]),
+        ...mapMutations("generic", ["addEvent", "removeLoading", "openModal", "hideModal"]),
+        loadCertificate() {
+            this.removeLoading(["btnloadCertificate"]);
+            this.openModal("certificate");
+        },
+        removeCertificate() {
+            let params = {
+                url: this.urlRemoveCertificado,
+                selected: [],
+            };
+            this.deleteAllApi(params).then((reponse) => {
+                if (reponse.success) {
+                    this.certificate.id = "";
+                    this.$emit("input", this.certificate.id);
+                    this.getConsultaPrefeitura();
+                }
+                this.removeLoading(["btnRemoveCertificate"]);
+            });
+        },
+        getIdCertificate() {
+            this.loadingConsultaPrefeitura = true;
+            let params = {
+                url: this.urlGetIdCertificate,
+                obj: {},
+            };
+            this.getApi(params).then((response) => {
+                if (response.success) {
+                    if (response.content) {
+                        this.certificate.id = response.content.idCertificado;
+                        this.certificateOrLogin = "certificado";
+                        this.$emit("input", this.certificate.id);
+                        this.getConsultaCertificado();
+                    } else {
+                        this.getConsultaPrefeitura();
+                    }
+                }
+            });
+        },
+        getConsultaPrefeitura() {
+            this.loadingConsultaPrefeitura = true;
+            let params = {
+                url: this.urlGetConsultaPrefeitura,
+                obj: {},
+            };
+            this.getApi(params).then((response) => {
+                if (response.success) {
+                    this.certificateOrLogin = response.content.certificado ? "certificado" : "login";
+                    if (this.certificateOrLogin == "login")
+                        this.$emit("input", "login");
+                } else {
+                    this.certificateOrLogin = "nao disponivel";
+                }
+                this.loadingConsultaPrefeitura = false;
+            });
+        },
+        getConsultaCertificado() {
+            this.loadingConsultaPrefeitura = true;
+            let params = {
+                url: this.urlGetConsultaCertificado,
+                obj: { idCertificado: this.certificate.id },
+            };
+            this.getApi(params).then((response) => {
+                this.certificado = response.content;
+                var vencimento = new Date(this.certificado.vencimento);
+
+                var day = addZero(vencimento.getDate());
+                var month = addZero(vencimento.getMonth() + 1); // Mês começa do zero
+                var year = vencimento.getFullYear();
+                this.certificado.vencimento = day + "/" + month + "/" + year;
+
+                function addZero(number) {
+                    if (number < 10) {
+                        return "0" + number;
+                    }
+                    return number;
+                }
+
+                this.loadingConsultaPrefeitura = false;
+            });
+        },
+        saveCertificate() {
+            let params = {
+                url: this.urlCreate,
+                obj: this.certificate,
+                notNotifyToast: true,
+            };
+            this.postApi(params).then((response) => {
+                if (response.success) {
+                    this.certificate.id = response.content.data.id;
+                    this.addEvent({ name: "createdCertificate" });
+                    this.hideModal();
+                    this.getIdCertificate();
+                }
+                this.removeLoading(["btnSaveCertificate"]);
+            });
+        }
+    }
+}
+</script>

package/src/components/modules/tax-document/nfse/LocalEvento.vue

@@ -0,0 +1,135 @@
+<template>
+    <div>
+        <b-row>
+            <b-col sm="5">
+                <InputText title="Nome do Evento" :required="true" field="nome" :maxLength="250"
+                    v-model="localEvento.nomeEvento" />
+            </b-col>
+            <b-col sm="2">
+                <DateTime title="Inicio do Evento" :required="true" field="inicioEvento" format="DD/MM/YYYY" type="date"
+                    v-model="localEvento.dataInicioEvento" />
+            </b-col>
+            <b-col sm="2">
+                <DateTime title="Fim do Evento" :required="true" field="fimEvento" format="DD/MM/YYYY" type="date"
+                    v-model="localEvento.dataFimEvento" />
+            </b-col>
+            <b-col sm="2">
+                <div class="div-btn">
+                    <Button v-if="rentId" _key="btnImportAddress" title="Impor..Locação"
+                        :classIcon="'fa-solid fa-arrow-right-from-arc'" type="info" size="small"
+                        :clicked="getEventLocation" />
+                </div>
+            </b-col>
+        </b-row>
+
+        <AddressValueObject markFormDirty="false" :required="true" v-model="addressValueObject" />
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import AddressValueObject from "@nixweb/nixloc-ui/src/component/value-objects/Address.vue";
+
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+    name: "LocalEvento",
+    props: ["nfse", "rentId"],
+    components: {
+        Button,
+        InputText,
+        DateTime,
+        AddressValueObject
+    },
+    data() {
+        return {
+            urlGetApi: "/api/v1/rental/address-rent/get-event-location",
+            addressValueObject: {
+                zipCode: "",
+                street: "",
+                number: "",
+                complement: "",
+                province: "",
+                city: "",
+                state: { id: "", content: "" }
+            },
+            localEvento: {
+                codigoEvento: "",
+                nomeEvento: "",
+                dataInicioEvento: "",
+                dataFimEvento: ""
+            }
+        };
+    },
+    mounted() {
+        this.fillFromNfse();
+    },
+    methods: {
+        ...mapActions("generic", ["getApi"]),
+        ...mapMutations("generic", ["removeLoading"]),
+        fillFromNfse() {
+            this.localEvento.codigoEvento = this.nfse.localEvento.codigoEvento;
+            this.localEvento.nomeEvento = this.nfse.localEvento.nomeEvento;
+            this.localEvento.dataInicioEvento = this.nfse.localEvento.dataInicioEvento;
+            this.localEvento.dataFimEvento = this.nfse.localEvento.dataFimEvento;
+
+            this.addressValueObject.zipCode = this.nfse.localEvento.cepEvento;
+            this.addressValueObject.street = this.nfse.localEvento.logradouroEvento;
+            this.addressValueObject.number = this.nfse.localEvento.numeroEvento;
+            this.addressValueObject.complement = this.nfse.localEvento.complementoEvento;
+            this.addressValueObject.province = this.nfse.localEvento.bairroEvento;
+        },
+        getEventLocation() {
+            let params = { url: this.urlGetApi, obj: { any: this.rentId } };
+            this.getApi(params).then((response) => {
+                let e = response.content;
+                this.localEvento.nomeEvento = e.nome;
+                this.localEvento.dataInicioEvento = e.inicio;
+                this.localEvento.dataFimEvento = e.fim;
+                this.addressValueObject.zipCode = e.cep;
+                this.addressValueObject.street = e.logradouro;
+                this.addressValueObject.number = e.numero;
+                this.addressValueObject.complement = e.complemento;
+                this.addressValueObject.province = e.bairro;
+                this.removeLoading(["btnImportAddress"]);
+            });
+        },
+        createObj() {
+            let obj = {
+                codigoEvento: this.localEvento.codigoEvento,
+                nomeEvento: this.localEvento.nomeEvento,
+                dataInicioEvento: this.localEvento.dataInicioEvento,
+                dataFimEvento: this.localEvento.dataFimEvento,
+                cepEvento: this.addressValueObject.zipCode,
+                logradouroEvento: this.addressValueObject.street,
+                numeroEvento: this.addressValueObject.number,
+                complementoEvento: this.addressValueObject.complement,
+                bairroEvento: this.addressValueObject.province
+            };
+            this.$emit("input", obj);
+        }
+    },
+    watch: {
+        localEvento: {
+            handler() {
+                this.createObj();
+            },
+            deep: true
+        },
+        addressValueObject: {
+            handler() {
+                this.createObj();
+            },
+            deep: true
+        }
+    }
+};
+</script>
+<style scoped>
+.div-btn {
+    margin-top: 37px;
+}
+</style>