79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import type { QTableProps } from "quasar";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
const mixin = useCounterMixin();
|
|
const { date2Thai } = mixin;
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
const rows = defineModel<any[]>("rows", { required: true });
|
|
|
|
const visibleColumns = ref<string[]>(["createdFullName", "lastUpdatedAt"]);
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "createdFullName",
|
|
align: "left",
|
|
label: "ชื่อ",
|
|
sortable: true,
|
|
field: "createdFullName",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "lastUpdatedAt",
|
|
align: "left",
|
|
label: "เวลาที่แก้ไข",
|
|
sortable: true,
|
|
field: "lastUpdatedAt",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
]);
|
|
function close() {
|
|
modal.value = false;
|
|
}
|
|
</script>
|
|
<template>
|
|
<q-dialog persistent v-model="modal">
|
|
<q-card style="min-width: 30vw">
|
|
<DialogHeader tittle="ประวัติการแก้ไข" :close="close" />
|
|
<q-separator />
|
|
<q-card-section>
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
:rows-per-page-options="[10, 25, 50, 100]"
|
|
:visible-columns="visibleColumns"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div v-if="col.name == 'lastUpdatedAt'" class="table_ellipsis">
|
|
{{ col.value ? date2Thai(col.value, false, true) : "-" }}
|
|
</div>
|
|
<div v-else class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|