1156 lines
38 KiB
Vue
1156 lines
38 KiB
Vue
<!-- =============================== -->
|
|
<!-- page:update add page จัดการบัญชี 2 -->
|
|
<!-- =============================== -->
|
|
<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
|
|
>
|
|
</div>
|
|
<q-card flat bordered class="col-12 q-my-sm q-pt-sm">
|
|
<q-form ref="myForm">
|
|
<div class="q-pa-md row col-12 q-col-gutter-sm">
|
|
<q-input
|
|
v-model="myData.name"
|
|
label="ชื่อ-สกุล"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="myData.edu"
|
|
label="คุณวุฒิ"
|
|
class="col-xs-12 col-sm-6"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="myData.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="myData.salary2"
|
|
label="เงินประจำตำแหน่ง"
|
|
class="col-xs-12 col-sm-4"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<q-input
|
|
v-model="myData.salary3"
|
|
label="เงินตอบแทนรายเดือน"
|
|
class="col-xs-12 col-sm-4"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
/>
|
|
<!-- <q-card bordered class="col-12 row q-pa-sm">
|
|
<div class="col-12">
|
|
<span class="text-grey-6 q-pr-sm">คุณวุฒิ :</span>
|
|
พยาบาลศาสตรบัณฑิต สาธารณสุขศาสตรบัณฑิต
|
|
</div>
|
|
<span class="text-grey-6 q-pr-sm">เงินเดือน : </span>61,580
|
|
<span class="text-grey-6 q-pr-sm q-pl-lg">เงินประจำตำแหน่ง : </span
|
|
>5,600
|
|
<span class="text-grey-6 q-pr-sm q-pl-lg"
|
|
>เงินตอบแทนรายเดือน : </span
|
|
>5,600
|
|
</q-card> -->
|
|
<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-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.goverment"
|
|
label="รหัสส่วนราชการ"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="govermentOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
dense
|
|
v-model="myData.agency"
|
|
label="ชื่อหน่วยงาน"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="agencyOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.posiNum"
|
|
label="ตำแหน่งเลขที่"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="posiNumOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.category"
|
|
label="ตำแหน่งประเภท"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="categoryOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.posiManage"
|
|
label="ตำแหน่งทางการบริหาร"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="posiManageOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.sideManage"
|
|
label="ด้านทางบริหาร"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="sideManageOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.posiWork"
|
|
label="ตำแหน่งในสายงาน"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="posiWorkOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.sideWork"
|
|
label="ด้าน/สาขา"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="sideWorkOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="true"
|
|
/>
|
|
|
|
<q-select
|
|
class="col-xs-12 col-sm-6"
|
|
v-model="myData.level"
|
|
label="ระดับตำแหน่ง"
|
|
dense
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="levelOP"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:outlined="false"
|
|
:hide-dropdown-icon="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-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '1')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="govermentOP"
|
|
v-model="myData.goverment2"
|
|
label="รหัสส่วนราชการ"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
@update:model-value="updateGoverment"
|
|
>
|
|
<template v-slot:option="scope">
|
|
<q-item v-bind="scope.itemProps">
|
|
<q-item-label class="q-my-none q-pt-xs q-mr-none">{{
|
|
scope.opt.name
|
|
}}</q-item-label>
|
|
<q-item-label caption class="q-ml-xs">
|
|
{{ scope.opt.note }}
|
|
</q-item-label>
|
|
</q-item>
|
|
</template>
|
|
<template v-slot:selected-item="scope">
|
|
<q-chip dense square class="q-my-none q-ml-xs q-mr-none">
|
|
{{ scope.opt.name }}
|
|
</q-chip>
|
|
<q-item-label caption class="q-ml-xs">
|
|
{{ scope.opt.note }}
|
|
</q-item-label>
|
|
</template>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '2')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="agencyOP"
|
|
v-model="myData.agency2"
|
|
label="ชื่อหน่วยงาน"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:rules="[(val) => !!val || `${'กรุณาเลือก ชื่อหน่วยงาน'}`]"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '3')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="posiNumOP"
|
|
v-model="myData.posiNum2"
|
|
label="ตำแหน่งเลขที่"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:rules="[(val) => !!val || `${'กรุณาเลือก ตำแหน่งเลขที่'}`]"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '4')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="categoryOP"
|
|
v-model="myData.category2"
|
|
label="ตำแหน่งประเภท"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:rules="[(val) => !!val || `${'กรุณาเลือก ตำแหน่งเลขที่'}`]"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '5')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="posiManageOP"
|
|
v-model="myData.posiManage2"
|
|
label="ตำแหน่งทางการบริหาร"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
clearable
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '6')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="sideManageOP"
|
|
v-model="myData.sideManage2"
|
|
label="ด้านทางบริหาร"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
clearable
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<!-- :rules="[(val) => !!val || `${'กรุณาเลือก ด้านทางบริหาร'}`]" -->
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '7')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="posiWorkOP"
|
|
v-model="myData.posiWork2"
|
|
label="ตำแหน่งในสายงาน"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:rules="[(val) => !!val || `${'กรุณาเลือก ตำแหน่งในสายงาน'}`]"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '8')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="sideWorkOP"
|
|
v-model="myData.sideWork2"
|
|
label="ด้าน/สาขา"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
clearable
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
|
|
<q-select
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '9')
|
|
"
|
|
class="col-xs-12 col-sm-6"
|
|
outlined
|
|
dense
|
|
:options="levelOP"
|
|
v-model="myData.level2"
|
|
label="ระดับตำแหน่ง"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
option-value="id"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
:rules="[(val) => !!val || `${'กรุณาเลือก ระดับตำแหน่ง'}`]"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-black">
|
|
ไม่พบข้อมูลที่ค้นหา
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-separator />
|
|
<q-card-actions class="q-py-sm">
|
|
<q-space />
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="public"
|
|
icon="mdi-content-save-outline"
|
|
@click="checkSave"
|
|
>
|
|
<q-tooltip>บันทึก</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, computed, ref, watch } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
import TableReport from "@/modules/02_organizational/components/TableReport.vue";
|
|
import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
|
|
import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
|
|
import type { QForm } from "quasar";
|
|
import type { DataOption } from "@/modules/02_organizational/interface/index/Main";
|
|
import type { ResponseDetail } from "@/modules/02_organizational/interface/response/Mapping";
|
|
import type { RequestReport2 } from "@/modules/02_organizational/interface/request/Mapping";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
const $q = useQuasar(); // show dialog
|
|
const mixin = useCounterMixin();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
|
|
const id = ref<string>("");
|
|
const myForm = ref<QForm | null>(null); //form data input
|
|
|
|
const mockData = ref<ResponseDetail>({
|
|
report2Id: "1asd12",
|
|
name: "นางสาวเปรี้ยว เข็ดฟัน",
|
|
edu: "ศศ.บ. (รัฐศาสตร์)",
|
|
salary: 31580,
|
|
salary2: 2600,
|
|
salary3: 2600,
|
|
goverment: "0301",
|
|
agency: "กองบริหารทั่วไป",
|
|
posiNum: "กบห.13",
|
|
posiManage: "",
|
|
sideManage: "",
|
|
posiWork: "นักวิชาการเงินและบัญชี",
|
|
sideWork: "วิชาการบัญชี",
|
|
category: "วิชาการ",
|
|
level: "ชำนาญงาน",
|
|
goverment2: "0301",
|
|
agency2: "กองบริหารทั่วไป",
|
|
posiNum2: "กบห.12",
|
|
posiManage2: "",
|
|
sideManage2: "",
|
|
posiWork2: "นักวิชาการเงินและบัญชี",
|
|
sideWork2: "วิชาการบัญชี",
|
|
category2: "วิชาการ",
|
|
level2: "ชำนาญงาน",
|
|
});
|
|
const myData = ref<ResponseDetail>({
|
|
report2Id: "",
|
|
name: "",
|
|
edu: "",
|
|
salary: 0,
|
|
salary2: 0,
|
|
salary3: 0,
|
|
goverment: "",
|
|
agency: "",
|
|
posiNum: "",
|
|
posiManage: "",
|
|
sideManage: "",
|
|
posiWork: "",
|
|
sideWork: "",
|
|
category: "",
|
|
level: "",
|
|
goverment2: "",
|
|
agency2: "",
|
|
posiNum2: "",
|
|
posiManage2: "",
|
|
sideManage2: "",
|
|
posiWork2: "",
|
|
sideWork2: "",
|
|
category2: "",
|
|
level2: "",
|
|
});
|
|
|
|
const govermentOP = ref<DataOption[]>([]);
|
|
const agencyOP = ref<DataOption[]>([]);
|
|
const posiNumOP = ref<DataOption[]>([]);
|
|
const posiManageOP = ref<DataOption[]>([]);
|
|
const sideManageOP = ref<DataOption[]>([]);
|
|
const posiWorkOP = ref<DataOption[]>([]);
|
|
const categoryOP = ref<DataOption[]>([]);
|
|
const sideWorkOP = ref<DataOption[]>([]);
|
|
const levelOP = ref<DataOption[]>([]);
|
|
|
|
const govermentOPfilter = ref<DataOption[]>([]);
|
|
const agencyOPfilter = ref<DataOption[]>([]);
|
|
const posiNumOPfilter = ref<DataOption[]>([]);
|
|
const posiManageOPfilter = ref<DataOption[]>([]);
|
|
const sideManageOPfilter = ref<DataOption[]>([]);
|
|
const posiWorkOPfilter = ref<DataOption[]>([]);
|
|
const categoryOPfilter = ref<DataOption[]>([]);
|
|
const sideWorkOPfilter = ref<DataOption[]>([]);
|
|
const levelOPfilter = ref<DataOption[]>([]);
|
|
|
|
onMounted(async () => {
|
|
hideLoader();
|
|
if (route.params.id != undefined) {
|
|
id.value = route.params.id.toString();
|
|
showLoader();
|
|
|
|
await fetchGoverment();
|
|
// await fetchAgency();
|
|
// await fetchPositionNum();
|
|
// await fetchCategory();
|
|
// await fetchPositionManage();
|
|
// await fetchSideManage();
|
|
// await fetchPositionWork();
|
|
// await fetchSideWork();
|
|
await fetchLevel();
|
|
|
|
await fetchData();
|
|
hideLoader();
|
|
}
|
|
});
|
|
|
|
const fetchData = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.report2Id(id.value))
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
myData.value.report2Id = data.report2Id ?? "1";
|
|
myData.value.name = data.name ?? "";
|
|
myData.value.edu = data.edu ?? "";
|
|
myData.value.salary = data.salary ?? 0;
|
|
myData.value.salary2 = data.salary2 ?? 0;
|
|
myData.value.salary3 = data.salary3 ?? 0;
|
|
myData.value.goverment = data.goverment ?? "";
|
|
myData.value.agency = data.agency ?? "";
|
|
myData.value.posiNum = data.posiNum ?? "";
|
|
myData.value.posiManage = data.posiManage ?? "";
|
|
myData.value.sideManage = data.sideManage ?? "";
|
|
myData.value.posiWork = data.posiWork ?? "";
|
|
myData.value.sideWork = data.sideWork ?? "";
|
|
myData.value.category = data.category ?? "";
|
|
myData.value.level = data.level ?? "";
|
|
await updateGoverment(data.goverment2);
|
|
myData.value.goverment2 =
|
|
data.goverment2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.goverment2;
|
|
myData.value.agency2 =
|
|
data.agency2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.agency2;
|
|
myData.value.posiNum2 =
|
|
data.posiNum2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.posiNum2;
|
|
myData.value.posiManage2 =
|
|
data.posiManage2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.posiManage2;
|
|
myData.value.sideManage2 =
|
|
data.sideManage2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.sideManage2;
|
|
myData.value.posiWork2 =
|
|
data.posiWork2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.posiWork2;
|
|
myData.value.sideWork2 =
|
|
data.sideWork2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.sideWork2;
|
|
myData.value.category2 =
|
|
data.category2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.category2;
|
|
myData.value.level2 =
|
|
data.level2 == "00000000-0000-0000-0000-000000000000"
|
|
? ""
|
|
: data.level2;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const checkSave = async () => {
|
|
if (myForm.value !== null) {
|
|
myForm.value.validate().then(async (success) => {
|
|
if (success) {
|
|
await saveData();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const saveData = async () => {
|
|
// console.log(myData.value);
|
|
showLoader();
|
|
const body: RequestReport2 = {
|
|
organizationShortNameId: myData.value.goverment2,
|
|
organizationOrganizationId: myData.value.agency2,
|
|
positionNumId: myData.value.posiNum2,
|
|
positionTypeId: myData.value.category2,
|
|
positionExecutiveId: myData.value.posiManage2,
|
|
positionExecutiveSideId: myData.value.sideManage2,
|
|
positionPathId: myData.value.posiWork2,
|
|
positionPathSideId: myData.value.sideWork2,
|
|
positionLevelId: myData.value.level2,
|
|
status: null,
|
|
};
|
|
await http
|
|
.put(config.API.report2Id(myData.value.report2Id), body)
|
|
.then((res) => {
|
|
success($q, "แก้ไขข้อมูลสำเร็จ");
|
|
clickBack();
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const clickBack = () => {
|
|
router.push({ name: "manageReport2" });
|
|
};
|
|
|
|
//รหัสส่วนราชการ
|
|
const fetchGoverment = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.organizationShortName)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
// data.map((r: any) => {
|
|
// option.push({
|
|
// id: r.id.toString(),
|
|
// name: r.governmentCode.toString(),
|
|
// agencyCode: r.agencyCode.toString(),
|
|
// shortName: r.name.toString(),
|
|
// });
|
|
// });
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id.toString(),
|
|
name: r.governmentCode.toString(),
|
|
note: r.name.toString(),
|
|
});
|
|
});
|
|
govermentOP.value = option;
|
|
govermentOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
const updateGoverment = async (id: string) => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.getPositionMasterPositionNumberId(id))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
myData.value.agency2 = "";
|
|
myData.value.posiNum2 = "";
|
|
myData.value.posiManage2 = "";
|
|
myData.value.sideManage2 = "";
|
|
myData.value.posiWork2 = "";
|
|
myData.value.sideWork2 = "";
|
|
myData.value.category2 = "";
|
|
myData.value.level2 = "";
|
|
|
|
let option1: DataOption[] = [];
|
|
data.organizationOrganizations.map((r: DataOption) => {
|
|
option1.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
if (option1.length == 1) {
|
|
myData.value.agency2 = option1[0].id;
|
|
}
|
|
agencyOP.value = option1;
|
|
agencyOPfilter.value = option1;
|
|
let option2: DataOption[] = [];
|
|
data.positionNumbers.map((r: DataOption) => {
|
|
option2.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
if (option2.length == 1) {
|
|
myData.value.posiNum2 = option2[0].id;
|
|
}
|
|
posiNumOP.value = option2;
|
|
posiNumOPfilter.value = option2;
|
|
let option3: DataOption[] = [];
|
|
data.positionExecutives.map((r: DataOption) => {
|
|
option3.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
if (option3.length == 1) {
|
|
myData.value.posiManage2 = option3[0].id;
|
|
}
|
|
posiManageOP.value = option3;
|
|
posiManageOPfilter.value = option3;
|
|
let option4: DataOption[] = [];
|
|
data.positionExecutiveSides.map((r: DataOption) => {
|
|
option4.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
if (option4.length == 1) {
|
|
myData.value.sideManage2 = option4[0].id;
|
|
}
|
|
sideManageOP.value = option4;
|
|
sideManageOPfilter.value = option4;
|
|
let option5: DataOption[] = [];
|
|
data.positionPaths.map((r: DataOption) => {
|
|
option5.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
if (option5.length == 1) {
|
|
myData.value.posiWork2 = option5[0].id;
|
|
}
|
|
posiWorkOP.value = option5;
|
|
posiWorkOPfilter.value = option5;
|
|
let option6: DataOption[] = [];
|
|
data.positionTypes.map((r: DataOption) => {
|
|
option6.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
if (option6.length == 1) {
|
|
myData.value.category2 = option6[0].id;
|
|
}
|
|
categoryOP.value = option6;
|
|
categoryOPfilter.value = option6;
|
|
let option7: DataOption[] = [];
|
|
data.positionPathSides.map((r: DataOption) => {
|
|
option7.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
if (option7.length == 1) {
|
|
myData.value.sideWork2 = option7[0].id;
|
|
}
|
|
sideWorkOP.value = option7;
|
|
sideWorkOPfilter.value = option7;
|
|
// let option8: DataOption[] = [];
|
|
// data.map((r: DataOption) => {
|
|
// option8.push({ id: r.id.toString(), name: r.name.toString() });
|
|
// });
|
|
// if(option8.length == 1){
|
|
// myData.value.level2 = option8[0].id
|
|
// }
|
|
// levelOP.value = option8;
|
|
// levelOPfilter.value = option8;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
// //ตำแหน่งเลขที่
|
|
const fetchPositionNum = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.getPositionMasterPositionNumber)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: DataOption) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
posiNumOP.value = option;
|
|
posiNumOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
//ตำแหน่งประเภท
|
|
const fetchCategory = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.positionType)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: DataOption) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
categoryOP.value = option;
|
|
categoryOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
//ตำแหน่งทางการบริหาร
|
|
const fetchPositionManage = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.positionExecutive)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: DataOption) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
posiManageOP.value = option;
|
|
posiManageOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
//ด้านทางบริหาร
|
|
const fetchSideManage = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.positionExecutiveSide)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: DataOption) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
sideManageOP.value = option;
|
|
sideManageOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
//ตำแหน่งในสายงาน
|
|
const fetchPositionWork = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.positionPath)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: DataOption) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
posiWorkOP.value = option;
|
|
posiWorkOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
//ด้าน/สาขา
|
|
const fetchSideWork = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.positionSide)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: DataOption) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
sideWorkOP.value = option;
|
|
sideWorkOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
//ระดับตำแหน่ง
|
|
const fetchLevel = async () => {
|
|
// showLoader();
|
|
await http
|
|
.get(config.API.positionLevel)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: DataOption) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
levelOP.value = option;
|
|
levelOPfilter.value = option;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
});
|
|
};
|
|
|
|
const filterSelector = (val: any, update: Function, filtername: string) => {
|
|
switch (filtername) {
|
|
case "1":
|
|
update(() => {
|
|
govermentOP.value = govermentOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
case "2":
|
|
update(() => {
|
|
agencyOP.value = agencyOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "3":
|
|
update(() => {
|
|
posiNumOP.value = posiNumOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "4":
|
|
//ตำแหน่งประเภท
|
|
update(() => {
|
|
categoryOP.value = categoryOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "5":
|
|
//ตำแหน่งทางการบริหาร
|
|
update(() => {
|
|
posiManageOP.value = posiManageOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "6":
|
|
//ด้านทางบริหาร
|
|
update(() => {
|
|
sideManageOP.value = sideManageOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "7":
|
|
//ตำแหน่งในสายงาน
|
|
update(() => {
|
|
posiWorkOP.value = posiWorkOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
case "8":
|
|
update(() => {
|
|
sideWorkOP.value = sideWorkOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "9":
|
|
update(() => {
|
|
levelOP.value = levelOPfilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
</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>
|