From 6ebe44e821794d363bdca7b13e1269b4f54a3a2d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 15 Dec 2023 17:23:33 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=A7=E0=B8=88=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=84=E0=B8=B8=E0=B8=93=E0=B8=AA=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4=20=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=94=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=9A=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=84=E0=B8=84=E0=B8=A5=20-=20=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/Stepper.vue             |  14 +-
 .../components/Detail/Tab1.vue                | 139 ++++-
 .../components/Detail/step/step2.vue          | 139 ++++-
 .../components/Detail/viewstep/tableStep1.vue |  41 ++
 .../components/Detail/viewstep/viewStep1.vue  | 560 +++++++++---------
 .../interface/index/evalute.ts                |  17 +
 .../12_evaluatePersonal/store/Evaluate.ts     | 277 ---------
 .../store/EvaluateDetail.ts                   | 285 ++++++++-
 8 files changed, 878 insertions(+), 594 deletions(-)
 create mode 100644 src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
 create mode 100644 src/modules/12_evaluatePersonal/interface/index/evalute.ts

diff --git a/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue b/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
index 3c221f21b..9d73cc7ba 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
@@ -24,10 +24,20 @@ const store = useEvaluateDetailStore();
     >
     </q-step>
 
-    <q-step :name="2" prefix="2" title="จัดเตรียมเอกสาร" :done="store.step > 2">
+    <q-step
+      :name="2"
+      prefix="2"
+      title="จัดเตรียมเอกสารเล่ม 1"
+      :done="store.step > 2"
+    >
     </q-step>
 
-    <q-step :name="3" prefix="3" title="ตรวจสอบเอกสาร" :done="store.step > 3">
+    <q-step
+      :name="3"
+      prefix="3"
+      title="ตรวจสอบเอกสารเล่ม 1"
+      :done="store.step > 3"
+    >
     </q-step>
 
     <q-step
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
index 91569f9d1..9b34515b4 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 
+import type {
+  FormCommand,
+  FormCommandRef,
+} from "@/modules/12_evaluatePersonal/interface/index/evalute";
+
 import Stepper from "@/modules/12_evaluatePersonal/components/Detail/Stepper.vue";
 import Step1 from "@/modules/12_evaluatePersonal/components/Detail/step/step1.vue";
 import Step2 from "@/modules/12_evaluatePersonal/components/Detail/step/step2.vue";
@@ -29,16 +34,61 @@ const $q = useQuasar();
 const externalLink =
   "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
 
