diff --git a/src/modules/05_placement/components/probation/AddWork.vue b/src/modules/05_placement/components/probation/AddWork.vue
index 3259cecac..871af71dc 100644
--- a/src/modules/05_placement/components/probation/AddWork.vue
+++ b/src/modules/05_placement/components/probation/AddWork.vue
@@ -1,904 +1,1235 @@
 <template>
-	<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 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">
-				<div class="row col-12 q-gutter-lg">
-					<div class="col-12 row">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-							ผู้ทดลองปฏิบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<div class="col-xs-12 col-sm-6">
-								<q-input 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									v-model="name" 
-									label="ชื่อ-สกุล" />
-							</div>
-							<div class="col-xs-12 col-sm-6">
-								<q-input 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									v-model="position" 
-									label="ตำแหน่ง" />
-							</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">2</q-avatar>
-							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
-							<q-btn v-if="routeName == 'probationWorkAdd'" 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" 
-								: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">
-						<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 v-if="routeName == 'probationWorkAdd'" 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 
-										: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 
-											: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>
-					</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 v-if="routeName == 'probationWorkAdd'" 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" 
-												: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">
-									<div class="col-12 text-top2 row items-center">
-										ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
-										<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
-									</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 :disable="routeName != 'probationWorkAdd'"  :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"
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												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" 
-												: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>
-						</q-card>
-					</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 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">
+        <div class="row col-12 q-gutter-lg">
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+              ผู้ทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="name"
+                  label="ชื่อ-สกุล"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="position"
+                  label="ตำแหน่ง"
+                />
+              </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">2</q-avatar>
+              ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+              <q-btn
+                v-if="routeName == 'probationWorkAdd'"
+                round
+                color="primary"
+                dense
+                icon="mdi-plus"
+                flat
+                class="q-ml-sm"
+                @click="addCaretaker"
+              />
+              <q-btn
+                v-if="caretakerCount > 1 && routeName == 'probationWorkAdd'"
+                round
+                color="red"
+                dense
+                icon="undo"
+                flat
+                class="q-ml-sm"
+                @click="resetCaretakers"
+                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
+              >
+              <q-chip color="primary" text-color="white" icon="flag_circle">
+                {{ caretakerCount }}
+              </q-chip>
+            </div>
 
