fix format colums table

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-12-18 14:25:57 +07:00
parent 02bfb6387c
commit b0b97b89db
4 changed files with 44 additions and 15 deletions

View file

@ -23,7 +23,8 @@ const stroeResign = useDataStore();
const { statusText } = stroe; const { statusText } = stroe;
const router = useRouter(); const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader,onSearchDataTable } = mixin; const { messageError, date2Thai, showLoader, hideLoader, onSearchDataTable } =
mixin;
/** Table */ /** Table */
const rows = ref<ResponseItems[]>([]); const rows = ref<ResponseItems[]>([]);
@ -45,7 +46,10 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "ชื่อ-นามสกุล", label: "ชื่อ-นามสกุล",
sortable: true, sortable: true,
field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`, field: `fullname`,
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
@ -101,7 +105,6 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "วันที่ยื่น", label: "วันที่ยื่น",
sortable: true, sortable: true,
// field: (row) => date2Thai(new Date(row.createdAt)),
field: "createdAt", field: "createdAt",
format(val, row) { format(val, row) {
return date2Thai(new Date(val)); return date2Thai(new Date(val));
@ -115,7 +118,10 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "สถานะ", label: "สถานะ",
sortable: true, sortable: true,
field: (row) => statusText(row.status), field: "status",
format(val, row) {
return statusText(row.status);
},
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },

View file

@ -23,7 +23,8 @@ const stroeResign = useDataStore();
const { statusText } = stroe; const { statusText } = stroe;
const router = useRouter(); const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader,onSearchDataTable } = mixin; const { messageError, date2Thai, showLoader, hideLoader, onSearchDataTable } =
mixin;
/** Table */ /** Table */
const rows = ref<ResponseItems[]>([]); const rows = ref<ResponseItems[]>([]);
@ -45,7 +46,10 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "ชื่อ-นามสกุล", label: "ชื่อ-นามสกุล",
sortable: true, sortable: true,
field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`, field: "fullname",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
@ -114,7 +118,10 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "สถานะ", label: "สถานะ",
sortable: true, sortable: true,
field: (row) => statusText(row.status), field: "status",
format(val, row) {
return statusText(row.status);
},
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },

View file

@ -81,7 +81,10 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "ชื่อ-นามสกุล", label: "ชื่อ-นามสกุล",
sortable: true, sortable: true,
field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`, field: "fullname",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
headerStyle: "font-size: 14px; min-width: 200px", headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ", style: "font-size: 14px; ",
}, },
@ -175,7 +178,10 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "สถานะ", label: "สถานะ",
sortable: true, sortable: true,
field: (row) => statusText(row.draftOrgEmployeeStatus), field: "statustext",
format(val, row) {
return statusText(row.draftOrgEmployeeStatus);
},
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },

View file

@ -38,7 +38,6 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "ลำดับ", label: "ลำดับ",
sortable: false, sortable: false,
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
field: (row) => rows.value.indexOf(row) + 1, field: (row) => rows.value.indexOf(row) + 1,
@ -48,20 +47,24 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "ประเภทการลา", label: "ประเภทการลา",
sortable: true, sortable: true,
field: "leaveType",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
field: (row) => row.leaveType.name, format(val, row) {
return row.leaveType.name;
},
}, },
{ {
name: "dateLeave", name: "dateLeave",
align: "left", align: "left",
label: "วัน เดือน ปี ที่ลา", label: "วัน เดือน ปี ที่ลา",
sortable: true, sortable: true,
field: "dateLeave",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
field: (row) => dateThaiRange([row.dateLeaveStart, row.dateLeaveEnd]), format(val, row) {
return dateThaiRange([row.dateLeaveStart, row.dateLeaveEnd]);
},
}, },
{ {
name: "leaveDays", name: "leaveDays",
@ -165,7 +168,14 @@ onMounted(() => {
<q-card-section class="q-pt-none"> <q-card-section class="q-pt-none">
<div class="row items-center q-gutter-x-sm q-pb-sm"> <div class="row items-center q-gutter-x-sm q-pb-sm">
<q-space /> <q-space />
<q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm" @keydown.enter="onSearch"> <q-input
dense
outlined
v-model="keyword"
label="ค้นหา"
class="q-mr-sm"
@keydown.enter="onSearch"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>