clone code
This commit is contained in:
Kittapath
parent
c9597d1e38
commit
d57bcd1719
362 changed files with 104804 additions and 0 deletions
478
src/modules/02_organizational/views/ManageReport2History.vue
Normal file
478
src/modules/02_organizational/views/ManageReport2History.vue
Normal file
|
|
@ -0,0 +1,478 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue