From aa95b3885726dec6fe058feaf5dbcb10641c3a97 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 30 Nov 2023 14:17:55 +0700
Subject: [PATCH] =?UTF-8?q?API=20=20=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=96=E0=B8=B9=E0=B8=81=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=81=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/11_discipline/api.discipline.ts       |   7 +
 .../7_ListSuspend/DialogSendToCommand.vue     | 120 +++----
 .../components/7_ListSuspend/DismissOrder.vue | 311 ++++++++----------
 .../components/7_ListSuspend/OutRegistry.vue  | 287 +++++++++++-----
 .../interface/response/suspend.ts             |  78 +++++
 .../11_discipline/store/ComplaintsStore.ts    |   1 +
 .../11_discipline/store/SuspendStore.ts       |  85 +++++
 7 files changed, 564 insertions(+), 325 deletions(-)
 create mode 100644 src/modules/11_discipline/interface/response/suspend.ts
 create mode 100644 src/modules/11_discipline/store/SuspendStore.ts

diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 8dcc2a2d7..f4dbea1ca 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -2,6 +2,7 @@ import env from "../index";
 const disciplineMain = `${env.API_URI}/discipline`;
 const discipline = `${env.API_URI}/discipline/disciplinary`;
 const investigate = `${env.API_URI}/discipline/investigate`;
