ดักไม่ให้สร้างประเมิน kpi กรณีเลือกรอบที่ปิดไปแล้ว

src/modules/08_KPI/views/main.vue

@@ -77,7 +77,7 @@ const roundDialgOp = ref<DataOptions[]>([]);
 const modalDialog = ref<boolean>(false);
 const yearDialog = ref<number | null>(null);
 const formRound = reactive({
-  kpiPeriodId: "",
+  kpiPeriodId: { id: "", name: "", isClosed: false },
   profileId: "",
   prefix: "",
   firstName: "",
@@ -90,6 +90,7 @@ const formQuery = reactive({
   pageSize: 10,
 });
 const totalList = ref<number>(1);
+const isRoundClose = ref<boolean>(false);
 
 function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
@@ -108,6 +109,7 @@ function fetchRoundOption(type: string) {
             : e.durationKPI === "APR"
             ? "รอบเมษายน"
             : "",
+        isClosed: !e.isActive,
       }));
       if (type === "main") {
         roundMainOp.value = list;
@@ -115,7 +117,7 @@ function fetchRoundOption(type: string) {
         fetchList();
       } else {
         roundDialgOp.value = list;
-        formRound.kpiPeriodId = "";
+        formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
       }
     })
     .catch((err) => {
@@ -162,7 +164,7 @@ function onClickAddList() {
 
 function onCloseDialog() {
   modalDialog.value = false;
-  formRound.kpiPeriodId = "";
+  formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
   yearDialog.value = null;
 }
 
@@ -170,7 +172,13 @@ function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
     http
-      .post(config.API.kpiEvaluation, formRound)
+      .post(config.API.kpiEvaluation, {
+        kpiPeriodId: formRound.kpiPeriodId.id,
+        profileId: formRound.profileId,
+        prefix: formRound.prefix,
+        firstName: formRound.firstName,
+        lastName: formRound.lastName,
+      })
       .then((res) => {
         console.log(res);
         const id = res.data.result;
@@ -205,6 +213,10 @@ function getProfile() {
     });
 }
 
+function checkClosed() {
+  isRoundClose.value = formRound.kpiPeriodId.isClosed;
+}
+
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -399,7 +411,7 @@ onMounted(() => {
   </div>
 
   <q-dialog v-model="modalDialog" persistent>
-    <q-card class="col-12" style="width: 18%">
+    <q-card class="col-12" style="width: 25vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader :tittle="'สร้างแบบประเมินผลฯ'" :close="onCloseDialog" />
         <q-separator />
@@ -448,6 +460,7 @@ onMounted(() => {
 
             <div class="col-12">
               <q-select
+                :readonly="yearDialog === null"
                 v-model="formRound.kpiPeriodId"
                 outlined
                 label="รอบการประเมิน"
@@ -455,21 +468,26 @@ onMounted(() => {
                 option-label="name"
                 option-value="id"
                 :options="roundDialgOp"
-                emit-value
-                map-options
                 hide-bottom-space
                 lazy-rules
-                :rules="[
-                  (val:string) =>
-                    !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
-                ]"
+                :rules="[(val) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
+                @update:model-value="checkClosed"
               />
             </div>
           </div>
         </q-card-section>
         <q-separator />
         <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn label="บันทึก" color="secondary" type="submit"
+          <div v-if="isRoundClose" class="text-red q-px-sm">
+            รอบการประเมินนี้ปิดแล้ว
+          </div>
+
+          <q-space />
+          <q-btn
+            :disable="isRoundClose"
+            label="บันทึก"
+            color="secondary"
+            type="submit"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
         </q-card-actions>