From 10395775e82fc8e193686ce01d8fb62ec77054b3 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Mon, 10 Jul 2023 17:44:24 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=A1=E0=B8=AD=E0=B8=9A=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/AddWork.vue          | 259 ++++++++++++++++++
 .../components/probation/MainProbation.vue    |   6 +-
 .../components/probation/ProbationDetail.vue  |  13 +-
 src/modules/05_placement/router.ts            |  14 +
 4 files changed, 283 insertions(+), 9 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/AddWork.vue

diff --git a/src/modules/05_placement/components/probation/AddWork.vue b/src/modules/05_placement/components/probation/AddWork.vue
new file mode 100644
index 000000000..8dc52ece6
--- /dev/null
+++ b/src/modules/05_placement/components/probation/AddWork.vue
@@ -0,0 +1,259 @@
+<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)"
+        />
+        แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+    </div>
+    <q-card bordered class="row text-dark q-pa-lg">
+        <div class="row col-12 q-gutter-lg">
+            <div class="col-12 row">
+                <div class="col-12 text-top2">
+                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                    ผู้ทดลองปฏิบัติหน้าที่ราชการ
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+                    <div class="col-xs-12 col-sm-6">
+                        <q-input dense outlined v-model="name" label="ชื่อ-สกุล" />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                        <q-input dense outlined v-model="position" label="ตำแหน่ง" />
+                    </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" />
+                    ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+                    <q-select :options="OPcaretaker1" class="col-xs-12 col-sm-6" dense outlined v-model="caretaker" label="ผู้ดูแลคนที่ 1" />
+                    <q-select :options="OPcaretaker2" class="col-xs-12 col-sm-6" dense outlined v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
+                </div>
+            </div>
+            <div class="col-12">
+                <q-separator />
+            </div>
+            <div class="col-12 row">
+                <div class="col-12 text-Hd">ผลการปฏิบัติงาน</div>
+                <div class="col-12 text-top2 row items-center">
+                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                    ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
+                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
+                </div>
+                <div class="col-12 row q-gutter-md">
+                    <q-card 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">
+                                <q-input class="bg-white" type="textarea" dense outlined v-model="activity1" label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                            </div>
+                            <div class="col-xs-12 col-sm-6">
+                                <q-input class="bg-white" type="textarea" dense outlined v-model="goal1" label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                            </div>
+                        </div>
+                    </q-card>
+                    <q-card 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">
+                                <q-input class="bg-white" type="textarea" dense outlined v-model="activity2" label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                            </div>
+                            <div class="col-xs-12 col-sm-6">
+                                <q-input class="bg-white" type="textarea" dense outlined v-model="goal2" label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                            </div>
+                        </div>
+                    </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" />
+                    ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
+                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+                    <q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge" label="ความรู้ความสามารถในการปฏิบัติงาน 1" />
+                    <q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge2" label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
+                    <q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge3" label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
+                </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" />
+                    ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
+                </div>
+                <q-card flat bordered class="col-12 q-pa-md"  style="max-height: 500px; overflow-y: scroll">
+                    <div class="col-12 row q-pb-sm" v-for="(lawl, index) in listlaw" :key="index" >
+                        <q-checkbox  :val="lawl.id" dense v-model="law" :label="lawl.label" />
+                    </div>
+                </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" />
+                    กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12">
+                        <q-input dense outlined v-model="OtherLaw" />
+                    </div>
+                </div>
+            </div>
+						<div class="col-12 row">
+                <div class="col-12 text-top2">
+                    <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="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill" label="ด้านที่ 1" />
+                    <q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill2" label="ด้านที่ 2" />
+                    <q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill3" label="ด้านที่ 3" />
+										<q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill4" label="ด้านที่ 4" />
+                </div>
+            </div>
+            <div class="col-12 row">
+                <div class="col-12 text-top2 ">
+                    <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="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main" label="ตัวที่ 1" />
+                    <q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main2" label="ตัวที่ 2" />
+                    <q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main3" label="ตัวที่ 3" />
+										<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main4" label="ตัวที่ 4" />
+										<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main5" label="ตัวที่ 4" />
+                </div>
+            </div>
+						<div class="col-12 row">
+							<div class="col-12 text-top2 ">
+                    <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="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group" label="ตัวที่ 1" />
+                    <q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group2" label="ตัวที่ 2" />
+                    <q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group3" label="ตัวที่ 3" />
+                </div>
+						</div>
+            <div class="col-12 row">
+                <div class="col-12 text-top2">พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน</div>
+								(ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )
+						</div>
+						<div class="col-12 row">
+							<div class="col-12 text-top2 ">
+                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                    ความประพฤติ ได้แก่
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+									<div class="col-12 column q-ml-lg">
+                    <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
+										<li>มีความรับผิดชอบในการปฏิบัติงาน</li>
+										<li>ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน</li>
+										<li>ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร</li>
+									</div>
+								</div>
+						</div>
+						<div class="col-12 row">
+							<div class="col-12 text-top2 ">
+                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                    ความมีคุณธรรมจริยธรรม ได้แก่
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+									<div class="col-12 column q-ml-lg">
+                    <li>อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ</li>
+										<li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
+										<li>ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา และพระมหากษัตริย์</li>
+									</div>
+								</div>
+						</div>
+						<div class="col-12 row">
+							<div class="col-12 text-top2 ">
+                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                    การรักษาวินัย ได้แก่
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+									<div class="col-12 column q-ml-lg">
+                    <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+										<li>แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ</li>
+										<li>ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ</li>
+										<li>ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน</li>
+										<li>ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ</li>
+									</div>
+								</div>
+						</div>
+        </div>
+    </q-card>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+const router = useRouter();
+import { ref } from "vue";
+import type OtherVue from "@/modules/04_registry/components/Other.vue";
+
+const name = ref<string>('นายสมคิด ยอดใจ');
+const position = ref<string>('นักจัดการงานทั่วไป');
+
+const caretaker = ref<string>('นางสาวรัชภรณ์ ภักดี');
+const caretaker2 = ref<string>('');
+const OPcaretaker1 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
+const OPcaretaker2 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
+
+const activity1 = ref<string>('');
+const goal1 = ref<string>('');
+const activity2 = ref<string>('');
+const goal2 = ref<string>('');
+
+const knowledge = ref<string>('');
+const knowledge2 = ref<string>('');
+const knowledge3 = ref<string>('');
+const OPknowledge = ['',''];
+
+const law = ref([]);
+const listlaw = [
+  { id: 1, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 1' },
+	{ id: 2, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 2' },
+	{ id: 3, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 3' },
+	{ id: 4, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 4' },
+	{ id: 5, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 5' }
+];
+const OtherLaw = ref<string>('');
+
+const skill = ref<string>('ความรู้ความสามารถด้าน 1');
+const skill2 = ref<string>('ความรู้ความสามารถด้าน 2');
+const skill3 = ref<string>('ความรู้ความสามารถด้าน 3');
+const skill4 = ref<string>('ความรู้ความสามารถด้าน 4');
+const OPskill = [''];
+
+const main = ref<string>('คุณธรรมจริยธรรม')
+const main2 = ref<string>('การให้บริการที่ดี')
+const main3 = ref<string>('การมุ่งผลสัมฤทธิ์')
+const main4 = ref<string>('ทํางานเป็นทีม')
+const main5 = ref<string>('การส่ังสมความเชี่ยวชาญในอาชีพ')
+const OPmain = [''];
+
+const group = ref<string>('')
+const group2 = ref<string>('')
+const group3 = ref<string>('')
+const OPgroup = [''];
+</script>
+<style lang="scss" scope>
+.text-top2{
+	font-weight: 600;
+	padding-bottom: 8px;
+    color: rgb(70, 68, 68);
+}
+.text-Hd{
+	font-weight: 600;
+    font-size: 1rem;
+    padding-bottom: 5px;
+    color: #02A998;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 78ab58bc5..ff6633ca4 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -81,7 +81,7 @@
 									<div v-if="col.name == 'no'">
 										{{ props.rowIndex + 1 }}
 									</div>
-									<div v-else-if="col.name == 'status'">
+									<!-- <div v-else-if="col.name == 'status'">
 										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
 											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
 										</q-icon>
@@ -91,7 +91,7 @@
 										<q-icon size="20px" v-else name="mdi-check" color="teal">
 											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
 										</q-icon>
-									</div>
+									</div> -->
 									<div v-else>
 										{{ col.value }}
 									</div>
@@ -308,7 +308,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "status",
-    align: "center",
+    align: "left",
     label: "สถานะทดลองงาน",
     sortable: true,
     field: "status",
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 4a971e5a0..25a57eaa4 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -61,16 +61,11 @@
 		<div class="row q-col-gutter-sm">
 			<div class="row col-12 q-col-gutter-sm">
 				<div>
-					<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
+					<q-btn @click="router.push(`/probation/work/add`)" size="12px" flat round color="add" icon="mdi-plus">
 						<q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
 					</q-btn>
 				</div>
 				<q-space />
-				<div>
-					<q-btn flat round color="blue" icon="mdi-file-download-outline">
-						<q-tooltip> ดาวน์โหลด .Docx</q-tooltip>
-					</q-btn>
-				</div>
 				<q-input
 					class="col-xs-12 col-sm-3 col-md-2"
 					standout
@@ -130,6 +125,7 @@
 							<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">
@@ -146,6 +142,11 @@
 									{{ col.value }}
 								</div>
 							</q-td>
+							<q-td auto-width>
+								<q-btn flat dense size="12px" round color="blue" icon="mdi-file-download-outline">
+									<q-tooltip> ดาวน์โหลด .Docx</q-tooltip>
+								</q-btn>
+							</q-td>
 						</q-tr>
 					</template>
 					<template v-slot:pagination="scope">
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 133d0d1fa..75c449f85 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -25,6 +25,10 @@ const mainProbation = () =>
 
 const probationDetail = () =>
   import("@/modules/05_placement/components/probation/ProbationDetail.vue");
+
+const probationWorkAdd = () =>
+import("@/modules/05_placement/components/probation/AddWork.vue");
+
 export default [
   {
     path: "/placement",
@@ -106,4 +110,14 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/work/add",
+    name: "probationWorkAdd",
+    component: probationWorkAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];