fix format colums table
This commit is contained in:
parent
02bfb6387c
commit
b0b97b89db
4 changed files with 44 additions and 15 deletions
|
|
@ -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",
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue