Merge branch 'develop' into devTee

2023-12-15 17:30:06 +07:00 · 2023-12-15 17:30:06 +07:00 · b659857c7b
commit b659857c7b
parent 480393efe3 4ec797c4ec
24 changed files with 1145 additions and 796 deletions
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/src/modules/09_leave/components/1_Work/DialogDetail.vue
@ -4,6 +4,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";

+/** import Type*/
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";

 /** importStores */
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@ -85,6 +85,10 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
  updateProp(pagination.value, currentPage.value);
 });

+/**
+ * function updatePageSize
+ * @param newPagination  PageSize
+ */
 function updateRowsPerPagen(newPagination: any) {
  pagination.value.rowsPerPage = newPagination.rowsPerPage;
  currentPage.value = 1;
@ -122,8 +126,6 @@ function updateRowsPerPagen(newPagination: any) {
          @click.prevent="clickDetail(props.row)"
        >
          <div v-if="col.name == 'no'">
-            <!-- {{ props.rowIndex + 1 }} -->
-
            {{
              (currentPage - 1) * Number(pagination.rowsPerPage) +
              props.rowIndex +
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@ -7,6 +7,7 @@ import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+
 /** useStore */
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
--- a/src/modules/09_leave/components/1_Work/ToolBarDate.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
@ -4,6 +4,7 @@ import { ref } from "vue";
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+
 /** useStore */
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
--- a/src/modules/09_leave/components/3_Report/DetailReport.vue
+++ b/src/modules/09_leave/components/3_Report/DetailReport.vue
@ -11,8 +11,7 @@ import { useCounterMixin } from "@/stores/mixin";
 const route = useRoute();

 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, date2Thai, monthYear2Thai } =
-  mixin;
+const { date2Thai, monthYear2Thai } = mixin;

 const typeReport = route.params.type.toString();
 const titleReport = computed(() => {
@ -59,6 +58,12 @@ const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
 const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);

+/**
+ * function ค้นหาข้อมูล Option
+ * @param val คำค้นหา
+ * @param update  function
+ * @param type   ประเภท option
+ */
 function filterFnOptions(val: any, update: Function, type: string) {
  switch (type) {
    case "filterType":
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@ -2,6 +2,7 @@
 import { ref, reactive, watch } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useQuasar } from "quasar";

 /** ImportType */
 import type {
@ -11,10 +12,12 @@ import type {

 /** ImportComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importstore*/
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";

 const $q = useQuasar();
+
 const mixin = useCounterMixin();
 const { dialogConfirm, success, messageError } = mixin;

@ -142,7 +145,7 @@ function close() {
 /***/
 watch(
  () => props.modal,
-  (newDetailData, oldDetailData) => {
+  () => {
    if (props.editCheck === "add") {
      formData.startTimeMorning = "";
      formData.endTimeMorning = "";
--- a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
+++ b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
@ -3,7 +3,6 @@ import { ref, reactive, watch, onMounted } from "vue";
 import { date, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";

 /** importType */
 import type {
@ -15,6 +14,7 @@ import type {
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+
 /** useStore */
 const dataStore = useChangeRoundDataStore();
 const mixin = useCounterMixin();
@ -27,9 +27,7 @@ const {
  success,
 } = mixin;

-const route = useRoute();
 const $q = useQuasar();
-const roundOp = ref<any>([]);

 /**Hook */
 onMounted(async () => {
@ -78,7 +76,7 @@ const dataToday = ref<Date>(new Date());
 function onSubmit() {
  dialogConfirm(
    $q,
-    async () => {
+    () => {
      changeRound();
      props.closeDialog?.();
    },
@ -107,6 +105,7 @@ async function changeRound() {
    });
 }

+const roundOp = ref<any>([]);
 /**
 *ประวัติการเปลี่ยนรอบการปฏิบัติงาน"
 *
@ -138,9 +137,8 @@ async function fetchDataOption() {
 }

 // paging
-const page = ref<number>(1);
 const pageSize = ref<number>(10);
-const filter = ref<string>(""); //search data table
+
 /**
 * ฟังก์ชั่น api เปลี่ยนหน้า
 * @param pageVal page
@ -169,7 +167,6 @@ watch(
  }
 );
 const emit = defineEmits(["update:change-page"]);
-// Pagination - update rowsPerPage
 async function updatePagination(newPagination: any) {
  initialPagination.value = newPagination;
  currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
@ -192,7 +189,7 @@ function close() {
 }
 watch(
  () => props.modal,
-  async (newDetailData, oldDetailData) => {
+  async () => {
    if (props.editCheck === "edit") {
      formData.round = "";
      formData.reson = "";
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@ -1,28 +1,38 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect, watch } from "vue";
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
 import type {
  dataRowRound,
  MyObjectRoundRef,
 } from "@/modules/09_leave/interface/response/specialTime";
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-import http from "@/plugins/http";
-import config from "@/app.config";

+/** importStores*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
+/** useStore*/
 const SpecialTimeStore = useSpecialTimeStore();
-const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  date2Thai,
-  showLoader,
-  success,
-  messageError,
-  hideLoader,
-} = mixin;
-const currentDate = ref<Date | null>(new Date());
+const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
+
+const $q = useQuasar();
+
+/** props*/
+const props = defineProps({
+  modal: { type: Boolean, default: "" },
+  editCheck: { type: String, default: "" },
+  date: { type: String, default: "" },
+  dateFix: { type: String, default: "" },
+  id: { type: String, default: "" },
+  closeDialog: { type: Function, default: () => {} },
+  detailData: Object,
+});
+
 const checkInRef = ref<Object | null>(null);
 const checkOutRef = ref<Object | null>(null);
 const checkInStatusRef = ref<Object | null>(null);
@ -35,8 +45,8 @@ const formData = reactive<dataRowRound>({
  note: "",
  checkInStatus: "",
  checkOutStatus: "",
-  checkInEdit:false,
-  checkOutEdit:false
+  checkInEdit: false,
+  checkOutEdit: false,
 });

 const objectRound: MyObjectRoundRef = {
@ -47,6 +57,7 @@ const objectRound: MyObjectRoundRef = {
  note: reasonRef,
 };

+/** function validateFom*/
 function validateForm() {
  const hasError = [];
  for (const key in objectRound) {
@ -60,37 +71,26 @@ function validateForm() {
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
-    console.log(hasError);
  } else {
    console.log(hasError);
  }
 }

-const props = defineProps({
-  modal: { type: Boolean, default: "" },
-  editCheck: { type: String, default: "" },
-  date: { type: String, default: "" },
-  dateFix: { type: String, default: "" },
-  id: { type: String, default: "" },
-  closeDialog: { type: Function, default: () => {} },
-  detailData: Object,
-});
-
+/** function confrim*/
 function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
-      props.closeDialog?.();
      await approveData();
+      props.closeDialog?.();
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
-  console.log(props.dateFix);
-  console.log(props.id);
 }

-const approveData = async () => {
+/** function บันทึกข้อมูล*/
+async function approveData() {
  showLoader();
  const body = {
    checkInTime: formData.checkIn,
@ -101,27 +101,28 @@ const approveData = async () => {
  };
  await http
    .put(config.API.specialTimeApprove(props.id), body)
-    .then((res) => {
+    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
-      hideLoader();
    })
    .finally(async () => {
      SpecialTimeStore.fetchData();
      hideLoader();
    });
-};
+}

+/** function closeDialog*/
 function close() {
  if (props.closeDialog) {
    props.closeDialog();
  }
 }
+
 watch(
  () => props.modal,
-  (newDetailData, oldDetailData) => {
+  () => {
    if (props.editCheck === "APPROVE") {
      formData.checkIn = "";
      formData.checkOut = "";
@ -202,8 +203,16 @@ watch(
              </template>
            </datepicker>
            <div class="column">
-              <q-checkbox disabled :model-value="formData.checkInEdit" label="ขอแก้ไขเวลาช่วงเช้า" />
-              <q-checkbox disabled :model-value="formData.checkOutEdit" label="ขอแก้ไขเวลาช่วงบ่าย" />
+              <q-checkbox
+                disabled
+                :model-value="formData.checkInEdit"
+                label="ขอแก้ไขเวลาช่วงเช้า"
+              />
+              <q-checkbox
+                disabled
+                :model-value="formData.checkOutEdit"
+                label="ขอแก้ไขเวลาช่วงบ่าย"
+              />
            </div>
          </div>
          <div
--- a/src/modules/09_leave/components/4_specialTime/Table.vue
+++ b/src/modules/09_leave/components/4_specialTime/Table.vue
@ -1,3 +1,94 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+/** import Type*/
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+/** import Stoer*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
+const attrs = ref<any>(useAttrs());
+const SpecialTimeStore = useSpecialTimeStore();
+const mixin = useCounterMixin();
+
+const { date2Thai } = mixin;
+const { searchFilterTable } = SpecialTimeStore;
+
+/** props*/
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+/**emit Function*/
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+
+/** pagination*/
+const paging = ref<boolean>(true);
+const pagination = ref({
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+/**
+ * function update filter
+ * @param value คำค้นหา
+ */
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+/**
+ * function updateVisible
+ * @param value ค่า Visible
+ */
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+</script>
 <template>
  <div class="q-pb-sm row q-col-gutter-sm">
    <!--  -->
@ -104,83 +195,7 @@
    </template>
  </d-table>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";

-const SpecialTimeStore = useSpecialTimeStore();
-const { searchFilterTable } = SpecialTimeStore;
-const mixin = useCounterMixin();
-const { hideLoader, monthYear2Thai, date2Thai } = mixin;
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
-
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
-});
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
-
-const checkAdd = () => {
-  props.add();
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-</script>
 <style lang="scss">
 .icon-color {
  color: #4154b3;
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@ -7,14 +7,14 @@ import type { dataPost } from "@/modules/09_leave/interface/request/changeRound"

 /** importComponents */
 import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
-import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";

 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+
 /** useStore */
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai, dialogMessageNotify } = mixin;
+const { dialogMessageNotify } = mixin;
 const dataStore = useChangeRoundDataStore();

 /** use */
@ -43,8 +43,6 @@ function Openmodal(check: string, detail: any) {
    modal.value = true;
    dataStore.fetchDatainHistory();
  }
-
-  console.log(detail);
 }

 /** Function closePopup */
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@ -31,13 +31,6 @@ const leaveStore = useLeavelistDataStore();

        <q-tab-panel name="2"> <Tab2 /> </q-tab-panel>
      </q-tab-panels>
-      <!-- <ToolBar @update:querySting="updatePaging" />
-      <TableList
-        :page="querySting.page"
-        :rowsPerPage="querySting.pageSize"
-        :maxPage="maxPage"
-        @update:querySting="updatePaging"
-      /> -->
    </q-card>
  </div>
 </template>
--- a/src/modules/09_leave/views/RoundMain.vue
+++ b/src/modules/09_leave/views/RoundMain.vue
@ -15,8 +15,8 @@ const mixin = useCounterMixin();
 const dataStore = useRoundDataStore();
 const { fetchData } = dataStore;
 const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
-const $q = useQuasar(); //ใช้ noti quasar

+const $q = useQuasar(); //ใช้ noti quasar
 const attrs = ref<any>(useAttrs());

 const modal = ref<boolean>(false);
@ -91,7 +91,6 @@ function closeDialog() {

 /**  pagination */
 const pagination = ref({
-  // sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@ -1,23 +1,29 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-import DialogReason from "@/components/Dialogs/PopupReason.vue";
-import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
-import { useRouter } from "vue-router";
-import { identity } from "@fullcalendar/core/internal";

-/**ตัวแปรที่ใช้ */
+/** importType*/
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
+
+/** importComponents*/
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
 const dataSpecialTime = useSpecialTimeStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const router = useRouter();
+
 const { hideLoader, monthYear2Thai, messageError, showLoader, success } = mixin;
+
+const emit = defineEmits(["update:change-page"]);
+
+/**ตัวแปรที่ใช้ */
 const modalUnapprove = ref(false);
 const modalApprove = ref(false);
 const detailData = ref<any>();
@ -30,18 +36,19 @@ const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
 const dateYear = ref<number>(new Date().getFullYear());

-/**ฟังก์ชั่นไม่อนุมัติ */
-const unapprove = async (fullname: string, personId: string) => {
+/**
+ * ฟังก์ชั่นไม่อนุมัติ
+ * @param fullname ชื่อ
+ * @param personId personId
+ */
+async function unapprove(fullname: string, personId: string) {
  id.value = personId;
-  dialogTitle.value = " ไม่อนุมัติคำขอ"// + fullname;
+  dialogTitle.value = " ไม่อนุมัติคำขอ"; // + fullname;
  name.value = fullname;
  modalUnapprove.value = true;
+}

-  // rejectData();
-};
-
-/** function Model */
-//เปิด
+/** function openDialog */
 function openModal(
  data: any,
  check: string,
@ -58,9 +65,9 @@ function openModal(
  if (check === "PENDING") {
    detailData.value = data;
  }
-  console.log(data);
 }
-//ปิด
+
+/** function closeDialog */
 const closeDialog = () => {
  modalUnapprove.value = false;
  modalApprove.value = false;
@ -69,32 +76,28 @@ const closeDialog = () => {

 /** API reject */
 const clickSave = async (reason: string) => {
+  showLoader();
  modalUnapprove.value = false;
  const body = {
    reason: reason,
  };
  await http
    .put(config.API.specialTimeReject(id.value), body)
-    .then((res) => {
+    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
-      dataSpecialTime.fetchData();
+      await dataSpecialTime.fetchData();
+      hideLoader();
    });
-
-  console.log(reason);
 };

 // paging
 const pageSize = ref<number>(10);
-/**
- * ฟังก์ชั่น api เปลี่ยนหน้า
- * @param pageVal page
- * @param pageSizeVal pagesize
- */
+
 // Pagination - initial pagination
 const initialPagination = ref<any>({
  sortBy: null,
@ -102,7 +105,7 @@ const initialPagination = ref<any>({
  page: 1,
  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
 });
-const emit = defineEmits(["update:change-page"]);
+
 // Pagination - page & change page & get new data
 const currentPage = ref<number>(1);
 watch(
@ -131,6 +134,7 @@ const resetFilter = () => {
    filterRef.value.focus();
  }
 };
+
 /** function ค้นหาข้อมูลแล้วอัปเดท*/
 function filterFn() {
  updatePagination(filterKeyword.value);
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/src/modules/09_leave/views/WorkingMain.vue
@ -1,22 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref } from "vue";

 /** import Components */
 import Tab1 from "@/modules/09_leave/components/1_Work/Tab1.vue";
 import Tab2 from "@/modules/09_leave/components/1_Work/Tab2.vue";

-// /** importStores */
-// import { useCounterMixin } from "@/stores/mixin";
-// import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
-
-/** use Store */
-// const mixin = useCounterMixin();
-// const workStore = useWorklistDataStore();
-// const { dateToISO, date2Thai, showLoader, hideLoader } = mixin;
-// const { fetchListLog, fetchListTime } = workStore;
-
 const tab = ref("1");
 </script>
 <template>
@ -41,22 +29,15 @@ const tab = ref("1");

      <q-separator />

-      <q-tab-panels v-model="tab" animated >
+      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="1">
-          <!-- <TableList1 /> -->
-          <!-- <ToolBar /> -->
          <Tab1 />
-          <!-- <TableList /> -->
        </q-tab-panel>

        <q-tab-panel name="2">
-          <!-- <TabList2Vue /> -->
-          <!-- <ToolBarDate /> -->
          <Tab2 />
-          <!-- <TableList /> -->
        </q-tab-panel>
      </q-tab-panels>
-      <!-- </q-card> -->
    </q-card>
  </div>
 </template>
--- a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
@ -22,7 +22,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";

 const type = ref<string>("");
-const rows = ref<DataListRow[]>([])
+const rows = ref<DataListRow[]>([]);
 const $q = useQuasar();
 const selected = ref<ResponseData[]>([]);
 const mixin = useCounterMixin();
@ -125,9 +125,11 @@ const fecthTypeOption = async () => {
    .then((res) => {
      optionsType.value = res.data.result.filter(
        (e: OpType) =>
-          e.commandCode === "C-PM-26" ||
+          e.commandCode === "C-PM-19" ||
+          e.commandCode === "C-PM-20" ||
          e.commandCode === "C-PM-27" ||
-          e.commandCode === "C-PM-28"
+          e.commandCode === "C-PM-28" ||
+          e.commandCode === "C-PM-29"
      );
    })
    .catch((e) => {
@ -141,9 +143,11 @@ const fecthTypeOption = async () => {
 watchEffect(() => {
  if (props.Modal === true) {
    selected.value = [];
-    type.value = ''
+    type.value = "";
    //  console.log(props.data.status)
-    rows.value = props.data.persons.filter((item: any) => item.status !== 'REPORT');
+    rows.value = props.data.persons.filter(
+      (item: any) => item.status !== "REPORT"
+    );
  }
 });

--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";

 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";

 import http from "@/plugins/http";
 import config from "@/app.config";
@ -14,7 +15,7 @@ import config from "@/app.config";
 const $q = useQuasar();
 const selected = ref<any>([]);
 const mixin = useCounterMixin();
-const {  success, dialogConfirm } = mixin;
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 const emit = defineEmits([
  "update:filterKeyword2",
  "update:selected",
@ -130,20 +131,71 @@ function updateInput(value: any) {
 function Reset() {
  emit("update:filterKeyword2", "");
 }
+
+const type = ref<string>("");
+//----(ดึงข้อมูลประเภทคำสั่ง)------//
+const optionsType = ref<[]>([]);
+const fecthTypeOption = async () => {
+  showLoader();
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: OpType) =>
+          e.commandCode === "C-PM-25" || e.commandCode === "C-PM-26"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 // watch([()=>props.modal],() => {
 //   selected.value = props.modal ? [] : [];
 //   if (props.modal === true) {
 //     selected.value = props.rows2;
 //   }
 // });
+onMounted(() => {
+  fecthTypeOption();
+});
 </script>
+
 <template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 1200px; max-width: 80vw">
      <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
      <q-separator />
      <q-card-section class="q-pt-none">
-        <div class="row justify-end">
+        <div class="row justify-between">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-select
+                outlined
+                dense
+                v-model="type"
+                :options="optionsType"
+                label="ประเภทคำสั่ง"
+                style="width: 400px; max-width: auto"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-toolbar>
+          </div>
+
          <div class="col-5">
            <q-toolbar style="padding: 0">
              <q-input
@ -166,7 +218,7 @@ function Reset() {
                  />
                </template>
              </q-input>
-              
+
              <q-select
                v-model="visibleColumns2"
                multiple
--- 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
--- 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" />
--- 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 -->
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
+++ 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>
--- 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
+@/modules/12_evaluatePersonal/store/evaluate
--- a/src/modules/12_evaluatePersonal/interface/index/evalute.ts
+++ 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 };
--- 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 "เสร็จสิ้น";
-        
    }
  }

@ -150,287 +149,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,
  };
 });
--- 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,
  };
-});
+});