แก้ API ข้อมูลราชการ

This commit is contained in:
STW_TTTY\stwtt 2024-03-27 13:30:42 +07:00
parent c2fee13ef9
commit 55ee7f6b12
2 changed files with 145 additions and 262 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch,onMounted } from "vue"; import { ref, reactive, watch, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import type { import type {
MyObjectRef, MyObjectRef,
@ -30,21 +30,25 @@ const {
const profileId = ref<string>(route.params.id.toString()) const profileId = ref<string>(route.params.id.toString())
/** ตัวแปรข้อมูลหลัก */ /** ตัวแปรข้อมูลหลัก */
const formMain = reactive<FormMain>({ const formMain = reactive<FormMain>({
ocId: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", // ocId: "", //
positionId: "ผู้อำนวยการ", // positionId: "", //
positionLine: "อำนวยการ", // positionLine: "", //
positionLevel: "ต้น", // positionLevel: "", //
numberId: "กทข.1", // numberId: "", //
positionExecutive: "ผู้อำนวยการกอง", // positionExecutive: "", //
positionExecutiveSide: "", // positionExecutiveSide: "", //
positionType: "ทั่วไป", // positionType: "", //
positionPathSide: "", /// positionPathSide: "", ///
containDate: new Date("2024-01-22T02:43:00"), // containDate: null, //
workDate: new Date("2024-01-22T02:43:00"), // workDate: null, //
reasonSameDate: "เนื่องจากเป็นวันหยุด", reasonSameDate: "",
retireDate: new Date("2024-01-22T02:43:00"), // retireDate: null, //
ageAll: "0 ปี 2 เดือน 10 วัน", // ageAll: {
year: 0,
month: 0,
day: 0
}, //
absent: 0, // absent: 0, //
age: 0, // age: 0, //
}); });
@ -341,57 +345,56 @@ function onSubmit() {
dialogConfirm($q, () => { dialogConfirm($q, () => {
showLoader() showLoader()
http http
.patch(config.API.profileNewGovernmentById(profileId.value),{ .patch(config.API.profileNewGovernmentById(profileId.value), {
dateAppoint:containDate.value, dateAppoint: containDate.value,
dateStart:workDate.value, dateStart: workDate.value,
reasonSameDate:reasonSameDate.value reasonSameDate:reasonSameDate.value
}) })
.then((res)=>{ .then((res) => {
closeDialog() closeDialog()
getData() getData()
}).catch((e)=>{ }).catch((e) => {
messageError($q,e) messageError($q, e)
}).finally(()=>{ }).finally(() => {
hideLoader() hideLoader()
}) })
closeDialog(); closeDialog();
}); });
} }
/** ดึงข้อมูลราชการ */ /** ดึงข้อมูลราชการ */
function getData(){ function getData() {
showLoader() showLoader()
http http
.get(config.API.profileNewGovernmentById(profileId.value)) .get(config.API.profileNewGovernmentById(profileId.value))
.then((res)=>{ .then((res) => {
console.log(res.data.result) console.log(res.data.result)
const data = res.data.result const data = res.data.result
formMain.ocId = data.oc // formMain.ocId = data.org //
formMain.positionId = data.position // formMain.positionId = data.position //
formMain.positionLine = data.positionLine // formMain.positionLine = data.positionField //
formMain.positionLevel = data.positionLevel // formMain.positionLevel = data.posLevel //
formMain.numberId = data.posNo // formMain.numberId = data.posMasterNo //
formMain.positionType = data.positionType // formMain.positionType = data.posType //
formMain.positionExecutive = data.positionExecutive // formMain.positionExecutive = data.posExecutive //
formMain.positionPathSide = data.positionPathSide // formMain.positionPathSide = data.positionArea //
formMain.positionExecutiveSide = data.positionExecutiveSide // formMain.positionExecutiveSide = data.positionExecutiveField //
formMain.containDate = data.dateAppoint formMain.containDate = data.dateAppoint
formMain.workDate = data.dateStart formMain.workDate = data.dateStart
formMain.reasonSameDate = data.reasonSameDate formMain.reasonSameDate = data.reasonSameDate
formMain.retireDate = data.retireDate formMain.retireDate = data.retireDate
formMain.ageAll = data.govAge formMain.ageAll = data.govAge
formMain.absent = data.govAgeAbsent formMain.absent = data.govAgeAbsent
formMain.age = data.govAgePlus formMain.age = data.govAgePlus
}).catch((e) => {
}).catch((e)=>{ messageError($q, e)
messageError($q,e) }).finally(() => {
}).finally(()=>{ hideLoader()
hideLoader() })
})
} }
/** ดึงข้อมูลประวัติ */ /** ดึงข้อมูลประวัติ */
@ -443,7 +446,7 @@ watch(
} }
); );
onMounted(()=>{ onMounted(() => {
getData() getData()
}) })
</script> </script>
@ -451,37 +454,21 @@ onMounted(()=>{
<div class="row"> <div class="row">
<q-space /> <q-space />
<div class="q-gutter-x-sm"> <div class="q-gutter-x-sm">
<q-btn <q-btn color="teal-5" icon="mdi-pencil-outline" flat round
color="teal-5" @click="openDialogEdit()"><q-tooltip>แกไข</q-tooltip></q-btn>
icon="mdi-pencil-outline" <q-btn color="edit" icon="mdi-history" flat round
flat @click="openDialogHistory()"><q-tooltip>ประวอมลราชการ</q-tooltip></q-btn>
round
@click="openDialogEdit()"
><q-tooltip>แกไข</q-tooltip></q-btn
>
<q-btn
color="edit"
icon="mdi-history"
flat
round
@click="openDialogHistory()"
><q-tooltip>ประวอมลราชการ</q-tooltip></q-btn
>
</div> </div>
</div> </div>
<q-card bordered class="bg-grey-1 q-pa-md"> <q-card bordered class="bg-grey-1 q-pa-md">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm"> <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
<div <div class="row" v-for="(field, index) in Object.keys(fieldLabels).slice(0, 5)" :key="index">
class="row"
v-for="(field, index) in Object.keys(fieldLabels).slice(0, 5)"
:key="index"
>
<div class="col-12 col-sm-12 col-md-4"> <div class="col-12 col-sm-12 col-md-4">
<span class="text-grey-6 text-weight-medium">{{ <span class="text-grey-6 text-weight-medium">{{
fieldLabels[field as keyof typeof fieldLabels] fieldLabels[field as keyof typeof fieldLabels]
}}</span> }}</span>
</div> </div>
<div class="col-12 col-sm-12 col-md-8"> <div class="col-12 col-sm-12 col-md-8">
<span>{{ formMain[field] ? formMain[field] : "-" }}</span> <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
@ -489,18 +476,14 @@ onMounted(()=>{
</div> </div>
</div> </div>
<div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm"> <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
<div <div class="row" v-for="(field, index) in Object.keys(fieldLabels).slice(5, 9)" :key="index">
class="row"
v-for="(field, index) in Object.keys(fieldLabels).slice(5, 9)"
:key="index"
>
<div class="col-12 col-sm-12 col-md-4"> <div class="col-12 col-sm-12 col-md-4">
<span class="text-grey-6 text-weight-medium">{{ <span class="text-grey-6 text-weight-medium">{{
fieldLabels[field as keyof typeof fieldLabels] fieldLabels[field as keyof typeof fieldLabels]
}}</span> }}</span>
</div> </div>
<div class="col-12 col-sm-12 col-md-8"> <div class="col-12 col-sm-12 col-md-8">
<span>{{ formMain[field] ? formMain[field] : "-" }}</span> <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -515,8 +498,8 @@ onMounted(()=>{
</div> </div>
<div class="col-12 col-sm-12 col-md-8"> <div class="col-12 col-sm-12 col-md-8">
<span>{{ <span>{{
formMain.containDate ? date2Thai(formMain.containDate) : "-" formMain.containDate ? date2Thai(formMain.containDate) : "-"
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -527,25 +510,23 @@ onMounted(()=>{
</div> </div>
<div class="col-12 col-sm-12 col-md-8"> <div class="col-12 col-sm-12 col-md-8">
<span>{{ <span>{{
formMain.workDate !== null formMain.workDate !== null
? date2Thai(formMain.workDate as Date) ? date2Thai(formMain.workDate as Date)
: "-" : "-"
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
<div <div v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)" class="col-12 col-sm-6 col-md-6">
class="col-12 col-sm-6 col-md-6"
>
<div class="row"> <div class="row">
<div class="col-12 col-sm-12 col-md-4"> <div class="col-12 col-sm-12 col-md-4">
<span class="text-grey-6 text-weight-medium">เหตผลทนทไมตรงก</span> <span class="text-grey-6 text-weight-medium">เหตผลทนทไมตรงก</span>
</div> </div>
<div class="col-12 col-sm-12 col-md-8"> <div class="col-12 col-sm-12 col-md-8">
<span>{{ <span>{{
formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-" formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -556,10 +537,10 @@ onMounted(()=>{
</div> </div>
<div class="col-12 col-sm-12 col-md-8"> <div class="col-12 col-sm-12 col-md-8">
<span>{{ <span>{{
formMain.retireDate !== null formMain.retireDate
? date2Thai(formMain.retireDate as Date) ? date2Thai(formMain.retireDate as Date)
: "-" : "-"
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -571,7 +552,7 @@ onMounted(()=>{
<span class="text-grey-6 text-weight-medium">อายราชการ</span> <span class="text-grey-6 text-weight-medium">อายราชการ</span>
</div> </div>
<div class="col-12 col-sm-12 col-md-8"> <div class="col-12 col-sm-12 col-md-8">
<span>{{ formMain.ageAll !== "" ? formMain.ageAll : "-" }}</span> <span>{{ formMain.ageAll ? `${formMain.ageAll.day} วัน ${formMain.ageAll.month} เดือน ${formMain.ageAll.year} ปี` : "-" }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -611,13 +592,7 @@ onMounted(()=>{
<q-card-section class="q-pa-md"> <q-card-section class="q-pa-md">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-6"> <div class="col-6">
<datepicker <datepicker v-model="containDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0">
v-model="containDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -625,28 +600,15 @@ onMounted(()=>{
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input ref="containDateRef" class="full-width inputgreen cursor-pointer" hide-bottom-space dense
ref="containDateRef" outlined :model-value="containDate !== null
class="full-width inputgreen cursor-pointer" ? date2Thai(containDate as Date)
hide-bottom-space : null
dense " :rules="[
outlined (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
:model-value=" ]" label="/เดอน/ บรรจ">
containDate !== null
? date2Thai(containDate as Date)
: null
"
:rules="[
(val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
]"
label="วัน/เดือน/ปี ที่บรรจุ"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon name="event" class="cursor-pointer" :style="'color: var(--q-primary)'">
name="event"
class="cursor-pointer"
:style="'color: var(--q-primary)'"
>
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
@ -654,13 +616,7 @@ onMounted(()=>{
</datepicker> </datepicker>
</div> </div>
<div class="col-6"> <div class="col-6">
<datepicker <datepicker v-model="workDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0">
v-model="workDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -668,61 +624,31 @@ onMounted(()=>{
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input ref="workDateRef" class="full-width inputgreen cursor-pointer" hide-bottom-space dense
ref="workDateRef" outlined :model-value="workDate !== null
class="full-width inputgreen cursor-pointer" ? date2Thai(workDate as Date)
hide-bottom-space : null
dense " :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']" label="/เดอน/ เรมปฎราชการ">
outlined
:model-value="
workDate !== null
? date2Thai(workDate as Date)
: null
"
:rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon name="event" class="cursor-pointer" :style="'color: var(--q-primary)'">
name="event"
class="cursor-pointer"
:style="'color: var(--q-primary)'"
>
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div <div class="col-12"
class="col-12" v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false">
v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date):false" <q-input ref="reasonSameDateRef" class="full-width inputgreen cursor-pointer" label="เหตุผลกรณีไม่ตรงกัน"
> type="textarea" outlined dense :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
<q-input v-model="reasonSameDate" />
ref="reasonSameDateRef"
class="full-width inputgreen cursor-pointer"
label="เหตุผลกรณีไม่ตรงกัน"
type="textarea"
outlined
dense
:rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
v-model="reasonSameDate"
/>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right"> <q-card-actions align="right">
<q-btn <q-btn id="onSubmit" type="submit" dense unelevated label="บันทึก" color="public" class="q-px-md">
id="onSubmit"
type="submit"
dense
unelevated
label="บันทึก"
color="public"
class="q-px-md"
>
<q-tooltip>นทกขอม</q-tooltip> <q-tooltip>นทกขอม</q-tooltip>
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
@ -734,10 +660,7 @@ onMounted(()=>{
<q-dialog v-model="modalHistory" persistent> <q-dialog v-model="modalHistory" persistent>
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<q-card-section class="flex justify-between" style="padding: 0"> <q-card-section class="flex justify-between" style="padding: 0">
<DialogHeader <DialogHeader tittle="ประวัติแก้ไขข้อมูลราชการ" :close="() => (modalHistory = !modalHistory)" />
tittle="ประวัติแก้ไขข้อมูลราชการ"
:close="() => (modalHistory = !modalHistory)"
/>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
@ -745,66 +668,24 @@ onMounted(()=>{
<q-card-section class="q-pa-sm"> <q-card-section class="q-pa-sm">
<div class="row q-pb-sm q-gutter-x-sm"> <div class="row q-pb-sm q-gutter-x-sm">
<q-space /> <q-space />
<q-input <q-input standout dense v-model="filterKeyword" ref="filterRef" outlined placeholder="ค้นหา" class="col-2"
standout debounce="300">
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
class="col-2"
debounce="300"
>
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon v-if="filterKeyword == ''" name="search" @click.stop.prevent="filterKeyword = ''"
v-if="filterKeyword == ''" class="cursor-pointer" />
name="search" <q-icon v-if="filterKeyword" name="cancel" @click.stop.prevent="filterKeyword = ''"
@click.stop.prevent="filterKeyword = ''" class="cursor-pointer" />
class="cursor-pointer"
/>
<q-icon
v-if="filterKeyword"
name="cancel"
@click.stop.prevent="filterKeyword = ''"
class="cursor-pointer"
/>
</template> </template>
</q-input> </q-input>
<q-select <q-select v-model="visibleColumnsHistory" multiple outlined dense options-dense
v-model="visibleColumnsHistory" :display-value="$q.lang.table.columns" emit-value map-options :options="columnsHistory" option-value="name"
multiple options-cover style="min-width: 150px" />
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columnsHistory"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div> </div>
<d-table <d-table ref="table" :columns="columnsHistory" :rows="rowsHistory" flat bordered :paging="true" dense
ref="table" class="custom-header-table" :filter="filterKeyword" :visible-columns="visibleColumnsHistory">
:columns="columnsHistory"
:rows="rowsHistory"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:filter="filterKeyword"
:visible-columns="visibleColumnsHistory"
>
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th <q-th v-for="col in props.cols" :key="col.name" :props="props" style="color: #000000; font-weight: 500">
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span> <span class="text-weight-medium">{{ col.label }}</span>
</q-th> </q-th>
<q-th auto-width></q-th> <q-th auto-width></q-th>
@ -813,15 +694,11 @@ onMounted(()=>{
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props"> <q-td v-for="col in props.cols" :key="col.name" :props="props">
<div <div v-if="col.name == 'dateStart' ||
v-if=" col.name == 'dateAppoint' ||
col.name == 'dateStart' || col.name == 'createdAt' ||
col.name == 'dateAppoint' || col.name == 'retireDate'
col.name == 'createdAt' || " class="table_ellipsis">
col.name == 'retireDate'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }} {{ date2Thai(col.value) }}
</div> </div>
<div v-else> <div v-else>

View file

@ -1,23 +1,29 @@
interface FormMain { interface FormMain {
ocId:string ocId: string
positionId:string positionId: string
positionLine:string positionLine: string
positionLevel:string positionLevel: string
numberId:string numberId: string
positionExecutive:string positionExecutive: string
positionExecutiveSide:string positionExecutiveSide: string
positionType:string positionType: string
positionPathSide:string positionPathSide: string
containDate:Date containDate: any
workDate:Date workDate: any
reasonSameDate:string reasonSameDate: string
retireDate:Date retireDate: any
ageAll:string ageAll: GovAgeForm
absent:number absent: number
age:number age: number
[key: string]: any; [key: string]: any;
} }
interface GovAgeForm {
year: number,
month: number,
day: number
}
interface MyObjectRef { interface MyObjectRef {
containDate: object | null; containDate: object | null;
workDate: object | null; workDate: object | null;