ทดลอง งาน ค้างไว้

src/api/probation/api.probation.ts

@@ -39,5 +39,22 @@ export default {
 
   summaryReportDetail: (id: string) => `${probation}/report?assign_id=${id}`,
 
+  formevaluate: (id: string) => `${probation}/evaluate-record?assign_id=${id}`,
+
+  formevaluateRecord: (id: string) =>
+    `${probation}/evaluate-record/create?assign_id=${id}`,
+
+  createformevaluate: (id: string) =>
+    `${probation}/evaluate-record?assign_id=${id}`,
+  editFormEvaluate: (id: string, evaluate_id: string) =>
+    `${probation}/evaluate-record?assign_id=${id}&evaluate_id=${evaluate_id}`,
+
+  formevaluateCommander: (id: string) =>
+    `${probation}/evaluate-record/commander?assign_id=${id}`,
+  formevaluateRecordCommander: (id: string) =>
+    `${probation}/evaluate-record/create/commander?assign_id=${id}`,
+  reportEvaluateRecord1: (type: string, id: string) =>
+    `${reportProbation}/14/${type}/${id}`,
+  
   kpiCapacity
 };

src/modules/01_dashboard/views/Dashboard.vue

@@ -106,14 +106,14 @@ const items = ref<any>([
     path: "/scholarship",
     active: false,
   },
-  {
+  // {
-    icon: "mdi-school",
+  //   icon: "mdi-school",
-    title: "ทดลองงาน",
+  //   title: "ทดลองงาน",
-    sub: "รายการงานที่ได้รับมอบหมาย",
+  //   sub: "รายการงานที่ได้รับมอบหมาย",
-    color: "teal-2",
+  //   color: "teal-2",
-    path: "/probation",
+  //   path: "/probation",
-    active: false,
+  //   active: false,
-  },
+  // },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);

src/modules/11_probation/component/02_RecordCareker.vue

@@ -1,14 +1,64 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
+import { ref, onMounted, defineAsyncComponent } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+const ResultPage = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/01_result.vue")
+);
+const evaluate = ref<any>([]);
+const store = useProbationStore();
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const fullname = ref<string>("");
+const dataArrayNumber = ref<number>();
+/** get ข้อมูล มอบหมาย
+ * @param id person id
+ */
+async function fecthAssign(id: string) {
+  showLoader();
+  await http
+    .get(config.API.formevaluate(id))
+    .then(async (res: any) => {
+      await store.fecthdataAssign(res.data.data);
+      evaluate.value = res.data.data.evaluate;
+      fullname.value = res.data.data.experimentee
+        ? res.data.data.experimentee.name
+        : "";
+      dataArrayNumber.value = 1;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function addData() {
+  router.push(`/probation/detail/addresult/${profileId.value}/${id.value}`);
+}
+
+onMounted(async () => {
+  await fecthAssign(id.value);
+});
 </script>
 <template>
-    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle text-white col-12 row items-center">
       <q-btn
         icon="mdi-arrow-left"
@@ -23,5 +73,32 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบบันทึกผล (ผู้ดูแล)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบบันทึกผล"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <ResultPage
+          :fullname="fullname"
+          v-model:dataArrayNumber="dataArrayNumber"
+          :fecthAssign="fecthAssign"
+          :data="evaluate.find((x: any) => x.no === dataArrayNumber)"
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>

src/modules/11_probation/component/03_RecordCommander.vue

@@ -1,11 +1,65 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
+import { ref,defineAsyncComponent,onMounted } from "vue";
-import { useRouter } from "vue-router";
 
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
+const Evaluacommander = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/02_evaluacommander.vue")
+);
 const router = useRouter();
+const route = useRoute();
+
+const dataArrayNumber = ref<number>();
+const fullname = ref<string>("");
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const store = useProbationStore();
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+
+
+function addData() {
+  router.push(`/probation/detail/addevaluacommander/${profileId.value}/${id.value}`);
+}
+
+/**
+ * get data
+ * @param id person id 
+ */
+ async function fecthAssign(id: string){
+  showLoader();
+  await http
+    .get(config.API.formevaluateCommander(id))
+    .then(async (res: any) => {
+      await store.fecthdataAssign(res.data.data);
+      fullname.value = res.data.data.experimentee
+        ? res.data.data.experimentee.name
+        : "";
+      dataArrayNumber.value = 1;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await fecthAssign(id.value);
+});
+
 </script>
 <template>
     <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
@@ -23,5 +77,29 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบบันทึกผล (ผู้บังคับบัญชา)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบบันทึกผล"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <Evaluacommander
+
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>

src/modules/11_probation/component/04_EvaluateCommander.vue

@@ -1,11 +1,28 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
+import { ref,defineAsyncComponent } from "vue";
-import { useRouter } from "vue-router";
+
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+import { useRoute, useRouter } from "vue-router";
+
+const Evalua = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/03_evalua.vue")
+);
 
 const router = useRouter();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+const store = useProbationStore();
+
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+
+function addData() {
+  router.push(`/probation/detail/addevalua/${profileId.value}/${id.value}`);
+}
+
 </script>
 <template>
     <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
@@ -23,5 +40,29 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบประเมิน"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <Evalua
+
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>

src/modules/11_probation/component/05_EvaluateChairman.vue

@@ -1,11 +1,26 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
+import { ref,defineAsyncComponent } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+const Evaluascore = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/04_evaluascore.vue")
+);
 
 const router = useRouter();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const store = useProbationStore();
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+
+function addData() {
+  router.push(`/probation/detail/addevaluascore/${profileId.value}/${id.value}`);
+}
 </script>
 <template>
     <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
@@ -23,5 +38,28 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบประเมินผล (คณะกรรมการ)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบประเมิน"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <Evaluascore
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>

src/modules/11_probation/component/08_SurveyComment.vue

@@ -225,7 +225,9 @@ onMounted(() => {
         <div class="col-12">
           <q-separator size="3px" color="grey-2" />
         </div>
-        <Criterion />
+
+          <Criterion />
+
         <div class="col-12" align="right">
           <q-btn label="บันทึก" color="secondary" type="submit" v-if="!status"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn

src/modules/11_probation/component/Criterion.vue

@@ -1,56 +1,335 @@
 <template>
-    <div class="col-12 row q-pb-sm">
+  <div class="col-12 row q-pb-sm">
-        <div class="col-12 text-top0 items-center q-pa-md">
+    <div class="col-12 text-top0 items-center q-pa-md">
-        เกณฑ์การประเมินความคาดหวัง
+      เกณฑ์การประเมินความคาดหวัง
-        </div>
-        <div class="q-gutter-sm row">
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
-            </div>
-        </div>
     </div>
+    <div v-if="$q.screen.gt.xs" class="q-gutter-sm row">
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
+      </div>
+    </div>
+    <div v-else class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+                  aria-hidden="true"
+                  role="presentation"
+                  >grade</i
+                ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>ต่ำกว่าความคาดหวังมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 1</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 2</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>เป็นไปตามความคาดหวัง</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 3</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>สูงว่าความคาดหวังค่อนข้างมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 4</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>สูงกว่าความคาดหวังมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 5</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 .text-top0 {
@@ -58,4 +337,4 @@
   padding-bottom: 8px;
   color: rgb(70, 68, 68);
 }
-</style>
+</style>

src/modules/11_probation/component/Header.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const tabHead = ref<string>("save1");
+
+/** รับค่ามาจากหน้าหลัก */
+const props = defineProps({
+  FileDownload: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
+  loop: {
+    type: Number,
+  },
+  addData: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
+  changeTab: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
+});
+
+/** เรียกใช้ฟังชั่นจากหน้าหลัก */
+function downloadFile(type: string){
+  props.FileDownload(type);
+};
+
+watch(tabHead, () => {
+  props.changeTab(tabHead.value);
+});
+
+/** ไปยัง step ต่อไป */
+function nextPage(){
+  if (props.loop !== undefined) {
+    if (props.loop < 3) {
+      props.addData();
+    }
+  }
+};
+</script>
+
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tabHead"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab v-for="(i, j) in loop" :name="`save${i}`" :key="j">
+            <div class="row col-12 items-center">
+              <div class="q-mr-sm">ครั้งที่{{ i }}</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                icon="mdi-download"
+                :disable="tabHead !== 'save' + i"
+                :color="tabHead !== 'save' + i ? 'grey' : 'add'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="downloadFile('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="downloadFile('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>
+          </q-tab>
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
+            <q-tooltip> เพิ่ม </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+</template>

src/modules/11_probation/component/addPage/03_addevalua.vue

@@ -0,0 +1,3 @@
+<template>
+    03
+</template>

src/modules/11_probation/component/addPage/04_addevaluascore.vue

@@ -0,0 +1,3 @@
+<template>
+    04
+</template>

src/modules/11_probation/component/editPage/02_evaluacommander.vue

@@ -0,0 +1,3 @@
+<template>
+    02
+</template>

src/modules/11_probation/component/editPage/03_evalua.vue

@@ -0,0 +1,3 @@
+<template>
+    03
+</template>

src/modules/11_probation/component/editPage/04_evaluascore.vue

@@ -0,0 +1,3 @@
+<template>
+    04
+</template>

src/modules/11_probation/pages/detailPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref,onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useProbationStore } from "@/modules/11_probation/store/probation";
 
@@ -12,6 +12,7 @@ import EvaluateResult from "@/modules/11_probation/component/06_EvaluateResult.v
 import EvaluateReport from "@/modules/11_probation/component/07_EvaluateReport.vue";
 import SurveyComment from "@/modules/11_probation/component/08_SurveyComment.vue";
 
+
 const drawer = ref<boolean>(true);
 const activeTab = ref<string>("tab1");
 const store = useProbationStore();
@@ -34,6 +35,18 @@ function onMobile(type: string) {
   router.push(`/probation/${type}/${profileId.value}/${id.value}`);
 }
 
+/** ปุ่มกลับ */
+function clickBack(){
+  router.push(`/probation`);
+  store.mainTab = "tab1";
+};
+
+/** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
+onMounted(() => {
+  if (store.mainTab) {
+    activeTab.value = store.mainTab;
+  } else activeTab.value = "tab1";
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -46,7 +59,7 @@ function onMobile(type: string) {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="clickBack()"
       />
       <div>การทดลองปฏิบัติหน้าที่ราชการ</div>
     </div>
@@ -192,7 +205,7 @@ function onMobile(type: string) {
             <q-tab-panel name="tab1">
               <Assign />
             </q-tab-panel>
-            <q-tab-panel name="tab2">
+            <q-tab-panel name="tab2" class="q-pa-none">
               <RecordCareker />
             </q-tab-panel>
             <q-tab-panel name="tab3">
@@ -291,4 +304,6 @@ function onMobile(type: string) {
 .borderRadius{
   border-radius: 20px!important;
 }
+
+
 </style>

src/modules/11_probation/router.ts

@@ -12,6 +12,12 @@ const probationEvaluateChairman = () => import('@/modules/11_probation/component
 const probationEvaluateResult = () => import('@/modules/11_probation/component/06_EvaluateResult.vue')
 const probationEvaluateReport = () => import('@/modules/11_probation/component/07_EvaluateReport.vue')
 const probationSurveyComment = () => import('@/modules/11_probation/component/08_SurveyComment.vue')
+
+const probationAddresult = () => import('@/modules/11_probation/component/addPage/01_addresult.vue')
+const probationAddevaluacommander = () => import('@/modules/11_probation/component/addPage/02_addevaluacommander.vue')
+const probationAddevalua = () => import('@/modules/11_probation/component/addPage/03_addevalua.vue')
+const probationAddevaluascore = () => import('@/modules/11_probation/component/addPage/04_addevaluascore.vue')
+
 export default [
   {
     path: "/probation",
@@ -113,5 +119,42 @@ export default [
       Key: [11],
     },
   },
+/////////////////////////////////////////////////
 
+{
+  path: "/probation/detail/addresult/:profileId/:id",
+  name: "probationAddresult",
+  component: probationAddresult,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
+{
+  path: "/probation/detail/addevaluacommander/:profileId/:id",
+  name: "probationAddevaluacommander",
+  component: probationAddevaluacommander,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
+{
+  path: "/probation/detail/addevalua/:profileId/:id",
+  name: "probationAddevalua",
+  component: probationAddevalua,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
+{
+  path: "/probation/detail/addevaluascore/:profileId/:id",
+  name: "probationAddevaluascore",
+  component: probationAddevaluascore,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
 ];

src/modules/11_probation/store/probation.ts

@@ -1,20 +1,103 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+export const useProbationStore = defineStore("probationStore", () => {
+  const profileId = ref<string>("");
+  const mainTab = ref<string>("");
 
-export const useProbationStore = defineStore(
+  const activeTab = ref<string>("tab1");
-  "probationStore",
+  const assign = ref<any>([]);
-  () => {
+  const evaluate = ref<any>([]);
-    const profileId = ref<string>('')
+  const tabs = ref<any>([]);
-    const mainTab = ref<string>('')
-    const ratingColors = ref<string[]>([
-        "light-blue-3",
-        "light-blue-6",
-        "blue",
-        "blue-9",
-        "blue-10",
-      ]);
 
-    return { mainTab,ratingColors,profileId };
+  const assignOutput = ref<any>([]);
+  const director = ref<any>([]);
+  const person = ref<any>([]);
+
+  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: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึดหลักจรรยาบรรณวิชาชีพ",
+    },
+  ];
+  const ratingColors = ref<string[]>([
+    "light-blue-3",
+    "light-blue-6",
+    "blue",
+    "blue-9",
+    "blue-10",
+  ]);
+
+  async function fecthdataAssign(data: any) {
+    assign.value = await data.assign;
+    evaluate.value = await data.evaluate;
+    tabs.value = await data.evaluate;
   }
-);
+
+  function fecthAssignoutput(data: any) {
+    assignOutput.value = data.assign_output;
+    director.value = data.director;
+    person.value = data.person;
+  }
+
+  return {
+    mainTab,
+    ratingColors,
+    profileId,
+    fecthdataAssign,
+    tabs,
+    activeTab,
+    behavior_no1,
+    behavior_no2,
+    behavior_no3,
+    fecthAssignoutput,
+    assignOutput,
+    assign,
+    director,
+    person,
+    evaluate,
+  };
+});