refactor(UI work-list): display column time

Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2026-04-28 10:07:00 +07:00
parent 8a1fb4f9ed
commit 8d5384c1d3
4 changed files with 46 additions and 26 deletions

View file

@ -268,7 +268,11 @@ watch(
<div class="row"> <div class="row">
<div class="col text-grey-8">เวลาเขางาน</div> <div class="col text-grey-8">เวลาเขางาน</div>
<div class="col"> <div class="col">
{{ `${formData.checkInDate} ${formData.checkInTime} น.` }} {{
formData.checkInDate
? `${formData.checkInDate} ${formData.checkInTime} น.`
: "-"
}}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -341,14 +345,16 @@ watch(
<div class="col text-grey-8">เวลาออกงาน</div> <div class="col text-grey-8">เวลาออกงาน</div>
<div class="col"> <div class="col">
{{ {{
`${formData.checkOutDate} ${formData.checkOutTime} น.` formData.checkOutDate
? `${formData.checkOutDate} ${formData.checkOutTime} น.`
: "-"
}} }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">สถานททำงาน</div> <div class="col text-grey-8">สถานททำงาน</div>
<div class="col" v-if="formData.isLocationCheckOut"> <div class="col" v-if="formData.isLocationCheckOut">
ในสถานท {{ formData.checkOutLat ? "ในสถานที่" : "-" }}
</div> </div>
<div class="col" v-else> <div class="col" v-else>
{{ {{

View file

@ -75,7 +75,10 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format(val, row) { format(val, row) {
return `${row.checkInDate} ${val} น.`; if (row.checkInDate && val) {
return `${row.checkInDate} ${val} น.`;
}
return "-";
}, },
}, },
{ {
@ -105,7 +108,10 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format(val, row) { format(val, row) {
return `${row.checkOutDate} ${val} น.`; if (row.checkOutDate && val) {
return `${row.checkOutDate} ${val} น.`;
}
return "-";
}, },
}, },
{ {
@ -166,19 +172,19 @@ async function fetchListTimeRecord() {
id: e.id, id: e.id,
fullName: e.fullName, fullName: e.fullName,
profileType: e.profileType, profileType: e.profileType,
checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : "-", checkInDate: date2Thai(e.checkInDate),
checkInTime: e.checkInTime, checkInTime: e.checkInTime,
checkInLocation: e.checkInLocation, checkInLocation: e.checkInLocation,
checkInLat: e.checkInLat ? e.checkInLat : "", checkInLat: e.checkInLat,
checkInLon: e.checkInLon ? e.checkInLon : "", checkInLon: e.checkInLon,
checkInStatus: e.checkInStatus checkInStatus: e.checkInStatus
? workStore.convertSatatus(e.checkInStatus) ? workStore.convertSatatus(e.checkInStatus)
: "-", : "-",
checkOutDate: e.checkOutDate ? date2Thai(e.checkOutDate) : "-", checkOutDate: date2Thai(e.checkOutDate),
checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-", checkOutLocation: e.checkOutLocation,
checkOutTime: e.checkOutTime ? e.checkOutTime : "-", checkOutTime: e.checkOutTime,
checkOutLat: e.checkOutLat ? e.checkOutLat : "", checkOutLat: e.checkOutLat,
checkOutLon: e.checkOutLat ? e.checkOutLon : "", checkOutLon: e.checkOutLon,
checkOutStatus: e.checkOutStatus checkOutStatus: e.checkOutStatus
? workStore.convertSatatus(e.checkOutStatus) ? workStore.convertSatatus(e.checkOutStatus)
: "-", : "-",

View file

@ -71,7 +71,10 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format(val, row) { format(val, row) {
return `${row.checkInDate} ${val} น.`; if (row.checkInDate && val) {
return `${row.checkInDate} ${val} น.`;
}
return "-";
}, },
}, },
{ {
@ -92,7 +95,10 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format(val, row) { format(val, row) {
return `${row.checkOutDate} ${val} น.`; if (row.checkOutDate && val) {
return `${row.checkOutDate} ${val} น.`;
}
return "-";
}, },
}, },
{ {
@ -139,15 +145,15 @@ async function fetchListLogRecord() {
profileType: e.profileType, profileType: e.profileType,
fullName: e.fullName, fullName: e.fullName,
checkInDate: e.checkInDate && date2Thai(e.checkInDate), checkInDate: e.checkInDate && date2Thai(e.checkInDate),
checkInTime: e.checkInTime ? e.checkInTime : "-", checkInTime: e.checkInTime,
checkInLocation: e.checkInLocation ? e.checkInLocation : "-", checkInLocation: e.checkInLocation,
checkInLat: e.checkInLat ? e.checkInLat : "", checkInLat: e.checkInLat,
checkInLon: e.checkInLon ? e.checkInLon : "", checkInLon: e.checkInLon,
checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate), checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-", checkOutLocation: e.checkOutLocation,
checkOutTime: e.checkOutTime ? e.checkOutTime : "-", checkOutTime: e.checkOutTime,
checkOutLat: e.checkOutLat ? e.checkOutLat : "", checkOutLat: e.checkOutLat,
checkOutLon: e.checkOutLon ? e.checkOutLon : "", checkOutLon: e.checkOutLon,
})); }));
} else { } else {
rows.value = []; rows.value = [];

View file

@ -123,7 +123,7 @@ onMounted(() => {
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</div> </div>
<div v-else-if="col.name == 'checkInLocation'"> <div v-else-if="col.name == 'checkInLocation'">
<q-item style="padding: 0"> <q-item style="padding: 0" v-if="props.row.checkInLocation">
<q-item-section> <q-item-section>
<q-item-label> {{ props.row.checkInLocation }}</q-item-label> <q-item-label> {{ props.row.checkInLocation }}</q-item-label>
<q-item-label caption lines="2">{{ <q-item-label caption lines="2">{{
@ -131,9 +131,10 @@ onMounted(() => {
}}</q-item-label> }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<div v-else>-</div>
</div> </div>
<div v-else-if="col.name == 'checkOutLocation'"> <div v-else-if="col.name == 'checkOutLocation'">
<q-item style="padding: 0"> <q-item style="padding: 0" v-if="props.row.checkOutLocation">
<q-item-section> <q-item-section>
<q-item-label> {{ props.row.checkOutLocation }}</q-item-label> <q-item-label> {{ props.row.checkOutLocation }}</q-item-label>
<q-item-label caption lines="2">{{ <q-item-label caption lines="2">{{
@ -141,6 +142,7 @@ onMounted(() => {
}}</q-item-label> }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<div v-else>-</div>
</div> </div>
<div v-else-if="col.name == 'profileType'"> <div v-else-if="col.name == 'profileType'">
{{ {{
@ -150,7 +152,7 @@ onMounted(() => {
}} }}
</div> </div>
<div v-else> <div v-else>
{{ col.value }} {{ col.value ? col.value : "-" }}
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>