Refactoring code module 08_KPI

2024-09-10 11:42:43 +07:00 · 2024-09-10 11:42:43 +07:00 · 67d117dcfc
commit 67d117dcfc
parent 3636f380fb
48 changed files with 989 additions and 1140 deletions
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@ -1,17 +1,16 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";

 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";

 import DialogHeader from "@/components/DialogHeader.vue";

-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@ -90,7 +89,6 @@ function fetchListPlan() {
  formFilter.nodeId = store.dataProfile.nodeId;
  formFilter.node = store.dataProfile.node;
  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
-  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;

  showLoader();
  http
@ -108,6 +106,10 @@ function fetchListPlan() {
    });
 }

+/**
+ * ดึงข้อมูลตัวชี้วัด
+ * @param id id
+ */
 function fetchListPlanByid(id: string) {
  showLoader();
  http
@ -140,8 +142,6 @@ function fetchListPlanByid(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() : "";
@ -183,7 +183,6 @@ function fetchRoleByid(id: string) {
      formDetail.endDate = data.endDate;

      listCheckID.value = data.kpiRoleId;
-      // clickList(data.kpiRoleId, true);
    })
    .catch((err) => {
      messageError($q, err);
--- a/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
@ -1,27 +1,21 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";

 import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index";

 import DialogHeader from "@/components/DialogHeader.vue";

-import { useKpiDataStore } from "@/modules/08_KPI/store";
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const store = useKpiDataStore();

-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  dialogConfirm,
-  dialogMessageNotify,
-  success,
-} = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+  useCounterMixin();

 const modal = defineModel<boolean>("modal", { required: true });
 const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
@ -51,7 +45,6 @@ function fetchspecialByid(id: string) {
    .get(config.API.kpiAchievement("special") + `/${id}`)
    .then((res) => {
      const data = res.data.result;
-
      formData.including = data.including;
      formData.includingName = data.includingName;
      formData.target = data.target;
@ -143,7 +136,7 @@ watch(
                bg-color="white"
                dense
                class="inputgreen"
-                :rules="[(val) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
                hide-bottom-space
                lazy-rules
              />
@ -222,7 +215,7 @@ watch(
                      dense
                      class="inputgreen"
                      :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
@ -242,7 +235,7 @@ watch(
                      dense
                      class="inputgreen"
                      :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
@ -262,7 +255,7 @@ watch(
                      dense
                      class="inputgreen"
                      :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
@ -282,7 +275,7 @@ watch(
                      dense
                      class="inputgreen"
                      :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
@ -302,7 +295,7 @@ watch(
                      dense
                      class="inputgreen"
                      :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                      lazy-rules
@ -333,7 +326,7 @@ watch(
                type="textarea"
                dense
                class="inputgreen"
-                :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
                hide-bottom-space
                lazy-rules
              />
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
-import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
-import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import { useQuasar, type QTableProps } from "quasar";

 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar, type QTableProps } from "quasar";
-import { useRoute } from "vue-router";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";

 const dataListCapacityDetails = ref<ListCapacity[]>([]);
 const route = useRoute();
@ -22,7 +23,7 @@ const props = defineProps({

 const $q = useQuasar();
 const store = useKpiDataStore();
-const expectedLevel = ref<any>();
+const expectedLevel = ref<number | null>(null);
 const pagination = ref({
  sortBy: "desc",
  descending: false,
@ -162,6 +163,7 @@ function getclass() {
  return "inputgreen";
 }

+/** save สมรรถนะ */
 function onSubmit() {
  if (formDetail.id == "") {
    dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
@ -173,7 +175,7 @@ function onSubmit() {
      const body = {
        kpiUserEvaluationId: idParam.value,
        kpiCapacityId: formDetail.id,
-        level: expectedLevel.value.toString(),
+        level: expectedLevel.value?.toString(),
        weight: weight.value,
      };
      showLoader();
@ -193,6 +195,7 @@ function onSubmit() {
  }
 }

+/** ดึงข้อมูล สมรรถนะ */
 function getData() {
  showLoader();
  http
@ -214,12 +217,17 @@ function getData() {
    });
 }

+/**
+ * ฟิลเตอร์
+ * @param val ค่าที่ฟิลเตอร์
+ */
 function filterTxt(val: any) {
  listTarget.value = listTargetMain.value.filter(
    (v: any) => v.name.indexOf(val) > -1
  );
 }

+/** ดึงข้อมูลตามไอดี */
 function getDataById() {
  http
    .get(config.API.kpiUserCapacity + `/${idProps.value}`)
@ -444,17 +452,6 @@ watch(
                          class="inputgreen"
                        />
                      </div>
-                      <!-- <div v-else>
-                        <q-input
-                          v-model="expectedLevel"
-                          dense
-                          outlined
-                          lazy-rules
-                          :rules="[(val:string) => !!val || `${'กรุณาระดับที่คาดหวัง'}`,]"
-                          hide-bottom-space
-                          class="inputgreen"
-                        />
-                      </div> -->
                    </div>
                  </q-card>
                </div>
@ -496,7 +493,6 @@ watch(
                          </div>
                          <div v-else>
                            {{ col.value }}
-                            <!-- <span v-html="item.description"></span> -->
                          </div>
                        </q-td>
                      </q-tr>
@ -535,40 +531,6 @@ watch(
                      </div>
                    </template>
                  </d-table>
-
-                  <!-- <q-card bordered class="col-12 no-shadow">
-                    <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
-                      <div class="col-4 text-center">
-                        <span>ระดับสมรรถนะ</span>
-                      </div>
-                      <div class="col-8 text-start">
-                        <span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
-                      </div>
-                    </div>
-                    <div
-                      v-if="dataListCapacityDetails.length == 0"
-                      class="q-pa-md text-weight-bold col-12 text-center"
-                      style="border: 2px solid #f5f5f5"
-                    >
-                      <span>ไม่พบข้อมูลสมรรถนะ</span>
-                    </div>
-                    <div
-                      v-for="(item, index) in dataListCapacityDetails"
-                      :key="item.id"
-                    >
-                      <div class="row q-pa-sm">
-                        <div class="col-4 text-center self-start text-body1">
-                          <span>{{ item.level }}</span>
-                        </div>
-                        <div class="col-8">
-                          <span v-html="item.description"></span>
-                        </div>
-                      </div>
-                      <q-separator
-                        v-if="index !== dataListCapacityDetails.length - 1"
-                      />
-                    </div>
-                  </q-card> -->
                </div>
              </div>
            </div>
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
@ -1,33 +1,23 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, reactive } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";

 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";

 import type {
  FormComment,
  FormCommentByRole,
 } from "@/modules/08_KPI/interface/request/index";
-import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";

-import { useKpiDataStore } from "@/modules/08_KPI/store";
+import DialogHeader from "@/components/DialogHeader.vue";

 const store = useKpiDataStore();
 const $q = useQuasar();
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  dialogMessageNotify,
-  success,
-} = mixin;
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;

 const modal = defineModel<boolean>("modal", { required: true });
 const type = defineModel<string>("type", { required: true });
@ -46,6 +36,7 @@ const reasonCommanderHigh = ref<string>(""); //ผู้บังคับบั
 const reasonEvaluatorRef = ref<any>();
 const reasonCommanderRef = ref<any>();
 const reasonCommanderHighRef = ref<any>();
+
 const sendType = ref<string>("");
 const formDataAdd = reactive<FormComment>({
  topic: "",
@ -64,10 +55,12 @@ const formDataView = reactive<FormCommentByRole>({
 });

 let count = ref<number>(0);
+/**
+ * ดึงข้อมูลหัวข้อรายงานปัญหา
+ * @param index id หัวข้อ
+ * @param data ข้อมูล
+ */
 function clickList(index: string, data: any) {
-  // if (data.status == "DRAFT") {
-
-  // }
  listCheck.value = index as string;

  formDataView.id = data.id;
@ -94,13 +87,18 @@ function clickList(index: string, data: any) {
  }, 100);
 }

-function onEdit(index: string, data: any) {
+/**
+ * เปิดเเบบร่าง
+ * @param data ข้อมูลเเบบร่าง
+ */
+function onEdit(data: any) {
  modalAdd.value = true;
  sendId.value = data.id;
  formDataAdd.topic = data.topic;
  formDataAdd.reason = data.reason;
 }

+/** save หัวข้อปัญหา */
 function onSubmitAdd() {
  dialogConfirm($q, () => {
    showLoader();
@ -138,8 +136,7 @@ function onSubmitAdd() {
  });
 }

-function onSubmit() {}
-
+/** ปิด dialog */
 function close() {
  count.value = 0;
  modal.value = false;
@ -183,6 +180,10 @@ function getList() {
    });
 }

+/**
+ * save comment
+ * @param role ระดับผู้ประเมิน
+ */
 function onSubmitComment(role: string) {
  dialogConfirm($q, () => {
    const body = {
@ -229,28 +230,12 @@ function onSubmitComment(role: string) {
  });
 }

-function statusText(val: string) {
-  switch (val) {
-    case "DRAFT":
-      return "แบบร่าง";
-    case "EVALUATOR":
-      return "ผู้ประเมิน";
-    case "COMMANDER":
-      return "ผู้บังคับบัญชาเหนือขึ้นไป";
-    case "COMMANDERHIGH":
-      return "ผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง";
-    case "DONE":
-      return "เสร็จสิ้น";
-
-    default:
-      return "";
-  }
-}
-
+/** ฟังชั่นเเจ้งเตือน เลือกหัวข้อปัญหา */
 function onNoti() {
  listCheck.value = "";
  count.value = 0;
 }
+
 watch(
  () => modal.value,
  () => {
@ -263,282 +248,280 @@ watch(
 <template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 70vw">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader tittle="รายงานปัญหา" :close="close" />
-        <q-separator />
-        <q-card-section class="q-pa-none">
-          <q-splitter
-            v-model="splitterModel"
-            disable
-            separator-class="bg-gray"
-            separator-style="width: 1px"
-          >
-            <template v-slot:before>
-              <div class="q-pa-sm">
-                <q-btn
-                  v-if="
-                    store.rolePerson === 'USER' &&
-                    store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                    store.tabMain === '2'
-                  "
-                  icon="add"
-                  color="teal"
-                  flat
-                  round
-                  @click="
-                    () => {
-                      modalAdd = true;
-                    }
-                  "
-                >
-                  <q-tooltip>เพิ่มหัวข้อรายงานปัญหา</q-tooltip>
-                </q-btn>
-
-                <q-card bordered flat class="no-shadow bg-white col-12">
-                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                    <div class="col-12">
-                      <span>หัวข้อปัญหา</span>
-                    </div>
-                  </div>
-
-                  <q-separator />
-                  <q-card-section class="q-pa-none">
-                    <div v-if="listTarget.length > 0">
-                      <q-list separator dense>
-                        <q-item
-                          v-for="(item, index) in listTarget"
-                          :key="item.id"
-                          clickable
-                          v-ripple
-                          :active="listCheck === item.id"
-                          active-class="my-menu-link"
-                          @click="
-                            item.status == 'DRAFT'
-                              ? onNoti()
-                              : clickList(item.id, item)
-                          "
-                        >
-                          <q-item-section class="q-pa-none">
-                            <div class="row items-center">
-                              <div class="col-12 row justify-between">
-                                <span>{{ item.topic }}</span>
-                                <q-badge
-                                  v-if="item.status == 'DRAFT'"
-                                  outline
-                                  color="grey"
-                                  label="แบบร่าง"
-                                  @click="onEdit(item.id, item)"
-                                />
-                              </div>
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </div>
-
-                    <div v-else class="q-pa-md">
-                      <span>ไม่พบข้อมูล</span>
-                    </div>
-                  </q-card-section>
-                </q-card>
-              </div>
-            </template>
-
-            <template v-slot:after>
-              <div
-                v-if="!listCheck"
-                class="row col-12 items-center"
-                style="height: 30vh"
+      <DialogHeader tittle="รายงานปัญหา" :close="close" />
+      <q-separator />
+      <q-card-section class="q-pa-none">
+        <q-splitter
+          v-model="splitterModel"
+          disable
+          separator-class="bg-gray"
+          separator-style="width: 1px"
+        >
+          <template v-slot:before>
+            <div class="q-pa-sm">
+              <q-btn
+                v-if="
+                  store.rolePerson === 'USER' &&
+                  store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                  store.tabMain === '2'
+                "
+                icon="add"
+                color="teal"
+                flat
+                round
+                @click="
+                  () => {
+                    modalAdd = true;
+                  }
+                "
              >
-                <q-banner class="q-pa-lg col-12 text-center">
-                  <q-icon
-                    name="mdi-hand-pointing-left"
-                    size="lg"
-                    color="primary"
-                  />
-                  <p class="text-grey-9 q-pt-sm">กรุณาเลือกหัวข้อรายงานปัญหา</p>
-                </q-banner>
-              </div>
-              <div v-else>
-                <div class="row q-pa-md q-col-gutter-sm">
-                  <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">หัวข้อปัญหา</div>
-                    <div class="col-8">{{ formDataView.topic }}</div>
-                  </div>
-                  <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
-                    <div class="col-8">{{ formDataView.reason }}</div>
-                  </div>
+                <q-tooltip>เพิ่มหัวข้อรายงานปัญหา</q-tooltip>
+              </q-btn>
+
+              <q-card bordered flat class="no-shadow bg-white col-12">
+                <div class="row q-px-md q-py-sm items-center bg-grey-1">
                  <div class="col-12">
-                    <q-separator />
+                    <span>หัวข้อปัญหา</span>
+                  </div>
+                </div>
+
+                <q-separator />
+                <q-card-section class="q-pa-none">
+                  <div v-if="listTarget.length > 0">
+                    <q-list separator dense>
+                      <q-item
+                        v-for="(item, index) in listTarget"
+                        :key="item.id"
+                        clickable
+                        v-ripple
+                        :active="listCheck === item.id"
+                        active-class="my-menu-link"
+                        @click="
+                          item.status == 'DRAFT'
+                            ? onNoti()
+                            : clickList(item.id, item)
+                        "
+                      >
+                        <q-item-section class="q-pa-none">
+                          <div class="row items-center">
+                            <div class="col-12 row justify-between">
+                              <span>{{ item.topic }}</span>
+                              <q-badge
+                                v-if="item.status == 'DRAFT'"
+                                outline
+                                color="grey"
+                                label="แบบร่าง"
+                                @click="onEdit(item)"
+                              />
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
                  </div>

-                  <!-- ความคิดเห็นของผู้ประเมิน -->
-                  <q-form
-                    v-if="store.dataEvaluation.evaluatorId"
-                    ref="reasonEvaluatorRef"
-                    greedy
-                    @submit.prevent
-                    @validation-success="onSubmitComment('evaluator')"
-                    class="full-width q-mt-sm"
-                  >
-                    <div class="row col-12 q-col-gutter-sm">
-                      <div class="col-12">
-                        <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้ประเมิน</span
-                        >
-                      </div>
-                      <div class="col-12">
-                        <q-input
-                          outlined
-                          dense
-                          :readonly="
-                            formDataView.reasonEvaluator !== null ||
-                            store.rolePerson !== 'EVALUATOR' ||
-                            store.tabMain !== '2'
-                          "
-                          label="ความคิดเห็นของผู้ประเมิน"
-                          v-model="reasonEvaluator"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
-                        ></q-input>
-                      </div>
+                  <div v-else class="q-pa-md">
+                    <span>ไม่พบข้อมูล</span>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </div>
+          </template>

-                      <div
-                        v-if="
-                          formDataView.reasonEvaluator == null &&
-                          store.rolePerson == 'EVALUATOR' &&
-                          store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                          store.tabMain === '2'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                        >
-                      </div>
-                    </div>
-                  </q-form>
-
-                  <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
-                  <q-form
-                    v-if="store.dataEvaluation.commanderId"
-                    class="full-width q-mt-sm"
-                    ref="reasonCommanderRef"
-                    greedy
-                    @submit.prevent
-                    @validation-success="onSubmitComment('commander')"
-                  >
-                    <div class="row col-12 q-col-gutter-sm">
-                      <div class="col-12">
-                        <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
-                        >
-                      </div>
-                      <div class="col-12">
-                        <q-input
-                          outlined
-                          dense
-                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
-                          v-model="reasonCommander"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          :readonly="
-                            formDataView.reasonCommander !== null ||
-                            store.rolePerson !== 'COMMANDER' ||
-                            store.tabMain !== '2'
-                          "
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommander == null &&
-                          store.rolePerson == 'COMMANDER' &&
-                          store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                          store.tabMain === '2'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                        >
-                      </div>
-                    </div>
-                  </q-form>
-
-                  <q-form
-                    v-if="store.dataEvaluation.commanderHighId"
-                    class="full-width q-mt-sm"
-                    ref="reasonCommanderHighRef"
-                    greedy
-                    @submit.prevent
-                    @validation-success="onSubmitComment('commanderhigh')"
-                  >
-                    <div class="row col-12 q-col-gutter-sm">
-                      <div class="col-12">
-                        <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
-                        >
-                      </div>
-                      <div class="col-12">
-                        <q-input
-                          outlined
-                          dense
-                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
-                          v-model="reasonCommanderHigh"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          :readonly="
-                            formDataView.reasonCommanderHigh !== null ||
-                            store.rolePerson !== 'COMMANDERHIGH' ||
-                            store.tabMain !== '2'
-                          "
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommanderHigh == null &&
-                          store.rolePerson == 'COMMANDERHIGH' &&
-                          store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                          store.tabMain === '2'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                        >
-                      </div>
-                    </div>
-                  </q-form>
+          <template v-slot:after>
+            <div
+              v-if="!listCheck"
+              class="row col-12 items-center"
+              style="height: 30vh"
+            >
+              <q-banner class="q-pa-lg col-12 text-center">
+                <q-icon
+                  name="mdi-hand-pointing-left"
+                  size="lg"
+                  color="primary"
+                />
+                <p class="text-grey-9 q-pt-sm">กรุณาเลือกหัวข้อรายงานปัญหา</p>
+              </q-banner>
+            </div>
+            <div v-else>
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="row col-12 text-weight-medium">
+                  <div class="col-4 text-grey-6">หัวข้อปัญหา</div>
+                  <div class="col-8">{{ formDataView.topic }}</div>
                </div>
+                <div class="row col-12 text-weight-medium">
+                  <div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
+                  <div class="col-8">{{ formDataView.reason }}</div>
+                </div>
+                <div class="col-12">
+                  <q-separator />
+                </div>
+
+                <!-- ความคิดเห็นของผู้ประเมิน -->
+                <q-form
+                  v-if="store.dataEvaluation.evaluatorId"
+                  ref="reasonEvaluatorRef"
+                  greedy
+                  @submit.prevent
+                  @validation-success="onSubmitComment('evaluator')"
+                  class="full-width q-mt-sm"
+                >
+                  <div class="row col-12 q-col-gutter-sm">
+                    <div class="col-12">
+                      <span class="text-weight-medium text-grey-6"
+                        >ความคิดเห็นของผู้ประเมิน</span
+                      >
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        outlined
+                        dense
+                        :readonly="
+                          formDataView.reasonEvaluator !== null ||
+                          store.rolePerson !== 'EVALUATOR' ||
+                          store.tabMain !== '2'
+                        "
+                        label="ความคิดเห็นของผู้ประเมิน"
+                        v-model="reasonEvaluator"
+                        type="textarea"
+                        class="inputgreen"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
+                      ></q-input>
+                    </div>
+
+                    <div
+                      v-if="
+                        formDataView.reasonEvaluator == null &&
+                        store.rolePerson == 'EVALUATOR' &&
+                        store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                        store.tabMain === '2'
+                      "
+                      class="col-12"
+                      align="right"
+                    >
+                      <q-btn
+                        label="บันทึกความคิดเห็น"
+                        color="secondary"
+                        type="submit"
+                        ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-form>
+
+                <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
+                <q-form
+                  v-if="store.dataEvaluation.commanderId"
+                  class="full-width q-mt-sm"
+                  ref="reasonCommanderRef"
+                  greedy
+                  @submit.prevent
+                  @validation-success="onSubmitComment('commander')"
+                >
+                  <div class="row col-12 q-col-gutter-sm">
+                    <div class="col-12">
+                      <span class="text-weight-medium text-grey-6"
+                        >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
+                      >
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        outlined
+                        dense
+                        label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
+                        v-model="reasonCommander"
+                        type="textarea"
+                        class="inputgreen"
+                        lazy-rules
+                        :readonly="
+                          formDataView.reasonCommander !== null ||
+                          store.rolePerson !== 'COMMANDER' ||
+                          store.tabMain !== '2'
+                        "
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                      ></q-input>
+                    </div>
+
+                    <div
+                      v-if="
+                        formDataView.reasonCommander == null &&
+                        store.rolePerson == 'COMMANDER' &&
+                        store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                        store.tabMain === '2'
+                      "
+                      class="col-12"
+                      align="right"
+                    >
+                      <q-btn
+                        label="บันทึกความคิดเห็น"
+                        color="secondary"
+                        type="submit"
+                        ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-form>
+
+                <q-form
+                  v-if="store.dataEvaluation.commanderHighId"
+                  class="full-width q-mt-sm"
+                  ref="reasonCommanderHighRef"
+                  greedy
+                  @submit.prevent
+                  @validation-success="onSubmitComment('commanderhigh')"
+                >
+                  <div class="row col-12 q-col-gutter-sm">
+                    <div class="col-12">
+                      <span class="text-weight-medium text-grey-6"
+                        >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
+                      >
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        outlined
+                        dense
+                        label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
+                        v-model="reasonCommanderHigh"
+                        type="textarea"
+                        class="inputgreen"
+                        lazy-rules
+                        :readonly="
+                          formDataView.reasonCommanderHigh !== null ||
+                          store.rolePerson !== 'COMMANDERHIGH' ||
+                          store.tabMain !== '2'
+                        "
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                      ></q-input>
+                    </div>
+
+                    <div
+                      v-if="
+                        formDataView.reasonCommanderHigh == null &&
+                        store.rolePerson == 'COMMANDERHIGH' &&
+                        store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                        store.tabMain === '2'
+                      "
+                      class="col-12"
+                      align="right"
+                    >
+                      <q-btn
+                        label="บันทึกความคิดเห็น"
+                        color="secondary"
+                        type="submit"
+                        ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-form>
              </div>
-            </template>
-          </q-splitter>
-        </q-card-section>
-      </q-form>
+            </div>
+          </template>
+        </q-splitter>
+      </q-card-section>
    </q-card>
  </q-dialog>

--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@ -1,21 +1,20 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, reactive } from "vue";
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";

 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useKpiDataStore } from "@/modules/08_KPI/store";

 import type {
  FormComment,
  FormCommentByRole,
+  ListTarget,
 } from "@/modules/08_KPI/interface/request/index";
-import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import { useKpiDataStore } from "@/modules/08_KPI/store";

-const numLevel = ref<string>("");
-const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@ -27,15 +26,15 @@ const {
  dialogMessageNotify,
 } = mixin;

-const check = ref<string>("");
-const rows = defineModel<any>("rows");
+const numLevel = ref<string>("");
+const store = useKpiDataStore();
 const modal = defineModel<boolean>("modal", { required: true });
 const type = defineModel<string>("type", { required: true });
 const idList = defineModel<string>("idList", { required: true });
 const modalAdd = ref<boolean>(false);

 const splitterModel = ref<number>(40);
-const listTarget = ref<any>([]);
+const listTarget = ref<ListTarget[]>([]);
 const listCheck = ref<string>("");

 const reasonEvaluator = ref<string>(""); //ผู้ประเมิน
@ -202,7 +201,7 @@ function onSubmitComment(role: string) {
          if (listCheck.value) {
            const idCheck = listCheck.value;
            const data = listTarget.value.find(
-              (item: any) => item.id == idCheck
+              (item: ListTarget) => item.id == idCheck
            );
            clickList(idCheck, data);
          }
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, watch } from "vue";
 import type { QTableProps } from "quasar";

-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any>("rows", { required: true });
 const dataRows = ref<any[]>([]);
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@ -1,32 +1,44 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
 import { ref, reactive, watch, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";

 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";

 import type {
  DataOptionTechnique,
  ProjectYearOp,
 } from "@/modules/08_KPI/interface/index/Main";

+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
+
 const props = defineProps({
  getAll: Function,
 });
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
-const development = ref<any[]>([]);
-const reasonDevelopment70 = ref<string>("");
-const reasonDevelopment20 = ref<string>("");
-const reasonDevelopment10 = ref<string>("");

-const choice = ref<string>("MANUAL");
-const projectName = ref<any>("");
-const projectOp = ref<ProjectYearOp[]>([]);
-const projectOpMain = ref<ProjectYearOp[]>([]);
+const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
+const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const reasonDevelopment20 = ref<string>(""); //อื่นๆ การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+const reasonDevelopment10 = ref<string>(""); //อื่นๆ การฝึกอบรมอื่นๆ
+
+const choice = ref<string>("MANUAL"); //ตัวเลืออก กรอกเอง/เลือกในระบบ
+const projectName = ref<any>(""); //ชื่อเรื่อง
+const projectOp = ref<ProjectYearOp[]>([]); //ตัวเลือก โครงการ/หลักสูตรการฝึกอบรม
+const projectOpMain = ref<ProjectYearOp[]>([]); //ตัวเลือก โครงการ/หลักสูตรการฝึกอบรม แสดง
 const choiceOp = ref<DataOptionTechnique[]>([
  { value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
  { value: "MANUAL", label: "กรอกเอง" },
@ -58,17 +70,6 @@ const isDevelopment10 = computed(() => {
  );
 });

-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  messageError,
-  success,
-  dialogMessageNotify,
-} = mixin;
-
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });

@ -160,6 +161,7 @@ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
  { value: "other3", label: "อื่น ๆ (ระบุ)" },
 ]);

+/** ปิด Dialog */
 function close() {
  modal.value = false;
  id.value = "";
@ -187,6 +189,7 @@ function close() {
  props.getAll?.();
 }

+/** บันทึกข้อมูลการพัฒนาตน */
 function onSubmit() {
  if (
    isDevelopment70.value == false &&
@ -232,60 +235,9 @@ function onSubmit() {
    });
  }
 }
-watch(
-  () => id.value,
-  (i) => {
-    if (i) {
-      showLoader();
-      http
-        .get(config.API.kpiAchievementDevelop + `/${id.value}`)
-        .then(async (res) => {
-          const data = res.data.result;
-          formData.year = data.selectTypeYear;
-          await getDataByYear();
-          setTimeout(() => {
-            choice.value = data.selectType;
-            projectName.value = projectOpMain.value.find(
-              (i: any) => i.id == data.selectTypeId
-            );
-            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;
-            development.value = data.developmentProjects;
-            reasonDevelopment70.value = data.developmentProjects.includes(
-              "other1"
-            )
-              ? data.reasonDevelopment70
-              : "";
-            reasonDevelopment20.value = data.developmentProjects.includes(
-              "other2"
-            )
-              ? data.reasonDevelopment20
-              : "";
-            reasonDevelopment10.value = data.developmentProjects.includes(
-              "other3"
-            )
-              ? data.reasonDevelopment10
-              : "";
-          }, 500);
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
-  }
-);

 const customPosition = () => ({ top: "490px", left: "410px" });
+
 async function getDataByYear() {
  if (formData.year) {
    showLoader();
@ -350,6 +302,59 @@ function filterOptionFn(val: string, update: Function) {
    );
  });
 }
+
+watch(
+  () => id.value,
+  (i) => {
+    if (i) {
+      showLoader();
+      http
+        .get(config.API.kpiAchievementDevelop + `/${id.value}`)
+        .then(async (res) => {
+          const data = res.data.result;
+          formData.year = data.selectTypeYear;
+          await getDataByYear();
+          setTimeout(() => {
+            choice.value = data.selectType;
+            projectName.value = projectOpMain.value.find(
+              (i: any) => i.id == data.selectTypeId
+            );
+            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;
+            development.value = data.developmentProjects;
+            reasonDevelopment70.value = data.developmentProjects.includes(
+              "other1"
+            )
+              ? data.reasonDevelopment70
+              : "";
+            reasonDevelopment20.value = data.developmentProjects.includes(
+              "other2"
+            )
+              ? data.reasonDevelopment20
+              : "";
+            reasonDevelopment10.value = data.developmentProjects.includes(
+              "other3"
+            )
+              ? data.reasonDevelopment10
+              : "";
+          }, 500);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
 </script>
 <template>
  <q-dialog persistent v-model="modal">
@ -542,19 +547,6 @@ function filterOptionFn(val: string, update: Function) {
                  </div>
                </div>
              </div>
-
-              <!-- <q-checkbox
-                v-model="formData.isDevelopment70"
-                label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
-              />
-              <q-checkbox
-                v-model="formData.isDevelopment20"
-                label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
-              />
-              <q-checkbox
-                v-model="formData.isDevelopment10"
-                label="10 การฝึกอบรมอื่นๆ"
-              /> -->
            </div>
            <div class="col-12">
              <q-input
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@ -1,20 +1,19 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
 import { ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";

-const store = useKpiDataStore();
 const $q = useQuasar();
+const store = useKpiDataStore();
 const mixin = useCounterMixin();
 const {
-  dialogConfirm,
-  success,
  showLoader,
  hideLoader,
  messageError,
@ -23,13 +22,25 @@ const {
  date2Thai,
 } = mixin;

-const route = useRoute();
-const router = useRouter();
-const id = ref<string>(route.params.id as string);
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);

+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posMasterNoOld",
+  "positionOld",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+  "commandNo",
+]);
+
 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
  {
@ -164,22 +175,9 @@ const columns = ref<QTableProps["columns"]>([
    format: (val) => statusText(val),
  },
 ]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "name",
-  "posMasterNoOld",
-  "positionOld",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "dateStart",
-  "dateEnd",
-  "createdAt",
-  "status",
-  "commandNo",
-]);

-const statusText = (val: string) => {
+/** เเปลง status เป็น text */
+function statusText(val: string) {
  switch (val) {
    case "WAITTING":
      return "รอดำเนินการ";
@ -197,12 +195,14 @@ const statusText = (val: string) => {
    default:
      return "-";
  }
-};
+}

+/** ปิด dialog */
 function close() {
  modal.value = false;
 }

+/** ดึงข้อมูล */
 function getData() {
  showLoader();
  http
@ -218,6 +218,7 @@ function getData() {
      hideLoader();
    });
 }
+
 watch(
  () => modal.value,
  (n) => {
@ -271,20 +272,6 @@ watch(
                  </q-td>
                </q-tr>
              </template>
-              <!-- <template v-slot:pagination="scope">
-                ทั้งหมด {{ total }} รายการ
-                <q-pagination
-                  v-model="formQuery.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="fetchList"
-                ></q-pagination>
-              </template> -->
            </d-table>
          </div>
        </div>
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue
@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref } from "vue";
 import type { QTableProps } from "quasar";

-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any>("rows", { required: true });
 const dataRows = ref<any[]>([]);
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
@ -1,20 +1,8 @@
 <script setup lang="ts">
-import { watch, ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";

-interface ListCriteria {
-  id: string;
-  level: number;
-  description: string;
-}
+import type { ListCriteria } from "@/modules/08_KPI/interface/index/Main";

-const $q = useQuasar();
-const dataList = ref<ListCriteria[]>([]);
-const { showLoader, hideLoader, messageError } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
  required: true,
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue
@ -1,40 +1,31 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
 import { ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";

 const store = useKpiDataStore();

-const route = useRoute();
-const router = useRouter();
-const id = ref<string>(route.params.id as string);
-const work = ref<boolean>(false);
 const $q = useQuasar();
+const work = ref<boolean>(false);
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  success,
-  showLoader,
-  hideLoader,
-  messageError,
-  findPosMasterNoOld,
-  findOrgNameOld,
-  date2Thai,
-} = mixin;
+const { showLoader, hideLoader, messageError } = mixin;

 const modal = defineModel<boolean>("modal", { required: true });
 const isProbation = defineModel<boolean>("isProbation", { required: true });

+/** ปิด dialog */
 function close() {
  modal.value = false;
 }

+/** ดึงข้อมูล */
 function getData() {
  showLoader();
  http
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import config from "@/app.config";
+
 import http from "@/plugins/http";
+import config from "@/app.config";

 import DialogHeader from "@/components/DialogHeader.vue";

@ -16,7 +17,6 @@ const numpage = defineModel<number>("numpage", { required: true });
 const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
  required: true,
 });
-
 const dataAchievement = ref<any[]>([]);

 function fetchByid(id: string, type: string) {