Tema.vue
<script setup lang="ts">
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 { computed, onMounted, ref } from "vue";
import type { Header } from "vue3-easy-data-table";
import "vue3-easy-data-table/dist/style.css";
const store = useTemaStore();
onMounted(() => {
store.listaEstudoTemaWithSumFilhos();
});
const getTemas = computed(() => {
return store.temas;
});
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: "", value: "operation" },
];
const items = ref(getTemas);
const themeColor = ref("rgb(var(--v-theme-secondary))");
const page = ref({ title: "Temas de Estudo" });
const breadcrumbs = ref([
{
disabled: true,
href: "#",
},
]);
const visualizar = (id: number) => {
router.push("/tema/" + id);
};
const subTemas = (id: number) => {
router.push("/sub-tema/" + id);
};
</script>
<template>
<v-row>
<v-col cols="12" md="12">
<BaseBreadcrumb
:title="page.title"
:breadcrumbs="breadcrumbs"
></BaseBreadcrumb>
</v-col>
</v-row>
<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="3">
<v-text-field
type="text"
variant="outlined"
placeholder="Pesquise pelo nome"
v-model="searchValue"
density="compact"
hide-details
prepend-inner-icon="mdi-magnify"
/>
</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-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="subTemas(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>
Rotas
const MainRoutes = {
path: "/main",
meta: {
requiresAuth: true,
},
redirect: "/main",
component: () => import("@/layouts/full/FullLayout.vue"),
children: [
{
path: "/",
redirect: "/dashboards/analytical",
},
{
name: "Por tema",
path: "/analise-tema",
component: () => import("@/views/apps/analise-tema/AnaliseTema.vue"),
},
{
name: "Análise Tema de Estudo",
path: "/analise-tema/:id",
component: () => import("@/views/apps/analise-tema/AnaliseTemaPorId.vue"),
},
{
name: "Temas",
path: "/tema",
component: () => import("@/views/apps/tema/Tema.vue"),
},
{
name: "Sub tema análise Tema",
path: "/sub-tema/:id",
component: () => import("@/views/apps/tema/Tema.vue"),
},
],
};
export default MainRoutes;
Estou nesta rota
{
name: "Temas",
path: "/tema",
component: () => import("@/views/apps/tema/Tema.vue"),
},
Quando clico neste botão, muda a roda, mas o arquivo é o mesmo. Tema.vue
<v-btn
icon
variant="text"
v-if="item.total > 0"
@click="subTemas(item.id)"
>
<v-tooltip activator="parent"> Ver Sub-temas </v-tooltip>
<ApiAppIcon size="18" />
</v-btn>
Como recarregar a página com os novos dados ?
