ปรับระบบพ้นจากราชการ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-12-02 15:19:11 +07:00
parent d043396010
commit 615b280979
26 changed files with 577 additions and 733 deletions

View file

@ -0,0 +1,409 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { tokenParsed } from "@/plugins/auth";
/**Import type */
import type { QForm } from "quasar";
import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
/** importComponents*/
import CardProfile from "@/components/CardProfile.vue";
/** use */
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const checkRoutePermisson = ref<boolean>(route.name == "outDetailOnly");
const mixin = useCounterMixin();
const dataId = route.params.id.toString();
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
success,
findOrgName,
} = 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 dataProfile = ref<DataProfile>();
const mainData = ref<any>();
const fullName = ref<string>("");
const status = ref<string>("");
// API
async function getData() {
showLoader();
await http
.get(config.API.outByid(dataId))
.then((res) => {
const data = res.data.result;
mainData.value = res.data.result;
dataProfile.value = data as DataProfile;
fullName.value = `${data.prefix}${data.firstName ?? "-"} ${
data.lastName ?? "-"
}`;
status.value = data.status;
organizationPositionOld.value = data.organizationPositionOld
? data.organizationPositionOld
: findOrgName(data);
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
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();
});
}
/**
* งก Cancle
*/
async function clickCancel() {
edit.value = false;
const data = mainData.value;
if (data) {
organizationPositionOld.value = data.organizationPositionOld
? data.organizationPositionOld
: findOrgName(data);
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
salary.value = data.salary ?? "";
organization.value = data.organization ?? "";
date.value = data.date !== null ? new Date(data.date) : null;
reason.value = data.reason ?? "";
}
myForm.value?.resetValidation();
// await getData();
}
/**
* งก Saveจาก API
*/
async function onSubmit() {
dialogMessage(
$q,
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
"mdi-help-circle-outline",
"ตกลง",
"public",
async () => {
const body = {
organizationPositionOld: organizationPositionOld.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value.toString().replace(/,/g, ""),
organization: organization.value,
reason: reason.value,
date: date.value,
};
showLoader();
await http
.put(config.API.outByid(dataId), body)
.then(async () => {
await getData();
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
undefined
);
}
/**
* Function เพ Class เวลา Edit
* @param val เมอเปนEdit จะเปลยน Class
*/
function getClass(val: boolean) {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
}
/** Hook */
onMounted(async () => {
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอยดการใหออก {{ fullName }}
</div>
<CardProfile :data="dataProfile as DataProfile" />
<q-card bordered class="row col-12 text-dark q-mt-sm">
<q-form
ref="myForm"
greedy
@submit.prevent
@validation-success="onSubmit"
class="col-12"
>
<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
v-if="
status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson
"
>
<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"
type="submit"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="clickCancel"
/>
</div>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold">ตำแหน/งกดเด</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-6 col-sm-4 row">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
hide-bottom-space
:label="`${'ประเภทตำแหน่ง'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-4 row">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val:string) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-4 row">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val:string) => !!val || `${'กรุณากรอกการให้ออกสังกัด'}`]"
hide-bottom-space
:label="`${'การให้ออกสังกัด'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-6 row">
<div class="col-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:readonly="!edit"
:borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null"
:rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
hide-bottom-space
:label="`${'ตั้งแต่วัน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>
</q-form>
</q-card>
</template>
<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>

View file

@ -0,0 +1,276 @@
<script setup lang="ts">
import { ref, computed, watchEffect } from "vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";
import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
import DialogHeader from "@/components/DialogHeader.vue";
/** use */
const $q = useQuasar();
const { statusText } = useTransferDataStore();
const selected = ref<ResponseItems[]>([]);
const dataMapToSend = computed(() => {
return selected.value.map((i: any) => ({
id: i.id,
profileId: i.profileId,
prefix: i.prefix,
firstName: i.firstName,
lastName: i.lastName,
citizenId: i.citizenId,
remarkVertical: i.reason,
}));
});
const mixin = useCounterMixin();
const {
showLoader,
success,
messageError,
dialogConfirm,
hideLoader,
date2Thai,
} = mixin;
/** คอลัมน์ */
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
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",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
},
{
name: "positionLevel",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
let name = "";
if (row.positionTypeOld && row.positionLevelOld) {
name = `${row.positionTypeOld} (${row.positionLevelOld})`;
} else if (row.positionTypeOld) {
name = `${row.positionTypeOld}`;
} else if (row.positionLevelOld) {
name = `(${row.positionLevelOld})`;
} else name = "-";
return name;
},
},
{
name: "organizationPositionOld",
align: "left",
label: "ตำแหน่ง/สังกัดเดิม",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => date2Thai(val),
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => statusText(val),
},
]);
/** คอลัมน์ที่แสดง */
const visibleColumns2 = ref<string[]>([
"no",
"fullname",
"positionLevel",
"organizationPositionOld",
"createdAt",
"status",
]);
/** props*/
const props = defineProps({
modal: Boolean,
closeModal: Function,
fecthlistRecevice: Function,
rows2: Array,
filterKeyword2: String,
});
const modalCommand = ref<boolean>(false);
/**
* งกนการ Selected Data
*/
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
}
});
//popup
function saveOrder() {
dialogConfirm(
$q,
() => {
modalCommand.value = true;
props.closeModal?.();
},
"ยืนยันส่งไปออกคำสั่ง",
"ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
);
}
const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
function updateInput(value: any) {
emit("update:filterKeyword2", value);
}
//
function Reset() {
emit("update:filterKeyword2", "");
}
watchEffect(() => {
if (props.modal === true) {
selected.value = [];
updateInput("");
}
});
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader tittle="ส่งไปออกคำสั่งให้ออก" :close="closeModal" />
<q-separator />
<q-card-section>
<div class="row col-12 q-col-gutter-sm">
<div class="row col-12">
<q-space />
<q-input
borderless
outlined
dense
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
</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"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</div>
<div class="col-12">
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2?.trim()"
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 v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else
:class="col.name === 'org' ? 'table_ellipsis' : ''"
>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</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>
<DialogCreateCommand
v-model:modal="modalCommand"
:command-type-code="'C-PM-18'"
:persons="dataMapToSend"
/>
</template>