-					<div class="col-12 row">
-						<div class="col-12 text-top2">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
-						</div>
-						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
-							<div class="row col-12 q-gutter-lg">
-								<div class="col-12 row">
-									<div class="col-12 text-top2 ">
-										สมรรถนะหลัก
-									</div>
-									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-											: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">
-									<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" 
-												: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>
-						</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 
-								:readonly="routeName != 'probationWorkAdd'"  
-								dense 
-								borderless 
-								:outlined="routeName == 'probationWorkAdd'" 
-								v-model="Other" />
-							</div>
-						</div>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
-							<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
-						</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" 
-											: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" 
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'" 
-											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 ">
-								ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
-							</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>
-					<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 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									v-model="name" 
-									label="ชื่อ-สกุล" />
-							</div>
-							<div class="col-xs-12 col-sm-4">
-								<q-input 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									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
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date1 != null ? date2Thai(date1) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</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" 
-								: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"
-									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
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date2 != null ? date2Thai(date2) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-							<q-select 
-								: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"
-									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
-											:readonly="routeName != 'probationWorkAdd'"
-											dense 
-s											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date3 != null ? date2Thai(date3) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</div>
-					</div>
-					<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" 
-								: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"
-									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
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date4 != null ? date2Thai(date4) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</div>
-					</div>
-				</div>
-			</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>
+            <div class="col-12 row q-col-gutter-md">
+              <q-select
+                v-for="item in caretakerCount"
+                :key="item"
+                :options="getOptions(item)"
+                class="col-xs-12 col-sm-6"
+                :readonly="routeName != 'probationWorkAdd'"
+                dense
+                borderless
+                :outlined="routeName == 'probationWorkAdd'"
+                v-model="caretakers[item - 1]"
+                :label="`ผู้ดูแลคนที่ ${item}`"
+              />
+            </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
+                v-if="routeName == 'probationWorkAdd'"
+                round
+                color="primary"
+                dense
+                icon="mdi-plus"
+                flat
+                class="q-ml-sm"
+                @click="addActivity"
+              />
+              <q-btn
+                v-if="activityCount > 2 && routeName == 'probationWorkAdd'"
+                round
+                color="red"
+                dense
+                icon="undo"
+                flat
+                class="q-ml-sm"
+                @click="resetActivity"
+                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
+              >
+              <q-chip color="primary" text-color="white" icon="flag_circle">
+                {{ activityCount }}
+              </q-chip>
+            </div>
+            <div class="col-12 row q-gutter-md">
+              <q-card
+                v-for="item in activityCount"
+                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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="bg-white"
+                      type="textarea"
+                      v-model="activities[item - 1]"
+                      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="goals[item - 1]"
+                      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
+                      v-if="routeName == 'probationWorkAdd'"
+                      round
+                      color="primary"
+                      dense
+                      icon="mdi-plus"
+                      flat
+                      class="q-ml-sm"
+                      @click="addKnowledge"
+                    />
+                    <q-btn
+                      v-if="
+                        knowledgeCount > 3 && routeName == 'probationWorkAdd'
+                      "
+                      round
+                      color="red"
+                      dense
+                      icon="undo"
+                      flat
+                      class="q-ml-sm"
+                      @click="resetKnowledge"
+                      ><q-tooltip>รีเช็ต</q-tooltip></q-btn
+                    >
+                    <q-chip
+                      color="primary"
+                      text-color="white"
+                      icon="flag_circle"
+                    >
+                      {{ knowledgeCount }}
+                    </q-chip>
+                  </div>
+                  <div class="col-12 row q-col-gutter-sm">
+                    <div v-for="item in knowledgeCount" class="col-12">
+                      <q-select
+                        :options="getOpknowledge(item)"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="knowledge[item - 1]"
+                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${item}`"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2 row items-center">
+                    ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+                    <!-- <q-btn
+                      v-if="routeName == 'probationWorkAdd'"
+                      round
+                      color="primary"
+                      dense
+                      icon="mdi-plus"
+                      flat
+                      class="q-ml-sm"
+                    /> -->
+                  </div>
+                  <q-card
+                    flat
+                    bordered
+                    class="col-12 q-pa-md"
+                    style="max-height: 500px; overflow-y: scroll"
+                  >
+                    <div class="example-row-column-width">
+                      <div class="row bg-grey-3 q-py-xs">
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="val1"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+                        <div class="col-2 ">1. รัฐธรรมนูญ</div>
+                      </div>
+
+                      <div class="row q-mt-xs bg-grey-3 q-py-xs">
+                        <div class="col-1"></div>
+                        <div class="col-2">2.กฎหมายปกครอง</div>
+                      </div>
+                      <div class="row bg-grey-2 q-py-xs borderCheck ">
+                        <div class="col-1"></div>
+                        <div class="col-10  q-pl-md ">2.1 ทำงานได้</div>
+                      </div>
+                      <div
+                        v-for="item in checkList21"
+                        :key="item.id"
+                        class="row q-py-xs borderCheck border_y"
+						
+                      >
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                      </div>
+					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                        <div class="col-1"></div>
+                        <div class="col-10  q-pl-md">2.2 ด้านการปฏิบัติราชการ</div>
+                      </div>
+					  <div
+                        v-for="item in checkList22"
+                        :key="item.id"
+                        class="row q-py-xs borderCheck border_y"
+                      >
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                      </div>
+					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                        <div class="col-1"></div>
+                        <div class="col-10  q-pl-md">2.3 ด้านการบริหารทรัพยากรบุคคล</div>
+                      </div>
+					  <div
+                        v-for="item in checkList23"
+                        :key="item.id"
+                        class="row q-py-xs borderCheck border_y"
+                      >
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                      </div>
+					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                        <div class="col-1"></div>
+                        <div class="col-10  q-pl-md">2.4 ด้านการบริหารงบประมาณและการคลัง</div>
+                      </div>
+					  <div
+                        v-for="item in checkList24"
+                        :key="item.id"
+                        class="row q-py-xs borderCheck border_y"
+                      >
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                      </div>
+					  <div class="row q-mt-xs bg-grey-3 q-py-xs">
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="val3"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+                        <div class="col-11">3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน</div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">
+                    กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                  </div>
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12">
+                      <q-input
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="OtherLaw"
+                      />
+                    </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"
+                        :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>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top2">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
+            </div>
+            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+              <div class="row col-12 q-gutter-lg">
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">สมรรถนะหลัก</div>
+                  <div class="col-12 row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :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">
+                  <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"
+                        :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>
+            </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
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="Other"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
+              <q-btn
+                v-if="routeName == 'probationWorkAdd'"
+                round
+                color="primary"
+                dense
+                icon="mdi-plus"
+                flat
+                class="q-ml-sm"
+				@click="addProductivity"
+              />
+			  <q-btn
+                v-if="productivityCount > 1 && routeName == 'probationWorkAdd'"
+                round
+                color="red"
+                dense
+                icon="undo"
+                flat
+                class="q-ml-sm"
+                @click="resetProductivity"
+                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
+              >
+              <q-chip color="primary" text-color="white" icon="flag_circle">
+                {{ productivityCount }}
+              </q-chip>
+            </div>
+            <div class="col-12 row q-gutter-md">
+              <q-card v-for="item in productivityCount" 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"
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      v-model="Productivitys[item-1]"
+                      label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                    />
+                  </div>
+                  <div class="col-xs-12 col-sm-6">
+                    <q-input
+                      class="bg-white"
+                      type="textarea"
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      v-model="goals1[item-1]"
+                      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">
+                ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
+                ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
+              </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>
+          <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
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="name"
+                  label="ชื่อ-สกุล"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-4">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date1 != null ? date2Thai(date1) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </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"
+                :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"
+                  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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date2 != null ? date2Thai(date2) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <q-select
+                :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"
+                  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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      s
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date3 != null ? date2Thai(date3) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+          <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"
+                :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"
+                  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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date4 != null ? date2Thai(date4) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 // import type { QForm } from "quasar";
-
+const val1 = ref(false);
+const val3 = ref(false);
 const router = useRouter();
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-const routeName = router.currentRoute.value.name
+const routeName = router.currentRoute.value.name;
 
-const name = ref<string>('นายสมคิด ยอดใจ');
-const position = ref<string>('นักจัดการงานทั่วไป');
+const name = ref<string>("นายสมคิด ยอดใจ");
+const position = ref<string>("นักจัดการงานทั่วไป");
 
-const caretaker = ref<string>('นางสาวรัชภรณ์ ภักดี');
-const caretaker2 = ref<string>('');
-const OPcaretaker1 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
-const OPcaretaker2 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
+const caretakerCount = ref<number>(1);
+const caretakerMax = ref<number>(6);
+const caretakers = ref<string[]>(Array(caretakerCount.value).fill(""));
+const caretaker2 = ref<string>("");
+const OPcaretaker = [
+  "นางสาวรัชภรณ์ ภักดี",
+  "นางสาวทวิดา กมลเวชชี",
+  "test1",
+  "test2",
+  "test3",
+  "test4",
+];
+const addCaretaker = () => {
+  caretakerCount.value++;
+};
+const getOptions = (item: number) => {
+  return OPcaretaker;
+};
+const resetCaretakers = () => {
+  caretakerCount.value = 1;
+  caretakers.value = Array(caretakerCount.value).fill("");
+};
+//-----------------(3.1)-----------//
+const activityCount = ref<number>(2);
+const activities = ref<string[]>(Array(activityCount.value).fill(""));
+const goals = ref<string[]>(Array(activityCount.value).fill(""));
 
-const activity1 = ref<string>('');
-const goal1 = ref<string>('');
-const activity2 = ref<string>('');
-const goal2 = ref<string>('');
+const addActivity = () => {
+  activityCount.value++;
+};
+const resetActivity = () => {
+  activityCount.value = 2;
+  activities.value = Array(activityCount.value).fill("");
+  goals.value = Array(activityCount.value).fill("");
+};
+//-----------------(3.2)-----------//
+const knowledgeCount = ref<number>(3);
+const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
+const OPknowledge = ["1", "2", "3", "4"];
+const addKnowledge = () => {
+  knowledgeCount.value++;
+};
+const getOpknowledge = (index: number) => {
+  return OPknowledge;
+};
+const resetKnowledge = () => {
+  knowledgeCount.value = 3;
+  knowledge.value = Array(knowledgeCount.value).fill("");
+};
 
-const knowledge = ref<string>('');
-const knowledge2 = ref<string>('');
-const knowledge3 = ref<string>('');
-const OPknowledge = ['',''];
+const productivityCount = ref<number>(1);
+const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
+const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
 
+const addProductivity = () => {
+	productivityCount.value++;
+};
+const resetProductivity = () => {
+	productivityCount.value = 1;
+  Productivitys.value = Array(productivityCount.value).fill("");
+  goals1.value = Array(productivityCount.value).fill("");
+};
+const checkList21 = ref([
+  { id: 1, text: '2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร', checked: false },
+  { id: 2, text: '2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน', checked: false },
+  { id: 3, text: '2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่', checked: false },
+  { id: 4, text: '2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙', checked: false },
+  { id: 5, text: '2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒', checked: false },
+  { id: 6, text: '2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖', checked: false },
+]);
+const checkList22 = ref([
+  { id: 1, text: '2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖', checked: false },
+  { id: 2, text: '2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง', checked: false },
+  { id: 3, text: '2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่', checked: false },
+  { id: 4, text: '2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ', checked: false },
+  { id: 5, text: '2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖', checked: false },
+  { id: 6, text: '2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔', checked: false },
+]);
+const checkList23 = ref([
+  { id: 1, text: '2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง', checked: false },
+  { id: 2, text: '2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง', checked: false },
+]);
+const checkList24 = ref([
+  { id: 1, text: '2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖', checked: false },
+  { id: 2, text: '2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘', checked: false },
+  { id: 3, text: '2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑', checked: false },
+  { id: 4, text: '2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒', checked: false },
+  { id: 5, text: '2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔', checked: false },
+  { id: 6, text: '2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ', checked: false },
+  { id: 7, text: '2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕', checked: false },
+  { id: 8, text: '2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖', checked: false },
+  { id: 9, text: '2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔', checked: false },
+  { id: 10, text: '2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔', checked: false },
+  { id: 11, text: '2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕', checked: false },
+  { id: 12, text: '2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗', checked: false },
+  { id: 13, text: '2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗', checked: false },
+  { id: 14, text: '2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘', checked: false },
+]);
 const law = ref([]);
 const listlaw = [
-  { id: 1, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 1' },
-	{ id: 2, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 2' },
-	{ id: 3, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 3' },
-	{ id: 4, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 4' },
-	{ id: 5, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 5' }
+  { id: 1, label: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร" },
+  { id: 2, label: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการเเผ่นดิน" },
+  { id: 3, label: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่" },
+  {
+    id: 4,
+    label:
+      "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจาร์ณ พ.ศ. ๒๕๓๙",
+  },
+  {
+    id: 5,
+    label:
+      "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองเเละสังคมที่ดี พ.ศ. ๒๕๔๒",
+  },
+  {
+    id: 5,
+    label:
+      "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
+  },
 ];
-const OtherLaw = ref<string>('');
+const OtherLaw = ref<string>("");
 
-const skill = ref<string>('ความรู้ความสามารถด้าน 1');
-const skill2 = ref<string>('ความรู้ความสามารถด้าน 2');
-const skill3 = ref<string>('ความรู้ความสามารถด้าน 3');
-const skill4 = ref<string>('ความรู้ความสามารถด้าน 4');
-const OPskill = [''];
+const skill = ref<string>("ความรู้ความสามารถด้าน 1");
+const skill2 = ref<string>("ความรู้ความสามารถด้าน 2");
+const skill3 = ref<string>("ความรู้ความสามารถด้าน 3");
+const skill4 = ref<string>("ความรู้ความสามารถด้าน 4");
+const OPskill = [""];
 
-const main = ref<string>('คุณธรรมจริยธรรม')
-const main2 = ref<string>('การให้บริการที่ดี')
-const main3 = ref<string>('การมุ่งผลสัมฤทธิ์')
-const main4 = ref<string>('ทํางานเป็นทีม')
-const main5 = ref<string>('การสั่งสมความเชี่ยวชาญในอาชีพ')
-const OPmain = [''];
+const main = ref<string>("คุณธรรมจริยธรรม");
+const main2 = ref<string>("การให้บริการที่ดี");
+const main3 = ref<string>("การมุ่งผลสัมฤทธิ์");
+const main4 = ref<string>("ทํางานเป็นทีม");
+const main5 = ref<string>("การสั่งสมความเชี่ยวชาญในอาชีพ");
+const OPmain = [""];
 
-const group = ref<string>('')
-const group2 = ref<string>('')
-const group3 = ref<string>('')
-const OPgroup = [''];
+const group = ref<string>("");
+const group2 = ref<string>("");
+const group3 = ref<string>("");
+const OPgroup = [""];
 
-const Other = ref<string>('');
+const Other = ref<string>("");
 
-const commander = ref<string>('')
+const commander = ref<string>("");
 
 const date1 = ref<Date>(new Date());
 const date2 = ref<Date>(new Date());
@@ -906,21 +1237,27 @@ const date3 = ref<Date>(new Date());
 const date4 = ref<Date>(new Date());
 </script>
 <style lang="scss" scoped>
-.text-top2{
-	font-weight: 500;
-	padding-bottom: 8px;
-   color: rgb(70, 68, 68);
+.border_y{
+	border-left:1px solid #d8d8d8 ;
+	border-right:1px solid #d8d8d8 ;
 }
-.text-top0{
-	font-weight: 600;
-	padding-bottom: 8px;
-    color: rgb(70, 68, 68);
+.borderCheck{
+	border-bottom: 1px solid #d8d8d8;
 }
-.text-Hd{
-	font-weight: 600;
-    font-size: 1rem;
-    padding-bottom: 5px;
-    color: #02A998;
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
 }
-
-</style>
\ No newline at end of file
+.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;
+}
+</style>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 417accbaf..9964173ae 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -31,6 +31,8 @@ const probationForm = () =>
 
 const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
+  const probationWorkAdd2 = () =>
+  import("@/modules/05_placement/components/probation/AddWork.vue");
 export default [
   {
     path: "/placement",
@@ -142,4 +144,14 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/add",
+    name: "probationWorkAdd",
+    component: probationWorkAdd2,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];