From e4f153b654c2c0414c34ff82425c45ecaeb78a81 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 11 Jul 2023 01:19:33 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B9=81=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B8=B3=E0=B8=AB=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=94=E0=B8=B9=E0=B9=81=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/AddWork.vue          |  427 ++++-
 .../components/probation/ProbationDetail.vue  |    2 +-
 .../components/probation/form.vue             | 1521 ++++++++++-------
 src/modules/05_placement/router.ts            |   10 +
 4 files changed, 1260 insertions(+), 700 deletions(-)

diff --git a/src/modules/05_placement/components/probation/AddWork.vue b/src/modules/05_placement/components/probation/AddWork.vue
index bdf3ebb45..887042841 100644
--- a/src/modules/05_placement/components/probation/AddWork.vue
+++ b/src/modules/05_placement/components/probation/AddWork.vue
@@ -11,7 +11,12 @@
 				class="q-mr-sm"
 				@click="router.go(-1)"
 			/>
-			เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+			<div v-if="routeName == 'probationWorkAdd'">
+				เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+			</div>
+			<div v-else>
+				แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+			</div>
 		</div>
 		<q-card bordered class="col-12 text-dark">
 			<div class="row col-12 q-pa-lg">
@@ -23,10 +28,22 @@
 						</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="ชื่อ-สกุล" />
+								<q-input 
+									:readonly="routeName != 'probationWorkAdd'"  
+									dense 
+									borderless 
+									:outlined="routeName == 'probationWorkAdd'" 
+									v-model="name" 
+									label="ชื่อ-สกุล" />
 							</div>
 							<div class="col-xs-12 col-sm-6">
-								<q-input dense outlined v-model="position" label="ตำแหน่ง" />
+								<q-input 
+									:readonly="routeName != 'probationWorkAdd'"  
+									dense 
+									borderless 
+									:outlined="routeName == 'probationWorkAdd'" 
+									v-model="position" 
+									label="ตำแหน่ง" />
 							</div>
 						</div>
 					</div>
@@ -40,8 +57,24 @@
 							<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" />
+							<q-select 
+								:options="OPcaretaker1" 
+								class="col-xs-12 col-sm-6" 
+								:readonly="routeName != 'probationWorkAdd'"  
+								dense 
+								borderless 
+								:outlined="routeName == 'probationWorkAdd'" 
+								v-model="caretaker" 
+								label="ผู้ดูแลคนที่ 1" />
+							<q-select 
+								:options="OPcaretaker2" 
+								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">
@@ -59,22 +92,53 @@
 						<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 class="col-xs-12 col-sm-6">
+										<q-input 
+										:readonly="routeName != 'probationWorkAdd'"  
+										dense 
+										borderless 
+										:outlined="routeName == 'probationWorkAdd'" 
+										class="bg-white" 
+										type="textarea" 
+										v-model="activity1" 
+										label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+									</div>
+									<div class="col-xs-12 col-sm-6">
+										<q-input 
+										:readonly="routeName != 'probationWorkAdd'"  
+										dense 
+										borderless 
+										:outlined="routeName == 'probationWorkAdd'" 
+										class="bg-white" 
+										type="textarea" 
+										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 class="col-xs-12 col-sm-6">
+										<q-input 
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'" 
+											class="bg-white" 
+											type="textarea" 
+											v-model="activity2" 
+											label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+									</div>
+									<div class="col-xs-12 col-sm-6">
+										<q-input 
+											:readonly="routeName != 'probationWorkAdd'" 
+											dense borderless 
+											:outlined="routeName == 'probationWorkAdd'" 
+											class="bg-white" 
+											type="textarea" 
+											v-model="goal2" 
+											label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+									</div>
 								</div>
 							</q-card>
 						</div>
@@ -92,9 +156,39 @@
 										<q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
 									</div>
 									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-12 "><q-select :options="OPknowledge" class="bg-white" dense outlined v-model="knowledge" label="ความรู้ความสามารถในการปฏิบัติงาน 1" /></div>
-										<div class="col-12 "><q-select :options="OPknowledge" class="bg-white" dense outlined v-model="knowledge2" label="ความรู้ความสามารถในการปฏิบัติงาน 2" /></div>
-										<div class="col-12 "><q-select :options="OPknowledge" class="bg-white" dense outlined v-model="knowledge3" label="ความรู้ความสามารถในการปฏิบัติงาน 2" /></div>
+										<div class="col-12 ">
+											<q-select 
+												:options="OPknowledge" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'" 
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'"
+												v-model="knowledge" 
+												label="ความรู้ความสามารถในการปฏิบัติงาน 1" />
+										</div>
+										<div class="col-12 ">
+											<q-select 
+												:options="OPknowledge" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'"
+												v-model="knowledge2" 
+												label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
+											</div>
+										<div class="col-12 ">
+											<q-select 
+												:options="OPknowledge" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'"
+												v-model="knowledge3" 
+												label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
+											</div>
 									</div>
 								</div>
 								<div class="col-12 row">
@@ -104,7 +198,7 @@
 									</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" />
+											<q-checkbox :disable="routeName != 'probationWorkAdd'"  :val="lawl.id" dense v-model="law" :label="lawl.label" />
 										</div>
 									</q-card>
 								</div>
@@ -114,7 +208,14 @@
 									</div>
 									<div class="col-12 row q-col-gutter-md">
 										<div class="col-12">
-											<q-input class="bg-white" dense outlined v-model="OtherLaw" />
+											<q-input 
+												class="bg-white"
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'"
+												v-model="OtherLaw" 
+											/>
 										</div>
 									</div>
 								</div>
@@ -123,10 +224,50 @@
 										ทักษะ
 									</div>
 									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill" label="ด้านที่ 1" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill2" label="ด้านที่ 2" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill3" label="ด้านที่ 3" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill4" label="ด้านที่ 4" /></div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPskill" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'" 
+												v-model="skill" 
+												label="ด้านที่ 1" />
+										</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPskill" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'" 
+												v-model="skill2" 
+												label="ด้านที่ 2" />
+										</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPskill" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'"
+												v-model="skill3" 
+												label="ด้านที่ 3" />
+										</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPskill" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'"
+												v-model="skill4" 
+												label="ด้านที่ 4" />
+										</div>
 									</div>
 								</div>
 							</div>
@@ -145,11 +286,61 @@
 										สมรรถนะหลัก
 									</div>
 									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main" label="ตัวที่ 1" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main2" label="ตัวที่ 2" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main3" label="ตัวที่ 3" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main4" label="ตัวที่ 4" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main5" label="ตัวที่ 4" /></div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+											:options="OPmain" 
+											class="bg-white" 
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'"
+											v-model="main" 
+											label="ตัวที่ 1" />
+										</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+											:options="OPmain" 
+											class="bg-white" 
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'"
+											v-model="main2" 
+											label="ตัวที่ 2" />
+										</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPmain" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'" 
+												v-model="main3" 
+												label="ตัวที่ 3" />
+											</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPmain" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'" 
+												v-model="main4" 
+												label="ตัวที่ 4" />
+										</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPmain" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'"
+												v-model="main5" 
+												label="ตัวที่ 4" />
+										</div>
 									</div>
 								</div>
 								<div class="col-12 row">
@@ -157,9 +348,39 @@
 										สมรรถนะประจํากลุ่มงาน
 									</div>
 									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPgroup" class="bg-white" dense outlined v-model="group" label="ตัวที่ 1" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPgroup" class="bg-white" dense outlined v-model="group2" label="ตัวที่ 2" /></div>
-										<div class="col-xs-12 col-sm-6"><q-select :options="OPgroup" class="bg-white" dense outlined v-model="group3" label="ตัวที่ 3" /></div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPgroup" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'" 
+												v-model="group" 
+												label="ตัวที่ 1" />
+										</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPgroup" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'" 
+												v-model="group2" 
+												label="ตัวที่ 2" />
+											</div>
+										<div class="col-xs-12 col-sm-6">
+											<q-select 
+												:options="OPgroup" 
+												class="bg-white" 
+												:readonly="routeName != 'probationWorkAdd'"  
+												dense 
+												borderless 
+												:outlined="routeName == 'probationWorkAdd'" 
+												v-model="group3" 
+												label="ตัวที่ 3" />
+										</div>
 									</div>
 								</div>
 							</div>
@@ -169,7 +390,7 @@
 					<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>
+							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">
@@ -223,7 +444,12 @@
 						</div>
 						<div class="col-12 row q-col-gutter-md">
 							<div class="col-12">
-								<q-input dense outlined v-model="Other" />
+								<q-input 
+								:readonly="routeName != 'probationWorkAdd'"  
+								dense 
+								borderless 
+								:outlined="routeName == 'probationWorkAdd'" 
+								v-model="Other" />
 							</div>
 						</div>
 					</div>
@@ -237,10 +463,26 @@
 							<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 บรรทัด)" />
+											<q-input 
+											class="bg-white" 
+											type="textarea" 
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'" 
+											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 บรรทัด)" />
+											<q-input 
+											class="bg-white" 
+											type="textarea" 
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'" 
+											v-model="goal1" 
+											label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
 										</div>
 								</div>
 							</q-card>
@@ -294,20 +536,20 @@
 						</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">
-											<li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
-											<li>ทักษะที่ ก.ก. กำหนด</li>
-											<li>สมรรถนะตามที่ ก.ก. กำหนด</li>
-											<li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
-											<li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
-											<li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
-											<li>อื่นๆ (ถ้ามี) <q-input dense outlined v-model="Other" label="กรอกอื่นๆ" /></li>
-										</div>
+								<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>
+										<li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
+										<li>อื่นๆ (ถ้ามี) <q-input dense outlined v-model="Other" label="กรอกอื่นๆ" /></li>
 									</div>
+								</div>
 							</q-card>
 						</div>
 					</div>
@@ -364,10 +606,22 @@
 						</div>
 						<div class="col-12 row q-col-gutter-md">
 							<div class="col-xs-12 col-sm-4">
-								<q-input dense outlined v-model="name" label="ชื่อ-สกุล" />
+								<q-input 
+									:readonly="routeName != 'probationWorkAdd'"  
+									dense 
+									borderless 
+									:outlined="routeName == 'probationWorkAdd'" 
+									v-model="name" 
+									label="ชื่อ-สกุล" />
 							</div>
 							<div class="col-xs-12 col-sm-4">
-								<q-input dense outlined v-model="position" label="ตำแหน่ง" />
+								<q-input 
+									:readonly="routeName != 'probationWorkAdd'"  
+									dense 
+									borderless 
+									:outlined="routeName == 'probationWorkAdd'" 
+									v-model="position" 
+									label="ตำแหน่ง" />
 							</div>
 							<div class="col-xs-12 col-sm-4">
 								<datepicker
@@ -387,8 +641,10 @@
 									</template>
 									<template #trigger>
 										<q-input
-											outlined
-											dense
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'"
 											class="full-width datepicker"
 											:model-value="
 												date1 != null ? date2Thai(date1) : null
@@ -415,7 +671,15 @@
 							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
 						</div>
 						<div class="col-12 row q-col-gutter-md">
-							<q-select :options="OPcaretaker1" class="col-xs-12 col-sm-8" dense outlined v-model="caretaker" label="ผู้ดูแลคนที่ 1" />
+							<q-select 
+								:options="OPcaretaker1" 
+								class="col-xs-12 col-sm-8" 
+								:readonly="routeName != 'probationWorkAdd'"  
+								dense 
+								borderless 
+								:outlined="routeName == 'probationWorkAdd'" 
+								v-model="caretaker" 
+								label="ผู้ดูแลคนที่ 1" />
 							<div class="col-xs-12 col-sm-4">
 								<datepicker
 									menu-class-name="modalfix"
@@ -434,8 +698,10 @@
 									</template>
 									<template #trigger>
 										<q-input
-											outlined
-											dense
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'"
 											class="full-width datepicker"
 											:model-value="
 												date2 != null ? date2Thai(date2) : null
@@ -454,7 +720,15 @@
 									</template>
 								</datepicker>
 							</div>
-							<q-select :options="OPcaretaker2" class="col-xs-12 col-sm-8" dense outlined v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
+							<q-select 
+								:options="OPcaretaker2" 
+								class="col-xs-12 col-sm-8" 
+								:readonly="routeName != 'probationWorkAdd'"  
+								dense 
+								borderless 
+								:outlined="routeName == 'probationWorkAdd'" 
+								v-model="caretaker2" 
+								label="ผู้ดูแลคนที่ 2" />
 							<div class="col-xs-12 col-sm-4">
 								<datepicker
 									menu-class-name="modalfix"
@@ -473,8 +747,10 @@
 									</template>
 									<template #trigger>
 										<q-input
-											outlined
-											dense
+											:readonly="routeName != 'probationWorkAdd'"
+											dense 
+s											borderless 
+											:outlined="routeName == 'probationWorkAdd'"
 											class="full-width datepicker"
 											:model-value="
 												date3 != null ? date2Thai(date3) : null
@@ -501,7 +777,15 @@
 							ผู้บังคับบัญชาผู้มอบหมายงาน
 						</div>
 						<div class="col-12 row q-col-gutter-md">
-							<q-select :options="OPcaretaker1" class="col-xs-12 col-sm-8" dense outlined v-model="commander" label="ผู้บังคับบัญชา" />
+							<q-select 
+								:options="OPcaretaker1" 
+								class="col-xs-12 col-sm-8" 
+								:readonly="routeName != 'probationWorkAdd'"  
+								dense 
+								borderless 
+								:outlined="routeName == 'probationWorkAdd'" 
+								v-model="commander" 
+								label="ผู้บังคับบัญชา" />
 							<div class="col-xs-12 col-sm-4">
 								<datepicker
 									menu-class-name="modalfix"
@@ -520,8 +804,10 @@
 									</template>
 									<template #trigger>
 										<q-input
-											outlined
-											dense
+											:readonly="routeName != 'probationWorkAdd'"  
+											dense 
+											borderless 
+											:outlined="routeName == 'probationWorkAdd'"
 											class="full-width datepicker"
 											:model-value="
 												date4 != null ? date2Thai(date4) : null
@@ -544,10 +830,10 @@
 					</div>
 				</div>
 			</div>
-			<q-separator />
-				<div class="flex justify-end q-pa-sm q-gutter-sm">
-					<q-btn unelevated label="บันทึก" color="public"/>
-				</div>
+			<q-separator v-show="routeName == 'probationWorkAdd'" />
+			<div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
+				<q-btn unelevated label="บันทึก" color="public"/>
+			</div>
 		</q-card>
 	</div>
 </template>
@@ -561,6 +847,8 @@ import type { QForm } from "quasar";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
+const routeName = router.currentRoute.value.name
+
 const name = ref<string>('นายสมคิด ยอดใจ');
 const position = ref<string>('นักจัดการงานทั่วไป');
 
@@ -616,7 +904,7 @@ const date2 = ref<Date>(new Date());
 const date3 = ref<Date>(new Date());
 const date4 = ref<Date>(new Date());
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .text-top2{
 	font-weight: 500;
 	padding-bottom: 8px;
@@ -633,4 +921,5 @@ const date4 = ref<Date>(new Date());
     padding-bottom: 5px;
     color: #02A998;
 }
+
 </style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 25a57eaa4..edd4f17f6 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -129,7 +129,7 @@
 						</q-tr>
 					</template>
 					<template v-slot:body="props">
-						<q-tr :props="props" class="cursor-pointer">
+						<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/work/1`)">
 							<q-td
 								v-for="col in props.cols"
 								:key="col.name"
diff --git a/src/modules/05_placement/components/probation/form.vue b/src/modules/05_placement/components/probation/form.vue
index 32d670268..106de5bcc 100644
--- a/src/modules/05_placement/components/probation/form.vue
+++ b/src/modules/05_placement/components/probation/form.vue
@@ -1,592 +1,899 @@
 <!-- card ข้อมูลส่วนตัว -->
 <template>
-  <q-toolbar class="q-pa-sm text-center">
-    <q-toolbar-title class="text-dark">
-      {{ "ฟอร์มแบบประเมินสำหรับผู้ดูแล" }}
-    </q-toolbar-title>
-  </q-toolbar>
-  {{
-    "วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่ " +
-    date2Thai(dateToday) +
-    "   ถึงวันที่  " +
-    date2Thai(dateEnd)
-  }}
-  <q-space />
-  {{ "ครั้งที่" + period }}
-  {{
-    "ระหว่างวันที่  " +
-    date2Thai(dateToday) +
-    "   ถึงวันที่  " +
-    date2Thai(dateEnd)
-  }}
-  <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
-    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
-      <div>
-        {{ "1. ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ" }}
-      </div>
-      <div>
-        {{ "1.1 ความสำเร็จของงานที่ได้รับมอบหมาย" }}
-      </div>
-      <div class="q-gutter-y-md column" style="max-width: 650px">
-        <div>
-          {{ "1.1.1.ผลผลิตของงานที่คาดหวัง" }}
-        </div>
-        <q-input
-          filled
-          v-model="text1_1"
-          label="ผลผลิตของงานที่คาดหวัง"
-          lazy-rules
-          autogrow
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-        />
-      </div>
-      <div>{{ "ระดับการประเมินพฤติกรรม" }}</div>
+	<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)"
+			/>
+			ฟอร์มแบบประเมินสำหรับผู้ดูแล
+		</div>
+		<q-card bordered 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 row items-center ">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+							<span class="text-primary q-px-sm">{{date2Thai(dateToday)}}</span> 
+							ถึงวันที 
+							<span class="text-primary q-px-sm">{{date2Thai(dateEnd)}}</span>
+						</div>
+						<div class="col-12 text-top0 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
+							<span class="text-primary q-px-sm">{{ "ครั้งที่" + period }}</span>
+							ระหว่างวันที่
+							<span class="text-primary q-px-sm">{{ date2Thai(dateToday)}}</span>
+							ถึงวันที่
+							<span class="text-primary q-px-sm">{{date2Thai(dateEnd)}}</span>
+						</div>
+						<div class="col-12 q-pt-md">
+							<q-separator size="3px" color="grey-2" />
+						</div>
+					</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">1</q-avatar>
+							ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+						</div>
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+						</div>
+						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
+							1.ผลผลิตของงานที่คาดหวัง
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense v-for="(list,i) in list1_1" :key="i">
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>{{ list.label }}</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model"
+											:val="list.id"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length"  />
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+						</div>
+						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
+							1.ผลผลิตของงานที่เกิดขึ้น
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense v-for="(list,i) in list1_2" :key="i">
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>{{ list.label }}</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model1"
+											:val="list.id"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length"  />
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.2 ความรู้ความสามารถ
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>ความรู้ความสามารถ</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model1_2"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.3 ทักษะ
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>ทักษะ</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model1_3"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.4 สมรรถนะ
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>สมรรถนะ</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model1_4"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.5 ความสามารถในการเรียนรู้งาน
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model1_5"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model1_6"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							1.7 อื่นๆ 
+							<q-checkbox class="q-ml-sm" dense v-model="etc" />
+						</div>
+						<q-card  v-if="etc" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>
+											<q-input
+												v-model="etc_text"
+												label="กรอกอื่นๆ"
+												dense
+												lazy-rules
+												autogrow
+												hide-bottom-space
+												outlined
+												class="bg-white"
+												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+											/>
+										</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="modelEtc"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							จุดเด่น (ไม่เกิน 5 บรรทัด)
+						</div>
+						<q-input
+							outlined
+							dense
+							v-model="text2_1"
+							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules
+							type="textarea"
+							label="กรอกจุดเด่น"
+							hide-bottom-space
+							:row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+						/>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+						</div>
+						<q-input
+							outlined
+							dense
+							v-model="text2_2"
+							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules
+							type="textarea"
+							hide-bottom-space
+							label="กรอกสิ่งที่ควรปรับปรุง"
+							:row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+						/>
+					</div>
 
-      <q-rating
-        v-model="model"
-        max="5"
-        size="3.5em"
-        label="ระดับการประเมินพฤติกรรม"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{ "1.1.2.ผลผลิตของงานที่เกิดขึ้น" }}
-      </div>
-      <div class="q-gutter-y-md column" style="max-width: 650px">
-        <q-input
-          filled
-          v-model="text1_2"
-          label="ผลผลิตของงานที่เกิดขึ้น"
-          lazy-rules
-          autogrow
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-        />
-      </div>
-      <div>{{ "ระดับการประเมินพฤติกรรม" }}</div>
-      <q-rating
-        v-model="model1"
-        max="5"
-        size="3.5em"
-        label="ระดับการประเมินพฤติกรรม"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>{{ "1.2 ความรู้ความสามารถ" }}</div>
-      <q-rating
-        v-model="model1_2"
-        max="5"
-        size="3.5em"
-        label="ความรู้ความสามารถ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>{{ "1. 3 ทักษะ" }}</div>
-      <q-rating
-        v-model="model1_3"
-        max="5"
-        size="3.5em"
-        label="ทักษะ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>{{ "1.4 สมรรถนะ" }}</div>
-      <q-rating
-        v-model="model1_4"
-        max="5"
-        size="3.5em"
-        label="สมรรถนะ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>{{ "1.5 ความสามารถในการเรียนรู้งาน" }}</div>
-      <q-rating
-        v-model="model1_5"
-        max="5"
-        size="3.5em"
-        label="ความสามารถในการเรียนรู้งาน"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>{{ "1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่" }}</div>
-      <q-rating
-        v-model="model1_6"
-        max="5"
-        size="3.5em"
-        label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        <q-checkbox v-model="etc" label="1.7 อื่นๆ" />
-      </div>
-      <div v-if="etc">
-        <div class="q-gutter-y-md column" style="max-width: 650px">
-          <q-input
-            filled
-            v-model="etc_text"
-            label="อื่นๆ"
-            lazy-rules
-            autogrow
-            :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-          />
-        </div>
-        <q-rating
-          v-model="modelEtc"
-          max="5"
-          size="3.5em"
-          label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
-          color="yellow"
-          icon="star_border"
-          icon-selected="star"
-          icon-half="star_half"
-          no-dimming
-        />
-      </div>
-      <div class="q-gutter-y-md column" style="max-width: 650px">
-        <div>
-          {{ "จุดเด่น (ไม่เกิน 5 บรรทัด)" }}
-        </div>
-        <q-input
-          filled
-          v-model="text2_1"
-          label="จุดเด่น (ไม่เกิน 5 บรรทัด)"
-          lazy-rules
-          autogrow
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-        />
-        <div>
-          {{ "สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)" }}
-        </div>
-        <q-input
-          filled
-          v-model="text2_2"
-          autogrow
-          label="สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)"
-          lazy-rules
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-        />
-      </div>
-    </q-card>
-    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
-      <div>
-        {{ "2. พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ" }}
-      </div>
-      <div>
-        {{ "1.ความประพฤติ " }}
-      </div>
-      <div>{{ "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" }}</div>
-      <q-rating
-        v-model="model7"
-        max="5"
-        size="3.5em"
-        label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>{{ "มีความรับผิดชอบในการปฏิบัติบัติงาน" }}</div>
-      <q-rating
-        v-model="model8"
-        max="5"
-        size="3.5em"
-        label="มีความรับผิดชอบในการปฏิบัติบัติงาน"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{
-          "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน"
-        }}
-      </div>
-      <q-rating
-        v-model="model9"
-        max="5"
-        size="3.5em"
-        label="ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{ "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันยัหมั่นเพียร" }}
-      </div>
-      <q-rating
-        v-model="model10"
-        max="5"
-        size="3.5em"
-        label="ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันยัหมั่นเพียร"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{ "2.ความมีคุณธรรมจริยธรรม " }}
-      </div>
-      <div>
-        {{ "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ" }}
-      </div>
-      <q-rating
-        v-model="model11"
-        max="5"
-        size="3.5em"
-        label="อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{ "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" }}
-      </div>
-      <q-rating
-        v-model="model12"
-        max="5"
-        size="3.5em"
-        label="มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{
-          "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ"
-        }}
-      </div>
-      <q-rating
-        v-model="model13"
-        max="5"
-        size="3.5em"
-        label="ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{ "3.การรักษาวินัย " }}
-      </div>
-      <div>
-        {{ "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" }}
-      </div>
-      <q-rating
-        v-model="model14"
-        max="5"
-        size="3.5em"
-        label="มีความรับรัผิดชอบในการรักษาเวลาทำงาน"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{ "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ" }}
-      </div>
-      <q-rating
-        v-model="model15"
-        max="5"
-        size="3.5em"
-        label="แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{
-          "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน"
-        }}
-      </div>
-      <q-rating
-        v-model="model16"
-        max="5"
-        size="3.5em"
-        label="ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{
-          "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ"
-        }}
-      </div>
-      <q-rating
-        v-model="model17"
-        max="5"
-        size="3.5em"
-        label="ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        {{ "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ" }}
-      </div>
-      <q-rating
-        v-model="model18"
-        max="5"
-        size="3.5em"
-        label="ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ"
-        color="yellow"
-        icon="star_border"
-        icon-selected="star"
-        icon-half="star_half"
-        no-dimming
-      />
-      <div>
-        <div>
-          <q-checkbox v-model="etc_4" label="1.7 อื่นๆ" />
-        </div>
-        <div v-if="etc_4">
-          <div class="q-gutter-y-md column" style="max-width: 650px">
-            <q-input
-              filled
-              v-model="etc_text2"
-              label="อื่นๆ"
-              lazy-rules
-              autogrow
-              :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-            />
-          </div>
-          <q-rating
-            v-model="modelEtc"
-            max="5"
-            size="3.5em"
-            label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
-            color="yellow"
-            icon="star_border"
-            icon-selected="star"
-            icon-half="star_half"
-            no-dimming
-          />
-        </div>
-      </div>
-      <div class="q-gutter-y-md column" style="max-width: 650px">
-        <div>
-          {{ "จุดเด่น (ไม่เกิน 5 บรรทัด)" }}
-        </div>
-        <q-input
-          filled
-          v-model="text3_1"
-          autogrow
-          label="จุดเด่น (ไม่เกิน 5 บรรทัด)"
-          lazy-rules
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-        />
-        <div>
-          {{ "สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)" }}
-        </div>
-        <q-input
-          filled
-          v-model="text3_2"
-          autogrow
-          label="สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)"
-          lazy-rules
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-        />
-      </div>
-    </q-card>
-    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
-      <div>
-        {{ "การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ" }}
-      </div>
-      <div>
-        {{ "1. การปฐมนิเทศ" }}
-      </div>
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_1"
-        val="1"
-        label="ดำเนินการเเล้ว"
-      />
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_1"
-        val="0"
-        label=" ยังไม่ได้ดำเนินการ"
-      />
-      <div>
-        {{ "2. การเรียนรู้ด้วยตนเอง" }}
-      </div>
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_2"
-        val="1"
-        label="ดำเนินการเเล้ว"
-      />
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_2"
-        val="0"
-        label=" ยังไม่ได้ดำเนินการ"
-      />
-      <div>
-        {{ "3. การอบรมสัมนาร่วมกัน" }}
-      </div>
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_3"
-        val="1"
-        label="ดำเนินการเเล้ว"
-      />
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_3"
-        val="0"
-        label=" ยังไม่ได้ดำเนินการ"
-      />
-      <div>
-        {{ "4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)" }}
-      </div>
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_4"
-        val="1"
-        label="ดำเนินการเเล้ว"
-      />
-      <q-radio
-        checked-icon="task_alt"
-        unchecked-icon="panorama_fish_eye"
-        v-model="radio_4"
-        val="0"
-        label=" ยังไม่ได้ดำเนินการ"
-      />
-    </q-card>
-    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
-      <div>
-        {{ "เลือกผู้บังคับคับัญชา" }}
-      </div>
-      <div class="col-xs-12 col-md-6 row">
-        <q-select
-          filled
-          v-model="Autherise"
-          :options="option"
-          label="ผู้บังคับบัญชา"
-          style="width: 250px"
-        />
-        <div class="col-xs-12 col-md-6 row q-pl-md">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAutherise"
-            :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="full-width datepicker col-3"
-                :model-value="
-                  dateAutherise != null ? date2Thai(dateAutherise) : 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>
-        </div>
-      </div>
-    </q-card>
-    <div>
-      <q-btn label="ส่งแบบประเมิน" type="submit" color="primary" />
-      <q-btn label="ยกเลิก" type="reset" color="primary" flat class="q-ml-sm" />
-    </div>
-    <q-space />
-  </q-form>
+					<div class="col-12">
+						<q-separator size="3px" color="grey-2" />
+					</div>
+
+					<!-- 2 -->
+					<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>
+							พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+						</div>
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							2.1 ความประพฤติ
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense v-for="(list,i) in list2_1" :key="i">
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>{{ list.label }}</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model"
+											:val="list.id"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length"  />
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							2.2 ความมีคุณธรรมจริยธรรม
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense v-for="(list,i) in list2_2" :key="i">
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>{{ list.label }}</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model"
+											:val="list.id"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length"  />
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							2.3 การรักษาวินัย
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense v-for="(list,i) in list2_3" :key="i">
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>{{ list.label }}</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="model"
+											:val="list.id"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length"  />
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							2.4 อื่นๆ 
+							<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
+						</div>
+						<q-card  v-if="etc_4" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>
+											<q-input
+												v-model="etc_text2"
+												label="กรอกอื่นๆ"
+												dense
+												lazy-rules
+												autogrow
+												hide-bottom-space
+												outlined
+												class="bg-white"
+												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+											/>
+										</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<q-rating
+											v-model="modelEtc"
+											max="5"
+											size="sm"
+											color="grey"
+											:color-selected="ratingColors"
+											label="ระดับการประเมินพฤติกรรม"
+										>
+											<template v-slot:tip-1>
+												<q-tooltip>ปรับปรุง</q-tooltip>
+											</template>
+											<template v-slot:tip-2>
+												<q-tooltip>พอใช้</q-tooltip>
+											</template>
+											<template v-slot:tip-3>
+												<q-tooltip>ปานกลาง</q-tooltip>
+											</template>
+											<template v-slot:tip-4>
+												<q-tooltip>ดี</q-tooltip>
+											</template>
+											<template v-slot:tip-5>
+												<q-tooltip>ดีมาก</q-tooltip>
+											</template>
+										</q-rating>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							จุดเด่น (ไม่เกิน 5 บรรทัด)
+						</div>
+						<q-input
+							outlined
+							dense
+							v-model="text3_1"
+							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules
+							type="textarea"
+							label="กรอกจุดเด่น"
+							hide-bottom-space
+							:row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+						/>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 row items-center q-pl-lg">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+						</div>
+						<q-input
+							outlined
+							dense
+							v-model="text3_2"
+							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules
+							type="textarea"
+							hide-bottom-space
+							label="กรอกสิ่งที่ควรปรับปรุง"
+							:row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+						/>
+					</div>
+
+					<div class="col-12">
+						<q-separator size="3px" color="grey-2" />
+					</div>
+
+					<!-- 3 -->
+					<div class="col-12 row justify-center">
+						<div class="col-12 text-top0 items-center">
+							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+							การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+						</div>
+						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
+							<q-list dense>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>1. การปฐมนิเทศ</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<div class="row">
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_1"
+												val="1"
+												label="ดำเนินการเเล้ว"
+											/>
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_1"
+												val="0"
+												label=" ยังไม่ได้ดำเนินการ"
+											/>
+										</div>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs"/>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<div class="row">
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_2"
+												val="1"
+												label="ดำเนินการเเล้ว"
+											/>
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_2"
+												val="0"
+												label=" ยังไม่ได้ดำเนินการ"
+											/>
+										</div>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs"/>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<div class="row">
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_3"
+												val="1"
+												label="ดำเนินการเเล้ว"
+											/>
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_3"
+												val="0"
+												label=" ยังไม่ได้ดำเนินการ"
+											/>
+										</div>
+									</q-item-section>
+								</q-item>
+								<q-separator class="q-my-xs"/>
+								<q-item dense tag="label" v-ripple>
+									<q-item-section>
+										<q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label>
+									</q-item-section>
+									<q-item-section side >
+										<div class="row">
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_4"
+												val="1"
+												label="ดำเนินการเเล้ว"
+											/>
+											<q-radio
+												checked-icon="task_alt"
+												unchecked-icon="panorama_fish_eye"
+												v-model="radio_4"
+												val="0"
+												label=" ยังไม่ได้ดำเนินการ"
+											/>
+										</div>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+
+					<div class="col-12">
+						<q-separator size="3px" color="grey-2" />
+					</div>
+
+					<div class="col-12 row">
+						<div class="col-12 text-top2 row items-center">
+							ผู้บังคับบัญชาผู้มอบหมายงาน
+						</div>
+						<div class="col-12 row q-col-gutter-md">
+							<q-select 
+								class="col-xs-12 col-sm-8" 
+								dense 
+								v-model="Autherise"
+								outlined
+          						:options="option"
+								label="ผู้บังคับบัญชา" />
+							<div class="col-xs-12 col-sm-4">
+								<datepicker
+									menu-class-name="modalfix"
+									v-model="dateAutherise"
+									: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="full-width datepicker col-3"
+										:model-value="
+										dateAutherise != null ? date2Thai(dateAutherise) : 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>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<q-separator />
+			<div class="flex justify-end q-pa-sm q-gutter-sm">
+				<q-btn unelevated label="บันทึก" color="public"/>
+			</div>
+		</q-card>
+	</div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import router from "@/router";
 
 const $q = useQuasar();
-const text1_1 = ref<any>(null);
-const text1_2 = ref<any>(null);
-const text2_1 = ref<any>(null);
-const text2_2 = ref<any>(null);
+const ratingColors = [ 'light-green-3', 'light-green-6', 'green', 'green-9', 'green-10' ];
+const list1_1 = [
+	{id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1'},
+	{id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2'},
+	{id: '3', label: 'ผลผลิตของงานที่คาดหวัง 3'},
+	{id: '4', label: 'ผลผลิตของงานที่คาดหวัง 4'},
+	{id: '5', label: 'ผลผลิตของงานที่คาดหวัง 5'}
+];
+const list1_2 = [
+	{id: '1', label: 'ผลผลิตของงานที่เกิดขึ้น 1'},
+	{id: '2', label: 'ผลผลิตของงานที่เกิดขึ้น 2'},
+	{id: '3', label: 'ผลผลิตของงานที่เกิดขึ้น 3'},
+	{id: '4', label: 'ผลผลิตของงานที่เกิดขึ้น 4'},
+	{id: '5', label: 'ผลผลิตของงานที่เกิดขึ้น 5'}
+];
+
+const list2_1 = [
+	{id: '1', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี'},
+	{id: '2', label: 'มีความรับผิดชอบในการปฏิบัติบัติงาน'},
+	{id: '3', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน'},
+	{id: '4', label: 'ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร'},
+];
+const list2_2 = [
+	{id: '1', label: 'อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ'},
+	{id: '2', label: 'มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต'},
+	{id: '3', label: 'ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ'},
+];
+
+const list2_3 = [
+	{id: '1', label: 'มีความรับรัผิดชอบในการรักษาเวลาทำงาน'},
+	{id: '2', label: 'แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ'},
+	{id: '3', label: 'ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน'},
+	{id: '4', label: 'ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ'},
+	{id: '5', label: 'ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ'}
+];
+
 const etc_text = ref<any>(null);
 const etc_text2 = ref<any>(null);
+
 const text3_1 = ref<any>(null);
 const text3_2 = ref<any>(null);
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
-const dataStore = useDataStore();
-const route = useRoute();
-const edit = ref<boolean>(true);
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
-const myform = ref<any>({});
+
 const Autherise = ref<any>(null);
+
 const model = ref<any>(0);
 const model1 = ref<any>(0);
 const model1_2 = ref<any>(0);
@@ -594,18 +901,6 @@ const model1_3 = ref<any>(0);
 const model1_4 = ref<any>(0);
 const model1_5 = ref<any>(0);
 const model1_6 = ref<any>(0);
-const model7 = ref<any>(0);
-const model8 = ref<any>(0);
-const model9 = ref<any>(0);
-const model10 = ref<any>(0);
-const model11 = ref<any>(0);
-const model12 = ref<any>(0);
-const model13 = ref<any>(0);
-const model14 = ref<any>(0);
-const model15 = ref<any>(0);
-const model16 = ref<any>(0);
-const model17 = ref<any>(0);
-const model18 = ref<any>(0);
 const modelEtc = ref<any>(0);
 const dateAutherise = ref<any>(new Date());
 const etc = ref<any>(false);
@@ -630,56 +925,22 @@ const onReset = () => {
 };
 </script>
 
-<style>
-.modalfix {
-  position: fixed !important;
+<style lang="scss" scoped>
+.text-top2{
+	font-weight: 500;
+	padding-bottom: 8px;
+   color: rgb(70, 68, 68);
 }
-.containerimage {
-  position: relative;
-  width: 100%;
+.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;
 }
 
-.q-img {
-  display: block;
-  width: 100%;
-  max-height: 170px;
-  padding: 1%;
-  border-radius: 8px;
-  border: solid 2px rgba(168, 168, 168, 0.055) !important;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097);
-}
-
-.overlay {
-  position: absolute;
-  bottom: 0;
-  background: rgb(0, 0, 0);
-  background: rgba(0, 0, 0, 0.7);
-  color: #f1f1f1;
-  transition: 0.5s ease;
-  width: 100%;
-  height: 70px;
-  opacity: 0;
-  color: white;
-  text-align: center;
-  cursor: pointer;
-  padding: 5% 0 5% 0;
-}
-
-.containerimage:hover .overlay {
-  opacity: 1;
-}
-
-.q-field__bottom {
-  padding: 5px 10px 0px 0px;
-}
-
-input[type="file"] {
-  display: none;
-}
-.custom-file-upload {
-  border: 1px solid #ccc;
-  display: inline-block;
-  padding: 6px 12px;
-  cursor: pointer;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 37a882447..bf38dfdb8 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -126,6 +126,16 @@ export default [
     path: "/probation/work/add",
     name: "probationWorkAdd",
     component: probationWorkAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    }
+  },
+  {
+    path: "/probation/work/:id",
+    name: "probationWork",
+    component: probationWorkAdd,
     meta: {
       Auth: true,
       Key: [6.3],