Merge branch 'develop' into devTee

2023-12-20 14:01:15 +07:00 · 2023-12-20 14:01:15 +07:00 · 5bb31541c9
commit 5bb31541c9
parent 963448531f 4d5d2c92dd
13 changed files with 470 additions and 248 deletions
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@ -4,8 +4,10 @@ const evaluation = `${env.API_URI}/evaluation`;

 export default {
  evaluateDirectorMain: () => `${evaluateDirectorMain}`,
-  evaluateDirectorById: (id:string) => `${evaluateDirectorMain}/${id}`,
+  evaluateDirectorById: (id: string) => `${evaluateDirectorMain}/${id}`,

+  evaluationMain: (page: number, pageSize: number, keyword: string) =>
+    `${evaluation}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
  meeting: () => `${evaluation}/meeting`,
  meetingById: (id: string) => `${evaluation}/meeting/${id}`,
 };
--- a/src/components/PopupCheckFeatures.vue
+++ b/src/components/PopupCheckFeatures.vue
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@ -31,6 +31,7 @@ const route = useRoute();
 const router = useRouter();

 const orderId = route.params.orderid;
+const orderId_paramsName = route.name;

 const props = defineProps({
  next: {
@ -115,6 +116,12 @@ const conclusionFireResolution = ref<string>("");
 const conclusionTranferNo = ref<string>("");
 const conclusionTranferDate = ref<Date>(new Date());

+// C-PM-25-32
+const faultLevel = ref<string>("");
+const caseFault = ref<string>("");
+const result = ref<string>("");
+const refRaw = ref<string>("");
+
 const typeOrderFilter = ref<any>({
  typeOrderOption: [],
 });
@ -143,20 +150,44 @@ watch(nameCommand, async () => {
    positionCommand.value = nameCommand.value.positionName;
  }
 });
+
+const commandCodes = ref<string[]>([
+  "C-PM-19",
+  "C-PM-20",
+  "C-PM-25",
+  "C-PM-26",
+  "C-PM-27",
+  "C-PM-28",
+  "C-PM-29",
+  "C-PM-30",
+  "C-PM-31",
+  "C-PM-32",
+]);
 // เรียกคำสั่ง
 const fecthTypeOption = async (actions: string) => {
  showLoader();
  await http
    .get(config.API.typeOrder())
    .then((res) => {
-      typeOrderOption.value = res.data.result.map((e: OrederResult) => ({
+      const response = res.data.result;
+      const filterRes = response.filter((e: any) =>
+        commandCodes.value.includes(e.commandCode)
+      );
+
+      const data =
+        orderId_paramsName === "OrderDetail" ||
+        orderId_paramsName === "OrderAdd"
+          ? response
+          : filterRes;
+
+      typeOrderOption.value = data.map((e: OrederResult) => ({
        id: e.id,
        name: e.name,
        category: e.category,
        commandCode: e.commandCode,
        fullname: e.commandCode + "   " + e.name,
      }));
-      typeOrderFilter.value = res.data.result.map((e: OrederResult) => ({
+      typeOrderFilter.value = data.map((e: OrederResult) => ({
        id: e.id,
        name: e.name,
        category: e.category,
@ -246,6 +277,12 @@ const fetchdetailOrder = async () => {
      conclusionTranferNo.value = data.conclusionTranferNo;
      conclusionTranferDate.value = data.conclusionTranferDate;

+      // 25-32
+      faultLevel.value = data.faultLevel;
+      caseFault.value = data.caseFault;
+      result.value = data.result;
+      refRaw.value = data.refRaw;
+
      fecthExamRoundOption(data.orderTypeCode);
    })
    .catch((e) => {
@ -324,6 +361,11 @@ const selectCMP = (selectOrder: OrederResult) => {
  // 24
  conclusionTranferNo.value = "";
  conclusionTranferDate.value = new Date();
+  // 25-32
+  faultLevel.value = "";
+  caseFault.value = "";
+  result.value = "";
+  refRaw.value = "";
 };
 // เรียกรอบการสอบ
 const fecthExamRoundOption = async (commandCode: string) => {
@ -456,6 +498,22 @@ const submit = async () => {
      conclusionTranferNo: conclusionTranferNo.value,
      conclusionTranferDate: conclusionTranferDate.value,
    });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-25" ||
+    typeOrder.value.commandCode == "C-PM-26" ||
+    typeOrder.value.commandCode == "C-PM-27" ||
+    typeOrder.value.commandCode == "C-PM-28" ||
+    typeOrder.value.commandCode == "C-PM-29" ||
+    typeOrder.value.commandCode == "C-PM-30" ||
+    typeOrder.value.commandCode == "C-PM-31" ||
+    typeOrder.value.commandCode == "C-PM-32"
+  ) {
+    Object.assign(formdata, {
+      faultLevel: faultLevel.value,
+      caseFault: caseFault.value,
+      result: result.value,
+      refRaw: refRaw.value,
+    });
  }

  // เช็คค่าว่าง
@ -1894,6 +1952,71 @@ const getClass = (val: boolean) => {
          </datepicker>
        </div>
      </div>
+
+      <!-- C-PM-25 -32 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder != null &&
+          (typeOrder.commandCode === 'C-PM-25' ||
+            typeOrder.commandCode === 'C-PM-26' ||
+            typeOrder.commandCode === 'C-PM-27' ||
+            typeOrder.commandCode === 'C-PM-28' ||
+            typeOrder.commandCode === 'C-PM-29' ||
+            typeOrder.commandCode === 'C-PM-30' ||
+            typeOrder.commandCode === 'C-PM-31' ||
+            typeOrder.commandCode === 'C-PM-32')
+        "
+      >
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="faultLevel"
+            :rules="[(val) => !!val || `${'กรุณากรอกระดับความผิด'}`]"
+            :label="`${'ระดับความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="caseFault"
+            :rules="[(val) => !!val || `${'กรุณากรอกกรณีความผิด'}`]"
+            :label="`${'กรณีความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="result"
+            :rules="[(val) => !!val || `${'กรุณากรอกผลดำเนินการพิจารณา'}`]"
+            :label="`${'ผลดำเนินการพิจารณา'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="refRaw"
+            :rules="[(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`]"
+            :label="`${'อ้างอิงมาตราตามกฎหมาย'}`"
+            hide-bottom-space
+          />
+        </div>
+      </div>
    </q-form>
  </div>

--- a/src/modules/11_discipline/components/9_Order/TableOrder.vue
+++ b/src/modules/11_discipline/components/9_Order/TableOrder.vue
@ -18,6 +18,17 @@ const props = defineProps({

 /** ข้อมูลที่เเสดงใน คอลัม */
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
  {
    name: "orderName",
    align: "left",
@ -29,6 +40,7 @@ const columns = ref<QTableProps["columns"]>([
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
+
  {
    name: "orderNo",
    align: "left",
@ -38,6 +50,62 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
+  {
+    name: "faultLevel",
+    align: "left",
+    label: "ระดับความผิด",
+    sortable: true,
+    field: "faultLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "caseFault",
+    align: "left",
+    label: "กรณีความผิด",
+    sortable: true,
+    field: "caseFault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "รายชื่อผู้ที่ถูกลงโทษทางวินัย",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "result",
+    align: "left",
+    label: "ผลดำเนินการพิจารณา",
+    sortable: true,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refRaw",
+    align: "left",
+    label: "อ้างอิงมาตราตามกฎหมาย",
+    sortable: true,
+    field: "refRaw",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
  {
    name: "orderTypeName",
    align: "left",
@ -95,8 +163,14 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 /** หัวตาราง */
 const visibleColumns = ref<string[]>([
+  "no",
  "orderName",
  "orderNo",
+  "faultLevel",
+  "caseFault",
+  "fullName",
+  "result",
+  "refRaw",
  "orderTypeName",
  "orderDate",
  "orderByOrganization",
@ -167,6 +241,9 @@ const redirectToPage = (id?: string, status?: string) => {
        :props="props"
        @click="redirectToPage(props.row.orderId, props.row.OrderStatus)"
      >
+        <div v-if="col.name === 'no'">
+          {{ props.rowIndex + 1 }}
+        </div>
        <div>
          {{ col.value }}
        </div>
--- a/src/modules/11_discipline/interface/response/order.ts
+++ b/src/modules/11_discipline/interface/response/order.ts
@ -13,6 +13,11 @@ interface DataList {
  orderTypeValue: string;
  signatoryBy: string;
  signatoryPosition: string;
+  faultLevel: string;
+  caseFault: string;
+  fullName: string;
+  result: string;
+  refRaw: string;
 }

 interface DataListRes {
@ -30,6 +35,11 @@ interface DataListRes {
  orderTypeValue: string;
  signatoryBy: string;
  signatoryPosition: string;
+  faultLevel: string;
+  caseFault: string;
+  fullName: string;
+  result: string;
+  refRaw: string;
 }

 export type { DataList, DataListRes };
--- a/src/modules/11_discipline/store/OrderStore.ts
+++ b/src/modules/11_discipline/store/OrderStore.ts
@ -34,6 +34,11 @@ export const useOrderStore = defineStore("DisciplineOrder", () => {
      orderTypeValue: e.orderTypeValue,
      signatoryBy: e.signatoryBy,
      signatoryPosition: e.signatoryPosition,
+      faultLevel: e.faultLevel ?? "-",
+      caseFault: e.caseFault ?? "-",
+      fullName: e.fullName ?? "-",
+      result: e.result ?? "-",
+      refRaw: e.refRaw ?? "-",
    }));
    mainData.value = datalist;
    filterListOrder("", "ทั้งหมด", 0);
--- a/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue
@ -26,7 +26,8 @@ function addData(formData: any) {
    .post(config.API.meeting(), {
      Round: formData.rounded ?? "",
      Tittle: formData.title,
-      Date: formData.dateMeetingStart,
+      DateEnd: formData.dateMeetingEnd,
+      DateStart: formData.dateMeetingStart,
      Result: formData.consider,
      Duration: formData.period,
    })
--- a/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue
@ -33,10 +33,10 @@ onMounted(() => {
 /**
 * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
 */
-const data = reactive<FormData>({
+const data = reactive<any>({
  rounded: "",
  dateMeeting: "",
-  dateMeetingStart: null,
+  dateMeetingStart: Date,
  dateMeetingEnd: new Date(),
  consider: "",
  period: "",
@ -58,8 +58,10 @@ const fetchData = async () => {
      data.rounded = dataApi.Round;
      data.consider = dataApi.Result;
      data.period = dataApi.Duration;
-      data.dateMeetingStart = dataApi.Date;
+      data.dateMeetingStart = dataApi.DateStart;
+      data.dateMeetingEnd = date2Thai(dataApi.DateEnd, false, true);
      data.file = dataApi.file;
+
      console.log(data.dateMeetingStart);
    })
    .catch((e) => {
@ -84,7 +86,8 @@ function putData(formData: FormData) {
    .put(config.API.meetingById(personalId.value), {
      Round: formData.rounded ?? "",
      Tittle: formData.title,
-      Date: formData.dateMeetingStart,
+      DateStart: formData.dateMeetingStart,
+      DateEnd: formData.dateMeetingEnd,
      Result: formData.consider,
      Duration: formData.period,
    })
--- a/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
@ -42,7 +42,6 @@ const emit = defineEmits(["formDataReturn"]);
 */
 //
 const idCard = ref<string>("");
-const idCardRef = ref<any>(null);

 const fileOj = reactive<FileOj[]>([]);

@ -65,63 +64,66 @@ const formData = reactive<FormData>({
 watch(props.data, async () => {
  // console.log("data==>", props.data)
  formData.rounded = props.data.rounded;
-  formData.dateMeeting = props.data.dateMeeting;
+  formData.dateMeetingStart = props.data.dateMeetingStart;
+  formData.dateMeetingEnd = props.data.dateMeetingEnd;
  formData.consider = props.data.consider;
  formData.period = props.data.period;
  formData.title = props.data.title;
 });

-/**
- * เพิ่มบุคลากร
- */
-function addEmployee() {
-  if (idCard.value.length === 13) {
-    console.log("idCard===>", idCard.value);
-    showLoader();
-    http
-      .post(config.API.profileSearchPersonal(), {
-        fieldName: "idcard",
-        keyword: idCard.value,
-      })
-      .then((res) => {
-        const dataApi = res.data.result;
-        if (dataApi.length > 0) {
-          const dataList = dataApi[0];
-          formData.rounded = dataList.rounded;
-          formData.dateMeeting = dataList.dateMeeting;
-          formData.consider = dataList.consider;
-          formData.period = dataList.period;
-        } else {
-          dialogMessageNotify($q, "ไม่มีข้อมูลบุคคลากรที่ต้องการค้นหา");
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-      });
-  }
-  if (idCard.value.length !== 13) {
-    hideLoader();
-    dialogMessageNotify($q, "กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก");
-  } else {
-    console.log("nodata");
-  }
-}
+// /**
+//  * เพิ่มบุคลากร
+//  */
+// function addEmployee() {
+//   if (idCard.value.length === 13) {
+//     console.log("idCard===>", idCard.value);
+//     showLoader();
+//     http
+//       .post(config.API.profileSearchPersonal(), {
+//         fieldName: "idcard",
+//         keyword: idCard.value,
+//       })
+//       .then((res) => {
+//         const dataApi = res.data.result;
+//         if (dataApi.length > 0) {
+//           const dataList = dataApi[0];
+//           formData.rounded = dataList.rounded;
+//           formData.dateMeeting = dataList.dateMeeting;
+//           formData.consider = dataList.consider;
+//           formData.period = dataList.period;
+//         } else {
+//           dialogMessageNotify($q, "ไม่มีข้อมูลบุคคลากรที่ต้องการค้นหา");
+//         }
+//       })
+//       .catch((e) => {
+//         messageError($q, e);
+//       })
+//       .finally(async () => {
+//         hideLoader();
+//       });
+//   }
+//   if (idCard.value.length !== 13) {
+//     hideLoader();
+//     dialogMessageNotify($q, "กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก");
+//   } else {
+//     console.log("nodata");
+//   }
+// }

 /**
 * ตรวจสอบข้อมูลก่อนส่งไปยัง api
 */
 const roundedRef = ref<object | null>(null);
-const dateMeetingRef = ref<object | null>(null);
+const dateMeetingStartRef = ref<object | null>(null);
+const dateMeetingEndRef = ref<object | null>(null);
 const considerRef = ref<object | null>(null);
 const periodRef = ref<object | null>(null);
 const titleRef = ref<object | null>(null);

 const formRef: FormRef = {
  rounded: roundedRef,
-  dateMeeting: dateMeetingRef,
+  dateMeetingStartRef: dateMeetingStartRef,
+  dateMeetingEndRef: dateMeetingEndRef,
  consider: considerRef,
  period: periodRef,
  title: titleRef,
@ -228,17 +230,6 @@ function inputEdit(val: boolean) {
          />
        </div>
        <div class="col-3">
-          <!-- <q-input
-            :class="inputEdit(isReadonly)"
-            dense
-            outlined
-            v-model="formData.dateMeeting"
-            label="วันเวลาในการประชุม"
-            ref="dateMeetingRef"
-            for="dateMeetingRef"
-            hide-bottom-space
-            :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกวันเวลาในการประชุม'}`]"
-          /> -->
          <datepicker
            menu-class-name="modalfix"
            v-model="formData.dateMeetingStart"
--- a/src/modules/12_evaluatePersonal/interface/index/meeting.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/meeting.ts
@ -32,7 +32,8 @@ interface FileOj {

 interface FormRef {
  rounded: object | null;
-  dateMeeting: object | null;
+  dateMeetingEndRef: object | null;
+  dateMeetingStartRef: object | null;
  consider: object | null;
  period: object | null;
  [key: string]: any;
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@ -31,6 +31,14 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
    }
  }

+  function convertType(val: string) {
+    if (val === "EXPERT") {
+      return "ชำนาญการ";
+    } else {
+      return "ชำนาญการพิเศษ";
+    }
+  }
+
  // ตรวจสอบคุณสมบัติด้วยตนเอง -> CHECK_SPEC
  // จัดเตรียมเอกสารเล่ม 1-> PREPARE_DOC_V1
  // ตรวจสอบความถูกต้องของเอกสารเล่ม 1 -> CHECK_DOC_V1
@ -53,15 +61,16 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
  ]);
  const rows = ref<any[]>([]);
  function fetchData(data: any[]) {
+    console.log(data);
    const dataList: any[] = data.map((data: any) => ({
      id: data.id,
-      citizanId: data.citizanId,
-      fullName: data.fullName,
-      position: data.position,
-      level: data.level,
-      positionNumber: data.positionNumber,
-      agency: data.agency,
-      status: convertStatus(data.status),
+      citizanId: data.CitizenId,
+      fullName: data.FullName,
+      position: data.Position,
+      level: convertType(data.Type),
+      positionNumber: data.PosNo,
+      agency: data.Oc,
+      status: convertStatus(data.Step),
    }));
    rows.value = dataList;
    console.log(dataList);
@ -142,7 +151,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
    {
      name: "status",
      align: "left",
-      label: "สถานะ(ตรวจสอบคุณสมบัติ)",
+      label: "สถานะ",
      sortable: true,
      field: "status",
      headerStyle: "font-size: 14px",
--- a/src/modules/12_evaluatePersonal/store/MeetingStore.ts
+++ b/src/modules/12_evaluatePersonal/store/MeetingStore.ts
@ -1,88 +1,90 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { DataResponseList, MainList } from "@/modules/12_evaluatePersonal/interface/index/meeting";
+import type {
+  DataResponseList,
+  MainList,
+} from "@/modules/12_evaluatePersonal/interface/index/meeting";
 import type { QTableProps } from "quasar";

 // store ระบบวินัย >> ข้อมูลพื้นฐาน >> กรรมการ
 export const useEvaluateMeetingDataStore = defineStore(
-    "evaluateMeeting",
-    () => {
-        const mixin = useCounterMixin()
-        const { date2Thai } = mixin
-        //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-        const visibleColumns = ref<string[]>([
-            "no",
-            "round",
-            "title",
-            "date",
-        ]);
+  "evaluateMeeting",
+  () => {
+    const mixin = useCounterMixin();
+    const { date2Thai } = mixin;
+    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    const visibleColumns = ref<string[]>(["no", "round", "title", "date"]);

-        // หัวตาราง
-        const columns = ref<QTableProps["columns"]>([
-            {
-                name: "no",
-                align: "left",
-                label: "ลำดับ",
-                sortable: false,
-                field: "no",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "round",
-                align: "left",
-                label: "ครั้งที่",
-                sortable: true,
-                field: "round",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "title",
-                align: "left",
-                label: "เรื่อง",
-                sortable: true,
-                field: "title",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "date",
-                align: "left",
-                label: "วันเวลาในการประชุม",
-                sortable: true,
-                field: "date",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-        ]);
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "round",
+        align: "left",
+        label: "ครั้งที่",
+        sortable: true,
+        field: "round",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "title",
+        align: "left",
+        label: "เรื่อง",
+        sortable: true,
+        field: "title",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "date",
+        align: "left",
+        label: "วันเวลาในการประชุม",
+        sortable: true,
+        field: "date",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);

-        // ข้อมูลในตาราง
-        const rows = ref<MainList[]>([]);
-        function fetchData(data: DataResponseList[]) {
-            const dataList: MainList[] = data.map((item: DataResponseList) => ({
-                id:item.Id,
-                createdAt:item.CreatedAt,
-                createdUserId:item.CreatedUserId,
-                lastUpdatedAt:item.LastUpdatedAt,
-                lastUpdateUserId:item.LastUpdateUserId,
-                createdFullName:item.CreatedFullName,
-                lastUpdateFullName:item.LastUpdateFullName,
-                title:item.Tittle,
-                round:item.Round,
-                date:date2Thai(item.Date as Date),
-                result:item.Result,
-                duration:item.Duration,
-            }))
-            rows.value = dataList
-        }
-
-        return {
-            visibleColumns,
-            columns,
-            rows,
-            fetchData
-        };
+    // ข้อมูลในตาราง
+    const rows = ref<any[]>([]);
+    function fetchData(data: any[]) {
+      const dataList: any[] = data.map((item: any) => ({
+        id: item.Id,
+        createdAt: item.CreatedAt,
+        createdUserId: item.CreatedUserId,
+        lastUpdatedAt: item.LastUpdatedAt,
+        lastUpdateUserId: item.LastUpdateUserId,
+        createdFullName: item.CreatedFullName,
+        lastUpdateFullName: item.LastUpdateFullName,
+        title: item.Tittle,
+        round: item.Round,
+        date: `${date2Thai(item.DateStart as Date, false, true)} - ${date2Thai(
+          item.DateEnd as Date,
+          false,
+          true
+        )}`,
+        result: item.Result,
+        duration: item.Duration,
+      }));
+      rows.value = dataList;
    }
+
+    return {
+      visibleColumns,
+      columns,
+      rows,
+      fetchData,
+    };
+  }
 );
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch, useAttrs } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@ -16,105 +16,74 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const store = useEvalutuonStore();
 const { showLoader, hideLoader, messageError } = mixin;
-
+const attrs = ref<any>(useAttrs());
 const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
 });
-function Detailpage(id:string) {
+function Detailpage(id: string) {
  router.push(`/evaluate/detail/${id}`);
 }

-const page = ref<number>(1);
+const currentPage = ref<number>(1);
 const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
+const page = ref<number>(1);
 const filter = ref<string>("");
+const rowsPerPage = ref<number>(10);
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getList();
+  }
+);
+
+function getList() {
+  showLoader();
+  http
+    .get(
+      config.API.evaluationMain(
+        currentPage.value,
+        rowsPerPage.value,
+        filter.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result;
+      store.fetchData(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}

 /**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
 onMounted(async () => {
-  store.fetchData([
-    {
-      id:'xxx1',
-      citizanId: "1230030004001",
-      fullName: "นางวัศยา ศรีสร้อย",
-      position: "ผู้อำนวยการสถาบัน",
-      level: "ปฏิบัติการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานกฎหมาย",
-      status: "WAIT_CHECK_DOC_V1",
-    },
-    {
-      id:'xxx2',
-      citizanId: "122222000401",
-      fullName: "นายสิริศักดิ์ พรมบุตร",
-      position: "นักบริหาร",
-      level: "ชำนาญการพิเศษ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานกฎหมายอาคาร",
-      status: "WAIT_CHECK_DOC_V2",
-    },
-    {
-      id:'xxx3',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "DONE",
-    },
-    {
-      id:'xxx4',
-      citizanId: "122203000401",
-      fullName: "นางธนิดา มั่นคงประสิทธิ์",
-      position: "ผู้อำนวยการกอง",
-      level: "อาวุโส",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มกิจการสภา",
-      status: "WAIT_CHECK_DOC_V1",
-    },
-    {
-      id:'xxx5',
-      citizanId: "123003111401",
-      fullName: "นางณิชมน ลือขำ ",
-      position: "ผู้อำนวยการสถาบัน",
-      level: "ชำนาญงาน",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มกิจการสภา",
-      status: "WAIT_CHECK_DOC_V2",
-    },
-    {
-      id:'xxx6',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "ANNOUNCE_WEB",
-    },
-    {
-      id:'xxx7',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "PREPARE_DOC_V2",
-    },
-    {
-      id:'xxx8',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "CHECK_DOC_V2",
-    },
-  ]);
+  getList();
 });
 </script>

@ -124,24 +93,53 @@ onMounted(async () => {
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="store.rows"
+      <d-table
+        ref="table"
        :columns="store.columns"
-        :visible-columns="store.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="store.visibleColumns"
-        :pagination="initialPagination"
-        :nornmalData="true"
+        :rows="store.rows"
+        :filter="filter"
+        row-key="interrogated"
+        flat
+        bordered
        :paging="true"
-        :titleText="''"
-        :page="page"
-        :pageSize="pageSize"
-        :maxPage="maxPage"
+        dense
+        class="custom-header-table"
+        v-bind="attrs"
+        :visible-columns="store.visibleColumns"
+        v-model:pagination="pagination"
      >
-        <template #columns="props">
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width></q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="Detailpage(props.row.id)">
+            <q-td auto-width>
+              <q-icon
+                v-if="props.row.isDefault === true"
+                name="mdi-bookmark"
+                size="xs"
+                color="primary"
+              >
+                <q-tooltip>เวลา Default</q-tooltip>
+              </q-icon>
+            </q-td>
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="Detailpage(props.row.id)"
+            >
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>
@ -151,7 +149,7 @@ onMounted(async () => {
            </q-td>
          </q-tr>
        </template>
-      </Table>
+      </d-table>
    </div>
  </q-card>
 </template>