hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ui ลาออก ถึงเเก่กรรม

Browse source
This commit is contained in:
setthawutttty 2023-07-24 13:19:14 +07:00
parent 6a68e7f05c
commit ac4fb71f09
7 changed files with 987 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

268
src/modules/06_retirement/components/resign/Deceased.vue Normal file
View 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
View 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
View 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>

791
src/modules/06_retirement/components/resign/ResignOrder.vue Normal file
View file

@ -0,0 +1,791 @@
<template>
<div class="toptitle text-dark col-12 row items-center">คำสั่งลาออก</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
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"
@update:model-value="searchFilterTable"
/>
<div>
<q-btn
size="12px"
flat
round
color="add"
icon="mdi-plus"
@click="clickAdd"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
<!-- <q-menu>
<q-list style="min-width: 100px">
<q-item clickable @click="clickAdd">
<q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
</q-item>
<q-item clickable v-close-popup disable>
<q-item-section
>ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
>
</q-item>
</q-list>
</q-menu> -->
</q-btn>
</div>
<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-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderType"
label="ประเภท"
dense
emit-value
map-options
option-label="name"
:options="OrderTypeOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStatus"
label="สถานะ"
dense
emit-value
map-options
option-label="name"
:options="OrderStatusOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
</div>
</q-card>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="UpdataData"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
: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">
<q-td
key="Order"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.Order }}
</q-td>
<q-td
key="OrderNum"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderNum }}
</q-td>
<q-td
key="OrderType"
:props="props"
@click="redirectToPage(props.row.OrderType)"
>
{{ props.row.OrderType }}
</q-td>
<q-td
key="OrderDate"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderDate }}
</q-td>
<q-td
key="OrderBy"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderBy }}
</q-td>
<q-td
key="Signer"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.Signer }}
</q-td>
<q-td
key="OrderStatus"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderStatus }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, useAttrs, computed } from "vue";
import type { QTableProps } from "quasar";
import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
import router from "@/router";
import { useQuasar } from "quasar";
const $q = useQuasar(); //ใช้ noti quasar
const DataStore = useOrderPlacementDataStore();
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const mixin = useCounterMixin();
const { dateText } = mixin;
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
const textDate = (value: Date) => {
return dateText(value);
};
const visibleColumns = ref<string[]>([
"Order",
"OrderType",
"OrderNum",
"OrderDate",
"OrderBy",
"Signer",
"OrderStatus",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "Order",
align: "left",
label: "คำสั่ง",
sortable: true,
field: "Order",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderNum",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "OrderNum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "OrderType",
align: "left",
label: "ประเภท",
sortable: false,
field: "OrderType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderDate",
align: "left",
label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
sortable: true,
field: "OrderDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderBy",
align: "left",
label: "คำสั่งโดย",
sortable: true,
field: "OrderBy",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "Signer",
align: "left",
label: "ผู้ลงนาม",
sortable: false,
field: "Signer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderStatus",
align: "center",
label: "สถานะคำสั่ง",
sortable: false,
field: "OrderStatus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "fiscalYear",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "fiscalYear",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormOrderPlacementMainData[]>([
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "จัดทำร่างคำสั่ง",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "จัดทำร่างคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "บัญชีแนบท้าย",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "บัญชีแนบท้าย",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ส่งสำเนาคำสั่ง",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ส่งสำเนาคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "รอลงนาม",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
]);
// const OrderStatusOption = [
// "ทั้งหมด",
// "ยังไม่ได้บรรจุ",
// "บรรจุแล้ว",
// "ยังไม่ได้ออกคำสั่ง",
// ];
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
onMounted(async () => {
await OriginalDataFetch();
fiscalYearFilter();
searchFilterTable();
OrderStatusFilter();
OrderTypeFilter();
});
const OriginalDataFetch = async () => {
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
await DataStore.DataMainOrder(rows.value);
OriginalData.value = await DataStore.DataMainOrigOrder;
UpdataData.value = OriginalData.value;
};
// ดูรายการหน้าต่อไป
const redirectToPage = (id?: number) => {
// router.push({ name: "placementDetail" });
router.push(`/placement/order/detail`);
};
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
// await deleteData(id);
})
.onCancel(() => {})
.onDismiss(() => {});
};
// const deleteData = async (id: string) => {
// loaderPage(true);
// await http
// .delete(config.API.orderReplace(id))
// .then((res) => {
// success($q, "ลบข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// loaderPage(false);
// await fetchData();
// });
// };
const clickAdd = () => {
router.push({ name: "OrderplacementDetail" });
};
// const viewDetail = (id: string, status: string) => {
// if (status == "checkPayment") {
// router.push(`${route.fullPath}/payment/${id}`);
// } else {
// router.push(`${route.fullPath}/profile/${id}`);
// }
// };
// เลือกปีงบประมาณ
const fiscalyear = ref<number | null>(0);
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedfiscalYearValues: number[] = [];
const fiscalYearFilter = async () => {
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// DataStore.DataMainYearSet(rows.value);
// fiscalyearOP.value = DataStore.DataMainYearGet;
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
for (let data of OriginalData.value) {
const year = data.fiscalYear;
console.log(year);
if (fiscalyear.value === null || year > fiscalyear.value) {
fiscalyear.value = year;
}
if (!addedfiscalYearValues.includes(year)) {
fiscalyearOP.push({ id: year, name: year.toString() });
addedfiscalYearValues.push(year);
}
}
};
const OrderType = ref<string>("");
const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedOrderTypeValues: string[] = [];
const OrderTypeFilter = async () => {
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// DataStore.DataMainYearSet(rows.value);
// fiscalyearOP.value = DataStore.DataMainYearGet;
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
for (let data of OriginalData.value) {
const OrderTypeValue = data.OrderType;
console.log(OrderTypeValue);
// if (OrderTypeValue === null || OrderType > OrderTypeValue) {
// OrderTypeValue = OrderType;
// }
if (!addedOrderTypeValues.includes(OrderTypeValue)) {
OrderTypeOption.push({
// id: OrderTypeValue ?? 0,
id: OrderTypeOption.length,
name: OrderTypeValue,
});
addedOrderTypeValues.push(OrderTypeValue);
}
// if (!addedOrderTypeValues.includes(OrderTypeValue)) {
// OrderTypeOption.push({
// id: OrderTypeValue,
// name: OrderTypeValue.toString(),
// });
// addedOrderTypeValues.push(OrderTypeValue);
// }
}
};
const OrderStatus = ref<string>("");
const OrderStatusText = ref<FormOrderPlacementMainData[]>(
DataStore.DataMainOrigOrder
);
const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// DataStore.DataMainYearSet(rows.value);
// fiscalyearOP.value = DataStore.DataMainYearGet;
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
for (let data of OriginalData.value) {
const OrderStatusValue = data.OrderStatus;
console.log(OrderStatusValue);
if (
OrderStatusValue === null ||
parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
) {
OrderStatus.value = OrderStatusValue;
}
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
OrderStatusOption.push({
// id: OrderStatusValue,
id: OrderStatusOption.length,
name: OrderStatusValue,
});
addedOrderStatusValues.push(OrderStatusValue);
}
}
};
// เลือกปีงบประมาณตาม API
const searchfiscalyear = () => {
console.log("Input value changed:", fiscalyear.value);
// API
// await http
// .get(config.API.// ตัวอย่าง)
// .then((res: any) => {
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const attrs = ref<any>(useAttrs());
const searchFilterTable = async () => {
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
await DataStore.DataUpdateOrder(
OrderType.value,
OrderStatus.value,
fiscalyear.value
);
UpdataData.value = DataStore.DataMainUpdateOrder;
};
// UpdataData.value = DataStore.DataMainUpdate;
// console.log("Input value changed:", OrderStatus.value, OrderType.value);
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;
};
</script>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.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>