API ประเมิน step 1-4

src/modules/06_evaluate/components/viewstep/viewStep1.vue

@@ -1,15 +1,87 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
 
+const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const {
   columnsLicense,
   columnPeriodhistory,
   columnTrainingHistory,
   columnProjectsProposed,
 } = store;
+
+const emit = defineEmits(["update:formDeital"]);
+
+const formDetail = reactive({
+  UserId: "",
+  CitizenId: "",
+  Prefix: "",
+  FullName: "",
+  Position: "",
+  Oc: "",
+  Salary: "",
+  PositionLevel: "",
+  PosNo: "",
+  BirthDate: "",
+  GovAge: "",
+  Educations: [],
+  Certificates: [],
+  Salaries: [],
+  Trainings: [],
+  Assessments: [],
+  // Type: "",
+  // Step: "",
+});
+
+async function fetchDetail() {
+  showLoader();
+  await http
+    .get(config.API.evaluationDetail())
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.UserId = data.id;
+      formDetail.CitizenId = data.citizenId;
+      formDetail.Prefix = data.prefix;
+      formDetail.FullName = `${data.firstName}  ${data.lastName}`;
+      formDetail.Position = data.position;
+      formDetail.Oc = data.oc;
+      formDetail.Salary = data.salary;
+      formDetail.PositionLevel = data.positionLevel;
+      formDetail.PosNo = data.posNo;
+      formDetail.BirthDate = data.birthDate && date2Thai(data.birthDate);
+      formDetail.GovAge = data.govAge;
+      formDetail.Educations = data.educations;
+      formDetail.Certificates = data.certificates;
+      formDetail.Salaries = data.salaries;
+      formDetail.Trainings = data.trainings;
+      formDetail.Assessments = data.assessments;
+      // fromDetail.Type = data.
+      // fromDetail.Step = data.
+
+      emit("update:formDeital", data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  fetchDetail();
+});
 </script>
 
 <template>
@@ -27,7 +99,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="นาย"
+                :model-value="formDetail.Prefix"
                 label="คำนำหน้าชื่อ"
               ></q-input>
             </div>
@@ -35,14 +107,14 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ธนพนธ์ แสงจันทร์"
+                :model-value="formDetail.FullName"
                 label="ชื่อ - นามสกุล"
               />
             </div>
             <div class="col-xs-6 col-sm-4 col-md-3">
               <q-input
                 borderless
-                model-value="19/03/44"
+                :model-value="formDetail.BirthDate"
                 readonly
                 label="วันเดือนปีเกิด"
               >
@@ -55,7 +127,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ไม่มี"
+                :model-value="formDetail.Position"
                 label="ตำแหน่ง"
               />
             </div>
@@ -63,7 +135,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="กย.11"
+                :model-value="formDetail.PosNo"
                 label="ตำแหน่งเลขที่"
               />
             </div>
@@ -71,7 +143,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="หน่วยใหม่กับหน่วยเก่า"
+                :model-value="formDetail.Oc"
                 label="สังกัด"
               />
             </div>
@@ -79,7 +151,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="1,0000"
+                :model-value="formDetail.Salary"
                 label="เงินเดือน"
               />
             </div>
@@ -88,7 +160,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ระดับปัจจุบัน"
+                :model-value="formDetail.PositionLevel"
                 label="ระดับปัจจุบัน"
               />
             </div>
@@ -97,7 +169,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ระดับที่ประเมิน"
+                :model-value="formDetail.PositionLevel"
                 label="ระดับที่ประเมิน"
               />
             </div>
@@ -106,7 +178,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="1000 ปี"
+                :model-value="formDetail.GovAge"
                 label="อายุราชการ"
               />
             </div>