Faço o cadastro no banco de dados, com o formulário abaixo.
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
import UiParentCard from "@/components/shared/UiParentCard.vue";
import { router } from "@/router";
import { useTemaStore } from "@/stores/apps/tema";
import { format } from "date-fns";
import type { Header } from "vue3-easy-data-table";
import "vue3-easy-data-table/dist/style.css";
const page = ref({ title: "Temas de Estudo" });
const breadcrumbs = ref([
{
disabled: true,
href: "#",
},
]);
const store = useTemaStore();
const valid = ref(true);
const editedIndex = ref(-1);
const editedItem = ref({
nome: "",
});
const desserts = ref({});
const save = async () => {
if (editedIndex.value > -1) {
Object.assign(editedIndex.value, editedItem.value);
} else {
desserts.value = editedItem.value;
}
await store
.salvar({
nome: editedItem.value.nome,
callback: editedItem.value.nome,
})
.then();
};
</script>
<template>
<BaseBreadcrumb
:title="page.title"
:breadcrumbs="breadcrumbs"
></BaseBreadcrumb>
<v-row>
<v-col cols="12" md="12">
<UiParentCard title="Cadastrar tema de estudo">
<v-card-text>
<v-form ref="form" v-model="valid" lazy-validation>
<v-col cols="12" sm="12">
<v-text-field
variant="outlined"
hide-details
v-model="editedItem.nome"
label="Nome"
></v-text-field>
</v-col>
</v-form>
</v-card-text>
<v-card-actions class="pa-4">
<v-spacer></v-spacer>
<v-btn color="error">Cancelar</v-btn>
<v-btn
color="primary"
variant="flat"
@click="save"
:disabled="editedItem.nome === ''"
>
Salvar
</v-btn>
</v-card-actions>
</UiParentCard>
</v-col>
</v-row>
</template>
Após quando clico no menu para abrir esta página:
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
import UiParentCard from "@/components/shared/UiParentCard.vue";
import { router } from "@/router";
import { useTemaStore } from "@/stores/apps/tema";
import { format } from "date-fns";
import type { Header } from "vue3-easy-data-table";
import "vue3-easy-data-table/dist/style.css";
const page = ref({ title: "Temas de Estudo" });
const breadcrumbs = ref([
{
disabled: true,
href: "#",
},
]);
const store = useTemaStore();
onMounted(() => {
store.listaNormal();
});
const getAnalisesTemas = computed(() => {
return store.temas;
});
const items = ref(getAnalisesTemas);
const searchField = ref("nome");
const searchValue = ref("");
const headers: Header[] = [
{ text: "Sub-temas", value: "total", sortable: true },
{ text: "Tema", value: "nome", sortable: true },
{ text: "Criado em", value: "createdat", sortable: true },
{ text: "Atualizado em", value: "updatedat", sortable: true },
{ text: "Editado por", value: "nomepessoa", sortable: true },
{ text: "Ativo ?", value: "ativoInativo", sortable: true },
{ text: "", value: "operation" },
];
const themeColor = ref("rgb(var(--v-theme-secondary))");
const visualizar = (id: number) => {
router.push("/tema/" + id);
};
const subTema = (id: number) => {
router.push("/sub-tema/" + id);
};
const cadastrar = () => {
router.push("/tema/cadastrar");
};
</script>
<template>
<BaseBreadcrumb
:title="page.title"
:breadcrumbs="breadcrumbs"
></BaseBreadcrumb>
<v-row>
<v-col cols="12" md="12">
<UiParentCard title="Gerenciador dos Temas de Estudo">
<v-row justify="space-between" class="align-center mb-3">
<v-col cols="12" md="4">
<v-text-field
type="text"
variant="outlined"
placeholder="Pesquisa por nome"
v-model="searchValue"
density="compact"
hide-details
prepend-inner-icon="mdi-magnify"
/>
</v-col>
<v-col cols="6" md="1">
<v-btn icon variant="text" @click="cadastrar()">
<v-tooltip activator="parent"> Cadastrar tema</v-tooltip>
<v-icon>mdi-shape-circle-plus</v-icon>
</v-btn>
</v-col>
</v-row>
<EasyDataTable
:headers="headers"
:items="items"
table-class-name="customize-table"
:theme-color="themeColor"
:search-field="searchField"
:search-value="searchValue"
:rows-per-page="5"
buttons-pagination
>
<template #item-total="{ total }">
<div class="player-wrapper">
{{ total }}
</div>
</template>
<template #item-nome="{ nome }">
<div class="player-wrapper">
{{ nome }}
</div>
</template>
<template #item-createdat="{ createdat }">
<div class="player-wrapper">
{{ format(new Date(createdat), "dd/MM/yyyy HH:mm:ss") }}
</div>
</template>
<template #item-updatedat="{ updatedat }">
<div class="player-wrapper">
{{ format(new Date(updatedat), "dd/MM/yyyy HH:mm:ss") }}
</div>
</template>
<template #item-nomepessoa="{ nomepessoa }">
<div class="player-wrapper">
{{ nomepessoa }}
</div>
</template>
<template #item-ativoInativo="{ ativoInativo }">
<div class="player-wrapper">
{{ ativoInativo }}
</div>
</template>
<template #item-operation="item">
<div class="operation-wrapper">
<v-btn icon variant="text" @click="visualizar(item.id)">
<v-tooltip activator="parent"> Visualizar </v-tooltip>
<EyeIcon size="18" />
</v-btn>
<v-btn
icon
variant="text"
v-if="item.total > 0"
@click="subTema(item.id)"
>
<v-tooltip activator="parent"> Ver Sub-temas </v-tooltip>
<ApiAppIcon size="18" />
</v-btn>
</div>
</template>
</EasyDataTable>
</UiParentCard>
</v-col>
</v-row>
</template>
TemaStateProps
export interface TemaStateProps {
temas?: Tema[];
temaPorId?: TemaPorId;
tema?: TemaSalvar;
}
export type Tema = {
id?: string | number | undefined;
total?: number;
nome?: string;
createdat?: any;
updatedat?: any;
nomepessoa?: string;
ativoInativo?: boolean;
};
export type TemaPorId = {
id?: string | number | undefined;
apresentacao?: string;
callback?: string;
createdat?: Date;
formtripeto?: string;
icone?: string;
ativoInativo?: boolean;
nome?: Date;
updatedat?: Date;
};
export type TemaSalvar = {
nome?: string;
callback?: string;
};
tema.ts
import type { TemaSalvar, TemaStateProps } from "@/types/TemaType";
import axios from "@/utils/axios";
import { defineStore } from "pinia";
const url = import.meta.env.VITE_APP_BACKEND_URL;
const token = localStorage.getItem("token");
const headers = {
headers: { Authorization: "Bearer " + token },
};
const urlFinal = url + "/api/estudo-tema/";
export const useTemaStore = defineStore({
id: "tema",
state: (): TemaStateProps => ({
temas: [],
temaPorId: {},
tema: {},
}),
getters: {},
actions: {
async buscaPorId(id: number): Promise<any> {
try {
const data = await axios.get(
urlFinal + "buscar-por-id/" + id + "/",
headers
);
this.temaPorId = data.data;
return this.temaPorId;
} catch (error) {
console.log(error);
}
},
async listaNormal() {
try {
const data = await axios.get(urlFinal + "lista/", headers);
this.temas = data.data;
} catch (error) {
console.log(error);
}
},
async listaSubTemaWithSumFilhos() {
try {
const data = await axios.get(urlFinal + "sub-lista/", headers);
this.temas = data.data;
} catch (error) {
console.log(error);
}
},
async salvar(modelo: TemaSalvar) {
try {
const data = await axios.post(urlFinal + "salvar/", modelo, headers);
this.temas = data.data;
} catch (error) {
console.log(error);
}
},
},
});
Mostra o erro
Não dá erro no backend
O que pode ser ?
