ui เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
This commit is contained in:
setthawutttty
parent
615b5646d6
commit
4dce59d844
1 changed files with 199 additions and 85 deletions
|
|
@ -49,6 +49,73 @@
|
|||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 text-top0 items-center">
|
||||
ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateExam"
|
||||
: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
|
||||
|
||||
dense
|
||||
class="full-width datepicker q-mb-md"
|
||||
:model-value="dateExam != null ? date2Thai(dateExam) : null"
|
||||
:label="`${'ตั้งเเต่วันที่'}`"
|
||||
clearable
|
||||
@clear="clearDateExam"
|
||||
>
|
||||
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateExam2"
|
||||
: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
|
||||
|
||||
dense
|
||||
class="full-width datepicker q-mb-md"
|
||||
:model-value="dateExam2 != null ? date2Thai(dateExam2) : null"
|
||||
:label="`${'ตั้งเเต่วันที่'}`"
|
||||
clearable
|
||||
@clear="clearDateExam2"
|
||||
>
|
||||
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
|
@ -58,7 +125,7 @@
|
|||
<div class="col-12 text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
||||
ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
|
||||
<q-btn
|
||||
<!-- <q-btn
|
||||
v-if="routeName == 'probationWorkAdd'"
|
||||
round
|
||||
color="primary"
|
||||
|
|
@ -67,39 +134,36 @@
|
|||
flat
|
||||
class="q-ml-sm"
|
||||
@click="addCaretaker"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="caretakerCount > 2 && routeName == 'probationWorkAdd'"
|
||||
round
|
||||
color="red"
|
||||
dense
|
||||
icon="undo"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
@click="resetCaretakers"
|
||||
><q-tooltip>รีเช็ต</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<q-select
|
||||
v-for="item in caretakerCount"
|
||||
:key="item"
|
||||
:options="getOptions(item)"
|
||||
:options="OPcaretaker"
|
||||
class="col-xs-12 col-sm-6"
|
||||
:readonly="routeName != 'probationWorkAdd'"
|
||||
dense
|
||||
borderless
|
||||
:outlined="routeName == 'probationWorkAdd'"
|
||||
v-model="caretakers[item - 1]"
|
||||
:label="`ผู้ดูแลคนที่ ${item}`"
|
||||
v-model="caretaker1"
|
||||
:label="`ผู้ดูแลคนที่ 1`"
|
||||
/>
|
||||
<q-select
|
||||
:options="OPcaretaker"
|
||||
class="col-xs-12 col-sm-6"
|
||||
:readonly="routeName != 'probationWorkAdd'"
|
||||
dense
|
||||
borderless
|
||||
:outlined="routeName == 'probationWorkAdd'"
|
||||
v-model="caretaker2"
|
||||
:label="`ผู้ดูแลคนที่ 2`"
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
||||
|
|
@ -118,22 +182,11 @@
|
|||
class="q-ml-sm"
|
||||
@click="addActivity"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="activityCount > 2 && routeName == 'probationWorkAdd'"
|
||||
round
|
||||
color="red"
|
||||
dense
|
||||
icon="undo"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
@click="resetActivity"
|
||||
><q-tooltip>รีเช็ต</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
</div>
|
||||
<div class="col-12 row q-gutter-md">
|
||||
<div class="col-12 row q-gutter-sm">
|
||||
<q-card
|
||||
v-for="item in activityCount"
|
||||
v-for="(item, index) in activityArray"
|
||||
:key="index"
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-sm bg-grey-1"
|
||||
|
|
@ -147,11 +200,11 @@
|
|||
:outlined="routeName == 'probationWorkAdd'"
|
||||
class="bg-white"
|
||||
type="textarea"
|
||||
v-model="activities[item - 1]"
|
||||
v-model="activities[index]"
|
||||
label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
<q-input
|
||||
:readonly="routeName != 'probationWorkAdd'"
|
||||
dense
|
||||
|
|
@ -159,14 +212,28 @@
|
|||
:outlined="routeName == 'probationWorkAdd'"
|
||||
class="bg-white"
|
||||
type="textarea"
|
||||
v-model="goals[item - 1]"
|
||||
v-model="goals[index]"
|
||||
label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
|
||||
/>
|
||||
</div>
|
||||
<!-- delete -->
|
||||
<div
|
||||
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"
|
||||
@click="deleteactivity(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
|
|
@ -187,23 +254,12 @@
|
|||
class="q-ml-sm"
|
||||
@click="addKnowledge"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="
|
||||
knowledgeCount > 3 && routeName == 'probationWorkAdd'
|
||||
"
|
||||
round
|
||||
color="red"
|
||||
dense
|
||||
icon="undo"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
@click="resetKnowledge"
|
||||
><q-tooltip>รีเช็ต</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div v-for="item in knowledgeCount" class="col-12">
|
||||
<div
|
||||
v-for="(item, index) in knowledgeArray"
|
||||
class="col-12 row q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-11 q-my-xs">
|
||||
<q-select
|
||||
:options="getOpknowledge(item)"
|
||||
class="bg-white"
|
||||
|
|
@ -211,12 +267,25 @@
|
|||
dense
|
||||
borderless
|
||||
:outlined="routeName == 'probationWorkAdd'"
|
||||
v-model="knowledge[item - 1]"
|
||||
:label="`ความรู้ความสามารถในการปฏิบัติงาน ${item}`"
|
||||
v-model="knowledge[index]"
|
||||
:label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1}`"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-12 col-sm-1 flex justify-center items-center"
|
||||
>
|
||||
<q-btn
|
||||
v-if="index > 2"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-trash-can-outline"
|
||||
@click="deleteknowledge(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top2 row items-center">
|
||||
ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
|
||||
|
|
@ -335,17 +404,25 @@
|
|||
<div class="col-9 q-pl-xl">{{ item.text }}</div>
|
||||
</div>
|
||||
<div class="row q-mt-xs bg-grey-3 q-py-xs">
|
||||
<div class="col-1 text-center">
|
||||
<q-checkbox
|
||||
v-model="val3"
|
||||
dense
|
||||
:disable="routeName != 'probationWorkAdd'"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -644,22 +721,10 @@
|
|||
class="q-ml-sm"
|
||||
@click="addProductivity"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="productivityCount > 1 && routeName == 'probationWorkAdd'"
|
||||
round
|
||||
color="red"
|
||||
dense
|
||||
icon="undo"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
@click="resetProductivity"
|
||||
><q-tooltip>รีเช็ต</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
</div>
|
||||
<div class="col-12 row q-gutter-md">
|
||||
<q-card
|
||||
v-for="item in productivityCount"
|
||||
v-for="(item, index) in productivityCount"
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-sm bg-grey-1"
|
||||
|
|
@ -673,11 +738,11 @@
|
|||
dense
|
||||
borderless
|
||||
:outlined="routeName == 'probationWorkAdd'"
|
||||
v-model="Productivitys[item - 1]"
|
||||
v-model="Productivitys[index]"
|
||||
label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
type="textarea"
|
||||
|
|
@ -685,10 +750,22 @@
|
|||
dense
|
||||
borderless
|
||||
:outlined="routeName == 'probationWorkAdd'"
|
||||
v-model="goals1[item - 1]"
|
||||
v-model="goals1[index]"
|
||||
label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="index > 0"
|
||||
class="col-xs-12 col-sm-1 flex justify-center items-center"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-trash-can-outline"
|
||||
@click="deleteProductivitys(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -1077,15 +1154,24 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
// import type { QForm } from "quasar";
|
||||
const val1 = ref(false);
|
||||
const val3 = ref(false);
|
||||
const router = useRouter();
|
||||
|
||||
const test = ref<string>('')
|
||||
const ruleNote = ref<string>("");
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
const dateExam = ref<Date | null>(null);
|
||||
const dateExam2 = ref<Date | null>(null);
|
||||
const clearDateExam = () => {
|
||||
dateExam.value = null;
|
||||
};
|
||||
const clearDateExam2 = () => {
|
||||
dateExam2.value = null;
|
||||
};
|
||||
|
||||
const routeName = router.currentRoute.value.name;
|
||||
|
||||
|
|
@ -1094,7 +1180,8 @@ const position = ref<string>("นักจัดการงานทั่ว
|
|||
|
||||
const caretakerCount = ref<number>(2);
|
||||
const caretakerMax = ref<number>(6);
|
||||
const caretakers = ref<string[]>(Array(caretakerCount.value).fill(""));
|
||||
|
||||
const caretaker1 = ref<string>("");
|
||||
const caretaker2 = ref<string>("");
|
||||
const OPcaretaker = [
|
||||
"นางสาวรัชภรณ์ ภักดี",
|
||||
|
|
@ -1122,6 +1209,16 @@ const goals = ref<string[]>(Array(activityCount.value).fill(""));
|
|||
const addActivity = () => {
|
||||
activityCount.value++;
|
||||
};
|
||||
const deleteactivity = (item: number) => {
|
||||
activities.value.splice(item, 1);
|
||||
goals.value.splice(item, 1);
|
||||
if (activityCount.value > 2) {
|
||||
activityCount.value--;
|
||||
}
|
||||
};
|
||||
const activityArray = computed(() => {
|
||||
return Array(activityCount.value).fill("");
|
||||
});
|
||||
const resetActivity = () => {
|
||||
activityCount.value = 2;
|
||||
activities.value = Array(activityCount.value).fill("");
|
||||
|
|
@ -1132,20 +1229,33 @@ const knowledgeCount = ref<number>(3);
|
|||
const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
|
||||
const OPknowledge = ["1", "2", "3", "4"];
|
||||
const addKnowledge = () => {
|
||||
knowledgeCount.value++;
|
||||
if (knowledgeCount.value < 6) {
|
||||
knowledgeCount.value++;
|
||||
}
|
||||
};
|
||||
const knowledgeArray = computed(() => {
|
||||
return Array(knowledgeCount.value).fill("");
|
||||
});
|
||||
const getOpknowledge = (index: number) => {
|
||||
return OPknowledge;
|
||||
};
|
||||
const resetKnowledge = () => {
|
||||
knowledgeCount.value = 3;
|
||||
knowledge.value = Array(knowledgeCount.value).fill("");
|
||||
const deleteknowledge = (item: number) => {
|
||||
knowledge.value.splice(item, 1);
|
||||
if (knowledgeCount.value > 3) {
|
||||
knowledgeCount.value--;
|
||||
}
|
||||
};
|
||||
|
||||
const productivityCount = ref<number>(1);
|
||||
const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
|
||||
const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
|
||||
|
||||
const deleteProductivitys = (item: number) => {
|
||||
Productivitys.value.splice(item, 1);
|
||||
goals1.value.splice(item, 1);
|
||||
if (productivityCount.value > 1) {
|
||||
productivityCount.value--;
|
||||
}
|
||||
};
|
||||
const addProductivity = () => {
|
||||
productivityCount.value++;
|
||||
};
|
||||
|
|
@ -1372,4 +1482,8 @@ const date4 = ref<Date>(new Date());
|
|||
padding-bottom: 5px;
|
||||
color: #02a998;
|
||||
}
|
||||
.bin {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue