1749 lines
61 KiB
Vue
1749 lines
61 KiB
Vue
<!-- =============================== -->
|
|
<!-- หน้า ผังโครงสร้างลูกจ้าง(Table) ของ โครงสร้างอัตรากำลัง -->
|
|
<!-- =============================== -->
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">
|
|
ผังโครงสร้างลูกจ้าง
|
|
</div>
|
|
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
|
<div>
|
|
<Table
|
|
:rows="rows"
|
|
:columns="columns"
|
|
:filter="filter"
|
|
:visible-columns="visibleColumns"
|
|
v-model:inputfilter="filter"
|
|
v-model:inputvisible="visibleColumns"
|
|
:pagination="initialPagination"
|
|
:nornmalData="true"
|
|
:add="clickAdd"
|
|
:paging="true"
|
|
:titleText="''"
|
|
>
|
|
<template #columns="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td
|
|
v-for="col in props.cols"
|
|
:key="col.name"
|
|
:props="props"
|
|
@click="selectData(props.row)"
|
|
>
|
|
<div class="table_ellipsis">
|
|
{{ col.value }}
|
|
</div>
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
dense
|
|
size="12px"
|
|
flat
|
|
round
|
|
color="red"
|
|
@click="clickDelete(props.row.id)"
|
|
icon="mdi-delete"
|
|
>
|
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</Table>
|
|
</div>
|
|
</q-card>
|
|
<!-- popup Edit window-->
|
|
<q-dialog v-model="modal" persistent>
|
|
<q-card style="min-width: 700px">
|
|
<q-form ref="myForm">
|
|
<DialogHeader
|
|
:tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}โครงสร้างและกรอบอัตรากำลัง`"
|
|
:close="clickClose"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section class="q-p-sm">
|
|
<div class="overScroll q-py-sm">
|
|
<div class="col-11 row q-col-gutter-xs">
|
|
<div class="col-12">
|
|
{{ "โครงสร้างหน่วยงาน" }}
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationOrganizationId"
|
|
:options="organizationOrganizationOption"
|
|
label="หน่วยงาน"
|
|
class="col-xs-12 col-sm-6 col-md-6"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '1')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationAgencyCode"
|
|
:options="organizationAgencyCodeOption"
|
|
label="รหัสหน่วยงาน"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '2')
|
|
"
|
|
option-label="agencyCode"
|
|
option-value="agencyCode"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสหน่วยงาน'}`]"
|
|
@update:model-value="(value:any) => updateAgencyCode(value)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationGovernmentCode"
|
|
:options="organizationGovernmentCodeOption"
|
|
label="รหัสส่วนราชการ"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '3')
|
|
"
|
|
option-label="governmentCode"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
|
|
@update:model-value="(value:any) => updateGovernmentCode(value)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
readonly
|
|
outlined
|
|
:modelValue="organizationShortName"
|
|
label="ชื่อย่อหน่วยงาน"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
dense
|
|
outlined
|
|
v-model="agency"
|
|
label="เลขที่หน่วยงาน"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
dense
|
|
outlined
|
|
v-model="government"
|
|
label="เลขที่ส่วนราชการ"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
dense
|
|
outlined
|
|
v-model="department"
|
|
label="เลขที่ฝ่าย/ส่วน"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
dense
|
|
outlined
|
|
v-model="pile"
|
|
label="เลขที่กอง"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationTypeId"
|
|
:options="organizationTypeOption"
|
|
label="ประเภทหน่วยงาน"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '6')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationLevelId"
|
|
:options="organizationLevelOption"
|
|
label="ระดับหน่วยงาน"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '7')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationAgencyId"
|
|
:options="organizationAgencyOption"
|
|
label="หน่วยงานต้นสังกัด"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '1')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationGovernmentAgencyId"
|
|
:options="organizationGovernmentAgencyOption"
|
|
label="ส่วนราชการต้นสังกัด"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '1')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
dense
|
|
outlined
|
|
v-model="organizationOrder"
|
|
type="number"
|
|
label="ลำดับผังโครงสร้าง"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationTelExternalId"
|
|
:options="organizationTelExternalOption"
|
|
label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '8')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationTelInternalId"
|
|
:options="organizationTelInternalOption"
|
|
label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '9')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="organizationFaxId"
|
|
:options="organizationFaxOption"
|
|
label="หมายเลขโทรสาร"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '10')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="organizationUserNote"
|
|
:label="`${'หน้าที่รับผิดชอบ'}`"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
{{ "โครงสร้างตำแหน่ง" }}
|
|
</div>
|
|
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionTypeId"
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
|
|
:label="`${'ตำแหน่งประเภท'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionTypeOption"
|
|
option-value="id"
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '11')
|
|
"
|
|
/>
|
|
</div> -->
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionEmployeeLineId"
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกสายงาน'}`]"
|
|
:label="`${'สายงาน'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionEmployeeLineOption"
|
|
option-value="id"
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '12')
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionEmployeePathId"
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
|
|
:label="`${'ตำแหน่ง'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionEmployeePathOption"
|
|
option-value="id"
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '13')
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
multiple
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionEmployeePositionSidesId"
|
|
:label="`${'ด้าน/สาขา'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionEmployeePathSideOption"
|
|
option-value="id"
|
|
use-input
|
|
use-chips
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '14')
|
|
"
|
|
color="primary"
|
|
/>
|
|
<!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
|
|
</div>
|
|
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionExecutiveId"
|
|
:label="`${'ตำแหน่งทางการบริหาร'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionExecutiveOption"
|
|
option-value="id"
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '15')
|
|
"
|
|
color="primary"
|
|
/>
|
|
</div> -->
|
|
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
multiple
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionExecutiveSideId"
|
|
:label="`${'ด้านทางการบริหาร'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionExecutiveSideOption"
|
|
option-value="id"
|
|
use-input
|
|
use-chips
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '16')
|
|
"
|
|
color="primary"
|
|
/>
|
|
</div> -->
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
multiple
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionEmployeeLevelId"
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกระดับ'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกระดับ'}`]"
|
|
:label="`${'ระดับ'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionEmployeeLevelOption"
|
|
option-value="id"
|
|
use-input
|
|
use-chips
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '17')
|
|
"
|
|
color="primary"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<selector
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionEmployeeStatusId"
|
|
:label="`${'สถานภาพของตำแหน่ง'}`"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="positionEmployeeStatusOption"
|
|
option-value="id"
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '18')
|
|
"
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกสถานภาพของตำแหน่ง'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="posNo"
|
|
:label="`${'เลขที่ตำแหน่ง'}`"
|
|
:rules="[(val:any) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="qualification"
|
|
:label="`${'คุณวุฒิ'}`"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionCondition"
|
|
:label="`${'เงื่อนไขตำแหน่ง'}`"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="positionMasterUserNote"
|
|
:label="`${'หมายเหตุ'}`"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-6 text-grey-9">
|
|
<q-checkbox v-model="isDirector" label="หัวหน้า" />
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
|
|
<q-toggle v-model="isActive" dense size="34px" color="positive">
|
|
ปกติ
|
|
</q-toggle>
|
|
<q-toggle
|
|
v-model="isCondition"
|
|
dense
|
|
size="34px"
|
|
color="positive"
|
|
class="q-pl-md"
|
|
>
|
|
ติดเงื่อนไข
|
|
</q-toggle>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="conditionNote"
|
|
:label="`${'รายละเอียดเงื่อนไข'}`"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<DialogFooter
|
|
:save="clickSave"
|
|
:validate="validateData"
|
|
v-model:editvisible="edit"
|
|
v-model:modalEdit="modalEdit"
|
|
/>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useOrganizationalDataStore } from "@/modules/02_organizational/store";
|
|
import Table from "@/modules/03_recruiting/components/Table.vue";
|
|
import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
|
|
import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
|
|
import { useQuasar, QForm } from "quasar";
|
|
import type {
|
|
DataOption,
|
|
GovermentOption,
|
|
} from "@/modules/02_organizational/interface/index/Main";
|
|
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useDataStore } from "@/stores/data";
|
|
import type { QTableProps } from "quasar";
|
|
|
|
const dataStore = useDataStore();
|
|
const { loaderPage } = dataStore;
|
|
|
|
const $q = useQuasar(); // show dialog
|
|
const mixin = useCounterMixin();
|
|
const { date2Thai, success, modalError, messageError } = mixin;
|
|
const store = useOrganizationalDataStore();
|
|
const { organizationalData, changeOrganizationalColumns } = store;
|
|
const initialPagination = ref<Pagination>({
|
|
rowsPerPage: 0,
|
|
});
|
|
const id = ref<string>("");
|
|
|
|
const organizationOrganizationId = ref<string>();
|
|
const organizationAgencyCode = ref<string>();
|
|
const organizationGovernmentCode = ref<string>();
|
|
const organizationTypeId = ref<string>();
|
|
const organizationLevelId = ref<string>();
|
|
const organizationAgencyId = ref<string>();
|
|
const organizationGovernmentAgencyId = ref<string>();
|
|
const organizationTelExternalId = ref<string>();
|
|
const organizationTelInternalId = ref<string>();
|
|
const organizationFaxId = ref<string>();
|
|
// const positionTypeId = ref<string>();
|
|
const positionEmployeeLineId = ref<string>();
|
|
const positionEmployeePathId = ref<string>();
|
|
const positionEmployeePositionSidesId = ref<string[]>([]);
|
|
// const positionExecutiveId = ref<string>();
|
|
// const positionExecutiveSideId = ref<string[]>([]);
|
|
const positionEmployeeLevelId = ref<string[]>([]);
|
|
const positionEmployeeStatusId = ref<string>();
|
|
|
|
const organizationShortName = ref<string>();
|
|
const agency = ref<string>();
|
|
const government = ref<string>();
|
|
const department = ref<string>();
|
|
const pile = ref<string>();
|
|
const organizationUserNote = ref<string>();
|
|
const organizationOrder = ref<string>();
|
|
const qualification = ref<string>();
|
|
const positionCondition = ref<string>();
|
|
const positionMasterUserNote = ref<string>();
|
|
const isDirector = ref<boolean>(false);
|
|
const isActive = ref<boolean>(false);
|
|
const isCondition = ref<boolean>(false);
|
|
const conditionNote = ref<string>();
|
|
const posNo = ref<string>();
|
|
|
|
const organizationOrganizationOption = ref<DataOption[]>([]);
|
|
const organizationAgencyCodeOption = ref<GovermentOption[]>([]);
|
|
const organizationGovernmentCodeOption = ref<GovermentOption[]>([]);
|
|
const organizationTypeOption = ref<DataOption[]>([]);
|
|
const organizationLevelOption = ref<DataOption[]>([]);
|
|
const organizationAgencyOption = ref<DataOption[]>([]);
|
|
const organizationGovernmentAgencyOption = ref<DataOption[]>([]);
|
|
const organizationTelExternalOption = ref<DataOption[]>([]);
|
|
const organizationTelInternalOption = ref<DataOption[]>([]);
|
|
const organizationFaxOption = ref<DataOption[]>([]);
|
|
// const positionEmployeeTypeOption = ref<DataOption[]>([]);
|
|
const positionEmployeeLineOption = ref<DataOption[]>([]);
|
|
const positionEmployeePathOption = ref<DataOption[]>([]);
|
|
const positionEmployeePathSideOption = ref<DataOption[]>([]);
|
|
// const positionEmployeeExecutiveOption = ref<DataOption[]>([]);
|
|
// const positionEmployeeExecutiveSideOption = ref<DataOption[]>([]);
|
|
const positionEmployeeLevelOption = ref<DataOption[]>([]);
|
|
const positionEmployeeStatusOption = ref<DataOption[]>([]);
|
|
|
|
const organizationOrganizationFilter = ref<DataOption[]>([]);
|
|
const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
|
|
const organizationGovernmentCodeFilter = ref<GovermentOption[]>([]);
|
|
const organizationTypeFilter = ref<DataOption[]>([]);
|
|
const organizationLevelFilter = ref<DataOption[]>([]);
|
|
const organizationAgencyFilter = ref<DataOption[]>([]);
|
|
const organizationGovernmentAgencyFilter = ref<DataOption[]>([]);
|
|
const organizationTelExternalFilter = ref<DataOption[]>([]);
|
|
const organizationTelInternalFilter = ref<DataOption[]>([]);
|
|
const organizationFaxFilter = ref<DataOption[]>([]);
|
|
// const positionEmployeeTypeFilter = ref<DataOption[]>([]);
|
|
const positionEmployeeLineFilter = ref<DataOption[]>([]);
|
|
const positionEmployeePathFilter = ref<DataOption[]>([]);
|
|
const positionEmployeePathSideFilter = ref<DataOption[]>([]);
|
|
// const positionEmployeeExecutiveFilter = ref<DataOption[]>([]);
|
|
// const positionEmployeeExecutiveSideFilter = ref<DataOption[]>([]);
|
|
const positionEmployeeLevelFilter = ref<DataOption[]>([]);
|
|
const positionEmployeeStatusFilter = ref<DataOption[]>([]);
|
|
|
|
const myForm = ref<QForm | null>(null); //form data input
|
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
|
const modal = ref<boolean>(false); //modal add detail
|
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
|
const statusCode = ref<number>();
|
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
|
|
|
const rows = ref<any>([]);
|
|
const filter = ref<string>(""); //search data table
|
|
|
|
const visibleColumns = ref<String[]>([
|
|
"organizationOrganization",
|
|
"organizationAgencyCode",
|
|
"organizationGovernmentAgencyCode",
|
|
"organizationShortName",
|
|
"organizationType",
|
|
"organizationLevel",
|
|
"positionEmployeeLine",
|
|
"positionEmployeePosition",
|
|
"posNo",
|
|
]);
|
|
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "organizationOrganization",
|
|
align: "left",
|
|
label: "หน่วยงาน",
|
|
sortable: true,
|
|
field: "organizationOrganization",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "organizationAgencyCode",
|
|
align: "left",
|
|
label: "รหัสหน่วยงาน",
|
|
sortable: true,
|
|
field: "organizationAgencyCode",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "organizationGovernmentAgencyCode",
|
|
align: "left",
|
|
label: "รหัสส่วนราชการ",
|
|
sortable: true,
|
|
field: "organizationGovernmentAgencyCode",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "organizationShortName",
|
|
align: "left",
|
|
label: "ชื่อย่อหน่วยงาน",
|
|
sortable: true,
|
|
field: "organizationShortName",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "organizationType",
|
|
align: "left",
|
|
label: "ประเภทหน่วยงาน",
|
|
sortable: true,
|
|
field: "organizationType",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "organizationLevel",
|
|
align: "left",
|
|
label: "ระดับหน่วยงาน",
|
|
sortable: true,
|
|
field: "organizationLevel",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "positionEmployeeLine",
|
|
align: "left",
|
|
label: "สายงาน",
|
|
sortable: true,
|
|
field: "positionEmployeeLine",
|
|
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" }),
|
|
},
|
|
]);
|
|
|
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
await changeOrganizationalColumns("mappingPosition", count);
|
|
});
|
|
|
|
onMounted(async () => {
|
|
loaderPage(false);
|
|
await fetchOrganization();
|
|
await fetchOrganizationAgency();
|
|
await fetchOrganizationGovernmentAgency();
|
|
await fetchOrganizationAgencyCode();
|
|
await fetchPosition();
|
|
await fetchData();
|
|
});
|
|
|
|
/**
|
|
* ฟังก์ชัน get data ล่าสุด
|
|
*/
|
|
const fetchData = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.organizationEmployee)
|
|
.then((res) => {
|
|
let data = res.data.result;
|
|
rows.value = [];
|
|
data.map((r: any) => {
|
|
rows.value.push({
|
|
agency: r.agency,
|
|
conditionNote: r.conditionNote,
|
|
department: r.department,
|
|
government: r.government,
|
|
id: r.id,
|
|
isActive: r.isActive,
|
|
isCondition: r.isCondition,
|
|
isDirector: r.isDirector,
|
|
organizationAgencyId:
|
|
r.organizationAgencyId == "00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationAgencyId,
|
|
organizationFaxId:
|
|
r.organizationFaxId == "00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationFaxId,
|
|
organizationFax: r.organizationFax,
|
|
organizationGovernmentAgencyId:
|
|
r.organizationGovernmentAgencyId ==
|
|
"00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationGovernmentAgencyId,
|
|
organizationLevelId:
|
|
r.organizationLevelId == "00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationLevelId,
|
|
organizationLevel: r.organizationLevel,
|
|
organizationOrder: r.organizationOrder,
|
|
organizationOrganizationId:
|
|
r.organizationOrganizationId ==
|
|
"00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationOrganizationId,
|
|
organizationOrganization: r.organizationOrganization,
|
|
|
|
organizationGovernmentAgencyCode: r.organizationGovernmentAgencyCode,
|
|
organizationAgencyCode: r.organizationAgencyCode,
|
|
positionEmployeeLevelId: r.positionEmployeeLevels.map(
|
|
(val: any) => val.id
|
|
),
|
|
positionEmployeePositionSidesId: r.positionEmployeePositionSides.map(
|
|
(val: any) => val.id
|
|
),
|
|
organizationShortNameId:
|
|
r.organizationShortNameId == "00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationShortNameId,
|
|
organizationShortName: r.organizationShortName,
|
|
organizationTelExternalId:
|
|
r.organizationTelExternalId ==
|
|
"00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationTelExternalId,
|
|
organizationTelExternal: r.organizationTelExternal,
|
|
organizationTelInternalId:
|
|
r.organizationTelInternalId ==
|
|
"00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationTelInternalId,
|
|
organizationTelInternal: r.organizationTelInternal,
|
|
organizationTypeId:
|
|
r.organizationTypeId == "00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.organizationTypeId,
|
|
organizationType: r.organizationType,
|
|
organizationUserNote: r.organizationUserNote,
|
|
pile: r.pile,
|
|
posNo: r.posNo,
|
|
positionCondition: r.positionCondition,
|
|
positionEmployeeLineId:
|
|
r.positionEmployeeLineId == "00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.positionEmployeeLineId,
|
|
positionEmployeeLine: r.positionEmployeeLine,
|
|
positionEmployeePathId:
|
|
r.positionEmployeePositionId ==
|
|
"00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.positionEmployeePositionId,
|
|
positionEmployeePosition: r.positionEmployeePosition,
|
|
positionEmployeeStatusId:
|
|
r.positionEmployeeStatusId == "00000000-0000-0000-0000-000000000000"
|
|
? null
|
|
: r.positionEmployeeStatusId,
|
|
positionEmployeeStatus: r.positionEmployeeStatus,
|
|
positionMasterUserNote: r.positionMasterUserNote,
|
|
qualification: r.qualification,
|
|
});
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* get รายการ โครงสร้าง
|
|
*/
|
|
const fetchOrganization = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.organizationMain)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
if (data != null) {
|
|
let OriOption: DataOption[] = [];
|
|
data.organizationOrganizations.map((r: any) => {
|
|
OriOption.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationOrganizationOption.value = OriOption;
|
|
organizationOrganizationFilter.value = OriOption;
|
|
|
|
let TypeOption: DataOption[] = [];
|
|
data.organizationTypes.map((r: any) => {
|
|
TypeOption.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationTypeOption.value = TypeOption;
|
|
organizationTypeFilter.value = TypeOption;
|
|
|
|
let LevelOption: DataOption[] = [];
|
|
data.organizationLevels.map((r: any) => {
|
|
LevelOption.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationLevelOption.value = LevelOption;
|
|
organizationLevelFilter.value = LevelOption;
|
|
|
|
let TelInternalOption: DataOption[] = [];
|
|
data.organizationTelInternals.map((r: any) => {
|
|
TelInternalOption.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
organizationTelInternalOption.value = TelInternalOption;
|
|
organizationTelInternalFilter.value = TelInternalOption;
|
|
|
|
let TelExternalOption: DataOption[] = [];
|
|
data.organizationTelExternals.map((r: any) => {
|
|
TelExternalOption.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
organizationTelExternalOption.value = TelExternalOption;
|
|
organizationTelExternalFilter.value = TelExternalOption;
|
|
|
|
let FaxOption: DataOption[] = [];
|
|
data.organizationFaxs.map((r: any) => {
|
|
FaxOption.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationFaxOption.value = FaxOption;
|
|
organizationFaxFilter.value = FaxOption;
|
|
}
|
|
})
|
|
.catch((e: any) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* หน่วยงานต้นสังกัด
|
|
*/
|
|
const fetchOrganizationAgency = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let AgencyOption: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
AgencyOption.push({
|
|
id: r.organizationId.toString(),
|
|
name: r.organizationName.toString(),
|
|
});
|
|
});
|
|
organizationAgencyOption.value = AgencyOption;
|
|
organizationAgencyFilter.value = AgencyOption;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* ส่วนราชการต้นสังกัด
|
|
*/
|
|
const fetchOrganizationGovernmentAgency = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let GovernmentAgencyOption: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
GovernmentAgencyOption.push({
|
|
id: r.organizationId.toString(),
|
|
name: r.organizationName.toString(),
|
|
});
|
|
});
|
|
organizationGovernmentAgencyOption.value = GovernmentAgencyOption;
|
|
organizationGovernmentAgencyFilter.value = GovernmentAgencyOption;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* รหัสหน่วยงาน
|
|
*/
|
|
const fetchOrganizationAgencyCode = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.organizationCode)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: GovermentOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id.toString(),
|
|
governmentCode: r.governmentCode.toString(),
|
|
agencyCode: r.agencyCode.toString(),
|
|
shortName: r.name.toString(),
|
|
});
|
|
});
|
|
organizationAgencyCodeOption.value = option;
|
|
organizationAgencyCodeFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false);
|
|
});
|
|
};
|
|
|
|
const fetchAgencyCode = async (val: string) => {
|
|
let option: GovermentOption[] = [];
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.organizationAgencyCode(val))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id.toString(),
|
|
governmentCode: r.governmentCode.toString(),
|
|
agencyCode: r.agencyCode.toString(),
|
|
shortName: r.name.toString(),
|
|
});
|
|
});
|
|
organizationGovernmentCodeOption.value = option;
|
|
organizationGovernmentCodeFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false);
|
|
});
|
|
return option;
|
|
};
|
|
|
|
/**
|
|
* get รายการ ตำแหน่ง
|
|
*/
|
|
const fetchPosition = async () => {
|
|
loaderPage(true);
|
|
await http
|
|
.get(config.API.positionEmployee)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
|
|
let optionpositionpaths: DataOption[] = [];
|
|
data.positionEmployeePositions.map((r: any) => {
|
|
optionpositionpaths.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
note: r.note.toString(),
|
|
});
|
|
});
|
|
positionEmployeePathOption.value = optionpositionpaths;
|
|
positionEmployeePathFilter.value = optionpositionpaths;
|
|
|
|
let optionPositionPathSides: DataOption[] = [];
|
|
data.positionEmployeePositionSides.map((r: any) => {
|
|
optionPositionPathSides.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
note: r.note.toString(),
|
|
});
|
|
});
|
|
positionEmployeePathSideOption.value = optionPositionPathSides;
|
|
positionEmployeePathSideFilter.value = optionPositionPathSides;
|
|
|
|
// let optionPositionTypes: DataOption[] = [];
|
|
// data.positionTypes.map((r: any) => {
|
|
// optionPositionTypes.push({
|
|
// id: r.id.toString(),
|
|
// name: r.name.toString(),
|
|
// });
|
|
// });
|
|
// positionTypeOption.value = optionPositionTypes;
|
|
// positionTypeFilter.value = optionPositionTypes;
|
|
|
|
let optionPositionLines: DataOption[] = [];
|
|
data.positionEmployeeLines.map((r: any) => {
|
|
optionPositionLines.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
positionEmployeeLineOption.value = optionPositionLines;
|
|
positionEmployeeLineFilter.value = optionPositionLines;
|
|
|
|
// let optionPositionExecutives: DataOption[] = [];
|
|
// data.positionExecutives.map((r: any) => {
|
|
// optionPositionExecutives.push({
|
|
// id: r.id.toString(),
|
|
// name: r.name.toString(),
|
|
// });
|
|
// });
|
|
// positionExecutiveOption.value = optionPositionExecutives;
|
|
// positionExecutiveFilter.value = optionPositionExecutives;
|
|
|
|
// let optionPositionExecutiveSides: DataOption[] = [];
|
|
// data.positionExecutiveSides.map((r: any) => {
|
|
// optionPositionExecutiveSides.push({
|
|
// id: r.id.toString(),
|
|
// name: r.name.toString(),
|
|
// });
|
|
// });
|
|
// positionExecutiveSideOption.value = optionPositionExecutiveSides;
|
|
// positionExecutiveSideFilter.value = optionPositionExecutiveSides;
|
|
|
|
let optionPositionLevels: DataOption[] = [];
|
|
data.positionEmployeeLevels.map((r: any) => {
|
|
optionPositionLevels.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
positionEmployeeLevelOption.value = optionPositionLevels;
|
|
positionEmployeeLevelFilter.value = optionPositionLevels;
|
|
|
|
let optionPositionStatuss: DataOption[] = [];
|
|
data.positionEmployeeStatuss.map((r: any) => {
|
|
optionPositionStatuss.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
positionEmployeeStatusOption.value = optionPositionStatuss;
|
|
positionEmployeeStatusFilter.value = optionPositionStatuss;
|
|
})
|
|
.catch((e: any) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* กดบันทึกใน dialog
|
|
*/
|
|
const clickSave = async () => {
|
|
myForm.value!.validate().then(async (result: boolean) => {
|
|
if (result) {
|
|
if (modalEdit.value) {
|
|
await editData();
|
|
} else {
|
|
await saveData();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* บันทึกเพิ่มข้อมูล
|
|
*/
|
|
const saveData = async () => {
|
|
modal.value = false;
|
|
loaderPage(true);
|
|
await http
|
|
.post(config.API.organizationEmployee, {
|
|
organizationOrganizationId: organizationOrganizationId.value,
|
|
organizationShortNameId: organizationGovernmentCode.value,
|
|
organizationTypeId: organizationTypeId.value,
|
|
organizationLevelId: organizationLevelId.value,
|
|
organizationAgencyId: organizationAgencyId.value,
|
|
organizationGovernmentAgencyId: organizationGovernmentAgencyId.value,
|
|
organizationTelExternalId: organizationTelExternalId.value,
|
|
organizationTelInternalId: organizationTelInternalId.value,
|
|
organizationFaxId: organizationFaxId.value,
|
|
agency: agency.value,
|
|
government: government.value,
|
|
department: department.value,
|
|
pile: pile.value,
|
|
organizationUserNote: organizationUserNote.value,
|
|
organizationOrder: organizationOrder.value,
|
|
// positionTypeId: positionTypeId.value,
|
|
positionEmployeeLineId: positionEmployeeLineId.value,
|
|
positionEmployeePositionId: positionEmployeePathId.value,
|
|
positionEmployeePositionSidesId: positionEmployeePositionSidesId.value,
|
|
// positionExecutiveId: positionExecutiveId.value,
|
|
// positionExecutiveSideId: positionExecutiveSideId.value,
|
|
positionEmployeeLevelsId: positionEmployeeLevelId.value,
|
|
positionEmployeeStatusId: positionEmployeeStatusId.value,
|
|
posNo: posNo.value,
|
|
qualification: qualification.value,
|
|
positionCondition: positionCondition.value,
|
|
positionMasterUserNote: positionMasterUserNote.value,
|
|
isDirector: isDirector.value,
|
|
isActive: isActive.value,
|
|
isCondition: isCondition.value,
|
|
conditionNote: conditionNote.value,
|
|
})
|
|
.then((res) => {
|
|
success($q, "บันทึกข้อมูลร่างสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
modal.value = false;
|
|
await fetchData();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* บันทึกแก้ไขข้อมูล
|
|
*/
|
|
const editData = async () => {
|
|
modal.value = false;
|
|
loaderPage(true);
|
|
await http
|
|
.put(config.API.organizationEmployeeId(id.value), {
|
|
organizationOrganizationId: organizationOrganizationId.value,
|
|
organizationShortNameId: organizationGovernmentCode.value,
|
|
organizationTypeId: organizationTypeId.value,
|
|
organizationLevelId: organizationLevelId.value,
|
|
organizationAgencyId: organizationAgencyId.value,
|
|
organizationGovernmentAgencyId: organizationGovernmentAgencyId.value,
|
|
organizationTelExternalId: organizationTelExternalId.value,
|
|
organizationTelInternalId: organizationTelInternalId.value,
|
|
organizationFaxId: organizationFaxId.value,
|
|
agency: agency.value,
|
|
government: government.value,
|
|
department: department.value,
|
|
pile: pile.value,
|
|
organizationUserNote: organizationUserNote.value,
|
|
organizationOrder: organizationOrder.value,
|
|
// positionTypeId: positionTypeId.value,
|
|
positionEmployeeLineId: positionEmployeeLineId.value,
|
|
positionEmployeePositionId: positionEmployeePathId.value,
|
|
positionEmployeePositionSidesId: positionEmployeePositionSidesId.value,
|
|
// positionExecutiveId: positionExecutiveId.value,
|
|
// positionExecutiveSideId: positionExecutiveSideId.value,
|
|
positionEmployeeLevelsId: positionEmployeeLevelId.value,
|
|
positionEmployeeStatusId: positionEmployeeStatusId.value,
|
|
posNo: posNo.value,
|
|
qualification: qualification.value,
|
|
positionCondition: positionCondition.value,
|
|
positionMasterUserNote: positionMasterUserNote.value,
|
|
isDirector: isDirector.value,
|
|
isActive: isActive.value,
|
|
isCondition: isCondition.value,
|
|
conditionNote: conditionNote.value,
|
|
})
|
|
.then((res) => {
|
|
success($q, "บันทึกข้อมูลร่างสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
edit.value = false;
|
|
await fetchData();
|
|
});
|
|
};
|
|
|
|
const clickDelete = (id: string) => {
|
|
$q.dialog({
|
|
title: "ยืนยันการลบข้อมูล",
|
|
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
|
cancel: {
|
|
flat: true,
|
|
color: "negative",
|
|
},
|
|
persistent: true,
|
|
})
|
|
.onOk(async () => {
|
|
await deleteData(id);
|
|
})
|
|
.onCancel(() => {})
|
|
.onDismiss(() => {});
|
|
};
|
|
|
|
const deleteData = async (id: string) => {
|
|
loaderPage(true);
|
|
await http
|
|
.delete(config.API.organizationEmployeeId(id))
|
|
.then((res) => {
|
|
success($q, "ลบข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
loaderPage(false);
|
|
await fetchData();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* กดปิด dialog
|
|
*/
|
|
const clickClose = async () => {
|
|
if (editRow.value == true) {
|
|
$q.dialog({
|
|
title: `ข้อมูลมีการแก้ไข`,
|
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
|
cancel: "ยกเลิก",
|
|
ok: "ยืนยัน",
|
|
persistent: true,
|
|
}).onOk(async () => {
|
|
modal.value = false;
|
|
});
|
|
} else {
|
|
modal.value = false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* กดเลือกข้อมูลที่จะแก้ไข
|
|
* @param props ค่า props ใน row ที่เลือก
|
|
*/
|
|
const selectData = async (props: any) => {
|
|
editRow.value = false;
|
|
modalEdit.value = true;
|
|
modal.value = true;
|
|
edit.value = true;
|
|
id.value = props.id;
|
|
organizationOrganizationId.value = props.organizationOrganizationId;
|
|
organizationAgencyCode.value = props.organizationAgencyCode;
|
|
await updateAgencyCode(props.organizationAgencyCode);
|
|
organizationGovernmentCode.value = props.organizationShortNameId;
|
|
await updateGovernmentCode(props.organizationShortNameId);
|
|
organizationTypeId.value = props.organizationTypeId;
|
|
organizationLevelId.value = props.organizationLevelId;
|
|
organizationAgencyId.value = props.organizationAgencyId;
|
|
organizationGovernmentAgencyId.value = props.organizationGovernmentAgencyId;
|
|
organizationTelExternalId.value = props.organizationTelExternalId;
|
|
organizationTelInternalId.value = props.organizationTelInternalId;
|
|
organizationFaxId.value = props.organizationFaxId;
|
|
organizationShortName.value = props.organizationShortName;
|
|
agency.value = props.agency;
|
|
government.value = props.government;
|
|
department.value = props.department;
|
|
pile.value = props.pile;
|
|
organizationUserNote.value = props.organizationUserNote;
|
|
organizationOrder.value = props.organizationOrder;
|
|
|
|
// positionTypeId.value = props.positionTypeId;
|
|
positionEmployeeLineId.value = props.positionEmployeeLineId;
|
|
positionEmployeePathId.value = props.positionEmployeePathId;
|
|
positionEmployeePositionSidesId.value = props.positionEmployeePositionSidesId;
|
|
// positionExecutiveId.value = props.positionExecutiveId;
|
|
// positionExecutiveSideId.value = props.positionExecutiveSideId;
|
|
positionEmployeeLevelId.value = props.positionEmployeeLevelId;
|
|
positionEmployeeStatusId.value = props.positionEmployeeStatusId;
|
|
posNo.value = props.posNo;
|
|
qualification.value = props.qualification;
|
|
positionCondition.value = props.positionCondition;
|
|
positionMasterUserNote.value = props.positionMasterUserNote;
|
|
isDirector.value = props.isDirector;
|
|
isActive.value = props.isActive;
|
|
isCondition.value = props.isCondition;
|
|
conditionNote.value = props.conditionNote;
|
|
id.value = props.id;
|
|
};
|
|
|
|
/**
|
|
* กดปุ่มเพิ่มบน table
|
|
*/
|
|
const clickAdd = () => {
|
|
editRow.value = false;
|
|
modalEdit.value = false;
|
|
modal.value = true;
|
|
edit.value = true;
|
|
id.value = "";
|
|
organizationOrganizationId.value = "";
|
|
organizationAgencyCode.value = "";
|
|
organizationGovernmentCode.value = "";
|
|
organizationTypeId.value = "";
|
|
organizationLevelId.value = "";
|
|
organizationAgencyId.value = "";
|
|
organizationGovernmentAgencyId.value = "";
|
|
organizationTelExternalId.value = "";
|
|
organizationTelInternalId.value = "";
|
|
organizationFaxId.value = "";
|
|
organizationShortName.value = "";
|
|
agency.value = "";
|
|
government.value = "";
|
|
department.value = "";
|
|
pile.value = "";
|
|
organizationUserNote.value = "";
|
|
organizationOrder.value = "";
|
|
|
|
// positionTypeId.value = "";
|
|
positionEmployeeLineId.value = "";
|
|
positionEmployeePathId.value = "";
|
|
positionEmployeePositionSidesId.value = [];
|
|
// positionExecutiveId.value = "";
|
|
// positionExecutiveSideId.value = [];
|
|
positionEmployeeLevelId.value = [];
|
|
positionEmployeeStatusId.value = "";
|
|
posNo.value = "";
|
|
qualification.value = "";
|
|
positionCondition.value = "";
|
|
positionMasterUserNote.value = "";
|
|
isDirector.value = false;
|
|
isActive.value = false;
|
|
isCondition.value = false;
|
|
conditionNote.value = "";
|
|
};
|
|
|
|
/**เมื่อเลือกใหม่
|
|
* q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
|
|
* @param val ค่าตัวที่เลือก
|
|
*/
|
|
const updateAgencyCode = async (val: string) => {
|
|
await fetchAgencyCode(val);
|
|
};
|
|
|
|
/**เมื่อเลือกใหม่
|
|
* q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
|
|
* @param val ค่าตัวที่เลือก
|
|
*/
|
|
const updateGovernmentCode = async (val: string) => {
|
|
let data = organizationGovernmentCodeFilter.value.find(
|
|
(v: GovermentOption) => v.id.indexOf(val) > -1
|
|
);
|
|
organizationShortName.value = data?.shortName;
|
|
posNo.value = data?.shortName;
|
|
};
|
|
|
|
/**Fuction Filter DropDown
|
|
* q-select ส่งค่ามาให้เองจาก @filter="filterSelector"
|
|
* @param val ค่าตัวพิมพ์ค้นหา
|
|
* @param update ทุกครั้งที่พิมพ์ค่า
|
|
*/
|
|
const filterSelector = (val: any, update: Function, filtername: string) => {
|
|
switch (filtername) {
|
|
case "1":
|
|
update(() => {
|
|
organizationOrganizationOption.value =
|
|
organizationOrganizationFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "2":
|
|
update(() => {
|
|
organizationAgencyCodeOption.value =
|
|
organizationAgencyCodeFilter.value.filter(
|
|
(v: GovermentOption) => v.agencyCode.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "3":
|
|
update(() => {
|
|
organizationGovernmentCodeOption.value =
|
|
organizationGovernmentCodeFilter.value.filter(
|
|
(v: GovermentOption) => v.governmentCode.indexOf(val) > -1
|
|
);
|
|
});
|
|
case "4":
|
|
update(() => {
|
|
organizationAgencyOption.value = organizationAgencyFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "5":
|
|
update(() => {
|
|
organizationGovernmentAgencyOption.value =
|
|
organizationGovernmentAgencyFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "6":
|
|
update(() => {
|
|
organizationTypeOption.value = organizationTypeFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "7":
|
|
update(() => {
|
|
organizationLevelOption.value = organizationLevelFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "8":
|
|
update(() => {
|
|
organizationTelExternalOption.value =
|
|
organizationTelExternalFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "9":
|
|
update(() => {
|
|
organizationTelInternalOption.value =
|
|
organizationTelInternalFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "10":
|
|
update(() => {
|
|
organizationFaxOption.value = organizationFaxFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
// case "11":
|
|
// update(() => {
|
|
// positionEmployeeTypeOption.value = positionEmployeeTypeFilter.value.filter(
|
|
// (v: DataOption) => v.name.indexOf(val) > -1
|
|
// );
|
|
// });
|
|
// break;
|
|
case "12":
|
|
update(() => {
|
|
positionEmployeeLineOption.value =
|
|
positionEmployeeLineFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "13":
|
|
update(() => {
|
|
positionEmployeePathOption.value =
|
|
positionEmployeePathFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "14":
|
|
update(() => {
|
|
positionEmployeePathSideOption.value =
|
|
positionEmployeePathSideFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
// case "15":
|
|
// update(() => {
|
|
// positionEmployeeExecutiveOption.value = positionEmployeeExecutiveFilter.value.filter(
|
|
// (v: DataOption) => v.name.indexOf(val) > -1
|
|
// );
|
|
// });
|
|
// break;
|
|
// case "16":
|
|
// update(() => {
|
|
// positionEmployeeExecutiveSideOption.value =
|
|
// positionEmployeeExecutiveSideFilter.value.filter(
|
|
// (v: DataOption) => v.name.indexOf(val) > -1
|
|
// );
|
|
// });
|
|
// break;
|
|
case "17":
|
|
update(() => {
|
|
positionEmployeeLevelOption.value =
|
|
positionEmployeeLevelFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "18":
|
|
update(() => {
|
|
positionEmployeeStatusOption.value =
|
|
positionEmployeeStatusFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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,
|
|
};
|
|
};
|
|
</script>
|