Merge branch 'develop' into dev-tee

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/PersonalList/Table.vue

@@ -256,7 +256,7 @@ const getTable = async () => {
         (e: any) =>
           e.draft == "รอส่งตัว" &&
           e.positionNumber !== null &&
-          e.statusName == " เตรียมบรรจุ"
+          e.statusName == "เตรียมบรรจุ"
       );
       console.log(rowsFilter.value);
     })

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>
@@ -266,4 +505,4 @@ const postData = async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
+</style>

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>
-</template>

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

@@ -1,31 +1,152 @@
 <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(
-</script>  
+      "@/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>
-</template>
+</template>

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,15 +2,21 @@
 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(
-</script>  
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
+    )
+);
+</script>
 
 <template>
   <Header :change-tab="changeTab" />
@@ -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>
+</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

@@ -41,10 +41,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 [
   {
@@ -107,6 +108,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",

src/modules/10_order/components/Main.vue

@@ -125,7 +125,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success } =
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogMessage } =
   mixin;
 const DataStore = useOrderPlacementDataStore();
 
@@ -314,20 +314,17 @@ const redirectToPage = (id?: string, status?: string) => {
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
+  dialogMessage(
-    title: "ยืนยันการลบข้อมูล",
+    $q,
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "ยืนยันการลบข้อมูล",
-    cancel: {
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-      flat: true,
+    "mdi-delete",
-      color: "negative",
+    "ตกลง",
-    },
+    "red",
-    persistent: true,
+    () => deleteData(id),
-  })
+    undefined
-    .onOk(async () => {
+  );
-      await deleteData(id);
+
-    })
-    .onCancel(() => { })
-    .onDismiss(() => { });
 };
 
 const deleteData = async (id: string) => {

src/modules/10_order/components/step/step01.vue

@@ -3,24 +3,10 @@
     <q-form ref="myForm" class="q-pa-md">
       <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
         <div class="col-xs-12 col-md-6">
-          <selector
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
-            :class="getClass(true)"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
-            outlined
+            :label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            dense
+            :options="typeOrderOption" option-value="id" use-input input-debounce="0" />
-            lazy-rules
-            v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-            hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="typeOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
           ) " -->
@@ -29,73 +15,36 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
-            :class="getClass(true)"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
-            outlined
+            @update:modelValue="clickEditRow" hide-bottom-space />
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
         </div>
 
         <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
           <div class="col-6">
-            <q-input
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
-              :class="getClass(true)"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
-              outlined
+              hide-bottom-space type="number" />
-              dense
-              lazy-rules
-              v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
-              :label="`${'คำสั่ง'}`"
-              @update:modelValue="clickEditRow"
-              hide-bottom-space
-              type="number"
-            />
           </div>
-          <label class="col-1 flex justify-center items-center text-bold"
+          <label class="col-1 flex justify-center items-center text-bold">/</label>
-            >/</label
-          >
           <div class="col-5">
