|
|
@@ -1,3 +1,192 @@
|
|
|
<template>
|
|
|
- <h1>Contratos</h1>
|
|
|
+ <div class="q-pa-md">
|
|
|
+ <div class="row q-col-gutter-md">
|
|
|
+ <!-- Coluna esquerda: tabela + aditivos -->
|
|
|
+ <div class="col-12 col-md-5">
|
|
|
+ <q-table
|
|
|
+ :rows="contracts"
|
|
|
+ :columns="columns"
|
|
|
+ row-key="id"
|
|
|
+ flat
|
|
|
+ hide-bottom
|
|
|
+ class="bg-transparent"
|
|
|
+ :row-class="
|
|
|
+ (_, index) =>
|
|
|
+ index === selectedIndex
|
|
|
+ ? 'contract-item-active cursor-pointer'
|
|
|
+ : 'cursor-pointer'
|
|
|
+ "
|
|
|
+ @row-click="(_, __, index) => (selectedIndex = index)"
|
|
|
+ >
|
|
|
+ <template #body-cell-period="{ row }">
|
|
|
+ <q-td align="left">
|
|
|
+ {{ row.startDate }} - {{ row.endDate }}
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #body-cell-status="{ row }">
|
|
|
+ <q-td align="center">
|
|
|
+ <q-badge
|
|
|
+ :color="row.status === 'Ativo' ? 'teal' : 'negative'"
|
|
|
+ :label="row.status"
|
|
|
+ style="border-radius: 12px; padding: 4px 10px; font-size: 12px"
|
|
|
+ />
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #body-cell-actions>
|
|
|
+ <q-td align="center">
|
|
|
+ <div class="flex items-center justify-center q-gutter-x-xs">
|
|
|
+ <q-icon
|
|
|
+ name="mdi-file-document-outline"
|
|
|
+ size="sm"
|
|
|
+ color="grey-8"
|
|
|
+ class="cursor-pointer"
|
|
|
+ style="border: 1px solid #c9c9c9; border-radius: 8px; padding: 4px"
|
|
|
+ @click.stop="console.log('view')"
|
|
|
+ />
|
|
|
+ <q-icon
|
|
|
+ name="mdi-trash-can-outline"
|
|
|
+ size="sm"
|
|
|
+ color="grey-8"
|
|
|
+ class="cursor-pointer"
|
|
|
+ style="border: 1px solid #c9c9c9; border-radius: 8px; padding: 4px"
|
|
|
+ @click.stop="console.log('trash')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+ </q-table>
|
|
|
+
|
|
|
+ <!-- Aditivos de Contrato -->
|
|
|
+ <div class="q-mt-md">
|
|
|
+ <p class="text-weight-medium q-mb-sm">Aditivos de Contrato</p>
|
|
|
+ <q-list separator>
|
|
|
+ <q-item
|
|
|
+ v-for="(additive, i) in additives"
|
|
|
+ :key="i"
|
|
|
+ clickable
|
|
|
+ dense
|
|
|
+ class="q-py-sm"
|
|
|
+ >
|
|
|
+ <q-item-section avatar>
|
|
|
+ <q-avatar
|
|
|
+ size="24px"
|
|
|
+ color="primary-2"
|
|
|
+ text-color="white"
|
|
|
+ style="font-size: 12px"
|
|
|
+ >
|
|
|
+ {{ i + 1 }}
|
|
|
+ </q-avatar>
|
|
|
+ </q-item-section>
|
|
|
+ <q-item-section>{{ additive.title }}</q-item-section>
|
|
|
+ <q-item-section side>
|
|
|
+ <q-icon
|
|
|
+ name="mdi-file-document-outline"
|
|
|
+ size="sm"
|
|
|
+ color="grey-6"
|
|
|
+ class="cursor-pointer"
|
|
|
+ @click.stop="console.log('additive', i)"
|
|
|
+ />
|
|
|
+ </q-item-section>
|
|
|
+ </q-item>
|
|
|
+ </q-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Coluna direita: pré-visualização -->
|
|
|
+ <div class="col-12 col-md-7">
|
|
|
+ <div class="row justify-end q-mb-sm">
|
|
|
+ <q-btn
|
|
|
+ icon="add"
|
|
|
+ color="primary-2"
|
|
|
+ style="height: 40px; width: 40px; border-radius: 8px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="preview-box q-pa-md">
|
|
|
+ <span v-if="selectedIndex === null" class="text-grey-5">
|
|
|
+ Pré - Visualização
|
|
|
+ </span>
|
|
|
+ <div v-else>
|
|
|
+ <p class="text-weight-medium q-mb-xs">
|
|
|
+ Contrato {{ contracts[selectedIndex].id }}
|
|
|
+ </p>
|
|
|
+ <p class="text-grey-7 q-mb-sm">
|
|
|
+ {{ contracts[selectedIndex].startDate }} até
|
|
|
+ {{ contracts[selectedIndex].endDate }}
|
|
|
+ </p>
|
|
|
+ <q-badge
|
|
|
+ :color="contracts[selectedIndex].status === 'Ativo' ? 'teal' : 'negative'"
|
|
|
+ :label="contracts[selectedIndex].status"
|
|
|
+ style="border-radius: 12px; padding: 4px 10px; font-size: 12px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+
|
|
|
+const selectedIndex = ref(null);
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ { name: "id", label: "Contrato", field: "id", align: "left" },
|
|
|
+ {
|
|
|
+ name: "period",
|
|
|
+ label: "Data Inicial - Final",
|
|
|
+ field: "startDate",
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "status",
|
|
|
+ label: "Status Contrato",
|
|
|
+ field: "status",
|
|
|
+ align: "center",
|
|
|
+ style: "width: 130px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "actions",
|
|
|
+ label: "Ações",
|
|
|
+ field: "actions",
|
|
|
+ align: "center",
|
|
|
+ style: "width: 90px",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const contracts = ref([
|
|
|
+ {
|
|
|
+ id: "5789128",
|
|
|
+ startDate: "17/02/2025",
|
|
|
+ endDate: "17/02/2026",
|
|
|
+ status: "Ativo",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "5789128",
|
|
|
+ startDate: "17/02/2025",
|
|
|
+ endDate: "17/02/2026",
|
|
|
+ status: "Inativo",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const additives = ref([
|
|
|
+ { title: "Aditivo 1" },
|
|
|
+ { title: "Aditivo 2" },
|
|
|
+ { title: "Aditivo 3" },
|
|
|
+ { title: "Aditivo 4" },
|
|
|
+]);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.preview-box {
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.contract-item-active {
|
|
|
+ background-color: rgba(255, 131, 64, 0.08);
|
|
|
+}
|
|
|
+</style>
|
ebagabee