updated kpi list & detail

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

@@ -0,0 +1,949 @@
+<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 type { DataOptions } from "@/modules/14_KPI/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const store = useKpiDataStore();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+  success,
+  date2Thai,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
+
+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: "",
+  year: null,
+  round: "",
+  kpiPeriodId: "",
+  includingName: "",
+  including: "",
+  target: "",
+  unit: "",
+  weight: null,
+  achievement1: "",
+  achievement2: "",
+  achievement3: "",
+  achievement4: "",
+  achievement5: "",
+  meaning: "",
+  formula: "",
+  node: null,
+  nodeId: "",
+  nodeName: "",
+  strategy: null,
+  strategyId: "",
+  strategyName: "",
+  documentInfoEvidence: "",
+  date: null,
+});
+
+/** Option  รอบการประเมิน*/
+const roundOp = ref<DataOptions[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
+
+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
+    .post(config.API.kpiPlan + `/search`, formFilter)
+    .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);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchListPlanByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("planned") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      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) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+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;
+
+  http
+    .post(config.API.kpiRole + `/search`, formFilter)
+    .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);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchRoleByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("role") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      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) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchListSpecial() {
+  formFilter.nodeId = store.dataProfile.nodeId;
+  formFilter.node = store.dataProfile.node;
+  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
+
+  const body = {
+    keyword: formFilter.keyword,
+    period: formFilter.period,
+    year: formFilter.year,
+    pageSize: formFilter.pageSize,
+    page: formFilter.page,
+  };
+
+  showLoader();
+  http
+    .post(config.API.kpiSpecial + `/search`, body)
+    .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);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchspecialByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.including = data.including;
+      formDetail.includingName = data.includingName;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.weight = data.weight;
+      formDetail.formula = data.formula;
+      formDetail.meaning = data.meaning;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        formDetail.date = [];
+        formDetail.date[0] = data.startDate;
+        formDetail.date[1] = data.endDate;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function clickList(id: string, isData: boolean = false) {
+  showLoader();
+  const url =
+    numpage.value === 1
+      ? config.API.kpiPlan
+      : numpage.value === 2
+      ? config.API.kpiRole
+      : config.API.kpiSpecial;
+  http
+    .get(`${url}/${id}`)
+    .then((res) => {
+      listCheckID.value = id;
+      const data = res.data.result;
+      if (!isData) {
+        formDetail.target = data.target;
+        formDetail.unit = data.unit;
+        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;
+      formDetail.year = data.year;
+      formDetail.round = data.round;
+      formDetail.kpiPeriodId = data.kpiPeriodId;
+      formDetail.includingName = data.includingName;
+      formDetail.including = data.including;
+      formDetail.node = data.node;
+      formDetail.nodeId = data.nodeId;
+      formDetail.nodeName = data.nodeName;
+      formDetail.strategy = data.strategy;
+      formDetail.strategyId = data.strategyId;
+      formDetail.strategyName = data.strategyName;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  search.value = "";
+  listCheckID.value = null;
+  formDetail.orgRevisionId = "";
+  formDetail.id = "";
+  formDetail.year = "";
+  formDetail.round = "";
+  formDetail.kpiPeriodId = "";
+  formDetail.includingName = "";
+  formDetail.including = "";
+  formDetail.target = "";
+  formDetail.unit = "";
+  formDetail.weight = "";
+  formDetail.achievement1 = "";
+  formDetail.achievement2 = "";
+  formDetail.achievement3 = "";
+  formDetail.achievement4 = "";
+  formDetail.achievement5 = "";
+  formDetail.meaning = "";
+  formDetail.formula = "";
+  formDetail.node = "";
+  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() {
+  if (!listCheckID.value && numpage.value !== 3) {
+    dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+
+      const formBody = {
+        target: formDetail.target,
+        unit: formDetail.unit,
+        weight: Number(formDetail.weight),
+        meaning: formDetail.meaning,
+        formula: formDetail.formula,
+        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,
+        including: numpage.value === 3 ? formDetail.including : undefined,
+        includingName:
+          numpage.value === 3 ? formDetail.includingName : undefined,
+        period:
+          numpage.value === 3 ? store.dataEvaluation.durationKPI : undefined,
+        year:
+          numpage.value === 3
+            ? store.dataEvaluation.year.toString()
+            : undefined,
+      };
+      try {
+        const urlPlanned = isStatusEdit.value
+          ? config.API.kpiAchievement("planned") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("planned");
+
+        const urlRole = isStatusEdit.value
+          ? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("role");
+
+        const urlSpecial = isStatusEdit.value
+          ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("special");
+
+        const url =
+          numpage.value === 1
+            ? urlPlanned
+            : numpage.value === 2
+            ? urlRole
+            : urlSpecial;
+        const method = isStatusEdit.value ? "put" : "post";
+        await http[method](url, formBody);
+        closeDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
+}
+
+function fetchNewList() {
+  formFilter.page = 1;
+  numpage.value === 1
+    ? fetchListPlan()
+    : numpage.value === 2
+    ? fetchListRole()
+    : fetchListSpecial();
+}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      if (numpage.value === 1) {
+        fetchListPlan();
+        isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
+      } else if (numpage.value === 2) {
+        fetchListRole();
+        isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
+      } else if (numpage.value === 3) {
+        fetchListSpecial();
+        isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
+      }
+    }
+  }
+);
+
+const title = computed(() => {
+  let name = "";
+  if (numpage.value === 1) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
+      : "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
+  } else if (numpage.value === 2) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
+      : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
+  } else if (numpage.value === 3) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดที่ได้รับมอบหมาย"
+      : "เพิ่มตัวชี้วัดที่ได้รับมอบหมาย";
+  }
+  return name;
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 100%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
+          <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+              <div class="col-12 fit">
+                <div class="row col-12" v-if="numpage !== 3">
+                  <q-checkbox
+                    v-model="formFilter.isAll"
+                    label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
+                    @update:model-value="fetchNewList()"
+                  />
+                </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="fetchNewList()"
+                    >
+                      <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), fetchNewList()
+                              "
+                            />
+                          </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="fetchNewList()"
+                    />
+                  </div>
+                </div>
+
+                <div class="col-12 q-mt-sm">
+                  <q-input
+                    v-model="formFilter.keyword"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    @keydown.enter.prevent="fetchNewList()"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="formFilter.keyword == ''" name="search" />
+                      <q-icon
+                        v-if="formFilter.keyword !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="(formFilter.keyword = ''), fetchNewList()"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+
+                <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
+                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                    <div class="col-4">ลำดับ/รหัสตัวชี้วัด</div>
+                    <div class="col-4">ชื่อตัวชี้วัด</div>
+                  </div>
+                  <q-separator />
+
+                  <q-card-section class="q-pa-none">
+                    <q-list separator>
+                      <q-item
+                        dense
+                        v-for="(item, index) in listTarget"
+                        :key="index"
+                        clickable
+                        v-ripple
+                        :active="listCheckID === item.id"
+                        active-class="my-menu-link"
+                        @click="clickList(item.id)"
+                      >
+                        <q-item-section class="q-pa-none">
+                          <div class="row items-center" style="height: 50px">
+                            <div class="col-4">
+                              {{ item.including }}
+                            </div>
+                            <div class="col-4">
+                              {{ item.includingName }}
+                            </div>
+                          </div>
+                        </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
+                            ? fetchListPlan()
+                            : numpage === 2
+                            ? fetchListRole()
+                            : fetchListSpecial()
+                        "
+                      ></q-pagination>
+                    </div>
+                  </q-card-section>
+                </q-card>
+              </div>
+            </div>
+
+            <div class="col-9">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="col-12">
+                  <span class="text-body2 text-weight-medium"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-6">
+                  <q-card bordered class="full-height q-pa-sm">
+                    <div class="q-pa-sm q-col-gutter-lg">
+                      <div class="col-12 row" v-if="numpage !== 3">
+                        <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
+                        <div class="col-8">{{ formDetail.nodeName }}</div>
+                      </div>
+                      <div class="col-12 row" v-if="numpage === 1">
+                        <div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
+                        <div class="col-8">{{ formDetail.strategyName }}</div>
+                      </div>
+
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
+                        <div class="col-8">
+                          <q-input
+                            v-if="numpage === 3"
+                            outlined
+                            v-model="formDetail.including"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+
+                          <div v-else>{{ formDetail.including }}</div>
+                        </div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
+                        <div class="col-8">
+                          <q-input
+                            v-if="numpage === 3"
+                            outlined
+                            v-model="formDetail.includingName"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                          <div v-else>{{ formDetail.includingName }}</div>
+                        </div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
+                        <div class="col-8">
+                          <q-input
+                            outlined
+                            v-model="formDetail.target"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
+                            ]"
+                            hide-bottom-space
+                            lazy-rules
+                          />
+                        </div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">หน่วยนับ</div>
+                        <div class="col-8">
+                          <q-input
+                            outlined
+                            v-model="formDetail.unit"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                            reverse-fill-mask
+                          />
+                        </div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
+                        <div class="col-8">
+                          <q-input
+                            outlined
+                            v-model="formDetail.weight"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
+                            ]"
+                            hide-bottom-space
+                            lazy-rules
+                            mask="###"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-6 row">
+                  <div class="row col-12 card-box">
+                    <div
+                      class="col-12 bg-grey-2 row items-center text-weight-medium"
+                    >
+                      <div class="col-6 text-center">ระดับคะแนน</div>
+                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                    </div>
+                    <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">
+                        <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 q-col-gutter-sm"
+                    >
+                      <div class="col-6 text-center text-body2">4</div>
+                      <div class="col-6 text-center text-primary">
+                        <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 q-col-gutter-sm"
+                    >
+                      <div class="col-6 text-center text-body2">3</div>
+                      <div class="col-6 text-center text-primary">
+                        <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 q-col-gutter-sm"
+                    >
+                      <div class="col-6 text-center text-body2">2</div>
+                      <div class="col-6 text-center text-primary">
+                        <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 q-col-gutter-sm"
+                    >
+                      <div class="col-6 text-center text-body2">1</div>
+                      <div class="col-6 text-center text-primary">
+                        <q-input
+                          v-model="formDetail.achievement1"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="formDetail.meaning"
+                    label="นิยามหรือความหมายของตัวชี้วัด"
+                    type="textarea"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    class="inputgreen"
+                    lazy-rules
+                  />
+                </div>
+
+                <div class="col-12">
+                  <q-input
+                    v-model="formDetail.formula"
+                    label="สูตรคำนวณ"
+                    type="textarea"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    class="inputgreen"
+                    lazy-rules
+                  />
+                </div>
+
+                <div class="col-12">
+                  <q-input
+                    v-model="formDetail.documentInfoEvidence"
+                    label="ข้อมูลเอกสารหลักฐาน"
+                    type="textarea"
+                    outlined
+                    dense
+                    :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>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+</style>

