ui/api ไล่ออก ปลดออก ให้ออก
This commit is contained in:
AnandaTon
parent
84f61e70d2
commit
4dfe222a85
19 changed files with 3326 additions and 2415 deletions
|
|
@ -1,36 +1,46 @@
|
||||||
import env from "../index";
|
import env from "../index";
|
||||||
const retirement = `${env.API_URI}/retirement`
|
const retirement = `${env.API_URI}/retirement`;
|
||||||
const retirementDischarge = `${retirement}/discharge`
|
const retirementDischarge = `${retirement}/discharge`;
|
||||||
const retirementExpulsion = `${retirement}/expulsion`
|
const retirementExpulsion = `${retirement}/expulsion`;
|
||||||
const retirementOut = `${retirement}/out`
|
const retirementOut = `${retirement}/out`;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
|
profile: (type: string, year: string) =>
|
||||||
profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
|
`${retirement}/profile/${type}/${year}`,
|
||||||
listRetire: (retireId: string) => `${retirement}/${retireId}`,
|
profileRetire: (retireProfileId: string) =>
|
||||||
createnote: () => `${retirement}/edit`,
|
`${retirement}/profile/${retireProfileId}`,
|
||||||
removeProfile: () => `${retirement}/remove`,
|
listRetire: (retireId: string) => `${retirement}/${retireId}`,
|
||||||
reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
|
createnote: () => `${retirement}/edit`,
|
||||||
retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
|
removeProfile: () => `${retirement}/remove`,
|
||||||
createProfile: () => `${retirement}/profile`,
|
reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
|
||||||
|
retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
|
||||||
|
createProfile: () => `${retirement}/profile`,
|
||||||
|
|
||||||
//RetirementDeceased ถึงแก่กรรม
|
//RetirementDeceased ถึงแก่กรรม
|
||||||
listDeceased: () => `${retirement}/deceased`,
|
listDeceased: () => `${retirement}/deceased`,
|
||||||
detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
|
detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
|
||||||
|
|
||||||
// RetirementResign ระบบลาออก
|
// RetirementResign ระบบลาออก
|
||||||
listResign: () => `${retirement}/resign`,
|
listResign: () => `${retirement}/resign`,
|
||||||
resingByid: (id: string) => `${retirement}/resign/${id}`,
|
resingByid: (id: string) => `${retirement}/resign/${id}`,
|
||||||
resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
|
resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
|
||||||
resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
|
resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
|
||||||
|
|
||||||
// ปลดออก
|
// ปลดออก
|
||||||
retirementDischarge,
|
retirementDischarge,
|
||||||
|
listDischared: () => `${retirement}/dischared`,
|
||||||
|
discharedByid: (id: string) => `${retirement}/dischared/${id}`,
|
||||||
|
discharedReport: `${retirement}/dischared/report`,
|
||||||
|
|
||||||
// ไล่ออก
|
// ไล่ออก
|
||||||
retirementExpulsion,
|
retirementExpulsion,
|
||||||
|
listExpulsion: () => `${retirement}/expulsion`,
|
||||||
// ให้ออก
|
expulsionByid: (id: string) => `${retirement}/expulsion/${id}`,
|
||||||
retirementOut
|
expulsionReport: `${retirement}/expulsion/report`,
|
||||||
|
|
||||||
|
// ให้ออก
|
||||||
|
retirementOut,
|
||||||
|
listOut: () => `${retirement}/out`,
|
||||||
|
outByid: (id: string) => `${retirement}/out/${id}`,
|
||||||
|
outReport: `${retirement}/out/report`,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -257,7 +257,7 @@ const menuList = readonly<any[]>([
|
||||||
role: "placement",
|
role: "placement",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 6.10,
|
key: 6.1,
|
||||||
label: "รายการอื่นๆ" /* */,
|
label: "รายการอื่นๆ" /* */,
|
||||||
path: "other",
|
path: "other",
|
||||||
role: "placement",
|
role: "placement",
|
||||||
|
|
|
||||||
69
src/modules/06_retirement/components/DialogFooter.vue
Normal file
69
src/modules/06_retirement/components/DialogFooter.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
editvisible: Boolean,
|
||||||
|
modalEdit: Boolean,
|
||||||
|
cancel: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
save: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
validate: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:editvisible",
|
||||||
|
"update:next",
|
||||||
|
"update:previous",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const updateEdit = (value: Boolean) => {
|
||||||
|
emit("update:editvisible", value);
|
||||||
|
};
|
||||||
|
// const cancel = async () => {
|
||||||
|
// props.cancel();
|
||||||
|
// };
|
||||||
|
const edit = async () => {
|
||||||
|
updateEdit(!props.editvisible);
|
||||||
|
props.edit();
|
||||||
|
};
|
||||||
|
const checkSave = () => {
|
||||||
|
props.validate();
|
||||||
|
props.save();
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-card-actions class="text-primary">
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
v-if="!editvisible"
|
||||||
|
outline
|
||||||
|
:disabled="editvisible"
|
||||||
|
:color="editvisible ? 'grey-7' : 'primary'"
|
||||||
|
@click="edit"
|
||||||
|
><!-- icon="mdi-pencil-outline"
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
<div v-else>
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
:disabled="!editvisible"
|
||||||
|
:color="!editvisible ? 'grey-7' : 'public'"
|
||||||
|
@click="checkSave"
|
||||||
|
>
|
||||||
|
</q-btn><!-- icon="mdi-content-save-outline">
|
||||||
|
<q-tooltip>บันทึก</q-tooltip> -->
|
||||||
|
</div>
|
||||||
|
</q-card-actions>
|
||||||
|
</template>
|
||||||
29
src/modules/06_retirement/components/DialogHeader.vue
Normal file
29
src/modules/06_retirement/components/DialogHeader.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps({
|
||||||
|
title: String,
|
||||||
|
close: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const close = async () => {
|
||||||
|
props.close();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-toolbar class="q-py-md">
|
||||||
|
<q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
|
||||||
|
<q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
|
||||||
|
</q-toolbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
|
||||||
|
.header-text {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 26px;
|
||||||
|
color: #35373C;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,576 @@
|
||||||
|
<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 { useTransferDataStore } from "@/modules/05_placement/store";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import DialogFooter from "@/modules/06_retirement/components/DialogFooter.vue";
|
||||||
|
import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import type { ResponseData } from "@/modules/06_retirement/interface/response/discharged";
|
||||||
|
|
||||||
|
const selected = ref<ResponseData[]>([]);
|
||||||
|
const checkSelected = computed(() => {
|
||||||
|
if (selected.value.length === 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const transferStore = useTransferDataStore();
|
||||||
|
|
||||||
|
const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
|
||||||
|
const { statusText } = transferStore;
|
||||||
|
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"fullname",
|
||||||
|
"position",
|
||||||
|
"positionLevel",
|
||||||
|
"organizationPositionOld",
|
||||||
|
"organization",
|
||||||
|
"statustext",
|
||||||
|
]);
|
||||||
|
const visibleColumns2 = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"fullname",
|
||||||
|
"position",
|
||||||
|
"positionLevel",
|
||||||
|
"organizationPositionOld",
|
||||||
|
"organization",
|
||||||
|
"statustext",
|
||||||
|
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
|
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<ResponseData[]>([]);
|
||||||
|
const rows2 = ref<ResponseData[]>([]);
|
||||||
|
const filters = ref<ResponseData[]>([]);
|
||||||
|
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: "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: "organizationPositionOld",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "organizationPositionOld",
|
||||||
|
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: "statustext",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะ",
|
||||||
|
sortable: true,
|
||||||
|
field: "statustext",
|
||||||
|
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: "organizationPositionOld",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "organizationPositionOld",
|
||||||
|
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: "statustext",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะ",
|
||||||
|
sortable: true,
|
||||||
|
field: "statustext",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const openModal = () => (modal.value = true);
|
||||||
|
const closeModal = () => (modal.value = false);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const openModalOrder = () => {
|
||||||
|
openModal();
|
||||||
|
const row = filters.value.filter(
|
||||||
|
(r: ResponseData) =>
|
||||||
|
r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
|
||||||
|
);
|
||||||
|
rows2.value = row;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.retirementDischarge)
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let list: ResponseData[] = [];
|
||||||
|
data.map((r: ResponseData) => {
|
||||||
|
list.push({
|
||||||
|
createdAt: new Date(),
|
||||||
|
date: new Date(),
|
||||||
|
firstName: r.firstName ?? "",
|
||||||
|
id: r.id ?? "",
|
||||||
|
isActive: r.isActive ? r.isActive : false,
|
||||||
|
lastName: r.lastName ?? "",
|
||||||
|
organization: r.organization ?? "",
|
||||||
|
organizationPositionOld: r.organizationPositionOld ?? "",
|
||||||
|
posNo: r.posNo ?? "",
|
||||||
|
position: r.position ?? "",
|
||||||
|
positionLevel: r.positionLevel ?? "",
|
||||||
|
positionLevelOld: r.positionLevelOld ?? "",
|
||||||
|
positionNumberOld: r.positionNumberOld ?? "",
|
||||||
|
positionTypeOld: r.positionTypeOld ?? "",
|
||||||
|
prefix: r.prefix ?? "",
|
||||||
|
reason: r.reason ?? "",
|
||||||
|
salary: r.salary ? r.salary : 0,
|
||||||
|
status: r.status ?? "",
|
||||||
|
statustext: statusText(r.status ?? ""),
|
||||||
|
fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${
|
||||||
|
r.lastName ?? ""
|
||||||
|
}`,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
rows.value = list;
|
||||||
|
filters.value = list;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickDelete = (id: string) => {
|
||||||
|
$q.dialog({
|
||||||
|
title: "ยืนยันการลบข้อมูล",
|
||||||
|
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||||
|
cancel: {
|
||||||
|
flat: true,
|
||||||
|
color: "negative",
|
||||||
|
},
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.discharedByid(id))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
getData();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(() => {})
|
||||||
|
.onDismiss(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveOrder = async () => {
|
||||||
|
const id = selected.value.map((r) => r.id);
|
||||||
|
const body = {
|
||||||
|
id,
|
||||||
|
};
|
||||||
|
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.discharedReport, body)
|
||||||
|
.then((res: any) => {
|
||||||
|
// const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
success($q, "ส่งไปออกคำสั่งโอนออกสำเร็จ");
|
||||||
|
closeModal();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await getData();
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</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="openModalOrder"
|
||||||
|
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-th auto-width />
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td
|
||||||
|
key="no"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/discharged/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="fullname"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/discharged/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.row.fullname }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="position"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/discharged/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.row.position }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="positionLevel"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/discharged/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.row.positionLevel }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="organizationPositionOld"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/discharged/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organizationPositionOld }}
|
||||||
|
<!-- <q-tooltip>
|
||||||
|
{{ props.row.organizationPositionOld }}
|
||||||
|
</q-tooltip> -->
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="organization"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/discharged/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organization }}
|
||||||
|
<!-- <q-tooltip>
|
||||||
|
{{ props.row.organization }}
|
||||||
|
</q-tooltip> -->
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="statustext" :props="props">
|
||||||
|
{{ props.row.statustext }}
|
||||||
|
</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>
|
||||||
|
</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="id"
|
||||||
|
: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="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="organizationPositionOld" :props="props">
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organizationPositionOld }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="organization" :props="props">
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organization }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="statustext" :props="props">
|
||||||
|
{{ props.row.statustext }}
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn
|
||||||
|
label="ส่งไปออกคำสั่ง"
|
||||||
|
@click="saveOrder"
|
||||||
|
:disable="checkSelected"
|
||||||
|
color="public"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,443 @@
|
||||||
|
<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)"
|
||||||
|
/>
|
||||||
|
รายละเอียดการปลดออกของ {{ responseData.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">
|
||||||
|
{{ responseData.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="responseData.avataPath"
|
||||||
|
v-if="responseData.avataPath !== ''"
|
||||||
|
/>
|
||||||
|
<q-img src="@/assets/avatar_user.jpg" v-else />
|
||||||
|
</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">
|
||||||
|
{{ responseData.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">
|
||||||
|
{{ responseData.positionLevelOld }}
|
||||||
|
</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.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="confirmMessage"
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
row-key="fileName"
|
||||||
|
hide-header
|
||||||
|
hide-bottom
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td key="no" :props="props">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fileName" :props="props">
|
||||||
|
{{ props.row.fileName }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="btnMicrosoft" :props="props">
|
||||||
|
<q-btn flat dense round color="red" icon="picture_as_pdf">
|
||||||
|
<q-tooltip>ไฟล์ PDF</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn flat dense round color="blue" icon="mdi-file-word">
|
||||||
|
<q-tooltip>ไฟล์ WORD</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</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-sm" v-if="!edit">
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
icon-right="mdi-file-edit-outline"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="แก้ไข"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="edit = !edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="q-gutter-sm" v-else>
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="public"
|
||||||
|
dense
|
||||||
|
class="q-px-sm"
|
||||||
|
label="บันทึก"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="conditionSave"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="red"
|
||||||
|
dense
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ยกเลิก"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="edit = !edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></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, QForm } from "quasar";
|
||||||
|
import type {
|
||||||
|
TypeFile,
|
||||||
|
ResponseDataDetail,
|
||||||
|
} from "@/modules/06_retirement/interface/response/discharged";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
|
||||||
|
const personId = route.params.id;
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
dialogMessage,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
success,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const myForm = ref<QForm | null>(null);
|
||||||
|
const roleAdmin = ref<boolean>(false);
|
||||||
|
const edit = ref<boolean>(false);
|
||||||
|
|
||||||
|
const organizationPositionOld = ref<string>("");
|
||||||
|
const positionTypeOld = ref<string>("");
|
||||||
|
const positionLevelOld = ref<string>("");
|
||||||
|
const posNo = ref<string>("");
|
||||||
|
const salary = ref<number>(0);
|
||||||
|
const organization = ref<string>("");
|
||||||
|
const date = ref<Date | null>(null);
|
||||||
|
const reason = ref<string>("");
|
||||||
|
|
||||||
|
const responseData = ref<ResponseDataDetail>({
|
||||||
|
avataPath: "",
|
||||||
|
createdAt: new Date(),
|
||||||
|
date: new Date(),
|
||||||
|
id: "",
|
||||||
|
organization: "",
|
||||||
|
organizationPositionOld: "",
|
||||||
|
positionLevelOld: "",
|
||||||
|
positionNumberOld: "",
|
||||||
|
positionTypeOld: "",
|
||||||
|
reason: "",
|
||||||
|
salary: 0,
|
||||||
|
status: "",
|
||||||
|
fullname: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (keycloak.tokenParsed != null) {
|
||||||
|
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
|
||||||
|
console.log("roleAdmin===>", roleAdmin.value);
|
||||||
|
}
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.discharedByid(personId.toString()))
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
let list: TypeFile[] = [];
|
||||||
|
if (data.docs.length > 0) {
|
||||||
|
data.docs.map((doc: TypeFile) => {
|
||||||
|
list.push({
|
||||||
|
pathName: doc.pathName ?? "",
|
||||||
|
fileName: doc.fileName ?? "",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
rows.value = list;
|
||||||
|
responseData.value.createdAt = data.createdAt;
|
||||||
|
responseData.value.date =
|
||||||
|
data.date !== null ? new Date(data.date) : new Date();
|
||||||
|
responseData.value.id = data.id ?? "";
|
||||||
|
responseData.value.organization = data.organization ?? "";
|
||||||
|
responseData.value.organizationPositionOld =
|
||||||
|
data.organizationPositionOld ?? "";
|
||||||
|
responseData.value.positionLevelOld = data.positionLevelOld ?? "";
|
||||||
|
responseData.value.positionNumberOld = data.positionNumberOld ?? "";
|
||||||
|
responseData.value.positionTypeOld = data.positionTypeOld ?? "";
|
||||||
|
responseData.value.reason = data.reason ?? "";
|
||||||
|
responseData.value.salary = data.salary !== null ? data.salary : 0;
|
||||||
|
responseData.value.status = data.status ?? "";
|
||||||
|
responseData.value.avataPath = data.avataPath ?? "";
|
||||||
|
responseData.value.fullname = `${data.prefix ?? "-"} ${
|
||||||
|
data.firstName ?? "-"
|
||||||
|
} ${data.lastName ?? "-"}`;
|
||||||
|
|
||||||
|
organizationPositionOld.value = data.organizationPositionOld ?? "";
|
||||||
|
positionTypeOld.value = data.positionTypeOld ?? "";
|
||||||
|
positionLevelOld.value = data.positionLevelOld ?? "";
|
||||||
|
posNo.value = data.posNo ?? "";
|
||||||
|
salary.value = data.salary ?? "";
|
||||||
|
organization.value = data.organization ?? "";
|
||||||
|
date.value = data.date !== null ? new Date(data.date) : null;
|
||||||
|
reason.value = data.reason ?? "";
|
||||||
|
})
|
||||||
|
.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();
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const conditionSave = async () => {
|
||||||
|
if (myForm.value !== null) {
|
||||||
|
myForm.value.validate().then((success) => {
|
||||||
|
if (success) {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||||
|
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
|
||||||
|
"mdi-help-circle-outline",
|
||||||
|
"ตกลง",
|
||||||
|
"public",
|
||||||
|
async () => await saveData(),
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = async () => {
|
||||||
|
const body = {
|
||||||
|
organization: organization.value,
|
||||||
|
reason: reason.value,
|
||||||
|
organizationPositionOld: organizationPositionOld.value,
|
||||||
|
date: date.value,
|
||||||
|
positionTypeOld: positionTypeOld.value,
|
||||||
|
positionLevelOld: positionLevelOld.value,
|
||||||
|
positionNumberOld: posNo.value,
|
||||||
|
amountOld: salary.value,
|
||||||
|
};
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.discharedByid(personId.toString()), body)
|
||||||
|
.then((res: any) => {
|
||||||
|
// const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||||
|
edit.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await getData();
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</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>
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
<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)"
|
|
||||||
/>
|
|
||||||
เพิ่ม คำสั่งให้ออก ปลดออก ไล่ออก
|
|
||||||
</div>
|
|
||||||
<q-card flat bordered class="col-12 q-my-sm q-mt-sm">
|
|
||||||
<q-stepper
|
|
||||||
v-model="step"
|
|
||||||
ref="stepper"
|
|
||||||
color="primary"
|
|
||||||
animated
|
|
||||||
class="step"
|
|
||||||
header-class="bg-grey-1"
|
|
||||||
>
|
|
||||||
<q-step
|
|
||||||
:name="1"
|
|
||||||
title="รายละเอียดการออกคำสั่ง"
|
|
||||||
prefix="1"
|
|
||||||
:done="step > 1"
|
|
||||||
:header-nav="step > 1"
|
|
||||||
/>
|
|
||||||
<q-step
|
|
||||||
:name="2"
|
|
||||||
title="เลือกรายชื่อส่งสำเนาคำสั่ง"
|
|
||||||
prefix="2"
|
|
||||||
:done="step > 2"
|
|
||||||
:header-nav="step > 2"
|
|
||||||
/>
|
|
||||||
<q-step
|
|
||||||
:name="3"
|
|
||||||
title="รายละเอียดคำสั่งและแนบท้าย"
|
|
||||||
prefix="3"
|
|
||||||
:header-nav="step > 3"
|
|
||||||
/>
|
|
||||||
<template v-slot:message>
|
|
||||||
<step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
|
|
||||||
<step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
|
|
||||||
<step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
|
|
||||||
</template>
|
|
||||||
</q-stepper>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { ref, defineAsyncComponent } from "vue";
|
|
||||||
import type { QStepper } from "quasar";
|
|
||||||
|
|
||||||
const step01 = defineAsyncComponent(
|
|
||||||
() => import("@/modules/06_retirement/components/DismissOrder/step01.vue")
|
|
||||||
);
|
|
||||||
const step02 = defineAsyncComponent(
|
|
||||||
() => import("@/modules/06_retirement/components/DismissOrder/step02.vue")
|
|
||||||
);
|
|
||||||
const step03 = defineAsyncComponent(
|
|
||||||
() => import("@/modules/06_retirement/components/DismissOrder/step03.vue")
|
|
||||||
);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const step = ref<number>(1);
|
|
||||||
const stepper = ref<QStepper>();
|
|
||||||
|
|
||||||
const nextStep = () => {
|
|
||||||
stepper.value!.next();
|
|
||||||
};
|
|
||||||
|
|
||||||
const previousStep = () => {
|
|
||||||
stepper.value!.previous();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.q-stepper--horizontal .q-stepper__step-inner {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
.step .q-stepper__tab--done .q-stepper__title,
|
|
||||||
.step .q-stepper__tab--active .q-stepper__title {
|
|
||||||
color: #35473c !important;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.step .q-stepper__header--standard-labels .q-stepper__tab {
|
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,443 @@
|
||||||
|
<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)"
|
||||||
|
/>
|
||||||
|
รายละเอียดการให้ออกของ {{ responseData.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">
|
||||||
|
{{ responseData.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="responseData.avataPath"
|
||||||
|
v-if="responseData.avataPath !== ''"
|
||||||
|
/>
|
||||||
|
<q-img src="@/assets/avatar_user.jpg" v-else />
|
||||||
|
</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">
|
||||||
|
{{ responseData.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">
|
||||||
|
{{ responseData.positionLevelOld }}
|
||||||
|
</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.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="confirmMessage"
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
row-key="fileName"
|
||||||
|
hide-header
|
||||||
|
hide-bottom
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td key="no" :props="props">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fileName" :props="props">
|
||||||
|
{{ props.row.fileName }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="btnMicrosoft" :props="props">
|
||||||
|
<q-btn flat dense round color="red" icon="picture_as_pdf">
|
||||||
|
<q-tooltip>ไฟล์ PDF</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn flat dense round color="blue" icon="mdi-file-word">
|
||||||
|
<q-tooltip>ไฟล์ WORD</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</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-sm" v-if="!edit">
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
icon-right="mdi-file-edit-outline"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="แก้ไข"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="edit = !edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="q-gutter-sm" v-else>
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="public"
|
||||||
|
dense
|
||||||
|
class="q-px-sm"
|
||||||
|
label="บันทึก"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="conditionSave"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="red"
|
||||||
|
dense
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ยกเลิก"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="edit = !edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></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, QForm } from "quasar";
|
||||||
|
import type {
|
||||||
|
TypeFile,
|
||||||
|
ResponseDataDetail,
|
||||||
|
} from "@/modules/06_retirement/interface/response/expulsion";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
|
||||||
|
const personId = route.params.id;
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
dialogMessage,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
success,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const myForm = ref<QForm | null>(null);
|
||||||
|
const roleAdmin = ref<boolean>(false);
|
||||||
|
const edit = ref<boolean>(false);
|
||||||
|
|
||||||
|
const organizationPositionOld = ref<string>("");
|
||||||
|
const positionTypeOld = ref<string>("");
|
||||||
|
const positionLevelOld = ref<string>("");
|
||||||
|
const posNo = ref<string>("");
|
||||||
|
const salary = ref<number>(0);
|
||||||
|
const organization = ref<string>("");
|
||||||
|
const date = ref<Date | null>(null);
|
||||||
|
const reason = ref<string>("");
|
||||||
|
|
||||||
|
const responseData = ref<ResponseDataDetail>({
|
||||||
|
avataPath: "",
|
||||||
|
createdAt: new Date(),
|
||||||
|
date: new Date(),
|
||||||
|
id: "",
|
||||||
|
organization: "",
|
||||||
|
organizationPositionOld: "",
|
||||||
|
positionLevelOld: "",
|
||||||
|
positionNumberOld: "",
|
||||||
|
positionTypeOld: "",
|
||||||
|
reason: "",
|
||||||
|
salary: 0,
|
||||||
|
status: "",
|
||||||
|
fullname: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (keycloak.tokenParsed != null) {
|
||||||
|
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
|
||||||
|
console.log("roleAdmin===>", roleAdmin.value);
|
||||||
|
}
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.outByid(personId.toString()))
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
let list: TypeFile[] = [];
|
||||||
|
if (data.docs.length > 0) {
|
||||||
|
data.docs.map((doc: TypeFile) => {
|
||||||
|
list.push({
|
||||||
|
pathName: doc.pathName ?? "",
|
||||||
|
fileName: doc.fileName ?? "",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
rows.value = list;
|
||||||
|
responseData.value.createdAt = data.createdAt;
|
||||||
|
responseData.value.date =
|
||||||
|
data.date !== null ? new Date(data.date) : new Date();
|
||||||
|
responseData.value.id = data.id ?? "";
|
||||||
|
responseData.value.organization = data.organization ?? "";
|
||||||
|
responseData.value.organizationPositionOld =
|
||||||
|
data.organizationPositionOld ?? "";
|
||||||
|
responseData.value.positionLevelOld = data.positionLevelOld ?? "";
|
||||||
|
responseData.value.positionNumberOld = data.positionNumberOld ?? "";
|
||||||
|
responseData.value.positionTypeOld = data.positionTypeOld ?? "";
|
||||||
|
responseData.value.reason = data.reason ?? "";
|
||||||
|
responseData.value.salary = data.salary !== null ? data.salary : 0;
|
||||||
|
responseData.value.status = data.status ?? "";
|
||||||
|
responseData.value.avataPath = data.avataPath ?? "";
|
||||||
|
responseData.value.fullname = `${data.prefix ?? "-"} ${
|
||||||
|
data.firstName ?? "-"
|
||||||
|
} ${data.lastName ?? "-"}`;
|
||||||
|
|
||||||
|
organizationPositionOld.value = data.organizationPositionOld ?? "";
|
||||||
|
positionTypeOld.value = data.positionTypeOld ?? "";
|
||||||
|
positionLevelOld.value = data.positionLevelOld ?? "";
|
||||||
|
posNo.value = data.posNo ?? "";
|
||||||
|
salary.value = data.salary ?? "";
|
||||||
|
organization.value = data.organization ?? "";
|
||||||
|
date.value = data.date !== null ? new Date(data.date) : null;
|
||||||
|
reason.value = data.reason ?? "";
|
||||||
|
})
|
||||||
|
.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();
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const conditionSave = async () => {
|
||||||
|
if (myForm.value !== null) {
|
||||||
|
myForm.value.validate().then((success) => {
|
||||||
|
if (success) {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||||
|
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
|
||||||
|
"mdi-help-circle-outline",
|
||||||
|
"ตกลง",
|
||||||
|
"public",
|
||||||
|
async () => await saveData(),
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = async () => {
|
||||||
|
const body = {
|
||||||
|
organization: organization.value,
|
||||||
|
reason: reason.value,
|
||||||
|
organizationPositionOld: organizationPositionOld.value,
|
||||||
|
date: date.value,
|
||||||
|
positionTypeOld: positionTypeOld.value,
|
||||||
|
positionLevelOld: positionLevelOld.value,
|
||||||
|
positionNumberOld: posNo.value,
|
||||||
|
amountOld: salary.value,
|
||||||
|
};
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.outByid(personId.toString()), body)
|
||||||
|
.then((res: any) => {
|
||||||
|
// const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||||
|
edit.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await getData();
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</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>
|
||||||
|
|
@ -1,353 +0,0 @@
|
||||||
<template>
|
|
||||||
<div style="max-height: 68vh; overflow-y: scroll">
|
|
||||||
<q-form ref="myForm" class="q-pa-md">
|
|
||||||
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
|
|
||||||
<div class="col-xs-12 col-md-6">
|
|
||||||
<selector
|
|
||||||
:class="getClass(true)"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="typeOrder"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ประเภทคำสั่ง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="typeOrderOption"
|
|
||||||
option-value="id"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(true)"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="nameOrder"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
|
||||||
:label="`${'คำสั่งเรื่อง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(true)"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="command"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
|
|
||||||
:label="`${'คำสั่ง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
hide-bottom-space
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<label class="col-1 flex justify-center items-center text-bold"
|
|
||||||
>/</label
|
|
||||||
>
|
|
||||||
<div class="col-5">
|
|
||||||
<datepicker
|
|
||||||
v-model="dateYear"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
year-picker
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
|
||||||
<template #year-overlay-value="{ value }">{{
|
|
||||||
parseInt(value + 543)
|
|
||||||
}}</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
:model-value="dateYear + 543"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
|
|
||||||
:label="`${'พ.ศ.'}`"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-5 col-md-3">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="dateCommand"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
borderless
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">
|
|
||||||
{{ year + 543 }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ parseInt(value + 543) }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
class="full-width datepicker"
|
|
||||||
:model-value="
|
|
||||||
dateCommand != null ? date2Thai(dateCommand) : null
|
|
||||||
"
|
|
||||||
:label="`${'วันที่มีผลออกคำสั่ง'}`"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-6">
|
|
||||||
<selector
|
|
||||||
:class="getClass(true)"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="byOrder"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'คำสั่งโดย'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="byOrderOption"
|
|
||||||
option-value="id"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-md-6">
|
|
||||||
<!-- :readonly="!edit"
|
|
||||||
:borderless="!edit" -->
|
|
||||||
<q-input
|
|
||||||
:class="getClass(true)"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="nameCommand"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
|
|
||||||
:label="`${'ผู้มีอำนาจลงนาม'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-md-6">
|
|
||||||
<!-- :readonly="!edit"
|
|
||||||
:borderless="!edit" -->
|
|
||||||
<q-input
|
|
||||||
:class="getClass(true)"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="positionCommand"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
|
|
||||||
:label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-separator />
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-md-6">
|
|
||||||
<selector
|
|
||||||
:class="getClass(true)"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="test"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ชื่อ-นามสกุล'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="testOption"
|
|
||||||
option-value="id"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</div>
|
|
||||||
<q-separator />
|
|
||||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
|
||||||
<q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import type { QForm } from "quasar";
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const { date2Thai } = mixin;
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
next: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
previous: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const next = () => props.next();
|
|
||||||
const previous = () => props.previous();
|
|
||||||
|
|
||||||
const myForm = ref<QForm>();
|
|
||||||
|
|
||||||
const editRow = ref<boolean>(false);
|
|
||||||
|
|
||||||
const nameOrder = ref<string>("ปลดออก นายก");
|
|
||||||
const nameCommand = ref<string>("");
|
|
||||||
const positionCommand = ref<string>("");
|
|
||||||
const dateYear = ref<number>(new Date().getFullYear());
|
|
||||||
const command = ref<string>("");
|
|
||||||
const dateCommand = ref<Date>(new Date());
|
|
||||||
// const dateRegister = ref<Date>(new Date());
|
|
||||||
// const dateAnnounce = ref<Date>(new Date());
|
|
||||||
|
|
||||||
const typeOrder = ref<string>("ปลดออก");
|
|
||||||
const typeOrderOption = ref<DataOption[]>([]);
|
|
||||||
const typeOrderOptionFilter = ref<DataOption[]>([]);
|
|
||||||
|
|
||||||
const byOrder = ref<string>("");
|
|
||||||
const byOrderOption = ref<DataOption[]>([]);
|
|
||||||
const byOrderOptionFilter = ref<DataOption[]>([]);
|
|
||||||
|
|
||||||
// const register = ref<string>("");
|
|
||||||
const registerOption = ref<DataOption[]>([]);
|
|
||||||
const registerOptionFilter = ref<DataOption[]>([]);
|
|
||||||
|
|
||||||
// const announce = ref<string>("");
|
|
||||||
const announceOption = ref<DataOption[]>([]);
|
|
||||||
const announceOptionFilter = ref<DataOption[]>([]);
|
|
||||||
|
|
||||||
// const position = ref<string>("");
|
|
||||||
const positionOption = ref<DataOption[]>([]);
|
|
||||||
const positionOptionFilter = ref<DataOption[]>([]);
|
|
||||||
|
|
||||||
const test = ref<string>("นายก ข");
|
|
||||||
const testOption = ref<DataOption[]>([]);
|
|
||||||
const testOptionFilter = ref<DataOption[]>([]);
|
|
||||||
|
|
||||||
const clickEditRow = () => (editRow.value = true);
|
|
||||||
|
|
||||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
|
||||||
switch (filtername) {
|
|
||||||
case "typeOrderOption":
|
|
||||||
update(() => {
|
|
||||||
typeOrderOption.value = typeOrderOptionFilter.value.filter(
|
|
||||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "byOrderOption":
|
|
||||||
update(() => {
|
|
||||||
byOrderOption.value = byOrderOptionFilter.value.filter(
|
|
||||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "registerOption":
|
|
||||||
update(() => {
|
|
||||||
registerOption.value = registerOptionFilter.value.filter(
|
|
||||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "announceOption":
|
|
||||||
update(() => {
|
|
||||||
announceOption.value = announceOptionFilter.value.filter(
|
|
||||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "positionOption":
|
|
||||||
update(() => {
|
|
||||||
positionOption.value = positionOptionFilter.value.filter(
|
|
||||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "testOption":
|
|
||||||
update(() => {
|
|
||||||
testOption.value = testOptionFilter.value.filter(
|
|
||||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const submit = async () => {
|
|
||||||
next();
|
|
||||||
// await myForm.value!.validate().then((result: boolean) => {
|
|
||||||
// if (result) {
|
|
||||||
// next();
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
|
||||||
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
|
||||||
*/
|
|
||||||
const getClass = (val: boolean) => {
|
|
||||||
return {
|
|
||||||
"full-width inputgreen cursor-pointer": val,
|
|
||||||
"full-width cursor-pointer": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.q-field--with-bottom {
|
|
||||||
padding-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,684 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
|
|
||||||
<div class="col-12 row q-py-sm items-center">
|
|
||||||
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
|
|
||||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-space />
|
|
||||||
<div class="items-center" style="display: flex">
|
|
||||||
<!-- ค้นหาข้อความใน table -->
|
|
||||||
<q-input
|
|
||||||
standout
|
|
||||||
dense
|
|
||||||
v-model="filter"
|
|
||||||
ref="filterRef"
|
|
||||||
outlined
|
|
||||||
debounce="300"
|
|
||||||
placeholder="ค้นหา"
|
|
||||||
style="max-width: 200px"
|
|
||||||
class="q-ml-sm"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon v-if="filter == ''" name="search" />
|
|
||||||
<q-icon
|
|
||||||
v-if="filter !== ''"
|
|
||||||
name="clear"
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="resetFilter"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
<!-- แสดงคอลัมน์ใน table -->
|
|
||||||
<q-select
|
|
||||||
v-model="visibleColumns"
|
|
||||||
:display-value="$q.lang.table.columns"
|
|
||||||
multiple
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
:options="columns"
|
|
||||||
options-dense
|
|
||||||
option-value="name"
|
|
||||||
map-options
|
|
||||||
emit-value
|
|
||||||
style="min-width: 150px"
|
|
||||||
class="gt-xs q-ml-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<d-table
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
:filter="filter"
|
|
||||||
row-key="name"
|
|
||||||
>
|
|
||||||
<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="no" :props="props">
|
|
||||||
{{ props.rowIndex + 1 }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="idcard" :props="props">
|
|
||||||
{{ props.row.idcard }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="name" :props="props">
|
|
||||||
{{ props.row.name }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="position" :props="props">
|
|
||||||
{{ props.row.position }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="agency" :props="props">
|
|
||||||
{{ props.row.agency }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="send" :props="props">
|
|
||||||
<q-select
|
|
||||||
:class="getClass(true)"
|
|
||||||
hide-bottom-space
|
|
||||||
multiple
|
|
||||||
:outlined="true"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="props.row.mutiselect"
|
|
||||||
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
|
|
||||||
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="optionSelect"
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
<template v-slot:no-option>
|
|
||||||
<q-item>
|
|
||||||
<q-item-section class="text-black">
|
|
||||||
ไม่พบข้อมูลที่ค้นหา
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
</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>
|
|
||||||
</d-table>
|
|
||||||
</div>
|
|
||||||
<q-separator />
|
|
||||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
outline
|
|
||||||
color="primary"
|
|
||||||
icon="chevron_left"
|
|
||||||
@click="previous"
|
|
||||||
class="q-pr-md"
|
|
||||||
label="เลือกรายชื่อ"
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
unelevated
|
|
||||||
label="บันทึก"
|
|
||||||
color="public"
|
|
||||||
@click="next"
|
|
||||||
class="q-px-md"
|
|
||||||
><!-- icon="mdi-content-save-outline"
|
|
||||||
<q-tooltip>บันทึก</q-tooltip> -->
|
|
||||||
</q-btn>
|
|
||||||
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
|
||||||
<q-tooltip>ต่อไป</q-tooltip>
|
|
||||||
</q-btn> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-dialog v-model="modal" persistent full-width>
|
|
||||||
<q-card>
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
|
|
||||||
<q-separator />
|
|
||||||
<q-card-section class="q-pa-sm bg-grey-1">
|
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
|
||||||
<div class="col-xs-12 col-sm-5 row">
|
|
||||||
<q-card flat bordered class="fit q-pa-sm">
|
|
||||||
<q-scroll-area visible style="height: 70vh">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="search"
|
|
||||||
placeholder="ค้นหา"
|
|
||||||
class="q-mb-sm"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon name="mdi-magnify" />
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
<q-tree
|
|
||||||
:nodes="nodesTree"
|
|
||||||
dense
|
|
||||||
node-key="id"
|
|
||||||
v-model:selected="selected"
|
|
||||||
v-model:expanded="expanded"
|
|
||||||
no-selection-unset
|
|
||||||
selected-color="primary"
|
|
||||||
@update:selected="onSelected"
|
|
||||||
default-expand-all
|
|
||||||
/>
|
|
||||||
</q-scroll-area>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-sm-7">
|
|
||||||
<div class="col-12 row q-py-sm items-center">
|
|
||||||
<q-space />
|
|
||||||
<div class="items-center" style="display: flex">
|
|
||||||
<q-input
|
|
||||||
standout
|
|
||||||
dense
|
|
||||||
v-model="filterModal"
|
|
||||||
ref="filterRef"
|
|
||||||
outlined
|
|
||||||
debounce="300"
|
|
||||||
placeholder="ค้นหา"
|
|
||||||
style="max-width: 200px"
|
|
||||||
class="q-ml-sm"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon v-if="filterModal == ''" name="search" />
|
|
||||||
<q-icon
|
|
||||||
v-if="filterModal !== ''"
|
|
||||||
name="clear"
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="resetFilter"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
|
|
||||||
<q-select
|
|
||||||
v-model="visibleColumnsModal"
|
|
||||||
:display-value="$q.lang.table.columns"
|
|
||||||
multiple
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
:options="columnsModal"
|
|
||||||
options-dense
|
|
||||||
option-value="name"
|
|
||||||
map-options
|
|
||||||
emit-value
|
|
||||||
style="min-width: 150px"
|
|
||||||
class="gt-xs q-ml-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<d-table
|
|
||||||
:rows="rowsModal"
|
|
||||||
:columns="columnsModal"
|
|
||||||
:visible-columns="visibleColumnsModal"
|
|
||||||
:filter="filterModal"
|
|
||||||
row-key="name"
|
|
||||||
selection="multiple"
|
|
||||||
v-model:selected="selectedModal"
|
|
||||||
>
|
|
||||||
<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
|
|
||||||
:model-value="scope.selected"
|
|
||||||
@update:model-value="
|
|
||||||
(val, evt) => {
|
|
||||||
Object.getOwnPropertyDescriptor(scope, 'selected').set(
|
|
||||||
val,
|
|
||||||
evt
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/> -->
|
|
||||||
<q-checkbox
|
|
||||||
keep-color
|
|
||||||
color="primary"
|
|
||||||
dense
|
|
||||||
v-model="scope.selected"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:body-cell="props">
|
|
||||||
<q-td :props="props">
|
|
||||||
<div v-if="props.col.name == 'no'">
|
|
||||||
{{ props.rowIndex + 1 }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else>
|
|
||||||
{{ props.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</template>
|
|
||||||
</d-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<q-card-actions align="right">
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="public"
|
|
||||||
icon="mdi-content-save-outline"
|
|
||||||
@click="clickClose"
|
|
||||||
>
|
|
||||||
<q-tooltip>บันทึก</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
|
||||||
import type { QInput, QForm } from "quasar";
|
|
||||||
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import type { QTableProps } from "quasar";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
next: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
previous: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const next = () => props.next();
|
|
||||||
const previous = () => props.previous();
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
||||||
const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
|
|
||||||
|
|
||||||
const myForm = ref<QForm>();
|
|
||||||
const filterRef = ref<QInput>();
|
|
||||||
const filter = ref<string>("");
|
|
||||||
const mutiselect = ref([]);
|
|
||||||
const modal = ref<boolean>(false);
|
|
||||||
const search = ref<string>("");
|
|
||||||
const expanded = ref<string[]>([]);
|
|
||||||
const selected = ref<string>("");
|
|
||||||
const nodesTree = ref<treeTab[]>([]);
|
|
||||||
const send = ref<String[]>([]);
|
|
||||||
const selectedModal = ref([]);
|
|
||||||
const test = ref([]);
|
|
||||||
const filterModal = ref<string>("");
|
|
||||||
const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
|
|
||||||
const columnsModal = ref<QTableProps["columns"]>([
|
|
||||||
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
|
|
||||||
{
|
|
||||||
name: "idcard",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขประจำตัวประชาชน",
|
|
||||||
field: "idcard",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "name",
|
|
||||||
align: "left",
|
|
||||||
label: "ชื่อ-สกุล",
|
|
||||||
field: "name",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const rowsModal = [
|
|
||||||
{
|
|
||||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
|
||||||
name: "นางนัทธ์ เหล่าสกุล",
|
|
||||||
idcard: "9158455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
|
|
||||||
name: "นางขรรค์ จันทรสมบัติ",
|
|
||||||
idcard: "8558455632126",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
|
|
||||||
name: "นางโอภาส จรัสวงศ์",
|
|
||||||
idcard: "8158455635425",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
|
|
||||||
name: "นางธิญา หงษ์ทอง",
|
|
||||||
idcard: "4558455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางธนวิทย์ พิกุลเทพ",
|
|
||||||
idcard: "5542455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางหนึ่ง สตาภิรมย์",
|
|
||||||
idcard: "7448455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางสัจพร คมคาย",
|
|
||||||
idcard: "1236455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางตุลยากร ปรีดาศิริกุล",
|
|
||||||
idcard: "1523455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางบัลลังค์ จิรวาณิชย์",
|
|
||||||
idcard: "1258455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางคมคาย เรืองรังสรรค์",
|
|
||||||
idcard: "8548455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางพรทิพา คมคาย",
|
|
||||||
idcard: "6598455632145",
|
|
||||||
educate: "",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const paginationModal = ref({
|
|
||||||
sortBy: "desc",
|
|
||||||
descending: false,
|
|
||||||
page: 1,
|
|
||||||
rowsPerPage: 10,
|
|
||||||
});
|
|
||||||
const pagination = ref({
|
|
||||||
sortBy: "desc",
|
|
||||||
descending: false,
|
|
||||||
page: 1,
|
|
||||||
rowsPerPage: 10,
|
|
||||||
});
|
|
||||||
const optionSelect = ref<any>([
|
|
||||||
{ id: 1, name: "อีเมล" },
|
|
||||||
{ id: 2, name: "กล่องข้อความ" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const visibleColumns = ref<String[]>([
|
|
||||||
"no",
|
|
||||||
"idcard",
|
|
||||||
"name",
|
|
||||||
"position",
|
|
||||||
"agency",
|
|
||||||
"send",
|
|
||||||
]);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
|
|
||||||
{
|
|
||||||
name: "idcard",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขประจำตัวประชาชน",
|
|
||||||
field: "idcard",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "name",
|
|
||||||
align: "left",
|
|
||||||
label: "ชื่อ-สกุล",
|
|
||||||
field: "name",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "position",
|
|
||||||
align: "left",
|
|
||||||
label: "ตำแหน่ง",
|
|
||||||
field: "position",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "agency",
|
|
||||||
align: "left",
|
|
||||||
label: "หน่วยงาน",
|
|
||||||
field: "agency",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "send",
|
|
||||||
align: "left",
|
|
||||||
label: "ช่องทางการส่งสำเนา",
|
|
||||||
field: "send",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const rows = ref([
|
|
||||||
{
|
|
||||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
|
||||||
name: "นางนัทธ์ เหล่าสกุล",
|
|
||||||
idcard: "9158455632145",
|
|
||||||
send: "",
|
|
||||||
position: "ผู้อำนวยการ",
|
|
||||||
agency: "กลุ่มงานช่วยบริหาร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
|
|
||||||
name: "นางขรรค์ จันทรสมบัติ",
|
|
||||||
idcard: "8558455632126",
|
|
||||||
send: "",
|
|
||||||
position: "นักจัดการทั่วไป",
|
|
||||||
agency: "กลุ่มงานช่วยบริหาร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
|
|
||||||
name: "นางโอภาส จรัสวงศ์",
|
|
||||||
idcard: "8158455635425",
|
|
||||||
send: "",
|
|
||||||
position: "นักจัดการทั่วไป",
|
|
||||||
agency: "กลุ่มงานช่วยบริหาร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
|
|
||||||
name: "นางธิญา หงษ์ทอง",
|
|
||||||
idcard: "4558455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นักจัดการทั่วไป",
|
|
||||||
agency: "กลุ่มงานช่วยบริหาร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางธนวิทย์ พิกุลเทพ",
|
|
||||||
idcard: "5542455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นักจัดการทั่วไป",
|
|
||||||
agency: "กลุ่มงานช่วยบริหาร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางหนึ่ง สตาภิรมย์",
|
|
||||||
idcard: "7448455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นิติกร",
|
|
||||||
agency: "กลุ่มงานนิติกร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางสัจพร คมคาย",
|
|
||||||
idcard: "1236455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นิติกร",
|
|
||||||
agency: "กลุ่มงานนิติกร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางตุลยากร ปรีดาศิริกุล",
|
|
||||||
idcard: "1523455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นิติกร",
|
|
||||||
agency: "กลุ่มงานนิติกร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางบัลลังค์ จิรวาณิชย์",
|
|
||||||
idcard: "1258455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นิติกร",
|
|
||||||
agency: "กลุ่มงานนิติกร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางคมคาย เรืองรังสรรค์",
|
|
||||||
idcard: "8548455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นิติกร",
|
|
||||||
agency: "กลุ่มงานนิติกร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
|
||||||
name: "นางพรทิพา คมคาย",
|
|
||||||
idcard: "6598455632145",
|
|
||||||
send: "",
|
|
||||||
position: "นิติกร",
|
|
||||||
agency: "กลุ่มงานนิติกร",
|
|
||||||
mutiselect: [],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await nodeTree();
|
|
||||||
});
|
|
||||||
|
|
||||||
const paginationLabel = (start: number, end: number, total: number) => {
|
|
||||||
// if (props.paging == true)
|
|
||||||
// return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
|
|
||||||
// else
|
|
||||||
return start + "-" + end + " ใน " + total;
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetFilter = () => {
|
|
||||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
|
||||||
filter.value = "";
|
|
||||||
filterRef.value!.focus();
|
|
||||||
};
|
|
||||||
|
|
||||||
const getClass = (val: boolean) => {
|
|
||||||
return {
|
|
||||||
"full-width inputgreen cursor-pointer": val,
|
|
||||||
"full-width cursor-pointer": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const clickClose = async () => {
|
|
||||||
// if (editRow.value == true) {
|
|
||||||
// dialogMessage(
|
|
||||||
// $q,
|
|
||||||
// "ข้อมูลมีการแก้ไข",
|
|
||||||
// "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
|
|
||||||
// "mdi-help-circle-outline",
|
|
||||||
// "ตกลง",
|
|
||||||
// "orange",
|
|
||||||
// () => (modal.value = false),
|
|
||||||
// undefined
|
|
||||||
// );
|
|
||||||
// } else {
|
|
||||||
modal.value = false;
|
|
||||||
// next.value = false;
|
|
||||||
// previous.value = false;
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const clickAdd = () => {
|
|
||||||
modal.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const clickDelete = (id: string) => {
|
|
||||||
dialogMessage(
|
|
||||||
$q,
|
|
||||||
"ยืนยันการลบข้อมูล",
|
|
||||||
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
|
||||||
"mdi-help-circle-outline",
|
|
||||||
"ตกลง",
|
|
||||||
"red",
|
|
||||||
() => deleteData(id),
|
|
||||||
undefined
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const nodeTree = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileOrganizRoot)
|
|
||||||
.then((res: any) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
nodesTree.value = data;
|
|
||||||
if (data.length > 0) {
|
|
||||||
expanded.value = [data[0].id];
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSelected = async (id: string) => {
|
|
||||||
// await fetchPositionNumber(id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteData = async (id: string) => {};
|
|
||||||
</script>
|
|
||||||
<style lang="scss"></style>
|
|
||||||
|
|
@ -1,580 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div style="min-height: 70vh">
|
|
||||||
<q-splitter
|
|
||||||
v-model="splitterModel"
|
|
||||||
style="height: 70vh"
|
|
||||||
@update:model-value="onchangePage"
|
|
||||||
>
|
|
||||||
<template v-slot:before>
|
|
||||||
<div class="space">
|
|
||||||
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
|
||||||
<div class="q-pr-sm">คำสั่ง</div>
|
|
||||||
<q-btn
|
|
||||||
size="12px"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
icon="mdi-download"
|
|
||||||
:disable="tab !== 'main'"
|
|
||||||
:color="tab !== 'main' ? 'grey' : 'add'"
|
|
||||||
>
|
|
||||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
||||||
<q-menu>
|
|
||||||
<q-list style="min-width: 150px">
|
|
||||||
<q-item clickable v-close-popup>
|
|
||||||
<q-item-section avatar
|
|
||||||
><q-icon color="red" name="mdi-file-pdf"
|
|
||||||
/></q-item-section>
|
|
||||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<q-item clickable v-close-popup>
|
|
||||||
<q-item-section avatar
|
|
||||||
><q-icon color="blue" name="mdi-file-word"
|
|
||||||
/></q-item-section>
|
|
||||||
<q-item-section>ไฟล์ .docx</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<div @click="setTab('second')" :class="getClass(tab == 'second')">
|
|
||||||
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
|
||||||
<q-btn
|
|
||||||
size="12px"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
:color="tab !== 'second' ? 'grey' : 'add'"
|
|
||||||
icon="mdi-download"
|
|
||||||
:disable="tab !== 'second'"
|
|
||||||
>
|
|
||||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
||||||
<q-menu>
|
|
||||||
<q-list style="min-width: 150px">
|
|
||||||
<q-item clickable v-close-popup>
|
|
||||||
<q-item-section avatar
|
|
||||||
><q-icon color="red" name="mdi-file-pdf"
|
|
||||||
/></q-item-section>
|
|
||||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<q-item clickable v-close-popup>
|
|
||||||
<q-item-section avatar
|
|
||||||
><q-icon color="green-7" name="mdi-file-excel"
|
|
||||||
/></q-item-section>
|
|
||||||
<q-item-section>ไฟล์ .xls</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<q-space />
|
|
||||||
<q-btn
|
|
||||||
class="text-dark"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
icon="mdi-fullscreen"
|
|
||||||
color="add"
|
|
||||||
@click="dialog = true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<q-separator style="margin-top: -1px; z-index: 1" />
|
|
||||||
<q-card bordered class="card-pdf q-ma-md q-pa-md">
|
|
||||||
<div class="justify-between items-center align-center q-pb-sm row">
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page > 1 ? page - 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-left" />
|
|
||||||
</q-btn>
|
|
||||||
|
|
||||||
<span class="body-2 grey--text">
|
|
||||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page < numOfPages ? page + 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-right" />
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<div class="pdfWidth">
|
|
||||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
|
||||||
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
|
||||||
</div>
|
|
||||||
<div class="justify-between items-center align-center q-pt-sm row">
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page > 1 ? page - 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-left" />
|
|
||||||
</q-btn>
|
|
||||||
|
|
||||||
<span class="body-2 grey--text">
|
|
||||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page < numOfPages ? page + 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-right" />
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:separator>
|
|
||||||
<q-avatar
|
|
||||||
color="primary"
|
|
||||||
text-color="white"
|
|
||||||
size="30px"
|
|
||||||
icon="drag_indicator"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:after>
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<div class="q-pa-md q-gutter-y-md">
|
|
||||||
<fieldset class="border q-px-lg q-py-md">
|
|
||||||
<legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
|
|
||||||
<div class="q-gutter-y-md q-mb-md">
|
|
||||||
<div>
|
|
||||||
<label class="text-file">คำสั่ง</label>
|
|
||||||
<q-file
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="fileOrder"
|
|
||||||
label="เลือกไฟล์คำสั่ง"
|
|
||||||
hide-bottom-space
|
|
||||||
lazy-rules
|
|
||||||
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="attach_file" />
|
|
||||||
</template>
|
|
||||||
</q-file>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="text-file">เอกสารแนบท้าย</label>
|
|
||||||
<q-file
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="fileTailer"
|
|
||||||
label="เลือกไฟล์เอกสารแนบท้าย"
|
|
||||||
hide-bottom-space
|
|
||||||
lazy-rules
|
|
||||||
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="attach_file" />
|
|
||||||
</template>
|
|
||||||
</q-file>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="border q-px-lg q-py-md">
|
|
||||||
<legend class="text-header q-px-sm">รายละเอียด</legend>
|
|
||||||
<div class="q-gutter-y-md q-mb-md">
|
|
||||||
<div>
|
|
||||||
<label class="text-file">เลขที่คำสั่ง</label>
|
|
||||||
<q-input
|
|
||||||
:outlined="true"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!true"
|
|
||||||
:borderless="!true"
|
|
||||||
v-model="order"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เลขที่คำสั่ง'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="text-file">ปีที่ออกคำสั่ง</label>
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="years"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
year-picker
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
|
||||||
<template #year-overlay-value="{ value }">{{
|
|
||||||
parseInt(value + 543)
|
|
||||||
}}</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:model-value="years + 543"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
|
|
||||||
]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ปีที่ออกคำสั่ง'}`"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-grey)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="text-file">วันที่ลงนาม</label>
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="date"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
borderless
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">
|
|
||||||
{{ year + 543 }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ parseInt(value + 543) }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
class="full-width datepicker"
|
|
||||||
hide-bottom-space
|
|
||||||
:model-value="date != null ? date2Thai(date) : null"
|
|
||||||
:label="`${'วันที่มีผลออกคำสั่ง'}`"
|
|
||||||
:rules="[
|
|
||||||
(val) =>
|
|
||||||
!!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-grey)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<div class="flex justify-around">
|
|
||||||
<q-btn
|
|
||||||
unelevated
|
|
||||||
label="ออกคำสั่ง"
|
|
||||||
:color="validateForm() ? 'public' : 'grey'"
|
|
||||||
:disable="!validateForm()"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
class="text-dark"
|
|
||||||
unelevated
|
|
||||||
label="ส่งไปลงนาม"
|
|
||||||
color="grey"
|
|
||||||
disable
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</template>
|
|
||||||
</q-splitter>
|
|
||||||
</div>
|
|
||||||
<q-separator />
|
|
||||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
outline
|
|
||||||
color="primary"
|
|
||||||
icon="chevron_left"
|
|
||||||
@click="previous"
|
|
||||||
class="q-pr-md"
|
|
||||||
label="เลือกรายชื่อส่งสำเนา"
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
unelevated
|
|
||||||
label="บันทึก"
|
|
||||||
:color="validateForm() ? 'public' : 'grey'"
|
|
||||||
:disable="!validateForm()"
|
|
||||||
@click="save"
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
|
|
||||||
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
|
||||||
<q-tooltip>ต่อไป</q-tooltip>
|
|
||||||
</q-btn> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-dialog
|
|
||||||
v-model="dialog"
|
|
||||||
persistent
|
|
||||||
:maximized="true"
|
|
||||||
transition-show="slide-up"
|
|
||||||
transition-hide="slide-down"
|
|
||||||
>
|
|
||||||
<q-card class="bg-white text-white">
|
|
||||||
<!-- <q-bar>
|
|
||||||
<q-space />
|
|
||||||
|
|
||||||
<q-btn dense flat icon="close" v-close-popup>
|
|
||||||
<q-tooltip>ปิดหน้าต่าง</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-bar> -->
|
|
||||||
|
|
||||||
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
|
|
||||||
<q-btn
|
|
||||||
icon="close"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
style="color: #ff8080; background-color: #ffdede"
|
|
||||||
size="12px"
|
|
||||||
v-close-popup
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
|
||||||
<div class="justify-between items-center align-center q-pb-sm row">
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page > 1 ? page - 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-left" />
|
|
||||||
</q-btn>
|
|
||||||
|
|
||||||
<span class="body-2 grey--text text-black">
|
|
||||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page < numOfPages ? page + 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-right" />
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<div class="pdfWidth">
|
|
||||||
<VuePDF
|
|
||||||
ref="vuePDFRef"
|
|
||||||
:pdf="pdfSrc"
|
|
||||||
:page="page"
|
|
||||||
fit-parent
|
|
||||||
:scale="0.1"
|
|
||||||
/>
|
|
||||||
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
|
||||||
</div>
|
|
||||||
<div class="justify-between items-center align-center q-pt-sm row">
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page > 1 ? page - 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-left" />
|
|
||||||
</q-btn>
|
|
||||||
|
|
||||||
<span class="body-2 grey--text text-black">
|
|
||||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
class="text-dark bg-grey-4"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
@click="page = page < numOfPages ? page + 1 : page"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-chevron-right" />
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
|
||||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
|
||||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
|
||||||
import type { QForm } from "quasar";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const { date2Thai } = mixin;
|
|
||||||
|
|
||||||
const dialog = ref<boolean>(false);
|
|
||||||
|
|
||||||
// onUnmounted(() => {
|
|
||||||
// window.removeEventListener("resize", (e: any) => {
|
|
||||||
// myEventHandler(e);
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
// window.addEventListener("resize", (e: any) => {
|
|
||||||
// myEventHandler(e);
|
|
||||||
// });
|
|
||||||
|
|
||||||
const pdfData = usePDF("/src/assets/05_modules.pdf");
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
pdfSrc.value = pdfData.pdf.value;
|
|
||||||
numOfPages.value = pdfData.pages.value;
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
|
|
||||||
// const myEventHandler = (e: any) => {
|
|
||||||
// console.log("e", e.target.innerWidth);
|
|
||||||
// if (vuePDFRef !== null) {
|
|
||||||
// vuePDFRef.value.reload();
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
|
|
||||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
|
||||||
const numOfPages = ref<number>(0);
|
|
||||||
const page = ref<number>(1);
|
|
||||||
const vuePDFRef = ref<any>(null);
|
|
||||||
|
|
||||||
const myForm = ref<QForm | null>(null);
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
next: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
previous: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const next = () => props.next();
|
|
||||||
const previous = () => props.previous();
|
|
||||||
|
|
||||||
const splitterModel = ref<number>(70);
|
|
||||||
const tab = ref<string>("main");
|
|
||||||
const fileOrder = ref<any>(null);
|
|
||||||
const fileTailer = ref<any>(null);
|
|
||||||
|
|
||||||
const order = ref<string>("");
|
|
||||||
const years = ref<number>(new Date().getFullYear());
|
|
||||||
const date = ref<Date>(new Date());
|
|
||||||
|
|
||||||
const onchangePage = (val: any) => {
|
|
||||||
// console.log(val);
|
|
||||||
if (vuePDFRef !== null) {
|
|
||||||
vuePDFRef.value.reload();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
if (myForm.value !== null) {
|
|
||||||
myForm.value!.validate().then((success: Boolean) => {
|
|
||||||
if (success) {
|
|
||||||
// yay, models are correct
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateForm = () => {
|
|
||||||
return (
|
|
||||||
fileOrder.value !== null &&
|
|
||||||
fileOrder.value !== null &&
|
|
||||||
order.value.trim() !== ""
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getClass = (val: boolean) => {
|
|
||||||
return {
|
|
||||||
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
|
||||||
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const setTab = (val: string) => {
|
|
||||||
tab.value = val;
|
|
||||||
page.value = 1;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.border {
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid #e9eaec;
|
|
||||||
}
|
|
||||||
.text-header {
|
|
||||||
color: #34373c;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-file {
|
|
||||||
padding-top: 5px;
|
|
||||||
color: #34373c;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.space {
|
|
||||||
background-color: #e9eaec61;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
margin-top: 5px;
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 2px !important;
|
|
||||||
border-radius: 10px 10px 0px 0px;
|
|
||||||
width: 200px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: normal;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header-active {
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-left: -1px;
|
|
||||||
background-color: white;
|
|
||||||
padding: 2px !important;
|
|
||||||
border-radius: 10px 10px 0px 0px;
|
|
||||||
border: 1px solid #e9eaec;
|
|
||||||
width: 200px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
border-bottom-style: none;
|
|
||||||
font-weight: 600;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-pdf {
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid #e9eaec;
|
|
||||||
background-color: #e9eaec61;
|
|
||||||
// height: 60vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
576
src/modules/06_retirement/components/Expulsion/expulsionMain.vue
Normal file
576
src/modules/06_retirement/components/Expulsion/expulsionMain.vue
Normal file
|
|
@ -0,0 +1,576 @@
|
||||||
|
<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 { useTransferDataStore } from "@/modules/05_placement/store";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import DialogFooter from "@/modules/06_retirement/components/DialogFooter.vue";
|
||||||
|
import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import type { ResponseData } from "@/modules/06_retirement/interface/response/expulsion";
|
||||||
|
|
||||||
|
const selected = ref<ResponseData[]>([]);
|
||||||
|
const checkSelected = computed(() => {
|
||||||
|
if (selected.value.length === 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const transferStore = useTransferDataStore();
|
||||||
|
|
||||||
|
const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
|
||||||
|
const { statusText } = transferStore;
|
||||||
|
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"fullname",
|
||||||
|
"position",
|
||||||
|
"positionLevel",
|
||||||
|
"organizationPositionOld",
|
||||||
|
"organization",
|
||||||
|
"statustext",
|
||||||
|
]);
|
||||||
|
const visibleColumns2 = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"fullname",
|
||||||
|
"position",
|
||||||
|
"positionLevel",
|
||||||
|
"organizationPositionOld",
|
||||||
|
"organization",
|
||||||
|
"statustext",
|
||||||
|
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
|
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<ResponseData[]>([]);
|
||||||
|
const rows2 = ref<ResponseData[]>([]);
|
||||||
|
const filters = ref<ResponseData[]>([]);
|
||||||
|
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: "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: "organizationPositionOld",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "organizationPositionOld",
|
||||||
|
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: "statustext",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะ",
|
||||||
|
sortable: true,
|
||||||
|
field: "statustext",
|
||||||
|
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: "organizationPositionOld",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "organizationPositionOld",
|
||||||
|
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: "statustext",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะ",
|
||||||
|
sortable: true,
|
||||||
|
field: "statustext",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const openModal = () => (modal.value = true);
|
||||||
|
const closeModal = () => (modal.value = false);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const openModalOrder = () => {
|
||||||
|
openModal();
|
||||||
|
const row = filters.value.filter(
|
||||||
|
(r: ResponseData) =>
|
||||||
|
r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
|
||||||
|
);
|
||||||
|
rows2.value = row;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.retirementExpulsion)
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let list: ResponseData[] = [];
|
||||||
|
data.map((r: ResponseData) => {
|
||||||
|
list.push({
|
||||||
|
createdAt: new Date(),
|
||||||
|
date: new Date(),
|
||||||
|
firstName: r.firstName ?? "",
|
||||||
|
id: r.id ?? "",
|
||||||
|
isActive: r.isActive ? r.isActive : false,
|
||||||
|
lastName: r.lastName ?? "",
|
||||||
|
organization: r.organization ?? "",
|
||||||
|
organizationPositionOld: r.organizationPositionOld ?? "",
|
||||||
|
posNo: r.posNo ?? "",
|
||||||
|
position: r.position ?? "",
|
||||||
|
positionLevel: r.positionLevel ?? "",
|
||||||
|
positionLevelOld: r.positionLevelOld ?? "",
|
||||||
|
positionNumberOld: r.positionNumberOld ?? "",
|
||||||
|
positionTypeOld: r.positionTypeOld ?? "",
|
||||||
|
prefix: r.prefix ?? "",
|
||||||
|
reason: r.reason ?? "",
|
||||||
|
salary: r.salary ? r.salary : 0,
|
||||||
|
status: r.status ?? "",
|
||||||
|
statustext: statusText(r.status ?? ""),
|
||||||
|
fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${
|
||||||
|
r.lastName ?? ""
|
||||||
|
}`,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
rows.value = list;
|
||||||
|
filters.value = list;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickDelete = (id: string) => {
|
||||||
|
$q.dialog({
|
||||||
|
title: "ยืนยันการลบข้อมูล",
|
||||||
|
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||||
|
cancel: {
|
||||||
|
flat: true,
|
||||||
|
color: "negative",
|
||||||
|
},
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.expulsionByid(id))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
getData();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(() => {})
|
||||||
|
.onDismiss(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveOrder = async () => {
|
||||||
|
const id = selected.value.map((r) => r.id);
|
||||||
|
const body = {
|
||||||
|
id,
|
||||||
|
};
|
||||||
|
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.expulsionReport, body)
|
||||||
|
.then((res: any) => {
|
||||||
|
// const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
success($q, "ส่งไปออกคำสั่งโอนออกสำเร็จ");
|
||||||
|
closeModal();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await getData();
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</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="openModalOrder"
|
||||||
|
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-th auto-width />
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td
|
||||||
|
key="no"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/expulsion/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="fullname"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/expulsion/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.row.fullname }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="position"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/expulsion/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.row.position }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="positionLevel"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/expulsion/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
{{ props.row.positionLevel }}
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="organizationPositionOld"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/expulsion/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organizationPositionOld }}
|
||||||
|
<!-- <q-tooltip>
|
||||||
|
{{ props.row.organizationPositionOld }}
|
||||||
|
</q-tooltip> -->
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="organization"
|
||||||
|
:props="props"
|
||||||
|
@click="router.push(`/retirement/expulsion/${props.row.id}`)"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organization }}
|
||||||
|
<!-- <q-tooltip>
|
||||||
|
{{ props.row.organization }}
|
||||||
|
</q-tooltip> -->
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="statustext" :props="props">
|
||||||
|
{{ props.row.statustext }}
|
||||||
|
</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>
|
||||||
|
</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="id"
|
||||||
|
: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="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="organizationPositionOld" :props="props">
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organizationPositionOld }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="organization" :props="props">
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ props.row.organization }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="statustext" :props="props">
|
||||||
|
{{ props.row.statustext }}
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn
|
||||||
|
label="ส่งไปออกคำสั่ง"
|
||||||
|
@click="saveOrder"
|
||||||
|
:disable="checkSelected"
|
||||||
|
color="public"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,443 @@
|
||||||
|
<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)"
|
||||||
|
/>
|
||||||
|
รายละเอียดการไล่ออกของ {{ responseData.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">
|
||||||
|
{{ responseData.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="responseData.avataPath"
|
||||||
|
v-if="responseData.avataPath !== ''"
|
||||||
|
/>
|
||||||
|
<q-img src="@/assets/avatar_user.jpg" v-else />
|
||||||
|
</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">
|
||||||
|
{{ responseData.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">
|
||||||
|
{{ responseData.positionLevelOld }}
|
||||||
|
</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.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="confirmMessage"
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
row-key="fileName"
|
||||||
|
hide-header
|
||||||
|
hide-bottom
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td key="no" :props="props">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fileName" :props="props">
|
||||||
|
{{ props.row.fileName }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="btnMicrosoft" :props="props">
|
||||||
|
<q-btn flat dense round color="red" icon="picture_as_pdf">
|
||||||
|
<q-tooltip>ไฟล์ PDF</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn flat dense round color="blue" icon="mdi-file-word">
|
||||||
|
<q-tooltip>ไฟล์ WORD</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</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-sm" v-if="!edit">
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
icon-right="mdi-file-edit-outline"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="แก้ไข"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="edit = !edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="q-gutter-sm" v-else>
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="public"
|
||||||
|
dense
|
||||||
|
class="q-px-sm"
|
||||||
|
label="บันทึก"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="conditionSave"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="red"
|
||||||
|
dense
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ยกเลิก"
|
||||||
|
style="width: 80px"
|
||||||
|
@click="edit = !edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></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, QForm } from "quasar";
|
||||||
|
import type {
|
||||||
|
TypeFile,
|
||||||
|
ResponseDataDetail,
|
||||||
|
} from "@/modules/06_retirement/interface/response/expulsion";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
|
||||||
|
const personId = route.params.id;
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
dialogMessage,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
success,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const myForm = ref<QForm | null>(null);
|
||||||
|
const roleAdmin = ref<boolean>(false);
|
||||||
|
const edit = ref<boolean>(false);
|
||||||
|
|
||||||
|
const organizationPositionOld = ref<string>("");
|
||||||
|
const positionTypeOld = ref<string>("");
|
||||||
|
const positionLevelOld = ref<string>("");
|
||||||
|
const posNo = ref<string>("");
|
||||||
|
const salary = ref<number>(0);
|
||||||
|
const organization = ref<string>("");
|
||||||
|
const date = ref<Date | null>(null);
|
||||||
|
const reason = ref<string>("");
|
||||||
|
|
||||||
|
const responseData = ref<ResponseDataDetail>({
|
||||||
|
avataPath: "",
|
||||||
|
createdAt: new Date(),
|
||||||
|
date: new Date(),
|
||||||
|
id: "",
|
||||||
|
organization: "",
|
||||||
|
organizationPositionOld: "",
|
||||||
|
positionLevelOld: "",
|
||||||
|
positionNumberOld: "",
|
||||||
|
positionTypeOld: "",
|
||||||
|
reason: "",
|
||||||
|
salary: 0,
|
||||||
|
status: "",
|
||||||
|
fullname: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (keycloak.tokenParsed != null) {
|
||||||
|
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
|
||||||
|
console.log("roleAdmin===>", roleAdmin.value);
|
||||||
|
}
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.expulsionByid(personId.toString()))
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
let list: TypeFile[] = [];
|
||||||
|
if (data.docs.length > 0) {
|
||||||
|
data.docs.map((doc: TypeFile) => {
|
||||||
|
list.push({
|
||||||
|
pathName: doc.pathName ?? "",
|
||||||
|
fileName: doc.fileName ?? "",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
rows.value = list;
|
||||||
|
responseData.value.createdAt = data.createdAt;
|
||||||
|
responseData.value.date =
|
||||||
|
data.date !== null ? new Date(data.date) : new Date();
|
||||||
|
responseData.value.id = data.id ?? "";
|
||||||
|
responseData.value.organization = data.organization ?? "";
|
||||||
|
responseData.value.organizationPositionOld =
|
||||||
|
data.organizationPositionOld ?? "";
|
||||||
|
responseData.value.positionLevelOld = data.positionLevelOld ?? "";
|
||||||
|
responseData.value.positionNumberOld = data.positionNumberOld ?? "";
|
||||||
|
responseData.value.positionTypeOld = data.positionTypeOld ?? "";
|
||||||
|
responseData.value.reason = data.reason ?? "";
|
||||||
|
responseData.value.salary = data.salary !== null ? data.salary : 0;
|
||||||
|
responseData.value.status = data.status ?? "";
|
||||||
|
responseData.value.avataPath = data.avataPath ?? "";
|
||||||
|
responseData.value.fullname = `${data.prefix ?? "-"} ${
|
||||||
|
data.firstName ?? "-"
|
||||||
|
} ${data.lastName ?? "-"}`;
|
||||||
|
|
||||||
|
organizationPositionOld.value = data.organizationPositionOld ?? "";
|
||||||
|
positionTypeOld.value = data.positionTypeOld ?? "";
|
||||||
|
positionLevelOld.value = data.positionLevelOld ?? "";
|
||||||
|
posNo.value = data.posNo ?? "";
|
||||||
|
salary.value = data.salary ?? "";
|
||||||
|
organization.value = data.organization ?? "";
|
||||||
|
date.value = data.date !== null ? new Date(data.date) : null;
|
||||||
|
reason.value = data.reason ?? "";
|
||||||
|
})
|
||||||
|
.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();
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const conditionSave = async () => {
|
||||||
|
if (myForm.value !== null) {
|
||||||
|
myForm.value.validate().then((success) => {
|
||||||
|
if (success) {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||||
|
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
|
||||||
|
"mdi-help-circle-outline",
|
||||||
|
"ตกลง",
|
||||||
|
"public",
|
||||||
|
async () => await saveData(),
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = async () => {
|
||||||
|
const body = {
|
||||||
|
organization: organization.value,
|
||||||
|
reason: reason.value,
|
||||||
|
organizationPositionOld: organizationPositionOld.value,
|
||||||
|
date: date.value,
|
||||||
|
positionTypeOld: positionTypeOld.value,
|
||||||
|
positionLevelOld: positionLevelOld.value,
|
||||||
|
positionNumberOld: posNo.value,
|
||||||
|
amountOld: salary.value,
|
||||||
|
};
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.expulsionByid(personId.toString()), body)
|
||||||
|
.then((res: any) => {
|
||||||
|
// const data = res.data.result;
|
||||||
|
// console.log(data);
|
||||||
|
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||||
|
edit.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await getData();
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</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>
|
||||||
45
src/modules/06_retirement/interface/response/discharged.ts
Normal file
45
src/modules/06_retirement/interface/response/discharged.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
interface ResponseData {
|
||||||
|
createdAt: Date;
|
||||||
|
date: Date;
|
||||||
|
firstName: string;
|
||||||
|
id: string;
|
||||||
|
isActive: boolean;
|
||||||
|
lastName: string;
|
||||||
|
organization: string;
|
||||||
|
organizationPositionOld: string;
|
||||||
|
posNo: string;
|
||||||
|
position: string;
|
||||||
|
positionLevel: string;
|
||||||
|
positionLevelOld: string;
|
||||||
|
positionNumberOld: string;
|
||||||
|
positionTypeOld: string;
|
||||||
|
prefix: string;
|
||||||
|
reason: string;
|
||||||
|
salary: number;
|
||||||
|
status: string;
|
||||||
|
fullname: string;
|
||||||
|
statustext: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TypeFile {
|
||||||
|
fileName: string;
|
||||||
|
pathName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResponseDataDetail {
|
||||||
|
avataPath: string;
|
||||||
|
createdAt: Date;
|
||||||
|
date: Date;
|
||||||
|
id: string;
|
||||||
|
organization: string;
|
||||||
|
organizationPositionOld: string;
|
||||||
|
positionLevelOld: string;
|
||||||
|
positionNumberOld: string;
|
||||||
|
positionTypeOld: string;
|
||||||
|
reason: string;
|
||||||
|
salary: number;
|
||||||
|
status: string;
|
||||||
|
fullname: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { ResponseData, ResponseDataDetail, TypeFile };
|
||||||
45
src/modules/06_retirement/interface/response/expulsion.ts
Normal file
45
src/modules/06_retirement/interface/response/expulsion.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
interface ResponseData {
|
||||||
|
createdAt: Date;
|
||||||
|
date: Date;
|
||||||
|
firstName: string;
|
||||||
|
id: string;
|
||||||
|
isActive: boolean;
|
||||||
|
lastName: string;
|
||||||
|
organization: string;
|
||||||
|
organizationPositionOld: string;
|
||||||
|
posNo: string;
|
||||||
|
position: string;
|
||||||
|
positionLevel: string;
|
||||||
|
positionLevelOld: string;
|
||||||
|
positionNumberOld: string;
|
||||||
|
positionTypeOld: string;
|
||||||
|
prefix: string;
|
||||||
|
reason: string;
|
||||||
|
salary: number;
|
||||||
|
status: string;
|
||||||
|
fullname: string;
|
||||||
|
statustext: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TypeFile {
|
||||||
|
fileName: string;
|
||||||
|
pathName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResponseDataDetail {
|
||||||
|
avataPath: string;
|
||||||
|
createdAt: Date;
|
||||||
|
date: Date;
|
||||||
|
id: string;
|
||||||
|
organization: string;
|
||||||
|
organizationPositionOld: string;
|
||||||
|
positionLevelOld: string;
|
||||||
|
positionNumberOld: string;
|
||||||
|
positionTypeOld: string;
|
||||||
|
reason: string;
|
||||||
|
salary: number;
|
||||||
|
status: string;
|
||||||
|
fullname: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { ResponseData, ResponseDataDetail, TypeFile };
|
||||||
45
src/modules/06_retirement/interface/response/out.ts
Normal file
45
src/modules/06_retirement/interface/response/out.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
interface ResponseData {
|
||||||
|
createdAt: Date;
|
||||||
|
date: Date;
|
||||||
|
firstName: string;
|
||||||
|
id: string;
|
||||||
|
isActive: boolean;
|
||||||
|
lastName: string;
|
||||||
|
organization: string;
|
||||||
|
organizationPositionOld: string;
|
||||||
|
posNo: string;
|
||||||
|
position: string;
|
||||||
|
positionLevel: string;
|
||||||
|
positionLevelOld: string;
|
||||||
|
positionNumberOld: string;
|
||||||
|
positionTypeOld: string;
|
||||||
|
prefix: string;
|
||||||
|
reason: string;
|
||||||
|
salary: number;
|
||||||
|
status: string;
|
||||||
|
fullname: string;
|
||||||
|
statustext: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TypeFile {
|
||||||
|
fileName: string;
|
||||||
|
pathName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResponseDataDetail {
|
||||||
|
avataPath: string;
|
||||||
|
createdAt: Date;
|
||||||
|
date: Date;
|
||||||
|
id: string;
|
||||||
|
organization: string;
|
||||||
|
organizationPositionOld: string;
|
||||||
|
positionLevelOld: string;
|
||||||
|
positionNumberOld: string;
|
||||||
|
positionTypeOld: string;
|
||||||
|
reason: string;
|
||||||
|
salary: number;
|
||||||
|
status: string;
|
||||||
|
fullname: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { ResponseData, ResponseDataDetail, TypeFile };
|
||||||
|
|
@ -3,14 +3,34 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
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 = () =>
|
||||||
const resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
|
import("@/modules/06_retirement/components/ListRetirement/TableList.vue");
|
||||||
const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
|
const resignOrder = () =>
|
||||||
const resignByid = () => import("@/modules/06_retirement/components/resign/ResignByid.vue");
|
import("@/modules/06_retirement/components/resign/ResignOrder.vue");
|
||||||
const deceased = () => import("@/modules/06_retirement/components/resign/Deceased.vue");
|
const resign = () =>
|
||||||
const detaildeceased = () => import("@/modules/06_retirement/components/resign/DetailDeceased.vue");
|
import("@/modules/06_retirement/components/resign/Resign.vue");
|
||||||
const dismissOrder = () => import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue");
|
const resignByid = () =>
|
||||||
const addOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue");
|
import("@/modules/06_retirement/components/resign/ResignByid.vue");
|
||||||
|
const deceased = () =>
|
||||||
|
import("@/modules/06_retirement/components/resign/Deceased.vue");
|
||||||
|
const detaildeceased = () =>
|
||||||
|
import("@/modules/06_retirement/components/resign/DetailDeceased.vue");
|
||||||
|
const dismissOrder = () =>
|
||||||
|
import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue");
|
||||||
|
const outDetail = () =>
|
||||||
|
import("@/modules/06_retirement/components/DismissOrder/outRegistry.vue");
|
||||||
|
const dischargedMain = () =>
|
||||||
|
import("@/modules/06_retirement/components/Discharged/dischargedMain.vue");
|
||||||
|
const dischargedDetails = () =>
|
||||||
|
import(
|
||||||
|
"@/modules/06_retirement/components/Discharged/dischargedRegistry.vue"
|
||||||
|
);
|
||||||
|
const expulsionMain = () =>
|
||||||
|
import("@/modules/06_retirement/components/Expulsion/expulsionMain.vue");
|
||||||
|
|
||||||
|
const expulsionDetails = () =>
|
||||||
|
import("@/modules/06_retirement/components/Expulsion/expulsionRegistry.vue");
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/retirement",
|
path: "/retirement",
|
||||||
|
|
@ -96,6 +116,26 @@ export default [
|
||||||
path: "/dismiss-order",
|
path: "/dismiss-order",
|
||||||
name: "dismiss-order",
|
name: "dismiss-order",
|
||||||
component: dismissOrder,
|
component: dismissOrder,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.5],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/retirement/out/:id",
|
||||||
|
name: "outDetail",
|
||||||
|
component: outDetail,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.5],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/discharged",
|
||||||
|
name: "discharged",
|
||||||
|
component: dischargedMain,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [7.6],
|
Key: [7.6],
|
||||||
|
|
@ -103,14 +143,33 @@ export default [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/dismiss-order/add",
|
path: "/retirement/discharged/:id",
|
||||||
name: "dismiss-order-add",
|
name: "dischargedDetails",
|
||||||
component: addOrder,
|
component: dischargedDetails,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.6],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/expulsion",
|
||||||
|
name: "expulsion",
|
||||||
|
component: expulsionMain,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.7],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/retirement/expulsion/:id",
|
||||||
|
name: "expulsionDetails",
|
||||||
|
component: expulsionDetails,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [7.7],
|
Key: [7.7],
|
||||||
Role: "retirement",
|
Role: "retirement",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -389,7 +389,7 @@ const clickDelete = (id: string) => {
|
||||||
await http
|
await http
|
||||||
.delete(config.API.RoundInsignia(id))
|
.delete(config.API.RoundInsignia(id))
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
success($q, "ลบข้อมูลการสอบสำเร็จ");
|
success($q, "ลบข้อมูลการเสนอขอสำเร็จ");
|
||||||
fetchData();
|
fetchData();
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue