Merge branch 'nice_dev' into develop

# Conflicts:
#	src/api/05_placement/api.probation.ts

src/api/05_placement/api.probation.ts

@@ -3,6 +3,8 @@ const dataOptions = `${env.API_PROBATION_URI}/data-options`;
 const personal = `${env.API_PROBATION_URI}/personal`;
 const calculate = `${env.API_PROBATION_URI}/calculate`;
 const finish = `${env.API_PROBATION_URI}/assign`;
+const evaluate = `${env.API_PROBATION_URI}`;
+
 
 export default {
   competencyOptions: (personalId: string) =>
@@ -25,6 +27,36 @@ export default {
   personalAdd: () => `${personal}/add`,
   probationGetAssignList: (personalId:string) => 
   `${finish}/probation-assign-list?personal_id=${personalId}`,
-  probationsGetAssign: (assignId:string) =>`${finish}/probation-assign?assign_id=${assignId}`
+  probationsGetAssign: (assignId:string) =>`${finish}/probation-assign?assign_id=${assignId}`,
+  // probationGetAssignList: (personalId: string) =>
+  //   `${finish}/probation-assign-list?personal_id=${personalId}`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
+
+  // บันทึกผล
+  formevaluate: (id: string) => `${evaluate}/evaluate-record?assign_id=${id}`,
+  formevaluateround: (id: string, no: string) => `${evaluate}/evaluate-record?assign_id=${id}&evaluate_no=${no}`,
+  formevaluateRecord: (id: string) => `${evaluate}/evaluate-record/create?assign_id=${id}`,
+  createformevaluate: (id: string) => `${evaluate}/evaluate-record?id=${id}`,
+
+  //แบบประเมินผล (ผู้บังคับบัญชา)
+  evaluateCreate: (id: string) => `${evaluate}/evaluate/create?assign_id=${id}`,
+  evaluatecommader: (id: string, no: string) => `${evaluate}/evaluate?assign_id=${id}&evaluate_no=${no}`,
+  createformCommader: (id: string) => `${evaluate}/evaluate?id=${id}`,
+
+  //แบบประเมินผล (คณะกรรมการ)
+  evaluateChairman: (id: string) => `${evaluate}/evaluate-chairman/create?assign_id=${id}`,
+  evaluateRoundChairman: (id: string, no: string) => `${evaluate}/evaluate-chairman?assign_id=${id}&evaluate_no=${no}`,
+  createformChairman: (id: string) => `${evaluate}/evaluate-chairman?id=${id}`,
+
+  //แบบรายงาน
+  evaluateReportcreate: (id: string) => `${evaluate}/evaluate-result/create?assign_id=${id}`,
+  evaluateReport: (id: string) => `${evaluate}/evaluate-result?assign_id=${id}`,
+  createformReport: (id: string) => `${evaluate}/evaluate-result?id=${id}`,
+
+
+
+
+
+
+
 };

src/api/index.ts

@@ -26,7 +26,8 @@ const config = ref<any>({
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
     API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
+    // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
+    API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue

@@ -1,12 +1,40 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const commander = ref<any>([]);
+const round = ref<any>();
+const status = ref<boolean>(true);
+
+const props = defineProps({
+  tab: String,
+});
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -53,14 +81,104 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
+onMounted(async () => {
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+  // console.log(round.value);
+  // console.log(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateCreate(id))
+    .then((res: any) => {
+      // console.log(res);
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      commander.value = res.data.data.commander;
+      option.value.push(commander.value);
+      Autherise.value = commander.value.name;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  // showLoader();
+  await http
+    .get(config.API.evaluatecommader(id, round))
+    .then((res: any) => {
+      // console.log(res);
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavio_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      console.log(e);
+    })
+    .finally(() => {
+      // hideLoader();
+    });
+};
 
-const mixin = useCounterMixin();
+// const dateToday = ref<Date>(new Date("10-10-2023"));
-const { date2Thai, notifyError } = mixin;
+// const dateEnd = ref<Date>(new Date("12-10-2023"));
-const dateToday = ref<Date>(new Date("10-10-2023"));
+// const period = ref<number>(1);
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
+const option = ref<any>([]);
 
 // part 1
 const knowledge_level = ref<number>(0);
@@ -80,7 +198,7 @@ const behavio_orther = ref<any>({ text: "", level: 0 });
 const behavio_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<num>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -136,6 +254,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     knowledge_level: knowledge_level.value,
     skill_level: skill_level.value,
     competency_level: competency_level.value,
@@ -155,13 +276,14 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
+    behavior_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_strength_desc: behavio_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    commander_dated: dateToISO(dateAutherise.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -174,6 +296,15 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformCommader(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -182,21 +313,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -891,9 +1029,7 @@ const putformData = () => {
     <!-- Footer -->
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row">
-        <div class="col-12 text-top2 row items-center">
+        <div class="col-12 text-top2 row items-center">ผู้บังคับบัญชา</div>
-          ผู้บังคับบัญชา
-        </div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
             class="col-xs-12 col-sm-8"
@@ -902,6 +1038,7 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -948,7 +1085,7 @@ const putformData = () => {
     <!-- <Footer /> -->
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue

@@ -1,12 +1,133 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, computed } from "vue";
+import { ref, defineAsyncComponent, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  dateToISO,
+  success,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+// const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const chairman = ref<any>([]);
+const commander = ref<any>([]);
+const mentors = ref<any>([{ name: "" }, { name: "" }]);
+
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+onMounted(() => {
+  console.log(props);
+  console.log(assignId.value);
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateChairman(id))
+    .then((res: any) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      chairman.value = res.data.data.chairman;
+      commander.value = res.data.data.commander;
+      mentors.value = res.data.data.mentors;
+      console.log(mentors.value[0].name);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateRoundChairman(id, round))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      learn_level.value = data.knowledge_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      orientation.value = data.develop_orientation_score;
+      self_learning.value = data.develop_self_learning_score;
+      training_seminar.value = data.develop_training_seminar_score;
+      other_training.value = data.develop_other_training_score;
+      orientation_percent.value = data.develop_orientation_percent;
+      self_learning_percent.value = data.develop_self_learning_percent;
+      training_seminar_percent.value = data.develop_training_seminar_percent;
+      other_training_percent.value = data.develop_other_training_percent;
+
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -54,8 +175,6 @@ const list2_3 = [
   },
 ];
 
-const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -73,14 +192,23 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 
 // part 3
-const orientation = ref<number>(null);
+const orientation = ref<number>(0);
-const self_learning = ref<number>(null);
+const self_learning = ref<number>(0);
-const training_seminar = ref<number>(null);
+const training_seminar = ref<number>(0);
-const other_training = ref<number>(null);
+const other_training = ref<number>(0);
+const orientation_percent = ref<number>(0);
+const self_learning_percent = ref<number>(0);
+const training_seminar_percent = ref<number>(0);
+const other_training_percent = ref<number>(0);
+const develop_result = ref<any>();
+const develop_result_option = ref<any>([
+  { name: "ไม่ผ่านการทดลองงาน", value: 0 },
+  { name: "ผ่านการทดลองงาน", value: 1 },
+]);
 // footer
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+// const option = ref<any>([]);
 
 // score
 const score1 = computed(() => {
@@ -98,6 +226,22 @@ const score1 = computed(() => {
   }
   return learn_level.value + apply_level.value + success_level.value;
 });
+const achievement_score_total: any = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return 20;
+  }
+  return 15;
+});
+const achievement_result: any = computed(() => {
+  if (percent_score1.value > 60) {
+    return 1;
+  }
+  return 0;
+});
 const score2 = computed(() => {
   let sum_conduct = conduct_level.value.reduce(
     (sum: number, level: number) => sum + level,
@@ -121,7 +265,22 @@ const score2 = computed(() => {
     );
   } else return sum_conduct + sum_moral + sum_discipline;
 });
-const percent_score1: number = computed(() => {
+const behavior_score_total: any = computed(() => {
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return 65;
+  } else return 60;
+});
+const behavior_result: any = computed(() => {
+  if (percent_score2.value > 60) {
+    return 1;
+  }
+  return 0;
+});
+const percent_score1: any = computed(() => {
   let num = 0;
   if (etc.value === true) {
     num = 20;
@@ -129,7 +288,7 @@ const percent_score1: number = computed(() => {
   let percent1 = (score1.value / num) * 100;
   return percent1.toFixed(2);
 });
-const percent_score2: number = computed(() => {
+const percent_score2: any = computed(() => {
   let num = 0;
   if (etc2.value === true) {
     num = 65;
@@ -149,6 +308,14 @@ const score4 = computed(() => {
     Number(other_training.value)
   );
 });
+const score5 = computed(() => {
+  return (
+    Number(orientation_percent.value) +
+    Number(self_learning_percent.value) +
+    Number(training_seminar_percent.value) +
+    Number(other_training_percent.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
@@ -185,7 +352,10 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    learn_level: learn_level.value,
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    knowledge_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
     achievement_other: achievement_other.value,
@@ -201,13 +371,27 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
+    behavior_orther: behavio_orther.value,
-    orientation: Number(orientation.value),
+    develop_orientation_score: Number(orientation.value),
-    self_learning: Number(self_learning.value),
+    develop_self_learning_score: Number(self_learning.value),
-    training_seminar: Number(training_seminar.value),
+    develop_training_seminar_score: Number(training_seminar.value),
-    other_training: Number(other_training.value),
+    develop_other_training_score: Number(other_training.value),
-    total_experiment: Number(score1.value),
+    develop_orientation_percent: Number(orientation_percent.value),
-    total_behavior: Number(score2.value),
+    develop_self_learning_percent: Number(self_learning_percent.value),
+    develop_training_seminar_percent: Number(training_seminar_percent.value),
+    develop_other_training_percent: Number(other_training_percent.value),
+    achievement_score: Number(score1.value),
+    achievement_percent: Number(percent_score1.value),
+    achievement_score_total: Number(achievement_score_total.value),
+    achievement_result: Number(achievement_result.value),
+    behavior_score: Number(score2.value),
+    behavior_percent: Number(percent_score2.value),
+    behavior_score_total: Number(behavior_score_total.value),
+    behavior_result: Number(behavior_result.value),
+    sum_score: Number(score1.value) + Number(score2.value),
+    sum_percent: Number(percent_score1.value) + Number(percent_score2.value),
+    chairman_dated: dateToISO(dateAutherise.value),
+    develop_result: develop_result.value,
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -220,6 +404,19 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformChairman(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(() => {
+          fetchEvaluate(assignId.value, round.value);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -228,21 +425,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (คณะกรรมการ)</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -829,7 +1033,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="orientation" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="orientation_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -839,7 +1043,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="self_learning" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="self_learning_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -849,7 +1053,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="training_seminar" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="training_seminar_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -861,7 +1065,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="other_training" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="other_training_percent" />
             </div>
           </div>
           <!-- <q-list dense>
@@ -969,13 +1173,36 @@ const putformData = () => {
             <div class="row q-gutter-md">
               <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
               <div class="col">{{ score4 }}</div>
-              <div class="col">ร้อยละ</div>
+              <div class="col">{{ score5 }}</div>
             </div>
           </div>
         </q-card>
       </div>
     </div>
 
+    <div class="row col-12 q-gutter-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">5</q-avatar> -->
+          สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-select
+            class="col-xs-12"
+            dense
+            v-model="develop_result"
+            outlined
+            :options="develop_result_option"
+            option-label="name"
+            option-value="value"
+            label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
+            map-options
+            emit-value
+          />
+        </div>
+      </div>
+    </div>
+
     <!-- Footer -->
     <!-- <Footer /> -->
     <div class="row col-12 q-gutter-lg no-margin">
@@ -987,10 +1214,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="commander.name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1036,10 +1263,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[0].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1085,10 +1312,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[1].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1135,17 +1362,15 @@ const putformData = () => {
 
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row">
-        <div class="col-12 text-top2 row items-center">
+        <div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
-          คณะกรรมการ
-        </div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="chairman.name"
             outlined
-            :options="option"
             label="คณะกรรมการ"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1192,7 +1417,7 @@ const putformData = () => {
 
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>

src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue

@@ -1,31 +1,104 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const myForm = ref<QForm>();
 const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
+const {
-const develop = ref<number>();
+  date2Thai,
-const result = ref<number>();
+  notifyError,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const assignId = ref<string>(route.params.form.toString());
 
-// part new
+const assign = ref<any>([]);
+const mentors = ref<any>([]);
+const commander = ref<any>([]);
+const evaluate = ref<any>([]);
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+  fecthResult(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateReportcreate(id))
+    .then((res) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      mentors.value = res.data.data.mentors;
+
+      director_id.value = res.data.data.commander.name;
+      director_id2.value = mentors.value[0].name;
+      director_id3.value = mentors.value[1].name;
+
+      commander.value.push(res.data.data.commander);
+      optionDirector.value = mentors.value;
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const date_start = ref<Date>(new Date("10-10-2023"));
 const date_finish = ref<Date>();
+const develop = ref<number>();
+const result = ref<number>();
 const reson = ref<string>("");
+const chairman_dated = ref<string>("");
+const director1_dated = ref<string>("");
+const director2_dated = ref<string>("");
+const fecthResult = async (id: string) => {
+  await http
+    .get(config.API.evaluateReport(id))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      date_start.value = data.date_start;
+      date_finish.value = data.date_finish;
+      develop.value = Number(data.develop_complete);
+      result.value = Number(data.pass_result);
+      reson.value = data.reson;
+      chairman_dated.value = data.chairman_dated;
+      director1_dated.value = data.director1_dated;
+      director2_dated.value = data.director2_dated;
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
 
-const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
+// part new
-const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+
+const options = [
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" },
+];
+const optionsResult = [
+  { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
+  { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+];
 
 const director_id = ref<any>(null);
-const director_dated = ref<any>();
+
 const director_id2 = ref<any>(null);
-const director_dated2 = ref<any>();
 const director_id3 = ref<any>(null);
-const director_dated3 = ref<any>();
+const optionDirector = ref<any>([]);
-const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
 
 const savaForm = async () => {
   await myForm.value!.validate().then((result: boolean) => {
@@ -41,40 +114,56 @@ const savaForm = async () => {
       })
         .onOk(async () => {
           postData();
-
         })
-        .onCancel(() => { })
+        .onCancel(() => {})
-        .onDismiss(() => { });
+        .onDismiss(() => {});
     }
   });
-
 };
 
 const postData = async () => {
   const data = await {
-    date_start: date_start.value,
+    start_date: date_start.value,
     date_finish: date_finish.value,
-    director_id: director_id.value,
+    develop_complete: develop.value,
-    director_dated: director_dated.value,
+    pass_result: result.value,
-    director_id2: director_id2.value,
+    reson: reson.value,
-    director_dated2: director_dated2.value,
+    chairman_dated: chairman_dated.value,
-    director_id3: director_id3.value,
+    director1_dated: director1_dated.value,
-    director_dated3: director_dated3.value,
+    director2_dated: director2_dated.value,
-  }
+  };
 
-  console.log("postData===>", data)
+  console.log("postData===>", data);
+  await http
+    .post(config.API.createformReport(assignId.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    });
 };
 </script>
 
 <template>
   <div class="row col-12 q-mr-md">
     <q-form ref="myForm">
-
+      <div class="toptitle text-dark col-12 row items-center">
+        <div>แบบรายงานการประเมินฯ</div>
+      </div>
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
+            <datepicker
-              :enableTimePicker="false" week-start="0">
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -82,12 +171,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
+                <q-input
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[
+                  outlined
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
+                  dense
-  ]">
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -95,8 +194,15 @@ const postData = async () => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
+            <datepicker
-              :enableTimePicker="false" week-start="0">
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -104,12 +210,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
+                <q-input
-                  " :label="`${'ถึงวันที่'}`" :rules="[
+                  outlined
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
+                  dense
-  ]">
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -121,24 +237,62 @@ const postData = async () => {
 
       <div class="col-12 row q-mt-xs">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
+          <q-select
-            :options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
+            :rules="[
-            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+              (val) =>
+                !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="options"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
       <div class="col-12 row q-mt-lg">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
+          <q-select
-            :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
+            :rules="[
-            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+              (val) =>
-
+                !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="optionsResult"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            outlined
+            v-model="result"
+            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
 
       <div class="col-12 row q-mt-lg">
         <div class="col-12">
-          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
+          <q-input
-            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+            hide-bottom-space
+            :readonly="edit"
+            dense
+            borderless
+            :outlined="!edit"
+            class="bg-white"
+            type="textarea"
+            v-model="reson"
+            label="เหตุผล"
+            :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
+          />
         </div>
       </div>
 
@@ -152,11 +306,26 @@ const postData = async () => {
             ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
+            <q-select
-              label="" />
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label=""
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
+              <datepicker
-                :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -164,10 +333,22 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
+                  <q-input
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -182,11 +363,26 @@ const postData = async () => {
             ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
+            <q-select
-              label="" />
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
+              <datepicker
-                :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -194,10 +390,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
+                  <q-input
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -212,11 +422,26 @@ const postData = async () => {
             ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
+            <q-select
-              label="" />
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
+              <datepicker
-                :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -224,10 +449,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
+                  <q-input
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue

@@ -1,14 +1,127 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { formatDate } from "@fullcalendar/core";
+// import { formatDate } from "@fullcalendar/core";
+
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
+const route = useRoute();
 const probationStore = useProbationDataStore();
-
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  notifyError,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+
+onMounted(async () => {
+  console.log(props.tab);
+  await fecthFormdata(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    await fecthFormRound(assignId.value, round.value);
+  }
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      // console.log(res);
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director.name;
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+};
+const fecthFormRound = async (id: string, no: string) => {
+  showLoader();
+  await http
+    .get(config.API.formevaluateround(id, no))
+    .then((res: any) => {
+      console.log(res);
+      let data = res.data.data.evaluate;
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      achievement_strength_desc.value = data.achievement_strength_desc;
+      achievement_improve_desc.value = data.achievement_improve_desc;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavior_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list1_1 = [
   { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
@@ -69,10 +182,8 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const option = ref<any>([]);
 
-const mixin = useCounterMixin();
-const { date2Thai, success, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -112,10 +223,10 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 // const etc_text2 = ref<string>("");
 // const ext_value2 = ref<number>(0);
-const behavio_strength_desc = ref<string>("");
+const behavior_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<nu>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -166,13 +277,13 @@ const savaForm = () => {
     competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
-    success_level.value === 0 ||
+    // success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
     achievement_improve_desc.value === "" ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
+    behavior_strength_desc.value === "" ||
     behavior_improve_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
@@ -200,6 +311,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -207,7 +321,7 @@ const putformData = () => {
     competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
-    success_level: success_level.value,
+    // success_level: success_level.value,
     achievement_other: achievement_other.value,
     // achievement_other_desc: etc_text.value,
     // achievement_other_level: ext_value.value,
@@ -228,13 +342,13 @@ const putformData = () => {
     // behavio_orther_desc: etc_text2.value,
     // behavio_orther_level: ext_value2.value,
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_strength_desc: behavior_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-
+    assessor_dated: dateToISO(dateAutherise.value),
     // commander_dated: dateAutherise.value,
   };
   $q.dialog({
@@ -248,29 +362,48 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      saveformdata(data);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.createformevaluate(assignId.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
 </script>
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบบันทึกผล</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -590,7 +723,7 @@ const putformData = () => {
         </q-list>
       </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+      <!-- <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
           <q-item dense tag="label" v-ripple>
             <q-item-section>
@@ -627,7 +760,7 @@ const putformData = () => {
             </q-item-section>
           </q-item>
         </q-list>
-      </q-card>
+      </q-card> -->
 
       <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
@@ -635,7 +768,7 @@ const putformData = () => {
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.8 อื่นๆ
+                1.7 อื่นๆ
                 <q-checkbox
                   class="q-ml-sm"
                   dense
@@ -965,7 +1098,7 @@ const putformData = () => {
           <q-input
             outlined
             dense
-            v-model="behavio_strength_desc"
+            v-model="behavior_strength_desc"
             class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
             lazy-rules
             type="textarea"
@@ -1129,6 +1262,8 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            option-label="name"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1174,7 +1309,7 @@ const putformData = () => {
     </div>
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>

src/modules/05_placement/components/probation/FormEvaluation/Header.vue

@@ -1,23 +1,43 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
-const tabHead = ref<string>("save1");
+import { useRoute, useRouter } from "vue-router";
 
+const router = useRouter();
+
+const tabHead = ref<string>("save1");
 const props = defineProps({
   changeTab: {
     type: Function,
     default() {
-      return 'Default function'
+      return "Default function";
-    }
+    },
-  }
+  },
-})
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props);
+});
 
 watch(tabHead, () => {
-  props.changeTab(tabHead.value)
+  console.log(props);
+
+  props.changeTab(tabHead.value);
 });
+const nextPage = () => {
+  if (props.activeTab) {
+    router.push(
+      "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
+    );
+  }
+
+  // const url =
+  //   "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
+  // window.open(url, "_blank");
+};
 </script>
 
 <template>
-      <q-header class="bg-grey-1">
+  <q-header class="bg-grey-1">
     <div class="bg-grey-1">
       <div class="col-12 row q-gutter-x-md items-center">
         <q-tabs
@@ -103,7 +123,7 @@ watch(tabHead, () => {
             </q-btn> -->
         </q-tabs>
         <div>
-          <q-btn color="blue" flat dense icon="mdi-plus">
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
             <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
@@ -111,5 +131,4 @@ watch(tabHead, () => {
       <q-separator />
     </div>
   </q-header>
-
 </template>

src/modules/05_placement/components/probation/FormEvaluation/Template1.vue

@@ -1,30 +1,151 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, watch, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, success } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+
+const evaluate = ref<any>([]);
+const tabHead = ref<string>("save1");
+const tabs = ref<any>([]);
 const tab = ref<string>("save1");
+const activeTab = ref<string>("tab2");
+
+const props = defineProps({
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props.activeTab);
+  // fecthAssign(assignId.value);
+});
+watch(props, () => {
+  console.log(props);
+});
+// const fecthAssign = async (id: string) => {
+//   showLoader();
+//   await http
+//     .get(config.API.formevaluate(id))
+//     .then((res: any) => {
+//       evaluate.value = res.data.data.evaluate;
+//       tabs.value = evaluate.value;
+
+//       console.log(tabs.value);
+//     })
+//     .catch((e: any) => {
+//       console.log(e);
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
+  console.log(tabVal);
-}
+  tab.value = tabVal;
+};
+const nextPage = () => {
+  const newTabLabel = tabs.value.length + 1;
+  tabs.value.push({ no: newTabLabel });
+};
 
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormSaveResult = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
+  () =>
-)
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
+    )
+);
 </script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <Header :change-tab="changeTab" :activeTab="activeTab" />
+  <!-- <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-xs-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="tabData in tabs"
+            :key="tabData.no"
+            :name="tabData.no"
+            :label="'ครั้งที่' + tabData.no"
+            @click="changeTab('save' + tabData.no)"
+          >
+            <q-btn
+              size="12px"
+              flat
+              dense
+              icon="mdi-download"
+              :disable="tabHead !== tabData.no"
+              :color="tabHead !== tabData.no ? 'grey' : 'add'"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <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>
+                    <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>
+          </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> -->
+  <!-- <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="tabName in tabs"
+        :key="tabName"
+        :name="'save' + tabName.no"
+      >
+        <FormSaveResult :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container> -->
 
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>

src/modules/05_placement/components/probation/FormEvaluation/Template2.vue

@@ -18,11 +18,11 @@ const FormEvaluate = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab"/>
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>

src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue

@@ -2,14 +2,20 @@
 import { ref, defineAsyncComponent } from "vue";
 const tab = ref<string>("save1");
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
+  tab.value = tabVal;
-}
+};
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormEvaluateScore = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
+  () =>
-)
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
+    )
+);
 </script>
 
 <template>
@@ -18,12 +24,12 @@ const FormEvaluateScore = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluateScore />
+        <FormEvaluateScore :tab="tab" />
       </q-tab-panel>
 
-      <!-- <q-tab-panel name="save2">
+      <q-tab-panel name="save2">
-        <FormEvaluateScore />
+        <FormEvaluateScore :tab="tab" />
-      </q-tab-panel> -->
+      </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
 </template>

src/modules/05_placement/components/probation/MainDetail.vue

@@ -112,7 +112,7 @@ const activeTab = ref<string>("tab1");
             </q-tab-panel>
 
             <q-tab-panel name="tab2">
-              <TabsTemplate1 />
+              <TabsTemplate1 :activeTab="activeTab"/>
             </q-tab-panel>
 
             <q-tab-panel name="tab3">

src/modules/05_placement/router.ts

@@ -38,10 +38,11 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-  const receiveDetail = () =>
+const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-  const ReceiveAdd = () =>
+const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
+const FormSaveResultAdd = () => import("/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue")
 
 export default [
   {
@@ -104,6 +105,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/detail/add/:id/:form",
+    name: "probationFormAdd",
+    component: FormSaveResultAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
   {
     path: "/probation/work/add",
     name: "probationWorkAdd",