src/modules/14_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue

@@ -0,0 +1,361 @@
+<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 type { FormDataAssigned } from "@/modules/14_KPI/interface/request/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const store = useKpiDataStore();
+
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
+
+const formData = reactive<FormDataAssigned>({
+  including: "", //รหัสตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: "", //หน่วยนับ
+  weight: null, //น้ำหนัก (ร้อยละ)
+  meaning: "", //นิยามหรือความหมายของตัวชี้วัด
+  formula: "", //สูตรคำนวณ
+  achievement1: "", // ผลสำเร็จของงาน1
+  achievement2: "", // ผลสำเร็จของงาน2
+  achievement3: "", // ผลสำเร็จของงาน3
+  achievement4: "", // ผลสำเร็จของงาน4
+  achievement5: "", // ผลสำเร็จของงาน5
+  kpiUserEvaluationId: "",
+});
+
+function fetchspecialByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+
+      formData.including = data.including;
+      formData.includingName = data.includingName;
+      formData.target = data.target;
+      formData.unit = data.unit;
+      formData.achievement1 = data.achievement1;
+      formData.achievement2 = data.achievement2;
+      formData.achievement3 = data.achievement3;
+      formData.achievement4 = data.achievement4;
+      formData.achievement5 = data.achievement5;
+      formData.weight = data.weight;
+      formData.formula = data.formula;
+      formData.meaning = data.meaning;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  formData.including = "";
+  formData.includingName = "";
+  formData.target = "";
+  formData.unit = "";
+  formData.achievement1 = "";
+  formData.achievement2 = "";
+  formData.achievement3 = "";
+  formData.achievement4 = "";
+  formData.achievement5 = "";
+  formData.weight = null;
+  formData.meaning = "";
+  formData.formula = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    formData.weight = Number(formData.weight);
+    formData.unit = formData.unit;
+    formData.kpiUserEvaluationId = store.dataEvaluation.id;
+
+    try {
+      const url = isStatusEdit.value
+        ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
+        : config.API.kpiAchievement("special");
+
+      const method = isStatusEdit.value ? "put" : "post";
+      await http[method](url, formData);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 50%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-2">
+              <q-input
+                outlined
+                v-model="formData.including"
+                label="ลำดับ/รหัสตัวชี้วัด"
+                bg-color="white"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
+                hide-bottom-space
+                lazy-rules
+              />
+            </div>
+            <div class="col-10">
+              <q-input
+                v-model="formData.includingName"
+                label="ชื่อตัวชี้วัด"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                lazy-rules
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.target"
+                label="ค่าเป้าหมาย"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                lazy-rules
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.unit"
+                label="หน่วยนับ"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                reverse-fill-mask
+                lazy-rules
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.weight"
+                label="น้ำหนัก (ร้อยละ)"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                mask="#"
+                reverse-fill-mask
+                lazy-rules
+              />
+            </div>
+            <div class="col-12">
+              <q-card bordered>
+                <q-card>
+                  <q-card-actions class="bg-grey-3 row">
+                    <div class="col-4 flex justify-center items-center">
+                      <div>ระดับคะแนน</div>
+                    </div>
+                    <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
+                  </q-card-actions>
+                </q-card>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>5</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement5"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>4</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement4"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>3</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement3"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>2</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement2"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>1</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement1"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formData.meaning"
+                label="นิยามหรือความหมายของตัวชี้วัด"
+                outlined
+                dense
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                lazy-rules
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="formData.formula"
+                label="สูตรคำนวณ"
+                bg-color="white"
+                type="textarea"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
+                hide-bottom-space
+                lazy-rules
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>

src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue

@@ -0,0 +1,604 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { DataOptions } from "@/modules/14_KPI/interface/index/Main";
+import type { ListCapacity } from "@/modules/14_KPI/interface/request/index";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRoute } from "vue-router";
+
+const dataListCapacityDetails = ref<ListCapacity[]>([]);
+const route = useRoute();
+const idParam = ref<string>(route.params.id as string);
+
+const props = defineProps({
+  getDataList: Function,
+});
+
+const $q = useQuasar();
+const store = useKpiDataStore();
+const expectedLevel = ref<any>();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 20,
+});
+
+const weight = ref<number>(100);
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const idProps = defineModel<string | null>("id", { required: true });
+const competencyType = defineModel<string>("competencyType", {
+  required: true,
+});
+const search = ref<string>("");
+
+const type = ref<string>("");
+
+const listCheck = ref<string>();
+const listTarget = ref<any>([]);
+const listTargetMain = ref<any>([]);
+
+const expectedLevelOp = ref<Object[]>(["1", "2", "3", "4", "5"]);
+const formDetail = reactive<any>({
+  id: "",
+  type: "สมรรถนะหลัก",
+  name: "สมรรถนะ 1",
+  definition: "",
+  criteria: "",
+});
+const formScore = reactive<any>({
+  score1: "",
+  score2: "",
+  score3: "",
+  score4: "",
+  score5: "",
+});
+
+const fieldDetailLabels = {
+  type: "ประเภทสมรรถนะ",
+  name: "ชื่อสมรรถนะ",
+  definition: "คำจำกัดความ",
+};
+
+const fieldLabels = {
+  score1: "1",
+  score2: "2",
+  score3: "3",
+  score4: "4",
+  score5: "5",
+};
+
+const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
+
+const visibleColumns = ref<String[]>(["level", "description"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "center",
+    label: "ระดับสมรรถนะ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+
+function clickList(index: string, data: any) {
+  const dataCapacityDetails = data.capacityDetails.sort(
+    (a: any, b: any) => a.level - b.level
+  );
+  showLoader();
+  setTimeout(() => {
+    hideLoader();
+  }, 100);
+  formScore.score1 = "";
+  formScore.score2 = "";
+  formScore.score3 = "";
+  formScore.score4 = "";
+  formScore.score5 = "";
+  listCheck.value = index as string;
+
+  formDetail.id = data.id;
+  formDetail.type = data.type;
+  formDetail.name = data.name;
+  formDetail.definition = data.description;
+  dataListCapacityDetails.value = dataCapacityDetails;
+  // formScore.score1 = dataCapacityDetails[0].description;
+  // formScore.score2 = dataCapacityDetails[1].description;
+  // formScore.score3 = dataCapacityDetails[2].description;
+  // formScore.score4 = dataCapacityDetails[3].description;
+  // formScore.score5 = dataCapacityDetails[4].description;
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  type.value = "";
+  search.value = "";
+  listCheck.value = "";
+  formScore.score1 = "";
+  formScore.score2 = "";
+  formScore.score3 = "";
+  formScore.score4 = "";
+  formScore.score5 = "";
+  formDetail.id = "";
+  formDetail.type = "";
+  formDetail.name = "";
+  formDetail.definition = "";
+  formDetail.criteria = "";
+  idProps.value = null;
+  // weight.value = null;
+  expectedLevel.value = null;
+
+  dataListCapacityDetails.value = [];
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {
+  if (formDetail.id == "") {
+    dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
+  } else {
+    dialogConfirm($q, () => {
+      const url = idProps.value
+        ? config.API.kpiUserCapacity + `/${idProps.value}`
+        : config.API.kpiUserCapacity;
+      const body = {
+        kpiUserEvaluationId: idParam.value,
+        kpiCapacityId: formDetail.id,
+        level: expectedLevel.value.toString(),
+        weight: weight.value,
+      };
+      showLoader();
+      http[idProps.value ? `put` : `post`](url, body)
+        .then((res) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+          props.getDataList?.(competencyType.value);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.KpiCapacity + `?type=${type.value}`)
+    .then((res) => {
+      const data = res.data.result.data;
+      listTarget.value = data;
+      listTargetMain.value = data;
+      if (data.capacityDetails) {
+        formScore.score1 = data.capacityDetails[0].description;
+        formScore.score2 = data.capacityDetails[1].description;
+        formScore.score3 = data.capacityDetails[2].description;
+        formScore.score4 = data.capacityDetails[3].description;
+        formScore.score5 = data.capacityDetails[4].description;
+      }
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+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}`)
+    .then((res) => {
+      const list = listTargetMain.value;
+      const data = res.data.result;
+      const target = list.find((item: any) => item.name == data.name);
+
+      const dataListCriteria = target.capacityDetails.sort(
+        (a: any, b: any) => a.level - b.level
+      );
+
+      listCheck.value = data.name as string;
+      formDetail.name = data.name;
+
+      weight.value = data.weight;
+      expectedLevel.value = data.level;
+
+      formDetail.id = target.id;
+      formDetail.type = target.type;
+      formDetail.name = target.name;
+      formDetail.definition = target.description;
+
+      dataListCapacityDetails.value = dataListCriteria;
+    })
+    .catch((e) => {})
+    .finally(() => {});
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      type.value = competencyType.value;
+      getData();
+      if (idProps.value) {
+        setTimeout(() => {
+          getDataById();
+        }, 500);
+      } else {
+        if (type.value == "HEAD") {
+          expectedLevel.value = store.defaultCompetencyCoreLevel;
+        } else if (type.value == "GROUP") {
+          expectedLevel.value = store.defaultCompetencyGroupLevel;
+        } else {
+          expectedLevel.value = null;
+        }
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
+          <div class="row">
+            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+              <div class="col-12 q-col-gutter-sm fit">
+                <div class="col-12">
+                  <q-select
+                    v-model="type"
+                    outlined
+                    label="ประเภทสมรรถนะ"
+                    dense
+                    readonly
+                    bg-color="white"
+                    option-label="name"
+                    option-value="id"
+                    :options="competencyTypeOp"
+                    emit-value
+                    :class="getclass()"
+                    map-options
+                  />
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    bg-color="white"
+                    :class="getclass()"
+                    @update:model-value="filterTxt"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon
+                        v-if="search !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="(search = ''), (listTarget = listTargetMain)"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+                <div class="col-12">
+                  <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.name"
+                            clickable
+                            v-ripple
+                            :active="listCheck === item.name"
+                            active-class="my-menu-link"
+                            @click="clickList(item.name, item)"
+                          >
+                            <q-item-section class="q-pa-none">
+                              <div class="row items-center">
+                                <div class="col-12">
+                                  <span>{{ item.name }}</span>
+                                </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>
+              </div>
+            </div>
+
+            <div class="col-9 q-pa-md q-col-gutter-sm">
+              <span class="text-body2 text-weight-medium"
+                >รายละเอียดสมรรถนะ</span
+              >
+
+              <div class="row q-col-gutter-sm">
+                <div class="col-5 row">
+                  <q-card bordered class="fit q-pa-sm no-shadow">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-8">
+                          <span v-if="field == 'type'">{{
+                            formDetail[field]
+                              ? store.convertCompetencyType(formDetail[field])
+                              : "-"
+                          }}</span>
+                          <span
+                            v-else-if="field == 'definition'"
+                            v-html="formDetail[field]"
+                          ></span>
+                          <span v-else>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row q-col-gutter-sm q-pa-sm">
+                      <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
+                      <div class="col-8">
+                        <q-input
+                          readonly
+                          v-model="weight"
+                          dense
+                          outlined
+                          lazy-rules
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          mask="###"
+                        />
+                      </div>
+                      <div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
+                      <div class="col-8">
+                        <q-select
+                          :readonly="type == 'HEAD' || type == 'GROUP'"
+                          v-model="expectedLevel"
+                          :options="expectedLevelOp"
+                          dense
+                          emit-value
+                          outlined
+                          lazy-rules
+                          :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับที่คาดหวัง'}`,]"
+                          hide-bottom-space
+                          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>
+                <div class="col-7">
+                  <q-table
+                    flat
+                    bordered
+                    dense
+                    :paging="true"
+                    row-key="level"
+                    class="custom-table2"
+                    virtual-scroll
+                    :rows="dataListCapacityDetails"
+                    hide-pagination
+                    :columns="columns"
+                    :visible-columns="visibleColumns"
+                    v-model:pagination="pagination"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                          class="bg-grey-2"
+                        >
+                          <span class="text-weight-bold">{{ col.label }}</span>
+                        </q-th>
+                      </q-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="(col.name = 'description')">
+                            <span v-html="col.value"></span>
+                          </div>
+                          <div v-else>
+                            {{ col.value }}
+                            <!-- <span v-html="item.description"></span> -->
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                    <template v-slot:no-data="{ icon, message }">
+                      <div
+                        class="q-pa-md text-weight-bold full-width text-center"
+                      >
+                        <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
+                      </div>
+                    </template>
+                  </q-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>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue

@@ -0,0 +1,607 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  FormComment,
+  FormCommentByRole,
+} from "@/modules/14_KPI/interface/request/index";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
+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 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 sendId = ref<string>("");
+
+const splitterModel = ref<number>(40);
+const listTarget = ref<any>([]);
+const listCheck = ref<string>("");
+
+const reasonEvaluator = ref<string>(""); //ผู้ประเมิน
+const reasonCommander = ref<string>(""); //ผู้บังคับบัญชาเหนือขึ้นไป
+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: "",
+  reason: "",
+});
+
+const formDataView = reactive<FormCommentByRole>({
+  id: "",
+  topic: "",
+  reason: "",
+
+  reasonEvaluator: "",
+  reasonCommander: "",
+  reasonCommanderHigh: "",
+});
+
+let count = ref<number>(0);
+function clickList(index: string, data: any) {
+  // if (data.status == "DRAFT") {
+
+  // }
+  listCheck.value = index as string;
+
+  formDataView.id = data.id;
+  formDataView.topic = data.topic;
+  formDataView.reason = data.reason;
+
+  formDataView.reasonEvaluator = data.reasonEvaluator;
+  formDataView.reasonCommander = data.reasonCommander;
+  formDataView.reasonCommanderHigh = data.reasonCommanderHigh;
+
+  reasonEvaluator.value = data.reasonEvaluator ?? "";
+  reasonCommander.value = data.reasonCommander ?? "";
+  reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
+
+  if (count.value >= 1) {
+    reasonEvaluatorRef.value.reset();
+    reasonCommanderRef.value.reset();
+    reasonCommanderHighRef.value.reset();
+  }
+  count.value++;
+  showLoader();
+  setTimeout(() => {
+    hideLoader();
+  }, 100);
+}
+
+function onEdit(index: string, data: any) {
+  modalAdd.value = true;
+  sendId.value = data.id;
+  formDataAdd.topic = data.topic;
+  formDataAdd.reason = data.reason;
+}
+
+function onSubmitAdd() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(
+        config.API.kpiCommentP(
+          "problem",
+          type.value + sendType.value,
+          store.rolePerson.toLowerCase(),
+          sendId.value ? sendId.value : idList.value
+        ),
+        {
+          reason: formDataAdd.reason,
+          topic: formDataAdd.topic,
+        }
+      )
+      .then(async (res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        if (sendId.value) {
+          const id = res.data.result;
+          await closeAdd();
+          const data = listTarget.value.find((item: any) => item.id == id);
+          clickList(id, data);
+        } else {
+          sendId.value = res.data.result;
+          getList();
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onSubmit() {}
+
+function close() {
+  count.value = 0;
+  modal.value = false;
+
+  reasonEvaluator.value = "";
+  reasonCommander.value = "";
+  reasonCommanderHigh.value = "";
+
+  listTarget.value = [];
+  listCheck.value = "";
+}
+
+function closeAdd() {
+  modalAdd.value = false;
+  formDataAdd.topic = "";
+  formDataAdd.reason = "";
+  sendId.value = "";
+  getList();
+}
+
+function getList() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiCommentP(
+        "problem",
+        type.value,
+        store.rolePerson.toLowerCase(),
+        idList.value
+      )
+    )
+    .then((res) => {
+      const data = res.data.result;
+      listTarget.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmitComment(role: string) {
+  dialogConfirm($q, () => {
+    const body = {
+      reason:
+        role == "evaluator"
+          ? reasonEvaluator.value
+          : role == "commander"
+          ? reasonCommander.value
+          : role == "commanderhigh"
+          ? reasonCommanderHigh.value
+          : null,
+    };
+    showLoader();
+    http
+      .put(
+        config.API.kpiCommentP(
+          "problem",
+          type.value,
+          store.rolePerson.toLowerCase(),
+          formDataView.id
+        ),
+        body
+      )
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+
+        getList();
+        setTimeout(() => {
+          if (listCheck.value) {
+            const idCheck = listCheck.value;
+            const data = listTarget.value.find(
+              (item: any) => item.id == idCheck
+            );
+            clickList(idCheck, data);
+          }
+        }, 200);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+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,
+  () => {
+    if (modal.value == true) {
+      getList();
+    }
+  }
+);
+</script>
+<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'"
+                  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"
+              >
+                <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'
+                          "
+                          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'
+                        "
+                        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'
+                          "
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="
+                          formDataView.reasonCommander == null &&
+                          store.rolePerson == 'COMMANDER'
+                        "
+                        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'
+                          "
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="
+                          formDataView.reasonCommanderHigh == null &&
+                          store.rolePerson == 'COMMANDERHIGH'
+                        "
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn
+                          label="บันทึกความคิดเห็น"
+                          color="secondary"
+                          type="submit"
+                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+                </div>
+              </div>
+            </template>
+          </q-splitter>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="min-width: 30vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
+        <DialogHeader
+          :tittle="`${sendId ? 'แก้ไข' : 'เพิ่ม'}หัวข้อรายงานปัญหา`"
+          :close="closeAdd"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="formDataAdd.topic"
+                outlined
+                class="inputgreen"
+                label="หัวข้อรายงานปัญหา"
+                dense
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหัวข้อรายงานปัญหา'}`,]"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formDataAdd.reason"
+                outlined
+                class="inputgreen"
+                label="รายละเอียดปัญหา"
+                dense
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดปัญหา'}`,]"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            label="บันทึกแบบร่าง"
+            color="info"
+            type="submit"
+            @click="
+              () => {
+                sendType = '';
+              }
+            "
+            ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          >
+          <q-btn
+            v-if="sendId !== ''"
+            label="ส่งไปยังผู้ประเมิน"
+            color="secondary"
+            type="submit"
+            @click="
+              () => {
+                sendType = 'send';
+              }
+            "
+            ><q-tooltip>ส่งไปยังผู้ประเมิน</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped>
+.border-right {
+  border-right: 1px solid #000;
+}
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>

src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue

@@ -0,0 +1,523 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  FormComment,
+  FormCommentByRole,
+} from "@/modules/14_KPI/interface/request/index";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
+const store = useKpiDataStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+
+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 listCheck = ref<string>("");
+
+const reasonEvaluator = ref<string>(""); //ผู้ประเมิน
+const reasonCommander = ref<string>(""); //ผู้บังคับบัญชาเหนือขึ้นไป
+const reasonCommanderHigh = ref<string>(""); //ผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง
+
+const reasonEvaluatorRef = ref<any>();
+const reasonCommanderRef = ref<any>();
+const reasonCommanderHighRef = ref<any>();
+
+const formDataAdd = reactive<FormComment>({
+  topic: "",
+  reason: "",
+});
+
+const formDataView = reactive<FormCommentByRole>({
+  id: "",
+  topic: "",
+  reason: "",
+
+  reasonEvaluator: "",
+  reasonCommander: "",
+  reasonCommanderHigh: "",
+});
+
+let count = ref<number>(0);
+function clickList(index: string, data: any) {
+  listCheck.value = index as string;
+
+  formDataView.id = data.id;
+  formDataView.topic = data.topic;
+  formDataView.reason = data.reason;
+
+  formDataView.reasonEvaluator = data.reasonEvaluator;
+  formDataView.reasonCommander = data.reasonCommander;
+  formDataView.reasonCommanderHigh = data.reasonCommanderHigh;
+
+  reasonEvaluator.value = data.reasonEvaluator ?? "";
+  reasonCommander.value = data.reasonCommander ?? "";
+  reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
+
+  if (count.value >= 1) {
+    reasonEvaluatorRef.value.reset();
+    reasonCommanderRef.value.reset();
+    reasonCommanderHighRef.value.reset();
+  }
+  count.value++;
+  showLoader();
+  setTimeout(() => {
+    hideLoader();
+  }, 100);
+}
+
+function onSubmitAdd() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(
+        config.API.kpiCommentP(
+          "progress",
+          type.value,
+          store.rolePerson.toLocaleLowerCase(),
+          idList.value
+        ),
+        {
+          reason: formDataAdd.reason,
+          topic: formDataAdd.topic,
+        }
+      )
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        getList();
+        closeAdd();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onSubmit() {}
+
+function close() {
+  count.value = 0;
+  modal.value = false;
+
+  reasonEvaluator.value = "";
+  reasonCommander.value = "";
+  reasonCommanderHigh.value = "";
+
+  listTarget.value = [];
+  listCheck.value = "";
+}
+
+function closeAdd() {
+  modalAdd.value = false;
+  formDataAdd.topic = "";
+  formDataAdd.reason = "";
+}
+
+function getList() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiCommentP(
+        "progress",
+        type.value,
+        store.rolePerson.toLocaleLowerCase(),
+        idList.value
+      )
+    )
+    .then((res) => {
+      const data = res.data.result;
+      listTarget.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmitComment(role: string) {
+  dialogConfirm($q, () => {
+    const body = {
+      reason:
+        role == "evaluator"
+          ? reasonEvaluator.value
+          : role == "commander"
+          ? reasonCommander.value
+          : role == "commanderhigh"
+          ? reasonCommanderHigh.value
+          : null,
+    };
+    showLoader();
+    http
+      .put(
+        config.API.kpiCommentP(
+          "progress",
+          type.value,
+          store.rolePerson.toLocaleLowerCase(),
+          formDataView.id
+        ),
+        body
+      )
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+
+        getList();
+        setTimeout(() => {
+          if (listCheck.value) {
+            const idCheck = listCheck.value;
+            const data = listTarget.value.find(
+              (item: any) => item.id == idCheck
+            );
+            clickList(idCheck, data);
+          }
+        }, 200);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      getList();
+    }
+  }
+);
+</script>
+<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'"
+                  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="clickList(item.id, item)"
+                        >
+                          <q-item-section class="q-pa-none">
+                            <div class="row items-center">
+                              <div class="col-12">
+                                <span>{{ item.topic }}</span>
+                              </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"
+              >
+                <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'
+                          "
+                          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'
+                        "
+                        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'
+                          "
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="
+                          formDataView.reasonCommander == null &&
+                          store.rolePerson == 'COMMANDER'
+                        "
+                        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'
+                          "
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="
+                          formDataView.reasonCommanderHigh == null &&
+                          store.rolePerson == 'COMMANDERHIGH'
+                        "
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn
+                          label="บันทึกความคิดเห็น"
+                          color="secondary"
+                          type="submit"
+                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+                </div>
+              </div>
+            </template>
+          </q-splitter>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="min-width: 30vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
+        <DialogHeader tittle="เพิ่มหัวข้อความก้าวหน้า" :close="closeAdd" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="formDataAdd.topic"
+                outlined
+                class="inputgreen"
+                label="หัวข้อความก้าวหน้า"
+                dense
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหัวข้อความก้าวหน้า'}`,]"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formDataAdd.reason"
+                outlined
+                class="inputgreen"
+                label="รายละเอียดความก้าวหน้า"
+                dense
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดความก้าวหน้า'}`,]"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped>
+.border-right {
+  border-right: 1px solid #000;
+}
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>

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

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { ref, reactive, watch } 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";
+
+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,
+  success,
+  dialogMessageNotify,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
+
+const formData = reactive({
+  name: "",
+  group: [],
+  target: "",
+  isDevelopment70: false,
+  isDevelopment20: false,
+  isDevelopment10: false,
+  achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
+  achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
+  achievement0: "ไม่ได้ดำเนินการพัฒนา",
+});
+function close() {
+  modal.value = false;
+  id.value = "";
+
+  formData.name = "";
+  formData.group = [];
+  formData.target = "";
+  formData.isDevelopment70 = false;
+  formData.isDevelopment20 = false;
+  formData.isDevelopment10 = false;
+  formData.achievement10 =
+    "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
+  formData.achievement5 =
+    "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
+  formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
+  props.getAll?.();
+}
+
+function onSubmit() {
+  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="`${id ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                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-weight-medium">วิธีการพัฒนา</span>
+            </div>
+            <div class="column">
+              <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
+                label="เป้าหมายการนำไปพัฒนางาน"
+                v-model="formData.target"
+                outlined
+                type="textarea"
+                dense
+                class="inputgreen"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
+                lazy-rules
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-card bordered>
+                <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 class="row q-pa-sm">
+                  <div class="col-4 text-center self-start text-body1">
+                    <span>10</span>
+                  </div>
+                  <div class="col-8">
+                    <q-input
+                      class="inputgreen"
+                      v-model="formData.achievement10"
+                      outlined
+                      dense
+                      label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
+                    ></q-input>
+                  </div>
+                </div>
+                <q-separator />
+                <div class="row q-pa-sm bg-grey-2">
+                  <div class="col-4 text-center self-start text-body1">
+                    <span>5</span>
+                  </div>
+                  <div class="col-8">
+                    <q-input
+                      class="inputgreen"
+                      v-model="formData.achievement5"
+                      outlined
+                      dense
+                      label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
+                    ></q-input>
+                  </div>
+                </div>
+                <q-separator />
+                <div class="row q-pa-sm">
+                  <div class="col-4 text-center self-start text-body1">
+                    <span>0</span>
+                  </div>
+                  <div class="col-8">
+                    <q-input
+                      class="inputgreen"
+                      v-model="formData.achievement0"
+                      outlined
+                      dense
+                      label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
+                    ></q-input>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue

@@ -0,0 +1,53 @@
+<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;
+}
+
+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 });
+
+function close() {
+  modal.value = false;
+}
+</script>
+
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="min-width: 60%">
+      <DialogHeader tittle="เกณฑ์การประเมินสมรรถนะ" :close="close" />
+      <q-separator />
+      <q-card-section class="">
+        <q-card bordered>
+          <div class="bg-grey-2 q-pa-sm">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="text-center col-8">เกณฑ์การประเมิน</div>
+              <div class="text-center col-4">ระดับคะแนน</div>
+            </div>
+          </div>
+          <q-separator />
+          <div v-for="(item, index) in dataListCriteria" :key="item.id">
+            <div :class="`row q-pa-sm ${index %2 !== 0 && 'bg-grey-2'}`">
+              <div class="col-8"><span v-html="item.description"></span></div>
+              <div class="col-4 text-center self-center text-body1 text-weight-bold">
+                <span>{{ item.level }}</span>
+              </div>
+            </div>
+            <q-separator />
+          </div>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue

@@ -0,0 +1,111 @@
+divdiv
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
+
+const dataAchievement = ref<any[]>([]);
+
+function fetchByid(id: string, type: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement(`${type}`) + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataAchievement.value = [
+        {
+          level: "5",
+          val: data.achievement5,
+        },
+        {
+          level: "4",
+          val: data.achievement4,
+        },
+        {
+          level: "3",
+          val: data.achievement3,
+        },
+        {
+          level: "2",
+          val: data.achievement2,
+        },
+        {
+          level: "1",
+          val: data.achievement1,
+        },
+      ];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function closeDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      const type =
+        numpage.value === 1
+          ? "planned"
+          : numpage.value === 2
+          ? "role"
+          : "special";
+      fetchByid(kpiUserPlannedId.value, type);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 45%">
+      <DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <q-card bordered>
+          <div class="bg-grey-2 q-pa-sm">
+            <div
+              class="row text-dark text-body2 text-weight-medium text-weight-bold"
+            >
+              <div class="text-center col-6">ระดับคะแนน</div>
+              <div class="text-center col-6">ผลสำเร็จของงาน</div>
+            </div>
+          </div>
+          <q-separator />
+          <div v-for="(item, index) in dataAchievement" :key="item.id">
+            <div :class="`row q-pa-sm ${index % 2 !== 0 && 'bg-grey-2'}`">
+              <div class="col-6 text-center text-body1">{{ item.level }}</div>
+              <div class="col-6 text-center self-center">
+                <span>{{ item.val }}</span>
+              </div>
+            </div>
+            <q-separator />
+          </div>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>