Merge branch 'develop' into dev-tee
This commit is contained in:
setthawutttty
commit
4236d85041
3 changed files with 440 additions and 369 deletions
|
|
@ -14,6 +14,12 @@ export default {
|
|||
|
||||
//RetirementDeceased ถึงแก่กรรม
|
||||
listDeceased: () => `${retirement}/deceased`,
|
||||
detailDeceased: (id: string) => `${retirement}/deceased/${id}`
|
||||
detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
|
||||
|
||||
// RetirementResign ระบบลาออก
|
||||
listResign: () => `${retirement}/resign`,
|
||||
resingByid: (id: string) => `${retirement}/resign/${id}`,
|
||||
resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
|
||||
resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,34 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const visibleColumns = ref<string[]>([ "prefix", "fullname", "positionType", "position", "positionLevel", "positionExecutive", "oc", "status",]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
// const nextPage = (id:string) => {
|
||||
// router.push("/retirement/resign/"+id);
|
||||
// };
|
||||
const rows = ref<any>([
|
||||
{ personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร", status: "ยื่นลาออก",},
|
||||
{ personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร", status: "ยื่นลาออก",},
|
||||
]);
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, date2Thai, showLoader, hideLoader } = mixin;
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
|
||||
const rows = ref<any>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "prefix",
|
||||
|
|
@ -103,6 +87,72 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"prefix",
|
||||
"fullname",
|
||||
"positionType",
|
||||
"position",
|
||||
"positionLevel",
|
||||
"positionExecutive",
|
||||
"oc",
|
||||
"status",
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await fecthlist();
|
||||
});
|
||||
|
||||
const fecthlist = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.listResign())
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
let data = res.data.result;
|
||||
rows.value = data.map((e: any) => ({
|
||||
personalId: e.id,
|
||||
profileId: e.profileId,
|
||||
prefix: e.prefix,
|
||||
fullname: e.firstName + " " + e.lastName,
|
||||
positionType: e.positionType,
|
||||
position: e.positionLine,
|
||||
positionLevel: e.positionLevel,
|
||||
positionExecutive: e.positionExecutive,
|
||||
oc: e.organizationOrganization,
|
||||
status: e.status,
|
||||
}));
|
||||
})
|
||||
.catch((e: any) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
// const nextPage = (id:string) => {
|
||||
// router.push("/retirement/resign/"+id);
|
||||
// };
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
|
||||
|
|
@ -111,25 +161,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
<div class="col-12 row q-pa-md">
|
||||
<div class="row col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<!-- <q-select
|
||||
v-model="fiscalyear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="fiscalyearOP"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="searchFilterTable"
|
||||
/> -->
|
||||
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
|
|
@ -183,19 +214,23 @@ const columns = ref<QTableProps["columns"]>([
|
|||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
|
||||
<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" @click=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click="
|
||||
router.push(`/retirement/resign/${props.row.personalId}`)
|
||||
"
|
||||
>
|
||||
<!-- <q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td> -->
|
||||
|
|
@ -220,10 +255,30 @@ const columns = ref<QTableProps["columns"]>([
|
|||
<q-td key="oc" :props="props">
|
||||
{{ props.row.oc }}
|
||||
</q-td>
|
||||
<q-td key="status" :props="props">
|
||||
{{ props.row.status }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="status" :props="props">
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-if="props.row.status == 'PENDING'"
|
||||
name="mdi-timer-sand"
|
||||
color="deep-orange"
|
||||
>
|
||||
<q-tooltip>รอดำเนินการ</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="props.row.status == 'APPROVE'"
|
||||
name="mdi-check"
|
||||
color="teal"
|
||||
>
|
||||
<q-tooltip>เสร็จสิ้น</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon size="20px" v-else name="mdi-close" color="red">
|
||||
<q-tooltip>ยับยั้ง</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
<!-- {{ props.row.status }} -->
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
|
|
@ -245,34 +300,34 @@ const columns = ref<QTableProps["columns"]>([
|
|||
</q-card>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,106 +1,146 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
รายละเอียดการลาออกของ {{ name }}
|
||||
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
รายละเอียดการลาออกของ
|
||||
{{ dataDetail.firstName + " " + dataDetail.lastName }}
|
||||
</div>
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-subtitle2">
|
||||
{{ dataDetail.firstName + " " + dataDetail.lastName }}
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
outline
|
||||
color="blue"
|
||||
dense
|
||||
icon-right="mdi-open-in-new"
|
||||
class="q-px-sm"
|
||||
label="ดูข้อมูลทะเบียนประวัติ"
|
||||
@click="redirectToRegistry(dataDetail.profileId)"
|
||||
/>
|
||||
</div>
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
|
||||
<q-space />
|
||||
<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
|
||||
</div>
|
||||
<div class="col-12"><q-separator/></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 col-sm-2 col-md-1 row ">
|
||||
<q-img src="@/assets/avatar_user.jpg" />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 q-pl-md">
|
||||
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
||||
<div class="col-12 text-detail">{{position}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">ระดับ</div>
|
||||
<div class="col-12 text-detail">{{level}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สังกัด</div>
|
||||
<div class="col-12 text-detail">{{institution}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สถานะ</div>
|
||||
<div class="col-12 text-detail">
|
||||
<q-icon size="20px" v-if="status == 'อยู่ระหว่างการพิจารณา'" name="mdi-timer-sand" color="deep-orange" />
|
||||
<q-icon size="20px" v-else-if="status == 'อนุมัติ'" name="mdi-close" color="red" />
|
||||
<q-icon size="20px" v-else name="mdi-check" color="teal" />
|
||||
{{ status }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
||||
<q-img src="@/assets/avatar_user.jpg" />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 q-pl-md">
|
||||
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
||||
<div class="col-12 text-detail">{{ dataDetail.positionLine }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">ระดับ</div>
|
||||
<div class="col-12 text-detail">{{ dataDetail.positionLevel }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สังกัด</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ dataDetail.organizationOrganization }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สถานะ</div>
|
||||
<div class="col-12 text-detail">
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-if="dataDetail.status == 'PENDING'"
|
||||
name="mdi-timer-sand"
|
||||
color="deep-orange"
|
||||
/>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="dataDetail.status == 'APPROVE'"
|
||||
name="mdi-check"
|
||||
color="teal"
|
||||
/>
|
||||
<q-icon size="20px" v-else name="mdi-close" color="red" />
|
||||
{{ statusName(dataDetail.status) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-x-sm">
|
||||
<q-btn outline color="primary" dense icon-right="check" class="q-px-sm" label="อนุมัติ" @click="popUp('pass')" />
|
||||
<q-btn outline color="red" dense icon-right="close" class="q-px-sm" label="ยับยั้ง" @click="popUp('passNot')"/>
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-x-sm" v-if="dataDetail.status === 'PENDING'">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
dense
|
||||
icon-right="check"
|
||||
class="q-px-sm"
|
||||
label="อนุมัติ"
|
||||
@click="popUp('pass')"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
color="red"
|
||||
dense
|
||||
icon-right="close"
|
||||
class="q-px-sm"
|
||||
label="ยับยั้ง"
|
||||
@click="popUp('passNot')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">{{ dataDetail.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ date2Thai(dataDetail.sendDate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">{{ dataDetail.reason }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ date2Thai(dataDetail.activeDate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-12"><q-separator/></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 ">
|
||||
<div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">{{location}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">{{filingDate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 ">
|
||||
<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">{{reason}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
|
||||
<div class="col-12 text-detail">{{requestDate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modalPass" persistent>
|
||||
<!-- <q-dialog v-model="modalPass" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
|
|
@ -114,7 +154,7 @@
|
|||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
outlined
|
||||
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||
v-model="userNote"
|
||||
:label="`${'กรอกเหตุผล'}`"
|
||||
|
|
@ -130,7 +170,7 @@
|
|||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-dialog v-model="modalPassNot" persistent>
|
||||
<q-dialog v-model="modalPassNot" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
|
|
@ -143,7 +183,7 @@
|
|||
<q-input
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
outlined
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||
v-model="userNote"
|
||||
|
|
@ -159,203 +199,173 @@
|
|||
/>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-dialog> -->
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { ref, useAttrs } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
// import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||
// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const router = useRouter();
|
||||
const userNote = ref<string>("");
|
||||
const name = ref<string>('นายสมคิด ยอดใจ')
|
||||
const position = ref<string>('นักจัดการงานทั่วไป')
|
||||
const level = ref<string>('ชำนาญการพิเศษ')
|
||||
const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
|
||||
const status = ref<string>('อยู่ระหว่างการพิจารณา')
|
||||
const edit = ref<boolean>(true)
|
||||
const location = ref<string>('ที่ทำงาน')
|
||||
const filingDate = ref<string>('21 ก.ค. 2566')
|
||||
const reason = ref<string>('เพราะxxx')
|
||||
const requestDate = ref<string>('21 ธ.ค. 2566')
|
||||
const $q = useQuasar();
|
||||
const modalPass = ref<boolean>(false);
|
||||
const modalPassNot = ref<boolean>(false);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
|
||||
const $q = useQuasar();
|
||||
const id = ref<string>(route.params.id.toString());
|
||||
|
||||
const dataDetail = ref<any>([]);
|
||||
|
||||
// const modalPass = ref<boolean>(false);
|
||||
// const modalPassNot = ref<boolean>(false);
|
||||
onMounted(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"startDate",
|
||||
"endDete",
|
||||
"intendant",
|
||||
"commander",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "startDate",
|
||||
align: "left",
|
||||
label: "ตั้งแต่วันที่",
|
||||
sortable: true,
|
||||
field: "startDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "endDete",
|
||||
align: "left",
|
||||
label: "ถึงวันที่",
|
||||
sortable: true,
|
||||
field: "endDete",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "intendant",
|
||||
align: "left",
|
||||
label: "ผู้ดูแล",
|
||||
sortable: true,
|
||||
field: "intendant",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "commander",
|
||||
align: "left",
|
||||
label: "ผู้บังคับบัญชา",
|
||||
sortable: true,
|
||||
field: "commander",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
}
|
||||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormProbationDetail[]>([
|
||||
{
|
||||
no: "1",
|
||||
startDate: "09 ก.ย. 2566",
|
||||
endDete: "20 ต.ค. 2566",
|
||||
intendant: "นางสาวรัชภรณ์ ภักดี",
|
||||
commander: "นายนภัทร วันดี"
|
||||
},
|
||||
{
|
||||
no: "2",
|
||||
startDate: "09 ก.ย. 2566",
|
||||
endDete: "20 ต.ค. 2566",
|
||||
intendant: "นางสาวทวิดา กมลเวชชี",
|
||||
commander: "นางพิศ โพธิ์ดำ"
|
||||
},
|
||||
{
|
||||
no: "3",
|
||||
startDate: "09 ก.ย. 2566",
|
||||
endDete: "20 ต.ค. 2566",
|
||||
intendant: "นางสาวทวิดา กมลเวชชี",
|
||||
commander: "นายนภัทร วันดี"
|
||||
},
|
||||
]);
|
||||
|
||||
const clickAdd = () => {
|
||||
const fetchData = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.resingByid(id))
|
||||
.then((res: any) => {
|
||||
dataDetail.value = res.data.result;
|
||||
// console.log(dataDetail.value);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const popUp = (action: "pass" | "passNot" ) => {
|
||||
const popUp = (action: "pass" | "passNot") => {
|
||||
if (action === "pass") {
|
||||
modalPass.value = true;
|
||||
$q.dialog({
|
||||
title: "ยืนยันการอนุมัติการลาออก",
|
||||
message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
confirmpopUp();
|
||||
});
|
||||
} else if (action === "passNot") {
|
||||
modalPassNot.value = true;
|
||||
}
|
||||
$q.dialog({
|
||||
title: "ยืนยันการยับยั้งการลาออก",
|
||||
message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
rejectpopUp();
|
||||
});
|
||||
}
|
||||
};
|
||||
const clickClose = () =>{
|
||||
userNote.value = ""
|
||||
modalPass.value = false
|
||||
modalPassNot.value = false
|
||||
}
|
||||
const savePass = () =>{
|
||||
|
||||
$q.dialog({
|
||||
title: "ยืนยันการขอลาออก",
|
||||
message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
const: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(() => {
|
||||
modalPass.value = false
|
||||
console.log('----MSG---- :',userNote.value)
|
||||
console.log('passSave (close)')
|
||||
userNote.value = ""
|
||||
}).onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
}
|
||||
|
||||
const savePassNot = () => {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการขอลาออก",
|
||||
message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
const: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(() => {
|
||||
modalPass.value = false
|
||||
console.log('----MSG---- :',userNote.value)
|
||||
console.log('passSaveNot (close)')
|
||||
userNote.value = ""
|
||||
}).onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
}
|
||||
|
||||
const confirmpopUp = async () => {
|
||||
await http
|
||||
.get(config.API.resignConfirm(id.value))
|
||||
.then(() => {
|
||||
console.log("ยืนยัน");
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
};
|
||||
const rejectpopUp = async () => {
|
||||
console.log("ยกเลิก");
|
||||
await http
|
||||
.get(config.API.resignReject(id.value))
|
||||
.then(() => {
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
};
|
||||
const redirectToRegistry = (id: string) => {
|
||||
router.push(`/registry/${id}`);
|
||||
};
|
||||
const statusName = (val: string) => {
|
||||
switch (val) {
|
||||
case "PENDING":
|
||||
return "รอดำเนินการ";
|
||||
case "APPROVE":
|
||||
return "อนุมัติ";
|
||||
case "REJECT":
|
||||
return "ยับยั้ง";
|
||||
}
|
||||
};
|
||||
// const clickClose = () => {
|
||||
// userNote.value = "";
|
||||
// modalPass.value = false;
|
||||
// modalPassNot.value = false;
|
||||
// };
|
||||
// const savePass = () => {
|
||||
// $q.dialog({
|
||||
// title: "ยืนยันการขอลาออก",
|
||||
// message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
|
||||
// cancel: {
|
||||
// flat: true,
|
||||
// const: "negative",
|
||||
// },
|
||||
// persistent: true,
|
||||
// })
|
||||
// .onOk(() => {
|
||||
// modalPass.value = false;
|
||||
// console.log("----MSG---- :", userNote.value);
|
||||
// console.log("passSave (close)");
|
||||
// userNote.value = "";
|
||||
// })
|
||||
// .onCancel(() => {})
|
||||
// .onDismiss(() => {});
|
||||
// };
|
||||
// const savePassNot = () => {
|
||||
// $q.dialog({
|
||||
// title: "ยืนยันการขอลาออก",
|
||||
// message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
|
||||
// cancel: {
|
||||
// flat: true,
|
||||
// const: "negative",
|
||||
// },
|
||||
// persistent: true,
|
||||
// })
|
||||
// .onOk(() => {
|
||||
// modalPass.value = false;
|
||||
// console.log("----MSG---- :", userNote.value);
|
||||
// console.log("passSaveNot (close)");
|
||||
// userNote.value = "";
|
||||
// })
|
||||
// .onCancel(() => {})
|
||||
// .onDismiss(() => {});
|
||||
// };
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
height: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
.text-top{
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
padding-bottom: 3px;
|
||||
.text-top {
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.text-detail{
|
||||
font-weight: 500;
|
||||
|
||||
.text-detail {
|
||||
font-weight: 500;
|
||||
}
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
|
@ -387,4 +397,4 @@ const savePassNot = () => {
|
|||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue