hrms-mgt/src/components/information/SalaryEmployeeTemp.vue
2023-08-04 10:04:59 +07:00

2044 lines
78 KiB
Vue

<!-- card ตำแหน/าจาง -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ตำแหน่ง/ค่าจ้าง"
icon="mdi-cash"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="
col.name == 'positionSalaryAmount' ||
col.name == 'mouthSalaryAmount' ||
col.name == 'amount'
"
class="table_ellipsis"
>
{{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 60vw; max-width: 80vw">
<q-form ref="myForm">
<DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-5 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input
outlined
dense
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-tree
v-if="edit"
:nodes="nodesTree"
dense
node-key="id"
v-model:selected="agencyId"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
default-expand-all
/>
<q-tree
v-else
:nodes="nodesTree"
dense
node-key="id"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
default-expand-all
>
<template v-slot:default-header="prop">
<div class="row items-center">
<div
class="text-primary"
v-if="selected == prop.node.id"
>
{{ prop.node.label }}
</div>
<div v-else>
{{ prop.node.label }}
</div>
</div>
</template>
</q-tree>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-7">
<q-card class="fit q-pa-sm">
<q-scroll-area visible style="height: 60vh">
<div class="row col-12 q-col-gutter-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[
(val:string) =>
!!val ||
`${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
]"
:label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNoEmployee"
:label="`${'ตำแหน่งเลขที่'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
autogrow
/>
</div> -->
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="employeePositionId"
:rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
:label="`${'ตำแหน่ง'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="employeePositionOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="employeePositionSideId"
:label="`${'ด้านของตำแหน่ง'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="employeePositionSideOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
) "
/>
</div>
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="employeeLevelId"
:label="`${'ระดับ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="employeeLevelOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
) "
/>
</div> -->
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="employeeGroupId"
:label="`${'กลุ่มงาน'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="employeeGroupOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
) "
/>
</div>
<!-- <div class="col-xs-12">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="agencyId"
:label="`${'สังกัด'}`"
@update:model-value="(value:string) => selectAgency(value)"
emit-value
map-options
option-label="name"
:options="agencyOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
) "
/>
</div> -->
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="amount"
:label="`${'ค่าจ้าง'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<!-- <div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionSalaryAmount"
:label="`${'เงินประจำตำแหน่ง'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="mouthSalaryAmount"
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div> -->
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="salaryClass"
:label="`${'ตำแหน่ง (รายละเอียด)'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
autogrow
>
</q-input>
</div> -->
<div class="row col-xs-12 col-sm-12 col-md-12">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refSelected"
:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRowRef"
option-label="name"
:options="refOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
) "
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="salaryRef"
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
type="textarea"
hide-bottom-space
/>
</div>
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(refCommandDate)"
:rules="[
(val:string) =>
!!val || `${'กรุณาเลือกเลขที่คำสั่งลงวันที่'}`,
]"
hide-bottom-space
:label="`${'เลขที่คำสั่งลงวันที่'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div> -->
</div>
</q-scroll-area>
</q-card>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="
col.name == 'positionSalaryAmount' ||
col.name == 'mouthSalaryAmount' ||
col.name == 'amount'
"
class="table_ellipsis"
>
{{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useComponentProfileDataStore } from "@/components/information/store/store";
import { useCounterMixin } from "@/stores/mixin";
import ProfileTable from "@/components/information/Table.vue";
import DialogHeader from "@/components/information/DialogHeader.vue";
import DialogFooter from "@/components/information/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsEmployee,
DataPropsEmployee,
} from "@/components/information/interface/request/Salary";
import type { ResponseObjectEmployee } from "@/components/information/interface/response/Salary";
import type {
DataOption,
treeTab,
} from "@/components/information/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
});
const $q = useQuasar();
const store = useComponentProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
dialogMessage,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
const amount = ref<number | null>(null);
const positionSalaryAmount = ref<number | null>(null);
const mouthSalaryAmount = ref<number | null>(null);
const search = ref<string>("");
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
const refCommandNo = ref<any>();
const posNoId = ref<string>("");
const posNoEmployee = ref<string>("");
const posNoOptions = ref<DataOption[]>([]);
const posNoOptionsFilter = ref<DataOption[]>([]);
const employeePositionId = ref<string>("");
const employeePositionOptions = ref<DataOption[]>([]);
const employeePositionOptionsFilter = ref<DataOption[]>([]);
const employeePositionSideId = ref<string>("");
const employeePositionSideOptions = ref<DataOption[]>([]);
const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
const employeeLevelId = ref<string>("");
const employeeLevelOptions = ref<DataOption[]>([]);
const employeeLevelOptionsFilter = ref<DataOption[]>([]);
const employeeGroupId = ref<string>("");
const employeeGroupOptions = ref<DataOption[]>([]);
const employeeGroupOptionsFilter = ref<DataOption[]>([]);
const agencyId = ref<string>("");
const agencyOptions = ref<DataOption[]>([]);
const agencyOptionsFilter = ref<DataOption[]>([]);
const refSelected = ref<DataOption | null>(null);
const refOptions = ref<DataOption[]>([
{
id: "17",
name: "**************** ข้าราชการสามัญ **********************",
disable: true,
},
{
id: "18",
name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "19",
name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "20",
name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "21",
name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "0",
name: "**************** ครู **********************",
disable: true,
},
{
id: "1",
name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "2",
name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{ id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
{
id: "4",
name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
},
{
id: "5",
name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
},
{
id: "6",
name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "7",
name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "8",
name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
},
{
id: "9",
name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "10",
name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "11",
name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "12",
name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "13",
name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "14",
name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "15",
name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{ id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
{
id: "21",
name: "**************** ลูกจ้าง **********************",
disable: true,
},
{
id: "22",
name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "23",
name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "24",
name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "25",
name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "26",
name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "27",
name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "28",
name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{ id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
{
id: "30",
name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "31",
name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
},
{
id: "32",
name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
},
{
id: "33",
name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
]);
const refOptionsFilter = ref<DataOption[]>([
{
id: "17",
name: "**************** ข้าราชการสามัญ **********************",
disable: true,
},
{
id: "18",
name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "19",
name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "20",
name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "0",
name: "**************** ครู **********************",
disable: true,
},
{
id: "1",
name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "2",
name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{ id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
{
id: "4",
name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
},
{
id: "5",
name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
},
{
id: "6",
name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "7",
name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "8",
name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
},
{
id: "9",
name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "10",
name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "11",
name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "12",
name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "13",
name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "14",
name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "15",
name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{ id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
{
id: "21",
name: "**************** ลูกจ้าง **********************",
disable: true,
},
{
id: "22",
name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "23",
name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "24",
name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "25",
name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "26",
name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "27",
name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "28",
name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{ id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
{
id: "30",
name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
{
id: "31",
name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
},
{
id: "32",
name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
},
{
id: "33",
name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
},
]);
const salaryClass = ref<string>();
const salaryRef = ref<string>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const rows = ref<ResponseObjectEmployee[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.salary.columns.length == 0
? (visibleColumns.value = [
"date",
"amount",
"positionSalaryAmount",
"mouthSalaryAmount",
"oc",
"positionEmployeePosition",
"posNo",
"positionEmployeePositionSide",
"positionEmployeeLevel",
"positionEmployeeGroup",
// "salaryClass",
"salaryRef",
"refCommandNo",
])
: (visibleColumns.value = profileData.salary.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "date",
align: "left",
label: "วัน เดือน ปี จ้างและแต่งตั้ง",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "amount",
align: "left",
label: "ค่าจ้าง",
sortable: true,
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "positionSalaryAmount",
// align: "left",
// label: "เงินประจำตำแหน่ง",
// sortable: true,
// field: "positionSalaryAmount",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "mouthSalaryAmount",
// align: "left",
// label: "เงินค่าตอบแทนรายเดือน",
// sortable: true,
// field: "mouthSalaryAmount",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "positionEmployeePosition",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionEmployeePosition",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "posNo",
// align: "left",
// label: "ตำแหน่งเลขที่",
// sortable: true,
// field: "posNo",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "positionEmployeePositionSide",
align: "left",
label: "ด้านของตำแหน่ง",
sortable: true,
field: "positionEmployeePositionSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "positionEmployeeLevel",
// align: "left",
// label: "ระดับ",
// sortable: true,
// field: "positionEmployeeLevel",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "positionEmployeeGroup",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "positionEmployeeGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "salaryClass",
// align: "left",
// label: "ตำแหน่ง (รายละเอียด)",
// sortable: true,
// field: "salaryClass",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "salaryRef",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "salaryRef",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "date",
align: "left",
label: "วัน เดือน ปี จ้างและแต่งตั้ง",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "amount",
align: "left",
label: "ค่าจ้าง",
sortable: true,
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "positionSalaryAmount",
// align: "left",
// label: "เงินประจำตำแหน่ง",
// sortable: true,
// field: "positionSalaryAmount",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "mouthSalaryAmount",
// align: "left",
// label: "เงินค่าตอบแทนรายเดือน",
// sortable: true,
// field: "mouthSalaryAmount",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "positionEmployeePosition",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionEmployeePosition",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "posNo",
// align: "left",
// label: "ตำแหน่งเลขที่",
// sortable: true,
// field: "posNo",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "positionEmployeePositionSide",
align: "left",
label: "ด้านของตำแหน่ง",
sortable: true,
field: "positionEmployeePositionSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "positionEmployeeLevel",
// align: "left",
// label: "ระดับ",
// sortable: true,
// field: "positionEmployeeLevel",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "positionEmployeeGroup",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "positionEmployeeGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "salaryClass",
// align: "left",
// label: "ตำแหน่ง (รายละเอียด)",
// sortable: true,
// field: "salaryClass",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "salaryRef",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "salaryRef",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
const visibleColumnsHistory = ref<String[]>([
"date",
"amount",
"positionSalaryAmount",
"mouthSalaryAmount",
"oc",
"positionEmployeePosition",
"posNo",
"positionEmployeePositionSide",
"positionEmployeeLevel",
"positionEmployeeGroup",
// "salaryClass",
"salaryRef",
"refCommandNo",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("salary", count);
});
onMounted(async () => {
await fetchData();
await fetchDataSelector();
});
const fetchDataSelector = async () => {
showLoader();
await fetchEmployeePosition();
await fetchEmployeePositionSide();
await fetchEmployeeLevel();
await fetchEmployeeGroup();
await fetchAgency();
await nodeTree();
hideLoader();
};
// ตำแหน่ง
const fetchEmployeePosition = async () => {
await http
.get(config.API.positionEmployeePosition)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
employeePositionOptions.value = option;
employeePositionOptionsFilter.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
// ด้านของตำแหน่ง
const fetchEmployeePositionSide = async () => {
await http
.get(config.API.positionEmployeePositionSide)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
employeePositionSideOptions.value = option;
employeePositionSideOptionsFilter.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
// ระดับ
const fetchEmployeeLevel = async () => {
await http
.get(config.API.positionEmployeeLevel)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
employeeLevelOptions.value = option;
employeeLevelOptionsFilter.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
// กลุ่มงาน
const fetchEmployeeGroup = async () => {
await http
.get(config.API.positionEmployeeGroup)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
employeeGroupOptions.value = option;
employeeGroupOptionsFilter.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
// สังกัด
const fetchAgency = async () => {
await http
.get(config.API.organizationRoot)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.label.toString() });
});
agencyOptions.value = option;
agencyOptionsFilter.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
const nodeTree = async () => {
showLoader();
await http
.get(config.API.profileOrganizRoot)
.then((res: any) => {
const data = res.data.result;
nodesTree.value = data;
if (data.length > 0) {
expanded.value = [data[0].id];
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const selectAgency = (val: string) => {
fetchPositionNumber(val);
clickEditRow();
};
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "posNo":
update(() => {
posNoOptions.value = posNoOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeePosition":
update(() => {
employeePositionOptions.value =
employeePositionOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeePositionSide":
update(() => {
employeePositionSideOptions.value =
employeePositionSideOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeLevel":
update(() => {
employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeGroup":
update(() => {
employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "agency":
update(() => {
agencyOptions.value = agencyOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "ref":
update(() => {
refOptions.value = refOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileSalaryEmployeeId(profileId.value))
.then((res) => {
const data = res.data.result;
// console.log(data);
rows.value = [];
data.map((e: ResponseObjectEmployee) => {
rows.value.push({
id: e.id,
date: new Date(e.date),
amount: e.amount,
positionSalaryAmount: e.positionSalaryAmount,
mouthSalaryAmount: e.mouthSalaryAmount,
oc: e.oc,
ocId: e.ocId,
posNo: e.posNo,
posNoId: e.posNoId,
posNoEmployee: e.posNoEmployee,
positionEmployeeGroup: e.positionEmployeeGroup,
positionEmployeeGroupId: e.positionEmployeeGroupId,
positionEmployeeLevel: e.positionEmployeeLevel,
positionEmployeeLevelId: e.positionEmployeeLevelId,
positionEmployeePosition: e.positionEmployeePosition,
positionEmployeePositionId: e.positionEmployeePositionId,
positionEmployeePositionSide: e.positionEmployeePositionSide,
positionEmployeePositionSideId: e.positionEmployeePositionSideId,
salaryClass: e.salaryClass,
salaryRef: e.salaryRef,
refCommandNo: e.refCommandNo,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const fetchPositionNumber = async (id: string) => {
// showLoader();
if (id == null || id == "") return;
await http
.get(config.API.getPositionNumberIdByOcId(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
posNoOptions.value = option;
posNoOptionsFilter.value = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = async () => {
const row = rows.value[rowIndex.value];
date.value = row.date;
amount.value = row.amount;
positionSalaryAmount.value = row.positionSalaryAmount;
mouthSalaryAmount.value = row.mouthSalaryAmount;
selected.value = row.ocId;
// positionId.value = row.positionId;
// posNoId.value = row.posNoId;
// positionLineId.value = row.positionLineId;
// positionPathSideId.value = row.positionPathSideId;
// positionTypeId.value = row.positionTypeId;
// positionLevelId.value = row.positionLevelId;
// positionExecutiveId.value = row.positionExecutiveId;
// positionExecutiveSideId.value = row.positionExecutiveSideId;
posNoId.value = row.posNoId ?? "";
posNoEmployee.value = row.posNoEmployee ?? "";
employeePositionId.value = row.positionEmployeePositionId ?? "";
employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
employeeLevelId.value = row.positionEmployeeLevelId ?? "";
employeeGroupId.value = row.positionEmployeeGroupId ?? "";
agencyId.value = row.ocId ?? "";
salaryClass.value = row.salaryClass ?? "";
salaryRef.value = row.salaryRef ?? "";
refCommandNo.value = row.refCommandNo ?? "";
id.value = row.id;
await fetchPositionNumber(row.ocId ?? "");
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
// console.log(rowIndex.value);
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* gen ตำแหน่ง (รายละเอียด)
*/
const templateDetail = async () => {
// salaryClass.value = "";
// if (ocId.value != "") {
// salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
// }
// const positionF = positionOptions.value.filter(
// (r: DataOption) => r.id == positionId.value
// );
// if (positionF.length > 0) {
// salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
// }
// const posNoF = posNoOptions.value.filter(
// (r: DataOption) => r.id == posNoId.value
// );
// if (posNoF.length > 0) {
// salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
// }
// const positionLineF = positionLineOptions.value.filter(
// (r: DataOption) => r.id == positionLineId.value
// );
// if (positionLineF.length > 0) {
// salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
// }
// const positionPathSideF = positionSideOptions.value.filter(
// (r: DataOption) => r.id == positionPathSideId.value
// );
// if (positionPathSideF.length > 0) {
// salaryClass.value =
// salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
// }
// const positionTypeF = positionTypeOptions.value.filter(
// (r: DataOption) => r.id == positionTypeId.value
// );
// if (positionTypeF.length > 0) {
// salaryClass.value =
// salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
// }
// const positionLevelF = positionLevelOptions.value.filter(
// (r: DataOption) => r.id == positionLevelId.value
// );
// if (positionLevelF.length > 0) {
// salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
// }
// const positionExecutiveF = positionExecutiveOptions.value.filter(
// (r: DataOption) => r.id == positionExecutiveId.value
// );
// if (positionExecutiveF.length > 0) {
// salaryClass.value =
// salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
// }
};
/**
* กดบันทึกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileSalaryEmployeeId(profileId.value), {
amount: amount.value,
date: dateToISO(date.value),
positionSalaryAmount: positionSalaryAmount.value,
mouthSalaryAmount: mouthSalaryAmount.value,
ocId: agencyId.value,
// posNoId: posNoId.value,
posNoEmployee: posNoEmployee.value,
positionEmployeeGroupId: employeeGroupId.value,
positionEmployeeLevelId: employeeLevelId.value,
positionEmployeePositionId: employeePositionId.value,
positionEmployeePositionSideId: employeePositionSideId.value,
salaryClass: salaryClass.value,
salaryRef: salaryRef.value,
refCommandNo: refCommandNo.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileSalaryEmployeeId(id.value), {
amount: amount.value,
date: dateToISO(date.value),
positionSalaryAmount: positionSalaryAmount.value,
mouthSalaryAmount: mouthSalaryAmount.value,
ocId: agencyId.value,
// posNoId: posNoId.value,
posNoEmployee: posNoEmployee.value,
positionEmployeeGroupId: employeeGroupId.value,
positionEmployeeLevelId: employeeLevelId.value,
positionEmployeePositionId: employeePositionId.value,
positionEmployeePositionSideId: employeePositionSideId.value,
salaryClass: salaryClass.value,
salaryRef: salaryRef.value,
refCommandNo: refCommandNo.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบข้อมูล
*/
const fetchDataDelete = async () => {
showLoader();
await http
.delete(config.API.profileSalaryId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* dialog ลบข้อมูล
*/
const clickDelete = async () => {
dialogMessage(
$q,
"ลบข้อมูล",
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
"delete",
"ยืนยัน",
"red",
async () => await fetchDataDelete(),
async () => await fetchData(),
false
);
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
dialogMessage(
$q,
"ข้อมูลมีการแก้ไข",
"ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
"info",
"ยืนยัน",
"primary",
async () => {
modal.value = false;
next.value = false;
previous.value = false;
},
undefined,
false
);
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataPropsEmployee) => {
// console.log(props.row);
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
date.value = props.row.date;
amount.value = props.row.amount;
positionSalaryAmount.value = props.row.positionSalaryAmount;
mouthSalaryAmount.value = props.row.mouthSalaryAmount;
posNoId.value = props.row.posNoId ?? "";
posNoEmployee.value = props.row.posNoEmployee ?? "";
employeePositionId.value = props.row.positionEmployeePositionId ?? "";
employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
agencyId.value = props.row.ocId ?? "";
// refSelected.value = props.row
salaryClass.value = props.row.salaryClass ?? "";
salaryRef.value = props.row.salaryRef ?? "";
refCommandNo.value = props.row.refCommandNo ?? "";
id.value = props.row.id;
await fetchPositionNumber(props.row.ocId ?? "");
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
date.value = new Date();
amount.value = null;
positionSalaryAmount.value = null;
mouthSalaryAmount.value = null;
posNoId.value = "";
posNoEmployee.value = "";
employeePositionId.value = "";
employeePositionSideId.value = "";
employeeLevelId.value = "";
employeeGroupId.value = "";
agencyId.value = "";
agencyOptions.value = [];
salaryClass.value = "";
refSelected.value = null;
salaryRef.value = "";
refCommandNo.value = "";
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
dialogMessage(
$q,
"ข้อมูลมีการแก้ไข",
"ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
"info",
"ยืนยัน",
"primary",
async () => {
edit.value = false;
await checkRowPage();
await getData();
},
undefined,
false
);
} else {
edit.value = false;
await checkRowPage();
}
};
const onSelected = async (id: string) => {
await fetchPositionNumber(id);
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRowRef = () => {
editRow.value = true;
salaryRef.value = refSelected.value?.name;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsEmployee) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileSalaryHisId(row.id))
.then((res) => {
const data = res.data.result;
// console.log("clickHistory", data);
rowsHistory.value = [];
data.map((e: ResponseObjectEmployee) => {
rowsHistory.value.push({
id: e.id,
date: new Date(e.date),
amount: e.amount,
positionSalaryAmount: e.positionSalaryAmount,
mouthSalaryAmount: e.mouthSalaryAmount,
oc: e.oc,
ocId: e.ocId,
posNo: e.posNo,
posNoId: e.posNoId,
posNoEmployee: e.posNoEmployee,
positionEmployeeGroup: e.positionEmployeeGroup,
positionEmployeeGroupId: e.positionEmployeeGroupId,
positionEmployeeLevel: e.positionEmployeeLevel,
positionEmployeeLevelId: e.positionEmployeeLevelId,
positionEmployeePosition: e.positionEmployeePosition,
positionEmployeePositionId: e.positionEmployeePositionId,
positionEmployeePositionSide: e.positionEmployeePositionSide,
positionEmployeePositionSideId: e.positionEmployeePositionSideId,
salaryClass: e.salaryClass,
salaryRef: e.salaryRef,
refCommandNo: e.refCommandNo,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
const validateData = async () => {
checkValidate.value = true;
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const resetFilter = () => {};
</script>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>