-function onCilckNextStep() {
-  store.step < 9 &&
-    dialogConfirm(
-      $q,
-      () => {
-        store.step++;
-      },
-      "ยืนยันการดำเนินการ",
-      "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-    );
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
+
+const elementaryFullNameRef = ref<object | null>(null);
+const elementaryPositonRef = ref<object | null>(null);
+const abovelevelFullnameRef = ref<object | null>(null);
+const abovelevelPositionRef = ref<object | null>(null);
+
+const formCommandRef: FormCommandRef = {
+  elementaryFullName: elementaryFullNameRef,
+  elementaryPosition: elementaryPositonRef,
+  abovelevelFullname: abovelevelFullnameRef,
+  abovelevelPosition: abovelevelPositionRef,
+};
+
+async function onCilckNextStep() {
+  const functionCreateDoc: (() => Promise<void>) | null =
+    store.step === 1
+      ? await saveStep1
+      : store.step === 3
+      ? await saveStep3
+      : store.step === 4
+      ? await saveStep4
+      : store.step === 5
+      ? await saveStep5
+      : store.step === 5
+      ? await saveStep5
+      : store.step === 6
+      ? await saveStep6
+      : store.step === 7
+      ? await saveStep7
+      : store.step === 8
+      ? await saveStep8
+      : store.step === 9
+      ? await saveStep9
+      : null;
+  store.step === 2
+    ? validateStep2()
+    : store.step < 9 &&
+      dialogConfirm(
+        $q,
+        () => {
+          functionCreateDoc?.();
+          store.step++;
+        },
+        "ยืนยันการดำเนินการ",
+        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+      );
+
+  // functionCreateDoc?.();
+  // store.step < 9 &&
 }
 
 function onCilckprPeviousStep() {
@@ -53,6 +103,71 @@ function onCilckprPeviousStep() {
     );
 }
 
+function updateformCommand(val: any, ref: any) {
+  formCommand.elementaryFullName = val.elementaryFullName;
+  formCommand.elementaryPosition = val.elementaryPosition;
+  formCommand.abovelevelFullname = val.abovelevelFullname;
+  formCommand.abovelevelPosition = val.abovelevelPosition;
+
+  elementaryFullNameRef.value = ref.elementaryFullNameRef;
+  elementaryPositonRef.value = ref.elementaryPositonRef;
+  abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
+  abovelevelPositionRef.value = ref.abovelevelPositionRef;
+}
+
+async function validateStep2() {
+  const hasError = [];
+  for (const key in formCommandRef) {
+    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+      const property = formCommandRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    saveStep2();
+  } else {
+    console.log("ไม่ผ่าน");
+  }
+}
+
+async function saveStep1() {
+  console.log("Save 1");
+}
+async function saveStep2() {
+  dialogConfirm(
+    $q,
+    () => {
+      store.step++;
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
+}
+async function saveStep3() {
+  console.log("Save 3");
+}
+async function saveStep4() {
+  console.log("Save 4");
+}
+async function saveStep5() {
+  console.log("Save 5");
+}
+async function saveStep6() {
+  console.log("Save 6");
+}
+async function saveStep7() {
+  console.log("Save 7");
+}
+async function saveStep8() {
+  console.log("Save 8");
+}
+async function saveStep9() {
+  console.log("Save 9");
+}
+
 onMounted(() => {
   store.step = 1;
 });
@@ -87,7 +202,7 @@ onMounted(() => {
           <q-card flat bordered class="col-12 q-pa-md">
             <q-card-section>
               <Step1 v-if="store.step === 1" />
-              <Step2 v-if="store.step === 2" />
+              <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
               <Step3 v-if="store.step === 3" />
               <Step4 v-if="store.step === 4" />
               <Step5 v-if="store.step === 5" />
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
index f4ea37d17..b66b0246b 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useQuasar } from "quasar";
 
+import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
@@ -17,6 +19,30 @@ const fullName = ref<string>(
   keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
 );
 
+const emit = defineEmits(["update:form"]);
+
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
+
+const elementaryFullNameRef = ref<object | null>(null);
+const elementaryPositonRef = ref<object | null>(null);
+const abovelevelFullnameRef = ref<object | null>(null);
+const abovelevelPositionRef = ref<object | null>(null);
+
+const updateInput = (value: any) => {
+  const ref = {
+    elementaryFullNameRef: elementaryFullNameRef.value,
+    elementaryPositonRef: elementaryPositonRef.value,
+    abovelevelFullnameRef: abovelevelFullnameRef.value,
+    abovelevelPositionRef: abovelevelPositionRef.value,
+  };
+  emit("update:form", value, ref);
+};
+
 const fileEvaluation1 = ref<any>();
 const fileEvaluation2 = ref<any>();
 const fileEvaluation3 = ref<any>();
@@ -69,6 +95,16 @@ async function onClickDowloadFile(
   };
   await genReport(body, fileName);
 }
+
+onMounted(() => {
+  const ref = {
+    elementaryFullNameRef: elementaryFullNameRef.value,
+    elementaryPositonRef: elementaryPositonRef.value,
+    abovelevelFullnameRef: abovelevelFullnameRef.value,
+    abovelevelPositionRef: abovelevelPositionRef.value,
+  };
+  emit("update:form", formCommand, ref);
+});
 </script>
 
 <template>
@@ -114,7 +150,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation1"
                   class="col-12"
@@ -129,7 +165,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -180,7 +216,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation2"
                   class="col-12"
@@ -195,7 +231,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -246,7 +282,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation3"
                   class="col-12"
@@ -261,7 +297,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -312,7 +348,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation4"
                   class="col-12"
@@ -327,7 +363,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -379,7 +415,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation5"
                   class="col-12"
@@ -394,7 +430,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -445,7 +481,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation6"
                   class="col-12"
@@ -460,7 +496,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -470,6 +506,83 @@ async function onClickDowloadFile(
         </div>
       </q-card>
     </div>
+
+    <!-- เลือกผู้เซ็นเอกสาร -->
+    <div class="col-12">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          เลือกผู้เซ็นเอกสาร
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาชั้นต้น
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="elementaryFullNameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    v-model="formCommand.elementaryFullName"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                  />
+                  <q-input
+                    ref="elementaryPositonRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.elementaryPosition"
+                    @update:model-value="updateInput(formCommand)"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="abovelevelFullnameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    v-model="formCommand.abovelevelFullname"
+                    label="ชื่อ-นามสกุล"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                  <q-input
+                    ref="abovelevelPositionRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.abovelevelPosition"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
   </div>
 
   <!-- Dialog Full Screen -->
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
new file mode 100644
index 000000000..e2600c51b
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps({
+  columns: {
+    type: Object,
+    require: true,
+  },
+});
+</script>
+
+<template>
+  <d-table
+    ref="table"
+    :columns="props.columns"
+    row-key="name"
+    flat
+    bordered
+    dense
+    class="custom-header-table"
+    style="width: 580px"
+  >
+    <!-- <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </q-th>
+        <q-th auto-width />
+      </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>
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template> -->
+  </d-table>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index 7bb1f2bf1..d102f1809 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -1,304 +1,292 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";
+import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
 
-const storageEvalutuon = useEvalutuonStore();
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
 const {
-  rows,
   columnsLicense,
   columnPeriodhistory,
   columnTrainingHistory,
   columnProjectsProposed,
-} = storeToRefs(storageEvalutuon);
+} = store;
 </script>
 
 <template>
-  <q-card class="bg-grey-2">
-    <div class="text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
-    </div>
+  <div>
+    <q-scroll-area style="height: 450px; max-width: 100%">
+      <div class="q-pa-xs">
+        <q-card class="q-gutter-md" style="max-width: 100%">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="นาย"
+                  label="คำนำหน้าชื่อ"
+                />
+              </div>
 
-    <q-separator />
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ธนพนธ์ แสงจันทร์"
+                  label="ชื่อ - นามสกุล"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  model-value="19/03/44"
+                  readonly
+                  label="วันเดือนปีเกิด"
+                >
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ไม่มี"
+                  label="ตำแหน่ง"
+                />
+              </div>
 
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="นาย" label="คำนำหน้าชื่อ" />
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="กย.11"
+                  label="ตำแหน่งเลขที่"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="หน่วยใหม่กับหน่วยเก่า"
+                  label="สังกัด"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="1,0000"
+                  label="เงินเดือน"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ระดับปัจจุบัน"
+                  label="ระดับปัจจุบัน"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ระดับที่ประเมิน"
+                  label="ระดับที่ประเมิน"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="1000 ปี"
+                  label="อายุราชการ"
+                />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ปริญญาตรี"
+                  label="ระดับศึกษา"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="มหาวิทยาลัยก."
+                  label="สถานศึกษา"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  model-value="19/03/44"
+                  readonly
+                  label="ตั้งแต่"
+                >
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input borderless model-value="19/03/44" readonly label="ถึง">
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  model-value="19/03/44"
+                  readonly
+                  label="วันทราสำเร็จการศึกษา"
+                >
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ปริญญาตรี"
+                  label="วุฒิการศึกษาในตําแหน่ง"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ปริญญาตรี"
+                  label="วุฒิการศึกษา"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="-"
+                  label="สาขาวิชา/ทาง"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input borderless readonly model-value="-" label="ทุน" />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="3.33"
+                  label="เกรดเฉลี่ย"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-6">
+                <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnsLicense" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnPeriodhistory" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnTrainingHistory" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnTrainingHistory" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm"
+                >ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span
+              >
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnProjectsProposed" />
+              </div>
+            </div>
+          </q-card>
+        </q-card>
       </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="ธนพนธ์ แสงจันทร์"
-          label="ชื่อ - นามสกุล"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          model-value="19/03/44"
-          readonly
-          label="วันเดือนปีเกิด"
-        >
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-
-   
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="ไม่มี" label="ตำแหน่ง" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="กย.11"
-          label="ตำแหน่งเลขที่"
-        />
-      </div>
-
-      <div class="col-xs-9 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          readonly
-          model-value="หน่วยใหม่กับหน่วยเก่า"
-          label="สังกัด"
-        />
-      </div>
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="" label="เงินเดือน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="" label="ระดับปัจจุบัน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="" label="ระดับที่ประเมิน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="1000 ปี" label="อายุราชการ" />
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="ปริญญาตรี"
-          label="ระดับศึกษา"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="มหาวิทยาลัยก."
-          label="สถานศึกษา"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless model-value="19/03/44" readonly label="ตั้งแต่">
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless model-value="19/03/44" readonly label="ถึง">
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          model-value="19/03/44"
-          readonly
-          label="วันทราสำเร็จการศึกษา"
-        >
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          readonly
-          model-value="ปริญญาตรี"
-          label="วุฒิการศึกษาในตําแหน่ง"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          readonly
-          model-value="ปริญญาตรี"
-          label="วุฒิการศึกษา"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input borderless readonly model-value="-" label="สาขาวิชา/ทาง" />
-      </div>
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="-" label="ทุน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="3.33" label="เกรดเฉลี่ย" />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnsLicense"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnPeriodhistory"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnTrainingHistory"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnTrainingHistory"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnProjectsProposed"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
+    </q-scroll-area>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
 .size-icon {
-    font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
-  }
-
+  font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
+}
 </style>
-@/modules/12_evaluatePersonal/store/evaluate
\ No newline at end of file
+@/modules/12_evaluatePersonal/store/evaluate
diff --git a/src/modules/12_evaluatePersonal/interface/index/evalute.ts b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
new file mode 100644
index 000000000..60f9e8e24
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@@ -0,0 +1,17 @@
+interface FormCommand {
+  elementaryFullName: string;
+  elementaryPosition: string;
+  abovelevelFullname: string;
+  abovelevelPosition: string;
+}
+
+interface FormCommandRef {
+  elementaryFullName: object | null;
+  elementaryPosition: object | null;
+  abovelevelFullname: object | null;
+  abovelevelPosition: object | null;
+
+  [key: string]: any;
+}
+
+export type { FormCommand, FormCommandRef };
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index f94e7d0f9..a6ed09fd3 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -28,7 +28,6 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
         return "ตรวจสอบความถูกต้องของเอกสารเล่ม";
       case "DONE":
         return "เสร็จสิ้น";
-        
     }
   }
 
@@ -140,287 +139,11 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
     },
   ]);
 