-            <datepicker
+            <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
-              v-model="dateYear"
+              @update:modelValue="clickEditRow">
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:modelValue="clickEditRow"
-            >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
+                <q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :model-value="dateYear + 543"
+                  :label="`${'พ.ศ.'}`" dense outlined>
-                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`"
-                  dense
-                  outlined
-                >
                 </q-input>
               </template>
             </datepicker>
           </div>
         </div>
         <div class="col-xs-5 col-md-3">
-          <datepicker
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
-            menu-class-name="modalfix"
+            :enableTimePicker="false" week-start="0">
-            v-model="dateCommand"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -103,24 +52,12 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
+              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
-                outlined
+                " :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
-                dense
+    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                class="full-width datepicker"
+  ]">
-                :model-value="
-                  dateCommand != null ? date2Thai(dateCommand) : null
-                "
-                :label="`${'วันที่มีผลออกคำสั่ง'}`"
-                :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
                 <template v-slot:prepend>
-                  <q-icon
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -129,24 +66,10 @@
         </div>
 
         <div class="col-xs-12 col-md-6">
-          <selector
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
-            :class="getClass(true)"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
-            outlined
+            @update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
-            dense
+            option-value="id" use-input input-debounce="0" />
-            lazy-rules
-            v-model="byOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
-            hide-bottom-space
-            :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="byOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
           ) " -->
@@ -154,55 +77,25 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
-            :class="getClass(true)"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
-            outlined
+            @update:modelValue="clickEditRow" hide-bottom-space />
-            dense
-            lazy-rules
-            v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
         </div>
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
-            :class="getClass(true)"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            outlined
+            @update:modelValue="clickEditRow" hide-bottom-space />
-            dense
-            lazy-rules
-            v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
         </div>
         <div class="col-12">
           <q-separator />
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
-            :class="getClass(true)"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
-            outlined
+            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
-            dense
+            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
-            lazy-rules
-            v-model="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="examRoundName"
-            :options="examRoundOption"
-            option-value="examRoundValue"
-            use-input
-            input-debounce="0"
-          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -216,39 +109,18 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
-            :class="getClass(true)"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
-            outlined
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
-            dense
+            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
-            lazy-rules
-            v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="registerOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker
+          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
-            menu-class-name="modalfix"
+            :enableTimePicker="false" week-start="0">
-            v-model="dateRegister"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -256,25 +128,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
+              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
-                outlined
+                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
-                dense
+    (val) =>
-                class="full-width datepicker"
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                :model-value="
+  ]">
-                  dateRegister != null ? date2Thai(dateRegister) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                ]"
-              >
                 <template v-slot:prepend>
-                  <q-icon
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -282,38 +142,18 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space
+            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
-            @update:modelValue="clickEditRow"
+            input-debounce="0" />
-            emit-value
-            map-options
-            option-label="name"
-            :options="announceOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker
+          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
-            menu-class-name="modalfix"
+            :enableTimePicker="false" week-start="0">
-            v-model="dateAnnounce"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -321,25 +161,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
+              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                outlined
+                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
-                dense
+    (val) =>
-                class="full-width datepicker"
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                :model-value="
+  ]">
-                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                ]"
-              >
                 <template v-slot:prepend>
-                  <q-icon
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -376,7 +204,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, success, dialogMessage } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 
@@ -570,7 +398,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -591,23 +419,23 @@ const submit = async () => {
   };
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      $q.dialog({
+      dialogMessage(
-        title: "ยืนยันการบันทึกข้อมูล",
+        $q,
-        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        "ยืนยันการบันทึกข้อมูล",
-        cancel: {
+        "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-          flat: true,
+        "info",
-          color: "negative",
+        "ตกลง",
+        "public",
+        () => {
+          if (!orderId) {
+            createListOrder(formdata);
+          } else {
+            let orderIdString = orderId.toString();
+            updateOrder(formdata, orderIdString);
+          }
         },
-        persistent: true,
+        undefined
-      }).onOk(async () => {
+      );
-        showLoader();
-        if (!orderId) {
-          createListOrder(formdata);
-        } else {
-          let orderIdString = orderId.toString();
-          updateOrder(formdata, orderIdString);
-        }
-      });
     }
   });
 };

src/modules/10_order/components/step/step02.vue

@@ -9,51 +9,20 @@ div
         <q-space />
         <div class="items-center" style="display: flex">
           <!-- ค้นหาข้อความใน table -->
-          <q-input
+          <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-            standout
+            style="max-width: 200px" class="q-ml-sm">
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
             <template v-slot:append>
               <q-icon v-if="filter == ''" name="search" />
-              <q-icon
+              <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
           <!-- แสดงคอลัมน์ใน table -->
-          <q-select
+          <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-            v-model="visibleColumns"
+            :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-            :display-value="$q.lang.table.columns"
+            class="gt-xs q-ml-sm" />
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
         </div>
       </div>
-      <d-table
+      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -67,51 +36,23 @@ div
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectModal(props.row)">{{ col.name ==
-              v-for="col in props.cols"
+              "no" ? props.rowIndex + 1 : col.value }}</q-td>
-              :key="col.name"
-              :props="props"
-              @click="selectModal(props.row)"
-              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-            >
             <q-td auto-width>
-              <q-btn
+              <q-btn dense size="12px" flat round :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                dense
+                :disable="props.rowIndex + 1 == 1" @click="upDown(props)" icon="mdi-arrow-up-bold">
-                size="12px"
-                flat
-                round
-                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                :disable="props.rowIndex + 1 == 1"
-                @click="upDown(props)"
-                icon="mdi-arrow-up-bold"
-              >
                 <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
+              <q-btn dense size="12px" flat round :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                dense
+                :disable="rows.length == props.rowIndex + 1" @click="upDown(props, false)" icon="mdi-arrow-down-bold">
-                size="12px"
-                flat
-                round
-                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                :disable="rows.length == props.rowIndex + 1"
-                @click="upDown(props, false)"
-                icon="mdi-arrow-down-bold"
-              >
                 <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
+              <q-btn dense size="12px" flat round color="red" @click="dialogDeleteData(props.row.personalId)"
-                dense
+                icon="mdi-delete">
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="dialogDeleteData(props.row.personalId)"
-                icon="mdi-delete"
-              >
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
@@ -121,24 +62,9 @@ div
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
+      <q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md" label="กรอกรายละเอียด">
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="กรอกรายละเอียด"
-      >
       </q-btn>
-      <q-btn
+      <q-btn dense unelevated label="บันทึก" color="public" @click="save" class="q-px-md"><!-- icon="mdi-content-save-outline"
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="save"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
@@ -157,43 +83,22 @@ div
             <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <q-input outlined dense lazy-rules v-model="modalData.salaryAmount"
-                    outlined
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :label="`${'เงินเดือน'}`" type="number"
-                    dense
+                    hide-bottom-space />
-                    lazy-rules
-                    v-model="modalData.salaryAmount"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    :label="`${'เงินเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <q-input outlined dense lazy-rules v-model="modalData.positionSalaryAmount"
-                    outlined
+                    :label="`${'เงินประจำตำแหน่ง'}`" type="number" hide-bottom-space />
-                    dense
-                    lazy-rules
-                    v-model="modalData.positionSalaryAmount"
-                    :label="`${'เงินประจำตำแหน่ง'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                     ]" -->
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <q-input outlined dense lazy-rules v-model="modalData.mouthSalaryAmount"
-                    outlined
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`" type="number" hide-bottom-space />
-                    dense
-                    lazy-rules
-                    v-model="modalData.mouthSalaryAmount"
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                     ]" -->
@@ -204,14 +109,7 @@ div
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModal" class="q-px-md"><!-- icon="mdi-content-save-outline"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModal"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -225,24 +123,12 @@ div
         <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
-          <d-table
+          <d-table :rows="rows2" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name"
-            :rows="rows2"
+            selection="multiple" v-model:selected="selected">
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-            selection="multiple"
-            v-model:selected="selected"
-          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width>
-                  <q-checkbox
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
                 </q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
@@ -252,33 +138,17 @@ div
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td>
-                  <q-checkbox
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
                 </q-td>
-                <q-td
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.name == "no" ? props.rowIndex + 1 :
-                  v-for="col in props.cols"
+                  col.value }}</q-td>
-                  :key="col.name"
-                  :props="props"
-                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-                >
               </q-tr>
             </template>
           </d-table>
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModalAdd" class="q-px-md"><!-- icon="mdi-content-save-outline"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModalAdd"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -372,7 +242,6 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const selected = ref<ResponseData[]>([]);
-const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -382,8 +251,8 @@ const conditionData = async () => {
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
-    : null;
+      : null;
   if (id !== null) {
     await getData(id);
   }
@@ -441,7 +310,7 @@ const dialogDeleteData = async (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),
@@ -573,36 +442,44 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  $q.dialog({
+  dialogMessage(
-    title: "ยืนยันการบันทึกข้อมูล",
+    $q,
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    "ยืนยันการบันทึกข้อมูล",
-    cancel: {
+    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      flat: true,
+    "info",
-      color: "negative",
+    "ตกลง",
+    "public",
+    async () => {
+      await http
+        .put(config.API.salaryOrder(personalId.value), modalData.value)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await conditionData();
+          modal.value = false;
+        });
     },
-    persistent: true,
+    undefined
-  }).onOk(async () => {
+  );
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-      });
-  });
 };
 
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    await fetchaddlist(orderId.value);
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+        ? localStorage.getItem("orderId")
+        : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
   } else await conditionData();
 };
 const fetchaddlist = async (id: string) => {
@@ -637,37 +514,46 @@ const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
       if (result && selected.value.length !== 0) {
-        $q.dialog({
+        dialogMessage(
-          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          $q,
-          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          cancel: {
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-            flat: true,
+          "info",
-            color: "negative",
+          "ตกลง",
+          "public",
+          () => {
+            let data = [];
+            data.push(...selected.value.map((e: any) => e.refRecordId));
+            // console.log(data);
+            addlist(data);
           },
-          persistent: true,
+          undefined
-        }).onOk(async () => {
+        );
-          let data = [];
+
-          data.push(...selected.value.map((e: any) => e.refRecordId));
-          // console.log(data);
-          addlist(data);
-        });
       }
     });
   }
 };
 const addlist = async (data: Object) => {
-  await http
+  const id = route.params.orderid
-    .post(config.API.personsOrder(orderId.value), data)
+    ? route.params.orderid.toString()
-    .then(() => {
+    : localStorage.getItem("orderId")
-      success($q, "บันทึกสำเร็จ");
+      ? localStorage.getItem("orderId")
-    })
+      : null;
-    .catch((e: any) => {
+  if (id !== null) {
-      console.log(e);
+    await http
-      messageError($q, e);
+      .post(config.API.personsOrder(id), data)
-    })
+      .then(() => {
-    .finally(() => {
+        success($q, "บันทึกสำเร็จ");
-      modalAddChange();
+      })
-    });
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
 };
 
 const click = (e: any) => {
@@ -677,18 +563,20 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    $q.dialog({
+    dialogMessage(
-      title: "ยืนยันการบันทึกข้อมูล",
+      $q,
-      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+      "ยืนยันการบันทึกข้อมูล",
-      cancel: {
+      "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-        flat: true,
+      "info",
-        color: "negative",
+      "ตกลง",
+      "public",
+      () => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        next();
       },
-      persistent: true,
+      undefined
-    }).onOk(async () => {
+    );
-      success($q, "บันทึกข้อมูลสำเร็จ");
+
-      next();
-    });
   } else {
     dialogMessage(
       $q,
@@ -704,8 +592,6 @@ const save = () => {
   }
 };
 
-const selectData = (row: any) => {};
-
 const refresh = async () => {
   // await conditionData();
   modalAddChange();
@@ -725,4 +611,4 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss"></style>

src/modules/10_order/components/step/step03.vue

@@ -632,7 +632,7 @@ const clickDelete = (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),

src/modules/10_order/components/step/step04.vue

@@ -6,8 +6,8 @@
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download"
+              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
-                :disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
+                :color="tab !== 'main' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -25,8 +25,8 @@
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn v-show="TailerPDF == ''" size="12px" flat dense
+              <q-btn v-show="TailerPDF == ''" size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'"
-                :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
+                icon="mdi-download" :disable="tab !== 'second'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -252,7 +252,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogMessage } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -383,24 +383,23 @@ const save = () => {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
         // yay, models are correct
-        $q.dialog({
+        dialogMessage(
-          title: "ยืนยันการบันทึกข้อมูล",
+          $q,
-          message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+          "ยืนยันการบันทึกข้อมูล",
-          cancel: {
+          "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-            flat: true,
+          "info",
-            color: "negative",
+          "ตกลง",
-          },
+          "public",
-          persistent: true,
+          async () => {
-        })
-          .onOk(async () => {
             await putOrderData();
             await postfileOrder();
             await postfileTailer();
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
-          })
+          },
-          .onCancel(() => { })
+          undefined
-          .onDismiss(() => { });
+        );
+
       }
     });
   }
@@ -432,16 +431,14 @@ const postfileTailer = async () => {
   await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
-  $q.dialog({
+  dialogMessage(
-    title: "ยืนยันการออกคำสั่ง",
+    $q,
-    message: "ต้องการยืนยันการออกคำสั่งข้อมูลนี้ใช่หรือไม่?",
+    "ยืนยันการออกคำสั่ง",
-    cancel: {
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
-      flat: true,
+    "info",
-      color: "negative",
+    "ตกลง",
-    },
+    "public",
-    persistent: true,
+    async () => {
-  })
-    .onOk(async () => {
       await http
         .put(config.API.executeOrder(id))
         .then((res) => {
@@ -450,9 +447,9 @@ const clickExecute = async (id: string) => {
         .catch((e) => {
           messageError($q, e);
         });
-    })
+    },
-    .onCancel(() => { })
+    undefined
-    .onDismiss(() => { });
+  );
 };
 
 const validateForm = () => {

src/modules/10_order/router.ts

@@ -1,12 +1,6 @@
-/**
+// const AddPage = () => import("@/modules/10_order/components/Add.vue");
- * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
- */
-
-const AddPage = () =>
-  import("@/modules/10_order/components/Add.vue");
 const MainOrder = () => import("@/modules/10_order/components/Main.vue");
-const DetailPage = () =>
+const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
-  import("@/modules/10_order/components/Detail.vue");
 
 export default [
   {
@@ -16,16 +10,17 @@ export default [
     meta: {
       Auth: true,
       Key: [10],
-      Role: "placement",
+      Role: "order",
     },
   },
   {
     path: "/order/add",
     name: "OrderAdd",
-    component: AddPage,
+    component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
   {
@@ -34,7 +29,8 @@ export default [
     component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
 ];