|
|
@@ -1,8 +1,65 @@
|
|
|
<template>
|
|
|
- <div class="flex flex-center q-pa-xl text-grey-5">
|
|
|
- <div class="column items-center" style="gap: 12px">
|
|
|
- <q-icon name="mdi-account-group-outline" size="64px" />
|
|
|
- <span class="text-body1">Grupos em desenvolvimento</span>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <DefaultTable
|
|
|
+ v-model:rows="rows"
|
|
|
+ title="Lista de Grupos"
|
|
|
+ :columns
|
|
|
+ description="Grupos"
|
|
|
+ :female="false"
|
|
|
+ no-api-call
|
|
|
+ add-item
|
|
|
+ >
|
|
|
+ <template #body-cell-status="{ row }">
|
|
|
+ <q-td align="center">
|
|
|
+ <q-badge
|
|
|
+ :color="row.status === 'ACTIVE' ? 'positive' : 'warning'"
|
|
|
+ :label="row.status === 'ACTIVE' ? 'Ativo' : 'Inativo'"
|
|
|
+ />
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #body-cell-actions="{ row }">
|
|
|
+ <q-td auto-width>
|
|
|
+ <q-item-section class="no-wrap" style="flex-direction: row">
|
|
|
+ <q-btn
|
|
|
+ outline
|
|
|
+ icon="mdi-pencil-outline"
|
|
|
+ style="width: 36px"
|
|
|
+ class="q-mr-sm"
|
|
|
+ @click.prevent.stop="onEdit(row)"
|
|
|
+ />
|
|
|
+ <q-btn
|
|
|
+ outline
|
|
|
+ icon="mdi-trash-can-outline"
|
|
|
+ style="width: 36px"
|
|
|
+ class="q-mr-sm"
|
|
|
+ @click.prevent.stop="onDelete(row)"
|
|
|
+ />
|
|
|
+ </q-item-section>
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+ </DefaultTable>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
|
|
|
+
|
|
|
+const rows = ref([]);
|
|
|
+
|
|
|
+const columns = ref([
|
|
|
+ { name: "name", label: "Nome", field: "name", align: "left" },
|
|
|
+ { name: "active_units", label: "Unidades Ativas", field: "active_units", align: "center" },
|
|
|
+ { name: "status", label: "Status", field: "status", align: "center" },
|
|
|
+ { name: "actions", label: "Ações", field: null, align: "center" },
|
|
|
+]);
|
|
|
+
|
|
|
+function onEdit(row) {
|
|
|
+ console.log("edit", row);
|
|
|
+}
|
|
|
+
|
|
|
+function onDelete(row) {
|
|
|
+ console.log("delete", row);
|
|
|
+}
|
|
|
+</script>
|
