feat: adiciona ticket com #

src/pages/support/SupportPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DefaultHeaderPage title="Suporte" />
+    <DefaultHeaderPage title="Suporte" :show-filter-icon="false" />
     <DefaultTable
       ref="tableRef"
       :columns="columns"
@@ -40,7 +40,14 @@
       </template>
 
       <template #body-cell-actions="{ row }">
-        <q-td style="display: flex; gap: 4px; align-items: center; justify-content: center">
+        <q-td
+          style="
+            display: flex;
+            gap: 4px;
+            align-items: center;
+            justify-content: center;
+          "
+        >
           <q-btn
             outline
             icon="mdi-pencil-outline"
@@ -98,15 +105,70 @@ const openAddEditTicketDialog = (ticket = null) => {
 };
 
 const columns = [
-  { name: "id", label: "Ticket", field: "id", align: "left", style: "width: 5%" },
-  { name: "severity", label: "Prioridade", field: "severity", align: "left", style: "width: 8%" },
-  { name: "created_at", label: "Data", field: "created_at", align: "left", style: "width: 10%" },
-  { name: "origin", label: "Origem", field: "origin", align: "left", style: "width: 12%" },
-  { name: "target", label: "Destino", field: "target_unit_name", align: "left", style: "width: 12%" },
-  { name: "sector", label: "Setor", field: "sector", align: "left", style: "width: 12%" },
-  { name: "title", label: "Título", field: "title", align: "left", style: "width: 21%" },
-  { name: "status", label: "Status", field: "status", align: "left", style: "width: 10%" },
-  { name: "actions", label: "Ações", field: "actions", align: "center", style: "width: 10%" },
+  {
+    name: "id",
+    label: "Ticket",
+    field: "id",
+    align: "left",
+    style: "width: 5%",
+    format: (val) => `#${String(val).padStart(6, "0")}`,
+  },
+  {
+    name: "severity",
+    label: "Prioridade",
+    field: "severity",
+    align: "left",
+    style: "width: 8%",
+  },
+  {
+    name: "created_at",
+    label: "Data",
+    field: "created_at",
+    align: "left",
+    style: "width: 10%",
+  },
+  {
+    name: "origin",
+    label: "Origem",
+    field: "origin",
+    align: "left",
+    style: "width: 12%",
+  },
+  {
+    name: "target",
+    label: "Destino",
+    field: "target_unit_name",
+    align: "left",
+    style: "width: 12%",
+  },
+  {
+    name: "sector",
+    label: "Setor",
+    field: "sector",
+    align: "left",
+    style: "width: 12%",
+  },
+  {
+    name: "title",
+    label: "Título",
+    field: "title",
+    align: "left",
+    style: "width: 21%",
+  },
+  {
+    name: "status",
+    label: "Status",
+    field: "status",
+    align: "left",
+    style: "width: 10%",
+  },
+  {
+    name: "actions",
+    label: "Ações",
+    field: "actions",
+    align: "center",
+    style: "width: 10%",
+  },
 ];
 
 const originLabel = (row) => {