Merge branch 'develop' into dev-tee
This commit is contained in:
setthawutttty
commit
b3ce9039ff
31 changed files with 3629 additions and 3920 deletions
|
|
@ -1,106 +1,3 @@
|
|||
<template>
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm">
|
||||
<q-toggle
|
||||
v-if="roleAdmin === false"
|
||||
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||
:model-value="containStatus"
|
||||
color="blue"
|
||||
label="แสดงสถานะบรรจุแล้ว"
|
||||
@update:model-value="updateContain"
|
||||
/>
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-account-arrow-right"
|
||||
@click="updateModaladdlist"
|
||||
v-if="displayAdd"
|
||||
/>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดง table ใน คอลัมน์ -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width v-if="history == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
|
@ -244,6 +141,110 @@ const updateModaladdlist = () => {
|
|||
emit("update-modaladdlist", true);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm">
|
||||
<q-toggle
|
||||
v-if="roleAdmin === false"
|
||||
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||
:model-value="containStatus"
|
||||
color="blue"
|
||||
label="แสดงสถานะบรรจุแล้ว"
|
||||
@update:model-value="updateContain"
|
||||
/>
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-account-arrow-right"
|
||||
@click="updateModaladdlist"
|
||||
v-if="displayAdd"
|
||||
/>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดง table ใน คอลัมน์ -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width v-if="history == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import Information from "@/modules/05_placement/components/Receive/information.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div class="row col-12" style="padding-top: 80px">
|
||||
|
|
@ -7,9 +11,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Information from "@/modules/05_placement/components/Receive/information.vue";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.image-size-default {
|
||||
height: 150px;
|
||||
|
|
|
|||
|
|
@ -1,427 +1,3 @@
|
|||
<template>
|
||||
<q-page-sticky
|
||||
position="top"
|
||||
expand
|
||||
class="bg-grey-2 text-white"
|
||||
style="z-index: 99; padding: 0% 1% 0% 1%"
|
||||
>
|
||||
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
class="bg-teal-1 full-height"
|
||||
color="primary"
|
||||
icon="mdi-chevron-left"
|
||||
dense
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
</q-btn>
|
||||
<q-avatar size="65px" rounded class="containerimage">
|
||||
<img
|
||||
v-if="image == null"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
|
||||
<div
|
||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||
@click="addNewImage()"
|
||||
>
|
||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
style="display: none"
|
||||
ref="inputImage"
|
||||
accept="image/*"
|
||||
@change="uploadImage"
|
||||
/>
|
||||
</div>
|
||||
</q-avatar>
|
||||
|
||||
<div class="row items-center text-dark q-ml-md">
|
||||
<div class="column">
|
||||
<div class="text-bold q-pb-xs text-name">
|
||||
เพิ่มข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
</q-page-sticky>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="ข้อมูลส่วนตัว"
|
||||
icon="mdi-account"
|
||||
:save="saveData"
|
||||
:history="!statusAdd()"
|
||||
:addEmployee="statusAdd()"
|
||||
/>
|
||||
<!-- :disable="statusEdit" -->
|
||||
<q-separator />
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
v-model="informaData.cardid"
|
||||
dense
|
||||
@update:model-value="changeCardID"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
|
||||
(val:string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
|
||||
]"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
label="เลขบัตรประจำตัวประชาชน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
/>
|
||||
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.prefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.prefixOps"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้าชื่อ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.firstname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.lastname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<datepicker
|
||||
v-model="informaData.birthDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:max-date="new Date()"
|
||||
:disabled="!edit"
|
||||
@update:model-value="handleDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:model-value="
|
||||
informaData.birthDate == null
|
||||
? null
|
||||
: date2Thai(informaData.birthDate)
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(false)"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
readonly
|
||||
borderless
|
||||
:style="!edit ? '' : 'padding:0 12px;'"
|
||||
:model-value="informaData.age"
|
||||
:label="`${'อายุ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.genderId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.genderOps"
|
||||
option-value="id"
|
||||
:label="`${'เพศ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.statusId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.statusOps"
|
||||
option-value="id"
|
||||
:label="`${'สถานภาพ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.nationality"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.ethnicity"
|
||||
:label="`${'เชื้อชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.religionId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.religionOps"
|
||||
option-value="id"
|
||||
:label="`${'ศาสนา'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.bloodId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.bloodOps"
|
||||
option-value="id"
|
||||
:label="`${'หมู่เลือด'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
|
||||
) "
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
type="tel"
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.tel"
|
||||
:label="`${'เบอร์โทร'}`"
|
||||
mask="##########"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val:string) =>
|
||||
val.length >= 10 ||
|
||||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.employeeType"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeTypeOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทการจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.employeeClass"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeClassOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทลูกจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
@click="saveData"
|
||||
/>
|
||||
</div>
|
||||
<q-separator />
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -855,3 +431,428 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page-sticky
|
||||
position="top"
|
||||
expand
|
||||
class="bg-grey-2 text-white"
|
||||
style="z-index: 99; padding: 0% 1% 0% 1%"
|
||||
>
|
||||
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
class="bg-teal-1 full-height"
|
||||
color="primary"
|
||||
icon="mdi-chevron-left"
|
||||
dense
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
</q-btn>
|
||||
<q-avatar size="65px" rounded class="containerimage">
|
||||
<img
|
||||
v-if="image == null"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
|
||||
<div
|
||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||
@click="addNewImage()"
|
||||
>
|
||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
style="display: none"
|
||||
ref="inputImage"
|
||||
accept="image/*"
|
||||
@change="uploadImage"
|
||||
/>
|
||||
</div>
|
||||
</q-avatar>
|
||||
|
||||
<div class="row items-center text-dark q-ml-md">
|
||||
<div class="column">
|
||||
<div class="text-bold q-pb-xs text-name">
|
||||
เพิ่มข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
</q-page-sticky>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="ข้อมูลส่วนตัว"
|
||||
icon="mdi-account"
|
||||
:save="saveData"
|
||||
:history="!statusAdd()"
|
||||
:addEmployee="statusAdd()"
|
||||
/>
|
||||
<!-- :disable="statusEdit" -->
|
||||
<q-separator />
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
v-model="informaData.cardid"
|
||||
dense
|
||||
@update:model-value="changeCardID"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
|
||||
(val:string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
|
||||
]"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
label="เลขบัตรประจำตัวประชาชน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
/>
|
||||
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.prefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.prefixOps"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้าชื่อ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.firstname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.lastname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<datepicker
|
||||
v-model="informaData.birthDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:max-date="new Date()"
|
||||
:disabled="!edit"
|
||||
@update:model-value="handleDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:model-value="
|
||||
informaData.birthDate == null
|
||||
? null
|
||||
: date2Thai(informaData.birthDate)
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(false)"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
readonly
|
||||
borderless
|
||||
:style="!edit ? '' : 'padding:0 12px;'"
|
||||
:model-value="informaData.age"
|
||||
:label="`${'อายุ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.genderId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.genderOps"
|
||||
option-value="id"
|
||||
:label="`${'เพศ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.statusId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.statusOps"
|
||||
option-value="id"
|
||||
:label="`${'สถานภาพ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.nationality"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.ethnicity"
|
||||
:label="`${'เชื้อชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.religionId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.religionOps"
|
||||
option-value="id"
|
||||
:label="`${'ศาสนา'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.bloodId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.bloodOps"
|
||||
option-value="id"
|
||||
:label="`${'หมู่เลือด'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
|
||||
) "
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
type="tel"
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.tel"
|
||||
:label="`${'เบอร์โทร'}`"
|
||||
mask="##########"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val:string) =>
|
||||
val.length >= 10 ||
|
||||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.employeeType"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeTypeOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทการจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.employeeClass"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeClassOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทลูกจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
@click="saveData"
|
||||
/>
|
||||
</div>
|
||||
<q-separator />
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import Image from "@/components/information/Image.vue";
|
||||
import Information from "@/components/information/Information.vue";
|
||||
import Government from "@/components/information/Government.vue";
|
||||
import Address from "@/components/information/Address.vue";
|
||||
import Family from "@/components/information/Family.vue";
|
||||
import Certicate from "@/components/information/Certicate.vue";
|
||||
|
||||
import EducationVue from "@/components/information/Education.vue";
|
||||
import TrainVue from "@/components/information/Train.vue";
|
||||
import InsigniaVue from "@/components/information/Insignia.vue";
|
||||
import CoinedVue from "@/components/information/Coin.vue";
|
||||
import AssessmentVue from "@/components/information/Assessment.vue";
|
||||
import SalaryVue from "@/components/information/Salary.vue";
|
||||
import DisciplineVue from "@/components/information/Discipline.vue";
|
||||
import LeaveVue from "@/components/information/Leave.vue";
|
||||
import TalentVue from "@/components/information/Talent.vue";
|
||||
import WorkVue from "@/components/information/Work.vue";
|
||||
import RecordVue from "@/components/information/Record.vue";
|
||||
import OtherVue from "@/components/information/Other.vue";
|
||||
import DocumentVue from "@/components/information/Document.vue";
|
||||
|
||||
const statusEdit = ref<boolean>(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div class="row col-12" style="padding-top: 80px">
|
||||
|
|
@ -73,32 +100,7 @@
|
|||
<Image />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import Image from "@/components/information/Image.vue";
|
||||
import Information from "@/components/information/Information.vue";
|
||||
import Government from "@/components/information/Government.vue";
|
||||
import Address from "@/components/information/Address.vue";
|
||||
import Family from "@/components/information/Family.vue";
|
||||
import Certicate from "@/components/information/Certicate.vue";
|
||||
|
||||
import EducationVue from "@/components/information/Education.vue";
|
||||
import TrainVue from "@/components/information/Train.vue";
|
||||
import InsigniaVue from "@/components/information/Insignia.vue";
|
||||
import CoinedVue from "@/components/information/Coin.vue";
|
||||
import AssessmentVue from "@/components/information/Assessment.vue";
|
||||
import SalaryVue from "@/components/information/Salary.vue";
|
||||
import DisciplineVue from "@/components/information/Discipline.vue";
|
||||
import LeaveVue from "@/components/information/Leave.vue";
|
||||
import TalentVue from "@/components/information/Talent.vue";
|
||||
import WorkVue from "@/components/information/Work.vue";
|
||||
import RecordVue from "@/components/information/Record.vue";
|
||||
import OtherVue from "@/components/information/Other.vue";
|
||||
import DocumentVue from "@/components/information/Document.vue";
|
||||
|
||||
const statusEdit = ref<boolean>(false);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.information:target {
|
||||
padding-top: 84px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,440 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||
import CurrencyInput from "@/components/CurruncyInput.vue";
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
|
||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
|
||||
import { defaultInformation } from "@/modules/04_registry/components/profileType";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const paramsId = route.params.id;
|
||||
const {
|
||||
date2Thai,
|
||||
dialogMessage,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
dateToISO,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText } = profileStore;
|
||||
|
||||
const title = ref<ResponseTitle>({
|
||||
fullname: "",
|
||||
organizationPositionOld: "",
|
||||
positionLevelOld: "",
|
||||
positionTypeOld: "",
|
||||
});
|
||||
|
||||
const status = ref<string>("");
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
|
||||
const profileId = ref<string>("");
|
||||
const educationOld = ref<string>("");
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const salary = ref<number>(0);
|
||||
// const organization = ref<string>("");
|
||||
// const date = ref<Date | null>(null);
|
||||
const reason = ref<string>("");
|
||||
|
||||
const informaData = ref<Information>(defaultInformation);
|
||||
const dateBefore = ref<Date>(new Date());
|
||||
const defaultCitizenData = ref<string>("");
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
await getData();
|
||||
});
|
||||
|
||||
const fetchPerson = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.person)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let optionbloodGroups: DataOption[] = [];
|
||||
data.bloodGroups.map((r: any) => {
|
||||
optionbloodGroups.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.bloodOps = optionbloodGroups;
|
||||
OpsFilter.value.bloodOps = optionbloodGroups;
|
||||
|
||||
let optiongenders: DataOption[] = [];
|
||||
data.genders.map((r: any) => {
|
||||
optiongenders.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.genderOps = optiongenders;
|
||||
OpsFilter.value.genderOps = optiongenders;
|
||||
|
||||
let optionprefixs: DataOption[] = [];
|
||||
data.prefixs.map((r: any) => {
|
||||
optionprefixs.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.prefixOps = optionprefixs;
|
||||
OpsFilter.value.prefixOps = optionprefixs;
|
||||
|
||||
let optionrelationships: DataOption[] = [];
|
||||
data.relationships.map((r: any) => {
|
||||
optionrelationships.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.statusOps = optionrelationships;
|
||||
OpsFilter.value.statusOps = optionrelationships;
|
||||
|
||||
let optionreligions: DataOption[] = [];
|
||||
data.religions.map((r: any) => {
|
||||
optionreligions.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
})
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
// hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.receiveDataId(paramsId.toString()))
|
||||
.then(async (res: any) => {
|
||||
const data = res.data.result;
|
||||
|
||||
profileId.value = data.profileId;
|
||||
title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
|
||||
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
|
||||
title.value.positionLevelOld = data.positionLevelOld ?? "-";
|
||||
title.value.positionTypeOld = data.positionTypeOld ?? "-";
|
||||
defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
|
||||
informaData.value = {
|
||||
cardid: data.citizenId ?? "",
|
||||
age: "",
|
||||
prefix: "",
|
||||
prefixId:
|
||||
(data.prefixId == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.prefixId) ?? "",
|
||||
firstname: data.firstname ?? "",
|
||||
lastname: data.lastname ?? "",
|
||||
birthDate:
|
||||
data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
|
||||
genderId:
|
||||
(data.gender == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.gender) ?? "",
|
||||
bloodId:
|
||||
(data.bloodGroup == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.bloodGroup) ?? "",
|
||||
nationality: data.nationality ?? "",
|
||||
ethnicity: data.race ?? "",
|
||||
statusId:
|
||||
(data.relationship == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.relationship) ?? "",
|
||||
religionId:
|
||||
(data.religion == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.religion) ?? "",
|
||||
tel: data.telephoneNumber ?? "",
|
||||
employeeType: "",
|
||||
employeeClass: "",
|
||||
profileType: "",
|
||||
};
|
||||
educationOld.value = data.educationOld ?? "";
|
||||
organizationPositionOld.value = data.organizationPositionOld ?? "";
|
||||
positionTypeOld.value = data.positionTypeOld ?? "";
|
||||
positionLevelOld.value = data.positionLevelOld ?? "";
|
||||
posNo.value = data.positionNumberOld ?? "";
|
||||
salary.value = data.amountOld ?? 0;
|
||||
reason.value = data.reason ?? "";
|
||||
status.value = data.status ?? "";
|
||||
|
||||
await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
|
||||
dateBefore.value = new Date(data.dateOfBirth);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const cancel = async () => {
|
||||
edit.value = !edit.value;
|
||||
if (myForm.value !== null) {
|
||||
await getData();
|
||||
myForm.value.reset();
|
||||
}
|
||||
};
|
||||
|
||||
const changeCardID = async (value: string | number | null) => {
|
||||
if (value != null && typeof value == "string") {
|
||||
if (value.length == 13 && value != defaultCitizenData.value) {
|
||||
await checkCitizen(value);
|
||||
// informaData.value.cardid = defaultCitizenData.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const checkCitizen = async (id: string) => {
|
||||
console.log("String");
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileCitizenId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result.citizen;
|
||||
|
||||
if (!data) {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ข้อความแจ้งเตือน",
|
||||
"เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
|
||||
"warning",
|
||||
undefined,
|
||||
"orange",
|
||||
undefined,
|
||||
undefined,
|
||||
true
|
||||
);
|
||||
informaData.value.cardid = defaultCitizenData.value;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "genderOps":
|
||||
update(() => {
|
||||
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "bloodOps":
|
||||
update(() => {
|
||||
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "statusOps":
|
||||
update(() => {
|
||||
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "religionOps":
|
||||
update(() => {
|
||||
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeClassOps":
|
||||
update(() => {
|
||||
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeTypeOps":
|
||||
update(() => {
|
||||
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDate = async (modelData: Date) => {
|
||||
informaData.value.birthDate = modelData;
|
||||
await calRetire(modelData);
|
||||
};
|
||||
|
||||
const calRetire = async (birth: Date) => {
|
||||
const body = {
|
||||
birthDate: dateToISO(birth),
|
||||
};
|
||||
// if (dateToISO(dateBefore.value) != dateToISO(birth)) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileCalRetire, body)
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
informaData.value.age = data.age;
|
||||
changeRetireText(data.retireDate);
|
||||
dateBefore.value = birth;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
informaData.value.birthDate = dateBefore.value;
|
||||
changeRetireText(date2Thai(retire));
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
// }
|
||||
};
|
||||
|
||||
const conditionSave = async () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then((success) => {
|
||||
if (success) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => await saveData(),
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const body = {
|
||||
citizenId: informaData.value.cardid,
|
||||
prefixId: informaData.value.prefixId,
|
||||
firstname: informaData.value.firstname,
|
||||
lastname: informaData.value.lastname,
|
||||
dateOfBirth:
|
||||
informaData.value.birthDate !== null
|
||||
? dateToISO(informaData.value.birthDate)
|
||||
: null,
|
||||
genderId: informaData.value.genderId,
|
||||
nationality: informaData.value.nationality,
|
||||
race: informaData.value.ethnicity,
|
||||
religionId: informaData.value.religionId,
|
||||
bloodGroupId: informaData.value.bloodId,
|
||||
relationshipId: informaData.value.statusId,
|
||||
telephoneNumber: informaData.value.tel,
|
||||
reason: reason.value,
|
||||
educationOld: educationOld.value,
|
||||
organizationPositionOld: organizationPositionOld.value,
|
||||
positionTypeOld: positionTypeOld.value,
|
||||
positionLevelOld: positionLevelOld.value,
|
||||
positionNumberOld: posNo.value,
|
||||
amount: 0,
|
||||
amountOld: salary.value,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.receiveDataId(route.params.id.toString()), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
|
|
@ -577,442 +1014,7 @@
|
|||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||
import CurrencyInput from "@/components/CurruncyInput.vue";
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
|
||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
|
||||
import { defaultInformation } from "@/modules/04_registry/components/profileType";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const paramsId = route.params.id;
|
||||
const {
|
||||
date2Thai,
|
||||
dialogMessage,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
dateToISO,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText } = profileStore;
|
||||
|
||||
const title = ref<ResponseTitle>({
|
||||
fullname: "",
|
||||
organizationPositionOld: "",
|
||||
positionLevelOld: "",
|
||||
positionTypeOld: "",
|
||||
});
|
||||
|
||||
const status = ref<string>("");
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
|
||||
const profileId = ref<string>("");
|
||||
const educationOld = ref<string>("");
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const salary = ref<number>(0);
|
||||
// const organization = ref<string>("");
|
||||
// const date = ref<Date | null>(null);
|
||||
const reason = ref<string>("");
|
||||
|
||||
const informaData = ref<Information>(defaultInformation);
|
||||
const dateBefore = ref<Date>(new Date());
|
||||
const defaultCitizenData = ref<string>("");
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
await getData();
|
||||
});
|
||||
|
||||
const fetchPerson = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.person)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let optionbloodGroups: DataOption[] = [];
|
||||
data.bloodGroups.map((r: any) => {
|
||||
optionbloodGroups.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.bloodOps = optionbloodGroups;
|
||||
OpsFilter.value.bloodOps = optionbloodGroups;
|
||||
|
||||
let optiongenders: DataOption[] = [];
|
||||
data.genders.map((r: any) => {
|
||||
optiongenders.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.genderOps = optiongenders;
|
||||
OpsFilter.value.genderOps = optiongenders;
|
||||
|
||||
let optionprefixs: DataOption[] = [];
|
||||
data.prefixs.map((r: any) => {
|
||||
optionprefixs.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.prefixOps = optionprefixs;
|
||||
OpsFilter.value.prefixOps = optionprefixs;
|
||||
|
||||
let optionrelationships: DataOption[] = [];
|
||||
data.relationships.map((r: any) => {
|
||||
optionrelationships.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.statusOps = optionrelationships;
|
||||
OpsFilter.value.statusOps = optionrelationships;
|
||||
|
||||
let optionreligions: DataOption[] = [];
|
||||
data.religions.map((r: any) => {
|
||||
optionreligions.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
})
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
// hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.receiveDataId(paramsId.toString()))
|
||||
.then(async (res: any) => {
|
||||
const data = res.data.result;
|
||||
|
||||
profileId.value = data.profileId;
|
||||
title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
|
||||
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
|
||||
title.value.positionLevelOld = data.positionLevelOld ?? "-";
|
||||
title.value.positionTypeOld = data.positionTypeOld ?? "-";
|
||||
defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
|
||||
informaData.value = {
|
||||
cardid: data.citizenId ?? "",
|
||||
age: "",
|
||||
prefix: "",
|
||||
prefixId:
|
||||
(data.prefixId == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.prefixId) ?? "",
|
||||
firstname: data.firstname ?? "",
|
||||
lastname: data.lastname ?? "",
|
||||
birthDate:
|
||||
data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
|
||||
genderId:
|
||||
(data.gender == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.gender) ?? "",
|
||||
bloodId:
|
||||
(data.bloodGroup == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.bloodGroup) ?? "",
|
||||
nationality: data.nationality ?? "",
|
||||
ethnicity: data.race ?? "",
|
||||
statusId:
|
||||
(data.relationship == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.relationship) ?? "",
|
||||
religionId:
|
||||
(data.religion == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.religion) ?? "",
|
||||
tel: data.telephoneNumber ?? "",
|
||||
employeeType: "",
|
||||
employeeClass: "",
|
||||
profileType: "",
|
||||
};
|
||||
educationOld.value = data.educationOld ?? "";
|
||||
organizationPositionOld.value = data.organizationPositionOld ?? "";
|
||||
positionTypeOld.value = data.positionTypeOld ?? "";
|
||||
positionLevelOld.value = data.positionLevelOld ?? "";
|
||||
posNo.value = data.positionNumberOld ?? "";
|
||||
salary.value = data.amountOld ?? 0;
|
||||
reason.value = data.reason ?? "";
|
||||
status.value = data.status ?? "";
|
||||
|
||||
await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
|
||||
dateBefore.value = new Date(data.dateOfBirth);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const cancel = async () => {
|
||||
edit.value = !edit.value;
|
||||
if (myForm.value !== null) {
|
||||
await getData();
|
||||
myForm.value.reset();
|
||||
}
|
||||
};
|
||||
|
||||
const changeCardID = async (value: string | number | null) => {
|
||||
if (value != null && typeof value == "string") {
|
||||
if (value.length == 13 && value != defaultCitizenData.value) {
|
||||
await checkCitizen(value);
|
||||
// informaData.value.cardid = defaultCitizenData.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const checkCitizen = async (id: string) => {
|
||||
console.log("String");
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileCitizenId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result.citizen;
|
||||
|
||||
if (!data) {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ข้อความแจ้งเตือน",
|
||||
"เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
|
||||
"warning",
|
||||
undefined,
|
||||
"orange",
|
||||
undefined,
|
||||
undefined,
|
||||
true
|
||||
);
|
||||
informaData.value.cardid = defaultCitizenData.value;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "genderOps":
|
||||
update(() => {
|
||||
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "bloodOps":
|
||||
update(() => {
|
||||
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "statusOps":
|
||||
update(() => {
|
||||
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "religionOps":
|
||||
update(() => {
|
||||
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeClassOps":
|
||||
update(() => {
|
||||
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeTypeOps":
|
||||
update(() => {
|
||||
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDate = async (modelData: Date) => {
|
||||
informaData.value.birthDate = modelData;
|
||||
await calRetire(modelData);
|
||||
};
|
||||
|
||||
const calRetire = async (birth: Date) => {
|
||||
const body = {
|
||||
birthDate: dateToISO(birth),
|
||||
};
|
||||
// if (dateToISO(dateBefore.value) != dateToISO(birth)) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileCalRetire, body)
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
informaData.value.age = data.age;
|
||||
changeRetireText(data.retireDate);
|
||||
dateBefore.value = birth;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
informaData.value.birthDate = dateBefore.value;
|
||||
changeRetireText(date2Thai(retire));
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
// }
|
||||
};
|
||||
|
||||
const conditionSave = async () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then((success) => {
|
||||
if (success) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => await saveData(),
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const body = {
|
||||
citizenId: informaData.value.cardid,
|
||||
prefixId: informaData.value.prefixId,
|
||||
firstname: informaData.value.firstname,
|
||||
lastname: informaData.value.lastname,
|
||||
dateOfBirth:
|
||||
informaData.value.birthDate !== null
|
||||
? dateToISO(informaData.value.birthDate)
|
||||
: null,
|
||||
genderId: informaData.value.genderId,
|
||||
nationality: informaData.value.nationality,
|
||||
race: informaData.value.ethnicity,
|
||||
religionId: informaData.value.religionId,
|
||||
bloodGroupId: informaData.value.bloodId,
|
||||
relationshipId: informaData.value.statusId,
|
||||
telephoneNumber: informaData.value.tel,
|
||||
reason: reason.value,
|
||||
educationOld: educationOld.value,
|
||||
organizationPositionOld: organizationPositionOld.value,
|
||||
positionTypeOld: positionTypeOld.value,
|
||||
positionLevelOld: positionLevelOld.value,
|
||||
positionNumberOld: posNo.value,
|
||||
amount: 0,
|
||||
amountOld: salary.value,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.receiveDataId(route.params.id.toString()), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -1,275 +1,3 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
รายละเอียดการส่งตัวกลับ {{ fullname }}
|
||||
</div>
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
outline
|
||||
color="blue"
|
||||
dense
|
||||
icon-right="mdi-open-in-new"
|
||||
class="q-px-sm"
|
||||
label="ดูข้อมูลทะเบียนประวัติ"
|
||||
@click="router.push(`/registry/${personId}`)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
||||
<q-img src="@/assets/avatar_user.jpg" />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 q-pl-md">
|
||||
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionTypeOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">ระดับ</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionLevelOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สังกัด</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ organizationPositionOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-sm" v-if="!edit">
|
||||
<!-- <q-btn
|
||||
outline
|
||||
color="primary"
|
||||
dense
|
||||
icon-right="mdi-file-edit-outline"
|
||||
class="q-px-sm"
|
||||
label="แก้ไข"
|
||||
style="width: 80px"
|
||||
@click="edit = !edit"
|
||||
v-if="!(status == 'REPORT' || status == 'DONE')"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="q-gutter-sm" v-else>
|
||||
<q-btn
|
||||
outline
|
||||
color="public"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="บันทึก"
|
||||
style="width: 80px"
|
||||
@click="conditionSave"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
color="red"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="ยกเลิก"
|
||||
style="width: 80px"
|
||||
@click="cancelBtn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<q-form ref="myForm">
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-12 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-grey">
|
||||
ตำแหน่งและหน่วยงานเดิม
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organizationPositionOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่ง/สังกัด'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionTypeOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่งประเภท'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionLevelOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ระดับ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="posNo"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
|
||||
v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
|
||||
:label="`${'เงินเดือน'}`" type="number" /> -->
|
||||
<CurrencyInput
|
||||
v-model="salary"
|
||||
:edit="edit"
|
||||
:options="{
|
||||
currency: 'THB',
|
||||
}"
|
||||
:label="`${'เงินเดือน'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organization"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date !== null ? date2Thai(date) : null"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตั้งแต่วัน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="reason"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'หมายเหตุ '}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
|
@ -416,6 +144,282 @@ onMounted(async () => {
|
|||
await getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
รายละเอียดการส่งตัวกลับ {{ fullname }}
|
||||
</div>
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
outline
|
||||
color="blue"
|
||||
dense
|
||||
icon-right="mdi-open-in-new"
|
||||
class="q-px-sm"
|
||||
label="ดูข้อมูลทะเบียนประวัติ"
|
||||
@click="router.push(`/registry/${personId}`)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
||||
<q-img src="@/assets/avatar_user.jpg" />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 q-pl-md">
|
||||
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionTypeOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">ระดับ</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionLevelOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สังกัด</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ organizationPositionOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-sm" v-if="!edit">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
dense
|
||||
icon-right="mdi-file-edit-outline"
|
||||
class="q-px-sm"
|
||||
label="แก้ไข"
|
||||
style="width: 80px"
|
||||
@click="edit = !edit"
|
||||
v-if="!(status == 'REPORT' || status == 'DONE')"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-gutter-sm" v-else>
|
||||
<q-btn
|
||||
outline
|
||||
color="public"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="บันทึก"
|
||||
style="width: 80px"
|
||||
@click="conditionSave"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
color="red"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="ยกเลิก"
|
||||
style="width: 80px"
|
||||
@click="cancelBtn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<q-form ref="myForm">
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-12 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-grey">
|
||||
ตำแหน่งและหน่วยงานเดิม
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organizationPositionOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่ง/สังกัด'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionTypeOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่งประเภท'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionLevelOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ระดับ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="posNo"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
|
||||
v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
|
||||
:label="`${'เงินเดือน'}`" type="number" /> -->
|
||||
<CurrencyInput
|
||||
v-model="salary"
|
||||
:edit="edit"
|
||||
:options="{
|
||||
currency: 'THB',
|
||||
}"
|
||||
:label="`${'เงินเดือน'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organization"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date !== null ? date2Thai(date) : null"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตั้งแต่วัน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="reason"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'หมายเหตุ '}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref, defineAsyncComponent } from "vue";
|
||||
import type { QStepper } from "quasar";
|
||||
|
||||
const step01 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/RepatriationOrder/step01.vue")
|
||||
);
|
||||
const step02 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/RepatriationOrder/step02.vue")
|
||||
);
|
||||
const step03 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/RepatriationOrder/step03.vue")
|
||||
);
|
||||
|
||||
const router = useRouter();
|
||||
const step = ref<number>(1);
|
||||
const stepper = ref<QStepper>();
|
||||
|
||||
const nextStep = () => {
|
||||
stepper.value!.next();
|
||||
};
|
||||
|
||||
const previousStep = () => {
|
||||
stepper.value!.previous();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
|
|
@ -49,33 +77,7 @@
|
|||
</q-stepper>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref, defineAsyncComponent } from "vue";
|
||||
import type { QStepper } from "quasar";
|
||||
|
||||
const step01 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/RepatriationOrder/step01.vue")
|
||||
);
|
||||
const step02 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/RepatriationOrder/step02.vue")
|
||||
);
|
||||
const step03 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/RepatriationOrder/step03.vue")
|
||||
);
|
||||
|
||||
const router = useRouter();
|
||||
const step = ref<number>(1);
|
||||
const stepper = ref<QStepper>();
|
||||
|
||||
const nextStep = () => {
|
||||
stepper.value!.next();
|
||||
};
|
||||
|
||||
const previousStep = () => {
|
||||
stepper.value!.previous();
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.q-stepper--horizontal .q-stepper__step-inner {
|
||||
padding: 0px;
|
||||
|
|
|
|||
|
|
@ -1,193 +1,3 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการคำสั่งช่วยราชการ/ส่งตัวกลับ
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="fiscalyear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="fiscalyearOP"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
<q-space />
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="OrderType"
|
||||
label="ประเภท"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="OrderTypeOption"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="OrderStatus"
|
||||
label="สถานะ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="OrderStatusOption"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="UpdataData"
|
||||
:filter="filterKeyword"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click="redirectToPage(props.row.Order)"
|
||||
>
|
||||
<q-td key="Order" :props="props">
|
||||
{{ props.row.Order }}
|
||||
</q-td>
|
||||
<q-td key="OrderNum" :props="props">
|
||||
{{ props.row.OrderNum }}
|
||||
</q-td>
|
||||
<q-td key="OrderType" :props="props">
|
||||
{{ props.row.OrderType }}
|
||||
</q-td>
|
||||
<q-td key="OrderDate" :props="props">
|
||||
{{ props.row.OrderDate }}
|
||||
</q-td>
|
||||
<q-td key="OrderBy" :props="props">
|
||||
{{ props.row.OrderBy }}
|
||||
</q-td>
|
||||
<q-td key="Signer" :props="props">
|
||||
{{ props.row.Signer }}
|
||||
</q-td>
|
||||
<q-td key="OrderStatus" :props="props">
|
||||
{{ props.row.OrderStatus }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
@click.stop="clickDelete(props.row.id)"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, useAttrs, computed } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -677,6 +487,196 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการคำสั่งช่วยราชการ/ส่งตัวกลับ
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="fiscalyear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="fiscalyearOP"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
<q-space />
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="OrderType"
|
||||
label="ประเภท"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="OrderTypeOption"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="OrderStatus"
|
||||
label="สถานะ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="OrderStatusOption"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="UpdataData"
|
||||
:filter="filterKeyword"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click="redirectToPage(props.row.Order)"
|
||||
>
|
||||
<q-td key="Order" :props="props">
|
||||
{{ props.row.Order }}
|
||||
</q-td>
|
||||
<q-td key="OrderNum" :props="props">
|
||||
{{ props.row.OrderNum }}
|
||||
</q-td>
|
||||
<q-td key="OrderType" :props="props">
|
||||
{{ props.row.OrderType }}
|
||||
</q-td>
|
||||
<q-td key="OrderDate" :props="props">
|
||||
{{ props.row.OrderDate }}
|
||||
</q-td>
|
||||
<q-td key="OrderBy" :props="props">
|
||||
{{ props.row.OrderBy }}
|
||||
</q-td>
|
||||
<q-td key="Signer" :props="props">
|
||||
{{ props.row.Signer }}
|
||||
</q-td>
|
||||
<q-td key="OrderStatus" :props="props">
|
||||
{{ props.row.OrderStatus }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
@click.stop="clickDelete(props.row.id)"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.filter-card {
|
||||
background-color: #f1f1f1b0;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,137 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const myForm = ref<QForm>();
|
||||
|
||||
const editRow = ref<boolean>(false);
|
||||
|
||||
const nameOrder = ref<string>("");
|
||||
const nameCommand = ref<string>("");
|
||||
const positionCommand = ref<string>("");
|
||||
const dateYear = ref<number>(new Date().getFullYear());
|
||||
const command = ref<string>("");
|
||||
const dateCommand = ref<Date>(new Date());
|
||||
// const dateRegister = ref<Date>(new Date());
|
||||
// const dateAnnounce = ref<Date>(new Date());
|
||||
|
||||
const typeOrder = ref<string>("ช่วยราชการ");
|
||||
const typeOrderOption = ref<DataOption[]>(["ส่งตัวกลับ", "ส่งตัวกลับ"]);
|
||||
const typeOrderOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const byOrder = ref<string>("");
|
||||
const byOrderOption = ref<DataOption[]>([]);
|
||||
const byOrderOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
// const register = ref<string>("");
|
||||
const registerOption = ref<DataOption[]>([]);
|
||||
const registerOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
// const announce = ref<string>("");
|
||||
const announceOption = ref<DataOption[]>([]);
|
||||
const announceOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
// const position = ref<string>("");
|
||||
const positionOption = ref<DataOption[]>([]);
|
||||
const positionOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const test = ref<string>("นายก ข");
|
||||
const testOption = ref<DataOption[]>([]);
|
||||
const testOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const clickEditRow = () => (editRow.value = true);
|
||||
|
||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||
switch (filtername) {
|
||||
case "typeOrderOption":
|
||||
update(() => {
|
||||
typeOrderOption.value = typeOrderOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "byOrderOption":
|
||||
update(() => {
|
||||
byOrderOption.value = byOrderOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "registerOption":
|
||||
update(() => {
|
||||
registerOption.value = registerOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "announceOption":
|
||||
update(() => {
|
||||
announceOption.value = announceOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "positionOption":
|
||||
update(() => {
|
||||
positionOption.value = positionOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "testOption":
|
||||
update(() => {
|
||||
testOption.value = testOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
next();
|
||||
// await myForm.value!.validate().then((result: boolean) => {
|
||||
// if (result) {
|
||||
// next();
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
/**
|
||||
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||
*/
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="max-height: 68vh; overflow-y: scroll">
|
||||
<q-form ref="myForm" class="q-pa-md">
|
||||
|
|
@ -213,139 +347,7 @@
|
|||
<q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const myForm = ref<QForm>();
|
||||
|
||||
const editRow = ref<boolean>(false);
|
||||
|
||||
const nameOrder = ref<string>("");
|
||||
const nameCommand = ref<string>("");
|
||||
const positionCommand = ref<string>("");
|
||||
const dateYear = ref<number>(new Date().getFullYear());
|
||||
const command = ref<string>("");
|
||||
const dateCommand = ref<Date>(new Date());
|
||||
// const dateRegister = ref<Date>(new Date());
|
||||
// const dateAnnounce = ref<Date>(new Date());
|
||||
|
||||
const typeOrder = ref<string>("ช่วยราชการ");
|
||||
const typeOrderOption = ref<DataOption[]>(['ส่งตัวกลับ',"ส่งตัวกลับ"]);
|
||||
const typeOrderOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const byOrder = ref<string>("");
|
||||
const byOrderOption = ref<DataOption[]>([]);
|
||||
const byOrderOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
// const register = ref<string>("");
|
||||
const registerOption = ref<DataOption[]>([]);
|
||||
const registerOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
// const announce = ref<string>("");
|
||||
const announceOption = ref<DataOption[]>([]);
|
||||
const announceOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
// const position = ref<string>("");
|
||||
const positionOption = ref<DataOption[]>([]);
|
||||
const positionOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const test = ref<string>("นายก ข");
|
||||
const testOption = ref<DataOption[]>([]);
|
||||
const testOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const clickEditRow = () => (editRow.value = true);
|
||||
|
||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||
switch (filtername) {
|
||||
case "typeOrderOption":
|
||||
update(() => {
|
||||
typeOrderOption.value = typeOrderOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "byOrderOption":
|
||||
update(() => {
|
||||
byOrderOption.value = byOrderOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "registerOption":
|
||||
update(() => {
|
||||
registerOption.value = registerOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "announceOption":
|
||||
update(() => {
|
||||
announceOption.value = announceOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "positionOption":
|
||||
update(() => {
|
||||
positionOption.value = positionOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "testOption":
|
||||
update(() => {
|
||||
testOption.value = testOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
next();
|
||||
// await myForm.value!.validate().then((result: boolean) => {
|
||||
// if (result) {
|
||||
// next();
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
/**
|
||||
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||
*/
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.q-field--with-bottom {
|
||||
padding-bottom: 0px;
|
||||
|
|
|
|||
|
|
@ -1,305 +1,3 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
|
||||
<div class="col-12 row q-py-sm items-center">
|
||||
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="idcard" :props="props">
|
||||
{{ props.row.idcard }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="agency" :props="props">
|
||||
{{ props.row.agency }}
|
||||
</q-td>
|
||||
<q-td key="send" :props="props">
|
||||
<q-select
|
||||
:class="getClass(true)"
|
||||
hide-bottom-space
|
||||
multiple
|
||||
:outlined="true"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="props.row.mutiselect"
|
||||
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
|
||||
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="optionSelect"
|
||||
option-value="id"
|
||||
input-debounce="0"
|
||||
color="primary"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-black">
|
||||
ไม่พบข้อมูลที่ค้นหา
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<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>
|
||||
</d-table>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="chevron_left"
|
||||
@click="previous"
|
||||
class="q-pr-md"
|
||||
label="เลือกรายชื่อ"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="next"
|
||||
class="q-px-md"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</q-btn>
|
||||
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
||||
<q-tooltip>ต่อไป</q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-5 row">
|
||||
<q-card flat bordered class="fit q-pa-sm">
|
||||
<q-scroll-area visible style="height: 70vh">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="search"
|
||||
placeholder="ค้นหา"
|
||||
class="q-mb-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-tree
|
||||
:nodes="nodesTree"
|
||||
dense
|
||||
node-key="id"
|
||||
v-model:selected="selected"
|
||||
v-model:expanded="expanded"
|
||||
no-selection-unset
|
||||
selected-color="primary"
|
||||
@update:selected="onSelected"
|
||||
default-expand-all
|
||||
/>
|
||||
</q-scroll-area>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="col-12 row q-py-sm items-center">
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterModal"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterModal == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterModal !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumnsModal"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columnsModal"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rowsModal"
|
||||
:columns="columnsModal"
|
||||
:visible-columns="visibleColumnsModal"
|
||||
:filter="filterModal"
|
||||
row-key="name"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedModal"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-selection="scope">
|
||||
<!-- <q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:model-value="scope.selected"
|
||||
@update:model-value="
|
||||
(val, evt) => {
|
||||
Object.getOwnPropertyDescriptor(scope, 'selected').set(
|
||||
val,
|
||||
evt
|
||||
);
|
||||
}
|
||||
"
|
||||
/> -->
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="public"
|
||||
icon="mdi-content-save-outline"
|
||||
@click="clickClose"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
|
@ -681,4 +379,308 @@ const onSelected = async (id: string) => {
|
|||
|
||||
const deleteData = async (id: string) => {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
|
||||
<div class="col-12 row q-py-sm items-center">
|
||||
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="idcard" :props="props">
|
||||
{{ props.row.idcard }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="agency" :props="props">
|
||||
{{ props.row.agency }}
|
||||
</q-td>
|
||||
<q-td key="send" :props="props">
|
||||
<q-select
|
||||
:class="getClass(true)"
|
||||
hide-bottom-space
|
||||
multiple
|
||||
:outlined="true"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="props.row.mutiselect"
|
||||
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
|
||||
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="optionSelect"
|
||||
option-value="id"
|
||||
input-debounce="0"
|
||||
color="primary"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-black">
|
||||
ไม่พบข้อมูลที่ค้นหา
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<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>
|
||||
</d-table>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="chevron_left"
|
||||
@click="previous"
|
||||
class="q-pr-md"
|
||||
label="เลือกรายชื่อ"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="next"
|
||||
class="q-px-md"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</q-btn>
|
||||
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
||||
<q-tooltip>ต่อไป</q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-5 row">
|
||||
<q-card flat bordered class="fit q-pa-sm">
|
||||
<q-scroll-area visible style="height: 70vh">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="search"
|
||||
placeholder="ค้นหา"
|
||||
class="q-mb-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-tree
|
||||
:nodes="nodesTree"
|
||||
dense
|
||||
node-key="id"
|
||||
v-model:selected="selected"
|
||||
v-model:expanded="expanded"
|
||||
no-selection-unset
|
||||
selected-color="primary"
|
||||
@update:selected="onSelected"
|
||||
default-expand-all
|
||||
/>
|
||||
</q-scroll-area>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="col-12 row q-py-sm items-center">
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterModal"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterModal == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterModal !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumnsModal"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columnsModal"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rowsModal"
|
||||
:columns="columnsModal"
|
||||
:visible-columns="visibleColumnsModal"
|
||||
:filter="filterModal"
|
||||
row-key="name"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedModal"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-selection="scope">
|
||||
<!-- <q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:model-value="scope.selected"
|
||||
@update:model-value="
|
||||
(val, evt) => {
|
||||
Object.getOwnPropertyDescriptor(scope, 'selected').set(
|
||||
val,
|
||||
evt
|
||||
);
|
||||
}
|
||||
"
|
||||
/> -->
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="public"
|
||||
icon="mdi-content-save-outline"
|
||||
@click="clickClose"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,109 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
import type { QForm } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const dialog = ref<boolean>(false);
|
||||
|
||||
// onUnmounted(() => {
|
||||
// window.removeEventListener("resize", (e: any) => {
|
||||
// myEventHandler(e);
|
||||
// });
|
||||
// });
|
||||
|
||||
onMounted(async () => {
|
||||
// window.addEventListener("resize", (e: any) => {
|
||||
// myEventHandler(e);
|
||||
// });
|
||||
|
||||
const pdfData = usePDF("/src/assets/05_modules.pdf");
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// const myEventHandler = (e: any) => {
|
||||
// console.log("e", e.target.innerWidth);
|
||||
// if (vuePDFRef !== null) {
|
||||
// vuePDFRef.value.reload();
|
||||
// }
|
||||
// };
|
||||
|
||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const vuePDFRef = ref<any>(null);
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const splitterModel = ref<number>(70);
|
||||
const tab = ref<string>("main");
|
||||
const fileOrder = ref<any>(null);
|
||||
const fileTailer = ref<any>(null);
|
||||
|
||||
const order = ref<string>("");
|
||||
const years = ref<number>(new Date().getFullYear());
|
||||
const date = ref<Date>(new Date());
|
||||
|
||||
const onchangePage = (val: any) => {
|
||||
// console.log(val);
|
||||
if (vuePDFRef !== null) {
|
||||
vuePDFRef.value.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value!.validate().then((success: Boolean) => {
|
||||
if (success) {
|
||||
// yay, models are correct
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
return (
|
||||
fileOrder.value !== null &&
|
||||
fileOrder.value !== null &&
|
||||
order.value.trim() !== ""
|
||||
);
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
||||
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
||||
const setTab = (val: string) => {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="min-height: 70vh">
|
||||
|
|
@ -416,111 +522,7 @@
|
|||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
import type { QForm } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const dialog = ref<boolean>(false);
|
||||
|
||||
// onUnmounted(() => {
|
||||
// window.removeEventListener("resize", (e: any) => {
|
||||
// myEventHandler(e);
|
||||
// });
|
||||
// });
|
||||
|
||||
onMounted(async () => {
|
||||
// window.addEventListener("resize", (e: any) => {
|
||||
// myEventHandler(e);
|
||||
// });
|
||||
|
||||
const pdfData = usePDF("/src/assets/05_modules.pdf");
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// const myEventHandler = (e: any) => {
|
||||
// console.log("e", e.target.innerWidth);
|
||||
// if (vuePDFRef !== null) {
|
||||
// vuePDFRef.value.reload();
|
||||
// }
|
||||
// };
|
||||
|
||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const vuePDFRef = ref<any>(null);
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const splitterModel = ref<number>(70);
|
||||
const tab = ref<string>("main");
|
||||
const fileOrder = ref<any>(null);
|
||||
const fileTailer = ref<any>(null);
|
||||
|
||||
const order = ref<string>("");
|
||||
const years = ref<number>(new Date().getFullYear());
|
||||
const date = ref<Date>(new Date());
|
||||
|
||||
const onchangePage = (val: any) => {
|
||||
// console.log(val);
|
||||
if (vuePDFRef !== null) {
|
||||
vuePDFRef.value.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value!.validate().then((success: Boolean) => {
|
||||
if (success) {
|
||||
// yay, models are correct
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
return (
|
||||
fileOrder.value !== null &&
|
||||
fileOrder.value !== null &&
|
||||
order.value.trim() !== ""
|
||||
);
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
||||
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
||||
const setTab = (val: string) => {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.border {
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,157 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
// import type {
|
||||
// TypeFile,
|
||||
// ResponseDataDetail,
|
||||
// } from "@/modules/05_placement/interface/response/Transfer";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const edit = ref<boolean>(false);
|
||||
const dataId = route.params.id as string;
|
||||
const {
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const roleAdmin = ref<boolean>(false);
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const name = ref<string>("นายสมคิด ยอดใจ");
|
||||
const level = ref<string>("ชำนาญการพิเศษ");
|
||||
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
|
||||
const fullname = ref<string>("");
|
||||
const id = ref<string>("");
|
||||
const profileId = ref<string>("");
|
||||
const prefix = ref<string>("");
|
||||
const firstName = ref<string>("");
|
||||
const lastName = ref<string>("");
|
||||
const position = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const positionLevel = ref<string>("");
|
||||
const createdAt = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
const reason = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
const dateStart = ref<Date | null>(null);
|
||||
const dateEnd = ref<Date | null>(null);
|
||||
const salary = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const positionNumberOld = ref<string>("");
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const isActive = ref<string>("");
|
||||
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.officerDetail(dataId))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
|
||||
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
|
||||
(id.value = data.id);
|
||||
profileId.value = data.profileId;
|
||||
prefix.value = data.prefix;
|
||||
firstName.value = data.firstName;
|
||||
lastName.value = data.lastName;
|
||||
position.value = data.position;
|
||||
posNo.value = data.posNo;
|
||||
positionLevel.value = data.positionLevel;
|
||||
createdAt.value = data.createdAt;
|
||||
organization.value = data.organization;
|
||||
reason.value = data.reason;
|
||||
status.value = data.status;
|
||||
dateStart.value = data.dateStart;
|
||||
dateEnd.value = data.dateEnd;
|
||||
salary.value = data.salary;
|
||||
positionTypeOld.value = data.positionTypeOld;
|
||||
positionLevelOld.value = data.positionLevelOld;
|
||||
positionNumberOld.value = data.positionNumberOld;
|
||||
organizationPositionOld.value = data.organizationPositionOld;
|
||||
isActive.value = data.isActive;
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
//
|
||||
const conditionSave = async () => {
|
||||
// if (myForm.value !== null) {
|
||||
// myForm.value.validate().then((success: any) => {
|
||||
// if (success) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => await saveData(),
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
|
||||
);
|
||||
};
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
const cancelBtn = () => {
|
||||
edit.value = !edit;
|
||||
getData();
|
||||
};
|
||||
const saveData = async () => {
|
||||
const body = {
|
||||
organization: organization.value,
|
||||
reason: reason.value,
|
||||
organizationPositionOld: organizationPositionOld.value,
|
||||
dateStart: dateStart.value,
|
||||
dateEnd: dateEnd.value,
|
||||
positionTypeOld: positionTypeOld.value,
|
||||
positionLevelOld: positionLevelOld.value,
|
||||
positionNumberOld: posNo.value,
|
||||
amountOld: salary.value,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.officerMainEdit(dataId), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
|
|
@ -320,159 +474,7 @@
|
|||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
// import type {
|
||||
// TypeFile,
|
||||
// ResponseDataDetail,
|
||||
// } from "@/modules/05_placement/interface/response/Transfer";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const edit = ref<boolean>(false);
|
||||
const dataId = route.params.id as string;
|
||||
const {
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const roleAdmin = ref<boolean>(false);
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const name = ref<string>("นายสมคิด ยอดใจ");
|
||||
const level = ref<string>("ชำนาญการพิเศษ");
|
||||
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
|
||||
const fullname = ref<string>("");
|
||||
const id = ref<string>("");
|
||||
const profileId = ref<string>("");
|
||||
const prefix = ref<string>("");
|
||||
const firstName = ref<string>("");
|
||||
const lastName = ref<string>("");
|
||||
const position = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const positionLevel = ref<string>("");
|
||||
const createdAt = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
const reason = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
const dateStart = ref<Date | null>(null);
|
||||
const dateEnd = ref<Date | null>(null);
|
||||
const salary = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const positionNumberOld = ref<string>("");
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const isActive = ref<string>("");
|
||||
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.officerDetail(dataId))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
|
||||
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
|
||||
(id.value = data.id);
|
||||
profileId.value = data.profileId;
|
||||
prefix.value = data.prefix;
|
||||
firstName.value = data.firstName;
|
||||
lastName.value = data.lastName;
|
||||
position.value = data.position;
|
||||
posNo.value = data.posNo;
|
||||
positionLevel.value = data.positionLevel;
|
||||
createdAt.value = data.createdAt;
|
||||
organization.value = data.organization;
|
||||
reason.value = data.reason;
|
||||
status.value = data.status;
|
||||
dateStart.value = data.dateStart;
|
||||
dateEnd.value = data.dateEnd;
|
||||
salary.value = data.salary;
|
||||
positionTypeOld.value = data.positionTypeOld;
|
||||
positionLevelOld.value = data.positionLevelOld;
|
||||
positionNumberOld.value = data.positionNumberOld;
|
||||
organizationPositionOld.value = data.organizationPositionOld;
|
||||
isActive.value = data.isActive;
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
//
|
||||
const conditionSave = async () => {
|
||||
// if (myForm.value !== null) {
|
||||
// myForm.value.validate().then((success: any) => {
|
||||
// if (success) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => await saveData(),
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
|
||||
);
|
||||
};
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
const cancelBtn = () => {
|
||||
edit.value = !edit;
|
||||
getData();
|
||||
};
|
||||
const saveData = async () => {
|
||||
const body = {
|
||||
organization: organization.value,
|
||||
reason: reason.value,
|
||||
organizationPositionOld: organizationPositionOld.value,
|
||||
dateStart: dateStart.value,
|
||||
dateEnd: dateEnd.value,
|
||||
positionTypeOld: positionTypeOld.value,
|
||||
positionLevelOld: positionLevelOld.value,
|
||||
positionNumberOld: posNo.value,
|
||||
amountOld: salary.value,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.officerMainEdit(dataId), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -1,259 +1,3 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div>
|
||||
<q-btn
|
||||
@click="modal = true"
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click="router.push(`/probation/detail/${props.row.personal_id}`)"
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'probation_status'">
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-if="props.row.probation_status === 'PENDING'"
|
||||
name="mdi-timer-sand"
|
||||
color="deep-orange"
|
||||
/>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="props.row.probation_status === 'PROCESS'"
|
||||
name="mdi-timer-sand"
|
||||
color="deep-orange"
|
||||
/>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="props.row.probation_status === 'PASS'"
|
||||
name="mdi-check"
|
||||
color="teal"
|
||||
/>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="props.row.probation_status === 'NO-PASS'"
|
||||
name="mdi-close"
|
||||
color="red"
|
||||
/>
|
||||
{{
|
||||
props.row.probation_status === "PENDING"
|
||||
? "รอมอบหมายงาน"
|
||||
: props.row.probation_status === "PROCESS"
|
||||
? "อยู่ระหว่างทดลองงาน"
|
||||
: props.row.probation_status === "PASS"
|
||||
? "ผ่านการทดลองงาน"
|
||||
: props.row.probation_status === "NO-PASS"
|
||||
? "ไม่ผ่านการทดลองงาน"
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 900px; max-width: 80vw">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
|
||||
:close="clickClose"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-md q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword2"
|
||||
ref="filterRef2"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword2 == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword2 !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter2"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table2"
|
||||
:columns="columns2"
|
||||
:rows="rows2"
|
||||
:filter="filterKeyword2"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
class="q-px-md"
|
||||
outline
|
||||
color="primary"
|
||||
label="เพิ่ม"
|
||||
@click="clickAdd(props.row.id)"
|
||||
>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs, onMounted, watch } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -610,6 +354,262 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div>
|
||||
<q-btn
|
||||
@click="modal = true"
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click="router.push(`/probation/detail/${props.row.personal_id}`)"
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'probation_status'">
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-if="props.row.probation_status === 'PENDING'"
|
||||
name="mdi-timer-sand"
|
||||
color="deep-orange"
|
||||
/>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="props.row.probation_status === 'PROCESS'"
|
||||
name="mdi-timer-sand"
|
||||
color="deep-orange"
|
||||
/>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="props.row.probation_status === 'PASS'"
|
||||
name="mdi-check"
|
||||
color="teal"
|
||||
/>
|
||||
<q-icon
|
||||
size="20px"
|
||||
v-else-if="props.row.probation_status === 'NO-PASS'"
|
||||
name="mdi-close"
|
||||
color="red"
|
||||
/>
|
||||
{{
|
||||
props.row.probation_status === "PENDING"
|
||||
? "รอมอบหมายงาน"
|
||||
: props.row.probation_status === "PROCESS"
|
||||
? "อยู่ระหว่างทดลองงาน"
|
||||
: props.row.probation_status === "PASS"
|
||||
? "ผ่านการทดลองงาน"
|
||||
: props.row.probation_status === "NO-PASS"
|
||||
? "ไม่ผ่านการทดลองงาน"
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 900px; max-width: 80vw">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
|
||||
:close="clickClose"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-md q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword2"
|
||||
ref="filterRef2"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword2 == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword2 !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter2"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table2"
|
||||
:columns="columns2"
|
||||
:rows="rows2"
|
||||
:filter="filterKeyword2"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
class="q-px-md"
|
||||
outline
|
||||
color="primary"
|
||||
label="เพิ่ม"
|
||||
@click="clickAdd(props.row.id)"
|
||||
>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.filter-card {
|
||||
background-color: #f1f1f1b0;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,163 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { ref, useAttrs, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
|
||||
import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { date, useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const personalId = ref<string>(route.params.id as string);
|
||||
const name = ref<string>("");
|
||||
const position_line = ref<string>("");
|
||||
const position_level = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
const probation_status = ref<string>("");
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"date_start",
|
||||
"date_finish",
|
||||
"mentors",
|
||||
"commander",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "date_start",
|
||||
align: "left",
|
||||
label: "ตั้งแต่วันที่",
|
||||
sortable: true,
|
||||
field: "date_start",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "date_finish",
|
||||
align: "left",
|
||||
label: "ถึงวันที่",
|
||||
sortable: true,
|
||||
field: "date_finish",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "mentors",
|
||||
align: "left",
|
||||
label: "ผู้ดูแล",
|
||||
sortable: true,
|
||||
field: "mentors",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "commander",
|
||||
align: "left",
|
||||
label: "ผู้บังคับบัญชา",
|
||||
sortable: true,
|
||||
field: "commander",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormProbationDetail[]>([]);
|
||||
|
||||
const clickAdd = () => {};
|
||||
|
||||
const clickSelect = (id: string) => {
|
||||
// console.log(route.fullPath);
|
||||
router.push(`${route.fullPath}/${id}`);
|
||||
};
|
||||
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const getAssignList = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.probationGetAssignList(personalId.value))
|
||||
.then((res) => {
|
||||
console.log("LIST ===>", res.data.data);
|
||||
const data = res.data.data;
|
||||
rows.value = data.map((item: FormProbationDetail) => ({
|
||||
id: item.id,
|
||||
round_no: item.round_no,
|
||||
date_start: date2Thai(new Date(item.date_start)),
|
||||
date_finish: date2Thai(new Date(item.date_finish)),
|
||||
mentors: item.mentors,
|
||||
commander: item.commander,
|
||||
chairman: item.chairman,
|
||||
}));
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const getpersonalList = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.personal(personalId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.data;
|
||||
name.value = data.name;
|
||||
position_line.value = data.position_line;
|
||||
position_level.value = data.position_level;
|
||||
organization.value = data.organization;
|
||||
probation_status.value = data.probation_status;
|
||||
|
||||
console.log("(data)", data);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await getpersonalList();
|
||||
await getAssignList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
|
|
@ -212,165 +372,7 @@
|
|||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { ref, useAttrs, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
|
||||
import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { date, useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const personalId = ref<string>(route.params.id as string);
|
||||
const name = ref<string>("");
|
||||
const position_line = ref<string>("");
|
||||
const position_level = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
const probation_status = ref<string>("");
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"date_start",
|
||||
"date_finish",
|
||||
"mentors",
|
||||
"commander",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "date_start",
|
||||
align: "left",
|
||||
label: "ตั้งแต่วันที่",
|
||||
sortable: true,
|
||||
field: "date_start",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "date_finish",
|
||||
align: "left",
|
||||
label: "ถึงวันที่",
|
||||
sortable: true,
|
||||
field: "date_finish",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "mentors",
|
||||
align: "left",
|
||||
label: "ผู้ดูแล",
|
||||
sortable: true,
|
||||
field: "mentors",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "commander",
|
||||
align: "left",
|
||||
label: "ผู้บังคับบัญชา",
|
||||
sortable: true,
|
||||
field: "commander",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormProbationDetail[]>([]);
|
||||
|
||||
const clickAdd = () => {};
|
||||
|
||||
const clickSelect = (id: string) => {
|
||||
// console.log(route.fullPath);
|
||||
router.push(`${route.fullPath}/${id}`);
|
||||
};
|
||||
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const getAssignList = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.probationGetAssignList(personalId.value))
|
||||
.then((res) => {
|
||||
console.log("LIST ===>", res.data.data);
|
||||
const data = res.data.data;
|
||||
rows.value = data.map((item: FormProbationDetail) => ({
|
||||
id: item.id,
|
||||
round_no: item.round_no,
|
||||
date_start: date2Thai(new Date(item.date_start)),
|
||||
date_finish: date2Thai(new Date(item.date_finish)),
|
||||
mentors: item.mentors,
|
||||
commander: item.commander,
|
||||
chairman: item.chairman,
|
||||
}));
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const getpersonalList = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.personal(personalId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.data;
|
||||
name.value = data.name;
|
||||
position_line.value = data.position_line;
|
||||
position_level.value = data.position_level;
|
||||
organization.value = data.organization;
|
||||
probation_status.value = data.probation_status;
|
||||
|
||||
console.log("(data)", data);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await getpersonalList();
|
||||
await getAssignList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,331 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { ref, onMounted } from "vue";
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRetirementDataStore } from "@/modules/06_retirement/store";
|
||||
|
||||
import CurrencyInput from "@/components/CurruncyInput.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
||||
import type {
|
||||
ResponseItems,
|
||||
TypeFile,
|
||||
} from "@/modules/06_retirement/interface/response/Main";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const RetirementData = useRetirementDataStore();
|
||||
|
||||
const {
|
||||
messageError,
|
||||
date2Thai,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
dialogMessage,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
const { statusText } = RetirementData;
|
||||
|
||||
const roleUser = ref<string>("");
|
||||
const id = ref<string>(route.params.id.toString());
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const myFormConfirm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
const dataDetail = ref<any>({
|
||||
datetext: "",
|
||||
activeDate: new Date(),
|
||||
createdAt: new Date(),
|
||||
firstName: "",
|
||||
id: "",
|
||||
isActive: true,
|
||||
lastName: "",
|
||||
location: "",
|
||||
organizationPositionOld: "",
|
||||
positionLevelOld: "",
|
||||
positionNumberOld: "",
|
||||
positionTypeOld: "",
|
||||
prefix: "",
|
||||
profileId: "",
|
||||
reason: "",
|
||||
salary: 0,
|
||||
sendDate: new Date(),
|
||||
status: "",
|
||||
statustext: "",
|
||||
fullname: "",
|
||||
});
|
||||
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const salary = ref<number>(0);
|
||||
const date = ref<Date | null>(null);
|
||||
const dateLeave = ref<Date | null>(null);
|
||||
const reason = ref<string>("");
|
||||
const location = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const actionPass = ref<boolean>(false);
|
||||
const reasonReign = ref<string>("");
|
||||
const dateBreak = ref<Date | null>(null);
|
||||
|
||||
const rows = ref<TypeFile[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fileName",
|
||||
align: "left",
|
||||
label: "ชื่อไฟล์",
|
||||
sortable: true,
|
||||
field: "fileName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "btnMicrosoft",
|
||||
align: "right",
|
||||
label: "ปุ่ม",
|
||||
sortable: true,
|
||||
field: "btnMicrosoft",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const closeModal = () => (modal.value = false);
|
||||
const openModal = () => (modal.value = true);
|
||||
|
||||
onMounted(async () => {
|
||||
fetchData(id.value);
|
||||
if (keycloak.tokenParsed !== undefined) {
|
||||
const commander = await keycloak.tokenParsed.role.includes("commander");
|
||||
const oligarch = await keycloak.tokenParsed.role.includes("oligarch");
|
||||
if (commander) {
|
||||
roleUser.value = "commander";
|
||||
} else if (oligarch) {
|
||||
roleUser.value = "oligarch";
|
||||
} else {
|
||||
roleUser.value = "admin";
|
||||
}
|
||||
console.log(roleUser.value);
|
||||
}
|
||||
});
|
||||
|
||||
const diffDate = () => {
|
||||
if (date.value !== null && dateLeave.value !== null) {
|
||||
const time = dateLeave.value.getTime() - date.value.getTime();
|
||||
//วันที่ขอลาออกจากราชการ - วันที่ยื่นขอลาออกจากราชการ
|
||||
const day = time / (1000 * 3600 * 24);
|
||||
|
||||
if (day < 30) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const fetchData = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.resingByid(id))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
let list: TypeFile[] = [];
|
||||
if (data.docs.length > 0) {
|
||||
data.docs.map((doc: TypeFile) => {
|
||||
list.push({
|
||||
pathName: doc.pathName ?? "",
|
||||
fileName: doc.fileName ?? "",
|
||||
});
|
||||
});
|
||||
}
|
||||
rows.value = list;
|
||||
dataDetail.value = data;
|
||||
organizationPositionOld.value = data.organizationPositionOld ?? "";
|
||||
positionTypeOld.value = data.positionTypeOld ?? "";
|
||||
positionLevelOld.value = data.positionLevelOld ?? "";
|
||||
posNo.value = data.positionNumberOld ?? "";
|
||||
salary.value = data.salary ? data.salary : 0;
|
||||
date.value = data.sendDate ? new Date(data.sendDate) : null;
|
||||
dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
|
||||
reason.value = data.reason ?? "";
|
||||
location.value = data.location ?? "";
|
||||
status.value = data.status ?? "";
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const popUp = (action: "pass" | "passNot") => {
|
||||
reasonReign.value = "";
|
||||
dateBreak.value = null;
|
||||
actionPass.value = action === "pass";
|
||||
openModal();
|
||||
};
|
||||
|
||||
const conditionPopup = () => {
|
||||
if (myFormConfirm.value !== null) {
|
||||
myFormConfirm.value.validate().then(async (check) => {
|
||||
if (check) {
|
||||
if (actionPass.value) {
|
||||
await confirmpopUp();
|
||||
} else {
|
||||
await rejectpopUp();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const confirmpopUp = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const body = {
|
||||
reason: reasonReign.value,
|
||||
};
|
||||
await http
|
||||
.put(config.API.resignConfirm(roleUser.value, id.value), body)
|
||||
.then(() => {
|
||||
console.log("ยืนยัน");
|
||||
success($q, "การอนุมัติสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
},
|
||||
"ยืนยันการอนุมัติ",
|
||||
"ต้องการยืนยันการอนุมัติการลานี้หรือไม่ ?"
|
||||
);
|
||||
};
|
||||
|
||||
const rejectpopUp = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const body = {
|
||||
reason: reasonReign.value,
|
||||
date: dateBreak.value,
|
||||
};
|
||||
await http
|
||||
.put(config.API.resignReject(roleUser.value, id.value), body)
|
||||
.then(() => {
|
||||
success($q, "การยับยั้งสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
},
|
||||
"ยืนยันการยับยั้ง",
|
||||
"ต้องการยืนยันการยับยั้งนี้หรือไม่ ?"
|
||||
);
|
||||
};
|
||||
const redirectToRegistry = (id: string) => {
|
||||
router.push(`/registry/${id}`);
|
||||
};
|
||||
|
||||
const conditionSave = () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then((success) => {
|
||||
if (success) {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลรายละเอียดการลาออก",
|
||||
"mdi-help-circle-outline",
|
||||
"ตกลง",
|
||||
"public",
|
||||
async () => await saveData(),
|
||||
undefined
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const formData = new FormData();
|
||||
const send = date.value !== null ? new Date(date.value).toUTCString() : "";
|
||||
const activeDate =
|
||||
dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
|
||||
formData.append("Location", location.value);
|
||||
formData.append("SendDate", send);
|
||||
formData.append("ActiveDate", activeDate);
|
||||
formData.append("Reason", reason.value);
|
||||
formData.append("OrganizationPositionOld", organizationPositionOld.value);
|
||||
formData.append("PositionTypeOld", positionTypeOld.value);
|
||||
formData.append("PositionLevelOld", positionLevelOld.value);
|
||||
formData.append("PositionNumberOld", posNo.value);
|
||||
formData.append("AmountOld", salary.value.toString());
|
||||
salary;
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.resingByid(id.value), formData)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData(id.value);
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
const statusOrder = (val: boolean) => {
|
||||
switch (val) {
|
||||
case true:
|
||||
return "ยับยั้งการลาออก";
|
||||
case false:
|
||||
return "อนุมัติการลาออก";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
|
|
@ -75,7 +403,13 @@
|
|||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-x-sm" v-if="dataDetail.status === 'WAITTING'">
|
||||
<div
|
||||
class="q-gutter-x-sm"
|
||||
v-if="
|
||||
(roleUser === 'commander' && dataDetail.commanderReject === null) ||
|
||||
(roleUser === 'oligarch' && dataDetail.oligarchReject === null)
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
|
|
@ -167,7 +501,16 @@
|
|||
{{ props.row.fileName }}
|
||||
</q-td>
|
||||
<q-td key="btnMicrosoft" :props="props">
|
||||
<q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf">
|
||||
<q-btn
|
||||
type="a"
|
||||
target="_blank"
|
||||
:href="props.row.pathName"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="red"
|
||||
icon="picture_as_pdf"
|
||||
>
|
||||
<q-tooltip>ไฟล์ PDF</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
|
|
@ -187,15 +530,46 @@
|
|||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-top">สถานะ</div>
|
||||
<div class="col-12 text-detail">{{ "อนุมัติ/ยับยั้ง" }}</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{
|
||||
dataDetail.commanderReject !== null
|
||||
? statusOrder(dataDetail.commanderReject)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
|
||||
<div class="col-12 text-detail">{{ date2Thai(new Date()) }}</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{
|
||||
dataDetail.commanderRejectDate !== null
|
||||
? date2Thai(dataDetail.commanderRejectDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 row items-start">
|
||||
<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
|
||||
<div class="col-12 text-detail">{{ "ความคิดเห็นและเหตุผล" }}</div>
|
||||
<div
|
||||
class="col-12 text-detail"
|
||||
v-if="dataDetail.commanderReject === false"
|
||||
>
|
||||
{{
|
||||
dataDetail.commanderApproveReason !== null
|
||||
? dataDetail.commanderApproveReason
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="col-12 text-detail"
|
||||
v-if="dataDetail.commanderReject === true"
|
||||
>
|
||||
{{
|
||||
dataDetail.commanderRejectReason !== null
|
||||
? dataDetail.commanderRejectReason
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -211,15 +585,46 @@
|
|||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-top">สถานะ</div>
|
||||
<div class="col-12 text-detail">{{ "อนุมัติ/ยับยั้ง" }}</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{
|
||||
dataDetail.oligarchReject !== null
|
||||
? statusOrder(dataDetail.oligarchReject)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
|
||||
<div class="col-12 text-detail">{{ date2Thai(new Date()) }}</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{
|
||||
dataDetail.oligarchRejectDate !== null
|
||||
? date2Thai(dataDetail.oligarchRejectDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 row items-start">
|
||||
<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
|
||||
<div class="col-12 text-detail">{{ "ความคิดเห็นและเหตุผล" }}</div>
|
||||
<div
|
||||
class="col-12 text-detail"
|
||||
v-if="dataDetail.oligarchReject == false"
|
||||
>
|
||||
{{
|
||||
dataDetail.oligarchApproveReason !== null
|
||||
? dataDetail.oligarchApproveReason
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="col-12 text-detail"
|
||||
v-else-if="dataDetail.oligarchReject == true"
|
||||
>
|
||||
{{
|
||||
dataDetail.oligarchRejectReason !== null
|
||||
? dataDetail.oligarchRejectReason
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -628,369 +1033,7 @@
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { ref, onMounted } from "vue";
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRetirementDataStore } from "@/modules/06_retirement/store";
|
||||
|
||||
import CurrencyInput from "@/components/CurruncyInput.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
ResponseItems,
|
||||
TypeFile,
|
||||
} from "@/modules/06_retirement/interface/response/Main";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const RetirementData = useRetirementDataStore();
|
||||
|
||||
const {
|
||||
messageError,
|
||||
date2Thai,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
dialogMessage,
|
||||
} = mixin;
|
||||
const { statusText } = RetirementData;
|
||||
|
||||
const id = ref<string>(route.params.id.toString());
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const myFormConfirm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
const dataDetail = ref<ResponseItems>({
|
||||
datetext: "",
|
||||
activeDate: new Date(),
|
||||
createdAt: new Date(),
|
||||
firstName: "",
|
||||
id: "",
|
||||
isActive: true,
|
||||
lastName: "",
|
||||
location: "",
|
||||
organizationPositionOld: "",
|
||||
positionLevelOld: "",
|
||||
positionNumberOld: "",
|
||||
positionTypeOld: "",
|
||||
prefix: "",
|
||||
profileId: "",
|
||||
reason: "",
|
||||
salary: 0,
|
||||
sendDate: new Date(),
|
||||
status: "",
|
||||
statustext: "",
|
||||
fullname: "",
|
||||
});
|
||||
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const salary = ref<number>(0);
|
||||
const date = ref<Date | null>(null);
|
||||
const dateLeave = ref<Date | null>(null);
|
||||
const reason = ref<string>("");
|
||||
const location = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const actionPass = ref<boolean>(false);
|
||||
const reasonReign = ref<string>("");
|
||||
const dateBreak = ref<Date | null>(null);
|
||||
|
||||
const rows = ref<TypeFile[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fileName",
|
||||
align: "left",
|
||||
label: "ชื่อไฟล์",
|
||||
sortable: true,
|
||||
field: "fileName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "btnMicrosoft",
|
||||
align: "right",
|
||||
label: "ปุ่ม",
|
||||
sortable: true,
|
||||
field: "btnMicrosoft",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const closeModal = () => (modal.value = false);
|
||||
const openModal = () => (modal.value = true);
|
||||
|
||||
// const modalPass = ref<boolean>(false);
|
||||
// const modalPassNot = ref<boolean>(false);
|
||||
onMounted(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
|
||||
const diffDate = () => {
|
||||
if (date.value !== null && dateLeave.value !== null) {
|
||||
const time = dateLeave.value.getTime() - date.value.getTime();
|
||||
//วันที่ขอลาออกจากราชการ - วันที่ยื่นขอลาออกจากราชการ
|
||||
const day = time / (1000 * 3600 * 24);
|
||||
|
||||
if (day < 30) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const fetchData = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.resingByid(id))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
// console.log(data);
|
||||
let list: TypeFile[] = [];
|
||||
if (data.docs.length > 0) {
|
||||
data.docs.map((doc: TypeFile) => {
|
||||
list.push({
|
||||
pathName: doc.pathName ?? "",
|
||||
fileName: doc.fileName ?? "",
|
||||
});
|
||||
console.log(doc.fileName);
|
||||
|
||||
});
|
||||
}
|
||||
rows.value = list;
|
||||
dataDetail.value = data;
|
||||
organizationPositionOld.value = data.organizationPositionOld ?? "";
|
||||
positionTypeOld.value = data.positionTypeOld ?? "";
|
||||
positionLevelOld.value = data.positionLevelOld ?? "";
|
||||
posNo.value = data.positionNumberOld ?? "";
|
||||
salary.value = data.salary ? data.salary : 0;
|
||||
date.value = data.sendDate ? new Date(data.sendDate) : null;
|
||||
dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
|
||||
reason.value = data.reason ?? "";
|
||||
location.value = data.location ?? "";
|
||||
status.value = data.status ?? "";
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const popUp = (action: "pass" | "passNot") => {
|
||||
reasonReign.value = "";
|
||||
dateBreak.value = null;
|
||||
actionPass.value = action === "pass";
|
||||
openModal();
|
||||
// if (action === "pass") {
|
||||
// $q.dialog({
|
||||
// title: "ยืนยันการอนุมัติการลาออก",
|
||||
// message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
|
||||
// cancel: {
|
||||
// flat: true,
|
||||
// color: "negative",
|
||||
// },
|
||||
// persistent: true,
|
||||
// }).onOk(async () => {
|
||||
// confirmpopUp();
|
||||
// });
|
||||
// } else if (action === "passNot") {
|
||||
// $q.dialog({
|
||||
// title: "ยืนยันการยับยั้งการลาออก",
|
||||
// message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
|
||||
// cancel: {
|
||||
// flat: true,
|
||||
// color: "negative",
|
||||
// },
|
||||
// persistent: true,
|
||||
// }).onOk(async () => {
|
||||
// rejectpopUp();
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
const conditionPopup = () => {
|
||||
if (myFormConfirm.value !== null) {
|
||||
myFormConfirm.value.validate().then(async (check) => {
|
||||
if (check) {
|
||||
if (actionPass.value) {
|
||||
await confirmpopUp();
|
||||
} else {
|
||||
await rejectpopUp();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const confirmpopUp = async () => {
|
||||
const body = {
|
||||
reason: reasonReign.value,
|
||||
};
|
||||
await http
|
||||
.put(config.API.resignConfirm(id.value), body)
|
||||
.then(() => {
|
||||
console.log("ยืนยัน");
|
||||
success($q, "การอนุมัติสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
};
|
||||
|
||||
const rejectpopUp = async () => {
|
||||
const body = {
|
||||
reason: reasonReign.value,
|
||||
};
|
||||
await http
|
||||
.put(config.API.resignReject(id.value), body)
|
||||
.then(() => {
|
||||
success($q, "การยับยั้งสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fetchData(id.value);
|
||||
});
|
||||
};
|
||||
const redirectToRegistry = (id: string) => {
|
||||
router.push(`/registry/${id}`);
|
||||
};
|
||||
|
||||
const conditionSave = () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then((success) => {
|
||||
if (success) {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลรายละเอียดการลาออก",
|
||||
"mdi-help-circle-outline",
|
||||
"ตกลง",
|
||||
"public",
|
||||
async () => await saveData(),
|
||||
undefined
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const formData = new FormData();
|
||||
const send = date.value !== null ? new Date(date.value).toUTCString() : "";
|
||||
const activeDate =
|
||||
dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
|
||||
formData.append("Location", location.value);
|
||||
formData.append("SendDate", send);
|
||||
formData.append("ActiveDate", activeDate);
|
||||
formData.append("Reason", reason.value);
|
||||
formData.append("OrganizationPositionOld", organizationPositionOld.value);
|
||||
formData.append("PositionTypeOld", positionTypeOld.value);
|
||||
formData.append("PositionLevelOld", positionLevelOld.value);
|
||||
formData.append("PositionNumberOld", posNo.value);
|
||||
formData.append("AmountOld", salary.value.toString());
|
||||
salary;
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.resingByid(id.value), formData)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData(id.value);
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
// const clickClose = () => {
|
||||
// userNote.value = "";
|
||||
// modalPass.value = false;
|
||||
// modalPassNot.value = false;
|
||||
// };
|
||||
// const savePass = () => {
|
||||
// $q.dialog({
|
||||
// title: "ยืนยันการขอลาออก",
|
||||
// message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
|
||||
// cancel: {
|
||||
// flat: true,
|
||||
// const: "negative",
|
||||
// },
|
||||
// persistent: true,
|
||||
// })
|
||||
// .onOk(() => {
|
||||
// modalPass.value = false;
|
||||
// console.log("----MSG---- :", userNote.value);
|
||||
// console.log("passSave (close)");
|
||||
// userNote.value = "";
|
||||
// })
|
||||
// .onCancel(() => {})
|
||||
// .onDismiss(() => {});
|
||||
// };
|
||||
// const savePassNot = () => {
|
||||
// $q.dialog({
|
||||
// title: "ยืนยันการขอลาออก",
|
||||
// message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
|
||||
// cancel: {
|
||||
// flat: true,
|
||||
// const: "negative",
|
||||
// },
|
||||
// persistent: true,
|
||||
// })
|
||||
// .onOk(() => {
|
||||
// modalPass.value = false;
|
||||
// console.log("----MSG---- :", userNote.value);
|
||||
// console.log("passSaveNot (close)");
|
||||
// userNote.value = "";
|
||||
// })
|
||||
// .onCancel(() => {})
|
||||
// .onDismiss(() => {});
|
||||
// };
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -1,106 +1,4 @@
|
|||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle col-12 row items-center">
|
||||
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="clickBack" />
|
||||
{{
|
||||
edit
|
||||
? "รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
|
||||
: "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
|
||||
}}
|
||||
</div>
|
||||
<q-form ref="myForm">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-separator />
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-select class="col-10" dense outlined v-model="roundInsig" :options="options" option-value="value"
|
||||
option-label="label" label="รอบการเสนอขอพระราชทานเครื่องราชฯ" @update:model-value="updateDateRange"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกรอบที่'}`]" />
|
||||
<datepicker menu-class-name="modalfix" v-model="yearly" class="col-2" :locale="'th'" autoApply year-picker
|
||||
:enableTimePicker="false" @update:modelValue="updateYear">
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input dense lazy-rules outlined :model-value="yearly + 543"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]" :label="`${'ปีที่เสนอ'}`">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker menu-class-name="modalfix" v-model="dateStart" :locale="'th'" autoApply
|
||||
class="col-xs-12 col-sm-5" borderless :enableTimePicker="false" week-start="0">
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input outlined dense class="full-width datepicker" :model-value="dateStart != null ? date2Thai(dateStart) : null
|
||||
" :label="`${'วันเริ่มต้น'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker menu-class-name="modalfix" v-model="dateEnd" class="col-xs-12 col-sm-5" :locale="'th'"
|
||||
autoApply borderless :enableTimePicker="false" week-start="0">
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input outlined dense class="col-xs-12 col-sm-4"
|
||||
:model-value="dateEnd != null ? date2Thai(dateEnd) : null" :label="`${'วันสิ้นสุด'}`" :rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
|
||||
]">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input class="col-xs-12 col-sm-2" dense outlined v-model="datelast"
|
||||
label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด" />
|
||||
<q-file class="col-xs-12 col-sm-10" outlined dense v-model="files" @added="fileUploadDoc"
|
||||
label="อัปโหลดเอกสารประกอบ" hide-bottom-space lazy-rules>
|
||||
<!-- :rules="[
|
||||
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
|
||||
]" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก"
|
||||
@click="checkSave" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
|
@ -111,12 +9,12 @@ import config from "@/app.config";
|
|||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
success,
|
||||
} = mixin;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -138,18 +36,14 @@ const options = ref([
|
|||
onMounted(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
if (route.params.id) {
|
||||
edit.value = true;
|
||||
showLoader();
|
||||
// console.log(id.value);
|
||||
|
||||
await http
|
||||
.get(config.API.getRoundInsignia(id.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
// const files = res.data.result.files;
|
||||
id.value = data.period_id;
|
||||
roundInsig.value =
|
||||
options.value.filter((r: any) => r.value == data.period_round)
|
||||
|
|
@ -171,8 +65,6 @@ const fetchData = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const routeName = router.currentRoute.value.name;
|
||||
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
|
|
@ -185,7 +77,9 @@ const updateYear = async (e: number) => {
|
|||
|
||||
const editData = async (id: string) => {
|
||||
const formData = new FormData();
|
||||
const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${roundInsig.value.value} ปี ${yearly.value + 543}`;
|
||||
const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
|
||||
roundInsig.value.value
|
||||
} ปี ${yearly.value + 543}`;
|
||||
formData.append("name", name);
|
||||
formData.append("year", yearly.value.toString());
|
||||
formData.append("amount", datelast.value.toString());
|
||||
|
|
@ -196,15 +90,12 @@ const editData = async (id: string) => {
|
|||
if (dateEnd.value !== null) {
|
||||
formData.append("endDate", dateToISO(dateEnd.value));
|
||||
}
|
||||
// files.value.forEach((file: any) => {
|
||||
// formData.append("file", file);
|
||||
// });
|
||||
formData.append("file", files.value);
|
||||
console.log(formData);
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.editRoundInsignia(id), formData)
|
||||
.then(async () => { })
|
||||
.then(async () => {})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
|
|
@ -231,19 +122,7 @@ const SaveData = async () => {
|
|||
});
|
||||
}
|
||||
};
|
||||
|
||||
// const sendData = () => {
|
||||
// const valueData: any = {
|
||||
// Name: roundInsig.value,
|
||||
// year: year.value,
|
||||
// Amount: datelast.value,
|
||||
// dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
|
||||
// dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
|
||||
// };
|
||||
// return valueData;
|
||||
// };
|
||||
const updateDateRange = () => {
|
||||
// console.log("test")
|
||||
if (roundInsig.value.value == 1) {
|
||||
dateStart.value = new Date(new Date().getFullYear(), 9, 1);
|
||||
dateEnd.value = new Date(new Date().getFullYear() + 1, 3, 29);
|
||||
|
|
@ -257,8 +136,9 @@ const updateDateRange = () => {
|
|||
|
||||
const addData = async () => {
|
||||
const formData = new FormData();
|
||||
const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${roundInsig.value.value
|
||||
} ปี ${yearly.value + 543} `;
|
||||
const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
|
||||
roundInsig.value.value
|
||||
} ปี ${yearly.value + 543} `;
|
||||
console.log(name);
|
||||
formData.append("name", name);
|
||||
formData.append("year", yearly.value.toString());
|
||||
|
|
@ -270,17 +150,14 @@ const addData = async () => {
|
|||
if (dateEnd.value !== null) {
|
||||
formData.append("endDate", dateToISO(dateEnd.value));
|
||||
}
|
||||
console.log(files.value);
|
||||
// files.value.forEach((file: any) => {
|
||||
// formData.append("file", file);
|
||||
// });
|
||||
formData.append("file", files.value);
|
||||
console.log(files.value);
|
||||
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.listRoundInsignia(), formData)
|
||||
.then(async (res) => { })
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
|
|
@ -293,3 +170,197 @@ const clickBack = () => {
|
|||
router.push({ name: "insigniaProposals" });
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="clickBack"
|
||||
/>
|
||||
{{
|
||||
edit
|
||||
? "รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
|
||||
: "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
|
||||
}}
|
||||
</div>
|
||||
<q-form ref="myForm">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-separator />
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-select
|
||||
class="col-10"
|
||||
dense
|
||||
outlined
|
||||
v-model="roundInsig"
|
||||
:options="options"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
|
||||
@update:model-value="updateDateRange"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกรอบที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="yearly"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="updateYear"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="yearly + 543"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
|
||||
:label="`${'ปีที่เสนอ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
class="col-xs-12 col-sm-5"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
dateStart != null ? date2Thai(dateStart) : null
|
||||
"
|
||||
:label="`${'วันเริ่มต้น'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateEnd"
|
||||
class="col-xs-12 col-sm-5"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="col-xs-12 col-sm-4"
|
||||
:model-value="dateEnd != null ? date2Thai(dateEnd) : null"
|
||||
:label="`${'วันสิ้นสุด'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-2"
|
||||
dense
|
||||
outlined
|
||||
v-model="datelast"
|
||||
label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
|
||||
/>
|
||||
<q-file
|
||||
class="col-xs-12 col-sm-10"
|
||||
outlined
|
||||
dense
|
||||
v-model="files"
|
||||
@added="fileUploadDoc"
|
||||
label="อัปโหลดเอกสารประกอบ"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
>
|
||||
<!-- :rules="[
|
||||
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
|
||||
]" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
@click="checkSave"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@ import router from "@/router";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
|
||||
import { useRoute } from "vue-router";
|
||||
import config from "@/app.config";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -15,22 +13,12 @@ const {
|
|||
date2Thai,
|
||||
success,
|
||||
messageError,
|
||||
statusLeave,
|
||||
dialogMessage,
|
||||
dateToISO,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const modal = ref<boolean>(false);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"round",
|
||||
|
|
@ -194,34 +182,22 @@ const clickEdit = (col: any) => {
|
|||
router.push(`/insignia/round-add/${col.id}`);
|
||||
};
|
||||
|
||||
// หัวตาราง2
|
||||
const clickDelete = (id: string) => {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการลบข้อมูล",
|
||||
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.RoundInsignia(id))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลการเสนอขอสำเร็จ");
|
||||
fetchData();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.RoundInsignia(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลการเสนอขอสำเร็จ");
|
||||
fetchData();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const clickAdd = () => {
|
||||
|
|
@ -247,12 +223,10 @@ const getRequest = async (id: string) => {
|
|||
showLoader();
|
||||
await http
|
||||
.get(config.API.requestInsignia(id))
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
.then(() => {
|
||||
success($q, "ยืนยันสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
|
|
@ -268,16 +242,14 @@ const resetFilter = () => {
|
|||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const filterKeyword2 = ref<string>("");
|
||||
const filterRef2 = ref<any>(null);
|
||||
const resetFilter2 = () => {
|
||||
filterKeyword2.value = "";
|
||||
filterRef2.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
|
|
|
|||
|
|
@ -12,14 +12,7 @@ import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
|
|||
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogRemove,
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
} = mixin;
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
const $q = useQuasar();
|
||||
const DataStore = useInsigniaDataStore();
|
||||
|
||||
|
|
@ -30,7 +23,6 @@ const modalAdd = ref<boolean>(false);
|
|||
const modalEdit = ref<boolean>(false);
|
||||
const rowid = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
const fileId = ref<string>("");
|
||||
|
||||
const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -178,7 +170,6 @@ const columns2 = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
|
||||
const rows2 = ref<any[]>([]);
|
||||
|
||||
const person = ref<any>([]);
|
||||
const props = defineProps({
|
||||
tab: {
|
||||
|
|
@ -205,10 +196,6 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
onMounted(async () => {
|
||||
// if (DataStore.typeOc == "") {
|
||||
// // organization.value = DataStore.optionsTypeOc[2].id;
|
||||
// DataStore.typeOc = organization.value;
|
||||
// } else organization.value = DataStore.typeOc;
|
||||
organization.value = await (DataStore.agency != null
|
||||
? DataStore.agency
|
||||
: DataStore.typeOc);
|
||||
|
|
@ -250,7 +237,6 @@ const fecthlistRetire = async () => {
|
|||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
// console.log(e);
|
||||
messageError($q, e);
|
||||
});
|
||||
};
|
||||
|
|
@ -271,8 +257,6 @@ const fecthlistperson = async (id: string) => {
|
|||
criterias: data,
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log(res);
|
||||
|
||||
rows2.value = res.data.result.map((e: any) => ({
|
||||
id: e.id,
|
||||
fullname: e.fullname == null ? "-" : e.fullname,
|
||||
|
|
@ -283,14 +267,12 @@ const fecthlistperson = async (id: string) => {
|
|||
modalAdd.value = true;
|
||||
})
|
||||
.catch((e) => {
|
||||
// console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const clickAdd = async (id: string) => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -306,17 +288,14 @@ const addlistperson = async (id: string) => {
|
|||
showLoader();
|
||||
let data = {
|
||||
profileId: id,
|
||||
// insigniaId: organization.value,
|
||||
insigniaPeriodId: props.roundId,
|
||||
};
|
||||
// console.log(data);
|
||||
await http
|
||||
.post(config.API.insigniaCreate(), data)
|
||||
.then(() => {
|
||||
success($q, "เพิ่มรายชื่อสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -333,20 +312,11 @@ const addlistperson = async (id: string) => {
|
|||
});
|
||||
};
|
||||
|
||||
// const clickAction = (props: any, action: string) => {
|
||||
// Note.value = "";
|
||||
// person.value = props;
|
||||
// titleModal.value = props.name;
|
||||
// actionModal.value = action;
|
||||
// modalNote.value = true;
|
||||
// };
|
||||
const clickmodalEdit = (props: any) => {
|
||||
insignia.value = props.insigniaSend;
|
||||
// insigniaType.value = props.insigniaLevel;
|
||||
person.value = props;
|
||||
modalEdit.value = true;
|
||||
fecthInsignia();
|
||||
// fecthInsigniaType();
|
||||
};
|
||||
|
||||
const downloadFile = (response: any, filename: string) => {
|
||||
|
|
@ -393,7 +363,6 @@ const clickSave = () => {
|
|||
const listEdit = async (profileId: string) => {
|
||||
let data: any = {
|
||||
insigniaId: insignia.value,
|
||||
// insigniaTypeId: insigniaType.value,
|
||||
};
|
||||
await http
|
||||
.put(config.API.insigniaEdit(profileId), data)
|
||||
|
|
@ -499,7 +468,6 @@ const listdelete = async (id: string, reason: string) => {
|
|||
const insignia = ref<string>("");
|
||||
const insigniaOptions = ref<any>([]);
|
||||
const insigniaType = ref<string>("");
|
||||
// const insigniaTypeOptions = ref<any>([]);
|
||||
|
||||
const fecthInsignia = async () => {
|
||||
await http
|
||||
|
|
@ -507,17 +475,10 @@ const fecthInsignia = async () => {
|
|||
.then((res) => {
|
||||
insigniaOptions.value = res.data.result;
|
||||
})
|
||||
.catch(() => {
|
||||
// console.log(err);
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
};
|
||||
// const fecthInsigniaType = async () => {
|
||||
// await http(config.API.insigniaType)
|
||||
// .then((res) => {
|
||||
// insigniaTypeOptions.value = res.data.result;
|
||||
// })
|
||||
// .catch((err) => {});
|
||||
// };
|
||||
|
||||
const nextPage = (id: string) => {
|
||||
router.push(`/registry/${id}`);
|
||||
|
|
@ -559,7 +520,6 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
|
|||
<div class="col-12 row q-pa-md">
|
||||
<div class="row col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<!-- {{ DataStore.typeinsigniaOptions }} -->
|
||||
<q-select
|
||||
v-if="props.roleUser == 'admin'"
|
||||
v-model="organization"
|
||||
|
|
@ -958,31 +918,14 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
|
|||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="col">
|
||||
<q-select
|
||||
v-model="insigniaType"
|
||||
label="ชั้นเครื่องราชฯ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="insigniaTypeOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="q-pa-md">
|
||||
<div class="row justify-end">
|
||||
<q-btn label="บันทึก" @click="clickSave" color="public" />
|
||||
<q-btn label="บันทึก" @click="clickSave" color="public"
|
||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -1002,54 +945,4 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
|
|||
:click-close="closemodelPopupDelete"
|
||||
:savaForm="savaReasonDelete"
|
||||
/>
|
||||
|
||||
<!-- note -->
|
||||
<!-- <q-dialog v-model="modalNote" persistent>
|
||||
<q-card style="min-width: 350px">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle2 text-bold">
|
||||
<div v-if="actionModal == 'note'">
|
||||
เป็นเหตุผลที่ไม่ยื่นขอ {{ titleModal }}
|
||||
</div>
|
||||
<div v-if="actionModal == 'delete'">ลบออก {{ titleModal }}</div>
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="modalNote = false"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/> </q-toolbar
|
||||
><q-separator />
|
||||
<q-card-section class="q-pt-none"></q-card-section>
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="เหตุผลที่ไม่ยื่นขอ"
|
||||
v-model="Note"
|
||||
@keyup.enter="modalNote = false"
|
||||
:rules="[(val) => !!val || 'เหตุผลที่ไม่ยื่นขอ']"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
v-if="actionModal == 'note'"
|
||||
label="บันทึก"
|
||||
@click="clickSavenote"
|
||||
color="public"
|
||||
:disable="Note === ''"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="actionModal == 'delete'"
|
||||
label="บันทึก"
|
||||
@click="clickDelete"
|
||||
color="public"
|
||||
:disable="Note === ''"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog> -->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,7 @@ import { useRouter } from "vue-router";
|
|||
import DialogInformation from "@/components/Dialogs/Information.vue";
|
||||
|
||||
const router = useRouter();
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const DataStore = useInsigniaDataStore();
|
||||
|
||||
const props = defineProps({
|
||||
tab: {
|
||||
type: String,
|
||||
|
|
@ -38,7 +34,6 @@ const visibleColumns = ref<string[]>([
|
|||
"position",
|
||||
"level",
|
||||
"salary",
|
||||
|
||||
"insigniaType",
|
||||
"insigniaSend",
|
||||
"insigniaLevel",
|
||||
|
|
@ -143,12 +138,9 @@ onMounted(async () => {
|
|||
organization.value = await (DataStore.agency != null
|
||||
? DataStore.agency
|
||||
: DataStore.typeOc);
|
||||
// if (props.fecthInsigniaAll) {
|
||||
// await props.fecthInsigniaAll(props.roundId, props.tab);
|
||||
// }
|
||||
if (organization.value !== "" || organization.value !== undefined) {
|
||||
if (props.fecthInsigniaByOc) {
|
||||
props.fecthInsigniaByOc(
|
||||
await props.fecthInsigniaByOc(
|
||||
props.roundId,
|
||||
organization.value,
|
||||
"officer",
|
||||
|
|
@ -207,7 +199,6 @@ const closeReson = () => {
|
|||
<template>
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="row col-12">
|
||||
<!-- {{ DataStore.typeinsigniaOptions }} -->
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
v-if="props.roleUser == 'admin'"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import DialogInformation from "@/components/Dialogs/Information.vue";
|
|||
|
||||
const router = useRouter();
|
||||
const DataStore = useInsigniaDataStore();
|
||||
|
||||
const props = defineProps({
|
||||
tab: {
|
||||
type: String,
|
||||
|
|
@ -138,12 +137,10 @@ onMounted(async () => {
|
|||
organization.value = await (DataStore.agency != null
|
||||
? DataStore.agency
|
||||
: DataStore.typeOc);
|
||||
// if (props.fecthInsigniaAll) {
|
||||
// await props.fecthInsigniaAll(props.roundId, props.tab);
|
||||
// }
|
||||
|
||||
if (organization.value !== "" || organization.value !== undefined) {
|
||||
if (props.fecthInsigniaByOc) {
|
||||
props.fecthInsigniaByOc(
|
||||
await props.fecthInsigniaByOc(
|
||||
props.roundId,
|
||||
organization.value,
|
||||
"officer",
|
||||
|
|
@ -152,9 +149,9 @@ onMounted(async () => {
|
|||
}
|
||||
}
|
||||
});
|
||||
const changtypeOc = () => {
|
||||
const changtypeOc = async () => {
|
||||
if (props.fecthInsigniaByOc) {
|
||||
props.fecthInsigniaByOc(
|
||||
await props.fecthInsigniaByOc(
|
||||
props.roundId,
|
||||
organization.value,
|
||||
"officer",
|
||||
|
|
@ -342,8 +339,7 @@ const closeReson = () => {
|
|||
flat
|
||||
round
|
||||
color="blue"
|
||||
@click.stop
|
||||
@click="showNote(props.row)"
|
||||
@click.stop="showNote(props.row)"
|
||||
icon="mdi-information-outline"
|
||||
>
|
||||
<q-tooltip>เหตุผลการลบ</q-tooltip>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import config from "@/app.config";
|
|||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
roundId: {
|
||||
type: String,
|
||||
|
|
@ -73,12 +72,6 @@ const fecthOrg = async () => {
|
|||
});
|
||||
};
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
|
|
@ -94,77 +87,11 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
<template>
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
v-model="organization"
|
||||
label="หน่วยงาน"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="organizationOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
<div>
|
||||
<q-btn size="md" icon="mdi-download" flat round color="primary">
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn size="12px" flat round color="add" icon="mdi-plus">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="name"
|
||||
dense
|
||||
flat
|
||||
|
|
@ -180,8 +107,6 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<!-- <q-th auto-width />
|
||||
<q-th auto-width /> -->
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -21,17 +21,13 @@ const roleUser = ref<string>("admin");
|
|||
const DataStore = useInsigniaDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
|
||||
const router = useRouter();
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
const round = ref<string>("");
|
||||
const roundName = ref<string>("");
|
||||
|
||||
const optionRound = ref<any>([]);
|
||||
// const typeOc = ref<string>("kljkljk");
|
||||
const optiontypeOc = ref<any>([]);
|
||||
|
||||
const tab = ref<any>("pending");
|
||||
const stat = ref<any>({
|
||||
allUserUser: 0,
|
||||
|
|
@ -57,7 +53,6 @@ const checkRole = async () => {
|
|||
} else {
|
||||
roleUser.value = "admin";
|
||||
}
|
||||
// console.log("roleUser ===> ", roleUser.value);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -70,8 +65,6 @@ const fecthlistRound = async () => {
|
|||
year: e.period_year,
|
||||
name: e.period_name,
|
||||
}));
|
||||
// console.log(optionRound.value);
|
||||
// const lastIndex = optionRound.value.length;
|
||||
const lastValue = optionRound.value[0];
|
||||
round.value = lastValue.id.toString();
|
||||
roundName.value = lastValue.name;
|
||||
|
|
@ -126,10 +119,8 @@ const fecthType = async () => {
|
|||
name: e.organizationName,
|
||||
}));
|
||||
DataStore.fetchOption(optiontypeOc.value);
|
||||
// DataStore.optionsTypeOc = ;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -151,21 +142,6 @@ const changround = async () => {
|
|||
roundFilter.year + 543
|
||||
}`;
|
||||
};
|
||||
// const fecthInsigniaAll = async (periodId: string, tab: string) => {
|
||||
// // let data: any = [];
|
||||
// // for (const item of DataStore.optionsTypeOc) {
|
||||
// // await http
|
||||
// // .get(config.API.insigniaList(periodId, item["id"], "officer", tab))
|
||||
// // .then((res) => {
|
||||
// // // console.log(res);
|
||||
// // data.push(res.data.result);
|
||||
// // })
|
||||
// // .catch((err) => {
|
||||
// // console.log(err);
|
||||
// // });
|
||||
// // }
|
||||
// // console.log(data);
|
||||
// };
|
||||
const requestNote = ref<string>("");
|
||||
const requestStatus = ref<string>("");
|
||||
const fecthInsigniaByOc = async (
|
||||
|
|
@ -175,19 +151,16 @@ const fecthInsigniaByOc = async (
|
|||
status: string
|
||||
) => {
|
||||
showLoader();
|
||||
// console.log("ocId===>", ocId);
|
||||
await http
|
||||
.get(config.API.insigniaList(roundId, ocId, role, status))
|
||||
.then(async (res) => {
|
||||
// console.log(res);
|
||||
requestNote.value = res.data.result.requestNote;
|
||||
requestStatus.value = res.data.result.requestStatus;
|
||||
|
||||
await DataStore.fetchData(res.data.result.items);
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
messageError($q);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = true;
|
||||
|
|
@ -210,7 +183,6 @@ const sendToDirector = async () => {
|
|||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -249,7 +221,6 @@ const backToEdit = async (reason: string) => {
|
|||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -279,7 +250,6 @@ const directorApproved = async () => {
|
|||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -308,7 +278,6 @@ const requestSendNote = async () => {
|
|||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -479,7 +448,9 @@ const requestSendNote = async () => {
|
|||
color="public"
|
||||
class="q-px-md q-ml-md"
|
||||
@click="requestSendNote"
|
||||
/>
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
|
||||
<DialogPopupReason
|
||||
|
|
|
|||
|
|
@ -20,22 +20,18 @@ const {
|
|||
hideLoader,
|
||||
notifyError,
|
||||
} = mixin;
|
||||
const status = ref<status>("");
|
||||
const status = ref<string>("");
|
||||
|
||||
const Advertise = ref<string>("");
|
||||
const issue = ref<string>("");
|
||||
const brand = ref<string>("");
|
||||
const cardid = ref<string>("");
|
||||
const prefixId = ref<string>("");
|
||||
const fullName = ref<string>("");
|
||||
const volume = ref<string>("");
|
||||
const episode = ref<string>("");
|
||||
const duty = ref<string>("");
|
||||
const announced = ref<string>("");
|
||||
const firstname = ref<string>("");
|
||||
const lastname = ref<string>("");
|
||||
const position = ref<string>("");
|
||||
const invoice = ref<string | null>(null);
|
||||
const payment = ref<string>("");
|
||||
const addressPayment = ref<string | null>(null);
|
||||
const affiliationRequest = ref<string>("");
|
||||
|
|
@ -56,46 +52,6 @@ const paymentOp = [
|
|||
{ label: "จัดส่งทางไปรษณี", value: "จัดส่งทางไปรษณี" },
|
||||
{ label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
|
||||
];
|
||||
const volumeOp = [
|
||||
{ label: "เล่มที่", value: "xx1" },
|
||||
{ label: "เล่มที่2", value: "xx2" },
|
||||
{ label: "เล่มที่3", value: "xx3" },
|
||||
];
|
||||
const episodeOp = [
|
||||
{ label: "ตอนที่1", value: "xx1" },
|
||||
{ label: "ตอนที่2", value: "xx2" },
|
||||
{ label: "ตอนที่3", value: "xx3" },
|
||||
];
|
||||
const dutyOp = [
|
||||
{ label: "หน้าที่1", value: "xx1" },
|
||||
{ label: "หน้าที่2", value: "xx2" },
|
||||
{ label: "หน้าที่3", value: "xx3" },
|
||||
];
|
||||
const announcedOp = [
|
||||
{ label: "ลำดับที่1", value: "xx1" },
|
||||
{ label: "ลำดับที่2", value: "xx2" },
|
||||
{ label: "ลำดับที่3", value: "xx3" },
|
||||
];
|
||||
const affiliationRequestOp = [
|
||||
{ label: "สังกัด1", value: "xx1" },
|
||||
{ label: "สังกัด2", value: "xx2" },
|
||||
{ label: "สังกัด3", value: "xx3" },
|
||||
];
|
||||
const affiliationReceivedOp = [
|
||||
{ label: "สังกัด4", value: "xx4" },
|
||||
{ label: "สังกัด5", value: "xx5" },
|
||||
{ label: "สังกัด6", value: "xx6" },
|
||||
];
|
||||
const prefixOp = [
|
||||
{ label: "นาย", value: "mr" },
|
||||
{ label: "นางสาว", value: "miss" },
|
||||
{ label: "นาง", value: "mrs" },
|
||||
];
|
||||
const positionOp = [
|
||||
{ label: "ตำแหน่ง1", value: "xxx1" },
|
||||
{ label: "ตำแหน่ง2", value: "xxx2" },
|
||||
{ label: "ตำแหน่ง3", value: "xxx3" },
|
||||
];
|
||||
const clearDateExam = () => {
|
||||
receivedate.value = null;
|
||||
announceDate.value = null;
|
||||
|
|
@ -141,12 +97,12 @@ watch(props, () => {
|
|||
episode.value = "";
|
||||
duty.value = "";
|
||||
announced.value = "";
|
||||
// invoice.value = "";
|
||||
invoiceDate.value = null;
|
||||
payment.value = "";
|
||||
|
||||
if (props.action === "editData") {
|
||||
fectDataByid(props.personId);
|
||||
if (props.personId !== undefined) {
|
||||
if (props.action === "editData") {
|
||||
fectDataByid(props.personId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -205,11 +161,10 @@ const findlist = async (id: string) => {
|
|||
criterias: data,
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log(res.data.result);
|
||||
listPerson.value = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -217,7 +172,9 @@ const findlist = async (id: string) => {
|
|||
};
|
||||
const fectDataByid = async (id: string) => {
|
||||
showLoader();
|
||||
employeeClass.value = "";
|
||||
if (props.profileType !== undefined) {
|
||||
employeeClass.value = props.profileType.toString();
|
||||
}
|
||||
await http
|
||||
.get(config.API.noteByid(id))
|
||||
.then((res) => {
|
||||
|
|
@ -240,7 +197,6 @@ const fectDataByid = async (id: string) => {
|
|||
payment.value = data.typePayment;
|
||||
addressPayment.value = data.address;
|
||||
status.value = data.status;
|
||||
employeeClass.value = props.profileType;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
|
|
@ -264,7 +220,6 @@ const clickSave = async () => {
|
|||
section: episode.value, //ตอนที่
|
||||
page: duty.value, //หน้าที่
|
||||
no: announced.value,
|
||||
// รอฟิล: invoice.value,
|
||||
datePayment: invoiceDate.value, //วันที่จ่าย
|
||||
typePayment: payment.value, // รูปแบบการจ่าย
|
||||
address: addressPayment.value, //ที่อยู่
|
||||
|
|
@ -278,20 +233,21 @@ const clickSave = async () => {
|
|||
});
|
||||
};
|
||||
const addNote = async (body: any) => {
|
||||
await http
|
||||
.put(config.API.noteAdd(props.roundId), body)
|
||||
.then(() => {
|
||||
success($q, "เพิ่มราชชื่อสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
props.close();
|
||||
});
|
||||
if (props.roundId !== undefined) {
|
||||
await http
|
||||
.put(config.API.noteAdd(props.roundId), body)
|
||||
.then(() => {
|
||||
success($q, "เพิ่มราชชื่อสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
props.close();
|
||||
});
|
||||
}
|
||||
};
|
||||
const searchcardid = () => {
|
||||
// console.log(cardid.value);
|
||||
if (cardid.value.length === 13) {
|
||||
let data = listPerson.value.find((e: any) => e.citizenId === cardid.value);
|
||||
if (data) {
|
||||
|
|
@ -314,7 +270,8 @@ const searchcardid = () => {
|
|||
dense
|
||||
@click="props.close"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
><q-tooltip>ปืด</q-tooltip></q-btn
|
||||
>
|
||||
</q-toolbar>
|
||||
<q-separator />
|
||||
|
||||
|
|
@ -368,24 +325,8 @@ const searchcardid = () => {
|
|||
mask="#############"
|
||||
@keyup="searchcardid"
|
||||
/>
|
||||
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
|
||||
</div>
|
||||
<!-- <div class="col-xs-12 col-sm-4">
|
||||
<q-select
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
|
||||
hide-bottom-space
|
||||
:options="prefixOp"
|
||||
class="col-xs-12 col-sm-6 inputgreen"
|
||||
dense
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="prefixId"
|
||||
:label="`คำนำหน้าชื่อ`"
|
||||
:disable="disbleStatus"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<q-input
|
||||
disable
|
||||
|
|
@ -412,35 +353,10 @@ const searchcardid = () => {
|
|||
v-model="position"
|
||||
:label="`ตำเเหน่ง`"
|
||||
/>
|
||||
<!-- <q-select
|
||||
:disable="disbleStatus"
|
||||
hide-bottom-space
|
||||
:options="positionOp"
|
||||
class="col-xs-12 col-sm-6 inputgreen"
|
||||
dense
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="position"
|
||||
:label="`ตำเเหน่ง`"
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<div class="col-6"></div>
|
||||
|
||||
<!-- <div class="col-xs-6 col-sm-3 col-md-5">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="lastname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
|
||||
<div class="col-12 text-weight-bold text-grey">
|
||||
รายละเอียดตำเเหน่ง
|
||||
|
|
@ -462,18 +378,6 @@ const searchcardid = () => {
|
|||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<!-- <q-input
|
||||
:disable="disbleStatus"
|
||||
:rules="[
|
||||
(val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
|
||||
]"
|
||||
hide-bottom-space
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
v-model="brand"
|
||||
label="ชั้นตราเครื่องราชอิสริยาภรณ์"
|
||||
/> -->
|
||||
<q-select
|
||||
:disable="disbleStatus || status == 'DONE'"
|
||||
v-model="brand"
|
||||
|
|
@ -563,20 +467,6 @@ const searchcardid = () => {
|
|||
v-model="affiliationRequest"
|
||||
label="สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์"
|
||||
/>
|
||||
<!-- <q-select
|
||||
:disable="disbleStatus"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
|
||||
hide-bottom-space
|
||||
:options="affiliationRequestOp"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="affiliationRequest"
|
||||
:label="`สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์`"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-input
|
||||
|
|
@ -591,19 +481,6 @@ const searchcardid = () => {
|
|||
v-model="affiliationReceived"
|
||||
label="สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์"
|
||||
/>
|
||||
<!-- <q-select
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
|
||||
hide-bottom-space
|
||||
:options="affiliationReceivedOp"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="affiliationReceived"
|
||||
:label="`สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์`"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
|
||||
<div class="col-12 text-weight-bold text-grey">
|
||||
|
|
@ -665,21 +542,6 @@ const searchcardid = () => {
|
|||
:label="`เล่มที่`"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกเล่มที่']"
|
||||
/>
|
||||
<!-- <q-select
|
||||
:disable="disbleStatus"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกเล่มที่']"
|
||||
hide-bottom-space
|
||||
:options="volumeOp"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
emit-value
|
||||
v-model="volume"
|
||||
:label="`เล่มที่`"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<q-input
|
||||
|
|
@ -694,21 +556,6 @@ const searchcardid = () => {
|
|||
:label="`ตอนที่`"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกตอนที่']"
|
||||
/>
|
||||
<!-- <q-select
|
||||
:disable="disbleStatus"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกตอนที่']"
|
||||
hide-bottom-space
|
||||
:options="episodeOp"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="episode"
|
||||
emit-value
|
||||
:label="`ตอนที่`"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-input
|
||||
|
|
@ -723,21 +570,6 @@ const searchcardid = () => {
|
|||
:label="`หน้าที่`"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกหน้าที่']"
|
||||
/>
|
||||
<!-- <q-select
|
||||
:disable="disbleStatus"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน้าที่']"
|
||||
hide-bottom-space
|
||||
:options="dutyOp"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
emit-value
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="duty"
|
||||
:label="`หน้าที่`"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-input
|
||||
|
|
@ -752,36 +584,11 @@ const searchcardid = () => {
|
|||
:label="`ลำดับที่`"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกลำดับที่']"
|
||||
/>
|
||||
<!-- <q-select
|
||||
:disable="disbleStatus"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกลำดับที่']"
|
||||
hide-bottom-space
|
||||
:options="announcedOp"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
emit-value
|
||||
borderless
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="announced"
|
||||
:label="`ลำดับที่`"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
|
||||
<div class="col-12 text-weight-bold text-grey">
|
||||
ผลการจ่ายใบกำกับ
|
||||
</div>
|
||||
<!-- <div class="col-xs-12 col-sm-4"> -->
|
||||
<!-- :rules="[(val) => !!val || 'กรุณากรแกหมายเล่นใบกำกับ']" -->
|
||||
<!-- <q-input
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
v-model="invoice"
|
||||
label="หมายเลขใบกํากับ"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -860,7 +667,9 @@ const searchcardid = () => {
|
|||
<q-separator />
|
||||
<div class="q-pa-md">
|
||||
<div class="row justify-end">
|
||||
<q-btn label="บันทึก" @click="clickSave" color="public" />
|
||||
<q-btn label="บันทึก" @click="clickSave" color="public"
|
||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { success, messageError,hideLoader,dialogConfirm } = mixin
|
||||
const mixin = useCounterMixin();
|
||||
const { success, messageError, hideLoader, dialogConfirm, showLoader } = mixin;
|
||||
const fileUpload = ref<any>(null);
|
||||
const reason = ref<string>("");
|
||||
const file = ref<string>("");
|
||||
const documentTitle = ref<string>("");
|
||||
const $q = useQuasar();
|
||||
const $q = useQuasar();
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterDoc = ref<any>(null);
|
||||
|
||||
|
|
@ -55,9 +54,9 @@ const colums2 = ref<QTableProps["columns"]>([
|
|||
const rows2 = ref<any>([]);
|
||||
|
||||
interface TypeData {
|
||||
fileName:string
|
||||
reason:string
|
||||
pathName:string
|
||||
fileName: string;
|
||||
reason: string;
|
||||
pathName: string;
|
||||
}
|
||||
const props = defineProps({
|
||||
roundId: {
|
||||
|
|
@ -66,41 +65,39 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const getRequest = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.requestDocNote(props.roundId as string))
|
||||
.then((res:any) =>{
|
||||
console.log(res)
|
||||
const data = res.data.result
|
||||
console.log(data)
|
||||
data.map((item:TypeData) =>{
|
||||
rows2.value.push({
|
||||
fileName:item.fileName,
|
||||
annotation:item.reason,
|
||||
file:item.pathName
|
||||
})
|
||||
|
||||
}
|
||||
)
|
||||
console.log(rows2.value)
|
||||
})
|
||||
.catch((e) => {
|
||||
.get(config.API.requestDocNote(props.roundId as string))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
data.map((item: TypeData) => {
|
||||
rows2.value.push({
|
||||
fileName: item.fileName,
|
||||
annotation: item.reason,
|
||||
file: item.pathName,
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const putRequest = () => {
|
||||
const dataAppend = new FormData()
|
||||
dataAppend.append("Name",documentTitle.value)
|
||||
dataAppend.append("Reason",reason.value)
|
||||
dataAppend.append("File",fileUpload.value)
|
||||
http
|
||||
.put(config.API.requestDocNote(props.roundId as string),dataAppend)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
const putRequest = async () => {
|
||||
showLoader();
|
||||
const dataAppend = new FormData();
|
||||
dataAppend.append("Name", documentTitle.value);
|
||||
dataAppend.append("Reason", reason.value);
|
||||
dataAppend.append("File", fileUpload.value);
|
||||
await http
|
||||
.put(config.API.requestDocNote(props.roundId as string), dataAppend)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -110,10 +107,9 @@ const putRequest = () => {
|
|||
getRequest();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
onMounted(async() => {
|
||||
console.log(props.roundId);
|
||||
await getRequest()
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getRequest();
|
||||
});
|
||||
const resetFilterRef = () => {
|
||||
filterKeyword.value = "";
|
||||
|
|
@ -126,8 +122,8 @@ const pagination = ref({
|
|||
rowsPerPage: 10,
|
||||
});
|
||||
const save = () => {
|
||||
dialogConfirm($q,()=>putRequest())
|
||||
}
|
||||
dialogConfirm($q, () => putRequest());
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<Transition>
|
||||
|
|
@ -171,7 +167,9 @@ const save = () => {
|
|||
/>
|
||||
</div>
|
||||
<div class="col-12 flex justify-end">
|
||||
<q-btn label="บันทึก" @click="save" color="public" />
|
||||
<q-btn label="บันทึก" @click="save" color="public">
|
||||
<q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<q-space />
|
||||
|
|
@ -238,13 +236,15 @@ const save = () => {
|
|||
{{ props.row.fileName }}
|
||||
</q-td>
|
||||
<q-td key="annotation" :props="props">
|
||||
{{ props.row.annotation !== null ? props.row.annotation:"-"}}
|
||||
{{
|
||||
props.row.annotation !== null ? props.row.annotation : "-"
|
||||
}}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
type="a"
|
||||
:href="props.row.file"
|
||||
target="_blank"
|
||||
type="a"
|
||||
:href="props.row.file"
|
||||
target="_blank"
|
||||
dense
|
||||
size="14px"
|
||||
flat
|
||||
|
|
|
|||
|
|
@ -63,10 +63,9 @@ const fecthRound = async () => {
|
|||
}));
|
||||
selectRound.value = data[0].id;
|
||||
roundYear.value = data[0].year;
|
||||
// console.log(roundYear.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -82,7 +81,7 @@ const fecthInsignia = async () => {
|
|||
})
|
||||
.finally(async () => {
|
||||
insigniaOp.value = await DataStore.insigniaOp.filter(
|
||||
(x: any) => x.type == tab.value || x.type === ""
|
||||
(x: any) => x.type == tab.value || x.type === ""
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
@ -90,16 +89,13 @@ const fecthInsignia = async () => {
|
|||
const fecthInsigniaType = async () => {
|
||||
await http(config.API.insigniaType)
|
||||
.then((res) => {
|
||||
// console.log(res);
|
||||
let data = res.data.result;
|
||||
DataStore.fetchDatainsigniaType(data);
|
||||
tab.value = DataStore.insigniaType[0].name;
|
||||
|
||||
// fecthlistInsignia();
|
||||
fecthInsignia();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -159,7 +155,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
watch(tab, () => {
|
||||
console.log(DataStore.insigniaOp);
|
||||
insigniaOp.value = DataStore.insigniaOp.filter(
|
||||
(x: any) => x.type == tab.value || x.type === ""
|
||||
);
|
||||
|
|
@ -182,7 +177,6 @@ const fecthlistInsignia = async () => {
|
|||
DataStore.listinsignia(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -542,31 +536,4 @@ const resetFilter = () => {
|
|||
/>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.arrow {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.arrow-active {
|
||||
transition: transform 0.5s;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.bg-base {
|
||||
background-color: #f3f3f398;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.flexsave {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { DataOption } from "@/modules/04_registry/components/profileType";
|
||||
|
||||
const DataStore = useAllocateDataStore();
|
||||
const $q = useQuasar();
|
||||
const myForm = ref<QForm>();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -32,17 +30,17 @@ const returndate = ref<Date | null>();
|
|||
const reason = ref<string>("");
|
||||
const listPerson = ref<any>([]);
|
||||
const OrgList = ref<DataOption[]>([]);
|
||||
const insigniaNoteProfileId = ref<string>("")
|
||||
const insigniaNoteProfileId = ref<string>("");
|
||||
|
||||
const clearData = () => {
|
||||
receivedate.value = null
|
||||
returndate.value = null
|
||||
OrganazationId.value = ""
|
||||
roundNo.value = ""
|
||||
cardid.value = ""
|
||||
fullName.value = ""
|
||||
brand.value = ""
|
||||
reason.value = ""
|
||||
receivedate.value = null;
|
||||
returndate.value = null;
|
||||
OrganazationId.value = "";
|
||||
roundNo.value = "";
|
||||
cardid.value = "";
|
||||
fullName.value = "";
|
||||
brand.value = "";
|
||||
reason.value = "";
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -69,21 +67,21 @@ const props = defineProps({
|
|||
type: String,
|
||||
},
|
||||
selectRoundOption: {
|
||||
type: Array
|
||||
type: Array,
|
||||
},
|
||||
profileId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
watch(props, () => {
|
||||
if (props.modal == true && props.roundId != 'all') {
|
||||
roundNo.value = props.roundId
|
||||
fecthlistInsignia()
|
||||
fetchOrgList()
|
||||
if (props.action == 'editData') {
|
||||
fetchData()
|
||||
if (props.modal == true && props.roundId != "all") {
|
||||
roundNo.value = props.roundId;
|
||||
fecthlistInsignia();
|
||||
fetchOrgList();
|
||||
if (props.action == "editData") {
|
||||
fetchData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -98,10 +96,9 @@ const fecthlistInsignia = async () => {
|
|||
await http
|
||||
.post(config.API.noteSearch(), data)
|
||||
.then((res) => {
|
||||
listPerson.value = res.data.result
|
||||
listPerson.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -116,17 +113,23 @@ const fetchOrgList = async () => {
|
|||
.then(async (response: any) => {
|
||||
const orgArr = response.data.result.map((e: any) => ({
|
||||
id: e.organizationId,
|
||||
name: e.organizationName
|
||||
}))
|
||||
name: e.organizationName,
|
||||
}));
|
||||
|
||||
if (props.action == 'editData') {
|
||||
OrgList.value = [{id: "00000000-0000-0000-0000-000000000000", name: 'สำนักนายกรัฐมนตรี'},...orgArr]
|
||||
if (props.action == "editData") {
|
||||
OrgList.value = [
|
||||
{
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
name: "สำนักนายกรัฐมนตรี",
|
||||
},
|
||||
...orgArr,
|
||||
];
|
||||
} else {
|
||||
OrgList.value = orgArr
|
||||
OrgList.value = orgArr;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err)
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -138,10 +141,10 @@ const fetchData = async () => {
|
|||
await http
|
||||
.get(config.API.insigniaManageBorrowById(props.profileId))
|
||||
.then(async (response: any) => {
|
||||
console.log(response.data.result)
|
||||
console.log(response.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err)
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -152,12 +155,12 @@ const clickSave = async () => {
|
|||
await myForm.value!.validate().then((result: boolean) => {
|
||||
if (result) {
|
||||
dialogConfirm($q, async () => {
|
||||
if (props.action == 'addData') {
|
||||
if (props.action == "addData") {
|
||||
await http
|
||||
.post(config.API.insigniaManageBorrow(), {
|
||||
borrowDate: receivedate.value,
|
||||
borrowOrganizationId: OrganazationId.value,
|
||||
insigniaNoteProfileId: insigniaNoteProfileId.value
|
||||
insigniaNoteProfileId: insigniaNoteProfileId.value,
|
||||
})
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
|
@ -166,7 +169,7 @@ const clickSave = async () => {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
clearData()
|
||||
clearData();
|
||||
props.closeAndFecth();
|
||||
});
|
||||
} else {
|
||||
|
|
@ -174,7 +177,7 @@ const clickSave = async () => {
|
|||
.put(config.API.insigniaManageBorrowReturn(props.profileId), {
|
||||
returnDate: returndate.value,
|
||||
returnOrganizationId: OrganazationId.value,
|
||||
returnReason: reason.value
|
||||
returnReason: reason.value,
|
||||
})
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
|
@ -183,7 +186,7 @@ const clickSave = async () => {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
clearData()
|
||||
clearData();
|
||||
props.closeAndFecth();
|
||||
});
|
||||
}
|
||||
|
|
@ -194,21 +197,23 @@ const clickSave = async () => {
|
|||
|
||||
const searchcardid = async () => {
|
||||
if (cardid.value.length === 13) {
|
||||
const node = await listPerson.value.find((e: any) => e.citizenId === cardid.value);
|
||||
const node = await listPerson.value.find(
|
||||
(e: any) => e.citizenId === cardid.value
|
||||
);
|
||||
|
||||
if (node) {
|
||||
console.log("node", node)
|
||||
fullName.value = `${node.prefix} ${node.fullName}`
|
||||
brand.value = node.requestInsignia
|
||||
insigniaNoteProfileId.value = node.id
|
||||
console.log("node", node);
|
||||
fullName.value = `${node.prefix} ${node.fullName}`;
|
||||
brand.value = node.requestInsignia;
|
||||
insigniaNoteProfileId.value = node.id;
|
||||
} else notifyError($q, "ไม่พบข้อมูลการได้รับในรอบนี้");
|
||||
}
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
clearData()
|
||||
props.close()
|
||||
}
|
||||
clearData();
|
||||
props.close();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -216,39 +221,81 @@ const closeDialog = () => {
|
|||
<q-card style="min-width: 900px" class="q-pb-md">
|
||||
<q-toolbar class="q-py-md">
|
||||
<q-toolbar-title class="text-h6">ยืม-คืนเครื่องราชฯ </q-toolbar-title>
|
||||
<q-btn icon="close" unelevated round dense @click="closeDialog"
|
||||
style="color: #ff8080; background-color: #ffdede" />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="closeDialog"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
><q-tooltip>ปิด</q-tooltip></q-btn
|
||||
>
|
||||
</q-toolbar>
|
||||
<q-separator />
|
||||
|
||||
<q-form ref="myForm">
|
||||
<div class="q-pa-md">
|
||||
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div v-if="props.action === 'addData'" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div
|
||||
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||
>
|
||||
<div
|
||||
v-if="props.action === 'addData'"
|
||||
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||
>
|
||||
<div class="col-6">
|
||||
<q-select v-model="roundNo" dense outlined lazy-rules hide-bottom-space
|
||||
:label="`${'รอบการขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
|
||||
:options="selectRoundOption" option-value="id" :readonly="false" :borderless="false"
|
||||
style="min-width: 150px" :rules="[
|
||||
(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ',
|
||||
]" @update:model-value="fecthlistInsignia()" />
|
||||
</div>
|
||||
<div class="col-12 text-weight-bold text-grey">
|
||||
ข้อมูลผู้ยืม
|
||||
<q-select
|
||||
v-model="roundNo"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'รอบการขอเครื่องราชฯ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="selectRoundOption"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
|
||||
@update:model-value="fecthlistInsignia()"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 text-weight-bold text-grey">ข้อมูลผู้ยืม</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-input :disable="roundNo == ''" hide-bottom-space outlined class="inputgreen" v-model="cardid" dense
|
||||
lazy-rules :rules="[
|
||||
<q-input
|
||||
:disable="roundNo == ''"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
class="inputgreen"
|
||||
v-model="cardid"
|
||||
dense
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
|
||||
(val: string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
|
||||
]" label="เลขบัตรประจำตัวประชาชน" maxlength="13" mask="#############" @keyup="searchcardid" />
|
||||
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
|
||||
]"
|
||||
label="เลขบัตรประจำตัวประชาชน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
@keyup="searchcardid"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<q-input disable hide-bottom-space outlined dense lazy-rules class="inputgreen" borderless
|
||||
v-model="fullName" :label="`${'ชื่อ-นามสกุล'}`" />
|
||||
<q-input
|
||||
disable
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
borderless
|
||||
v-model="fullName"
|
||||
:label="`${'ชื่อ-นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
|
||||
|
|
@ -256,12 +303,26 @@ const closeDialog = () => {
|
|||
รายละเอียดการยืมเครื่องราชฯ
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-input v-model="brand" disable dense outlined lazy-rules hide-bottom-space
|
||||
:label="`${'เครื่องราชฯ'}`" />
|
||||
<q-input
|
||||
v-model="brand"
|
||||
disable
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'เครื่องราชฯ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<datepicker menu-class-name="modalfix" v-model="receivedate" :locale="'th'" autoApply borderless
|
||||
:enableTimePicker="false" week-start="0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="receivedate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -269,11 +330,24 @@ const closeDialog = () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input dense borderless outlined :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
|
||||
:model-value="receivedate != null ? date2Thai(receivedate) : undefined
|
||||
" :label="`${'วันที่ยืม'}`" clearable>
|
||||
<q-input
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
receivedate != null ? date2Thai(receivedate) : undefined
|
||||
"
|
||||
:label="`${'วันที่ยืม'}`"
|
||||
clearable
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -282,20 +356,40 @@ const closeDialog = () => {
|
|||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
|
||||
emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงาน`" />
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
:options="OrgList"
|
||||
dense
|
||||
borderless
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
v-model="OrganazationId"
|
||||
:label="`เลือกหน่วยงาน`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs" v-if="props.action === 'editData'">
|
||||
<div
|
||||
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||
v-if="props.action === 'editData'"
|
||||
>
|
||||
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
|
||||
<div class="col-12 text-weight-bold text-grey">
|
||||
รายละเอียดการคืนเครื่องราชฯ
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<datepicker menu-class-name="modalfix" v-model="returndate" :locale="'th'" autoApply borderless
|
||||
:enableTimePicker="false" week-start="0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="returndate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -303,11 +397,24 @@ const closeDialog = () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input dense borderless outlined :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
|
||||
:model-value="returndate != null ? date2Thai(returndate) : undefined
|
||||
" :label="`${'วันที่คืน'}`" clearable>
|
||||
<q-input
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
returndate != null ? date2Thai(returndate) : undefined
|
||||
"
|
||||
:label="`${'วันที่คืน'}`"
|
||||
clearable
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -316,16 +423,37 @@ const closeDialog = () => {
|
|||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
|
||||
emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงานที่ส่งคืน`" />
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
:options="OrgList"
|
||||
dense
|
||||
borderless
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
v-model="OrganazationId"
|
||||
:label="`เลือกหน่วยงานที่ส่งคืน`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input type="textarea" hide-bottom-space dense borderless option-label="name" option-value="id"
|
||||
emit-value map-options outlined v-model="reason" :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`" />
|
||||
<q-input
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
dense
|
||||
borderless
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
v-model="reason"
|
||||
:label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
|
@ -333,9 +461,11 @@ const closeDialog = () => {
|
|||
<q-separator />
|
||||
<div class="q-pa-md">
|
||||
<div class="row justify-end">
|
||||
<q-btn label="บันทึก" @click="clickSave" color="public" />
|
||||
<q-btn label="บันทึก" @click="clickSave" color="public">
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,17 +11,9 @@ import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main"
|
|||
import type { QTableProps, QInput } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
// const router = useRouter();
|
||||
const DataStore = useBrrowDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
} = mixin;
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
const $q = useQuasar();
|
||||
const tab = ref<string>("");
|
||||
|
||||
|
|
@ -31,10 +23,8 @@ const selectRoundAllOption = ref<OptionDataYear[]>([]);
|
|||
|
||||
const modal = ref<boolean>(false);
|
||||
const action = ref<string>("");
|
||||
const personId = ref<string>();
|
||||
const profileId = ref<string>("");
|
||||
const roundYear = ref<any>();
|
||||
const insigniaListAll = ref<any>([]);
|
||||
const insigniaList = ref<any>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -49,35 +39,29 @@ const fecthRound = async () => {
|
|||
selectRoundAllOption.value = [
|
||||
{
|
||||
name: "ทั้งหมด",
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
id: "0",
|
||||
year: 0,
|
||||
},
|
||||
];
|
||||
|
||||
data.map((e: any) => {
|
||||
selectRoundOption.value = [
|
||||
...selectRoundOption.value,
|
||||
{
|
||||
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
|
||||
id: e.id,
|
||||
year: e.year,
|
||||
},
|
||||
];
|
||||
|
||||
selectRoundAllOption.value = [
|
||||
...selectRoundAllOption.value,
|
||||
{
|
||||
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
|
||||
id: e.id,
|
||||
year: e.year,
|
||||
},
|
||||
];
|
||||
selectRoundOption.value.push({
|
||||
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
|
||||
id: e.id,
|
||||
year: e.year,
|
||||
});
|
||||
selectRoundAllOption.value.push({
|
||||
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
|
||||
id: e.id,
|
||||
year: e.year,
|
||||
});
|
||||
});
|
||||
|
||||
selectRound.value = data[0].id;
|
||||
yearRound.value = data[0].year;
|
||||
roundYear.value = data[0].year;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -85,7 +69,6 @@ const fecthInsignia = async () => {
|
|||
await http
|
||||
.get(config.API.insignia)
|
||||
.then((res) => {
|
||||
// console.log(res);
|
||||
let data = res.data.result;
|
||||
DataStore.fetchDataInsignia(data);
|
||||
})
|
||||
|
|
@ -102,7 +85,6 @@ const fecthInsignia = async () => {
|
|||
const fecthInsigniaType = async () => {
|
||||
await http(config.API.insigniaType)
|
||||
.then(async (res) => {
|
||||
// console.log(res);
|
||||
let data = res.data.result;
|
||||
DataStore.fetchDatainsigniaType(data);
|
||||
tab.value = DataStore.insigniaType[0].name;
|
||||
|
|
@ -302,9 +284,11 @@ const selectorInsignia = async () => {
|
|||
: dataCopy;
|
||||
};
|
||||
|
||||
// const selectorRound = (round: string) => {
|
||||
// selectRound.value = round;
|
||||
// };
|
||||
const yearRound = ref<number>();
|
||||
const selectorRound = async (round: number) => {
|
||||
roundYear.value = round;
|
||||
await fecthlistInsignia();
|
||||
};
|
||||
|
||||
const rows = ref<any[]>([]);
|
||||
const fecthlistInsignia = async () => {
|
||||
|
|
@ -318,7 +302,6 @@ const fecthlistInsignia = async () => {
|
|||
rows.value = DataStore.rows;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -383,12 +366,24 @@ const resetFilter = () => {
|
|||
>
|
||||
<div class="q-pa-md">
|
||||
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
|
||||
<!-- <div>
|
||||
<q-select v-model="selectRound" dense outlined lazy-rules hide-bottom-space
|
||||
:label="`${'รอบการเสนอขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
|
||||
:options="selectRoundAllOption" option-value="id" :borderless="false"
|
||||
style="min-width: 150px" @update:emit-value="selectorRound" />
|
||||
</div> -->
|
||||
<div>
|
||||
<q-select
|
||||
v-model="yearRound"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="selectRoundAllOption"
|
||||
option-value="year"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="selectorRound"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<q-select
|
||||
v-model="DataStore.insignia"
|
||||
|
|
@ -504,11 +499,7 @@ const resetFilter = () => {
|
|||
:modal="modal"
|
||||
:close="close"
|
||||
:close-and-fecth="closeAndFecth"
|
||||
:round-id="
|
||||
selectRound == '00000000-0000-0000-0000-000000000000'
|
||||
? 'all'
|
||||
: selectRound
|
||||
"
|
||||
:round-id="selectRound == '0' ? 'all' : selectRound"
|
||||
:action="action"
|
||||
:profile-id="profileId"
|
||||
:select-round-option="selectRoundOption"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
// import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -13,7 +12,6 @@ import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
|
|||
import type { QTableProps, QInput } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
// const router = useRouter();
|
||||
const DataStore = useResultDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
|
|
@ -59,24 +57,22 @@ const fecthInsignia = async () => {
|
|||
await http
|
||||
.get(config.API.insignia)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
let data = res.data.result;
|
||||
DataStore.fetchDatainsignia(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
const fecthInsigniaType = async () => {
|
||||
await http(config.API.insigniaType)
|
||||
.then((res) => {
|
||||
// console.log(res);
|
||||
let data = res.data.result;
|
||||
DataStore.fetchDatainsigniaType(data);
|
||||
tab.value = DataStore.insigniaType[0].name;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
const visibleColumns = ref<String[]>([
|
||||
|
|
@ -271,7 +267,6 @@ const uploadFile = async (event: any, action: string) => {
|
|||
success($q, "อัพโหลดไฟล์สำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
|
|
@ -288,43 +283,6 @@ const uploadFile = async (event: any, action: string) => {
|
|||
"ยืนยันการบันทึกรายการข้อมูล",
|
||||
"ต้องการยืนยันรายการข้อมูลนี้หรื้อไม่ ?";
|
||||
}
|
||||
// console.log(selectRound.value);
|
||||
|
||||
// let id = selectRound.value.toString();
|
||||
// if (action === "result") {
|
||||
// const formdata = new FormData();
|
||||
// formdata.append("file", event);
|
||||
// await http
|
||||
// .put(config.API.uploadfilereceice(id), formdata)
|
||||
// .then(() => {
|
||||
// success($q, "อัพโหลดไฟล์สำเร็จ");
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log(err);
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// await fecthlistInsignia();
|
||||
// fileResult.value = null;
|
||||
// });
|
||||
// } else if (action === "invoice") {
|
||||
// const formdata = new FormData();
|
||||
// formdata.append("file", event);
|
||||
// await http
|
||||
// .put(config.API.uploadfileinvoice(id), formdata)
|
||||
// .then(() => {
|
||||
// success($q, "อัพโหลดไฟล์สำเร็จ");
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log(err);
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// await fecthlistInsignia();
|
||||
// fileinvoice.value = null;
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
};
|
||||
|
||||
const filterRef = ref<QInput>();
|
||||
|
|
@ -482,7 +440,6 @@ const resetFilter = () => {
|
|||
icon="mdi-upload"
|
||||
@click="perviewfile(fileResult, 'receice')"
|
||||
>
|
||||
<!-- @click="uploadFile(fileResult, 'result')" -->
|
||||
<q-tooltip
|
||||
>อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
|
||||
>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ const OriginalDataFetch = async () => {
|
|||
rows.value = res.data.result.map((e: any) => ({
|
||||
orderId: e.orderId,
|
||||
Order: e.orderName,
|
||||
OrderNum: `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
|
||||
OrderNum: e.orderNo == '' ? '-' : `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
|
||||
fiscalYear: Number(e.fiscalYear),
|
||||
OrderDate: date2Thai(e.orderDate),
|
||||
OrderBy: e.orderBy,
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const $q = useQuasar();
|
|||
const modalData = ref<any>({
|
||||
salaryAmount: null,
|
||||
positionSalaryAmount: null,
|
||||
mouthSalaryAmount: null,
|
||||
monthSalaryAmount: null,
|
||||
});
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const myFormAdd = ref<QForm | null>(null);
|
||||
|
|
@ -221,7 +221,7 @@ const saveModal = () => {
|
|||
};
|
||||
const personalId = ref<string>("");
|
||||
const selectModal = (e: any) => {
|
||||
console.log(e);
|
||||
// console.log(e);
|
||||
titleName.value = e.name;
|
||||
personalId.value = e.personalId;
|
||||
modalOpenClose(e.personalId);
|
||||
|
|
@ -229,15 +229,15 @@ const selectModal = (e: any) => {
|
|||
|
||||
const modalOpenClose = async (personalId: string) => {
|
||||
modal.value = !modal.value;
|
||||
if (!modal.value) {
|
||||
if (modal.value) {
|
||||
await fetchSalary(personalId);
|
||||
} else {
|
||||
titleName.value = "";
|
||||
}
|
||||
if (modal.value == true) {
|
||||
await fetchSalary(personalId);
|
||||
}
|
||||
myForm.value?.reset();
|
||||
};
|
||||
const fetchSalary = async (personalId: string) => {
|
||||
console.log(personalId);
|
||||
// console.log(personalId);
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.salaryOrder(personalId))
|
||||
|
|
@ -247,14 +247,14 @@ const fetchSalary = async (personalId: string) => {
|
|||
modalData.value = {
|
||||
salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount : null,
|
||||
positionSalaryAmount:
|
||||
data.positionSalaryAmount !== 0 ? data.salaryAmount : null,
|
||||
mouthSalaryAmount:
|
||||
data.monthSalaryAmount !== 0 ? data.salaryAmount : null,
|
||||
data.positionSalaryAmount !== 0 ? data.positionSalaryAmount : null,
|
||||
monthSalaryAmount:
|
||||
data.monthSalaryAmount !== 0 ? data.monthSalaryAmount : null,
|
||||
};
|
||||
console.log("data", modalData.value);
|
||||
// console.log("data", modalData.value);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
// console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -263,11 +263,12 @@ const fetchSalary = async (personalId: string) => {
|
|||
};
|
||||
|
||||
const putSalary = async (salary: any) => {
|
||||
modalData.value = {
|
||||
salaryAmount: Number(salary.salaryAmount),
|
||||
positionSalaryAmount: Number(salary.positionSalaryAmount),
|
||||
monthSalaryAmount: Number(salary.mouthSalaryAmount),
|
||||
};
|
||||
// modalData.value = {
|
||||
// salaryAmount: Number(salary.salaryAmount),
|
||||
// positionSalaryAmount: Number(salary.positionSalaryAmount),
|
||||
// monthSalaryAmount: Number(salary.monthSalaryAmount),
|
||||
// };
|
||||
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
|
|
@ -585,16 +586,6 @@ const getClass = (val: boolean) => {
|
|||
<div class="col-xs-12">
|
||||
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<!-- <q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model.number="modalData.salaryAmount"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
|
||||
:label="`${'เงินเดือน'}`"
|
||||
type="text"
|
||||
hide-bottom-space
|
||||
/> -->
|
||||
<CurruncyInput
|
||||
:edit="true"
|
||||
:dense="true"
|
||||
|
|
@ -606,18 +597,6 @@ const getClass = (val: boolean) => {
|
|||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<!-- <q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="modalData.positionSalaryAmount"
|
||||
:label="`${'เงินประจำตำแหน่ง'}`"
|
||||
type="number"
|
||||
hide-bottom-space
|
||||
/> -->
|
||||
<!-- :rules="[
|
||||
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
|
||||
]" -->
|
||||
<CurruncyInput
|
||||
:edit="true"
|
||||
:dense="true"
|
||||
|
|
@ -628,22 +607,10 @@ const getClass = (val: boolean) => {
|
|||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<!-- <q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="modalData.mouthSalaryAmount"
|
||||
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
|
||||
type="number"
|
||||
hide-bottom-space
|
||||
/> -->
|
||||
<!-- :rules="[
|
||||
(val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
|
||||
]" -->
|
||||
<CurruncyInput
|
||||
:edit="true"
|
||||
:dense="true"
|
||||
v-model="modalData.positionSalaryAmount"
|
||||
v-model="modalData.monthSalaryAmount"
|
||||
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
|
@ -661,8 +628,9 @@ const getClass = (val: boolean) => {
|
|||
color="public"
|
||||
@click="saveModal"
|
||||
class="q-px-md"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
>
|
||||
<!-- icon="mdi-content-save-outline" -->
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue