Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
fe0ab6fec4
7 changed files with 358 additions and 692 deletions
|
|
@ -1,406 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { PersonalImformation } from "@/components/information/interface/response/Information";
|
||||
import type { Goverment } from "@/components/information/interface/response/Government";
|
||||
import type { Avatar } from "@/components/information/interface/response/avatar";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
/** props*/
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
requier: true,
|
||||
},
|
||||
modal: {
|
||||
type: Boolean,
|
||||
requier: true,
|
||||
},
|
||||
});
|
||||
|
||||
/** emit*/
|
||||
const emit = defineEmits(["update:modal"]);
|
||||
|
||||
/** interface*/
|
||||
interface StatusLoad {
|
||||
val: boolean;
|
||||
val2: boolean;
|
||||
val3: boolean;
|
||||
}
|
||||
|
||||
/** ตัวแปร*/
|
||||
const modal = ref<boolean>(false);
|
||||
const statusLoad = ref<StatusLoad>({ val: false, val2: false, val3: false }); // เช็คสถานะการโหลด
|
||||
const avatar = reactive<Avatar>({
|
||||
avatar: "",
|
||||
fullname: "",
|
||||
position: "",
|
||||
});
|
||||
const imformation = reactive<PersonalImformation>({
|
||||
prefix: "",
|
||||
citizenId: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
birthDate: "",
|
||||
age: "",
|
||||
gender: "",
|
||||
});
|
||||
const goverment = reactive<Goverment>({
|
||||
oc: "",
|
||||
posNo: "",
|
||||
position: "",
|
||||
positionPathSide: "",
|
||||
positionLine: "",
|
||||
positionType: "",
|
||||
positionLevel: "",
|
||||
positionExecutive: "",
|
||||
positionExecutiveSide: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลรูปภาพ
|
||||
* @param id profileID
|
||||
*/
|
||||
async function fetchAvatar(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileAvatarId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
avatar.avatar = data.avatar;
|
||||
avatar.fullname = data.fullname;
|
||||
avatar.position = data.position ?? "-";
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
statusLoad.value.val = true;
|
||||
loaderFunction();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลส่วนตัว
|
||||
* @param id profileID
|
||||
*/
|
||||
async function fetchInformation(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileInforId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
imformation.prefix = data.prefix;
|
||||
imformation.citizenId = data.citizenId;
|
||||
imformation.firstName = data.firstName;
|
||||
imformation.lastName = data.lastName;
|
||||
imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "";
|
||||
imformation.age = data.age;
|
||||
imformation.gender = data.gender;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
statusLoad.value.val2 = true;
|
||||
loaderFunction();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลข้อมูลราชการ
|
||||
* @param id profileID
|
||||
*/
|
||||
async function fetchProfileGov(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileGovId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
goverment.oc = data.oc ?? "-";
|
||||
goverment.posNo = data.posNo ?? "-";
|
||||
goverment.position = data.position ?? "-";
|
||||
goverment.positionPathSide = data.positionPathSide ?? "-";
|
||||
goverment.positionLine = data.positionLine ?? "-";
|
||||
goverment.positionType = data.positionType ?? "-";
|
||||
goverment.positionLevel = data.positionLevel ?? "-";
|
||||
goverment.positionExecutive = data.positionExecutive ?? "-";
|
||||
goverment.positionExecutiveSide = data.positionExecutiveSide ?? "-";
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
statusLoad.value.val3 = true;
|
||||
loaderFunction();
|
||||
});
|
||||
}
|
||||
|
||||
/** functoion เช็คการโหลดของข้อมูล*/
|
||||
function loaderFunction() {
|
||||
const allTrue = Object.values(statusLoad.value).every((val) => val);
|
||||
allTrue && hideLoader();
|
||||
}
|
||||
|
||||
function redirecToRegistry() {
|
||||
window.open(`/registry/${props.id}`, "_blank");
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
async () => {
|
||||
modal.value = props.modal ? props.modal : false;
|
||||
modal.value &&
|
||||
props.id &&
|
||||
(await fetchAvatar(props.id),
|
||||
await fetchInformation(props.id),
|
||||
await fetchProfileGov(props.id));
|
||||
}
|
||||
);
|
||||
|
||||
watch(modal, (newValue) => {
|
||||
if (!newValue) {
|
||||
emit("update:modal", false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" position="right" :maximized="true" persistent>
|
||||
<q-card style="width: 420px; overflow: visible">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle1 text-bold"
|
||||
>ทะเบียนประวัติ</q-toolbar-title
|
||||
>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="emit('update:modal', false)"
|
||||
style="color: red; background-color: #ffdede"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<!-- <q-card-section>
|
||||
<div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
|
||||
<q-space />
|
||||
|
||||
</q-card-section> -->
|
||||
|
||||
<q-card-section class="col q-pt-none bg-grey-12">
|
||||
<div class="q-gutter-md">
|
||||
<q-card bordered class="text-center bg-grey-12">
|
||||
<div>
|
||||
<q-avatar size="120px" color="grey-4">
|
||||
<img
|
||||
v-if="avatar.avatar"
|
||||
:src="avatar.avatar"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div
|
||||
class="q-mt-md text-subtitle2 text-bold"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ avatar.fullname }}
|
||||
</div>
|
||||
<div
|
||||
v-if="avatar.position != '-'"
|
||||
class="q-mb-xs text-center text-grey"
|
||||
>
|
||||
{{ avatar.position }}
|
||||
</div>
|
||||
<div class="q-mt-md">
|
||||
<q-btn
|
||||
class="bg-white"
|
||||
outline
|
||||
rounded
|
||||
label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
|
||||
color="secondary"
|
||||
@click.prevent="redirecToRegistry"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-scroll-area style="height: 65vh; max-width: 100%">
|
||||
<div class="q-gutter-md q-pa-sm">
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="q-pa-md">
|
||||
<div class="text-weight-bold row items-center">
|
||||
<q-icon name="mdi-account" color="grey-7" />
|
||||
<span class="q-ml-md">ข้อมูลส่วนตัว </span>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="imformation.citizenId"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="imformation.prefix"
|
||||
label="คำนำหน้าชื่อ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="imformation.firstName"
|
||||
label="ชื่่อ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="imformation.lastName"
|
||||
label="นามสกุล"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="imformation.birthDate"
|
||||
label="วัน/เดือน/ปีเกิด"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="imformation.gender"
|
||||
label="เพศ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="imformation.age"
|
||||
label="อายุ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="q-pa-md">
|
||||
<div class="text-weight-bold row items-center">
|
||||
<q-icon name="mdi-account-tie" color="grey-7" />
|
||||
<span class="q-ml-md">ข้อมูลราชการ </span>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-md-12">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.oc === '' ? '-' : goverment.oc"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.posNo"
|
||||
label="ตำแหน่งเลขที่"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.position"
|
||||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.positionPathSide"
|
||||
label="ด้าน/สาขา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.positionLine"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.positionType"
|
||||
label="ประเภทตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.positionLevel"
|
||||
label="ระดับตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.positionExecutive"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.positionExecutiveSide"
|
||||
label="ด้านตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -55,6 +55,7 @@ const emit = defineEmits(["update:modal"]);
|
|||
|
||||
/** ตัวแปร*/
|
||||
const modal = ref<boolean>(false);
|
||||
const isLoading = ref<boolean>(true);
|
||||
const employeeClass = ref<string>("");
|
||||
const avatar = reactive<Avatar>({
|
||||
avatar: "",
|
||||
|
|
@ -128,7 +129,7 @@ function calculateAge(birthDate: Date | null) {
|
|||
* @param id profileID
|
||||
*/
|
||||
async function fetchInformation(id: string) {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.get(
|
||||
config.API.orgProfileById(
|
||||
|
|
@ -182,7 +183,7 @@ async function fetchInformation(id: string) {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -309,7 +310,12 @@ watch(modal, (newValue) => {
|
|||
<q-dialog v-model="modal" position="right" :maximized="true" persistent>
|
||||
<q-card style="width: 420px; overflow: visible">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title :class="isLeave? 'text-subtitle1 text-bold text-red':'text-subtitle1 text-bold'"
|
||||
<q-toolbar-title
|
||||
:class="
|
||||
isLeave
|
||||
? 'text-subtitle1 text-bold text-red'
|
||||
: 'text-subtitle1 text-bold'
|
||||
"
|
||||
>ทะเบียนประวัติ{{ isLeave ? "ผู้พ้นจากราชการ" : "" }}
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
|
|
@ -324,7 +330,33 @@ watch(modal, (newValue) => {
|
|||
|
||||
<q-card-section class="col q-pt-none bg-grey-12">
|
||||
<div class="q-gutter-md">
|
||||
<q-card bordered class="text-center bg-grey-12">
|
||||
<div v-if="isLoading">
|
||||
<q-skeleton
|
||||
type="QAvatar"
|
||||
size="120px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-md"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="text"
|
||||
width="150px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-md"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="text"
|
||||
width="100px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-sm"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="QBtn"
|
||||
width="150px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-sm"
|
||||
/>
|
||||
</div>
|
||||
<q-card v-else bordered class="text-center bg-grey-12">
|
||||
<div>
|
||||
<q-avatar size="120px" color="grey-4">
|
||||
<img
|
||||
|
|
@ -341,6 +373,7 @@ watch(modal, (newValue) => {
|
|||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="q-mt-md text-subtitle2 text-bold"
|
||||
style="font-size: 18px"
|
||||
|
|
@ -378,7 +411,16 @@ watch(modal, (newValue) => {
|
|||
<q-icon name="mdi-account" color="grey-7" />
|
||||
<span class="q-ml-md">ข้อมูลส่วนตัว </span>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
<div v-if="isLoading" class="row q-pa-sm">
|
||||
<div
|
||||
v-for="n in 6"
|
||||
:key="n"
|
||||
class="col-xs-6 col-md-6 q-pa-sm"
|
||||
>
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
|
|
@ -460,294 +502,316 @@ watch(modal, (newValue) => {
|
|||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isLeave" class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6 is-red">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="dateLeave ? dateLeave : '-'"
|
||||
label="วันเดือนปีที่พ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6 is-red">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveType ? leaveType : '-'"
|
||||
label="ประเภทการพ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6 is-red">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveCommandNo ? leaveCommandNo : '-'"
|
||||
label="คำสั่ง/เอกสารอ้างอิง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-12 is-red">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveReason ? leaveReason : '-'"
|
||||
label="สาเหตุ/เหตุผล"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator v-if="isLeave" />
|
||||
<div class="row q-pa-sm" v-if="employeeClass !== 'TEMP'">
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.oc ? goverment.oc : '-'"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.posNo ? goverment.posNo : '-'"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่งเลขที่'
|
||||
: 'เลขที่ตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.position ? goverment.position : '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่ง'
|
||||
: 'ตำแหน่งในสายงาน'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionPathSide
|
||||
? goverment.positionPathSide
|
||||
: '-'
|
||||
"
|
||||
label="ด้าน/สาขา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLine ? goverment.positionLine : '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionType ? goverment.positionType : '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'กลุ่มงาน'
|
||||
: 'ตำแหน่งประเภท'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLevel
|
||||
? goverment.positionLevel
|
||||
: '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ระดับชั้นงาน'
|
||||
: 'ระดับตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="row q-pa-sm">
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
v-for="n in 9"
|
||||
:key="n"
|
||||
:class="
|
||||
n !== 1
|
||||
? 'col-xs-6 col-md-6 q-pa-sm'
|
||||
: 'col-xs-12 col-md-12 q-pa-sm'
|
||||
"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionExecutive
|
||||
? goverment.positionExecutive
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionExecutiveSide
|
||||
? goverment.positionExecutiveSide
|
||||
: '-'
|
||||
"
|
||||
autogrow
|
||||
label="ด้านทางการบริหาร"
|
||||
/>
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-sm" v-else>
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeOc
|
||||
? govermentTemp.employeeOc
|
||||
: '-'
|
||||
"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
<div v-else>
|
||||
<div v-if="isLeave" class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="dateLeave ? dateLeave : '-'"
|
||||
label="วันเดือนปีที่พ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveType ? leaveType : '-'"
|
||||
label="ประเภทการพ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveCommandNo ? leaveCommandNo : '-'"
|
||||
label="คำสั่ง/เอกสารอ้างอิง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-12">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveReason ? leaveReason : '-'"
|
||||
label="สาเหตุ/เหตุผล"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeGroupId
|
||||
? govermentTemp.positionEmployeeGroupId
|
||||
: '-'
|
||||
"
|
||||
label="กลุ่มงาน"
|
||||
/>
|
||||
<q-separator v-if="isLeave" />
|
||||
<div class="row q-pa-sm" v-if="employeeClass !== 'TEMP'">
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.oc ? goverment.oc : '-'"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.posNo ? goverment.posNo : '-'"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่งเลขที่'
|
||||
: 'เลขที่ตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.position ? goverment.position : '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่ง'
|
||||
: 'ตำแหน่งในสายงาน'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionPathSide
|
||||
? goverment.positionPathSide
|
||||
: '-'
|
||||
"
|
||||
label="ด้าน/สาขา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLine
|
||||
? goverment.positionLine
|
||||
: '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionType
|
||||
? goverment.positionType
|
||||
: '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'กลุ่มงาน'
|
||||
: 'ตำแหน่งประเภท'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLevel
|
||||
? goverment.positionLevel
|
||||
: '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ระดับชั้นงาน'
|
||||
: 'ระดับตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionExecutive
|
||||
? goverment.positionExecutive
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionExecutiveSide
|
||||
? goverment.positionExecutiveSide
|
||||
: '-'
|
||||
"
|
||||
autogrow
|
||||
label="ด้านทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeLineId
|
||||
? govermentTemp.positionEmployeeLineId
|
||||
: '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-pa-sm" v-else>
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeOc
|
||||
? govermentTemp.employeeOc
|
||||
: '-'
|
||||
"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeePositionId
|
||||
? govermentTemp.positionEmployeePositionId
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeGroupId
|
||||
? govermentTemp.positionEmployeeGroupId
|
||||
: '-'
|
||||
"
|
||||
label="กลุ่มงาน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeTypeIndividual
|
||||
? govermentTemp.employeeTypeIndividual
|
||||
: '-'
|
||||
"
|
||||
label="ประเภทบุคคล"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeLineId
|
||||
? govermentTemp.positionEmployeeLineId
|
||||
: '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeWage
|
||||
? govermentTemp.employeeWage
|
||||
: '-'
|
||||
"
|
||||
label="ค่าจ้าง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeePositionId
|
||||
? govermentTemp.positionEmployeePositionId
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyIncrease
|
||||
? govermentTemp.employeeMoneyIncrease
|
||||
: '-'
|
||||
"
|
||||
label="เงินเพิ่มการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeTypeIndividual
|
||||
? govermentTemp.employeeTypeIndividual
|
||||
: '-'
|
||||
"
|
||||
label="ประเภทบุคคล"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyAllowance
|
||||
? govermentTemp.employeeMoneyAllowance
|
||||
: '-'
|
||||
"
|
||||
label="เงินช่วยเหลือการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeWage
|
||||
? govermentTemp.employeeWage
|
||||
: '-'
|
||||
"
|
||||
label="ค่าจ้าง"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployee
|
||||
? govermentTemp.employeeMoneyEmployee
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (ลูกจ้าง)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyIncrease
|
||||
? govermentTemp.employeeMoneyIncrease
|
||||
: '-'
|
||||
"
|
||||
label="เงินเพิ่มการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployer
|
||||
? govermentTemp.employeeMoneyEmployer
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (นายจ้าง)"
|
||||
/>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyAllowance
|
||||
? govermentTemp.employeeMoneyAllowance
|
||||
: '-'
|
||||
"
|
||||
label="เงินช่วยเหลือการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployee
|
||||
? govermentTemp.employeeMoneyEmployee
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (ลูกจ้าง)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployer
|
||||
? govermentTemp.employeeMoneyEmployer
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (นายจ้าง)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -770,8 +834,4 @@ watch(modal, (newValue) => {
|
|||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.is-red input) {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1311,6 +1311,7 @@ onMounted(async () => {
|
|||
:title="`ประวัติแก้ไขเครื่องราชอิสริยาภรณ์`"
|
||||
:columns="columnsHistory"
|
||||
:fetch-data="fetchDataHistory"
|
||||
:type="'insignia'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ const columns = defineModel<QTableColumn[]>("columns", {
|
|||
const visibleColumnsMain = defineModel<string[]>("visibleColumns", {
|
||||
required: true,
|
||||
});
|
||||
const type = defineModel<string>("type", { default: "" });
|
||||
|
||||
const props = defineProps({
|
||||
fetchData: { type: Function, required: true },
|
||||
|
|
@ -114,7 +115,7 @@ watch(
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name === 'no'">
|
||||
<div v-if="col.name === 'no' && type !== 'insignia'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'organization'" class="text-html">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import type {
|
|||
import type { QTableProps } from "quasar";
|
||||
import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
||||
import CardProfile from "@/components/CardProfile.vue";
|
||||
import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import type {
|
|||
} from "@/modules/06_retirement/interface/response/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
||||
import CardProfile from "@/components/CardProfile.vue";
|
||||
import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -35,9 +35,11 @@ const cardData = ref<DataCardPos[]>([
|
|||
data: [],
|
||||
},
|
||||
]);
|
||||
const isLoading = ref(true);
|
||||
|
||||
async function fetchDataTenure() {
|
||||
if (props?.id) {
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.get(
|
||||
config.API.salaryTenurePosition(
|
||||
|
|
@ -73,6 +75,9 @@ async function fetchDataTenure() {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -88,7 +93,12 @@ onMounted(() => {
|
|||
<q-icon name="mdi-account-tie" color="grey-7" />
|
||||
<span class="q-ml-md">ข้อมูลตำแหน่ง </span>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
<div v-if="isLoading" class="row q-pa-sm">
|
||||
<q-skeleton class="col-12 q-mt-sm" height="140px" square />
|
||||
<q-skeleton class="col-12 q-mt-sm" height="140px" square />
|
||||
<q-skeleton class="col-12 q-mt-sm" height="140px" square />
|
||||
</div>
|
||||
<div v-else class="row q-pa-sm">
|
||||
<q-list flat bordered class="col-12" style="border-radius: 5px">
|
||||
<q-card flat v-for="(item, index) in cardData" :key="index">
|
||||
<q-item>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue