65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import type { QTableProps } from "quasar";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
const rows = ref<any[]>([]);
|
|
const visibleColumns = ref<string[]>(["fullName"]);
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "fullName",
|
|
align: "left",
|
|
label: "ชื่อ",
|
|
sortable: true,
|
|
field: "fullName",
|
|
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: 50vw">
|
|
<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-th auto-width />
|
|
</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 class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|