From 61b38de30c2c11f594b67319c1c8c77ab692139e Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 13 May 2024 17:50:26 +0700
Subject: [PATCH] =?UTF-8?q?dialog=20=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=80?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AA=E0=B8=A3=E0=B9=87=E0=B8=88=E0=B8=94=E0=B8=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/KPI/api.kpis.ts                       |   3 +
 .../Tab/Dialog/DialogCommentProblem.vue       | 511 ++++++++++++++++++
 .../Tab/Dialog/DialogCommentProgress.vue      | 491 +++++++++++++++++
 src/modules/08_KPI/interface/request/index.ts |  11 +
 4 files changed, 1016 insertions(+)
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue

diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index 27c47d2..fc00ea6 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -13,6 +13,7 @@ const Kpiorg = `${env.API_URI}/org/profile/commander`;
 
 const KpiUser = `${env.API_URI}/kpi/user`;
 const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
+const kpiReason = `${env.API_URI}/kpi/reason`;
 export default {
   kpiPeriod,
   kpiEvaluation,
@@ -38,4 +39,6 @@ export default {
   kpiReqEdit: (id: string) => `${kpiEvaluation}/edit/${id}`,
   /**ประเมิน*/
   kpiAchievementDevelop: `${kpiAchievement}/development`,
+
+  kpiCommentP:(typP:string,type:string,role:string,id:string)=>`${kpiReason}/${typP}/${type}/${role}/${id}`
 };
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
new file mode 100644
index 0000000..9184b6f
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
@@ -0,0 +1,511 @@
+<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/08_KPI/interface/request/index";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+
+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 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) {
+  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("problem", type.value+sendType.value, "user", idList.value),
+        {
+          reason: formDataAdd.reason,
+          topic: formDataAdd.topic,
+        }
+      )
+      .then((res) => {
+        console.log(res.data);
+        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("problem", type.value, "user", 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, role, 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">
+      {{ type }}
+      <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
+                  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
+                    ref="reasonEvaluatorRef"
+                    greedy
+                    @submit.prevent
+                    @validation-success="onSubmitComment('evaluator')"
+                    class="full-width"
+                  >
+                    <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"
+                          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"
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn
+                          label="บันทึกและส่งให้ผู้บังคับ"
+                          color="secondary"
+                          type="submit"
+                          ><q-tooltip
+                            >บันทึกและส่งให้ผู้บังคับ</q-tooltip
+                          ></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+
+                  <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
+                  <q-form
+                    class="full-width"
+                    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"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="formDataView.reasonCommander == null"
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn label="บันทึก" color="secondary" type="submit"
+                          ><q-tooltip>บันทึก</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+
+                  <q-form
+                    class="full-width"
+                    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"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="formDataView.reasonCommanderHigh == null"
+                        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="info"
+            type="submit"
+            @click="
+              () => {
+                sendType = '';
+              }
+            "
+            ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          >
+          <q-btn
+            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>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
new file mode 100644
index 0000000..cb20116
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -0,0 +1,491 @@
+<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/08_KPI/interface/request/index";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+
+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 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, "user", idList.value),
+        {
+          reason: formDataAdd.reason,
+          topic: formDataAdd.topic,
+        }
+      )
+      .then((res) => {
+        console.log(res.data);
+        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, "user", 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, role, 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
+                  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
+                    ref="reasonEvaluatorRef"
+                    greedy
+                    @submit.prevent
+                    @validation-success="onSubmitComment('evaluator')"
+                    class="full-width"
+                  >
+                    <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"
+                          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"
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn
+                          label="บันทึกและส่งให้ผู้บังคับ"
+                          color="secondary"
+                          type="submit"
+                          ><q-tooltip
+                            >บันทึกและส่งให้ผู้บังคับ</q-tooltip
+                          ></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+
+                  <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
+                  <q-form
+                    class="full-width"
+                    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"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="formDataView.reasonCommander == null"
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn label="บันทึก" color="secondary" type="submit"
+                          ><q-tooltip>บันทึก</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+
+                  <q-form
+                    class="full-width"
+                    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"
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="formDataView.reasonCommanderHigh == null"
+                        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>
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
index c8eb73b..2ae2e39 100644
--- a/src/modules/08_KPI/interface/request/index.ts
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -53,6 +53,16 @@ interface FormComment {
   reason: string;
 }
 
+interface FormCommentByRole {
+  id: string;
+  topic: string;
+  reason: string;
+
+  reasonEvaluator: string;
+  reasonCommander: string;
+  reasonCommanderHigh: string;
+}
+
 export type {
   FormProfile,
   FormDataAssigned,
@@ -60,4 +70,5 @@ export type {
   ListCriteria,
   ListCapacity,
   FormComment,
+  FormCommentByRole,
 };