From 9c27d47092d72ea47a0e32a4bc9288de02d4deb6 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 20 Jan 2025 18:07:07 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=AA=E0=B8=B3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=88=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=94=E0=B9=80=E0=B8=AB=E0=B9=87=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/probation/api.probation.ts            |    2 +
 src/interface/Main.ts                         |    1 +
 .../components/01_SurveyPage.vue              |   62 +-
 .../components/02_ResultPage.vue              |  462 +--
 .../components/03_AssignPage.vue              | 2948 +++++++++++++++++
 .../components/ResultTemplate.vue             |  367 ++
 .../15_probationReport/interface/Main.ts      |   85 +-
 src/modules/15_probationReport/store.ts       |  116 +-
 src/modules/15_probationReport/views/main.vue |   65 +-
 src/stores/data.ts                            |    4 +
 10 files changed, 3695 insertions(+), 417 deletions(-)
 create mode 100644 src/modules/15_probationReport/components/03_AssignPage.vue
 create mode 100644 src/modules/15_probationReport/components/ResultTemplate.vue

diff --git a/src/api/probation/api.probation.ts b/src/api/probation/api.probation.ts
index fdd102b..003d1eb 100644
--- a/src/api/probation/api.probation.ts
+++ b/src/api/probation/api.probation.ts
@@ -57,4 +57,6 @@ export default {
     `${reportProbation}/14/${type}/${id}`,
 
   kpiCapacity,
+
+  appointMainList: (id: string) => `${probation}/appoint/list/${id}`,
 };