-  const columnsLicense = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "ชื่อใบอนุณาต",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "หน่วยงานผู้ออกใบอนุญาต",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "เลขที่ใบอนุญาต",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันที่ออกใบอนุญาต",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันที่หมดอายุ",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-  ]);
-
-  const columnPeriodhistory = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "วัน เดือน ปี",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "สังกัด",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่ง",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่งเลขที่",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "สายงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ด้าน/สาขา",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่งประเภท",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ระดับ",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่งทางการบริหาร",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ด้านทางการบริหาร",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
-  const columnTrainingHistory = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "หัวข้อการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ปีที่อบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
-  const columnProjectsProposed = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "วันที่ได้รับ",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ผู้มีอำนาจลงนาม",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "รายละเอียด",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-     
-    },
-    {
-      name: "",
-      align: "left",
-      label: "เลขที่คำสั่ง",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "เอกสารอ้างอิง",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
   return {
     visibleColumns,
     columns,
     rows,
     convertStatus,
     fetchData,
-    columnsLicense,
-    columnPeriodhistory,
-    columnTrainingHistory,
-    columnProjectsProposed,
   };
 });
diff --git a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
index 0940a9c5e..44796b05e 100644
--- a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
+++ b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
@@ -1,14 +1,15 @@
-
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+import type { QTableProps } from "quasar";
+
 export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   const tabMenu = ref<string>("1");
   const step = ref<number>(1);
   const titel = ref<string[]>([
     "ตรวจสอบคุณสมบัติ",
-    "จัดเตรียมเอกสาร",
-    "ตรวจสอบเอกสาร",
+    "จัดเตรียมเอกสารเล่ม 1",
+    "ตรวจสอบเอกสารเล่ม 1",
     "รอตรวจสอบคุณสมบัติ",
     "ประกาศบนเว็บไซต์",
     "จัดเตรียมเอกสารเล่ม 2",
@@ -19,10 +20,286 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
 
   const tabPanels = ref<string>("1");
 
+  const columnsLicense = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "ชื่อใบอนุณาต",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หน่วยงานผู้ออกใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เลขที่ใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันที่ออกใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันที่หมดอายุ",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+  ]);
+
+  const columnPeriodhistory = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "วัน เดือน ปี",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "สังกัด",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "สายงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ด้าน/สาขา",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งประเภท",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งทางการบริหาร",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ด้านทางการบริหาร",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  const columnTrainingHistory = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หัวข้อการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ปีที่อบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  const columnProjectsProposed = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "วันที่ได้รับ",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ผู้มีอำนาจลงนาม",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "รายละเอียด",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เลขที่คำสั่ง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เอกสารอ้างอิง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
   return {
     tabMenu,
     step,
     titel,
     tabPanels,
+    /** step1*/
+    columnsLicense,
+    columnPeriodhistory,
+    columnTrainingHistory,
+    columnProjectsProposed,
   };
-});
\ No newline at end of file
+});