hrms-mgt/src/modules/04_registry/components/Salary.vue

2170 lines
82 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 auto-width>
<q-btn
dense
size="12px"
flat
round
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
:disable="props.rowIndex + 1 == 1"
@click="onClicksortPos(props)"
icon="mdi-arrow-up-bold"
>
<!-- <q-tooltip>เลอนลำดบข</q-tooltip> -->
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
:color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
:disable="rows.length == props.rowIndex + 1"
@click="onClicksortPos(props, false)"
icon="mdi-arrow-down-bold"
>
<!-- <q-tooltip>เลอนลำดบลง</q-tooltip> -->
</q-btn>
</q-td>
<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="
props.row.salaryStatus !== 'DEATH' &&
(col.name == 'positionSalaryAmount' ||
col.name == 'mouthSalaryAmount' ||
col.name == 'amount')
"
class="table_ellipsis"
>
{{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
</div>
<div
v-else-if="
props.row.salaryStatus === 'DEATH' && col.name == 'position'
"
class="table_ellipsis"
>
ถึงแก่กรรม
</div>
<div
v-else-if="
props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'
"
class="table_ellipsis"
>
-
</div>
<div v-else class="table_ellipsis">
{{ col.value ? 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-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent full-width>
<q-card>
<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-12">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<div class="row col-12 q-col-gutter-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="inputDate"
label="วัน/เดือน/ปี"
mask="##/##/####"
dense
:error="dayChecked"
error-message="กรุณากรอก วัน/เดือน/ปี"
:rules="[
(val) => !!val || `${'กรุณากรอก วัน/เดือน/ปี'}`,
]"
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="formDataSalary.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
ref="dateRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(formDataSalary.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
ref="posNoRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="formDataSalary.posNo"
hide-bottom-space
:label="`${'เลขที่ตำแหน่ง'}`"
:rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
@update:modelValue="clickEditRow"
>
</q-input>
</div>
<div class="row col-xs-12 col-sm-12 col-md-12">
<q-select
ref="templatePosRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="formDataSalary.templatePos"
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
@update:modelValue="updatePos"
option-label="name"
:options="opPos"
option-value="name"
hide-bottom-space
emit-value
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
)"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
ref="positionRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="formDataSalary.position"
:label="`${'ตำแหน่ง'}`"
@update:modelValue="clickEditRow"
type="textarea"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select
ref="typePositionRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="formDataSalary.typePosition"
:label="`${'ตำแหน่งประเภท'}`"
emit-value
map-options
option-label="name"
:options="opType"
option-value="name"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'typepos'
)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select
ref="levelPositionRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="formDataSalary.levelPosition"
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ หรือหากกรอกเอง กรุณากด enter'}`]"
:label="`${'ระดับ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="opLevel"
@input-value="inputPositionLevel"
@new-value="createValue"
@blur.stop="inputPositionLevelBlur"
option-value="name"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'levelpos'
)"
/>
</div>
<div class="col-xs-6 col-sm- col-md-6">
<CurrencyInput
lazy-rules
v-model="formDataSalary.salary"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินเดือน'}`"
:rules="[(val: number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<CurrencyInput
lazy-rules
v-model="formDataSalary.salaryPos"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินประจำตำแหน่ง'}`"
/>
</div>
<div class="row col-xs-12 col-sm-12 col-md-12">
<q-select
ref="templateDocRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="formDataSalary.templateDoc"
:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRowRef"
option-label="name"
:options="opDoc"
option-value="name"
emit-value
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
)"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
ref="docRef"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="formDataSalary.doc"
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
type="textarea"
hide-bottom-space
:rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
/>
</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"
:coppy="coppyForm"
:name="'salary'"
/>
</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, reactive } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import CurrencyInput from "@/components/CurruncyInput.vue";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
RequestItemsHistory,
} from "@/modules/04_registry/interface/request/Salary";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Salary";
import type {
DataOption,
treeTab,
OptionType,
OptionLevel,
FormSalaryNew,
FormSalaryNewRef,
} from "@/modules/04_registry/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import { useSalaryDataStore } from "@/modules/04_registry/stores/salary";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const optionStore = useSalaryDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
dialogConfirm,
convertDate,
convertDateDisplay,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
const amount = ref<number | undefined>(0);
// const salary = ref<number | null>(null);
const positionSalaryAmount = ref<number | undefined>(0);
const mouthSalaryAmount = ref<number | undefined>(0);
const ocId = ref<string>();
// เพิ่มฟิลด์ใหม่
const orgName = ref<string>();
const agencyName = ref<string>();
const cLevel = ref<string>();
const levelOpsMain = ref<DataOption[]>([]);
const typeOpsMain = ref<DataOption[]>([]);
const dataLevel = ref<any>();
const positionName = ref<string>();
const positionLineName = ref<string>();
const positionPathSideName = ref<string>();
const positionTypeId = ref<string>();
const positionLevelId = ref<string>();
const positionExecutiveName = ref<string>();
const positionExecutiveSideId = ref<string>();
const posNoId = ref<string>();
const posNo = ref<string>();
const refCommandNo = ref<string>();
const refCommandDate = ref<Date>(new Date());
const ocOptions = ref<DataOption[]>([]);
const positionOptions = ref<DataOption[]>([]);
const positionLineOptions = ref<DataOption[]>([]);
const positionSideOptions = ref<DataOption[]>([]);
const positionTypeOptions = ref<DataOption[]>([]);
const positionLevelOptions = ref<DataOption[]>([]);
const positionExecutiveOptions = ref<DataOption[]>([]);
const positionExecutiveSideOptions = ref<DataOption[]>([]);
const posNoOptions = ref<DataOption[]>([]);
const ocOptionsFilter = ref<DataOption[]>([]);
const positionOptionsFilter = ref<DataOption[]>([]);
const positionLineOptionsFilter = ref<DataOption[]>([]);
const positionSideOptionsFilter = ref<DataOption[]>([]);
const positionTypeOptionsFilter = ref<DataOption[]>([]);
const positionLevelOptionsFilter = ref<DataOption[]>([]);
const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
const posNoOptionsFilter = ref<DataOption[]>([]);
const search = ref<string>("");
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
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<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsHistory[]>([]); //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<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.salary.columns.length == 0
? (visibleColumns.value = [
"date",
"amount",
"positionSalaryAmount",
"mouthSalaryAmount",
"oc",
"position",
"posNo",
"positionLine",
"positionPathSide",
"postionTypeName",
"positionLevelName",
"positionExecutive",
// "positionExecutiveSide",
// "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: "orgName",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "orgName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "agencyName",
align: "left",
label: "ส่วนราชการ",
sortable: true,
field: "agencyName",
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: "positionLine",
// align: "left",
// label: "สายงาน",
// sortable: true,
// field: "positionLine",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionPathSide",
// align: "left",
// label: "ด้าน/สาขา",
// sortable: true,
// field: "positionPathSide",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "postionTypeName",
align: "left",
label: "ตำแหน่งประเภท",
sortable: true,
field: "postionTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevelName",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
// {
// name: "positionExecutive",
// align: "left",
// label: "ตำแหน่งทางการบริหาร",
// sortable: true,
// field: "positionExecutive",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "positionExecutiveSide",
// align: "left",
// label: "ด้านทางการบริหาร",
// sortable: true,
// field: "positionExecutiveSide",
// 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: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
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: "positionLine",
align: "left",
label: "สายงาน",
sortable: true,
field: "positionLine",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionPathSide",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "positionPathSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionType",
align: "left",
label: "ตำแหน่งประเภท",
sortable: true,
field: "positionType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutive",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "positionExecutive",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutiveSide",
align: "left",
label: "ด้านทางการบริหาร",
sortable: true,
field: "positionExecutiveSide",
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",
"orgName",
"agencyName",
"posNo",
"positionLine",
"positionPathSide",
"positionType",
"positionLevel",
"positionExecutive",
"positionExecutiveSide",
"salaryClass",
"salaryRef",
"refCommandNo",
"createdFullName",
"createdAt",
]);
const inputDate = ref<string>("");
const dayChecked = ref<boolean>(false);
watch(
() => inputDate.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayChecked.value = false;
formDataSalary.date = new Date(dateVal.value);
} else {
dayChecked.value = true;
inputDate.value = "";
}
}
}
);
/****************************************** FormDataNew **********************************************/
const formDataSalary = reactive<FormSalaryNew>({
date: new Date(),
posNo: "",
templatePos: "",
position: "",
typePosition: "",
levelPosition: "",
salary: 0,
salaryPos: 0,
templateDoc: "",
doc: "",
});
const tempPositionLevelInput = ref("");
function inputPositionLevel(v: string) {
if (!!v) tempPositionLevelInput.value = v;
}
function inputPositionLevelBlur() {
if (
!tempPositionLevelInput.value ||
tempPositionLevelInput.value === formDataSalary.levelPosition
) {
tempPositionLevelInput.value = "";
return;
}
if (
!optionStore.optipnLevel.some(
(v) => v.name === tempPositionLevelInput.value
)
) {
createValue(tempPositionLevelInput.value);
}
formDataSalary.levelPosition = tempPositionLevelInput.value;
tempPositionLevelInput.value = "";
}
const opPos = ref<any>([]);
const opType = ref<any>([]);
const opLevel = ref<any>([]);
const opDoc = ref<any>([]);
/** formRef */
const dateRef = ref<object | null>(null);
const posNoRef = ref<object | null>(null);
const templatePosRef = ref<object | null>(null);
const positionRef = ref<object | null>(null);
const levelPositionRef = ref<object | null>(null);
const salaryNewRef = ref<object | null>(null);
const templateDocRef = ref<object | null>(null);
const docRef = ref<object | null>(null);
const formDataSalaryRef: FormSalaryNewRef = {
date: dateRef,
posNo: posNoRef,
templatePos: templatePosRef,
position: positionRef,
levelPosition: levelPositionRef,
salary: salaryNewRef,
templateDoc: templateDocRef,
doc: docRef,
};
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("salary", count);
});
onMounted(async () => {
// await fetchPosition();
// await getPosition();
// await nodeTree();
await fetchData();
});
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "1":
update(() => {
posNoOptions.value = posNoOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "2":
update(() => {
positionOptions.value = positionOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "3":
update(() => {
positionSideOptions.value = positionSideOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "4":
update(() => {
positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "5":
update(() => {
positionLineOptions.value = positionLineOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "6":
update(() => {
positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "7":
update(() => {
positionExecutiveOptions.value =
positionExecutiveOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "8":
update(() => {
refOptions.value = refOptionsFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "pos":
update(() => {
opPos.value = optionStore.optionPos.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "typepos":
update(() => {
opType.value = optionStore.optiontype.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "levelpos":
update(() => {
opLevel.value = optionStore.optipnLevel.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "doc":
update(() => {
opDoc.value = optionStore.optionDoc.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileSalaryId(profileId.value))
.then((res) => {
let data = res.data.result;
console.log(data);
rows.value = [];
data.map((e: any) => {
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,
position: e.position ?? "-",
positionName: e.positionName ?? "-",
positionId:
e.positionId !== "00000000-0000-0000-0000-000000000000"
? e.positionId
: "",
posNo: e.posNo ?? "-",
posNoId:
e.posNoId !== "00000000-0000-0000-0000-000000000000"
? e.posNoId
: "",
positionLine: e.positionLine ?? "-",
positionLineName: e.positionLineName ?? "-",
positionLineId: e.positionLineId ?? "-",
positionPathSide: e.positionPathSide ?? "-",
positionPathSideId: e.positionPathSideId ?? "-",
positionPathSideName: e.positionPathSideName ?? "-",
positionType: e.positionType ?? "-",
positionTypeId: e.positionTypeId ?? "-",
positionLevelId: e.positionLevelId ?? "-",
positionLevel: e.positionLevel ?? "-",
positionExecutive: e.positionExecutive ?? "-",
positionExecutiveId: e.positionExecutiveId ?? "-",
positionExecutiveName: e.positionExecutiveName ?? "-",
positionExecutiveSide: e.positionExecutiveSide ?? "-",
positionExecutiveSideId: e.positionExecutiveSideId ?? "-",
salaryClass: e.salaryClass ?? "-",
salaryRef: e.salaryRef ?? "-",
salaryStatus: e.salaryStatus ?? "-",
refCommandNo: e.refCommandNo ?? "-",
createdFullName: e.createdFullName ?? "-",
orgName: e.orgName ?? "-",
agencyName: e.agencyName ?? "-",
cLevel: e.cLevel ?? "-",
createdAt: new Date(e.createdAt),
postionTypeName: e.postionTypeName ?? "-",
positionLevelName: e.positionLevelName ?? "-",
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
store.isLoad++;
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
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;
// // await onSelected(row.ocId);
// selected.value = row.ocId;
// positionName.value = row.positionName;
// posNoId.value = row.posNoId;
// posNo.value = row.posNo;
// positionLineName.value = row.positionLineName;
// positionPathSideName.value = row.positionPathSideName;
// positionTypeId.value = row.positionTypeId;
// positionLevelId.value = row.positionLevelId;
// positionExecutiveName.value = row.positionExecutiveName;
// positionExecutiveSideId.value = row.positionExecutiveSideId;
// salaryClass.value = row.salaryClass;
// salaryRef.value = row.salaryRef;
// refCommandNo.value = row.refCommandNo;
id.value = row.id;
formDataSalary.date = row.date;
formDataSalary.posNo = row.posNo ?? "-";
formDataSalary.templatePos = "";
formDataSalary.position = row.positionName ?? "";
formDataSalary.typePosition = row.postionTypeName ?? "-";
formDataSalary.levelPosition = row.positionLevelName ?? "-";
formDataSalary.salary = row.amount ?? 0;
formDataSalary.salaryPos = row.positionSalaryAmount ?? 0;
formDataSalary.templateDoc = "";
formDataSalary.doc = row.salaryRef ?? "";
// await fetchPositionNumber(row.ocId);
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
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();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
dialogConfirm(
$q,
async () => {
await editData();
},
"ยืนยันการแก้ไขข้อมูล",
"ต้องการยืนยันการแก้ไขข้อมูลนี้หรือไม่ ?"
);
} else {
dialogConfirm(
$q,
async () => {
await saveData();
},
"ยืนยันการเพิ่มข้อมูล",
"ต้องการยืนยันการเพิ่มข้อมูลนี้หรือไม่ ?"
);
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileSalaryId(profileId.value), {
date: dateToISO(formDataSalary.date),
posNo: formDataSalary.posNo,
positionName: formDataSalary.position,
positionTypeName: formDataSalary.typePosition,
positionLevelName: formDataSalary.levelPosition,
amount: formDataSalary.salary,
positionSalaryAmount: formDataSalary.salaryPos,
salaryRef: formDataSalary.doc,
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileSalaryId(id.value), {
date: dateToISO(formDataSalary.date),
posNo: formDataSalary.posNo,
positionName: formDataSalary.position,
positionTypeName: formDataSalary.typePosition,
positionLevelName: formDataSalary.levelPosition,
amount: formDataSalary.salary,
positionSalaryAmount: formDataSalary.salaryPos,
salaryRef: formDataSalary.doc,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(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();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
id.value = props.row.id;
inputDate.value = formDataSalary.date.toString();
// console.log(props.row);
// date.value = props.row.date;
// amount.value = props.row.amount;
// positionSalaryAmount.value = props.row.positionSalaryAmount;
// mouthSalaryAmount.value = props.row.mouthSalaryAmount;
// await onSelected(props.row.ocId);
// selected.value = props.row.ocId;
// positionName.value = props.row.positionName;
// posNoId.value = props.row.posNoId;
// posNo.value = props.row.posNo;
// positionLineName.value = props.row.positionLineName;
// positionPathSideName.value = props.row.positionPathSideName;
// positionTypeId.value = props.row.positionTypeId;
// positionLevelId.value = props.row.positionLevelId;
// positionExecutiveName.value = props.row.positionExecutiveName;
// positionExecutiveSideId.value = props.row.positionExecutiveSideId;
// salaryClass.value = props.row.salaryClass;
// salaryRef.value = props.row.salaryRef;
// refCommandNo.value = props.row.refCommandNo;
// orgName.value = props.row.orgName;
// agencyName.value = props.row.agencyName;
// cLevel.value = props.row.cLevel;
inputDate.value = convertDateDisplay(props.row.date);
formDataSalary.date = props.row.date;
formDataSalary.posNo = props.row.posNo ?? "-";
formDataSalary.templatePos = "";
formDataSalary.position = props.row.positionName ?? "-";
formDataSalary.typePosition = props.row.postionTypeName ?? "-";
formDataSalary.levelPosition = props.row.positionLevelName ?? "-";
formDataSalary.salary = props.row.amount ?? 0;
formDataSalary.salaryPos = props.row.positionSalaryAmount ?? 0;
formDataSalary.templateDoc = "";
formDataSalary.doc = props.row.salaryRef ?? "-";
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
inputDate.value = "";
selected.value = "";
modalEdit.value = false;
modal.value = true;
edit.value = true;
// เพิ่มใหม่
orgName.value = "";
agencyName.value = "";
cLevel.value = "";
date.value = new Date();
amount.value = undefined;
positionSalaryAmount.value = undefined;
mouthSalaryAmount.value = undefined;
ocId.value = "";
positionName.value = "";
posNoId.value = "";
posNo.value = "";
positionLineName.value = "";
positionPathSideName.value = "";
positionTypeId.value = "";
positionLevelId.value = "";
positionExecutiveName.value = "";
positionExecutiveSideId.value = "";
salaryClass.value = "";
refSelected.value = null;
salaryRef.value = "";
refCommandNo.value = "";
formDataSalary.date = new Date();
formDataSalary.posNo = "";
formDataSalary.templatePos = "";
formDataSalary.position = "";
formDataSalary.typePosition = "";
formDataSalary.levelPosition = "";
formDataSalary.salary = 0;
formDataSalary.salaryPos = 0;
formDataSalary.templateDoc = "";
formDataSalary.doc = "";
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
function updateSelectType(val: string) {
editRow.value = true;
let optionPositionLevels: DataOption[] = [];
const listLevel = dataLevel.value.find((e: any) => e.id === val);
levelOpsMain.value = listLevel.posLevels.map((r: any) => {
optionPositionLevels.push({
id: r.id.toString(),
name: r.posLevelName.toString(),
});
});
positionLevelOptions.value = optionPositionLevels;
positionLevelOptionsFilter.value = optionPositionLevels;
positionLevelId.value = "";
}
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRowRef = (val: string) => {
editRow.value = true;
// salaryRef.value = refSelected.value?.name;
formDataSalary.doc = val;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
filterHistory.value = "";
showLoader();
await http
.get(config.API.profileSalaryHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: any) => {
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,
position: e.position ?? "_",
positionId: e.positionId,
positionName: e.positionName ?? "_",
posNo: e.posNo ?? "_",
posNoId: e.posNoId,
positionLine: e.positionLine ?? "_",
positionLineName: e.positionLineName ?? "_",
positionLineId: e.positionLineId ?? "_",
positionPathSide: e.positionPathSide ?? "_",
positionPathSideId: e.positionPathSideId ?? "_",
positionPathSideName: e.positionPathSideName ?? "_",
positionType: e.positionType ?? "_",
positionTypeId: e.positionTypeId ?? "_",
positionLevel: e.positionLevel ?? "_",
positionLevelId: e.positionLevelId ?? "_",
positionExecutive: e.positionExecutive ?? "_",
positionExecutiveId: e.positionExecutiveId ?? "_",
positionExecutiveName: e.positionExecutiveName ?? "_",
positionExecutiveSide: e.positionExecutiveSide ?? "_",
positionExecutiveSideId: e.positionExecutiveSideId ?? "_",
salaryClass: e.salaryClass ?? "_",
salaryStatus: e.salaryStatus ?? "_",
salaryRef: e.salaryRef ?? "_",
refCommandNo: e.refCommandNo ?? "_",
createdFullName: e.createdFullName ?? "_",
orgName: e.orgName ?? "_",
agencyName: e.agencyName ?? "_",
cLevel: e.cLevel ?? "_",
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
const validateData = async () => {
// await myForm.value.validate().then((result: boolean) => {
// if (result == false) {
// checkValidate.value = false;
// }
// });
const hasError = [];
checkValidate.value = true;
for (const key in formDataSalaryRef) {
if (Object.prototype.hasOwnProperty.call(formDataSalaryRef, key)) {
const property = formDataSalaryRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
formDataSalary.salary === 0 ? (formDataSalary.salary = undefined) : null;
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 = () => {};
function getPosition() {
http
.get(config.API.orgSalaryPosition)
.then((res) => {
const dataOp = res.data.result;
const dataLineOp = res.data.result;
let optionpositionpaths: DataOption[] = [];
let optionPositionLines: DataOption[] = [];
const usedIds = new Set();
const usedIdsLine = new Set();
dataOp.forEach((r: any) => {
const id = r.positionName.toString();
const name = r.positionName.toString();
if (!usedIds.has(id)) {
optionpositionpaths.push({
id: id,
name: name,
});
usedIds.add(id);
}
});
dataLineOp.forEach((r: any) => {
const id = r.positionField.toString();
const name = r.positionField.toString();
if (!usedIdsLine.has(id)) {
optionPositionLines.push({
id: id,
name: name,
});
usedIdsLine.add(id);
}
});
positionOptions.value = optionpositionpaths;
positionOptionsFilter.value = optionpositionpaths;
positionLineOptions.value = optionPositionLines;
positionLineOptionsFilter.value = optionPositionLines;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
store.isLoad++;
});
}
async function fetchType() {
showLoader();
await http
.get(config.API.orgPosType)
.then((res) => {
dataLevel.value = res.data.result;
let optionPositionTypes: DataOption[] = [];
typeOpsMain.value = res.data.result.map((e: OptionType) => ({
id: e.id,
name: e.posTypeName,
}));
positionTypeOptions.value = typeOpsMain.value;
res.data.result.map((r: any) => {
optionPositionTypes.push({
id: r.id.toString(),
name: r.posTypeName.toString(),
});
});
positionTypeOptions.value = optionPositionTypes;
positionTypeOptionsFilter.value = optionPositionTypes;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
if (positionTypeId.value) {
let optionPositionLevels: DataOption[] = [];
const listLevel = dataLevel.value.find(
(e: any) => e.id === positionTypeId.value
);
levelOpsMain.value = listLevel.posLevels.map((r: any) => {
optionPositionLevels.push({
id: r.id.toString(),
name: r.posLevelName.toString(),
});
});
positionLevelOptions.value = optionPositionLevels;
positionLevelOptionsFilter.value = optionPositionLevels;
}
});
}
watch(
() => modal.value,
() => {
if (modal.value == true) {
positionTypeOptions.value = [];
positionLevelOptions.value = [];
positionLevelOptionsFilter.value = [];
fetchType();
}
}
);
/**
* function จัดตำแหน่งเงินเดือน
* @param value ข้อมูล row
* @param up สถานะขึ้นลง
*/
async function onClicksortPos(value: any, up: boolean = true) {
if (up) {
await swapSalary("up", value.row.id);
} else {
await swapSalary("down", value.row.id);
}
}
/** ปรับรายการเงินเดือนขึ้น */
async function swapSalary(dierction: string, id: string) {
await http
.post(config.API.salarySwap(dierction, id))
.then(() => {
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
function updatePos(val: string) {
editRow.value = true;
formDataSalary.position = val;
}
function coppyForm() {
selected.value = "";
modalEdit.value = false;
modal.value = true;
edit.value = true;
formDataSalary.date = formDataSalary.date;
formDataSalary.posNo = formDataSalary.posNo;
formDataSalary.templatePos = formDataSalary.templatePos;
formDataSalary.position = formDataSalary.position;
formDataSalary.typePosition = formDataSalary.typePosition;
formDataSalary.levelPosition = formDataSalary.levelPosition;
formDataSalary.salary = formDataSalary.salary;
formDataSalary.salaryPos = formDataSalary.salaryPos;
formDataSalary.templateDoc = formDataSalary.templateDoc;
formDataSalary.doc = formDataSalary.doc;
}
function createValue(val: any, done?: any) {
if (val.length > 0) {
const maxId = optionStore.optipnLevel.reduce((max: any, item: any) => {
const itemId = typeof item.id === "number" ? item.id : parseInt(item.id);
return itemId > max ? itemId : max;
}, 0);
const newId = isNaN(maxId) ? 1 : maxId + 1;
const newObj = {
id: typeof val === "number" ? val : newId,
name: val,
};
if (!optionStore.optipnLevel.some((item: any) => item.id === newObj.id)) {
optionStore.optipnLevel.push(newObj);
}
done?.(newObj, "toggle");
}
}
</script>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>