+const suspend = `${env.API_URI}/discipline/suspend`;
 
 export default {
   directorList: (page: number, pageSize: number, keyword: string) =>
@@ -65,4 +66,10 @@ export default {
   /** รายการผลการพิจารณาทางวินัย*/
   listResult: () => `${disciplineMain}/result`,
   listResultById: (id: string) => `${disciplineMain}/result/${id}`,
+
+  /** ผู้ถูกพักราชการ */
+  suspendMain:(page: number, pageSize: number, keyword: string) => `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  suspendById: (id: string) => `${suspend}/${id}`,
+
+  suspendReport: () => `${suspend}/report`,
 };
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
index e341c4d56..08aff7b6d 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -10,7 +10,7 @@ import config from "@/app.config";
 
 /** use */
 const $q = useQuasar();
-const selected = ref<ResponseItems[]>([]);
+const selected = ref<any>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
@@ -26,11 +26,11 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -53,20 +53,20 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationPositionOld",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "organizationPositionOld",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "statustext",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -75,12 +75,12 @@ const columns2 = ref<QTableProps["columns"]>([
 /** คอลัมน์ที่แสดง */
 const visibleColumns2 = ref<string[]>([
   "no",
-  "fullname",
+  "name",
   "position",
   "positionLevel",
-  "positionNumberOld",
-  "organizationPositionOld",
-  "statustext",
+  "posNo",
+  "organization",
+  "status",
 ]);
 
 /** props*/
@@ -104,36 +104,19 @@ const checkSelected = computed(() => {
 //popup ยืนยันส่งัว
 const saveOrder = () => {
   dialogConfirm(
-    $q,
-    () => Ordersave(),
-    "ยืนยันส่งไปออกคำสั่ง",
-    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
-  );
+      $q,
+      async () => {
+        success($q, `ส่งข้อมูลไปออกคำสั่งสำเร็จ`);
+        emit("returnPerson", selected.value);
+        props.closeModal?.();
+      },
+      `ยืนยันการส่งไปออกคำสั่ง`,
+      `ต้องการยืนยันการส่งไปออกคำสั่งหรือไม่`
+    );
 };
 
-//ส่งไปออกคำสั่ง
-const Ordersave = async () => {
-  const id = selected.value.map((r) => r.id);
-  const body = {
-    id,
-  };
-  showLoader();
-  await http
-    .post(config.API.outReport, body)
-    .then((res: any) => {
-      success($q, "ส่งไปออกคำสั่งสำเร็จ");
-      props.closeModal?.();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      props.getData?.();
-      hideLoader();
-    });
-};
 
-const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+const emit = defineEmits(["update:filterKeyword2", "update:selected",'returnPerson']);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
@@ -142,9 +125,10 @@ const updateInput = (value: any) => {
 const Reset = () => {
   emit("update:filterKeyword2", "");
 };
-watchEffect(() => {
+watch([()=>props.modal],() => {
+  selected.value = props.modal ? [] : [];
   if (props.modal === true) {
-    selected.value = [];
+    selected.value = props.rows2;
   }
 });
 </script>
@@ -205,15 +189,26 @@ watchEffect(() => {
           selection="multiple"
           v-model:selected="selected"
         >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width>
+                <!-- <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                /> -->
+              </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-tr>
           </template>
-
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
@@ -224,31 +219,14 @@ watchEffect(() => {
                   v-model="props.selected"
                 />
               </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="organizationPositionOld" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
                 </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
+                <div>
+                  {{ col.value }}
                 </div>
               </q-td>
-              <q-td key="statustext" :props="props">
-                {{ props.row.statustext }}
-              </q-td>
             </q-tr>
           </template>
         </d-table>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
index 781416f10..d6d2b2e60 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
@@ -8,9 +8,12 @@ import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import type { dataType } from '@/modules/11_discipline/interface/response/suspend'
 import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
+import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
 
 /** use */
+const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -29,12 +32,12 @@ const modal = ref<boolean>(false);
 /** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
-  "fullname",
+  "name",
   "position",
   "positionLevel",
-  "organizationPositionOld",
-  "createdAt",
-  "statustext",
+  "organization",
+  "dateTotal",
+  "status",
 ]);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
@@ -43,9 +46,7 @@ const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const filters = ref<ResponseData[]>([]);
+const rows2 = ref<dataType[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -57,11 +58,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -84,123 +85,49 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationPositionOld",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "organizationPositionOld",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "createdAt",
+    name: "dateTotal",
     align: "left",
     label: "วันที่ดำเนินการ",
     sortable: true,
-    field: "createdAt",
+    field: "dateTotal",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "statustext",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 onMounted(async () => {
-  await getData();
+  await getList();
 });
 
-const openModalOrder = () => {
+function openModalOrder(){
   openModal();
-  const row = filters.value.filter(
-    (r: ResponseData) =>
-      (r.status == "WAITTING" ||
-        r.status == "PENDING" ||
-        r.status == "APPROVE") &&
-      r.organizationPositionOld &&
-      r.positionTypeOld &&
-      r.positionLevelOld &&
-      r.positionNumberOld &&
-      r.salary &&
+  const dataMap = dataStore.rows.filter((r: dataType) => 
+      r.statusEn == "PENDING" &&
+      r.name &&
       r.organization &&
-      r.date
-  );
-  rows2.value = row;
-};
-
-//นำข้อมูลมาแสดง
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.retirementOut)
-    .then((res: any) => {
-      const data = res.data.result;
-      let list: ResponseData[] = [];
-      data.map((r: ResponseData) => {
-        list.push({
-          createdAt: date2Thai(r.createdAt),
-          date: r.date,
-          firstName: r.firstName ?? "",
-          id: r.id ?? "",
-          isActive: r.isActive ? r.isActive : false,
-          lastName: r.lastName ?? "",
-          organization: r.organization ?? "",
-          organizationPositionOld: r.organizationPositionOld ?? "",
-          posNo: r.posNo ?? "",
-          position: r.position ?? "",
-          positionLevel: r.positionLevel ?? "",
-          positionLevelOld: r.positionLevelOld ?? "",
-          positionNumberOld: r.positionNumberOld ?? "",
-          positionTypeOld: r.positionTypeOld ?? "",
-          prefix: r.prefix ?? "",
-          reason: r.reason ?? "",
-          salary: r.salary ? r.salary : 0,
-          status: r.status ?? "",
-          statustext: statusText(r.status ?? ""),
-          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
-        });
-      });
-      rows.value = list;
-      filters.value = list;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickDelete = async (id: string) => {
-  dialogMessage(
-    $q,
-    `ลบข้อมูล`,
-    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    "delete",
-    "ยืนยัน",
-    "red",
-    async () => await deleteData(id),
-    async () => await getData()
-  );
-};
-
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.outByid(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-    });
+      r.position &&
+      r.positionLevel &&
+      r.posNo &&
+      r.organization
+  )
+  rows2.value = dataMap;
 };
 
 const openModal = () => (modal.value = true);
@@ -211,15 +138,90 @@ const resetFilter = () => {
   filterKeyword2.value = "";
   filterRef.value.focus();
 };
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+/**
+ *pagination ของตาราง
+ */
 const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
+  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();
+  }
+);
+
+/** ดึงข้อมูลหน้าหลัก */
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.suspendMain(
+        currentPage.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result.data;
+      dataStore.getData(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit(data:dataType[]){
+  console.log(data)
+  const dataMapId = data.map((item: dataType) => item.id);
+  showLoader();
+  http
+    .post(config.API.suspendReport(), {
+      id: dataMapId,
+    })
+    .then((res) => {
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      getList()
+    });
+}
+onMounted(() => {
+  getList();
+  dataStore.columns = columns.value;
+  dataStore.visibleColumns = visibleColumns.value;
 });
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายชื่อผู้ถูกพักราชการ</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อผู้ถูกพักราชการ
+  </div>
   <q-card flat bordered class="col-12 q-mt-sm">
     <q-separator />
     <div class="row q-pa-md">
@@ -259,7 +261,7 @@ const pagination = ref({
           </q-input>
 
           <q-select
-            v-model="visibleColumns"
+            v-model="dataStore.visibleColumns"
             multiple
             outlined
             dense
@@ -277,91 +279,52 @@ const pagination = ref({
 
         <div class="col-12 q-pt-sm">
           <d-table
-            :columns="columns"
-            :rows="rows"
+            :columns="dataStore.columns"
+            :rows="dataStore.rows"
             :filter="filterKeyword"
             row-key="id"
-            :visible-columns="visibleColumns"
+            :visible-columns="dataStore.visibleColumns"
             v-model:pagination="pagination"
           >
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="currentPage"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
             <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">{{ col.label }}</span>
                 </q-th>
-                <q-th auto-width />
+                <!-- <q-th auto-width /> -->
               </q-tr>
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td
-                  key="no"
+                  v-for="col in props.cols"
+                  :key="col.name"
                   :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                  @click="router.push(`/discipline-suspend/${props.row.id}`)"
                 >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  {{ props.row.position }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
                   </div>
-                </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  <div class="table_ellipsis">
+                  <div
+                    v-else-if="col.name === 'organization'"
+                    class="table_ellipsis"
+                  >
                     {{ props.row.organization }}
                   </div>
-                </q-td>
-                <q-td key="createdAt" :props="props">
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td key="statustext" :props="props">
-                  {{ props.row.statustext }}
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    v-if="
-                      props.row.status !== 'DONE' &&
-                      props.row.status !== 'REPORT'
-                    "
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click="clickDelete(props.row.id)"
-                    icon="mdi-delete"
-                  >
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
                 </q-td>
               </q-tr>
             </template>
@@ -376,7 +339,7 @@ const pagination = ref({
     :closeModal="closeModal"
     :rows2="rows2"
     v-model:filterKeyword2="filterKeyword2"
-    :fecthlistRecevice="getData"
+    @returnPerson="onSubmit"
   />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
index 0608a1301..c74a2df5d 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -7,12 +7,14 @@ import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
+import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
 
 /**Import type */
 import type { QForm } from "quasar";
-import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
+import type { dataDetail } from "@/modules/11_discipline/interface/response/suspend";
 
 /** use */
+const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -37,25 +39,31 @@ const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const posNo = ref<string>("");
-const salary = ref<number>(0);
 const organization = ref<string>("");
 const date = ref<Date | null>(null);
 const reason = ref<string>("");
-const responseData = ref<ResponseDataDetail>({
-  personId: "",
-  avataPath: "",
-  createdAt: new Date(),
-  date: new Date(),
+
+const data = reactive<dataDetail>({
   id: "",
+  citizenId: "",
+  avataPath: "",
+  name: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
   organization: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  reason: "",
+  position: "",
+  posNo: "",
+  positionLevel: "",
   salary: 0,
   status: "",
-  fullname: "",
+  descriptionSuspend: "",
+  startDateSuspend: null,
+  endDateSuspend: null,
+  title: "",
+  offenseDetails: "",
+  disciplinaryFaultLevel: "",
+  disciplinaryCaseFault: "",
 });
 
 /** Hook */
@@ -70,36 +78,31 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.outByid(dataId))
+    .get(config.API.suspendById(dataId))
     .then((res) => {
-      const data = res.data.result;
-      responseData.value.personId = data.profileId;
-      responseData.value.createdAt = data.createdAt;
-      responseData.value.date =
-        data.date !== null ? new Date(data.date) : new Date();
-      responseData.value.id = data.id ?? "";
-      responseData.value.organization = data.organization ?? "";
-      responseData.value.organizationPositionOld =
-        data.organizationPositionOld ?? "";
-      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
-      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
-      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
-      responseData.value.reason = data.reason ?? "";
-      responseData.value.salary = data.salary !== null ? data.salary : 0;
-      responseData.value.status = data.status ?? "";
-      responseData.value.avataPath = data.avatar ?? "";
-      responseData.value.fullname = `${data.firstName ?? "-"} ${
-        data.lastName ?? "-"
-      }`;
-
-      organizationPositionOld.value = data.organizationPositionOld ?? "";
-      positionTypeOld.value = data.positionTypeOld ?? "";
-      positionLevelOld.value = data.positionLevelOld ?? "";
-      posNo.value = data.positionNumberOld ?? "";
-      salary.value = data.salary ?? "";
-      organization.value = data.organization ?? "";
-      date.value = data.date !== null ? new Date(data.date) : null;
-      reason.value = data.reason ?? "";
+      console.log(res.data.result);
+      const dataGet = res.data.result;
+      data.id = dataGet.id;
+      data.citizenId = dataGet.citizenId;
+      data.name = `${dataGet.prefix}${dataGet.firstName} ${dataGet.lastName}`;
+      data.prefix = dataGet.prefix;
+      data.firstName = dataGet.firstName;
+      data.lastName = dataGet.lastName;
+      data.organization = dataGet.organization;
+      data.position = dataGet.position;
+      data.posNo = dataGet.posNo;
+      data.positionLevel = dataGet.positionLevel;
+      data.salary = dataGet.salary;
+      data.status = dataGet.status;
+      data.descriptionSuspend = dataGet.descriptionSuspend
+        ? dataGet.descriptionSuspend
+        : "ออกจากราชการ";
+      data.startDateSuspend = dataGet.startDateSuspend;
+      data.endDateSuspend = dataGet.endDateSuspend;
+      data.title = dataGet.title;
+      data.offenseDetails = dataGet.offenseDetails;
+      data.disciplinaryFaultLevel = dataGet.disciplinaryFaultLevel;
+      data.disciplinaryCaseFault = dataGet.disciplinaryCaseFault;
     })
     .catch((e) => {
       messageError($q, e);
@@ -144,18 +147,18 @@ const conditionSave = async () => {
  */
 const saveData = async () => {
   const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    date: date.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
+    organization: data.organization,
+    position: data.position,
+    posNo: data.posNo,
+    positionLevel: data.positionLevel,
+    salary: data.salary,
+    descriptionSuspend: data.descriptionSuspend,
+    startDateSuspend: data.startDateSuspend,
+    endDateSuspend: data.endDateSuspend,
   };
   showLoader();
   await http
-    .put(config.API.outByid(dataId), body)
+    .put(config.API.suspendById(dataId), body)
     .then((res: any) => {
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
@@ -192,12 +195,12 @@ const getClass = (val: boolean) => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการของ {{ responseData.fullname }}
+    รายละเอียดการของ {{ data.name }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ responseData.fullname }}
+        {{ data.name }}
       </div>
       <q-space />
       <q-btn
@@ -207,24 +210,21 @@ const getClass = (val: boolean) => {
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${responseData.personId}`)"
+        @click="router.push(`/registry/${data.id}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
       <div class="col-12 row bg-white q-col-gutter-md">
         <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img
-            :src="responseData.avataPath"
-            v-if="responseData.avataPath !== ''"
-          />
+          <q-img :src="data.avataPath" v-if="data.avataPath !== ''" />
           <q-img src="@/assets/avatar_user.jpg" v-else />
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
             <div class="col-12 text-detail">
-              {{ responseData.positionTypeOld }}
+              {{ data.position }}
             </div>
           </div>
         </div>
@@ -232,7 +232,7 @@ const getClass = (val: boolean) => {
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
             <div class="col-12 text-detail">
-              {{ responseData.positionLevelOld }}
+              {{ data.positionLevel }}
             </div>
           </div>
         </div>
@@ -240,7 +240,7 @@ const getClass = (val: boolean) => {
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
             <div class="col-12 text-detail">
-              {{ responseData.organizationPositionOld }}
+              {{ data.organization }}
             </div>
           </div>
         </div>
@@ -254,11 +254,7 @@ const getClass = (val: boolean) => {
         แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
       </div>
       <q-space />
-      <div
-        v-if="
-          responseData.status !== 'DONE' && responseData.status !== 'REPORT'
-        "
-      >
+      <div v-if="data.status !== 'DONE' && data.status !== 'REPORT'">
         <div class="q-gutter-sm" v-if="!edit">
           <q-btn
             outline
@@ -297,7 +293,7 @@ const getClass = (val: boolean) => {
     <q-form ref="myForm">
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="col-xs-12 row items-center">
+          <!-- <div class="col-xs-12 row items-center">
             <div class="col-12">
               <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
@@ -316,7 +312,7 @@ const getClass = (val: boolean) => {
                 type="textarea"
               />
             </div>
-          </div>
+          </div> -->
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
               <q-input
@@ -326,7 +322,7 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="positionTypeOld"
+                v-model="data.position"
                 :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
                 hide-bottom-space
                 :label="`${'ตำแหน่งประเภท'}`"
@@ -342,7 +338,7 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="positionLevelOld"
+                v-model="data.positionLevel"
                 :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
                 hide-bottom-space
                 :label="`${'ระดับ'}`"
@@ -358,17 +354,17 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                v-model="data.posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                 hide-bottom-space
-                :label="`${'เลขที่'}`"
+                :label="`${'เลขที่ตำแหน่ง'}`"
               />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
               <CurrencyInput
-                v-model="salary"
+                v-model="data.salary"
                 :edit="edit"
                 :options="{
                   currency: 'THB',
@@ -387,19 +383,19 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="organization"
+                v-model="data.organization"
                 :rules="[(val) => !!val || `${'กรุณากรอก'}`]"
                 hide-bottom-space
                 :label="`${'สังกัด'}`"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row">
+          <div class="col-xs-3 col-sm-3 row">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
                 :readonly="!edit"
-                v-model="date"
+                v-model="data.startDateSuspend"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -417,7 +413,11 @@ const getClass = (val: boolean) => {
                     lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
+                    :model-value="
+                      data.startDateSuspend !== null
+                        ? date2Thai(data.startDateSuspend)
+                        : null
+                    "
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
                     hide-bottom-space
                     :label="`${'ตั้งแต่วัน'}`"
@@ -439,7 +439,134 @@ const getClass = (val: boolean) => {
               </datepicker>
             </div>
           </div>
+          <div class="col-xs-3 col-sm-3 row">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="data.endDateSuspend"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      data.endDateSuspend !== null
+                        ? date2Thai(data.endDateSuspend)
+                        : null
+                    "
+                    :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
+                    hide-bottom-space
+                    :label="`${'ถึงวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
           <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              readonly
+              :borderless="!edit"
+              v-model="data.title"
+              hide-bottom-space
+              :label="`${'เรื่องร้องเรียน '}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-3">
+            <q-select
+              for="#fault"
+              :outlined="edit"
+              dense
+              readonly
+              v-model="data.offenseDetails"
+              :options="
+                          dataStore.offenseDetailsOps
+                        "
+              label="ผลการสืบสวน"
+              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>
+          </div>
+          <div class="col-4">
+            <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                readonly
+                :borderless="!edit"
+                v-model="data.disciplinaryFaultLevel"
+                hide-bottom-space
+                :label="`${'ระดับโทษความผิด'}`"
+              />
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              readonly
+              :borderless="!edit"
+              v-model="data.disciplinaryCaseFault"
+              hide-bottom-space
+              :label="`${'กรณีความผิด '}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="data.descriptionSuspend"
+              hide-bottom-space
+              :label="`${'เหตุที่ถูกสั่งพักราชการ '}`"
+              type="textarea"
+            />
+          </div>
+          <!-- <div class="col-12">
             <q-input
               :class="getClass(edit)"
               :outlined="edit"
@@ -452,7 +579,7 @@ const getClass = (val: boolean) => {
               :label="`${'หมายเหตุ '}`"
               type="textarea"
             />
-          </div>
+          </div> -->
         </div>
       </div>
     </q-form>
diff --git a/src/modules/11_discipline/interface/response/suspend.ts b/src/modules/11_discipline/interface/response/suspend.ts
new file mode 100644
index 000000000..e4ada0030
--- /dev/null
+++ b/src/modules/11_discipline/interface/response/suspend.ts
@@ -0,0 +1,78 @@
+interface listData{
+        id: string
+        citizenId: string
+        prefix: string
+        firstName: string
+        lastName: string
+        organization: string
+        position: string
+        posNo: string
+        positionLevel: string
+        salary: number
+        status: string
+        descriptionSuspend: string
+        startDateSuspend: Date,
+        endDateSuspend: Date,
+        title: string
+        offenseDetails: string
+        disciplinaryFaultLevel: string
+        disciplinaryCaseFault: string
+}
+
+interface dataType{
+        id: string
+        citizenId: string
+        name:string
+        prefix: string
+        firstName: string
+        lastName: string
+        organization: string
+        position: string
+        posNo: string
+        positionLevel: string
+        salary: number
+        status: string
+        statusEn: string
+        descriptionSuspend: string
+        dateTotal:string
+        startDateSuspend: Date,
+        endDateSuspend: Date,
+        title: string
+        offenseDetails: string
+        disciplinaryFaultLevel: string
+        disciplinaryCaseFault: string
+}
+
+interface dataDetail{
+    id: string
+    citizenId: string
+    avataPath:string
+    name:string
+    prefix: string
+    firstName: string
+    lastName: string
+    organization: string
+    position: string
+    posNo: string
+    positionLevel: string
+    salary: number
+    status: string
+    descriptionSuspend: string
+    startDateSuspend: Date|null
+    endDateSuspend: Date|null
+    title: string
+    offenseDetails: string
+    disciplinaryFaultLevel: string
+    disciplinaryCaseFault: string
+}
+
+interface DataOption {
+    id:string
+    name:string
+}
+export type {
+    listData,
+    dataType,
+    dataDetail,
+    DataOption
+}
\ No newline at end of file
diff --git a/src/modules/11_discipline/store/ComplaintsStore.ts b/src/modules/11_discipline/store/ComplaintsStore.ts
index a00d3dad3..0b30ad97b 100644
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@@ -93,6 +93,7 @@ export const useComplainstDataStore = defineStore(
           return "-";
       }
     }
+    
     function levelConsiderationTran(val: string) {
       switch (val) {
         case "NORMAL":
diff --git a/src/modules/11_discipline/store/SuspendStore.ts b/src/modules/11_discipline/store/SuspendStore.ts
new file mode 100644
index 000000000..c87b40533
--- /dev/null
+++ b/src/modules/11_discipline/store/SuspendStore.ts
@@ -0,0 +1,85 @@
+import { defineStore } from "pinia";
+import { ref } from 'vue'
+import type { listData, dataType ,DataOption} from '@/modules/11_discipline/interface/response/suspend'
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+export const useDisciplineSuspendStore = defineStore(
+  "disciplineSuspendStore",
+  () => {
+    const rows = ref<dataType[]>([])
+    const columns = ref<QTableProps["columns"]>([])
+    const visibleColumns = ref<string[]>([])
+
+    const mixin = useCounterMixin()
+    const { date2Thai } = mixin
+    
+    const offenseDetailsOps = ref<DataOption[]>([
+      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+      { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
+      { id: "DEADLY", name: "ร้ายแรง" },
+    ]);
+
+    function getData(data: listData[]) {
+      console.log(data)
+      const dataList: dataType[] =  data.map((item: listData) => ({
+        id: item.id,
+        citizenId: item.citizenId,
+        name: `${item.prefix}${item.firstName} ${item.lastName}`,
+        prefix: item.prefix,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        organization: item.organization,
+        position: item.position,
+        posNo: item.posNo,
+        positionLevel: item.positionLevel,
+        salary: item.salary,
+        status: statusTothai(item.status),
+        statusEn: item.status,
+        descriptionSuspend: item.descriptionSuspend,
+        dateTotal:item.startDateSuspend && item.endDateSuspend ? `${date2Thai(item.startDateSuspend)} - ${date2Thai(item.endDateSuspend)}`:'-',
+        startDateSuspend: item.startDateSuspend,
+        endDateSuspend: item.endDateSuspend,
+        title: item.title,
+        offenseDetails: item.offenseDetails,
+        disciplinaryFaultLevel: item.disciplinaryFaultLevel,
+        disciplinaryCaseFault: item.disciplinaryCaseFault,
+      }))
+
+      console.log('dataList ===',dataList)
+      rows.value = dataList
+    }
+
+    const statusTothai = (val: string) => {
+      switch (val) {
+        case "WAITTING":
+          return "รอดำเนินการ";
+        case "PENDING":
+          return "รอออกคำสั่ง";
+        case "APPROVE":
+          return "อนุมัติ";
+        case "REJECT":
+          return "ไม่อนุมัติ";
+        case "REPORT":
+          return "ส่งรายชื่อไปออกคำสั่ง";
+        case "DONE":
+          return "ออกคำสั่งเสร็จแล้ว";
+  
+        default:
+          return "-";
+      }
+    };
+    function convertOffenseDetails(val: string) {
+      const result = offenseDetailsOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
+    }
+
+    return {
+      rows,
+      columns,
+      visibleColumns,
+      getData,
+      offenseDetailsOps
+    };
+  }
+);