ประเมินผล

src/modules/06_evaluate/components/step/step1.vue

@@ -1,5 +1,23 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError } = mixin;
+
+const props = defineProps({
+  evaluateId: {
+    type: String,
+  },
+});
+
+const emit = defineEmits(["update:spec"]);
 
 const formData = reactive<any>({
   isEducationalQft: false, // คุณวุฒิการศึกษา
@@ -10,6 +28,35 @@ const formData = reactive<any>({
   isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
   isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
 });
+async function updateValue() {
+  emit("update:spec", formData);
+}
+
+async function fetchCheckSpec(id: string) {
+  showLoader();
+  await http
+    .get(config.API.evaluationCheckspecByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.isEducationalQft = data.IsEducationalQft;
+      formData.isGovermantServiceHtr = data.IsGovermantServiceHtr;
+      formData.isOperatingExp = data.IsOperatingExp;
+      formData.isMinPeriodOfTenure = data.IsMinPeriodOfTenure;
+      formData.isHaveSpecificQft = data.IsHaveSpecificQft;
+      formData.isHaveProLicense = data.IsHaveProLicense;
+      formData.isHaveMinPeriodOrHoldPos = data.IsHaveMinPeriodOrHoldPos;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  props.evaluateId && fetchCheckSpec(props.evaluateId);
+});
 </script>
 
 <template>
@@ -20,6 +67,7 @@ const formData = reactive<any>({
           keep-color
           color="primary"
           v-model="formData.isEducationalQft"
+          @update:model-value="updateValue"
         />
       </q-item-section>
       <q-item-section>
@@ -32,6 +80,7 @@ const formData = reactive<any>({
           keep-color
           color="primary"
           v-model="formData.isGovermantServiceHtr"
+          @update:model-value="updateValue"
         />
       </q-item-section>
       <q-item-section>
@@ -44,6 +93,7 @@ const formData = reactive<any>({
           keep-color
           color="primary"
           v-model="formData.isOperatingExp"
+          @update:model-value="updateValue"
         />
       </q-item-section>
       <q-item-section>
@@ -56,6 +106,7 @@ const formData = reactive<any>({
           keep-color
           color="primary"
           v-model="formData.isMinPeriodOfTenure"
+          @update:model-value="updateValue"
         />
       </q-item-section>
       <q-item-section>
@@ -70,6 +121,7 @@ const formData = reactive<any>({
           keep-color
           color="primary"
           v-model="formData.isHaveSpecificQft"
+          @update:model-value="updateValue"
         />
       </q-item-section>
       <q-item-section>
@@ -85,6 +137,7 @@ const formData = reactive<any>({
           keep-color
           color="primary"
           v-model="formData.isHaveProLicense"
+          @update:model-value="updateValue"
         />
       </q-item-section>
       <q-item-section>
@@ -101,6 +154,7 @@ const formData = reactive<any>({
           keep-color
           color="primary"
           v-model="formData.isHaveMinPeriodOrHoldPos"
+          @update:model-value="updateValue"
         />
       </q-item-section>
       <q-item-section>