รายการช่วยราชการ
This commit is contained in:
setthawutttty
parent
f5a1af8d53
commit
5358cc3d08
5 changed files with 1029 additions and 1 deletions
|
|
@ -97,4 +97,7 @@ export default {
|
||||||
transferUser: `${transfer}/user`,
|
transferUser: `${transfer}/user`,
|
||||||
transferUserId: (id: string) => `${transfer}/user/${id}`,
|
transferUserId: (id: string) => `${transfer}/user/${id}`,
|
||||||
transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
|
transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
|
||||||
|
officerMain: () => `${placement}/officer`,
|
||||||
|
officerDetail: (id:string) => `${placement}/officer/${id}`,
|
||||||
|
officerMainDelete: (id:string) => `${placement}/officer/${id}`,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,293 @@
|
||||||
|
<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)"
|
||||||
|
/>
|
||||||
|
รายละเอียดการขอโอนช่วยราชการ {{ fullname }}
|
||||||
|
</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">{{ fullname }}</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="blue"
|
||||||
|
dense
|
||||||
|
icon-right="mdi-open-in-new"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ดูข้อมูลทะเบียนประวัติ"
|
||||||
|
@click="router.push(`/registry/${personId}`)"
|
||||||
|
/>
|
||||||
|
</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">
|
||||||
|
{{ positionTypeOld }}
|
||||||
|
</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">
|
||||||
|
{{ positionLevelOld }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-5 row items-center">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="col-12 text-top">สังกัด</div>
|
||||||
|
<div class="col-12 text-detail">
|
||||||
|
{{ organizationPositionOld }}
|
||||||
|
</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 />
|
||||||
|
<q-btn
|
||||||
|
v-if="!roleAdmin"
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
icon-right="arrow_forward"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ส่งคำร้องไปยัง สกจ."
|
||||||
|
@click=""
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-else
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
icon-right="download"
|
||||||
|
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-6 col-sm-3 row items-center">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
|
||||||
|
<div class="col-12 text-detail">
|
||||||
|
{{ responseData.organization }}
|
||||||
|
</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">
|
||||||
|
{{ responseData.reason }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import keycloak from "@/plugins/keycloak";
|
||||||
|
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type {
|
||||||
|
TypeFile,
|
||||||
|
ResponseDataDetail,
|
||||||
|
} from "@/modules/05_placement/interface/response/Transfer";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
|
||||||
|
const personId = route.params.id as string;
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
dialogMessage,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
success,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const roleAdmin = ref<boolean>(false);
|
||||||
|
|
||||||
|
const name = ref<string>("นายสมคิด ยอดใจ");
|
||||||
|
const level = ref<string>("ชำนาญการพิเศษ");
|
||||||
|
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
|
||||||
|
const fullname = ref<string>("")
|
||||||
|
const id = ref<string>("");
|
||||||
|
const prefix = ref<string>("");
|
||||||
|
const firstName = ref<string>("");
|
||||||
|
const lastName = ref<string>("");
|
||||||
|
const position = ref<string>("");
|
||||||
|
const posNo = ref<string>("");
|
||||||
|
const positionLevel = ref<string>("");
|
||||||
|
const createdAt = ref<string>("");
|
||||||
|
const organization = ref<string>("");
|
||||||
|
const reason = ref<string>("");
|
||||||
|
const status = ref<string>("");
|
||||||
|
const date = ref<string>("");
|
||||||
|
const salary = ref<string>("");
|
||||||
|
const positionTypeOld = ref<string>("");
|
||||||
|
const positionLevelOld = ref<string>("");
|
||||||
|
const positionNumberOld = ref<string>("");
|
||||||
|
const organizationPositionOld = ref<string>("");
|
||||||
|
const isActive = ref<string>("");
|
||||||
|
const responseData = ref<ResponseDataDetail>({
|
||||||
|
createdAt: new Date(),
|
||||||
|
date: new Date(),
|
||||||
|
id: "",
|
||||||
|
organization: "",
|
||||||
|
organizationPositionOld: "",
|
||||||
|
positionLevelOld: "",
|
||||||
|
positionNumberOld: "",
|
||||||
|
positionTypeOld: "",
|
||||||
|
reason: "",
|
||||||
|
salary: 0,
|
||||||
|
status: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = ref<TypeFile[]>([]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "fileName",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อไฟล์",
|
||||||
|
sortable: true,
|
||||||
|
field: "fileName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "btnMicrosoft",
|
||||||
|
align: "right",
|
||||||
|
label: "ปุ่ม",
|
||||||
|
sortable: true,
|
||||||
|
field: "btnMicrosoft",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.officerDetail(personId))
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`,
|
||||||
|
id.value = data.id;
|
||||||
|
prefix.value = data.prefix;
|
||||||
|
firstName.value = data.firstName;
|
||||||
|
lastName.value = data.lastName;
|
||||||
|
position.value = data.position;
|
||||||
|
posNo.value = data.posNo;
|
||||||
|
positionLevel.value = data.positionLevel;
|
||||||
|
createdAt.value = data.createdAt;
|
||||||
|
organization.value = data.organization;
|
||||||
|
reason.value = data.reason;
|
||||||
|
status.value = data.status;
|
||||||
|
date.value = data.date;
|
||||||
|
salary.value = data.salary;
|
||||||
|
positionTypeOld.value = data.positionTypeOld;
|
||||||
|
positionLevelOld.value = data.positionLevelOld;
|
||||||
|
positionNumberOld.value = data.positionNumberOld;
|
||||||
|
organizationPositionOld.value = data.organizationPositionOld;
|
||||||
|
isActive.value = data.isActive;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// const confirmMessage = async () => {
|
||||||
|
// dialogMessage(
|
||||||
|
// $q,
|
||||||
|
// "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
|
||||||
|
// "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
|
||||||
|
// "mdi-help-circle-outline",
|
||||||
|
// "ยืนยัน",
|
||||||
|
// "primary",
|
||||||
|
// () => sendConfirm(),
|
||||||
|
// undefined
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const sendConfirm = async () => {
|
||||||
|
// showLoader();
|
||||||
|
// await http
|
||||||
|
// .get(config.API.transferConfirmId(personId.toString()))
|
||||||
|
// .then((res: any) => {
|
||||||
|
// // const data = res.data.result;
|
||||||
|
// // console.log(data);
|
||||||
|
// success($q, "ส่งคำร้องข้อมูลสำเร็จ");
|
||||||
|
// })
|
||||||
|
// .catch((e) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// await getData();
|
||||||
|
// hideLoader();
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
onMounted(async () => {
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
688
src/modules/05_placement/components/helpgovernment/mainHelp.vue
Normal file
688
src/modules/05_placement/components/helpgovernment/mainHelp.vue
Normal file
|
|
@ -0,0 +1,688 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||||
|
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||||
|
|
||||||
|
import type { officerType } from "@/modules/05_placement/interface/response/officer";
|
||||||
|
|
||||||
|
const selected = ref([]);
|
||||||
|
const checkSelected = computed(() => {
|
||||||
|
if (selected.value.length === 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
success,
|
||||||
|
dialogMessage,
|
||||||
|
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"fullname",
|
||||||
|
"position",
|
||||||
|
"posNo",
|
||||||
|
"positionLevel",
|
||||||
|
"organization",
|
||||||
|
"reason",
|
||||||
|
"status",
|
||||||
|
"date",
|
||||||
|
"salary",
|
||||||
|
"positionTypeOld",
|
||||||
|
"positionLevelOld",
|
||||||
|
"positionNumberOld",
|
||||||
|
"organizationPositionOld",
|
||||||
|
"createdAt",
|
||||||
|
"btn",
|
||||||
|
]);
|
||||||
|
const visibleColumns2 = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"fullname",
|
||||||
|
"position",
|
||||||
|
"positionLevel",
|
||||||
|
"oc",
|
||||||
|
"agency",
|
||||||
|
"status",
|
||||||
|
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
|
const filterKeyword = ref<string>("");
|
||||||
|
const filterKeyword2 = ref<string>("");
|
||||||
|
const filterRef = ref<any>(null);
|
||||||
|
const resetFilter = () => {
|
||||||
|
filterKeyword.value = "";
|
||||||
|
filterKeyword2.value = "";
|
||||||
|
filterRef.value.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
// const nextPage = (id:string) => {
|
||||||
|
// router.push("/retirement/resign/"+id);
|
||||||
|
// };
|
||||||
|
const rows = ref<officerType[]>([]);
|
||||||
|
const rows2 = ref<any>([
|
||||||
|
{
|
||||||
|
personalId: "0a846508-4932-40de-9a9e-5b519492217c",
|
||||||
|
fullname: "นางสาวอย พชช",
|
||||||
|
position: "นักบริหาร",
|
||||||
|
positionLevel: "ต้น",
|
||||||
|
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||||
|
agency: "กลุ่มงานกุมารเวชกรรม",
|
||||||
|
status: "รออนุมัติ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
|
||||||
|
fullname: "นางสาววญ สพ",
|
||||||
|
position: "นักจัดการงานทั่วไป",
|
||||||
|
positionLevel: "ปฏิบัติการ",
|
||||||
|
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||||
|
agency: "กลุ่มงานข้อมูลเมือง",
|
||||||
|
status: "รออนุมัติ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
|
||||||
|
fullname: "นางสาววญ สพ",
|
||||||
|
position: "นักจัดการงานทั่วไป",
|
||||||
|
positionLevel: "ปฏิบัติการ",
|
||||||
|
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||||
|
agency: "กลุ่มงานข้อมูลเมือง",
|
||||||
|
status: "รออนุมัติ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
personalId: "08db721d-adff-47b0-8762-41cd5c991001",
|
||||||
|
fullname: "นางสาววญ สพ",
|
||||||
|
position: "นักจัดการงานทั่วไป",
|
||||||
|
positionLevel: "ปฏิบัติการ",
|
||||||
|
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||||
|
agency: "กลุ่มงานข้อมูลเมือง",
|
||||||
|
status: "รออนุมัติ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
|
||||||
|
fullname: "นางสาววญ สพ",
|
||||||
|
position: "นักจัดการงานทั่วไป",
|
||||||
|
positionLevel: "ปฏิบัติการ",
|
||||||
|
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||||
|
agency: "กลุ่มงานข้อมูลเมือง",
|
||||||
|
status: "รออนุมัติ",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
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: "createdAt",
|
||||||
|
align: "left",
|
||||||
|
label: "วันเวลาที่ขอย้าย",
|
||||||
|
sortable: true,
|
||||||
|
field: "createdAt",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionTypeOld",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงานก่อนหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionTypeOld",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionNumberOld",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ตำเเหน่งก่อนหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionNumberOld",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionLevelOld",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับก่อนหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionLevelOld",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "organizationPositionOld",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงานก่อนหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "organizationPositionOld",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "salary",
|
||||||
|
align: "left",
|
||||||
|
label: "เงินเดือนก่อนหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "salary",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reason",
|
||||||
|
align: "left",
|
||||||
|
label: "เหตุผลที่ย้ายหน่วยงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "reason",
|
||||||
|
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: "posNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ตำเเหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posNo",
|
||||||
|
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: "organization",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงานที่ขอโอนไป",
|
||||||
|
sortable: true,
|
||||||
|
field: "organization",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "btn",
|
||||||
|
align: "left",
|
||||||
|
label: "",
|
||||||
|
sortable: true,
|
||||||
|
field: "btn",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columns2 = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
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: "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: "oc",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "oc",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "agency",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงานที่ขอโอนไป",
|
||||||
|
sortable: true,
|
||||||
|
field: "agency",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
//--------------(ปุ่มลบ)----------------//
|
||||||
|
|
||||||
|
const openDetail = (id:string) => {
|
||||||
|
router.push(`/help-government/detail/${id}`)
|
||||||
|
}
|
||||||
|
const openModal = () => (modal.value = true);
|
||||||
|
const closeModal = () => (modal.value = false);
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.officerMain())
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
console.log("data==>", data);
|
||||||
|
rows.value = data.map((item: officerType) => ({
|
||||||
|
id: item.id,
|
||||||
|
fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
|
||||||
|
position: item.position,
|
||||||
|
posNo: item.posNo,
|
||||||
|
positionLevel: item.positionLevel,
|
||||||
|
createdAt: date2Thai(item.createdAt),
|
||||||
|
organization: item.organization,
|
||||||
|
reason: item.reason,
|
||||||
|
status: item.status,
|
||||||
|
date: item.date,
|
||||||
|
salary: item.salary,
|
||||||
|
positionTypeOld: item.positionTypeOld,
|
||||||
|
positionLevelOld: item.positionLevelOld,
|
||||||
|
positionNumberOld: item.positionNumberOld,
|
||||||
|
organizationPositionOld: item.organizationPositionOld,
|
||||||
|
isActive: item.isActive,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteData = async (id:string) => {
|
||||||
|
await http
|
||||||
|
.delete(config.API.officerMainDelete(id))
|
||||||
|
.then((res)=>{
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
console.log(res)
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const clickDelete = async (name:string,id:string) => {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
`ลบข้อมูลของ ${name}`,
|
||||||
|
`ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
"delete",
|
||||||
|
"ยืนยัน",
|
||||||
|
"red",
|
||||||
|
async () => await deleteData(id)
|
||||||
|
,
|
||||||
|
async () => await getData()
|
||||||
|
|
||||||
|
);
|
||||||
|
};
|
||||||
|
onMounted(async () => {
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
</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="row q-pa-md">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row col-12">
|
||||||
|
<q-btn
|
||||||
|
@click="openModal"
|
||||||
|
size="14px"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="add"
|
||||||
|
icon="mdi-account-arrow-right"
|
||||||
|
>
|
||||||
|
<q-tooltip>ส่งไปออกคำสั่งโอนออก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<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 q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 q-pt-sm">
|
||||||
|
<d-table
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filterKeyword"
|
||||||
|
row-key="id"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
<q-td key="no" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.fullname }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="createdAt" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.createdAt }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionTypeOld" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.positionTypeOld }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionNumberOld" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.positionNumberOld }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionLevelOld" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.positionLevelOld }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.organizationPositionOld }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="salary" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.salary }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="reason" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.reason }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="position" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.position }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="posNo" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.posNo }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.positionLevel }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="organization" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.organization }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="agency" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.agency }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="status" :props="props" @click="openDetail(props.row.id)">
|
||||||
|
{{ props.row.status }}
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
icon="mdi-dots-vertical"
|
||||||
|
size="12px"
|
||||||
|
color="grey-7"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
>
|
||||||
|
<q-menu
|
||||||
|
transition-show="jump-down"
|
||||||
|
transition-hide="jump-up"
|
||||||
|
>
|
||||||
|
<q-list dense style="min-width: 100px">
|
||||||
|
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click="clickDelete(props.row.fullname,props.row.id)"
|
||||||
|
>
|
||||||
|
<q-item-section
|
||||||
|
style="min-width: 0px"
|
||||||
|
avatar
|
||||||
|
class="q-py-sm"
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||||
|
<q-icon color="red" size="xs" name="mdi-delete" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>ลบ</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-dialog v-model="modal">
|
||||||
|
<q-card style="width: 1200px; max-width: 80vw">
|
||||||
|
<DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pt-none">
|
||||||
|
<div class="row justify-end">
|
||||||
|
<div class="col-5">
|
||||||
|
<q-toolbar style="padding: 0">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
debounce="300"
|
||||||
|
v-model="filterKeyword2"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="width: 850px; max-width: auto"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="filterKeyword2 == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="filterKeyword2 !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns2"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns2"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<d-table
|
||||||
|
:columns="columns2"
|
||||||
|
:rows="rows2"
|
||||||
|
:filter="filterKeyword2"
|
||||||
|
row-key="personalId"
|
||||||
|
class="custom-header-table"
|
||||||
|
:visible-columns="visibleColumns2"
|
||||||
|
selection="multiple"
|
||||||
|
v-model:selected="selected"
|
||||||
|
>
|
||||||
|
<template v-slot:header-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.selected"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<!-- <template v-slot:body-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.selected"
|
||||||
|
/>
|
||||||
|
</template> -->
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td>
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="no" :props="props">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fullname" :props="props">
|
||||||
|
{{ props.row.fullname }}
|
||||||
|
</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="oc" :props="props">
|
||||||
|
{{ props.row.oc }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="agency" :props="props">
|
||||||
|
{{ props.row.agency }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="status" :props="props">
|
||||||
|
{{ props.row.status }}
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn
|
||||||
|
label="ส่งไปออกคำสั่ง"
|
||||||
|
@click=""
|
||||||
|
:disable="checkSelected"
|
||||||
|
color="public"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
23
src/modules/05_placement/interface/response/officer.ts
Normal file
23
src/modules/05_placement/interface/response/officer.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
interface officerType {
|
||||||
|
no:number,
|
||||||
|
id: string,
|
||||||
|
prefix: string,
|
||||||
|
firstName: string,
|
||||||
|
lastName: string,
|
||||||
|
position: string,
|
||||||
|
posNo: string,
|
||||||
|
positionLevel: string,
|
||||||
|
createdAt: Date,
|
||||||
|
organization: string,
|
||||||
|
reason: string,
|
||||||
|
status: string,
|
||||||
|
date: Date,
|
||||||
|
salary: number,
|
||||||
|
positionTypeOld: string,
|
||||||
|
positionLevelOld: string,
|
||||||
|
positionNumberOld: string,
|
||||||
|
organizationPositionOld: string,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { officerType};
|
||||||
|
|
@ -42,7 +42,8 @@ const receiveMain = () =>
|
||||||
import("@/modules/05_placement/components/Receive/receiveDetail.vue");
|
import("@/modules/05_placement/components/Receive/receiveDetail.vue");
|
||||||
const ReceiveAdd = () =>
|
const ReceiveAdd = () =>
|
||||||
import("@/modules/05_placement/components/Receive/FormAdd.vue");
|
import("@/modules/05_placement/components/Receive/FormAdd.vue");
|
||||||
|
const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
|
||||||
|
const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/placement",
|
path: "/placement",
|
||||||
|
|
@ -204,4 +205,24 @@ export default [
|
||||||
Role: "placement",
|
Role: "placement",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/help-government",
|
||||||
|
name: "help-government",
|
||||||
|
component: helpgovernment,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [6.6],
|
||||||
|
Role: "placement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/help-government/detail/:id",
|
||||||
|
name: "help-governmentbyId",
|
||||||
|
component: helpgovernmentbyId,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [6.6],
|
||||||
|
Role: "placement",
|
||||||
|
},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue