478 lines
15 KiB
Vue
478 lines
15 KiB
Vue
<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="clickBack"
|
|
/>
|
|
<label
|
|
>ประวัติบัญชีจัดข้าราชการกรุงเทพมหานครสามัญเข้าประเภทตำแหน่ง สายงาน
|
|
และระดับตำแหน่ง</label
|
|
>
|
|
<q-card flat bordered class="col-12 q-my-sm q-pt-sm">
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-menu-left"
|
|
@click="clickPreviousNext('next')"
|
|
:disable="previous == false"
|
|
:color="!previous ? 'grey-7' : 'public'"
|
|
/>
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-menu-right"
|
|
@click="clickPreviousNext('previous')"
|
|
:disable="next == false"
|
|
:color="!next ? 'grey-7' : 'public'"
|
|
/>
|
|
<label>
|
|
{{
|
|
`${
|
|
historyHead.length > 0 && historyHead[indexRow].date != null
|
|
? date2Thai(historyHead[indexRow].date, false, true)
|
|
: ""
|
|
}`
|
|
}}
|
|
</label>
|
|
<div
|
|
class="q-pa-md row col-12 q-col-gutter-sm"
|
|
v-for="items in historyData"
|
|
:key="items.fullName"
|
|
>
|
|
<q-input
|
|
v-model="items.fullName"
|
|
label="ชื่อ-สกุล"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.education"
|
|
label="คุณวุฒิ"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.salary"
|
|
label="เงินเดือน"
|
|
class="col-xs-12 col-sm-4"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.salaryPosition"
|
|
label="เงินประจำตำแหน่ง"
|
|
class="col-xs-12 col-sm-4"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.salaryMonth"
|
|
label="เงินตอบแทนรายเดือน"
|
|
class="col-xs-12 col-sm-4"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
|
|
<div class="row col-12 q-col-gutter-x-sm">
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-card bordered flat>
|
|
<div
|
|
class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
|
|
>
|
|
กำหนดเดิม
|
|
</div>
|
|
<q-separator />
|
|
|
|
<div class="col-12 row q-pa-sm q-col-gutter-xs">
|
|
<q-input
|
|
v-model="items.oldOrganizationShortName"
|
|
label="รหัสส่วนราชการ"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldOrganizationOrganization"
|
|
label="ชื่อหน่วยงาน"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldPositionNum"
|
|
label="ตำแหน่งเลขที่"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldPositionType"
|
|
label="ประเภทตำแหน่ง"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldPositionExecutive"
|
|
label="ตำแหน่งทางการบริหาร"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldPositionExecutiveSide"
|
|
label="ด้านทางบริหาร"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldPositionPath"
|
|
label="ตำแหน่งในสายงาน"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldPositionPathSide"
|
|
label="ด้าน/สาขา"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.oldPositionLevel"
|
|
label="ระดับตำแหน่ง"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-card bordered flat>
|
|
<div
|
|
class="q-pa-xs bg-grey-2 row flex items-center justify-center text-bold q-py-sm q-px-md"
|
|
>
|
|
กำหนดใหม่
|
|
</div>
|
|
<q-separator />
|
|
|
|
<div class="col-12 row q-pa-sm q-col-gutter-xs">
|
|
<q-input
|
|
v-model="items.newOrganizationShortName"
|
|
label="รหัสส่วนราชการ"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newOrganizationOrganization"
|
|
label="ชื่อหน่วยงาน"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newPositionNum"
|
|
label="ตำแหน่งเลขที่"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newPositionType"
|
|
label="ประเภทตำแหน่ง"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newPositionExecutive"
|
|
label="ตำแหน่งทางการบริหาร"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newPositionExecutiveSide"
|
|
label="ด้านทางบริหาร"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newPositionPath"
|
|
label="ตำแหน่งในสายงาน"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newPositionPathSide"
|
|
label="ด้าน/สาขา"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="items.newPositionLevel"
|
|
label="ระดับตำแหน่ง"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useQuasar } from "quasar";
|
|
import { useDataStore } from "@/stores/data";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import type {
|
|
ResponseHistory,
|
|
ResponseHistoryHead,
|
|
} from "@/modules/02_organizational/interface/response/Mapping";
|
|
|
|
const dataStore = useDataStore();
|
|
const $q = useQuasar(); // show dia
|
|
const mixin = useCounterMixin();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const { loaderPage } = dataStore;
|
|
const { date2Thai, success, dateToISO } = mixin;
|
|
const id = ref<string>("");
|
|
const previous = ref<boolean>(false);
|
|
const next = ref<boolean>(false);
|
|
const indexRow = ref<number>(0);
|
|
const historyHead = ref<ResponseHistoryHead[]>([]);
|
|
const historyData = ref<ResponseHistory[]>([]);
|
|
|
|
onMounted(async () => {
|
|
loaderPage(false);
|
|
if (route.params.id != undefined) {
|
|
id.value = route.params.id.toString();
|
|
|
|
await fetchHistory();
|
|
if (historyHead.value.length > 0) {
|
|
await fetchData();
|
|
}
|
|
}
|
|
});
|
|
|
|
const clickBack = () => {
|
|
router.push({ name: "manageReport2" });
|
|
};
|
|
|
|
const clickPreviousNext = async (page: string) => {
|
|
const index: number =
|
|
page == "next" ? indexRow.value - 1 : indexRow.value + 1;
|
|
let length: number = historyHead.value.length;
|
|
previous.value = index == 0 ? false : true;
|
|
next.value = index == length - 1 ? false : true;
|
|
indexRow.value = index;
|
|
await fetchData();
|
|
};
|
|
|
|
const fetchHistory = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.report2HistoryId(id.value))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let header: ResponseHistoryHead[] = [];
|
|
data.map((r: any) => {
|
|
header.push({
|
|
historyId: r.historyId,
|
|
date: new Date(r.date),
|
|
});
|
|
});
|
|
historyHead.value = header;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(async () => {
|
|
loaderPage(false);
|
|
if (historyHead.value.length > 1) {
|
|
next.value = true;
|
|
previous.value = false;
|
|
} else {
|
|
next.value = false;
|
|
previous.value = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
const fetchData = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(
|
|
config.API.report2HistoryDetailId(
|
|
historyHead.value[indexRow.value].historyId
|
|
)
|
|
)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let responeseData: ResponseHistory[] = [];
|
|
data.map((r: any) => {
|
|
responeseData.push({
|
|
fullName: r.fullName ?? "-",
|
|
education: r.fullName ?? "-",
|
|
salary: r.salary,
|
|
salaryPosition: r.salaryPosition,
|
|
salaryMonth: r.salaryMonth,
|
|
oldOrganizationShortName: r.oldOrganizationShortName ?? "-",
|
|
oldOrganizationOrganization: r.oldOrganizationOrganization ?? "-",
|
|
oldPositionNum: r.oldPositionNum ?? "-",
|
|
oldPositionType: r.oldPositionType ?? "-",
|
|
oldPositionExecutive: r.oldPositionExecutive ?? "-",
|
|
oldPositionExecutiveSide: r.oldPositionExecutiveSide ?? "-",
|
|
oldPositionPath: r.oldPositionPath ?? "-",
|
|
oldPositionPathSide: r.oldPositionPathSide ?? "-",
|
|
oldPositionLevel: r.oldPositionLevel ?? "-",
|
|
newOrganizationShortName: r.newOrganizationShortName ?? "-",
|
|
newOrganizationOrganization: r.newOrganizationOrganization ?? "-",
|
|
newPositionNum: r.newPositionNum ?? "-",
|
|
newPositionType: r.newPositionType ?? "-",
|
|
newPositionExecutive: r.newPositionExecutive ?? "-",
|
|
newPositionExecutiveSide: r.newPositionExecutiveSide ?? "-",
|
|
newPositionPath: r.newPositionPath ?? "-",
|
|
newPositionPathSide: r.newPositionPathSide ?? "-",
|
|
newPositionLevel: r.newPositionLevel ?? "-",
|
|
});
|
|
});
|
|
historyData.value = responeseData;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(async () => {
|
|
loaderPage(false);
|
|
});
|
|
};
|
|
</script>
|
|
<style>
|
|
.expan .q-expansion-item--expanded {
|
|
border: 1px solid #eaeaea;
|
|
border-radius: 2px;
|
|
margin: 5px 0px !important;
|
|
background: #eaeaea4a !important;
|
|
}
|
|
.expan .q-expansion-item {
|
|
border: 1px solid #eaeaea;
|
|
margin-top: -1px;
|
|
border-radius: 2px;
|
|
background: white;
|
|
}
|
|
.my-custom-toggle {
|
|
border: 1px solid #02a998;
|
|
}
|
|
</style>
|