List Exit interview UI
This commit is contained in:
Thanit Konmek
parent
6e7d5e6031
commit
d562d12cea
4 changed files with 238 additions and 187 deletions
|
|
@ -9,7 +9,10 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
|
||||
import type { ResponseItems } from "@/modules/06_retirement/interface/response/exitInterview";
|
||||
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const router = useRouter();
|
||||
|
|
@ -33,22 +36,22 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "prefix",
|
||||
name: "realReason",
|
||||
align: "left",
|
||||
label: "คำนำหน้า",
|
||||
label: "สาเหตุที่ลาออก",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
field: "realReason",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "fullname",
|
||||
name: "notExitFactor",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
label: "ปัจจัยที่ช่วยเปลี่ยนใจไม่อยากลาออก",
|
||||
sortable: true,
|
||||
field: "fullname",
|
||||
field: "notExitFactor",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -56,173 +59,76 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
|
||||
{
|
||||
name: "positionTypeOld",
|
||||
name: "futureWork",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
label: "อนาคตกลับจะมาร่วมงานหรือไม่",
|
||||
sortable: true,
|
||||
field: "positionTypeOld",
|
||||
field: "futureWork",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "positionLevelOld",
|
||||
name: "futureWorkReason",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
label: "เหตุผลที่อยากกลับมาร่วมงาน",
|
||||
sortable: true,
|
||||
field: "positionLevelOld",
|
||||
field: "futureWorkReason",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "positionNumberOld",
|
||||
name: "havejob",
|
||||
align: "left",
|
||||
label: "เลขที่",
|
||||
label: "มีงานใหม่หรือไม่",
|
||||
sortable: true,
|
||||
field: "positionNumberOld",
|
||||
field: "havejob",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "organizationPositionOld",
|
||||
name: "havejobReason",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
label: "เหตุผลที่มีงานใหม่",
|
||||
sortable: true,
|
||||
field: "organizationPositionOld",
|
||||
field: "havejobReason",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "statustext",
|
||||
name: "datetext",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
label: "วันที่สร้าง",
|
||||
sortable: true,
|
||||
field: "statustext",
|
||||
field: "datetext",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"prefix",
|
||||
"fullname",
|
||||
"positionTypeOld",
|
||||
"positionLevelOld",
|
||||
"positionNumberOld",
|
||||
"organizationPositionOld",
|
||||
"statustext",
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([]);
|
||||
|
||||
const dateBreak = ref<Date | null>(null);
|
||||
|
||||
const filters = ref<ResponseItems[]>([]);
|
||||
const rows2 = ref<ResponseItems[]>([]);
|
||||
const columns2 = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้า",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "fullname",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullname",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
||||
{
|
||||
name: "positionTypeOld",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "positionTypeOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "positionLevelOld",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
sortable: true,
|
||||
field: "positionLevelOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "positionNumberOld",
|
||||
align: "left",
|
||||
label: "เลขที่",
|
||||
sortable: true,
|
||||
field: "positionNumberOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "organizationPositionOld",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "organizationPositionOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "statustext",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "statustext",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const columns2 = ref<QTableProps["columns"]>([]);
|
||||
const visibleColumns2 = ref<string[]>([
|
||||
"no",
|
||||
"prefix",
|
||||
"fullname",
|
||||
"positionTypeOld",
|
||||
"positionLevelOld",
|
||||
"positionNumberOld",
|
||||
"organizationPositionOld",
|
||||
"futureWork",
|
||||
"futureWorkReason",
|
||||
"havejob",
|
||||
"havejobReason",
|
||||
"statustext",
|
||||
]);
|
||||
|
||||
|
|
@ -247,6 +153,15 @@ const resetFilter = () => {
|
|||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const openModalCalendar = () => {
|
||||
openModal();
|
||||
dateBreak.value = null;
|
||||
};
|
||||
|
||||
const conditionPopup = () => {
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const openModalOrder = () => {
|
||||
openModal();
|
||||
const row = filters.value.filter(
|
||||
|
|
@ -258,6 +173,7 @@ const openModalOrder = () => {
|
|||
|
||||
onMounted(async () => {
|
||||
await fecthlist();
|
||||
visibleColumns.value = columns.value.map((r: any) => r.name);
|
||||
});
|
||||
|
||||
const fecthlist = async () => {
|
||||
|
|
@ -270,25 +186,20 @@ const fecthlist = async () => {
|
|||
|
||||
data.map((r: ResponseItems) => {
|
||||
list.push({
|
||||
activeDate: new Date(),
|
||||
createdAt: new Date(),
|
||||
firstName: r.firstName ?? "",
|
||||
datetext: r.createdAt !== null ? date2Thai(r.createdAt) : "-",
|
||||
createdAt: new Date(r.createdAt),
|
||||
futureWork: !!r.futureWork,
|
||||
futureWorkReason: r.futureWorkReason ?? "",
|
||||
havejob: !!r.havejob,
|
||||
havejobReason: r.havejobReason ?? "",
|
||||
id: r.id ?? "",
|
||||
isActive: r.isActive ? r.isActive : false,
|
||||
lastName: r.lastName ?? "",
|
||||
location: r.location ?? "",
|
||||
organizationPositionOld: r.organizationPositionOld ?? "",
|
||||
positionLevelOld: r.positionLevelOld ?? "",
|
||||
positionNumberOld: r.positionNumberOld ?? "",
|
||||
positionTypeOld: r.positionTypeOld ?? "",
|
||||
prefix: r.prefix ?? "",
|
||||
profileId: r.profileId ?? "",
|
||||
reason: r.reason ?? "",
|
||||
salary: r.salary ? r.salary : 0,
|
||||
sendDate: new Date(),
|
||||
lastUpdatedAt: new Date(r.lastUpdatedAt),
|
||||
notExitFactor: r.notExitFactor ?? "",
|
||||
realReason: r.realReason ?? "",
|
||||
suggestFriends: !!r.suggestFriends,
|
||||
suggestFriendsReason: r.suggestFriendsReason ?? "",
|
||||
suggestion: r.suggestion ?? "",
|
||||
status: r.status ?? "",
|
||||
statustext: statusText(r.status ?? ""),
|
||||
fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -399,40 +310,50 @@ const saveOrder = async () => {
|
|||
<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"
|
||||
@click="router.push(`/retirement/resign/${props.row.id}`)"
|
||||
>
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="prefix" :props="props">
|
||||
{{ props.row.prefix }}
|
||||
<q-td key="realReason" :props="props">
|
||||
{{ props.row.realReason }}
|
||||
</q-td>
|
||||
<q-td key="fullname" :props="props">
|
||||
{{ props.row.fullname }}
|
||||
<q-td key="notExitFactor" :props="props">
|
||||
{{ props.row.notExitFactor }}
|
||||
</q-td>
|
||||
<q-td key="positionTypeOld" :props="props">
|
||||
{{ props.row.positionTypeOld }}
|
||||
<q-td key="futureWork" :props="props">
|
||||
{{ props.row.futureWork ? "ใช่" : "ไม่" }}
|
||||
</q-td>
|
||||
<q-td key="positionLevelOld" :props="props">
|
||||
{{ props.row.positionLevelOld }}
|
||||
<q-td key="futureWorkReason" :props="props">
|
||||
{{ props.row.futureWorkReason }}
|
||||
</q-td>
|
||||
<q-td key="positionNumberOld" :props="props">
|
||||
{{ props.row.positionNumberOld }}
|
||||
<q-td key="havejob" :props="props">
|
||||
{{ props.row.havejob ? "ใช่" : "ไม่" }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="organizationPositionOld" :props="props">
|
||||
<q-td key="havejobReason" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organizationPositionOld }}
|
||||
{{ props.row.havejobReason }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="statustext" :props="props">
|
||||
{{ props.row.statustext }}
|
||||
<q-td key="datetext" :props="props">
|
||||
{{ props.row.datetext }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
icon="mdi-calendar"
|
||||
size="12px"
|
||||
color="blue-7"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
@click="openModalCalendar"
|
||||
>
|
||||
<q-tooltip>วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
@ -528,16 +449,16 @@ const saveOrder = async () => {
|
|||
<q-td key="positionTypeOld" :props="props">
|
||||
{{ props.row.positionTypeOld }}
|
||||
</q-td>
|
||||
<q-td key="positionLevelOld" :props="props">
|
||||
{{ props.row.positionLevelOld }}
|
||||
<q-td key="futureWorkReason" :props="props">
|
||||
{{ props.row.futureWorkReason }}
|
||||
</q-td>
|
||||
<q-td key="positionNumberOld" :props="props">
|
||||
{{ props.row.positionNumberOld }}
|
||||
<q-td key="havejob" :props="props">
|
||||
{{ props.row.havejob }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="organizationPositionOld" :props="props">
|
||||
<q-td key="havejobReason" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organizationPositionOld }}
|
||||
{{ props.row.havejobReason }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="statustext" :props="props">
|
||||
|
|
@ -558,5 +479,60 @@ const saveOrder = async () => {
|
|||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog> -->
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myFormConfirm">
|
||||
<DialogHeader
|
||||
title="กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก"
|
||||
:close="closeModal"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm q-gutter-md">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateBreak"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<!-- :rules="[
|
||||
(val) => !!val || `${'กรุณาเลือก วันสุดท้ายที่ยับยั้ง'}`,
|
||||
]" -->
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="
|
||||
dateBreak !== null ? date2Thai(dateBreak) : null
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${' วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<DialogFooter :editvisible="true" :save="conditionPopup" />
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue