ui ลาออก ถึงเเก่กรรม
This commit is contained in:
setthawutttty
parent
6a68e7f05c
commit
ac4fb71f09
7 changed files with 987 additions and 15 deletions
|
|
@ -33,8 +33,7 @@ const probationWorkAdd = () =>
|
||||||
import("@/modules/05_placement/components/probation/MainDetail.vue");
|
import("@/modules/05_placement/components/probation/MainDetail.vue");
|
||||||
const probationWorkAdd2 = () =>
|
const probationWorkAdd2 = () =>
|
||||||
import("@/modules/05_placement/components/probation/AddWork.vue");
|
import("@/modules/05_placement/components/probation/AddWork.vue");
|
||||||
const resignOrder = () =>
|
|
||||||
import("@/modules/05_placement/components/OrderPlacement/ResignOrder.vue");
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/placement",
|
path: "/placement",
|
||||||
|
|
@ -156,14 +155,5 @@ export default [
|
||||||
Role: "placement",
|
Role: "placement",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/placement/resign-order",
|
|
||||||
name: "ResignOrderplacement",
|
|
||||||
component: resignOrder,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [6.2],
|
|
||||||
Role: "placement",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
268
src/modules/06_retirement/components/resign/Deceased.vue
Normal file
268
src/modules/06_retirement/components/resign/Deceased.vue
Normal file
|
|
@ -0,0 +1,268 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import type { QTableProps } 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"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
|
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);
|
||||||
|
// };
|
||||||
|
const rows = ref<any>([
|
||||||
|
{ personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร"},
|
||||||
|
{ personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร"},
|
||||||
|
]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "prefix",
|
||||||
|
align: "left",
|
||||||
|
label: "คำนำหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "prefix",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "fullname",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-นามสกุล",
|
||||||
|
sortable: true,
|
||||||
|
field: "fullname",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionType",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งประเภท",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionType",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "position",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "position",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionLevel",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionLevel",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionExecutive",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionExecutive",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "oc",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "oc",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="toptitle text-dark col-12 row items-center">รายการบันทึกเวียนแจ้งการถึงแก่กรรม</div>
|
||||||
|
<q-card flat bordered class="col-12 q-mt-sm">
|
||||||
|
<q-separator />
|
||||||
|
<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
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filterKeyword"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="filterKeyword !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 q-pt-sm">
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filterKeyword"
|
||||||
|
row-key="fullname"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
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-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer" @click=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
|
||||||
|
<!-- <q-td key="no" :props="props">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td> -->
|
||||||
|
<q-td key="prefix" :props="props">
|
||||||
|
{{ props.row.prefix }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fullname" :props="props">
|
||||||
|
{{ props.row.fullname }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionType" :props="props">
|
||||||
|
{{ props.row.positionType }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="position" :props="props">
|
||||||
|
{{ props.row.position }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionLevel" :props="props">
|
||||||
|
{{ props.row.positionLevel }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionExecutive" :props="props">
|
||||||
|
{{ props.row.positionExecutive }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="oc" :props="props">
|
||||||
|
{{ props.row.oc }}
|
||||||
|
</q-td>
|
||||||
|
|
||||||
|
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
active-color="primary"
|
||||||
|
color="primary"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
278
src/modules/06_retirement/components/resign/Resign.vue
Normal file
278
src/modules/06_retirement/components/resign/Resign.vue
Normal file
|
|
@ -0,0 +1,278 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import type { QTableProps } 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();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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 columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "prefix",
|
||||||
|
align: "left",
|
||||||
|
label: "คำนำหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "prefix",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "fullname",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-นามสกุล",
|
||||||
|
sortable: true,
|
||||||
|
field: "fullname",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionType",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งประเภท",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionType",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "position",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "position",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionLevel",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionLevel",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionExecutive",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionExecutive",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "oc",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "oc",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "status",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะ",
|
||||||
|
sortable: true,
|
||||||
|
field: "status",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
|
||||||
|
<q-card flat bordered class="col-12 q-mt-sm">
|
||||||
|
<q-separator />
|
||||||
|
<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
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filterKeyword"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="filterKeyword !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 q-pt-sm">
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filterKeyword"
|
||||||
|
row-key="fullname"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
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-td key="no" :props="props">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td> -->
|
||||||
|
<q-td key="prefix" :props="props">
|
||||||
|
{{ props.row.prefix }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fullname" :props="props">
|
||||||
|
{{ props.row.fullname }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionType" :props="props">
|
||||||
|
{{ props.row.positionType }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="position" :props="props">
|
||||||
|
{{ props.row.position }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionLevel" :props="props">
|
||||||
|
{{ props.row.positionLevel }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionExecutive" :props="props">
|
||||||
|
{{ props.row.positionExecutive }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="oc" :props="props">
|
||||||
|
{{ props.row.oc }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="status" :props="props">
|
||||||
|
{{ props.row.status }}
|
||||||
|
</q-td>
|
||||||
|
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
active-color="primary"
|
||||||
|
color="primary"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
390
src/modules/06_retirement/components/resign/ResignByid.vue
Normal file
390
src/modules/06_retirement/components/resign/ResignByid.vue
Normal file
|
|
@ -0,0 +1,390 @@
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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')"/>
|
||||||
|
|
||||||
|
</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-card style="width: 800px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader
|
||||||
|
:title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
|
||||||
|
:close="clickClose"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
outlined
|
||||||
|
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||||
|
v-model="userNote"
|
||||||
|
:label="`${'กรอกเหตุผล'}`"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:editvisible="true"
|
||||||
|
:save="modalPass ? savePass : savePassNot"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<q-dialog v-model="modalPassNot" persistent>
|
||||||
|
<q-card style="width: 800px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader
|
||||||
|
:title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
|
||||||
|
:close="clickClose"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||||
|
v-model="userNote"
|
||||||
|
:label="`${'กรอกเหตุผล'}`"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:editvisible="true"
|
||||||
|
:save="modalPass ? savePass : savePassNot"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRouter } 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";
|
||||||
|
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 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 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" ) => {
|
||||||
|
if (action === "pass") {
|
||||||
|
modalPass.value = true;
|
||||||
|
} else if (action === "passNot") {
|
||||||
|
modalPassNot.value = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.text-top{
|
||||||
|
color: gray;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
}
|
||||||
|
.text-detail{
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1 +1,4 @@
|
||||||
export type {};
|
interface Pagination {
|
||||||
|
rowsPerPage: number;
|
||||||
|
}
|
||||||
|
export type {Pagination};
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,10 @@
|
||||||
|
|
||||||
const Main = () => import("@/modules/06_retirement/views/Main.vue");
|
const Main = () => import("@/modules/06_retirement/views/Main.vue");
|
||||||
const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
|
const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
|
||||||
|
const resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
|
||||||
|
const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
|
||||||
|
const resignByid = () => import("@/modules/06_retirement/components/resign/ResignByid.vue")
|
||||||
|
const deceased = () => import("@/modules/06_retirement/components/resign/Deceased.vue")
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/retirement",
|
path: "/retirement",
|
||||||
|
|
@ -27,4 +29,45 @@ export default [
|
||||||
Role: "retirement",
|
Role: "retirement",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/retirement/resign",
|
||||||
|
name: "resign",
|
||||||
|
component: resign,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.2],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/retirement/resign/:id",
|
||||||
|
name: "resignbyid",
|
||||||
|
component: resignByid,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.3],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/retirement/resign-order",
|
||||||
|
name: "resign-order",
|
||||||
|
component: resignOrder,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.4],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/deceased",
|
||||||
|
name: "deceased",
|
||||||
|
component: deceased,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.4],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue