From fe0e93e3bd07d8480b0d31a21b45762ab1aff1ee Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Mon, 10 Jul 2023 19:29:15 +0700
Subject: [PATCH] no message

---
 .../components/probation/AddWork.vue          | 735 +++++++++++++-----
 1 file changed, 556 insertions(+), 179 deletions(-)

diff --git a/src/modules/05_placement/components/probation/AddWork.vue b/src/modules/05_placement/components/probation/AddWork.vue
index 8dc52ece6..5d22bd14a 100644
--- a/src/modules/05_placement/components/probation/AddWork.vue
+++ b/src/modules/05_placement/components/probation/AddWork.vue
@@ -1,202 +1,565 @@
 <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 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 items-center">
+							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+							ผู้ทดลองปฏิบัติหน้าที่ราชการ
 						</div>
-            <div class="col-12 row">
-                <div class="col-12 text-top2">พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน</div>
-								(ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )
+						<div class="col-12 row q-col-gutter-md">
+							<div class="col-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 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 class="col-12">
+						<q-separator size="3px" color="grey-2" />
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 items-center">
+							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+							<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 size="3px" color="grey-2"  />
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 items-center">
+							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+							ผลการปฏิบัติงาน</div>
+						<div class="col-12 text-top2 row items-center ">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
+							<q-btn 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">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
+						</div>
+						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+							<div class="row col-12 q-gutter-lg">
+								<div class="col-12 row">
+									<div class="col-12 text-top2 row items-center">
+										ความรู้ความสามารถในการปฏิบัติงาน
+										<q-btn 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>
 								</div>
+								<div class="col-12 row">
+									<div class="col-12 text-top2 row items-center">
+										ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 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">
+										กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+									</div>
+									<div class="col-12 row q-col-gutter-md">
+										<div class="col-12">
+											<q-input class="bg-white" dense outlined v-model="OtherLaw" />
+										</div>
+									</div>
+								</div>
+								<div class="col-12 row">
+									<div class="col-12 text-top2">
+										ทักษะ
+									</div>
+									<div class="col-12 row q-col-gutter-sm">
+										<div class="col-xs-12 col-sm-6"><q-select :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>
+								</div>
+							</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" />
+							3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
 						</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>
+						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+							<div class="row col-12 q-gutter-lg">
+								<div class="col-12 row">
+									<div class="col-12 text-top2 ">
+										สมรรถนะหลัก
+									</div>
+									<div class="col-12 row q-col-gutter-sm">
+										<div class="col-xs-12 col-sm-6"><q-select :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>
+								</div>
+								<div class="col-12 row">
+									<div class="col-12 text-top2 ">
+										สมรรถนะประจํากลุ่มงาน
+									</div>
+									<div class="col-12 row q-col-gutter-sm">
+										<div class="col-xs-12 col-sm-6"><q-select :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>
+								</div>
+							</div>
+						</q-card>
+					</div>
+					
+					<div class="col-12 row">
+						<div class="col-12 text-top2 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน	<span class="text-weight-regular q-pl-sm"> ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span>
+						</div>
+						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+							<div class="row col-12 q-gutter-lg">
+								<div class="col-12 row">
+									<div class="col-12 text-top2 ">
+										ความประพฤติ ได้แก่
+									</div>
+									<div class="col-12 row q-col-gutter-md">
+										<div class="col-12 column q-ml-md">
+											<li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
+											<li>มีความรับผิดชอบในการปฏิบัติงาน</li>
+											<li>ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน</li>
+											<li>ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร</li>
+										</div>
+									</div>
+								</div>
+								<div class="col-12 row">
+									<div class="col-12 text-top2 ">
+									ความมีคุณธรรมจริยธรรม ได้แก่
+								</div>
+								<div class="col-12 row q-col-gutter-md">
+									<div class="col-12 column q-ml-md">
+										<li>อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ</li>
 										<li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
 										<li>ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา และพระมหากษัตริย์</li>
 									</div>
 								</div>
+								</div>
+								<div class="col-12 row">
+									<div class="col-12 text-top2 ">
+										การรักษาวินัย ได้แก่
+									</div>
+									<div class="col-12 row q-col-gutter-md">
+										<div class="col-12 column q-ml-md">
+											<li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+											<li>แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ</li>
+											<li>ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ</li>
+											<li>ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน</li>
+											<li>ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ</li>
+										</div>
+									</div>
+								</div>
+							</div>
+						</q-card>
+					</div>
+					
+					<div class="col-12 row">
+						<div class="col-12 text-top2">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							3.5 อื่น ๆ (ถ้ามี)
+						</div>
+						<div class="col-12 row q-col-gutter-md">
+							<div class="col-12">
+								<q-input dense outlined v-model="Other" />
+							</div>
+						</div>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top2 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
+							<q-btn 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>
+						</div>
+					</div>
+					<div class="col-12">
+						<q-separator size="3px" color="grey-2"  />
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 items-center">
+							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
+							การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
 						</div>
 						<div class="col-12 row">
 							<div class="col-12 text-top2 ">
-                    <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 class="col-12 text-top2 row items-center">
+								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+								4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
+							</div>
+							<div class="col-12 text-top2 row items-center">
+								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+								4.2 การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
+							</div>
+							<div class="col-12 text-top2 row items-center">
+								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+								4.3 การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
+							</div>
+							<div class="col-12 text-top2 row items-center">
+								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+								4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
+							</div>
+						</div>
+					</div>
+					<div class="col-12">
+						<q-separator size="3px" color="grey-2"  />
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 items-center">
+							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
+							การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+						</div>
+						<div class="col-12 text-top2 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							5.1 ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+						</div>
+						<div class="col-12 text-top2 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
+						</div>
+						<div class="col-12 row q-gutter-md">
+							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+									<div class="col-12 text-top2 ">
+										การรักษาวินัย ได้แก่
+									</div>
+									<div class="col-12 row q-col-gutter-md">
+										<div class="col-12 column q-ml-md">
+											<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>
+					<div class="col-12 row">
+						<div class="col-12 text-top2 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							5.3 ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
+						</div>
+						<div class="col-12 row q-gutter-md">
+							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+								<div class="col-12 row q-col-gutter-md">
+									<div class="col-12 column q-ml-md">
+										<li>บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา</li>
+										<li>แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา</li>
+										<li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
 									</div>
 								</div>
+							</q-card>
 						</div>
-        </div>
-    </q-card>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top2 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
+						</div>
+						<div class="col-12 row q-gutter-md">
+							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+								<div class="col-12 row q-col-gutter-md">
+									<div class="col-12 column q-ml-md">
+										<li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
+										<div class="q-pl-lg">ส่วนที่ 1 คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50</div>
+										<div class="q-pl-lg">ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50</div>
+										<div class="q-pl-lg">มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60</div>
+										<li>สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</li>
+										<div class="q-pl-lg">คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60</div>
+										<div><span style="text-decoration: underline; ">หมายเหตุ</span> ให้นำคะแนนรวมทั้ง 2 ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60 จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
+									</div>
+								</div>
+							</q-card>
+						</div>
+					</div>
+					<div class="col-12">
+						<q-separator size="3px" color="grey-2"  />
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top0 items-center">
+							การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
+						</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" />
+								ผู้ทดลองปฏิบัติหน้าที่ราชการ
+							</div>
+						</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="ชื่อ-สกุล" />
+							</div>
+							<div class="col-xs-12 col-sm-4">
+								<q-input dense outlined v-model="position" label="ตำแหน่ง" />
+							</div>
+							<div class="col-xs-12 col-sm-4">
+								<datepicker
+									menu-class-name="modalfix"
+									v-model="date1"
+									: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"
+											:model-value="
+												date1 != null ? date2Thai(date1) : null
+											"
+											label="ลงวันที่"
+										>
+											<template v-slot:prepend>
+											<q-icon
+												name="event"
+												class="cursor-pointer"
+												style="color: var(--q-primary)"
+											>
+											</q-icon>
+											</template>
+										</q-input>
+									</template>
+								</datepicker>
+							</div>
+						</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" />
+							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
+						</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" />
+							<div class="col-xs-12 col-sm-4">
+								<datepicker
+									menu-class-name="modalfix"
+									v-model="date2"
+									: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"
+											:model-value="
+												date2 != null ? date2Thai(date2) : null
+											"
+											label="ลงวันที่"
+										>
+											<template v-slot:prepend>
+											<q-icon
+												name="event"
+												class="cursor-pointer"
+												style="color: var(--q-primary)"
+											>
+											</q-icon>
+											</template>
+										</q-input>
+									</template>
+								</datepicker>
+							</div>
+							<q-select :options="OPcaretaker2" class="col-xs-12 col-sm-8" dense outlined v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
+							<div class="col-xs-12 col-sm-4">
+								<datepicker
+									menu-class-name="modalfix"
+									v-model="date3"
+									:locale="'th'"
+									autoApply
+									borderless
+									:enableTimePicker="false"
+									week-start="0"
+									>
+									<template #year="{ year }">
+										{{ year + 543 }}
+									</template>
+									<template #year-overlay-value="{ value }">
+										{{ parseInt(value + 543) }}
+									</template>
+									<template #trigger>
+										<q-input
+											outlined
+											dense
+											class="full-width datepicker"
+											:model-value="
+												date3 != null ? date2Thai(date3) : null
+											"
+											label="ลงวันที่"
+										>
+											<template v-slot:prepend>
+											<q-icon
+												name="event"
+												class="cursor-pointer"
+												style="color: var(--q-primary)"
+											>
+											</q-icon>
+											</template>
+										</q-input>
+									</template>
+								</datepicker>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 row">
+						<div class="col-12 text-top2 row items-center">
+							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+							ผู้บังคับบัญชาผู้มอบหมายงาน
+						</div>
+						<div class="col-12 row q-col-gutter-md">
+							<q-select :options="OPcaretaker1" class="col-xs-12 col-sm-8" dense outlined v-model="commander" label="ผู้บังคับบัญชา" />
+							<div class="col-xs-12 col-sm-4">
+								<datepicker
+									menu-class-name="modalfix"
+									v-model="date4"
+									: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"
+											:model-value="
+												date4 != null ? date2Thai(date4) : null
+											"
+											label="ลงวันที่"
+										>
+											<template v-slot:prepend>
+											<q-icon
+												name="event"
+												class="cursor-pointer"
+												style="color: var(--q-primary)"
+											>
+											</q-icon>
+											</template>
+										</q-input>
+									</template>
+								</datepicker>
+							</div>
+						</div>
+					</div>
+				</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 { useRouter } from "vue-router";
 const router = useRouter();
 import { ref } from "vue";
-import type OtherVue from "@/modules/04_registry/components/Other.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QForm } from "quasar";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
 
 const name = ref<string>('นายสมคิด ยอดใจ');
 const position = ref<string>('นักจัดการงานทั่วไป');
@@ -236,16 +599,30 @@ const main = ref<string>('คุณธรรมจริยธรรม')
 const main2 = ref<string>('การให้บริการที่ดี')
 const main3 = ref<string>('การมุ่งผลสัมฤทธิ์')
 const main4 = ref<string>('ทํางานเป็นทีม')
-const main5 = ref<string>('การส่ังสมความเชี่ยวชาญในอาชีพ')
+const main5 = ref<string>('การสั่งสมความเชี่ยวชาญในอาชีพ')
 const OPmain = [''];
 
 const group = ref<string>('')
 const group2 = ref<string>('')
 const group3 = ref<string>('')
 const OPgroup = [''];
+
+const Other = ref<string>('');
+
+const commander = ref<string>('')
+
+const date1 = ref<Date>(new Date());
+const date2 = ref<Date>(new Date());
+const date3 = ref<Date>(new Date());
+const date4 = ref<Date>(new Date());
 </script>
 <style lang="scss" scope>
 .text-top2{
+	font-weight: 500;
+	padding-bottom: 8px;
+   color: rgb(70, 68, 68);
+}
+.text-top0{
 	font-weight: 600;
 	padding-bottom: 8px;
     color: rgb(70, 68, 68);