Merge branch 'NiceDev' into develop

src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue

@@ -5,6 +5,8 @@ import { useRoute } from "vue-router";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -22,6 +24,7 @@ const {
   dialogConfirm,
   dialogMessageNotify,
   success,
+  date2Thai,
 } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -35,6 +38,20 @@ const search = ref<string>("");
 const listCheckID = ref<string | null>(null);
 const listTarget = ref<any>([]);
 
+const formFilter = reactive<any>({
+  isAll: false,
+  keyword: "",
+  node: 0,
+  nodeId: "",
+  period: "",
+  year: null,
+  page: 1,
+  pageSize: 20,
+});
+
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
+const maxPage = ref<number>(1);
+
 const formDetail = reactive<any>({
   orgRevisionId: "",
   id: "",
@@ -60,20 +77,28 @@ const formDetail = reactive<any>({
   strategyId: "",
   strategyName: "",
   documentInfoEvidence: "",
+  date: null,
 });
 
+/** Option  รอบการประเมิน*/
+const roundOp = ref<DataOptions[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
+
 function fetchIndicators() {
-  const nodeId = store.dataProfile.nodeId;
+  formFilter.nodeId = store.dataProfile.nodeId;
-  const node = store.dataProfile.node;
+  formFilter.node = store.dataProfile.node;
-  const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
+  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+
   showLoader();
   http
-    .get(
+    .post(config.API.kpiPlan + `/search`, formFilter)
-      config.API.kpiPlan +
-        `?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
-    )
     .then((res) => {
       listTarget.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
     })
     .catch((err) => {
       messageError($q, err);
@@ -94,6 +119,17 @@ function fetchIndicatorsByid(id: string) {
       formDetail.weight = data.weight;
       formDetail.meaning = data.meaning;
       formDetail.formula = data.formula;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        formDetail.date = [];
+        formDetail.date[0] = data.startDate;
+        formDetail.date[1] = data.endDate;
+      }
       clickList(data.kpiPlanId, true);
     })
     .catch((err) => {
@@ -107,13 +143,19 @@ function fetchIndicatorsByid(id: string) {
 function fetchListRole() {
   const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
   const position = store.dataProfile.position;
+  formFilter.nodeId = store.dataProfile.nodeId;
+  formFilter.node = store.dataProfile.node;
+  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
+  formFilter.position = store.dataProfile.position;
+
+  console.log(formFilter);
+
   http
-    .get(
+    .post(config.API.kpiRole + `/search`, formFilter)
-      config.API.kpiRole +
-        `?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&position=${position}`
-    )
     .then((res) => {
       listTarget.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
     })
     .finally(() => {
       hideLoader();
@@ -131,6 +173,17 @@ function fetchRoleByid(id: string) {
       formDetail.weight = data.weight;
       formDetail.meaning = data.meaning;
       formDetail.formula = data.formula;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        formDetail.date = [];
+        formDetail.date[0] = data.startDate;
+        formDetail.date[1] = data.endDate;
+      }
       clickList(data.kpiRoleId, true);
     })
     .catch((err) => {
@@ -155,6 +208,11 @@ function clickList(id: string, isData: boolean = false) {
         formDetail.weight = data.weight;
         formDetail.meaning = data.meaning;
         formDetail.formula = data.formula;
+        formDetail.achievement1 = data.achievement1;
+        formDetail.achievement2 = data.achievement2;
+        formDetail.achievement3 = data.achievement3;
+        formDetail.achievement4 = data.achievement4;
+        formDetail.achievement5 = data.achievement5;
       }
       formDetail.orgRevisionId = data.corgRevisionId;
       formDetail.id = data.id;
@@ -163,11 +221,6 @@ function clickList(id: string, isData: boolean = false) {
       formDetail.kpiPeriodId = data.kpiPeriodId;
       formDetail.includingName = data.includingName;
       formDetail.including = data.including;
-      formDetail.achievement1 = data.achievement1;
-      formDetail.achievement2 = data.achievement2;
-      formDetail.achievement3 = data.achievement3;
-      formDetail.achievement4 = data.achievement4;
-      formDetail.achievement5 = data.achievement5;
       formDetail.node = data.node;
       formDetail.nodeId = data.nodeId;
       formDetail.nodeName = data.nodeName;
@@ -209,6 +262,17 @@ function closeDialog() {
   formDetail.nodeId = "";
   formDetail.strategy = "";
   formDetail.strategyId = "";
+  formDetail.documentInfoEvidence = "";
+  formDetail.date = null;
+
+  formFilter.isAll = false;
+  formFilter.keyword = "";
+  formFilter.node = 0;
+  formFilter.nodeId = "";
+  formFilter.period = "";
+  formFilter.year = null;
+  formFilter.page = 1;
+  formFilter.pageSize = 20;
 }
 
 function onSubmit() {
@@ -216,7 +280,7 @@ function onSubmit() {
     dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
   } else {
     dialogConfirm($q, async () => {
-      // showLoader();
+      showLoader();
 
       const formBody = {
         target: formDetail.target,
@@ -227,6 +291,14 @@ function onSubmit() {
         kpiUserEvaluationId: store.dataEvaluation.id,
         kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
         kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
+        achievement1: formDetail.achievement1,
+        achievement2: formDetail.achievement2,
+        achievement3: formDetail.achievement3,
+        achievement4: formDetail.achievement4,
+        achievement5: formDetail.achievement5,
+        documentInfoEvidence: formDetail.documentInfoEvidence,
+        startDate: formDetail.date ? formDetail.date[0] : undefined,
+        endDate: formDetail.date ? formDetail.date[1] : undefined,
       };
       try {
         const urlPlanned = isStatusEdit.value
@@ -240,17 +312,21 @@ function onSubmit() {
         const url = numpage.value === 1 ? urlPlanned : urlRole;
         const method = isStatusEdit.value ? "put" : "post";
         await http[method](url, formBody);
+        closeDialog();
         success($q, "บันทึกข้อมูลสำเร็จ");
       } catch (err) {
         messageError($q, err);
       } finally {
         hideLoader();
-        closeDialog();
       }
     });
   }
 }
 
+function fetchNewListIndicators() {
+  formFilter.page = 1;
+  numpage.value === 1 ? fetchIndicators() : fetchListRole();
+}
 watch(
   () => modal.value,
   () => {
@@ -273,7 +349,11 @@ watch(
         <DialogHeader
           :tittle="
             numpage == 1
-              ? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
+              ? isStatusEdit
+                ? 'แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
+                : 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
+              : isStatusEdit
+              ? 'แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
               : 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
           "
           :close="closeDialog"
@@ -284,21 +364,97 @@ watch(
           <div class="col-12 row">
             <div class="bg-grey-1 q-pa-md col-3 row lineRight">
               <div class="col-12 fit">
-                <div class="col-12">
+                <div class="row col-12">
+                  <q-checkbox
+                    v-model="formFilter.isAll"
+                    label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
+                    @update:model-value="fetchNewListIndicators()"
+                  />
+                </div>
+                <div class="row q-col-gutter-sm col-12">
+                  <div class="col-5">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formFilter.year"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="fetchNewListIndicators()"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :model-value="
+                            formFilter.year === null || formFilter.year === ''
+                              ? null
+                              : Number(formFilter.year) + 543
+                          "
+                          :label="`${'ปีงบประมาณ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                          <template v-slot:append>
+                            <q-icon
+                              v-if="formFilter.year"
+                              name="cancel"
+                              class="cursor-pointer"
+                              @click.stop.prevent="
+                                (formFilter.year = null),
+                                  fetchNewListIndicators()
+                              "
+                            />
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-7">
+                    <q-select
+                      dense
+                      outlined
+                      v-model="formFilter.period"
+                      :options="roundOp"
+                      option-label="name"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      input-class="text-red"
+                      label="รอบการประเมิน"
+                      clearable
+                      @update:model-value="fetchNewListIndicators()"
+                    />
+                  </div>
+                </div>
+
+                <div class="col-12 q-mt-sm">
                   <q-input
-                    v-model="search"
+                    v-model="formFilter.keyword"
                     outlined
                     dense
                     label="ค้นหา"
-                    class="inputgreen"
+                    @keydown.enter.prevent="fetchNewListIndicators()"
                   >
                     <template v-slot:append>
-                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon v-if="formFilter.keyword == ''" name="search" />
                       <q-icon
-                        v-if="search !== ''"
+                        v-if="formFilter.keyword !== ''"
                         name="clear"
                         class="cursor-pointer"
-                        @click="search = ''"
+                        @click="
+                          (formFilter.keyword = ''), fetchNewListIndicators()
+                        "
                       />
                     </template>
                   </q-input>
@@ -335,6 +491,26 @@ watch(
                         </q-item-section>
                       </q-item>
                     </q-list>
+                    <q-separator />
+                    <div
+                      class="q-pa-lg flex justify-end"
+                      v-if="totalList !== 0"
+                    >
+                      ทั้งหมด {{ totalList }} รายการ
+                      <q-pagination
+                        v-model="formFilter.page"
+                        active-color="primary"
+                        color="dark"
+                        :max="Number(maxPage)"
+                        size="sm"
+                        boundary-links
+                        direction-links
+                        :max-pages="5"
+                        @update:model-value="
+                          numpage === 1 ? fetchIndicators() : fetchListRole()
+                        "
+                      ></q-pagination>
+                    </div>
                   </q-card-section>
                 </q-card>
               </div>
@@ -380,6 +556,7 @@ watch(
                               (val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
                             ]"
                             hide-bottom-space
+                            lazy-rules
                           />
                         </div>
                       </div>
@@ -395,6 +572,7 @@ watch(
                             :rules="[
                               (val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
                             ]"
+                            lazy-rules
                             hide-bottom-space
                             reverse-fill-mask
                           />
@@ -414,6 +592,7 @@ watch(
                                 !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
                             ]"
                             hide-bottom-space
+                            lazy-rules
                             mask="###"
                           />
                         </div>
@@ -429,34 +608,84 @@ watch(
                       <div class="col-6 text-center">ระดับคะแนน</div>
                       <div class="col-6 text-center">ผลสำเร็จของงาน</div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">5</div>
-                      <div class="col-6 text-center text-primary">
+                      <div class="col-6">
-                        {{ formDetail.achievement5 }}
+                        <q-input
+                          v-model="formDetail.achievement5"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">4</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement4 }}
+                        <q-input
+                          v-model="formDetail.achievement4"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">3</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement3 }}
+                        <q-input
+                          v-model="formDetail.achievement3"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">2</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement2 }}
+                        <q-input
+                          v-model="formDetail.achievement2"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">1</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement1 }}
+                        <q-input
+                          v-model="formDetail.achievement1"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
                   </div>
@@ -471,6 +700,7 @@ watch(
                     :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                     hide-bottom-space
                     class="inputgreen"
+                    lazy-rules
                   />
                 </div>
 
@@ -484,6 +714,7 @@ watch(
                     :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                     hide-bottom-space
                     class="inputgreen"
+                    lazy-rules
                   />
                 </div>
 
@@ -497,8 +728,57 @@ watch(
                     :rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
                     hide-bottom-space
                     class="inputgreen"
+                    lazy-rules
                   />
                 </div>
+                <div class="col-6">
+                  <datepicker
+                    v-model="formDetail.date"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    range
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formDetail.date
+                            ? `${date2Thai(formDetail.date[0])} - ${date2Thai(
+                                formDetail.date[1]
+                              )}`
+                            : null
+                        "
+                        :label="`${'ช่วงเวลาเริ่มต้น-สิ้นสุด'}`"
+                        hide-bottom-space
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                        <template v-slot:append>
+                          <q-icon
+                            v-if="formDetail.date !== null"
+                            name="cancel"
+                            class="cursor-pointer"
+                            @click="formDetail.date = null"
+                          />
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
               </div>
             </div>
           </div>