ContractsTab.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <DefaultTable
  3. :columns="columns"
  4. :api-call="loadContracts"
  5. :show-search-field="true"
  6. :female="false"
  7. title="Contratos"
  8. description="contratos"
  9. >
  10. <template #body-cell-start_date="{ row }">
  11. <q-td>{{ formatDateYMDtoDMY(row.start_date) }}</q-td>
  12. </template>
  13. <template #body-cell-end_date="{ row }">
  14. <q-td>{{ formatDateYMDtoDMY(row.end_date) }}</q-td>
  15. </template>
  16. <template #body-cell-inhabitant_classification="{ row }">
  17. <q-td>{{ row.municipality_size?.description ?? row.inhabitant_classification?.description ?? "—" }}</q-td>
  18. </template>
  19. <template #body-cell-tbr_fixed_value="{ row }">
  20. <q-td>{{ formatToBRLCurrency(row.tbr_fixed_value) }}</q-td>
  21. </template>
  22. <template #body-cell-royalties="{ row }">
  23. <q-td>{{ formatPercentage(row.tbr_fixed_value_percentage) }}</q-td>
  24. </template>
  25. <template #body-cell-fnm="{ row }">
  26. <q-td>{{ formatPercentage(row.marketing_fund_percentage) }}</q-td>
  27. </template>
  28. <template #body-cell-maintenance="{ row }">
  29. <q-td>{{ formatPercentage(row.maintance_tax_percentage) }}</q-td>
  30. </template>
  31. <template #body-cell-ref_month="{ row }">
  32. <q-td>{{
  33. formatRefMonth(row.contract_month_current, row.validity_months)
  34. }}</q-td>
  35. </template>
  36. <template #body-cell-actions>
  37. <q-td align="center">
  38. <q-btn flat round dense icon="mdi-eye-outline" size="sm" />
  39. </q-td>
  40. </template>
  41. </DefaultTable>
  42. </template>
  43. <script setup>
  44. import DefaultTable from "src/components/defaults/DefaultTable.vue";
  45. import { getActiveFranchiseeContracts } from "src/api/franchisee_contract";
  46. import {
  47. formatToBRLCurrency,
  48. formatPercentage,
  49. formatDateYMDtoDMY,
  50. } from "src/helpers/utils";
  51. const loadContracts = () => getActiveFranchiseeContracts();
  52. const columns = [
  53. { name: "protocol", label: "ID", field: "protocol", align: "left" },
  54. { name: "unit_name", label: "Unidade", field: "unit_name", align: "left" },
  55. {
  56. name: "start_date",
  57. label: "Data Inicial",
  58. field: "start_date",
  59. align: "left",
  60. },
  61. { name: "end_date", label: "Data Final", field: "end_date", align: "left" },
  62. {
  63. name: "inhabitant_classification",
  64. label: "Faixa de Habitantes",
  65. field: "inhabitant_classification",
  66. align: "left",
  67. },
  68. {
  69. name: "tbr_fixed_value",
  70. label: "TBR",
  71. field: "tbr_fixed_value",
  72. align: "left",
  73. },
  74. {
  75. name: "royalties",
  76. label: "Royalties",
  77. field: "tbr_fixed_value_percentage",
  78. align: "left",
  79. },
  80. {
  81. name: "fnm",
  82. label: "FNM",
  83. field: "marketing_fund_percentage",
  84. align: "left",
  85. },
  86. {
  87. name: "maintenance",
  88. label: "Manutenção",
  89. field: "maintance_tax_percentage",
  90. align: "left",
  91. },
  92. {
  93. name: "ref_month",
  94. label: "Ref. Mês",
  95. field: "contract_month_current",
  96. align: "left",
  97. },
  98. { name: "actions", label: "Ações", field: "actions", align: "center" },
  99. ];
  100. function formatRefMonth(current, total) {
  101. if (current == null || total == null) return "—";
  102. const pad = (n) => String(n).padStart(2, "0");
  103. return `${pad(current)}/${pad(total)}`;
  104. }
  105. </script>