การพัฒนาตนเอง

src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
-import { ref, reactive } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
@@ -8,14 +8,25 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 
-const route = useRoute()
-const idKpi = ref<string>(route.params.id.toLocaleString())
+const props = defineProps({
+  getAll:Function
+})
+const route = useRoute();
+const idKpi = ref<string>(route.params.id.toLocaleString());
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, dialogConfirm, messageError } = mixin;
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
+
 const modal = defineModel<boolean>("modal", { required: true });
-const isEdit = defineModel<boolean>("isEdit", { required: true });
+const id = defineModel<string>("id", { required: true });
 
 const formData = reactive({
   name: "",
@@ -30,7 +41,7 @@ const formData = reactive({
 });
 function close() {
   modal.value = false;
-  isEdit.value = false;
+  id.value = "";
 
   formData.name = "";
   formData.group = [];
@@ -43,32 +54,82 @@ function close() {
   formData.achievement5 =
     "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
   formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
+  props.getAll?.()
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    const body = {
-      name: formData.name,
-      target: formData.target,
-      summary: 0,
-      achievement10: formData.achievement10,
-      achievement5: formData.achievement5,
-      achievement0: formData.achievement0,
-      isDevelopment70: formData.isDevelopment70,
-      isDevelopment20: formData.isDevelopment20,
-      isDevelopment10: formData.isDevelopment10,
-      kpiUserEvaluationId: idKpi.value,
-    };
-    http
-  });
+  if (
+    formData.isDevelopment70 == false &&
+    formData.isDevelopment20 == false &&
+    formData.isDevelopment10 == false
+  ) {
+    dialogMessageNotify($q, "กรุณาเลือกวิธีการพัฒนา อย่างน้อย 1 ตัวเลือก");
+  } else {
+    dialogConfirm($q, () => {
+      const url = id.value
+        ? config.API.kpiAchievementDevelop + `/${id.value}`
+        : config.API.kpiAchievementDevelop;
+      const body = {
+        name: formData.name,
+        target: formData.target,
+        achievement10: formData.achievement10,
+        achievement5: formData.achievement5,
+        achievement0: formData.achievement0,
+        isDevelopment70: formData.isDevelopment70,
+        isDevelopment20: formData.isDevelopment20,
+        isDevelopment10: formData.isDevelopment10,
+        kpiUserEvaluationId: idKpi.value,
+      };
+      showLoader();
+      http[id.value ? "put" : "post"](url, body)
+        .then((res) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          close();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
 }
+watch(
+  () => id.value,
+  (i) => {
+    if (i) {
+      showLoader();
+      http
+        .get(config.API.kpiAchievementDevelop + `/${id.value}`)
+        .then((res) => {
+          const data = res.data.result;
+          formData.name = data.name;
+          formData.group = data.group;
+          formData.target = data.target;
+          formData.isDevelopment70 = data.isDevelopment70;
+          formData.isDevelopment20 = data.isDevelopment20;
+          formData.isDevelopment10 = data.isDevelopment10;
+          formData.achievement10 = data.achievement10;
+          formData.achievement5 = data.achievement5;
+          formData.achievement0 = data.achievement0;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
 </script>
 <template>
   <q-dialog persistent v-model="modal">
     <q-card style="width: 80%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
-          :tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
+          :tittle="`${id ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
           :close="close"
         />
         <q-separator />
@@ -79,11 +140,17 @@ function onSubmit() {
                 v-model="formData.name"
                 outlined
                 dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา'}`,]"
+                lazy-rules
+                hide-bottom-space
                 class="inputgreen"
                 label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
               >
               </q-input>
             </div>
+            <div class="col-12">
+              <span class="text-grey-6 text-weight-medium">วิธีการพัฒนา</span>
+            </div>
             <div class="column">
               <q-checkbox
                 v-model="formData.isDevelopment70"
@@ -106,6 +173,9 @@ function onSubmit() {
                 type="textarea"
                 dense
                 class="inputgreen"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
+                lazy-rules
+                hide-bottom-space
               ></q-input>
             </div>
             <div class="col-12">
@@ -129,6 +199,9 @@ function onSubmit() {
                       outlined
                       dense
                       label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
                     ></q-input>
                   </div>
                 </div>
@@ -144,6 +217,9 @@ function onSubmit() {
                       outlined
                       dense
                       label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
                     ></q-input>
                   </div>
                 </div>
@@ -159,6 +235,9 @@ function onSubmit() {
                       outlined
                       dense
                       label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
                     ></q-input>
                   </div>
                 </div>