hrms-mgt/src/modules/05_placement/components/probation/FormAssign.vue

2135 lines
90 KiB
Vue
Raw Normal View History

<template>
2023-07-27 16:54:05 +07:00
<q-form ref="myForm">
<div class="q-pb-md">
<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)"
v-if="routeName == 'probationWorkAdd'"
/>
<div v-if="routeName == 'probationWorkAdd'">
เพมแบบมอบหมายงานการทดลองปฏหนาทราชการ
</div>
<div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
</div>
2023-07-27 16:54:05 +07:00
<q-card
:bordered="routeName == 'probationWorkAdd'"
class="col-12 text-dark"
>
<div class="row col-12 q-pa-lg">
<div class="row col-12 q-gutter-lg">
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
ทดลองปฏหนาทราชการ
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-6">
<q-input
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
hide-bottom-space
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="fullname"
label="ชื่อ-สกุล"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
hide-bottom-space
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="position"
label="ตำแหน่ง"
/>
</div>
<div class="col-12 text-top0 items-center">
ระยะเวลาการทดลองปฎหนาทราชการ
</div>
<div class="col-xs-12 col-sm-4">
<q-select
:rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
hide-bottom-space
:options="monthOp"
class="col-xs-12 col-sm-6"
:readonly="routeName !== 'probationWorkAdd'"
dense
borderless
option-label="label"
2023-08-09 12:09:46 +07:00
option-value="value"
2023-07-27 16:54:05 +07:00
:outlined="routeName === 'probationWorkAdd'"
v-model="monthSelect"
:label="`ระยะเวลากี่เดือน`"
/>
</div>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="date_start"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName !== 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
dense
borderless
:readonly="routeName != 'probationWorkAdd'"
:outlined="routeName == 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
hide-bottom-space
class="full-width datepicker q-mb-md"
:model-value="
date_start != null ? date2Thai(date_start) : undefined
2023-07-27 16:54:05 +07:00
"
:label="`${'ตั้งเเต่วันที่'}`"
clearable
@clear="clearDateExam"
>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="date_finish"
:locale="'th'"
autoApply
borderless
:readonly="isDatePicker2Readonly|| routeName !== 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
readonly
class="full-width datepicker q-mb-md"
:model-value="
date_finish != null
? date2Thai(date_finish)
: undefined
2023-07-27 16:54:05 +07:00
"
:label="`${'ถึงวันที่'}`"
clearable
@clear="clearDateExam2"
>
2023-07-27 16:54:05 +07:00
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
แลการทดลองปฏหนาทราชการ (อาจมไดมากกว 1 คน)
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
:rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
2023-08-09 12:09:46 +07:00
option-value="personal_id"
:options="filtermantor(OPcaretaker, [caretaker2])"
2023-07-27 16:54:05 +07:00
class="col-xs-12 col-sm-6"
:readonly="routeName != 'probationWorkAdd'"
dense
2023-07-27 16:54:05 +07:00
hide-bottom-space
borderless
:outlined="routeName == 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
v-model="caretaker1"
:label="`ผู้ดูแลคนที่ 1`"
2023-08-09 12:09:46 +07:00
option-label="name"
/>
2023-07-27 16:54:05 +07:00
<q-select
:rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
:options="filtermantor(OPcaretaker, [caretaker1])"
2023-08-09 12:09:46 +07:00
option-value="personal_id"
option-label="name"
2023-07-27 16:54:05 +07:00
hide-bottom-space
class="col-xs-12 col-sm-6"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
v-model="caretaker2"
:label="`ผู้ดูแลคนที่ 2`"
/>
</div>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<!-- 3.1 -->
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
2023-07-27 16:54:05 +07:00
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
ผลการปฏงาน
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
3.1 องาน / ภารกจงานทมอบหมาย (ควรมมากกว 1 ภารกจงาน)
<q-btn
v-if="routeName == 'probationWorkAdd'"
round
color="primary"
dense
icon="mdi-plus"
flat
class="q-ml-sm"
@click="addActivity"
/>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row q-gutter-sm">
<q-card
v-for="(item, index) in activityArray"
:key="index"
flat
bordered
class="col-12 q-pa-sm bg-grey-1"
>
2023-07-27 16:54:05 +07:00
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-input
:rules="
index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
"
hide-bottom-space
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="bg-white"
2023-07-27 16:54:05 +07:00
type="textarea"
v-model="activity_desc[index]"
label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
/>
</div>
<div class="col-xs-12 col-sm-5">
<q-input
:rules="
index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
"
hide-bottom-space
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
class="bg-white"
type="textarea"
v-model="goal_desc[index]"
label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
/>
</div>
2023-07-27 16:54:05 +07:00
<!-- delete -->
<div
2023-07-27 16:54:05 +07:00
v-if="index > 1"
class="col-xs-12 col-sm-1 flex justify-center items-center"
>
<q-btn
flat
round
color="red"
icon="mdi-trash-can-outline"
2023-07-27 16:54:05 +07:00
@click="deleteactivity(index)"
v-if="routeName === 'probationWorkAdd'"
/>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
</div>
<!-- 3.2 -->
<div class="col-12 row">
<div class="col-12 text-top2">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
3.2 ความรความสามารถและทกษะ(ตามท..าหนด)
</div>
<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
<div class="row col-12 q-gutter-lg">
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
ความรความสามารถในการปฏงาน
<q-btn
v-if="routeName == 'probationWorkAdd'"
round
color="primary"
dense
icon="mdi-plus"
flat
class="q-ml-sm"
@click="addKnowledge"
/>
</div>
<div
v-for="(item, index) in knowledgeArray"
:key="index"
2023-07-27 16:54:05 +07:00
class="col-12 row q-col-gutter-sm"
>
<div class="col-11 q-my-xs">
<q-select
:option-label="(item) => `${item.title}-${item.description}`"
option-value="id"
map-options
2023-07-27 16:54:05 +07:00
:rules="
index < 3
? [(val) => !!val || 'กรุณาเลือกความสามารถ']
: []
"
hide-bottom-space
:options="OPknowledge"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="knowledge[index]"
:label="`ความรู้ความสามารถในการปฏิบัติงาน ${
index + 1
}`"
/>
</div>
<div
v-if="index > 2"
2023-07-27 16:54:05 +07:00
class="col-xs-12 col-sm-1 flex justify-center items-center"
>
<q-btn
v-if="routeName == 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
flat
round
color="red"
icon="mdi-trash-can-outline"
@click="deleteknowledge(index)"
2023-07-27 16:54:05 +07:00
/>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
ความรเรองกฎหมายและกฎระเบยบ (ไมเก 20 วข)
<!-- <q-btn
v-if="routeName == 'probationWorkAdd'"
round
color="primary"
dense
icon="mdi-plus"
flat
class="q-ml-sm"
/> -->
2023-07-27 16:54:05 +07:00
</div>
<q-card
flat
bordered
class="col-12 q-pa-md"
style="max-height: 500px; overflow-y: scroll"
>
<div class="example-row-column-width">
<div class="bg-grey-3 q-py-xs">
<div
class="row"
v-for="(item, index) in checkRule"
:key="item.id"
>
<div v-if="index === 0" class="col-1 text-center">
<q-checkbox
:true-value="1"
:false-value="0"
v-if="item.status_select === 1"
v-model="item.checked"
dense
:disable="routeName != 'probationWorkAdd'"
/>
</div>
<div v-if="index === 0" class="col-11" >
{{ item.description }}
</div>
2023-07-27 16:54:05 +07:00
</div>
</div>
<div v-for="(item, index) in checkRule" :key="item.id">
<div
v-if="index === 1"
class="row bg-grey-2 q-py-xs borderCheck"
>
<div class="col-1"></div>
<div class="col-10">
{{ item.description }}
</div>
2023-07-27 16:54:05 +07:00
</div>
</div>
<div v-for="(item, index) in checkRule" :key="item.id">
<div
v-if="index === 2"
class="row bg-grey-2 q-py-xs borderCheck"
>
<div class="col-1"></div>
<div class="col-10 q-pl-md">
{{ item.description }}
</div>
2023-07-27 16:54:05 +07:00
</div>
<div
v-else-if="index > 2 && index < 9"
class="row borderCheck border_y q-py-xs"
>
<div class="col-1 text-center">
<q-checkbox
:true-value="1"
:false-value="0"
v-model="item.checked"
dense
:disable="routeName != 'probationWorkAdd'"
/>
</div>
<div class="col-9 q-pl-xl">
{{ item.description }}
</div>
2023-07-27 16:54:05 +07:00
</div>
</div>
<div v-for="(item, index) in checkRule" :key="item.id">
<div
v-if="index === 9"
class="row bg-grey-2 q-py-xs borderCheck"
>
<div class="col-1"></div>
<div class="col-10 q-pl-md">
{{ item.description }}
</div>
</div>
<div
v-else-if="index > 9 && index < 16"
class="row borderCheck border_y q-py-xs"
>
<div class="col-1 text-center">
<q-checkbox
:true-value="1"
:false-value="0"
v-model="item.checked"
dense
:disable="routeName != 'probationWorkAdd'"
/>
</div>
<div class="col-9 q-pl-xl">
{{ item.description }}
</div>
2023-07-27 16:54:05 +07:00
</div>
</div>
<div v-for="(item, index) in checkRule" :key="item.id">
<div
v-if="index === 16"
class="row bg-grey-2 q-py-xs borderCheck"
>
<div class="col-1"></div>
<div class="col-10 q-pl-md">
{{ item.description }}
</div>
</div>
<div
v-else-if="index > 16 && index < 19"
class="row borderCheck border_y q-py-xs"
>
<div class="col-1 text-center">
<q-checkbox
:true-value="1"
:false-value="0"
v-model="item.checked"
dense
:disable="routeName != 'probationWorkAdd'"
/>
</div>
<div class="col-9 q-pl-xl">
{{ item.description }}
</div>
2023-07-27 16:54:05 +07:00
</div>
</div>
<div v-for="(item, index) in checkRule" :key="item.id">
<div
v-if="index === 19"
class="row bg-grey-2 q-py-xs borderCheck"
>
<div class="col-1"></div>
<div class="col-10 q-pl-md">
{{ item.description }}
</div>
</div>
<div
v-else-if="index > 19 && index < 30"
class="row borderCheck border_y q-py-xs"
>
<div class="col-1 text-center">
<q-checkbox
:true-value="1"
:false-value="0"
v-model="item.checked"
dense
:disable="routeName != 'probationWorkAdd'"
/>
</div>
<div class="col-9 q-pl-xl">
{{ item.description }}
</div>
2023-07-27 16:54:05 +07:00
</div>
</div>
<!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
<div class="col-1 text-center"></div>
<div class="col-11">
3. กฎหมายอนๆ เกยวของกบการปฏงาน
</div>
</div>
<div class="row border_y borderCheck">
<div class="col-1 text-center"></div>
<div class="q-py-sm col-10" style="min-width: 300px">
<q-input
hide-bottom-space
dense
outlined
lazy-rules
v-model="ruleNote"
:label="`${'กรอกกฎหมายอื่นๆ'}`"
type="textarea"
/>
</div>
2023-07-27 09:11:43 +07:00
</div> -->
2023-07-27 16:54:05 +07:00
</div>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top2">
กฎหมายอ เกยวของกบการปฏงาน
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12">
<q-input
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="OtherLaw"
type="textarea"
/>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row">
<div class="col-12 text-top2">กษะ</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) =>
`${item.title} - ${item.level_description}`
"
option-value="id"
hide-bottom-space
:rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]"
:options="OPcomputer"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
map-options
2023-07-27 16:54:05 +07:00
:outlined="routeName == 'probationWorkAdd'"
v-model="skill"
label="ด้านที่ 1"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.level_description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
2023-08-09 12:09:46 +07:00
ellipsis-2-lines
:option-label="
(item) =>
`${item.title} - ${item.level_description}`
"
option-value="id"
map-options
hide-bottom-space
:rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]"
:options="OPenglish"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="skill2"
label="ด้านที่ 2"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.level_description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) =>
`${item.title} - ${item.level_description}`
"
option-value="id"
hide-bottom-space
:rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]"
:options="OPinfomation"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
map-options
2023-07-27 16:54:05 +07:00
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="skill3"
label="ด้านที่ 3"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.level_description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) =>
`${item.title} - ${item.level_description}`
"
option-value="id"
hide-bottom-space
:rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]"
:options="OPresourse"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
map-options
2023-07-27 16:54:05 +07:00
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="skill4"
label="ด้านที่ 4"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.level_description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top2">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
3.3 สมรรถนะ (ตามท .. าหนด)
</div>
<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
<div class="row col-12 q-gutter-lg">
<div class="col-12 row">
<div class="col-12 text-top2">สมรรถนะหล</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
2023-08-09 12:09:46 +07:00
:options="
filterMain(OPmain, [main2, main3, main4, main5])
"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
map-options
2023-07-27 16:54:05 +07:00
:outlined="routeName == 'probationWorkAdd'"
v-model="main"
label="ตัวที่ 1"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
2023-08-09 12:09:46 +07:00
:options="
filterMain(OPmain, [main, main3, main4, main5])
"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
map-options
2023-07-27 16:54:05 +07:00
:outlined="routeName == 'probationWorkAdd'"
v-model="main2"
label="ตัวที่ 2"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
2023-08-09 12:09:46 +07:00
:options="
filterMain(OPmain, [main, main2, main4, main5])
"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
map-options
2023-07-27 16:54:05 +07:00
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="main3"
label="ตัวที่ 3"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
2023-08-09 12:09:46 +07:00
:options="
filterMain(OPmain, [main, main2, main3, main5])
"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
map-options
2023-07-27 16:54:05 +07:00
:outlined="routeName == 'probationWorkAdd'"
v-model="main4"
label="ตัวที่ 4"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
2023-07-27 16:54:05 +07:00
<div class="col-xs-12 col-sm-6">
<q-select
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
2023-08-09 12:09:46 +07:00
:options="
filterMain(OPmain, [main, main2, main3, main4])
"
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
map-options
2023-07-27 16:54:05 +07:00
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="main5"
label="ตัวที่ 5"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
</div>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-12 row">
<div class="col-12 text-top2">สมรรถนะประจากลมงาน</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
hide-bottom-space
:rules="[
(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
]"
2023-08-09 12:09:46 +07:00
:options="filterData(OPgroup, [group2, group3])"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
map-options
2023-07-27 16:54:05 +07:00
:outlined="routeName == 'probationWorkAdd'"
v-model="group"
label="ตัวที่ 1"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
hide-bottom-space
:rules="[
(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
]"
2023-08-09 12:09:46 +07:00
:options="filterData(OPgroup, [group, group3])"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
map-options
2023-07-27 16:54:05 +07:00
:outlined="routeName == 'probationWorkAdd'"
v-model="group2"
label="ตัวที่ 2"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:option-label="
(item) => `${item.title} - ${item.description}`
"
option-value="id"
map-options
hide-bottom-space
:rules="[
(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
]"
2023-08-09 12:09:46 +07:00
:options="filterData(OPgroup, [group, group2])"
2023-07-27 16:54:05 +07:00
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="group3"
label="ตัวที่ 3"
2023-08-09 12:09:46 +07:00
>
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
{{ scope.opt.description }}
</div>
</template></q-select
>
2023-07-27 16:54:05 +07:00
</div>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
3.4 พฤตกรรมทาเปนสาหรบการปฏงาน<span
class="text-weight-regular q-pl-sm"
>
( ไดแก ความประพฤต ความมณธรรมจรยธรรม การรกษาว
)</span
>
</div>
<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
<div class="row col-12 q-gutter-lg">
<div class="col-12 row">
<div class="col-12 text-top2">ความประพฤต ไดแก</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
<li>ใหบรการประชาชนหรอผบบรการดวยอธยาศยด</li>
<li>ความรบผดชอบในการปฏงาน</li>
<li>
ใหบรการประชาชนหรอผบบรการดวยความรวดเร
เอาใจใสเปนมาตรฐานเดยวก
</li>
<li>
งใจปฏหนาทราชการดวยความอตสาหะ
ขยนหมนเพยร
</li>
</div>
</div>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-12 row">
<div class="col-12 text-top2">
ความมณธรรมจรยธรรม ไดแก
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
<li>
ศตนและเสยสละเวลาในการปฏงานอยางเตมกำลงความสามารถ
</li>
<li>
ตสำนกท ปฏงานดวยความซอสตย จร
</li>
<li>
ดมนในสถาบนพระมหากษตร และไมกระทำการใด
นจะกอใหเกดความเสยหายตอประเทศชาต ศาสนา
และพระมหากษตร
</li>
</div>
</div>
2023-07-27 16:54:05 +07:00
</div>
<div class="col-12 row">
<div class="col-12 text-top2">การรกษาว ไดแก</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
<li>ความรบผดชอบในการรกษาเวลาทำงาน</li>
<li>
แตงกายในการปฏงานไดอยางเหมาะสมกบการเปนขาราชการ
</li>
<li>
ไมกระทำการใด
นเปนการเสอมเกยรตและศกดศรของความเปนขาราชการ
</li>
<li>
ไมกระทำการใด
นอาจกอใหเกดความเสยหายแกอเสยงของหนวยงาน
</li>
<li>
ปฏหนาทอยางตรงไปตรงมาโดยยกหลกจรรยาบรรณวชาช
</li>
</div>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top2">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
3.5 (าม)
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12">
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="Other"
/>
</div>
</div>
</div>
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
3.6 ผลผลตของงานทคาดหวงและตวชดความสาเรจของงาน
<q-btn
v-if="routeName == 'probationWorkAdd'"
round
color="primary"
dense
icon="mdi-plus"
flat
class="q-ml-sm"
@click="addProductivity"
/>
</div>
<div class="col-12 row q-gutter-md">
<q-card
v-for="(item, index) in ProductivityArray"
:key="index"
2023-07-27 16:54:05 +07:00
flat
bordered
class="col-12 q-pa-sm bg-grey-1"
>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
2023-07-27 16:54:05 +07:00
<q-input
hide-bottom-space
:rules="
index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
"
class="bg-white"
2023-07-27 16:54:05 +07:00
type="textarea"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="output_desc[index]"
2023-07-27 16:54:05 +07:00
label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
/>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-xs-12 col-sm-5">
<q-input
:rules="
index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
"
hide-bottom-space
class="bg-white"
2023-07-27 16:54:05 +07:00
type="textarea"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="indicator_desc[index]"
2023-07-27 16:54:05 +07:00
label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
/>
</div>
2023-07-27 16:54:05 +07:00
<div
v-if="index > 0"
class="col-xs-12 col-sm-1 flex justify-center items-center"
>
<q-btn
flat
v-if="routeName == 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
round
color="red"
icon="mdi-trash-can-outline"
@click="deleteProductivitys(index)"
/>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
</div>
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
การพฒนาผทดลองปฏหนาทราชการ
</div>
<div class="col-12 row">
<div class="col-12 text-top2">
ทดลองปฏหนาทราชการตองเขารวมในการปฐมนเทศและอบรมหลกสตรตาง
ภายในระยะเวลาทดลองปฏหนาทราชการ งน
</div>
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
4.1 การปฐมนเทศเพอใหความรเกยวกบหนวยงาน/วนราชการ
</div>
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
4.2
การเรยนรวยตนเองเพอใหความรเกยวกบกฎหมายกฎระเบยบแบบแผนของทางราชการ
</div>
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
4.3
การอบรมสมมนารวมกนเพอปลกฝงการประพฤตปฏตนเปนขาราชการท
</div>
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
4.4 การอบรมอ หนวยงานกำหนด (าม)
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
การประเมนผลการทดลองปฏหนาทราชการ
</div>
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
5.1
ประเมนผลการทดลองปฏหนาทราชการโดยคณะกรรมการประเมนผลการทดลองปฏหนาทราชการ
</div>
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
5.2 รายละเอยดการประเมนประกอบดวย 2 วนค
</div>
<div class="col-12 row q-gutter-md">
<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
<div class="col-12 text-top2">การรกษาว ไดแก</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
2023-07-27 16:54:05 +07:00
<li>ความรความสามารถท .. กำหนด</li>
<li>กษะท .. กำหนด</li>
<li>สมรรถนะตามท .. กำหนด</li>
<li>ความสามารถในการเรยนรงานในตำแหน</li>
<li>ความสามารถในการปรบใชความรบงานในหนาท</li>
<li>ความสำเรจของงานทไดบมอบหมาย</li>
<li>
2023-07-27 16:54:05 +07:00
นๆ (าม)
<q-input
:readonly="routeName != 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="Other5"
2023-07-27 16:54:05 +07:00
label="กรอกอื่นๆ"
/>
</li>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
</div>
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
5.3
อมลทใชประกอบการประเมนผลการทดลองปฏหนาทราชการประกอบดวย
</div>
<div class="col-12 row q-gutter-md">
<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
<li>
2023-07-27 16:54:05 +07:00
นทกผลการทดลองปฏหนาทราชการของผแลการทดลองปฏหนาทราชการและผงคบบญา
</li>
<li>
2023-07-27 16:54:05 +07:00
แบบประเมนผลการทดลองปฏหนาทราชการของผงคบบญชา
</li>
2023-07-27 16:54:05 +07:00
<li>รายงานผลการพฒนาตามทสำนกงาน ..กำหนด</li>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
</div>
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
5.3 ดสวนของคะแนนและมาตรฐานการประเม
</div>
<div class="col-12 row q-gutter-md">
<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
2023-07-27 16:54:05 +07:00
<li>ดสวนของคะแนนการทดลองปฏหนาทราชการ</li>
<div class="q-pl-lg">
วนท 1
คะแนนผลสมฤทธของการทดลองปฏหนาทราชการรอยละ 50
</div>
<div class="q-pl-lg">
วนท 2
คะแนนพฤตกรรมของผทดลองปฏหนาทราชการรอยละ 50
</div>
<div class="q-pl-lg">
มาตรฐานการประเมนแตละสวนตองไดคะแนนไมำกวารอยละ
60
</div>
<li>
2023-07-27 16:54:05 +07:00
ดสวนคะแนนการพฒนาขาราชการทอยระหวางการทดลองปฏหนาทราชการ
</li>
2023-07-27 16:54:05 +07:00
<div class="q-pl-lg">
คะแนนรวมของการพฒนาจะตองไมอยกวารอยละ 60
</div>
<div>
<span style="text-decoration: underline">หมายเหต</span>
ใหนำคะแนนรวมท 2
วนมารวมกนแลวตองไดคะแนนไมอยกวารอยละ 60
งถอวาผานการประเมนการทดลองปฏหนาทราชการ
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
</q-card>
</div>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12 row">
2023-07-27 16:54:05 +07:00
<div class="col-12 text-top0 items-center">
การลงชอเพอมอบหมายงานและรบมอบหมายงานในการทดลองปฏหนาทราชการ
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
ทดลองปฏหนาทราชการ
</div>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-4">
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="fullname"
2023-07-27 16:54:05 +07:00
label="ชื่อ-สกุล"
/>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-xs-12 col-sm-4">
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="position"
2023-07-27 16:54:05 +07:00
label="ตำแหน่ง"
/>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="date1"
:locale="'th'"
autoApply
:readonly="routeName !== 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
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
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="date1 != null ? date2Thai(date1) : null"
label="ลงวันที่"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
2023-07-27 16:54:05 +07:00
</div>
</div>
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2023-07-27 16:54:05 +07:00
แลการทดลองปฏหนาทราชการ
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row q-col-gutter-md">
<q-select
2023-08-18 11:50:53 +07:00
:options="filtermantor(OPcaretaker, [caretaker2])"
2023-08-09 12:09:46 +07:00
option-value="personal_id"
option-label="name"
2023-07-27 16:54:05 +07:00
class="col-xs-12 col-sm-8"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="caretaker1"
2023-07-27 16:54:05 +07:00
label="ผู้ดูแลคนที่ 1"
/>
2023-07-27 16:54:05 +07:00
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="date2"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
:readonly="routeName !== 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="date2 != null ? date2Thai(date2) : null"
label="ลงวันที่"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-select
2023-08-18 11:50:53 +07:00
:options="filtermantor(OPcaretaker, [caretaker1])"
2023-08-09 12:09:46 +07:00
option-value="personal_id"
option-label="name"
2023-07-27 16:54:05 +07:00
class="col-xs-12 col-sm-8"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="caretaker2"
2023-07-27 16:54:05 +07:00
label="ผู้ดูแลคนที่ 2"
/>
2023-07-27 16:54:05 +07:00
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="date3"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName !== 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
hide-bottom-space
:readonly="routeName != 'probationWorkAdd'"
dense
s
borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="date3 != null ? date2Thai(date3) : null"
label="ลงวันที่"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
งคบบญชาผมอบหมายงาน
</div>
2023-07-27 16:54:05 +07:00
<div class="col-12 row q-col-gutter-md">
<q-select
2023-08-09 12:09:46 +07:00
:options="OPcommander"
option-value="personal_id"
option-label="name"
2023-07-27 16:54:05 +07:00
class="col-xs-12 col-sm-8"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
2023-07-27 16:54:05 +07:00
:outlined="routeName == 'probationWorkAdd'"
v-model="commander"
label="ผู้บังคับบัญชา"
/>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="date4"
:locale="'th'"
autoApply
borderless
:readonly="routeName !== 'probationWorkAdd'"
2023-07-27 16:54:05 +07:00
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="date4 != null ? date2Thai(date4) : null"
label="ลงวันที่"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
2023-08-18 11:50:53 +07:00
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
ประธานกรรมการ
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
:options="OPchairman"
option-value="personal_id"
option-label="name"
class="col-xs-12 col-sm-8"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="chairman"
label="ประธานกรรมการ"
/>
</div>
</div>
</div>
</div>
2023-07-27 16:54:05 +07:00
<q-separator v-show="routeName == 'probationWorkAdd'" />
<div
v-show="routeName == 'probationWorkAdd'"
class="flex justify-end q-pa-sm q-gutter-sm"
>
2023-08-09 12:09:46 +07:00
<q-btn
unelevated
label="บันทึก"
color="public"
@click="saveData(personalId)"
/>
2023-07-27 16:54:05 +07:00
</div>
</q-card>
</div>
</q-form>
</template>
<script setup lang="ts">
2023-08-09 12:09:46 +07:00
import { useRouter, useRoute } from "vue-router";
import { ref, computed, watch, onMounted } from "vue";
2023-07-10 19:29:15 +07:00
import { useCounterMixin } from "@/stores/mixin";
2023-07-27 16:54:05 +07:00
import { useQuasar } from "quasar";
import http from "@/plugins/http";
2023-07-27 16:54:05 +07:00
import config from "@/app.config";
2023-07-27 16:54:05 +07:00
const $q = useQuasar();
2023-07-27 09:11:43 +07:00
const val1 = ref([
{
id: 1,
text: "1.รัฐธรรมนูญ",
checked: false,
},
]);
2023-07-27 16:54:05 +07:00
2023-07-13 14:33:04 +07:00
const router = useRouter();
2023-07-10 19:29:15 +07:00
const mixin = useCounterMixin();
2023-08-09 12:09:46 +07:00
const {
date2Thai,
notifyError,
dateToISO,
success,
messageError,
showLoader,
hideLoader,
} = mixin;
const filterData = (options: any[], excludedGroups: any[]) => {
2023-08-09 12:09:46 +07:00
return options.filter(
(item) => !excludedGroups.some((group) => group && group.id === item.id)
);
};
const filtermantor = (options: any[], excludedGroups: any[]) => {
return options.filter(
(item) =>
!excludedGroups.some(
(group) => group && group.personal_id === item.personal_id
)
);
};
const filterMain = (options: any[], excludedGroups: any[]) => {
2023-08-09 12:09:46 +07:00
return options.filter(
(item) => !excludedGroups.some((group) => group && group.id === item.id)
);
};
2023-08-09 12:09:46 +07:00
const route = useRoute();
2023-07-27 16:54:05 +07:00
const checkValidate = ref<boolean>(false);
const myForm = ref<any>(null);
const fullnameFoot = ref<string>("");
const positionFoot = ref<string>("");
const caretakerFoot = ref<string>("");
const caretakerFoot2 = ref<string>("");
2023-07-27 09:11:43 +07:00
const id = ref<number>();
2023-08-09 12:09:46 +07:00
const personalId = route.params.personalId as string;
2023-07-27 16:54:05 +07:00
const fullname = ref<string>();
2023-07-27 09:11:43 +07:00
const knowledge_skill_map_no = ref<string[]>([]);
const round_no = ref<number>();
2023-08-09 12:09:46 +07:00
const date_start = ref<Date>();
const date_finish = ref<Date>();
2023-07-27 09:11:43 +07:00
const behavior_desc = ref<string>();
const other_desc = ref<object>({});
const other4_desc = ref<string>();
const Other5 = ref<string>();
2023-07-27 09:11:43 +07:00
const other5_no1_desc = ref<object>({});
const other5_no2_desc = ref<object>({});
const experimenter_dated = ref<Date>();
const createdAt = ref<Date>();
const updatedAt = ref<Date>();
const group = ref<any | null>(null);
const group2 = ref<any | null>(null);
const group3 = ref<any | null>(null);
const main = ref<any>();
const main2 = ref<any>();
const main3 = ref<any>();
const main4 = ref<any>();
const main5 = ref<any>();
const assignId = ref<string>(route.params.form as string);
const Other = ref<string>("");
const commander = ref<string>("");
2023-08-18 11:50:53 +07:00
const chairman = ref<string>("");
2023-07-27 09:11:43 +07:00
const date1 = ref<Date>();
const date2 = ref<Date>();
const date3 = ref<Date>();
const date4 = ref<Date>();
const OPmain = ref<
Array<{
id: number;
title: string;
description: string;
level: number;
}>
>([]);
const OPgroup = ref<
Array<{
id: number;
title: string;
description: string;
level: number;
}>
>([]);
const clearDateExam = () => {
date_start.value = undefined;
};
const clearDateExam2 = () => {
date_finish.value = undefined;
};
2023-07-27 16:54:05 +07:00
const isDatePicker2Readonly = computed(() => {
return date_start.value === undefined;
2023-07-27 09:11:43 +07:00
});
2023-07-27 16:54:05 +07:00
const routeName = router.currentRoute.value.name;
const name = ref<string>("");
const position = ref<string>("");
2023-08-09 12:09:46 +07:00
const monthSelect = ref<number | string>();
const caretaker1 = ref<string>("");
const caretaker2 = ref<string>("");
2023-08-09 12:09:46 +07:00
const OPcaretaker = ref<
{
personal_id: string;
name: string;
PositionId: string;
PositionLevelId: string;
PositionLineId: string;
OrganizationOrganization: string;
}[]
>([]);
const OPcommander = ref<
{
personal_id: string;
name: string;
PositionId: string;
PositionLevelId: string;
PositionLineId: string;
OrganizationOrganization: string;
}[]
>([]);
2023-08-18 11:50:53 +07:00
const OPchairman = ref<
{
personal_id: string;
name: string;
PositionId: string;
PositionLevelId: string;
PositionLineId: string;
OrganizationOrganization: string;
}[]
>([]);
2023-08-09 12:09:46 +07:00
interface MonthOption {
value: number;
label: string;
}
const monthOp: MonthOption[] = [];
2023-08-09 17:12:37 +07:00
//-----------------(3.1)-----------//
const activityCount = ref<number>(2);
const activityDataArray = ref<any[]>([]);
2023-07-27 16:54:05 +07:00
const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
const addActivity = () => {
activityCount.value++;
};
const deleteactivity = (item: number) => {
2023-07-27 16:54:05 +07:00
activity_desc.value.splice(item, 1);
goal_desc.value.splice(item, 1);
if (activityCount.value > 2) {
activityCount.value--;
}
};
const activityArray = computed(() => {
return Array(activityCount.value).fill("");
});
const resetActivity = () => {
activityCount.value = 2;
2023-07-27 16:54:05 +07:00
activity_desc.value = Array(activityCount.value).fill("");
goal_desc.value = Array(activityCount.value).fill("");
};
//-----------------(3.2)-----------//
const knowledgeCount = ref<number>(3);
2023-08-09 12:09:46 +07:00
const knowledge = ref<any[]>([]);
const OPknowledge = ref<
Array<{
2023-08-09 12:09:46 +07:00
id: number;
title: number;
description:string;
level: string;
}>
>([]);
const addKnowledge = () => {
if (knowledgeCount.value < 6) {
knowledgeCount.value++;
}
};
2023-07-27 17:45:14 +07:00
const knowledgeArray = computed(() => {
return Array(knowledgeCount.value).fill("");
});
const getOpknowledge = (index: number) => {
return OPknowledge;
};
2023-07-27 16:54:05 +07:00
const deleteknowledge = (item: number) => {
knowledge.value.splice(item, 1);
if (knowledgeCount.value > 3) {
knowledgeCount.value--;
}
};
const checked = ref<boolean>(false);
const productivityCount = ref<number>(1);
const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const deleteProductivitys = (item: number) => {
output_desc.value.splice(item, 1);
indicator_desc.value.splice(item, 1);
if (productivityCount.value > 1) {
productivityCount.value--;
}
};
const addProductivity = () => {
productivityCount.value++;
};
const ProductivityArray = computed(() => {
return Array(productivityCount.value).fill("");
});
2023-07-27 09:11:43 +07:00
interface CheckboxItem {
id: number;
parent_id: number;
description: string;
status_select: number;
checked: number;
2023-07-27 09:11:43 +07:00
}
const checkRule = ref<CheckboxItem[]>([]);
2023-08-09 12:09:46 +07:00
const getAssignNew = async (id: string) => {
await http.get(config.API.newAssign(id)).then((res: any) => {
const data = res.data.data;
const monthOption = {
value: data.assign_month,
label: `${data.assign_month} เดือน`,
};
console.log("Assign-New", data);
monthOp.push(monthOption);
monthSelect.value = `${data.assign_month} เดือน`;
OPcaretaker.value = data.mentors;
OPcommander.value = [data.commander];
2023-08-18 11:50:53 +07:00
OPchairman.value = [data.chairman];
fullname.value = data.person.name;
position.value = data.person.OrganizationOrganization;
2023-08-09 12:09:46 +07:00
});
};
const getcompetency = async (id: string) => {
await http.get(config.API.competencyOptions(id)).then((res: any) => {
const data = res.data.data;
OPmain.value = data;
main.value = data[0];
main2.value = data[1];
main3.value = data[2];
main4.value = data[3];
main5.value = data[4];
});
};
const getCompetencyGroup = async (id: string) => {
await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
const data = res.data.data;
OPgroup.value = data;
group.value = data[0];
group2.value = data[1];
group3.value = data[2];
});
};
const getKnowledge = async (id: string) => {
await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
OPknowledge.value = res.data.data;
});
};
const getSkill = async (id: string) => {
await http.get(config.API.skillOptions(id)).then((res: any) => {
const skillData = res.data.data;
OPcomputer.value = [skillData.computer];
OPenglish.value = [skillData.english];
OPinfomation.value = [skillData.information];
OPresourse.value = [skillData.resourse];
skill.value = skillData.computer;
skill2.value = skillData.english;
skill3.value = skillData.information;
skill4.value = skillData.resourse;
});
};
const getLaw = async (id: string) => {
await http.get(config.API.lawOptions(id)).then((res: any) => {
checkRule.value = res.data.data;
});
};
2023-07-27 16:54:05 +07:00
2023-08-09 12:09:46 +07:00
const postDateTime = async () => {
await http
.post(config.API.calculateDate(), {
month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
start_date: dateToISO(date_start.value as Date),
})
.then(async (res) => {
const result = res.data;
date_finish.value = result.finish_date;
2023-08-09 12:09:46 +07:00
})
.catch((e) => {})
.finally(async () => {
hideLoader();
});
};
const putData = (id: string) => {
const GUID = id;
const assign_job = activityArray.value.map((item, index) => {
const activityDesc = activity_desc.value[index]?.trim();
const goalDesc = goal_desc.value[index]?.trim();
if (activityDesc !== "" && goalDesc !== "") {
return {
activity_desc: activityDesc,
goal_desc: goalDesc,
};
} else {
2023-08-09 12:09:46 +07:00
return null;
}
});
const know_ledge = knowledge.value.map((item) => ({
level: item ? item.level : null,
}));
const Productivity_assign = ProductivityArray.value.map((item, index) => {
const outputDesc = output_desc.value[index]?.trim();
const indicatorDesc = indicator_desc.value[index]?.trim();
if (outputDesc !== "" && indicatorDesc !== "") {
return {
2023-08-09 12:09:46 +07:00
output_desc: outputDesc,
indicator_desc: indicatorDesc,
};
} else {
2023-08-09 12:09:46 +07:00
return null;
}
});
2023-08-09 12:09:46 +07:00
const allGroup = [];
if (group.value) allGroup.push({ level: group.value.level });
if (group2.value) allGroup.push({ level: group2.value.level });
if (group3.value) allGroup.push({ level: group3.value.level });
2023-08-09 12:09:46 +07:00
const allSkills = [];
if (skill.value) allSkills.push({ level: skill.value.level });
if (skill2.value) allSkills.push({ level: skill2.value.level });
if (skill3.value) allSkills.push({ level: skill3.value.level });
if (skill4.value) allSkills.push({ level: skill4.value.level });
2023-08-09 12:09:46 +07:00
const allCompetency = [];
if (main.value) allCompetency.push({ level: main.value.level });
if (main2.value) allCompetency.push({ level: main2.value.level });
if (main3.value) allCompetency.push({ level: main3.value.level });
if (main4.value) allCompetency.push({ level: main4.value.level });
if (main5.value) allCompetency.push({ level: main5.value.level });
2023-08-09 12:09:46 +07:00
const assign_director = [
{
2023-08-09 17:12:37 +07:00
personal_id: caretaker1.value.personal_id,
2023-08-09 12:09:46 +07:00
role: "mentor",
dated: date2.value instanceof Date ? dateToISO(date2.value) : null,
},
{
2023-08-09 17:12:37 +07:00
personal_id: caretaker2.value.personal_id,
2023-08-09 12:09:46 +07:00
role: "mentor",
dated: date3.value instanceof Date ? dateToISO(date3.value) : null,
},
{
personal_id: commander.value.personal_id,
role: "commander",
dated: date4.value instanceof Date ? dateToISO(date4.value) : null,
},
2023-08-18 11:50:53 +07:00
{
personal_id: chairman.value.personal_id,
role: "chairman"
},
2023-08-09 12:09:46 +07:00
];
2023-07-28 09:09:47 +07:00
const data = {
2023-08-09 12:09:46 +07:00
personalId: GUID,
fullname: fullname.value,
position: position.value,
monthSelect:
monthSelect.value !== null ? parseInt(monthSelect.value) : null,
date_start:
date_start.value instanceof Date
? dateToISO(date_start.value)
: new Date(),
date_finish:
date_finish.value instanceof Date
? dateToISO(date_finish.value)
: dateToISO(new Date(date_finish.value)),
2023-08-09 12:09:46 +07:00
// caretaker_1: caretaker1.value,
// caretaker_2: caretaker2.value,
assign_knowledges: know_ledge,
assign_jobs: assign_job.filter((item) => item !== null),
other_desc: OtherLaw.value,
assign_skill: allSkills,
assign_competency: allCompetency,
assign_competency_group: allGroup,
other4_desc: Other.value,
other5_no1_desc: Other5.value,
assign_outputs: Productivity_assign.filter((item) => item !== null),
// commander: commander.value,
assign_director: assign_director,
experimenter_dated:
date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
2023-08-09 12:09:46 +07:00
// date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
// date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
// date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
// caretaker_foot: caretakerFoot.value,
// caretaker_foot2: caretakerFoot2.value,
assign_law: checkRule.value
.filter((item) => item.checked === 1)
.map((item) => ({
id: item.id,
checked: item.checked,
})),
};
return data;
};
2023-07-27 16:54:05 +07:00
2023-08-09 12:09:46 +07:00
const saveData = (id: string) => {
myForm.value.validate().then((result: boolean) => {
2023-07-27 16:54:05 +07:00
if (result) {
$q.dialog({
title: "บันทึกข้อมูล",
message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
cancel: {
flat: true,
const: "negative",
},
})
.onOk(() => {
2023-08-09 12:09:46 +07:00
const data = putData(id);
http
2023-08-09 12:09:46 +07:00
.post(config.API.saveFinish(id), data)
.then((res) => {
2023-08-09 17:12:37 +07:00
router.push(`/probation/detail/${id}`);
})
2023-08-09 12:09:46 +07:00
.catch((e) => {})
.finally(() => {
2023-08-09 12:09:46 +07:00
hideLoader();
});
2023-07-27 16:54:05 +07:00
})
.onCancel(() => {})
.onDismiss(() => {});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
}
});
2023-07-27 09:11:43 +07:00
};
const OtherLaw = ref<string>("");
const skill = ref<any>();
const skill2 = ref<any>();
const skill3 = ref<any>();
const skill4 = ref<any>();
const OPcomputer = ref<
Array<{
id: number;
title: string;
level: number;
level_description: string;
}>
>([]);
const OPenglish = ref<
Array<{
id: number;
title: string;
level: number;
level_description: string;
}>
>([]);
const OPinfomation = ref<
Array<{
id: number;
title: string;
level: number;
level_description: string;
}>
>([]);
const OPresourse = ref<
Array<{
id: number;
title: string;
level: number;
level_description: string;
}>
>([]);
const skillIds = [1, 2, 3, 4];
const getAssign = async () => {
await http.get(config.API.probationsGetAssign(assignId.value)).then((res) => {
const data = res.data.data;
console.log("ASSIGN-list ==>", data);
fullname.value = data.profile.name
position.value = data.profile.OrganizationOrganization
date_start.value = data.assign.date_start
date_finish.value = data.assign.date_finish
date1.value = data.assign.experimenter_dated
date2.value = data.mentors[0].dated
date3.value = data.mentors[1].dated
date4.value = data.commander.dated
activity_desc.value = data.jobs.map((job:any) => job.activity_desc);
goal_desc.value = data.jobs.map((job:any) => job.goal_desc);
activityCount.value = data.jobs.length
caretaker1.value = data.mentors[0];
caretaker2.value = data.mentors[1];
2023-08-18 11:50:53 +07:00
chairman.value = data.chairman.name;
commander.value = data.commander.name
knowledge.value = data.knowledges.map((id:any)=> id.id)
knowledgeCount.value = data.knowledges.length
other_desc.value = data.assign.other_desc
other4_desc.value = data.assign.other4_desc
other5_no1_desc.value = data.assign.other5_no1_desc
const skills = data.skills.map((skills: any) => ({
id: skills.id,
title: skills.title,
level: skills.level,
level_description: skills.description,
}));
[skill.value, skill2.value, skill3.value, skill4.value] = skills;
main.value = data.competencys[0]
main2.value = data.competencys[1]
main3.value = data.competencys[2]
main4.value = data.competencys[3]
main5.value = data.competencys[4]
2023-07-10 19:29:15 +07:00
group.value = data.competency_groups[0]
group2.value = data.competency_groups[1]
group3.value = data.competency_groups[2]
output_desc.value = data.outputs.map((output: any) => output.output_desc);
indicator_desc.value = data.outputs.map((output: any) => output.indicator_desc);
productivityCount.value = data.outputs.length;
checkRule.value = data.laws.map((law: any) => ({
id: law.law_id,
checked: law.selected,
description: law.description,
status_select: law.status_select,
}));
console.log("🚀 ~ file: FormAssign.vue:2009 ~ awaithttp.get ~ checkRule:", checkRule.value)
})
};
onMounted(async() => {
await getLaw(personalId);
await getcompetency(personalId);
await getCompetencyGroup(personalId);
await getSkill(personalId);
await getKnowledge(personalId);
2023-08-09 12:09:46 +07:00
await getAssignNew(personalId);
await getAssign();
2023-08-09 12:09:46 +07:00
});
watch(
() => [monthSelect.value, date_start.value],
() => {
if (monthSelect.value !== undefined && date_start.value !== undefined) {
postDateTime();
}
}
);
watch(knowledge.value, () => {
knowledge.value.forEach((item) => {
OPknowledge.value = OPknowledge.value.filter((e) => e.id != item.id);
});
});
</script>
<style lang="scss" scoped>
.border_y {
border-left: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
2023-07-10 19:29:15 +07:00
}
.borderCheck {
border-bottom: 1px solid #d8d8d8;
}
.text-top2 {
font-weight: 500;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.text-Hd {
font-weight: 600;
font-size: 1rem;
padding-bottom: 5px;
color: #02a998;
}
.bin {
align-items: center;
justify-content: center;
}
2023-08-09 12:09:46 +07:00
.q-item span {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>