diff --git a/src/interface/Main.ts b/src/interface/Main.ts
index d330ce4..6c3f1f5 100644
--- a/src/interface/Main.ts
+++ b/src/interface/Main.ts
@@ -8,6 +8,7 @@ interface ProfileData {
   posTypeName: string;
   posLevelName: string;
   posNo: string;
+  profileId: string;
 }
 
 interface InformationData {
diff --git a/src/modules/15_probationReport/components/01_SurveyPage.vue b/src/modules/15_probationReport/components/01_SurveyPage.vue
index 6a06c7a..57456f5 100644
--- a/src/modules/15_probationReport/components/01_SurveyPage.vue
+++ b/src/modules/15_probationReport/components/01_SurveyPage.vue
@@ -10,6 +10,7 @@ import config from "@/app.config";
 import { useProbationReport } from "@/modules/15_probationReport/store";
 
 import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
+import type { DataSurvey } from "@/modules/15_probationReport/interface/Main";
 
 const store = useProbationReport();
 const router = useRouter();
@@ -28,8 +29,13 @@ const mixin = useCounterMixin();
 const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
 const route = useRoute();
 
-const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
+const props = defineProps({
+  dataSurvey: Object,
+  getSurveyData: Function,
+});
 const isData = defineModel<boolean>("isData", { required: true });
+const dataSurvey = defineModel<any>("dataSurvey", { required: true });
+
 const status = ref<boolean>(true);
 
 const answer1 = ref<string>("");
@@ -38,32 +44,6 @@ const answer3 = ref<number>(0);
 
 const classBordered = ref<string>("");
 
-/** ดึง ข้อมูลแบบสำรวจ */
-async function getSurveyData() {
-  isData.value = true;
-  showLoader();
-  await http
-    .get(config.API.summaryDetail())
-    .then(async (res: any) => {
-      const data = await res.data.result.data;
-      isData.value = true;
-      assignId.value = res.data.result.assignId;
-      store.assignId = res.data.result.assignId;
-      if (data !== null) {
-        answer1.value = data.answer1;
-        answer2.value = data.answer2;
-        answer3.value = data.answer3;
-        status.value = false;
-      }
-      hideLoader();
-    })
-    .catch((e) => {
-      // messageError($q, e);
-      isData.value = false;
-      hideLoader();
-    });
-}
-
 /** save ข้อมูล */
 async function save() {
   if (answer3.value !== 0) {
@@ -75,10 +55,10 @@ async function save() {
     dialogConfirm($q, async () => {
       showLoader();
       await http
-        .post(config.API.summarySurveyDetail(assignId.value), data)
+        .post(config.API.summarySurveyDetail(store.assignId), data)
         .then((res: any) => {
           success($q, "บันทึกสำเร็จ");
-          getSurveyData();
+          props.getSurveyData?.();
         })
         .catch((e: any) => {
           messageError($q, e);
@@ -99,11 +79,31 @@ watch(answer3, () => {
   } else classBordered.value = "";
 });
 
+watch(
+  () => dataSurvey.value,
+  () => {
+    if (store.tabMain === "SURVEY") {
+      if (dataSurvey.value !== null) {
+        answer1.value = dataSurvey.value.answer1;
+        answer2.value = dataSurvey.value.answer2;
+        answer3.value = dataSurvey.value.answer3;
+        status.value = false;
+      }
+    }
+  }
+);
+
+
 /** get ค่า เมื่อโหลดหน้า */
 onMounted(() => {
   if (store.tabMain === "SURVEY") {
-    getSurveyData();
-  }
+      if (dataSurvey.value !== null) {
+        answer1.value = dataSurvey.value.answer1;
+        answer2.value = dataSurvey.value.answer2;
+        answer3.value = dataSurvey.value.answer3;
+        status.value = false;
+      }
+    }
 });
 </script>
 <template>
diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
index c3d12be..1a7cccb 100644
--- a/src/modules/15_probationReport/components/02_ResultPage.vue
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -7,12 +7,15 @@ import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useProbationReport } from "@/modules/15_probationReport/store";
 
+import type { ProbationReportType } from "@/modules/15_probationReport/interface/Main";
+
+import ResultPage from "@/modules/15_probationReport/components/ResultTemplate.vue";
+
 const mixin = useCounterMixin();
 const store = useProbationReport();
 
 const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 const route = useRoute();
-const status = ref<boolean>(false);
 
 const $q = useQuasar();
 const develop_orientation_score = ref<number>();
@@ -49,6 +52,32 @@ const result_option = reactive([
   { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
 ]);
 
+const formData = ref<ProbationReportType>({
+  develop_orientation_score: 0,
+  develop_self_learning_score: 0,
+  develop_training_seminar_score: 0,
+  develop_other_training_score: 0,
+  develop_total_score: 0,
+  develop_orientation_percent: 0,
+  develop_self_learning_percent: 0,
+  develop_training_seminar_percent: 0,
+  develop_other_training_percent: 0,
+  develop_total_percent: 0,
+  develop_result: 0,
+  achievement_score: 0,
+  achievement_score_total: 0,
+  achievement_percent: 0,
+  achievement_result: 0,
+  behavior_score: 0,
+  behavior_score_total: 0,
+  behavior_percent: 0,
+  behavior_result: 0,
+  sum_score: 0,
+  sum_percent: 0,
+  reason: "",
+  pass_result: 0,
+  evaluate_date: new Date(),
+});
 /** get คะแนน */
 async function getReportScore() {
   showLoader();
@@ -56,37 +85,38 @@ async function getReportScore() {
     .get(config.API.summaryReportDetail(store.assignId))
     .then((res) => {
       const data = res.data.result;
-      develop_orientation_score.value = data.develop_orientation_score;
-      develop_self_learning_score.value = data.develop_self_learning_score;
-      develop_training_seminar_score.value =
+      formData.value.develop_orientation_score = data.develop_orientation_score;
+      formData.value.develop_self_learning_score =
+        data.develop_self_learning_score;
+      formData.value.develop_training_seminar_score =
         data.develop_training_seminar_score;
-      develop_other_training_score.value = data.develop_other_training_score;
-      develop_total_score.value = data.develop_total_score;
-      develop_orientation_percent.value = data.develop_orientation_percent;
-      develop_self_learning_percent.value = data.develop_self_learning_percent;
-      develop_training_seminar_percent.value =
+      formData.value.develop_other_training_score =
+        data.develop_other_training_score;
+      formData.value.develop_total_score = data.develop_total_score;
+      formData.value.develop_orientation_percent =
+        data.develop_orientation_percent;
+      formData.value.develop_self_learning_percent =
+        data.develop_self_learning_percent;
+      formData.value.develop_training_seminar_percent =
         data.develop_training_seminar_percent;
-      develop_other_training_percent.value =
+      formData.value.develop_other_training_percent =
         data.develop_other_training_percent;
-      develop_total_percent.value = data.develop_total_percent;
-      develop_result.value = data.develop_result == 0 ? 2 : data.develop_result;
-
-      achievement_score.value = data.achievement_score;
-      achievement_score_total.value = data.achievement_score_total;
-      achievement_percent.value = data.achievement_percent;
-      achievement_result.value = data.achievement_result;
-
-      behavior_score.value = data.behavior_score;
-      behavior_score_total.value = data.behavior_score_total;
-      behavior_percent.value = data.behavior_percent;
-      behavior_result.value = data.behavior_result;
-
-      sum_score.value = data.sum_score;
-      sum_percent.value = data.sum_percent;
-
-      reason.value = data.reason;
-      pass_result.value = data.pass_result;
-      evaluate_date.value = data.evaluate_date;
+      formData.value.develop_total_percent = data.develop_total_percent;
+      formData.value.develop_result =
+        data.develop_result == 0 ? 2 : data.develop_result;
+      formData.value.achievement_score = data.achievement_score;
+      formData.value.achievement_score_total = data.achievement_score_total;
+      formData.value.achievement_percent = data.achievement_percent;
+      formData.value.achievement_result = data.achievement_result;
+      formData.value.behavior_score = data.behavior_score;
+      formData.value.behavior_score_total = data.behavior_score_total;
+      formData.value.behavior_percent = data.behavior_percent;
+      formData.value.behavior_result = data.behavior_result;
+      formData.value.sum_score = data.sum_score;
+      formData.value.sum_percent = data.sum_percent;
+      formData.value.reason = data.reason;
+      formData.value.pass_result = data.pass_result;
+      formData.value.evaluate_date = data.evaluate_date;
     })
     .catch((e) => {
       messageError($q, e);
@@ -113,354 +143,38 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row col-12 q-ma-xs">
-    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
-      <div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
-    </div>
-    <div class="row col-12 q-pt-lg q-px-lg no-margin">
-      <div class="col-12 row justify-center">
-        <div class="col-12 text-top0 items-center">
-          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-          ผลการประเมิน
-        </div>
-      </div>
-      <q-card class="text-top0 col-12">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
-              >
-            </q-item-section>
-            <q-item-section>
-              <q-item-label style="color: gray">
-                <div class="row text-weight-light">
-                  <div class="col">คะแนน</div>
-                  <div class="col">ร้อยละ</div>
-                </div>
-              </q-item-label>
+  <div class="row col-12">
+    <q-tabs
+      v-model="store.tabSub"
+      inline-label
+      align="left"
+      class="text-grey"
+      active-color="primary"
+      active-bg-color="teal-1"
+      indicator-color="primary"
+    >
+      <q-tab name="RESULT1" label="ผลการประเมินการฯ ครั้งที่ 1" />
+      <q-tab name="RESULT2" label="ผลการประเมินการฯ ครั้งที่ 2" />
+    </q-tabs>
 
-              <q-item-label caption style="color: #464444">
-                <div class="row text-weight-bold">
-                  <div class="col">{{ achievement_score }}</div>
-                  <div class="col">{{ achievement_percent }}</div>
-                </div>
-              </q-item-label>
-            </q-item-section>
+    <q-separator />
 
-            <q-item-section side v-if="achievement_result == 1">
-              ผ่าน (สูงกว่าร้อยละ 60)
-            </q-item-section>
-            <q-item-section side v-else>
-              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-      <q-card class="text-top0 col-12">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
-              >
-            </q-item-section>
-            <q-item-section>
-              <q-item-label style="color: gray">
-                <div class="row text-weight-light">
-                  <div class="col">คะแนน</div>
-                  <div class="col">ร้อยละ</div>
-                </div>
-              </q-item-label>
-              <q-item-label caption style="color: #464444">
-                <div class="row text-weight-bold">
-                  <div class="col">{{ behavior_score }}</div>
-                  <div class="col">{{ behavior_percent }}</div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section side v-if="behavior_result == 1">
-              ผ่าน (สูงกว่าร้อยละ 60)
-            </q-item-section>
-            <q-item-section side v-else>
-              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label class="text-black"
-                >ผลคะแนนรวมการประเมินการทดลอง</q-item-label
-              >
-            </q-item-section>
-            <q-item-section>
-              <q-item-label style="color: gray">
-                <div class="row text-weight-light">
-                  <div class="col">คะแนน</div>
-                  <div class="col">ร้อยละ</div>
-                </div>
-              </q-item-label>
-              <q-item-label caption style="color: #464444">
-                <div class="row text-weight-bold">
-                  <div class="col">{{ sum_score }}</div>
-                  <div class="col">{{ sum_percent }}</div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section side v-if="pass_result == 1">
-              ผ่าน (สูงกว่าร้อยละ 60)
-            </q-item-section>
-            <q-item-section side v-else>
-              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <div class="row col-12 q-pt-lg q-px-lg no-margin">
-      <div class="col-12 row justify-center">
-        <div class="col-12 text-top0 items-center">
-          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-          การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
-        </div>
-        <q-card
-          flat
-          bordered
-          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
-        >
-          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
-            <div class="row q-gutter-md q-pl-md">
-              <div class="col-8 text-weight-medium">หัวข้อ</div>
-              <div class="col">คะแนน</div>
-              <div class="col">ร้อยละ</div>
-            </div>
-          </div>
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">1. การปฐมนิเทศ</div>
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="develop_orientation_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="develop_orientation_percent"
-              />
-            </div>
-          </div>
-
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
-            <div class="col">
-              <q-input
-                dense
-                outlined
-                type="number"
-                :readonly="!status"
-                v-model="develop_self_learning_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="develop_self_learning_percent"
-              />
-            </div>
-          </div>
-
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="develop_training_seminar_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="develop_training_seminar_percent"
-              />
-            </div>
-          </div>
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="develop_other_training_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="develop_other_training_percent"
-              />
-            </div>
-          </div>
-
-          <q-separator class="q-my-xs" />
-          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
-            <div class="row q-gutter-md q-pl-sm">
-              <div class="col-8 text-weight-medium">
-                <q-item-label
-                  >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
-                >
-              </div>
-              <div class="col q-pl-md">{{ develop_total_score }}</div>
-              <div class="col q-pl-md">{{ develop_total_percent }}</div>
-            </div>
-          </div>
-        </q-card>
-      </div>
-    </div>
-    <div class="row col-12 q-gutter-lg q-mt-md">
-      <div class="col-xs-12 col-sm-6">
-        <div class="col-12 text-top0 items-center">
-          ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
-        </div>
-        <div class="col-12">
-          <q-select
-            class="col-12"
-            dense
-            v-model="develop_result"
-            outlined
-            :options="dev_options"
-            option-label="label"
-            option-value="value"
-            map-options
-            emit-value
-            :readonly="!status"
-          />
-        </div>
-      </div>
-
-      <div class="col-xs-12 col-sm-11">
-        <div class="col-12 text-top0 row items-center">
-          เหตุผลอื่นๆ ในการพิจารณา
-        </div>
-        <q-input
-          type="textarea"
-          outlined
-          dense
-          class="col-12"
-          v-model="reason"
-          lazy-rules
-          autogrow
-          hide-bottom-space
-          :row="3"
-          :readonly="!status"
+    <q-tab-panels v-model="store.tabSub" animated>
+      <q-tab-panel name="RESULT1">
+        <ResultPage
+          v-model:form-data="formData"
+          v-model:dev_options="dev_options"
+          v-model:result_option="result_option"
         />
-      </div>
-
-      <div class="col-xs-12 col-sm-11">
-        <div class="col-12 row q-col-gutter-md">
-          <div class="col-xs-12 col-sm-6">
-            <div class="col-12 text-top0 items-center">
-              ผลการทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12">
-              <q-select
-                class="col-12"
-                dense
-                v-model="pass_result"
-                outlined
-                :options="result_option"
-                option-label="name"
-                option-value="value"
-                map-options
-                emit-value
-                :readonly="!status"
-              />
-            </div>
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <div class="col-12 text-top0 items-center">
-              วัน เดือน ปี ที่ประเมิน
-            </div>
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="evaluate_date"
-                :locale="'th'"
-                autoApply
-                :readonly="!status"
-                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
-                    :readonly="!status"
-                    class="full-width datepicker"
-                    :model-value="
-                      evaluate_date != null ? date2Thai(evaluate_date) : null
-                    "
-                    :rules="[(val:string) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      </q-tab-panel>
+      <q-tab-panel name="RESULT2">
+        <ResultPage
+          v-model:form-data="formData"
+          v-model:dev_options="dev_options"
+          v-model:result_option="result_option"
+        />
+      </q-tab-panel>
+    </q-tab-panels>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/modules/15_probationReport/components/03_AssignPage.vue b/src/modules/15_probationReport/components/03_AssignPage.vue
new file mode 100644
index 0000000..47c6631
--- /dev/null
+++ b/src/modules/15_probationReport/components/03_AssignPage.vue
@@ -0,0 +1,2948 @@
+<script setup lang="ts">
+import { useRouter, useRoute } from "vue-router";
+import { ref, computed, watch, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useProbationReport } from "@/modules/15_probationReport/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+
+import type {
+  AppointTopic,
+  AppointTopicMain,
+} from "@/modules/15_probationReport/interface/Main";
+
+import genReport from "@/plugins/genreport";
+
+const $q = useQuasar();
+const isEdit = ref<boolean>(false);
+const router = useRouter();
+const route = useRoute();
+
+const dataStore = useDataStore();
+const probationStore = useProbationReport();
+const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+const personalId = route.params.personalId as string;
+const routeName = router.currentRoute.value.name;
+
+const appointTopic = ref<AppointTopicMain>();
+const appointOp = ref<AppointTopicMain[]>([]);
+const appointAll = ref<AppointTopicMain[]>([]);
+
+const reportPersonId = ref<AppointTopic[]>([]);
+const reportPersonIdOp = ref<AppointTopic[]>([]);
+
+const fullname = ref<string>();
+const date_start = ref<Date>();
+const date_finish = ref<any>();
+const other_desc = ref<string>("");
+const other4_desc = ref<string>("");
+const monthOp: MonthOption[] = [];
+const other5_no1_desc = ref<string>("");
+const group = ref<any | null>(null);
+const group2 = ref<any | null>(null);
+const group3 = ref<any | null>(null);
+const main = ref<any>();
+const main2 = ref<any>();
+const main3 = ref<any>();
+const main4 = ref<any>();
+const main5 = ref<any>();
+const commander = ref<any>("");
+const chairman = ref<any>("");
+const date1 = ref<any>();
+const date2 = ref<any>();
+const date3 = ref<any>();
+const date4 = ref<any>();
+const skill = ref<any>();
+const skill2 = ref<any>();
+const skill3 = ref<any>();
+const skill4 = ref<any>();
+const knowledgeCount = ref<number>(3);
+const knowledge = ref<any[]>([]);
+const position = ref<string>("");
+
+const monthSelect = ref<any>();
+
+const optionCaretaker2 = ref<any>([]);
+const OPcommanderFn = ref<any>([]);
+const OPchairmanFn = ref<any>([]);
+const optionCaretaker = ref<any>([]);
+const caretaker1 = ref<any>("");
+const caretaker2 = ref<any>("");
+const productivityCount = ref<number>(1);
+const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
+const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
+const activityCount = ref<number>(2);
+const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
+const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
+const checkRule = ref<CheckboxItem[]>([]);
+
+const isDatePicker2Readonly = computed(() => {
+  return date_start.value === undefined;
+});
+const activityArray = computed(() => {
+  return Array(activityCount.value).fill("");
+});
+const knowledgeArray = computed(() => {
+  return Array(knowledgeCount.value).fill("");
+});
+const ProductivityArray = computed(() => {
+  return Array(productivityCount.value).fill("");
+});
+const OPmain = ref<
+  Array<{ id: number; naem: string; description: string; level: string }>
+>([]);
+const OPgroup = ref<
+  Array<{ id: number; title: string; description: string; level: number }>
+>([]);
+const OPcomputer = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPenglish = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPinfomation = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPresourse = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPknowledge = ref<
+  Array<{ id: number; title: number; description: string; level: string }>
+>([]);
+const OPknowledgeMain = ref<
+  Array<{ id: number; title: number; description: string; level: string }>
+>([]);
+const OPcaretaker = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
+const OPcaretakerNew = ref<any[]>([]);
+const OPcommander = ref<any[]>([]);
+const OPchairman = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
+
+interface MonthOption {
+  value: number;
+  label: string;
+}
+interface optionsValue {
+  id: string;
+  name: string;
+}
+interface CheckboxItem {
+  id: number;
+  parent_id: number;
+  description: string;
+  status_select: number;
+  checked: number;
+}
+/**
+ * update edit
+ * @param id personal id
+ */
+async function dataEdit(id: string) {
+  // await myForm.value.validate().then((result: boolean) => {
+  //   if (result) {
+  showLoader();
+  const data = putDataEdit(id);
+  http
+    .put(config.API.saveEditAssign(id), data)
+    .then(() => {})
+    .catch(() => {})
+    .finally(async () => {
+      isEdit.value = false;
+      getAssign();
+      hideLoader();
+    });
+  // } else {
+  //   dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+  // }
+  // });
+}
+
+/**
+ * pop up confirm
+ * @param id personal id
+ */
+function saveEdit(id: string) {
+  dialogConfirm($q, async () => await dataEdit(id));
+}
+
+/** open dialog */
+function edit() {
+  isEdit.value = true;
+}
+
+/** close dialog */
+function cancel() {
+  isEdit.value = false;
+  getAssign();
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filterData(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filtermantor(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filterMain(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/** reset ค่าวันที่เริ่ม */
+function clearDateExam() {
+  date_start.value = undefined;
+}
+
+/** reset ค่าวันที่สิ้นสุด */
+function clearDateExam2() {
+  date_finish.value = undefined;
+}
+
+/** เพิ่ม ผลการปฏิบัติงาน*/
+function addActivity() {
+  activityCount.value++;
+}
+
+/**
+ * ลบ ผลการปฏิบัติงาน
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteactivity(item: number) {
+  activity_desc.value.splice(item, 1);
+  goal_desc.value.splice(item, 1);
+  if (activityCount.value > 2) {
+    activityCount.value--;
+  }
+}
+
+/** เพิ่มความรู้ความสามารถ โดย สูงสุดที่ 6 item */
+function addKnowledge() {
+  if (knowledgeCount.value < 6) {
+    knowledgeCount.value++;
+  }
+}
+
+/**
+ * ลบ ความรู้ความสามารถ
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteknowledge(item: number) {
+  knowledge.value.splice(item, 1);
+  if (knowledgeCount.value > 3) {
+    knowledgeCount.value--;
+  }
+}
+
+/** เพิ่ม ผลผลิตของงาน*/
+function addProductivity() {
+  productivityCount.value++;
+}
+
+/**
+ * ลบ ผลผลิตของงาน
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteProductivitys(item: number) {
+  output_desc.value.splice(item, 1);
+  indicator_desc.value.splice(item, 1);
+  if (productivityCount.value > 1) {
+    productivityCount.value--;
+  }
+}
+
+/**
+ *ดึงข้อมูลที่ได้รับมอบหมาย
+ * @param id personal id
+ */
+async function getAssignNew(id: string) {
+  await http.get(config.API.newAssign(id)).then((res: any) => {
+    const data = res.data.result;
+
+    const monthOption = {
+      value: data.assign_month,
+      label: `${data.assign_month} เดือน`,
+    };
+    monthOp.push(monthOption);
+    monthSelect.value = `${data.assign_month} เดือน`;
+    fullname.value =
+      (data.person.prefixName == null ? "" : data.person.prefixName) +
+      data.person.firstName +
+      " " +
+      data.person.lastName;
+    position.value = data.person.positionName;
+  });
+}
+
+/**
+ * get ข้อมูล สมรรถนะหลัก
+ * @param id personal id
+ */
+const assign_competencyMain = ref<any>();
+async function getcompetency(id: string) {
+  http
+    .get(config.API.kpiCapacity + `/head`)
+    .then((res) => {
+      const data = res.data.result;
+      assign_competencyMain.value = data;
+      main.value = data[0];
+      main2.value = data[1];
+      main3.value = data[2];
+      main4.value = data[3];
+      main5.value = data[4];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * get ข้อมูล สมรรถนะประจํากลุ่มงาน
+ * @param id personal id
+ */
+const assign_competencyGroupMain = ref<any>();
+async function getCompetencyGroup(id: string) {
+  http
+    .get(config.API.kpiCapacity + `/group?positionName=${position.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      assign_competencyGroupMain.value = data;
+
+      OPgroup.value = data;
+      group.value = data[0];
+      group2.value = data[1];
+      group3.value = data[2];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+
+  // await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
+  //   const data = res.data.result;
+  //   OPgroup.value = data;
+  //   group.value = data[0];
+  //   group2.value = data[1];
+  //   group3.value = data[2];
+  // });
+}
+
+/**
+ * get ข้อมูล ความรู้ความสามารถในการปฏิบัติงาน
+ * @param id personal id
+ */
+async function getKnowledge(id: string) {
+  await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
+    OPknowledge.value = res.data.result;
+  });
+}
+
+/**
+ * get ข้อมูล ทักษะ
+ * @param id personal id
+ */
+async function getSkill(id: string) {
+  await http.get(config.API.skillOptions(id)).then((res: any) => {
+    const skillData = res.data.result;
+    OPcomputer.value = [skillData.computer];
+    OPenglish.value = [skillData.english];
+    OPinfomation.value = [skillData.information];
+    OPresourse.value = [skillData.resourse];
+    skill.value = skillData.computer;
+    skill2.value = skillData.english;
+    skill3.value = skillData.information;
+    skill4.value = skillData.resourse;
+  });
+}
+
+/**
+ * get ข้อมูล ความรู้เรื่องกฎหมายและกฎระเบียบ
+ * @param id personal id
+ */
+async function getLaw(id: string) {
+  await http.get(config.API.lawOptions(id)).then((res: any) => {
+    checkRule.value = res.data.result;
+  });
+}
+
+/** ฟังชั่นส่ง วันที่ไปคำนวณ */
+async function postDateTime() {
+  await http
+    .post(config.API.calculateDate(), {
+      month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+      start_date: dateToISO(date_start.value as Date),
+    })
+    .then(async (res) => {
+      const result = res.data;
+      date_finish.value = result.result.finish_date;
+    })
+    .catch((e) => {})
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/** ฟังชั่น อัพเดต ข้อมูลที่จะส่ง
+ * @param id personal
+ */
+function putDataEdit(id: string) {
+  const GUID = personalId;
+  const assign_job = activityArray.value.map((item, index) => {
+    const activityDesc = activity_desc.value[index]?.trim();
+    const goalDesc = goal_desc.value[index]?.trim();
+
+    if (activityDesc !== "" && goalDesc !== "") {
+      return {
+        activity_desc: activityDesc,
+        goal_desc: goalDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+
+  const know_ledge = knowledge.value.map((item) => ({
+    id: item ? item.id : null,
+    level: item ? item.level : null,
+  }));
+
+  const Productivity_assign = ProductivityArray.value.map((item, index) => {
+    const outputDesc = output_desc.value[index]?.trim();
+    const indicatorDesc = indicator_desc.value[index]?.trim();
+
+    if (outputDesc !== "" && indicatorDesc !== "") {
+      return {
+        output_desc: outputDesc,
+        indicator_desc: indicatorDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+
+  const allGroup = [];
+  if (group.value) allGroup.push({ level: group.value.level });
+  if (group2.value) allGroup.push({ level: group2.value.level });
+  if (group3.value) allGroup.push({ level: group3.value.level });
+
+  const allSkills = [];
+  if (skill.value) allSkills.push({ level: skill.value.level });
+  if (skill2.value) allSkills.push({ level: skill2.value.level });
+  if (skill3.value) allSkills.push({ level: skill3.value.level });
+  if (skill4.value) allSkills.push({ level: skill4.value.level });
+
+  const allCompetency = [];
+  if (main.value) allCompetency.push(main.value);
+  if (main2.value) allCompetency.push(main2.value);
+  if (main3.value) allCompetency.push(main3.value);
+  if (main4.value) allCompetency.push(main4.value);
+  if (main5.value) allCompetency.push(main5.value);
+
+  const assign_director = [
+    {
+      personal_id:
+        caretaker1.value.id != null
+          ? caretaker1.value.id
+          : caretaker1.value.personal_id,
+      role: "mentor",
+      name: caretaker1.value.name,
+      position: caretaker1.value.position,
+      posType: caretaker1.value.posType,
+      posLevel: caretaker1.value.posLevel,
+      dated:
+        date2.value instanceof Date
+          ? dateToISO(date2.value)
+          : dateToISO(new Date(date2.value)),
+    },
+    {
+      personal_id:
+        commander.value.id != null
+          ? commander.value.id
+          : commander.value.personal_id,
+      role: "commander",
+      name: commander.value.name,
+      position: commander.value.position,
+      posType: commander.value.posType,
+      posLevel: commander.value.posLevel,
+      dated:
+        date4.value instanceof Date
+          ? dateToISO(date4.value)
+          : dateToISO(new Date(date4.value)),
+    },
+    {
+      personal_id:
+        chairman.value.id != null
+          ? chairman.value.id
+          : chairman.value.personal_id,
+      role: "chairman",
+      name: chairman.value.name,
+      position: chairman.value.position,
+      posType: chairman.value.posType,
+      posLevel: chairman.value.posLevel,
+    },
+  ];
+
+  if (caretaker2.value) {
+    assign_director.push({
+      personal_id:
+        caretaker2.value.id != null
+          ? caretaker2.value.id
+          : caretaker2.value.personal_id,
+      name: caretaker2.value.name,
+      position: caretaker2.value.position,
+      posType: caretaker2.value.posType,
+      posLevel: caretaker2.value.posLevel,
+      role: "mentor",
+      dated:
+        date3.value instanceof Date
+          ? dateToISO(date3.value)
+          : dateToISO(new Date(date3.value)),
+    });
+  }
+  const data = {
+    reportPersonId: reportPersonId.value ? reportPersonId.value : "",
+    appointId: appointTopic.value ? appointTopic.value.id : "",
+    fullname: fullname.value,
+    position: position.value,
+    monthSelect:
+      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
+    date_finish:
+      date_finish.value instanceof Date
+        ? dateToISO(date_finish.value)
+        : dateToISO(new Date(date_finish.value)),
+    assign_knowledges: know_ledge,
+    assign_jobs: assign_job.filter((item) => item !== null),
+    other_desc: other_desc.value ?? "",
+    assign_skill: allSkills,
+    assign_competency: assign_competencyMain.value,
+    assign_competency_group: assign_competencyGroupMain.value,
+    other4_desc: other4_desc.value ?? "",
+    other5_no1_desc: other5_no1_desc.value ?? "",
+    assign_outputs: Productivity_assign.filter((item) => item !== null),
+    assign_director: assign_director,
+    experimenter_dated:
+      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+    assign_law: checkRule.value
+      .filter((item) => item.checked === 1)
+      .map((item) => ({
+        id: item.id,
+        checked: item.checked,
+      })),
+  };
+  return data;
+}
+
+/** ฟังชั่น สร้างข้อมูลที่จะส่ง
+ * @param id personal
+ */
+function putData(id: string) {
+  const GUID = personalId;
+  const assign_job = activityArray.value.map((item, index) => {
+    const activityDesc = activity_desc.value[index]?.trim();
+    const goalDesc = goal_desc.value[index]?.trim();
+
+    if (activityDesc !== "" && goalDesc !== "") {
+      return {
+        activity_desc: activityDesc,
+        goal_desc: goalDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+  const know_ledge = knowledge.value.map((item) => ({
+    id: item ? item.id : null,
+    level: item ? item.level : null,
+  }));
+
+  const Productivity_assign = ProductivityArray.value.map((item, index) => {
+    const outputDesc = output_desc.value[index]?.trim();
+    const indicatorDesc = indicator_desc.value[index]?.trim();
+
+    if (outputDesc !== "" && indicatorDesc !== "") {
+      return {
+        output_desc: outputDesc,
+        indicator_desc: indicatorDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+
+  const allGroup = [];
+  if (group.value) allGroup.push({ level: group.value.level });
+  if (group2.value) allGroup.push({ level: group2.value.level });
+  if (group3.value) allGroup.push({ level: group3.value.level });
+
+  const allSkills = [];
+  if (skill.value) allSkills.push({ level: skill.value.level });
+  if (skill2.value) allSkills.push({ level: skill2.value.level });
+  if (skill3.value) allSkills.push({ level: skill3.value.level });
+  if (skill4.value) allSkills.push({ level: skill4.value.level });
+
+  const assign_director = [
+    {
+      personal_id: caretaker1.value.id,
+      name: caretaker1.value.name,
+      position: caretaker1.value.position,
+      posType: caretaker1.value.posType,
+      posLevel: caretaker1.value.posLevel,
+      role: "mentor",
+      dated:
+        date2.value instanceof Date
+          ? dateToISO(date2.value)
+          : dateToISO(new Date(date2.value)),
+    },
+    {
+      personal_id: commander.value.id,
+      role: "commander",
+      name: commander.value.name,
+      position: commander.value.position,
+      posType: commander.value.posType,
+      posLevel: commander.value.posLevel,
+      dated:
+        date4.value instanceof Date
+          ? dateToISO(date4.value)
+          : dateToISO(new Date(date4.value)),
+    },
+    {
+      personal_id: chairman.value.id,
+      role: "chairman",
+      name: chairman.value.name,
+      position: chairman.value.position,
+      posType: chairman.value.posType,
+      posLevel: chairman.value.posLevel,
+    },
+  ];
+
+  if (caretaker2.value) {
+    assign_director.push({
+      personal_id: caretaker2.value.id,
+      name: caretaker2.value.name,
+      position: caretaker2.value.position,
+      posType: caretaker2.value.posType,
+      posLevel: caretaker2.value.posLevel,
+      role: "mentor",
+      dated:
+        date3.value instanceof Date
+          ? dateToISO(date3.value)
+          : dateToISO(new Date(date3.value)),
+    });
+  }
+  const data = {
+    reportPersonId: reportPersonId.value ? reportPersonId.value : "",
+    appointId: appointTopic.value ? appointTopic.value.id : "",
+    personalId: GUID,
+    fullname: fullname.value,
+    position: position.value,
+    monthSelect:
+      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
+    date_finish:
+      date_finish.value instanceof Date
+        ? dateToISO(date_finish.value)
+        : dateToISO(new Date(date_finish.value)),
+
+    assign_knowledges: know_ledge,
+    assign_jobs: assign_job.filter((item) => item !== null),
+    other_desc: other_desc.value ?? "",
+    assign_skill: allSkills,
+    assign_competency: assign_competencyMain.value,
+    assign_competency_group: assign_competencyGroupMain.value,
+    other4_desc: other4_desc.value ?? "",
+    other5_no1_desc: other5_no1_desc.value ?? "",
+    assign_outputs: Productivity_assign.filter((item) => item !== null),
+
+    assign_director: assign_director,
+    experimenter_dated:
+      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+
+    assign_law: checkRule.value
+      .filter((item) => item.checked === 1)
+      .map((item) => ({
+        id: item.id,
+        checked: item.checked,
+      })),
+  };
+  return data;
+}
+
+/**
+ * เช็คข้อมูลก่อนบันทึก
+ * @param id personal id
+ */
+async function saveData(id: string) {
+  dialogConfirm($q, async () => await DataSave(id));
+}
+
+/**
+ * บันทึก
+ * @param id personal id
+ */
+async function DataSave(id: string) {
+  const data = putData(id);
+  await http
+    .post(config.API.saveFinish(id), data)
+    .then(() => {
+      router.push(`/probation/detail/${id}`);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get ข้อมูลรายการมอบหมาย */
+async function getAssign() {
+  await http
+    .get(config.API.probationsGetAssign(probationStore.assignId))
+    .then((res) => {
+      isEdit.value = false;
+      const data = res.data.result;
+      fullname.value = data.profile.name;
+
+      appointTopic.value = appointOp.value.find(
+        (item: AppointTopicMain) => item.id == data.assign.appointId
+      );
+      const dataMap = appointOp.value.find(
+        (item: AppointTopicMain) => item.id == data.assign.appointId
+      )?.directors;
+      const dataPerson = dataMap?.map((dataPerson: AppointTopic) => ({
+        ...dataPerson,
+        name: `${dataPerson.name} (${dataPerson.position}${
+          dataPerson.positionLevel && dataPerson.positionType
+            ? ", " + dataPerson.positionType + " : " + dataPerson.positionLevel
+            : ""
+        })`,
+      }));
+      reportPersonIdOp.value = dataPerson ?? [];
+      if (reportPersonIdOp.value.length !== 0) {
+        reportPersonId.value = data.assign.reportPersonId;
+      }
+      position.value = data.profile.positionName;
+      date_start.value = data.assign.date_start;
+      date_finish.value = data.assign.date_finish;
+      date1.value = data.assign.experimenter_dated;
+      if (data.mentors.length > 1) {
+        date2.value = data.mentors[0].dated;
+        caretaker1.value = data.mentors[0];
+        date3.value = data.mentors[1].dated;
+        caretaker2.value = data.mentors[1];
+      } else {
+        date2.value = data.mentors[0].dated;
+        caretaker1.value = data.mentors[0];
+      }
+
+      date4.value = data.commander.dated;
+      activity_desc.value = data.jobs.map((job: any) => job.activity_desc);
+      goal_desc.value = data.jobs.map((job: any) => job.goal_desc);
+      activityCount.value = data.jobs.length;
+
+      chairman.value = data.chairman;
+      commander.value = data.commander;
+      knowledge.value = data.knowledges.map((opItem: any) => {
+        return OPknowledge.value.find(
+          (dataItem: any) => dataItem.id === opItem.id
+        );
+      });
+
+      knowledgeCount.value = data.knowledges.length;
+      other_desc.value = data.assign.other_desc;
+      other4_desc.value = data.assign.other4_desc;
+      other5_no1_desc.value = data.assign.other5_no1_desc;
+
+      const skills = data.skills.map((skills: any) => ({
+        id: skills.id,
+        title: skills.title,
+        level: skills.level,
+        level_description: skills.description,
+      }));
+      [skill.value, skill2.value, skill3.value, skill4.value] = skills;
+
+      main.value = data.competencys[0];
+      main2.value = data.competencys[1];
+      main3.value = data.competencys[2];
+      main4.value = data.competencys[3];
+      main5.value = data.competencys[4];
+
+      group.value = data.competency_groups[0];
+      group2.value = data.competency_groups[1];
+      group3.value = data.competency_groups[2];
+
+      output_desc.value = data.outputs.map((output: any) => output.output_desc);
+      indicator_desc.value = data.outputs.map(
+        (output: any) => output.indicator_desc
+      );
+      productivityCount.value = data.outputs.length;
+
+      checkRule.value = data.laws.map((law: any) => ({
+        id: law.id,
+        checked: law.selected,
+        description: law.description,
+        status_select: law.status_select,
+      }));
+    });
+}
+
+/**
+ * download file
+ * @param response ไฟล์
+ * @param filename ชื่อไฟล์
+ */
+function downloadFile(response: any, filename: string) {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/**
+ * download file
+ * @param type type file
+ */
+async function clickdownloadFile(type: string) {
+  showLoader();
+  await http
+    .get(config.API.reportAssign(type, probationStore.assignId))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(
+        data,
+        `แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ-${fullname.value}`,
+        type
+      );
+      hideLoader();
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+/** เช็ค จำนวนเดือน เเละ วันที่เริ่ม ไม่เท่ากับ undefined*/
+watch(
+  () => [monthSelect.value, date_start.value],
+  () => {
+    if (monthSelect.value !== undefined && date_start.value !== undefined) {
+      postDateTime();
+    }
+  }
+);
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+function filterFnCaretaker(val: string, update: any) {
+  const dataFilter = filtermantor(OPcaretakerNew.value, [
+    caretaker2.value,
+  ]).filter((i: any) => i.id !== chairman.value.id);
+  if (val == "") {
+    update(() => {
+      optionCaretaker.value = dataFilter;
+    });
+  } else {
+    update(() => {
+      optionCaretaker.value = dataFilter.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+function filterFnCaretaker2(val: string, update: any) {
+  const dataFilter = filtermantor(OPcaretaker.value, [caretaker1.value]).filter(
+    (i: any) => i.id !== chairman.value.id
+  );
+  if (val == "") {
+    update(() => {
+      optionCaretaker2.value = dataFilter;
+    });
+  } else {
+    update(() => {
+      optionCaretaker2.value = dataFilter.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+function filterFnCommander(val: string, update: any) {
+  const dataFilter = OPcommander.value.filter(
+    (i: any) => i.id !== chairman.value.id
+  );
+  if (val == "") {
+    update(() => {
+      OPcommanderFn.value = dataFilter;
+    });
+  } else {
+    update(() => {
+      OPcommanderFn.value = dataFilter.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+function filterFnKnowledge(val: string, update: any) {
+  const selectedIds = knowledge.value.map((item) => item.id);
+  const dataFilter = OPknowledge.value.filter(
+    (item) => !selectedIds.includes(item.id)
+  );
+
+  update(() => {
+    OPknowledgeMain.value = dataFilter;
+  });
+}
+
+async function getAppoint(id: string) {
+  http
+    .get(config.API.appointMainList(id))
+    .then((res) => {
+      const data = res.data.result;
+      appointOp.value = data;
+      appointAll.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function updateAppointMent() {
+  if (appointTopic.value) {
+    const data = appointTopic.value.directors;
+    const dataPerson = data.map((dataPerson: AppointTopic) => ({
+      ...dataPerson,
+      name: `${dataPerson.name} (${dataPerson.position}${
+        dataPerson.positionLevel && dataPerson.positionType
+          ? ", " + dataPerson.positionType + " : " + dataPerson.positionLevel
+          : ""
+      })`,
+    }));
+
+    reportPersonIdOp.value = dataPerson;
+
+    const dataFindChairman = data.find(
+      (item: AppointTopic) => item.role === "chairman"
+    );
+    const dataFindCommittee = data.find(
+      (item: AppointTopic) => item.role === "committee"
+    );
+    const dataFindCaretaker1 = data.filter(
+      (item: AppointTopic) => item.role === "caregiver"
+    )[0];
+    const dataFindCaretaker2 = data.filter(
+      (item: AppointTopic) => item.role === "caregiver"
+    )[1];
+
+    const createChairmanObject = (dataPerson: AppointTopic) => ({
+      id: dataPerson.profileId,
+      name: dataPerson.name,
+      label: dataPerson.position
+        ? `${dataPerson.name} (${dataPerson.position}${
+            dataPerson.positionLevel && dataPerson.positionType
+              ? ", " +
+                dataPerson.positionType +
+                " : " +
+                dataPerson.positionLevel
+              : ""
+          })`
+        : dataPerson.name,
+      posLevel: dataPerson.positionLevel,
+      posType: dataPerson.positionType,
+      position: dataPerson.position,
+    });
+
+    caretaker1.value = dataFindCaretaker1
+      ? createChairmanObject(dataFindCaretaker1)
+      : null;
+    caretaker2.value = dataFindCaretaker2
+      ? createChairmanObject(dataFindCaretaker2)
+      : null;
+    chairman.value = dataFindChairman
+      ? createChairmanObject(dataFindChairman)
+      : null;
+    commander.value = dataFindCommittee
+      ? createChairmanObject(dataFindCommittee)
+      : null;
+  }
+}
+
+/** เมื่อโหลดหน้า เรียกใช้งานฟังชั่น */
+onMounted(async () => {
+  const promises = [
+    getAssignNew(dataStore.formData.profileId),
+    getLaw(dataStore.formData.profileId),
+    getSkill(dataStore.formData.profileId),
+    getKnowledge(dataStore.formData.profileId),
+    getcompetency(dataStore.formData.profileId),
+    getCompetencyGroup(dataStore.formData.profileId),
+    getAppoint(dataStore.formData.profileId),
+  ];
+
+  if (probationStore.assignId !== undefined) {
+    promises.push(getAssign());
+  }
+  showLoader();
+  await Promise.all(promises)
+    .then(() => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+});
+</script>
+
+<template>
+  <q-form
+    greedy
+    @submit.prevent
+    @validation-success="
+      probationStore.assignId !== undefined
+        ? saveEdit(probationStore.assignId)
+        : saveData(personalId)
+    "
+  >
+    <div class="q-pa-sm">
+      <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)"
+          v-if="routeName == 'probationWorkAdd'"
+        />
+
+        <div v-if="routeName == 'probationWorkAdd'">
+          เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div v-else class="col-12 row q-gutter-md">
+          <div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
+          <q-btn
+            v-if="!isEdit"
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            color="primary"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="clickdownloadFile('pdf')"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf" />
+                  </q-item-section>
+                  <q-item-section>ไฟล์ .pdf</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="clickdownloadFile('docx')"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+
+          <div v-if="!isEdit">
+            <q-btn
+              v-if="
+                !checkRoutePermisson &&
+                probationStore.dataPermissions?.tab1.isEdit
+              "
+              dense
+              flat
+              round
+              color="edit"
+              @click="edit()"
+              icon="edit"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+
+          <div v-else>
+            <q-btn
+              v-if="!checkRoutePermisson"
+              dense
+              flat
+              round
+              color="red"
+              @click="cancel()"
+              icon="mdi-undo"
+            >
+              <q-tooltip>ยกเลิก</q-tooltip>
+            </q-btn>
+            <!-- @click="saveEdit(assignId)" -->
+            <q-btn
+              v-if="!checkRoutePermisson"
+              dense
+              flat
+              class="q-ml-md"
+              round
+              color="public"
+              type="submit"
+              icon="mdi-content-save-outline"
+            >
+              <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 text-dark">
+        <div class="row col-12">
+          <div class="row col-12 q-gutter-lg">
+            <div class="col-12">
+              <div class="row q-col-gutter-sm q-mb-sm">
+                <div class="col-6">
+                  <q-select
+                    outlined
+                    dense
+                    label="เลือกคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
+                    bg-color="white"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ']"
+                    hide-bottom-space
+                    :options="appointOp"
+                    class="col-xs-12 col-sm-6"
+                    :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                    borderless
+                    option-label="topic"
+                    option-value="id"
+                    v-model="appointTopic"
+                    map-options
+                    @update:model-value="updateAppointMent"
+                  ></q-select>
+                </div>
+                <div class="col-6">
+                  <q-select
+                    :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                    outlined
+                    dense
+                    label="ผู้บันทึกแบบประเมินผล (คณะกรรมการ)"
+                    bg-color="white"
+                    :rules="[(val:any) => val && val.length > 0 || 'กรุณาเลือกผู้บันทึกแบบประเมินผล (คณะกรรมการ)']"
+                    hide-bottom-space
+                    :options="reportPersonIdOp"
+                    class="col-xs-12 col-sm-6"
+                    borderless
+                    option-label="name"
+                    option-value="profileId"
+                    v-model="reportPersonId"
+                    map-options
+                    emit-value
+                  ></q-select>
+                </div>
+              </div>
+
+              <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
+                    :rules="[(val:string) => !!val || 'กรุณากรอกชื่อ']"
+                    hide-bottom-space
+                    readonly
+                    dense
+                    borderless
+                    outlined
+                    v-model="fullname"
+                    label="ชื่อ-นามสกุล"
+                    bg-color="white"
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-6">
+                  <q-input
+                    :rules="[(val:string) => !!val || 'กรุณากรอกตำเเหน่ง']"
+                    hide-bottom-space
+                    readonly
+                    dense
+                    borderless
+                    outlined
+                    v-model="position"
+                    label="ตำแหน่ง"
+                    bg-color="white"
+                  />
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top0 items-center">
+                    ระยะเวลาการทดลองปฏิบัติหน้าที่ราชการ
+                  </div>
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-xs-12 col-sm-4">
+                      <q-select
+                        :rules="[(val:string) => !!val || 'กรุณาเลือกระยะเวลา']"
+                        hide-bottom-space
+                        :options="monthOp"
+                        class="col-xs-12 col-sm-6"
+                        :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                        dense
+                        borderless
+                        option-label="label"
+                        option-value="value"
+                        outlined
+                        v-model="monthSelect"
+                        :label="`ระยะเวลา (เดือน)`"
+                        bg-color="white"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-4">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="date_start"
+                        :locale="'th'"
+                        autoApply
+                        borderless
+                        :enableTimePicker="false"
+                        week-start="0"
+                        :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                      >
+                        <template #year="{ year }">
+                          {{ year + 543 }}
+                        </template>
+                        <template #year-overlay-value="{ value }">
+                          {{ parseInt(value + 543) }}
+                        </template>
+                        <template #trigger>
+                          <q-input
+                            dense
+                            borderless
+                            outlined
+                            :readonly="
+                              !isEdit && routeName !== 'probationWorkAdd'
+                            "
+                            :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
+                            hide-bottom-space
+                            class="full-width datepicker"
+                            :model-value="
+                              date_start != null
+                                ? date2Thai(date_start)
+                                : undefined
+                            "
+                            :label="`${'ตั้งเเต่วันที่'}`"
+                            bg-color="white"
+                          >
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <div class="col-xs-12 col-sm-4">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="date_finish"
+                        :locale="'th'"
+                        autoApply
+                        borderless
+                        readonly
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">
+                          {{ year + 543 }}
+                        </template>
+                        <template #year-overlay-value="{ value }">
+                          {{ parseInt(value + 543) }}
+                        </template>
+                        <template #trigger>
+                          <q-input
+                            hide-bottom-space
+                            dense
+                            outlined
+                            readonly
+                            class="full-width datepicker"
+                            :model-value="
+                              date_finish != null
+                                ? date2Thai(date_finish)
+                                : undefined
+                            "
+                            :label="`${'ถึงวันที่'}`"
+                            clearable
+                            bg-color="white"
+                            @clear="clearDateExam2"
+                          >
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                  </div>
+                </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 คน)
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  :rules="[(val:string) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="id"
+                  hide-dropdown-icon
+                  readonly
+                  :options="OPcaretakerNew"
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  v-model="caretaker1"
+                  :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="label"
+                  @filter="filterFnCaretaker"
+                  use-input
+                  behavior="menu"
+                  bg-color="white"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+
+                <q-select
+                  clearable
+                  :options="optionCaretaker2"
+                  option-value="id"
+                  option-label="label"
+                  hide-bottom-space
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  hide-dropdown-icon
+                  readonly
+                  borderless
+                  outlined
+                  v-model="caretaker2"
+                  :label="`ผู้ดูแลคนที่ 2`"
+                  @filter="filterFnCaretaker2"
+                  use-input
+                  behavior="menu"
+                  bg-color="white"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <!-- 3.1 -->
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                ผลการปฏิบัติงาน
+              </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="isEdit == true || routeName == 'probationWorkAdd'"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addActivity"
+                />
+              </div>
+              <div class="col-12 row q-gutter-sm">
+                <q-card
+                  v-for="(item, index) in activityArray"
+                  :key="index"
+                  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
+                        :rules="
+                          index < 2 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                        dense
+                        borderless
+                        outlined
+                        class="bg-white"
+                        type="textarea"
+                        v-model="activity_desc[index]"
+                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน (ไม่เกิน 10 บรรทัด)"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-5">
+                      <q-input
+                        :rules="
+                          index < 2 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                        dense
+                        borderless
+                        outlined
+                        class="bg-white"
+                        type="textarea"
+                        v-model="goal_desc[index]"
+                        label="เป้าหมายในการปฏิบัติงาน (ไม่เกิน 10 บรรทัด)"
+                      />
+                    </div>
+                    <!-- delete -->
+                    <div
+                      v-if="index > 1"
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteactivity(index)"
+                        v-if="isEdit == true || routeName == 'probationWorkAdd'"
+                      />
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+            </div>
+            <!-- 3.2 -->
+            <div class="col-12 row">
+              <div class="col-12 text-top2">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                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="isEdit == true || routeName == 'probationWorkAdd'"
+                        round
+                        color="primary"
+                        dense
+                        icon="mdi-plus"
+                        flat
+                        class="q-ml-sm"
+                        @click="addKnowledge"
+                      />
+                    </div>
+                    <div
+                      v-for="(item, index) in knowledgeArray"
+                      :key="index"
+                      class="col-12 row q-col-gutter-sm"
+                    >
+                      <div class="col-11 q-my-xs">
+                        <q-select
+                          :option-label="
+                            (item:any) => `${item.title}-${item.description}`
+                          "
+                          option-value="id"
+                          map-options
+                          :rules="
+                            index < 3
+                              ? [(val:string) => !!val || 'กรุณาเลือกความสามารถ']
+                              : []
+                          "
+                          hide-bottom-space
+                          :options="OPknowledgeMain"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          outlined
+                          v-model="knowledge[index]"
+                          :label="`ความรู้ความสามารถในการปฏิบัติงาน ${
+                            index + 1
+                          }`"
+                          @filter="filterFnKnowledge"
+                        />
+                      </div>
+                      <div
+                        v-if="index > 2"
+                        class="col-xs-12 col-sm-1 flex justify-center items-center"
+                      >
+                        <q-btn
+                          v-if="
+                            isEdit == true || routeName == 'probationWorkAdd'
+                          "
+                          flat
+                          round
+                          color="red"
+                          icon="mdi-trash-can-outline"
+                          @click="deleteknowledge(index)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2 row items-center">
+                      ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+                    </div>
+                    <q-card
+                      flat
+                      bordered
+                      class="col-12 q-pa-md q-mt-sm"
+                      style="max-height: 500px; overflow-y: scroll"
+                    >
+                      <div class="example-row-column-width">
+                        <div class="bg-grey-3 q-py-xs">
+                          <div
+                            class="row"
+                            v-for="(item, index) in checkRule"
+                            :key="item.id"
+                          >
+                            <div v-if="index === 0" class="col-1 text-center">
+                              <q-checkbox
+                                v-if="item.status_select === 1"
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="
+                                  isEdit != true &&
+                                  routeName !== 'probationWorkAdd'
+                                "
+                              />
+                            </div>
+                            <div v-if="index === 0" class="col-11">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                        </div>
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 1"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                        </div>
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 2"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                          <div
+                            v-else-if="index > 2 && index < 9"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="
+                                  isEdit != true &&
+                                  routeName !== 'probationWorkAdd'
+                                "
+                              />
+                            </div>
+
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                        </div>
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 9"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                          <div
+                            v-else-if="index > 9 && index < 16"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="
+                                  isEdit != true &&
+                                  routeName !== 'probationWorkAdd'
+                                "
+                              />
+                            </div>
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 16"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
+                          </div>
+
+                          <div
+                            v-else-if="index > 16 && index < 19"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="
+                                  isEdit != true &&
+                                  routeName !== 'probationWorkAdd'
+                                "
+                              />
+                            </div>
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 19"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                          <div
+                            v-else-if="index > 19 && index < 30"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="
+                                  isEdit != true &&
+                                  routeName !== 'probationWorkAdd'
+                                "
+                              />
+                            </div>
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
+                          </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="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          outlined
+                          v-model="other_desc"
+                          type="textarea"
+                        />
+                      </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
+                          :option-label="
+                            (item:any) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPcomputer"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          map-options
+                          outlined
+                          v-model="skill"
+                          label="ด้านที่ 1"
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          ellipsis-2-lines
+                          :option-label="
+                            (item:any) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          map-options
+                          hide-bottom-space
+                          :rules="[
+                            (val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPenglish"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          outlined
+                          v-model="skill2"
+                          label="ด้านที่ 2"
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          :option-label="
+                            (item:any) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPinfomation"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          map-options
+                          borderless
+                          outlined
+                          v-model="skill3"
+                          label="ด้านที่ 3"
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          :option-label="
+                            (item:any) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPresourse"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          map-options
+                          borderless
+                          outlined
+                          v-model="skill4"
+                          label="ด้านที่ 4"
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
+                      </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-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๑  ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main2, main3, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          map-options
+                          outlined
+                          v-model="main"
+                          label="ตัวที่ 1"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          :options-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๑  ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main3, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          map-options
+                          outlined
+                          v-model="main2"
+                          label="ตัวที่ 2"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          :options-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๑  ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          map-options
+                          borderless
+                          outlined
+                          v-model="main3"
+                          label="ตัวที่ 3"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          :options-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๑  ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main5])
+                          "
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          map-options
+                          outlined
+                          v-model="main4"
+                          label="ตัวที่ 4"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main4])
+                          "
+                          :options-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๑  ${item.description}`
+                          "
+                          option-value="id"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          map-options
+                          borderless
+                          outlined
+                          v-model="main5"
+                          label="ตัวที่ 5"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </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-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๒  ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val:string) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group2, group3])"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          map-options
+                          outlined
+                          v-model="group"
+                          label="ตัวที่ 1"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          :options-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๒  ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val:string) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group, group3])"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          map-options
+                          outlined
+                          v-model="group2"
+                          label="ตัวที่ 2"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </div>
+
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                          :options-html="true"
+                          :option-label="
+                            (item:any) =>
+                              `${item.name} - ระดับ:๒  ${item.description}`
+                          "
+                          option-value="id"
+                          map-options
+                          hide-bottom-space
+                          :rules="[
+                            (val:string) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group, group2])"
+                          class="bg-white"
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          outlined
+                          v-model="group3"
+                          label="ตัวที่ 3"
+                        >
+                          <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+                        </q-select>
+                      </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="
+                      isEdit != true && routeName !== 'probationWorkAdd'
+                    "
+                    dense
+                    borderless
+                    outlined
+                    v-model="other4_desc"
+                    bg-color="white"
+                  />
+                </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="isEdit == true || routeName == 'probationWorkAdd'"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addProductivity"
+                />
+              </div>
+              <div class="col-12 row q-gutter-md">
+                <q-card
+                  v-for="(item, index) in ProductivityArray"
+                  :key="index"
+                  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
+                        hide-bottom-space
+                        :rules="
+                          index < 1 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        type="textarea"
+                        :readonly="
+                          isEdit != true && routeName !== 'probationWorkAdd'
+                        "
+                        dense
+                        borderless
+                        outlined
+                        v-model="output_desc[index]"
+                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                        bg-color="white"
+                      />
+                    </div>
+
+                    <div class="col-xs-12 col-sm-5">
+                      <q-input
+                        :rules="
+                          index < 1 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        bg-color="white"
+                        type="textarea"
+                        :readonly="
+                          isEdit != true && routeName !== 'probationWorkAdd'
+                        "
+                        dense
+                        borderless
+                        outlined
+                        v-model="indicator_desc[index]"
+                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
+                      />
+                    </div>
+
+                    <div
+                      v-if="index > 0"
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        flat
+                        v-if="isEdit == true || routeName == 'probationWorkAdd'"
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteProductivitys(index)"
+                      />
+                    </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
+                          :readonly="
+                            isEdit != true && routeName !== 'probationWorkAdd'
+                          "
+                          dense
+                          borderless
+                          outlined
+                          v-model="other5_no1_desc"
+                          label="กรอกอื่น ๆ"
+                          bg-color="white"
+                        />
+                      </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
+                    dense
+                    borderless
+                    outlined
+                    v-model="fullname"
+                    label="ชื่อ-นามสกุล"
+                    bg-color="white"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-4">
+                  <q-input
+                    readonly
+                    dense
+                    borderless
+                    outlined
+                    v-model="position"
+                    label="ตำแหน่ง"
+                    bg-color="white"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    v-model="date1"
+                    :locale="'th'"
+                    autoApply
+                    :readonly="
+                      isEdit != true && routeName !== 'probationWorkAdd'
+                    "
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="
+                          isEdit != true && routeName !== 'probationWorkAdd'
+                        "
+                        dense
+                        outlined
+                        :model-value="date1 != null ? date2Thai(date1) : null"
+                        label="ลงวันที่"
+                        bg-color="white"
+                      >
+                        <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="optionCaretaker"
+                  option-label="label"
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  hide-dropdown-icon
+                  readonly
+                  borderless
+                  outlined
+                  v-model="caretaker1"
+                  label="ผู้ดูแลคนที่ 1"
+                  @filter="filterFnCaretaker"
+                  use-input
+                  behavior="menu"
+                  bg-color="white"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    v-model="date2"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    :readonly="
+                      isEdit != true && routeName !== 'probationWorkAdd'
+                    "
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="
+                          isEdit != true && routeName !== 'probationWorkAdd'
+                        "
+                        dense
+                        outlined
+                        :model-value="date2 != null ? date2Thai(date2) : null"
+                        label="ลงวันที่"
+                        bg-color="white"
+                      >
+                        <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
+                  clearable
+                  :options="optionCaretaker2"
+                  option-label="label"
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  borderless
+                  hide-dropdown-icon
+                  readonly
+                  outlined
+                  v-model="caretaker2"
+                  label="ผู้ดูแลคนที่ 2"
+                  @filter="filterFnCaretaker2"
+                  use-input
+                  behavior="menu"
+                  bg-color="white"
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    v-model="date3"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :readonly="
+                      (isEdit != true && routeName !== 'probationWorkAdd') ||
+                      !caretaker2
+                    "
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        hide-bottom-space
+                        :readonly="
+                          (isEdit != true &&
+                            routeName !== 'probationWorkAdd') ||
+                          !caretaker2
+                        "
+                        dense
+                        :rules="
+                          caretaker2
+                            ? [(val:string) => !!val || 'กรุณาเลือกวันที่']
+                            : []
+                        "
+                        outlined
+                        :model-value="
+                          caretaker2 != null ? date2Thai(date3) : null
+                        "
+                        label="ลงวันที่"
+                        bg-color="white"
+                      >
+                        <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="OPcommanderFn"
+                  option-label="label"
+                  class="col-xs-12 col-sm-8"
+                  hide-dropdown-icon
+                  readonly
+                  dense
+                  borderless
+                  :rules="[(val:string) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
+                  outlined
+                  v-model="commander"
+                  label="ผู้บังคับบัญชา"
+                  use-input
+                  behavior="menu"
+                  @filter="filterFnCommander"
+                  bg-color="white"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    v-model="date4"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :readonly="
+                      isEdit != true && routeName !== 'probationWorkAdd'
+                    "
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="
+                          isEdit != true && routeName !== 'probationWorkAdd'
+                        "
+                        dense
+                        outlined
+                        :model-value="date4 != null ? date2Thai(date4) : null"
+                        label="ลงวันที่"
+                        bg-color="white"
+                      >
+                        <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" style="display: none">
+              <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="OPchairmanFn"
+                  option-label="label"
+                  class="col-xs-12 col-sm-8"
+                  readonly
+                  dense
+                  borderless
+                  outlined
+                  v-model="chairman"
+                  label="ประธานกรรมการ"
+                  use-input
+                  hide-dropdown-icon
+                  behavior="menu"
+                  bg-color="white"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </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="บันทึก" type="submit" color="public"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+        <!-- @click="saveData(personalId)" -->
+      </div>
+    </div>
+  </q-form>
+</template>
+
+<style lang="scss" scoped>
+.border_y {
+  border-left: 1px solid #d8d8d8;
+  border-right: 1px solid #d8d8d8;
+}
+
+.borderCheck {
+  border-bottom: 1px solid #d8d8d8;
+}
+
+.text-top2 {
+  font-weight: 500;
+  color: rgb(70, 68, 68);
+}
+
+.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;
+}
+
+.bin {
+  align-items: center;
+  justify-content: center;
+}
+
+.q-item span {
+  white-space: normal;
+  display: -webkit-box;
+  // -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/modules/15_probationReport/components/ResultTemplate.vue b/src/modules/15_probationReport/components/ResultTemplate.vue
new file mode 100644
index 0000000..7c8cf01
--- /dev/null
+++ b/src/modules/15_probationReport/components/ResultTemplate.vue
@@ -0,0 +1,367 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const formData = defineModel<any>("formData", { required: true });
+const dev_options = defineModel<any>("dev_options", { required: true });
+const result_option = defineModel<any>("result_option", { required: true });
+const status = ref<boolean>(false);
+</script>
+<template>
+  <div class="row col-12 q-ma-xs">
+    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
+      <div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
+    </div>
+    <div class="row col-12 q-pt-lg q-px-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+          ผลการประเมิน
+        </div>
+      </div>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ formData.achievement_score }}</div>
+                  <div class="col">{{ formData.achievement_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="formData.achievement_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ formData.behavior_score }}</div>
+                  <div class="col">{{ formData.behavior_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="formData.behavior_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label class="text-black"
+                >ผลคะแนนรวมการประเมินการทดลอง</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ formData.sum_score }}</div>
+                  <div class="col">{{ formData.sum_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="formData.pass_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="row col-12 q-pt-lg q-px-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
+            <div class="row q-gutter-md q-pl-md">
+              <div class="col-8 text-weight-medium">หัวข้อ</div>
+              <div class="col">คะแนน</div>
+              <div class="col">ร้อยละ</div>
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_orientation_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_orientation_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col">
+              <q-input
+                dense
+                outlined
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_self_learning_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_self_learning_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_training_seminar_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_training_seminar_percent"
+              />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_other_training_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_other_training_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
+            <div class="row q-gutter-md q-pl-sm">
+              <div class="col-8 text-weight-medium">
+                <q-item-label
+                  >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+                >
+              </div>
+              <div class="col q-pl-md">{{ formData.develop_total_score }}</div>
+              <div class="col q-pl-md">
+                {{ formData.develop_total_percent }}
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+    <div class="row col-12 q-gutter-lg q-mt-md">
+      <div class="col-xs-12 col-sm-6">
+        <div class="col-12 text-top0 items-center">
+          ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-select
+            class="col-12"
+            dense
+            v-model="formData.develop_result"
+            outlined
+            :options="dev_options"
+            option-label="label"
+            option-value="value"
+            map-options
+            emit-value
+            :readonly="!status"
+          />
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-11">
+        <div class="col-12 text-top0 row items-center">
+          เหตุผลอื่นๆ ในการพิจารณา
+        </div>
+        <q-input
+          type="textarea"
+          outlined
+          dense
+          class="col-12"
+          v-model="formData.reason"
+          lazy-rules
+          autogrow
+          hide-bottom-space
+          :row="3"
+          :readonly="!status"
+        />
+      </div>
+
+      <div class="col-xs-12 col-sm-11">
+        <div class="col-12 row q-col-gutter-md">
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              ผลการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12">
+              <q-select
+                class="col-12"
+                dense
+                v-model="formData.pass_result"
+                outlined
+                :options="result_option"
+                option-label="name"
+                option-value="value"
+                map-options
+                emit-value
+                :readonly="!status"
+              />
+            </div>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              วัน เดือน ปี ที่ประเมิน
+            </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.evaluate_date"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                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
+                    :readonly="!status"
+                    class="full-width datepicker"
+                    :model-value="
+                      formData.evaluate_date != null
+                        ? date2Thai(formData.evaluate_date)
+                        : null
+                    "
+                    :rules="[(val:string) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/15_probationReport/interface/Main.ts b/src/modules/15_probationReport/interface/Main.ts
index 3369d77..5f56050 100644
--- a/src/modules/15_probationReport/interface/Main.ts
+++ b/src/modules/15_probationReport/interface/Main.ts
@@ -1,8 +1,81 @@
 interface ListDataText {
-    value: string;
-    label: string;
-  }
+  value: string;
+  label: string;
+}
 
-  export type{
-    ListDataText
-  }
\ No newline at end of file
+interface DataSurvey {
+  answer1: string;
+  answer2: string;
+  answer3: number;
+  status: boolean;
+}
+
+interface TabPermissions {
+  isEdit: boolean;
+  isView: boolean;
+}
+
+interface DataPermissions {
+  tab1: TabPermissions;
+  tab2: TabPermissions;
+  tab3: TabPermissions;
+  tab4: TabPermissions;
+  tab5: TabPermissions;
+  tab6: TabPermissions;
+  tab7: TabPermissions;
+}
+
+interface AppointTopic {
+  id: string;
+  appointId: string;
+  profileId: string;
+  name: string;
+  position: string;
+  positionType: string;
+  positionLevel: string;
+  role: string;
+}
+
+interface AppointTopicMain {
+  id: string;
+  profileId: string;
+  topic: string;
+  commandNo: string;
+  status: string;
+  directors: AppointTopic[];
+}
+
+interface ProbationReportType {
+  develop_orientation_score: number;
+  develop_self_learning_score: number;
+  develop_training_seminar_score: number;
+  develop_other_training_score: number;
+  develop_total_score: number;
+  develop_orientation_percent: number;
+  develop_self_learning_percent: number;
+  develop_training_seminar_percent: number;
+  develop_other_training_percent: number;
+  develop_total_percent: number;
+  develop_result: number;
+  achievement_score: number;
+  achievement_score_total: number;
+  achievement_percent: number;
+  achievement_result: number;
+  behavior_score: number;
+  behavior_score_total: number;
+  behavior_percent: number;
+  behavior_result: number;
+  sum_score: number;
+  sum_percent: number;
+  reason: string;
+  pass_result: number;
+  evaluate_date: Date;
+}
+export type {
+  ListDataText,
+  DataSurvey,
+  DataPermissions,
+  AppointTopicMain,
+  AppointTopic,
+  ProbationReportType,
+};
diff --git a/src/modules/15_probationReport/store.ts b/src/modules/15_probationReport/store.ts
index 8698668..a835c55 100644
--- a/src/modules/15_probationReport/store.ts
+++ b/src/modules/15_probationReport/store.ts
@@ -1,9 +1,121 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+import type { DataPermissions } from "@/modules/15_probationReport/interface/Main";
 
 export const useProbationReport = defineStore("ProbationReportStore", () => {
   const tabMain = ref<string>("SURVEY");
+  const tabSub = ref<string>("RESULT1");
   const assignId = ref<string>("");
-  return { tabMain, assignId };
+
+  const dataPermissions = ref<DataPermissions>();
+
+  const assign = ref<any>([]);
+  const evaluate = ref<any>([]);
+  const tabs = ref<any>([]);
+  const mainTab = ref<string>("");
+  const checkLoad = ref<boolean>(false);
+  const assignOutput = ref<any>([]);
+  const director = ref<any>([]);
+  const person = ref<any>([]);
+
+  const fecthdataAssign = async (data: any) => {
+    checkLoad.value = data.evaluate.length == 0 ? true : false;
+    assign.value = await data.assign;
+    evaluate.value = await data.evaluate;
+    tabs.value = await data.evaluate;
+  };
+  const fecthAssignoutput = (data: any) => {
+    assignOutput.value = data.assign_output;
+    director.value = data.director;
+    person.value = data.person;
+  };
+
+  const ratingColors = ref<string[]>([
+    "light-blue-3",
+    "light-blue-6",
+    "blue",
+    "blue-9",
+    "blue-10",
+  ]);
+  const orderId = ref<string>("");
+
+  const stepOrder = ref<number>(2);
+
+  const setOrderId = (val: string) => (orderId.value = val);
+  const setStepOrder = (val: number) => (stepOrder.value = val);
+
+  const behavior_no1 = [
+    { id: "1", label: "ให้บริการประชาชน หรือผู้รับบริการด้วยอัธยาศัยดี" },
+    { id: "2", label: "มีความรับผิดชอบในการปฏิบัติงาน" },
+    {
+      id: "3",
+      label:
+        "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+    },
+    {
+      id: "4",
+      label: "ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+    },
+  ];
+  const behavior_no2 = [
+    {
+      id: "1",
+      label: "อุทิศตน และเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ",
+    },
+    {
+      id: "2",
+      label: "มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต",
+    },
+    {
+      id: "3",
+      label:
+        "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+    },
+  ];
+  const behavior_no3 = [
+    { id: "1", label: "มีความรับผิดชอบในการรักษาเวลาทำงาน" },
+    {
+      id: "2",
+      label: "แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+    },
+    {
+      id: "3",
+      label:
+        "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+    },
+    {
+      id: "4",
+      label:
+        "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติ และศักดิ์ศรีของความเป็นข้าราชการ",
+    },
+    {
+      id: "5",
+      label: "ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึดหลักจรรยาบรรณวิชาชีพ",
+    },
+  ];
+
+  return {
+    tabMain,
+    assignId,
+    tabSub,
+    fecthdataAssign,
+    fecthAssignoutput,
+    assign,
+    evaluate,
+    tabs,
+    assignOutput,
+    director,
+    person,
+    mainTab,
+    ratingColors,
+    orderId,
+    stepOrder,
+    setOrderId,
+    setStepOrder,
+    behavior_no1,
+    behavior_no2,
+    behavior_no3,
+    dataPermissions,
+    checkLoad,
+  };
 });
diff --git a/src/modules/15_probationReport/views/main.vue b/src/modules/15_probationReport/views/main.vue
index b8cd78a..7d06b53 100644
--- a/src/modules/15_probationReport/views/main.vue
+++ b/src/modules/15_probationReport/views/main.vue
@@ -1,19 +1,68 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import { useCounterMixin } from "@/stores/mixin";
 import { useProbationReport } from "@/modules/15_probationReport/store";
 
+import type { DataSurvey } from "@/modules/15_probationReport/interface/Main";
+
 import SurveyPage from "@/modules/15_probationReport/components/01_SurveyPage.vue";
 import ResultPage from "@/modules/15_probationReport/components/02_ResultPage.vue";
+import AssignPage from "@/modules/15_probationReport/components/03_AssignPage.vue";
 
+const $q = useQuasar();
 const store = useProbationReport();
 const router = useRouter();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
 
+const dataSurvey = ref<any>(null);
 const isData = ref<boolean>(true);
+const dataProbation = ref<string>('')
+
+/** ดึง ข้อมูลแบบสำรวจ */
+async function getSurveyData() {
+  isData.value = true;
+  showLoader();
+  await http
+    .get(config.API.summaryDetail())
+    .then(async (res: any) => {
+      const data = await res.data.result.data;
+      isData.value = true;
+      store.assignId = res.data.result.assignId;
+      if (res.data.result.assignId) {
+        await getSalary(res.data.result.assignId);
+      }
+      if (data !== null) {
+        dataSurvey.value = data;
+      }
+      hideLoader();
+    })
+    .catch((e) => {
+      // messageError($q, e);
+      isData.value = false;
+      hideLoader();
+    });
+}
+
+async function getSalary(id: string) {
+  await http
+    .get(config.API.developmentSalaryFile("ทดลองงาน", "มอบหมายงาน", id))
+    .then((res) => {
+      dataProbation.value = res.data.fileName
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+onMounted(async () => {
+  await getSurveyData();
+});
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -54,17 +103,25 @@ const isData = ref<boolean>(true);
           >
             <q-tab name="SURVEY" label="แบบสํารวจความคิดเห็น" />
             <q-tab name="RESULT" label="ผลการประเมินการฯ" />
+            <q-tab  v-if="dataProbation" name="ASSIGN" label="แบบมอบหมายงานฯ" />
           </q-tabs>
 
           <q-separator />
 
           <q-tab-panels v-model="store.tabMain" animated>
             <q-tab-panel name="SURVEY" class="q-pa-none">
-              <SurveyPage v-model:is-data="isData" />
+              <SurveyPage
+                v-model:is-data="isData"
+                v-model:data-survey="dataSurvey"
+                :get-survey-data="getSurveyData"
+              />
             </q-tab-panel>
-            <q-tab-panel name="RESULT">
+            <q-tab-panel name="RESULT" class="q-pa-none">
               <ResultPage />
             </q-tab-panel>
+            <q-tab-panel name="ASSIGN">
+              <AssignPage />
+            </q-tab-panel>
           </q-tab-panels>
         </q-card>
       </div>
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 17b3c0f..cc2fe19 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -9,12 +9,14 @@ import { useCounterMixin } from "./mixin";
 import type { ProfileData } from "@/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
+  const dataProfile = ref<any>()
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
   const mixin = useCounterMixin();
   const { messageError, showLoader, hideLoader, findPosMasterNo } = mixin;
   // ref() คือการประกาศ state เหมือน vuex
   const formData = reactive<ProfileData>({
+    profileId: "",
     rank: "",
     prefix: "",
     firstName: "",
@@ -94,6 +96,7 @@ export const useDataStore = defineStore("dataMain", () => {
     const data = await dataPerson;
     isProbation.value = data.isProbation;
 
+    formData.profileId = data.profileId;
     formData.rank = data.rank;
     formData.prefix = data.prefix;
     formData.firstName = data.firstName;
@@ -143,6 +146,7 @@ export const useDataStore = defineStore("dataMain", () => {
     formData,
     officerLink,
     getProFileType,
+    dataProfile
   };
 });