From 810115eb41f341feed8c5275c1d6b30532358f2b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 2 Dec 2024 17:02:54 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20=3D=3D=3D=20fix=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialogs/DialogOrgSelectOneStep.vue        |  18 +-
 .../Discharged/DialogSendToCommand.vue        | 267 ----------
 .../components/Discharged/dischargedMain.vue  | 399 --------------
 .../Discharged/dischargedRegistry.vue         | 491 -----------------
 .../Expulsion/DialogSendToCommand.vue         | 270 ----------
 .../components/Expulsion/expulsionMain.vue    | 394 --------------
 .../Expulsion/expulsionRegistry.vue           | 493 ------------------
 .../components/Main/DialogFormCommand.vue     |   6 +-
 .../18_command/components/Main/TableMain.vue  |  69 +--
 .../components/Step/2_ListPersons.vue         |  23 +-
 .../components/Step/3_ReceivedCopy.vue        |   9 +-
 src/modules/18_command/store/ListStore.ts     |  82 ++-
 src/modules/18_command/views/lists.vue        | 223 ++++----
 13 files changed, 227 insertions(+), 2517 deletions(-)
 delete mode 100644 src/modules/06_retirement/components/Discharged/DialogSendToCommand.vue
 delete mode 100644 src/modules/06_retirement/components/Discharged/dischargedMain.vue
 delete mode 100644 src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
 delete mode 100644 src/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue
 delete mode 100644 src/modules/06_retirement/components/Expulsion/expulsionMain.vue
 delete mode 100644 src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue

diff --git a/src/components/Dialogs/DialogOrgSelectOneStep.vue b/src/components/Dialogs/DialogOrgSelectOneStep.vue
index 4966af0b5..1a988e81b 100644
--- a/src/components/Dialogs/DialogOrgSelectOneStep.vue
+++ b/src/components/Dialogs/DialogOrgSelectOneStep.vue
@@ -169,7 +169,7 @@ const isLoad = ref<boolean>(false);
 
 /** ดึงข้อมูล active */
 async function getTreeData() {
-  nodes.value = await fetchStructureTree(route.meta.Key as string,true);
+  nodes.value = await fetchStructureTree(route.meta.Key as string, true);
   isLoad.value = true;
 }
 
@@ -261,12 +261,7 @@ onMounted(async () => {
             >
               <q-input dense outlined v-model="filter" label="ค้นหา">
                 <template v-slot:append>
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <q-tree
@@ -327,17 +322,10 @@ onMounted(async () => {
                     outlined
                     debounce="300"
                     placeholder="ค้นหา"
-                    style="max-width: 200px"
                     class="q-ml-sm"
                   >
                     <template v-slot:append>
-                      <q-icon v-if="filterModal == ''" name="search" />
-                      <q-icon
-                        v-if="filterModal !== ''"
-                        name="clear"
-                        class="cursor-pointer"
-                        @click="filterModal = ''"
-                      />
+                      <q-icon name="search" />
                     </template>
                   </q-input>
 
diff --git a/src/modules/06_retirement/components/Discharged/DialogSendToCommand.vue b/src/modules/06_retirement/components/Discharged/DialogSendToCommand.vue
deleted file mode 100644
index f7d7720fa..000000000
--- a/src/modules/06_retirement/components/Discharged/DialogSendToCommand.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-
-import type { QTableProps } from "quasar";
-import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-/** use */
-const $q = useQuasar();
-const selected = ref<ResponseItems[]>([]);
-const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
-
-/** คอลัมน์ */
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** คอลัมน์ที่แสดง */
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "statustext",
-]);
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-  modal: Boolean,
-  closeModal: Function,
-  getData: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-//popup ยืนยันส่ง
-function saveOrder() {
-  dialogConfirm(
-    $q,
-    () => Ordersave(),
-    "ยืนยันส่งไปออกคำสั่ง",
-    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
-  );
-}
-
-//ส่งไปออกคำสั่ง
-async function Ordersave() {
-  const id = selected.value.map((r) => r.id);
-  const body = {
-    id,
-  };
-  showLoader();
-  await http
-    .post(config.API.dischargeReport, 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"]);
-function updateInput(value: any) {
-  emit("update:filterKeyword2", value);
-}
-
-//รีเซ็ตค่าในช่องค้นหา
-function Reset() {
-  emit("update:filterKeyword2", "");
-}
-
-watchEffect(() => {
-  if (props.modal === true) {
-    selected.value = [];
-  }
-});
-</script>
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <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="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="id"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  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 }}
-                </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
-                </div>
-              </q-td>
-              <q-td key="statustext" :props="props">
-                {{ props.row.statustext }}
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="ส่งไปออกคำสั่ง"
-          @click="saveOrder"
-          :disable="checkSelected"
-          color="public"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/06_retirement/components/Discharged/dischargedMain.vue b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
deleted file mode 100644
index 0d1de78d9..000000000
--- a/src/modules/06_retirement/components/Discharged/dischargedMain.vue
+++ /dev/null
@@ -1,399 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-
-import type { ResponseData } from "@/modules/06_retirement/interface/response/discharged";
-
-import DialogSendToCommand from "@/modules/06_retirement/components/Discharged/DialogSendToCommand.vue";
-
-/** use */
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin();
-const transferStore = useTransferDataStore();
-const { statusText } = transferStore;
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogMessage,
-} = mixin;
-
-const modal = ref<boolean>(false);
-
-/** คอลัมน์ที่แสดง */
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "createdAt",
-  "statustext",
-]);
-
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filters = ref<ResponseData[]>([]);
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
-/** ข้อมูลตาราง (จำลอง)*/
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-
-/**
- * Setting Pagination
- */
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-/** คอลัมน์ */
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
-
-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 &&
-      r.organization &&
-      r.date
-  );
-  rows2.value = row;
-}
-
-/** Fnction เรียกข้อมูลจาก API  */
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.retirementDischarge)
-    .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();
-    });
-}
-
-/**
- * ฟังก์ชั่นลบข้อมูล
- * @param id ไอดีของข้อมูล
- */
-async function clickDelete(id: string) {
-  dialogMessage(
-    $q,
-    `ลบข้อมูล`,
-    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    "delete",
-    "ยืนยัน",
-    "red",
-    async () => await deleteData(id),
-    async () => await getData()
-  );
-}
-//ฟังก์ชั่นลบของมูลโดยการส่ง Api
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.dischargeByid(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-    });
-}
-
-/**  Hook */
-onMounted(async () => {
-  await getData();
-});
-</script>
-<template>
-  <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">
-      <div class="col-12">
-        <div class="row col-12">
-          <q-btn
-            @click="openModalOrder"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
-            <q-tooltip>ส่งไปออกคำสั่งปลดออก</q-tooltip>
-          </q-btn>
-
-          <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            
-            style="min-width: 140px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
-        </div>
-
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="id"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-          >
-            <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-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="no"
-                  :props="props"
-                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
-                >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
-                >
-                  {{ props.row.position }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
-                  </div>
-                </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organization }}
-                  </div>
-                </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
-                >
-                  {{ 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>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </div>
-    </div>
-  </q-card>
-  <DialogSendToCommand
-    v-model:modal="modal"
-    :closeModal="closeModal"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    :fecthlistRecevice="getData"
-  />
-</template>
-<style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
deleted file mode 100644
index e55eb95fb..000000000
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ /dev/null
@@ -1,491 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { tokenParsed } from "@/plugins/auth";
-
-/**Import type */
-import type { QForm } from "quasar";
-import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/discharged";
-
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-import CurrencyInput from "@/components/CurruncyInput.vue";
-
-/** use */
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-const dataId = route.params.id.toString();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
-
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
-
-const myForm = ref<QForm | null>(null);
-const roleAdmin = ref<boolean>(false);
-const edit = ref<boolean>(false);
-
-/**
- * กำหนดค่าตัวแปร
- */
-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(),
-  id: "",
-  organization: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  reason: "",
-  salary: 0,
-  status: "",
-  fullname: "",
-});
-
-/** Fnction เรียกข้อมูลจาก API  */
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.dischargeByid(dataId))
-    .then((res: any) => {
-      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 ?? "";
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * ฟังก์ชั่น Cancle
- */
-async function clickCancel() {
-  await getData();
-  edit.value = false;
-}
-
-/**
- * ฟังก์ชั่น Save
- */
-async function conditionSave() {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => {
-            await saveData();
-          },
-          "ยืนยันการแก้ไขข้อมูล",
-          "ต้องการยืนยันการแก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายหรือไม่?"
-        );
-      }
-    });
-  }
-}
-
-//บันทึกข้อมูล
-async function saveData() {
-  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,
-  };
-  showLoader();
-  await http
-    .put(config.API.dischargeByid(dataId), body)
-    .then((res: any) => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-}
-
-/**
- * Function เพิ่ม Class เวลา Edit
- * @param val เมื่อเป็นEdit จะเปลี่ยน Class
- */
-function getClass(val: boolean) {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-}
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-/** Hook */
-onMounted(async () => {
-  const user = await tokenParsed();
-  if (user) {
-    roleAdmin.value = await user.role.includes("placement1");
-  }
-  await getData();
-});
-</script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายละเอียดการปลดออกของ {{ responseData.fullname }}
-  </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 }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(responseData.personId)"
-      />
-    </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="@/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 }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">
-              {{ responseData.positionLevelOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ responseData.organizationPositionOld }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
-      </div>
-      <q-space />
-      <div
-        v-if="
-          responseData.status !== 'DONE' && responseData.status !== 'REPORT'
-        "
-      >
-        <div class="q-gutter-sm" v-if="!edit">
-          <q-btn
-            outline
-            color="primary"
-            dense
-            icon-right="mdi-file-edit-outline"
-            class="q-px-sm"
-            label="แก้ไข"
-            style="width: 80px"
-            @click="edit = !edit"
-          />
-        </div>
-        <div class="q-gutter-sm" v-else>
-          <q-btn
-            outline
-            color="public"
-            dense
-            class="q-px-sm"
-            label="บันทึก"
-            style="width: 80px"
-            @click="conditionSave"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="clickCancel"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <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-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space
-                :label="`${'ระดับ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <!-- <CurrencyInput
-                v-model="salary"
-                :edit="edit"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
-              /> -->
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกการปลดออก'}`]"
-                hide-bottom-space
-                :label="`${'การปลดออก'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-6 row">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val:string) => !!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
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
-</template>
-<style lang="scss" scope>
-.q-img {
-  border-radius: 5px;
-  height: 70px;
-}
-.text-top {
-  color: gray;
-  font-weight: 400;
-  padding-bottom: 3px;
-}
-.text-detail {
-  font-weight: 500;
-}
-</style>
diff --git a/src/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue b/src/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue
deleted file mode 100644
index dbc2eafc9..000000000
--- a/src/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-
-import type { QTableProps } from "quasar";
-import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-/** use */
-const $q = useQuasar();
-const selected = ref<ResponseItems[]>([]);
-const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
-
-/** คอลัมน์ */
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** คอลัมน์ที่แสดง */
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "statustext",
-]);
-
-/** props*/
-const props = defineProps({
-  modal: Boolean,
-  closeModal: Function,
-  getData: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
-/**
- * ฟังก์ชั่นการ Selected Data
- */
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-//popup ยืนยันส่งัว
-function saveOrder() {
-  dialogConfirm(
-    $q,
-    () => Ordersave(),
-    "ยืนยันส่งไปออกคำสั่ง",
-    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
-  );
-}
-
-//ส่งไปออกคำสั่ง
-async function Ordersave() {
-  const id = selected.value.map((r) => r.id);
-  const body = {
-    id,
-  };
-  showLoader();
-  await http
-    .post(config.API.expulsionReport, 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"]);
-function updateInput(value: any) {
-  emit("update:filterKeyword2", value);
-}
-
-//รีเซ็ตค่าในช่องค้นหา
-function Reset() {
-  emit("update:filterKeyword2", "");
-}
-
-watchEffect(() => {
-  if (props.modal === true) {
-    selected.value = [];
-  }
-});
-</script>
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <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="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="id"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  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 }}
-                </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
-                </div>
-              </q-td>
-              <q-td key="statustext" :props="props">
-                {{ props.row.statustext }}
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="ส่งไปออกคำสั่ง"
-          @click="saveOrder"
-          :disable="checkSelected"
-          color="public"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
deleted file mode 100644
index 5e70a9f25..000000000
--- a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
+++ /dev/null
@@ -1,394 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRetirementDataStore } from "@/modules/06_retirement/store/Main";
-
-import type { ResponseData } from "@/modules/06_retirement/interface/response/expulsion";
-
-import DialogSendToCommand from "@/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue";
-
-/** use */
-const $q = useQuasar();
-const router = useRouter();
-const modal = ref<boolean>(false);
-const mixin = useCounterMixin();
-const retirementStore = useRetirementDataStore();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogRemove,
-} = mixin;
-const { statusText } = retirementStore;
-
-/** คอลัมน์ที่แสดง */
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "createdAt",
-  "statustext",
-]);
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
-/** คอลัมน์ */
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const filters = ref<ResponseData[]>([]);
-
-/** Setting Pagination */
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/**
- * ฟังก์ชั่น modal
- */
-const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
-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 &&
-      r.organization &&
-      r.date
-  );
-  rows2.value = row;
-}
-
-/**
- * นำข้อมูลมาจาก API
- */
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.retirementExpulsion)
-    .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();
-    });
-}
-
-/**
- * ลบข้อมูล
- * @param id ไอดีข้อมูล
- */
-async function clickDelete(id: string) {
-  dialogRemove(
-    $q,
-    async () => {
-      await deleteData(id);
-    },
-    `ลบข้อมูล`,
-    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`
-  );
-}
-//ลบข้อมูลจากAPI
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.expulsionByid(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await getData();
-    });
-}
-
-/** HOOK */
-onMounted(async () => {
-  await getData();
-});
-</script>
-<template>
-  <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">
-      <div class="col-12">
-        <div class="row col-12">
-          <q-btn
-            @click="openModalOrder"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
-            <q-tooltip>ส่งไปออกคำสั่งไล่ออก</q-tooltip>
-          </q-btn>
-
-          <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            
-            style="min-width: 140px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
-        </div>
-
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="id"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-          >
-            <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-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="no"
-                  :props="props"
-                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
-                >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
-                >
-                  {{ props.row.position }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
-                  </div>
-                </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
-                >
-                  <div 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>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </div>
-    </div>
-  </q-card>
-  <DialogSendToCommand
-    v-model:modal="modal"
-    :closeModal="closeModal"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    :fecthlistRecevice="getData"
-  />
-</template>
-<style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
deleted file mode 100644
index f66c154fb..000000000
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ /dev/null
@@ -1,493 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { tokenParsed } from "@/plugins/auth";
-
-/**Import Type */
-import type { QForm } from "quasar";
-import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
-
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-import CurrencyInput from "@/components/CurruncyInput.vue";
-
-/** Use */
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-const dataId = route.params.id.toString();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
-
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
-
-/**ตัวแปร */
-const myForm = ref<QForm | null>(null);
-const roleAdmin = ref<boolean>(false);
-const edit = ref<boolean>(false);
-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>("");
-
-/**Setค่าตัวแปร */
-const responseData = ref<ResponseDataDetail>({
-  personId: "",
-  avataPath: "",
-  createdAt: new Date(),
-  date: new Date(),
-  id: "",
-  organization: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  reason: "",
-  salary: 0,
-  status: "",
-  fullname: "",
-});
-
-/**
- * นำข้อมูลมาจาก API
- */
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.expulsionByid(dataId))
-    .then((res: any) => {
-      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.avataPath ?? "";
-      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 ?? "";
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**ฟังก์ชั่นcancel */
-async function clickCancel() {
-  await getData();
-  edit.value = false;
-}
-
-/**
- * Functionบันทึก
- */
-async function conditionSave() {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => {
-            await saveData();
-          },
-          "ยืนยันการแก้ไขข้อมูล",
-          "ต้องการแก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายหรือไม่?"
-        );
-      }
-    });
-  }
-}
-//Save จาก Api
-async function saveData() {
-  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,
-  };
-  showLoader();
-  await http
-    .put(config.API.expulsionByid(dataId), body)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-}
-
-/**
- * Function เพิ่ม Class เวลา Edit
- * @param val เมื่อเป็นEdit จะเปลี่ยน Class
- */
-function getClass(val: boolean) {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-}
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-/**Hook */
-onMounted(async () => {
-  const user = await tokenParsed();
-  if (user) {
-    roleAdmin.value = await user.role.includes("placement1");
-  }
-  await getData();
-});
-</script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายละเอียดการไล่ออกของ {{ responseData.fullname }}
-  </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 }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(responseData.personId)"
-      />
-    </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="@/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 }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">
-              {{ responseData.positionLevelOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ responseData.organizationPositionOld }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
-      </div>
-      <q-space />
-      <div
-        v-if="
-          responseData.status !== 'DONE' && responseData.status !== 'REPORT'
-        "
-      >
-        <div class="q-gutter-sm" v-if="!edit">
-          <q-btn
-            outline
-            color="primary"
-            dense
-            icon-right="mdi-file-edit-outline"
-            class="q-px-sm"
-            label="แก้ไข"
-            style="width: 80px"
-            @click="edit = !edit"
-          />
-        </div>
-        <div class="q-gutter-sm" v-else>
-          <q-btn
-            outline
-            color="public"
-            dense
-            class="q-px-sm"
-            label="บันทึก"
-            style="width: 80px"
-            @click="conditionSave"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="clickCancel"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <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-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space
-                :label="`${'ระดับ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <!-- <CurrencyInput
-                v-model="salary"
-                :edit="edit"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
-              /> -->
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกการไล่ออกจากสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ไล่ออกจากสังกัด'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-6 row">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :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
-                    :borderless="!edit"
-                    :readonly="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val:string) => !!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
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
-</template>
-<style lang="scss" scope>
-.q-img {
-  border-radius: 5px;
-  height: 70px;
-}
-.text-top {
-  color: gray;
-  font-weight: 400;
-  padding-bottom: 3px;
-}
-.text-detail {
-  font-weight: 500;
-}
-</style>
diff --git a/src/modules/18_command/components/Main/DialogFormCommand.vue b/src/modules/18_command/components/Main/DialogFormCommand.vue
index f391a5d04..5b5616415 100644
--- a/src/modules/18_command/components/Main/DialogFormCommand.vue
+++ b/src/modules/18_command/components/Main/DialogFormCommand.vue
@@ -76,7 +76,6 @@ function onSubmit() {
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    commandType.value = val ? "" : commandType.value;
     commandOp.value = listCommand.value.filter(
       (v: any) => v.name.indexOf(val) > -1
     );
@@ -90,6 +89,7 @@ function filterSelector(val: string, update: Function) {
 function onClose() {
   modal.value = false;
   commandNo.value = "";
+  commandType.value = "";
   commandYear.value = new Date().getFullYear();
 }
 
@@ -129,10 +129,12 @@ watch(modal, () => {
                 option-value="id"
                 lazy-rules
                 use-input
+                hide-selected
+                fill-input
                 hide-bottom-space
                 outlined
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn) "
               >
                 <template v-slot:no-option>
diff --git a/src/modules/18_command/components/Main/TableMain.vue b/src/modules/18_command/components/Main/TableMain.vue
index 42514d539..acd35ab6b 100644
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@@ -35,72 +35,6 @@ const props = defineProps({
   fetchList: { type: Function, required: true },
 });
 
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "commandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: false,
-    field: "commandNo",
-    format(val, row) {
-      return val ? `${val}/${row.commandYear + 543}` : "-";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "issue",
-    align: "left",
-    label: "ชื่อคำสั่ง",
-    sortable: true,
-    field: "issue",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "commandAffectDate",
-    align: "left",
-    label: "วันที่ลงนาม",
-    sortable: false,
-    field: "commandAffectDate",
-    format(val) {
-      return val ? date2Thai(val) : "-";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "commandExcecuteDate",
-    align: "left",
-    label: "วันที่คำสั่งมีผล",
-    sortable: false,
-    field: "commandExcecuteDate",
-    format(val) {
-      return val ? date2Thai(val) : "-";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้สร้าง",
-    sortable: false,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "assignFullName",
-    align: "left",
-    label: "ผู้ลงนาม",
-    sortable: false,
-    field: "assignFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
 const modalCopy = ref<boolean>(false);
 const isCheckPageSize = ref<boolean>(false);
 const commandId = ref<string>("");
@@ -208,7 +142,8 @@ onMounted(() => {
 <template>
   <d-table
     ref="table"
-    :columns="columns"
+    :columns="store.columns"
+    :visible-columns="store.visibleColumns"
     :rows="store.rows"
     row-key="id"
     flat
diff --git a/src/modules/18_command/components/Step/2_ListPersons.vue b/src/modules/18_command/components/Step/2_ListPersons.vue
index 50a1a636b..05f1fefe1 100644
--- a/src/modules/18_command/components/Step/2_ListPersons.vue
+++ b/src/modules/18_command/components/Step/2_ListPersons.vue
@@ -5,7 +5,6 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
-import { usePosSalaryDataStore } from "@/modules/18_command/store/PosSalary";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -21,8 +20,6 @@ import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vu
 const $q = useQuasar();
 const route = useRoute();
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
-
-const storePosSalary = usePosSalaryDataStore();
 const store = useCommandDetail();
 const {
   dialogConfirm,
@@ -42,6 +39,7 @@ const props = defineProps({
 });
 
 const ListCommandSalary = ref<ListCommandSalaryType[]>([]);
+const ListCommandSalaryMain = ref<ListCommandSalaryType[]>([]);
 
 let selectPersonData = reactive<PersonInfo>({
   id: "",
@@ -58,7 +56,6 @@ let selectPersonData = reactive<PersonInfo>({
   mouthSalaryAmount: 0,
 });
 const commandReciveId = ref<string>(""); //เก็บ id commandReciveId
-const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
 const templatePos = ref<string>("");
 const position = ref<string>("");
 
@@ -120,7 +117,7 @@ const modalPerson = ref<boolean>(false);
  * @param val
  */
 function updatePos(val: string) {
-  const data = ListCommandSalary.value.find(
+  const data = ListCommandSalaryMain.value.find(
     (item: ListCommandSalaryType) => item.id === val
   );
   if (data) {
@@ -183,7 +180,7 @@ function filterSelector(val: string, update: Function, filtername: string) {
   switch (filtername) {
     case "pos":
       update(() => {
-        posNoOptions.value = storePosSalary.optionPos.filter(
+        ListCommandSalary.value = ListCommandSalaryMain.value.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
@@ -222,6 +219,7 @@ async function getCommandSalaryList(type: string) {
     .get(config.API.commandSalaryList(type))
     .then(async (res) => {
       const data = await res.data.result;
+      ListCommandSalaryMain.value = data;
       ListCommandSalary.value = data;
     })
     .catch((e) => {
@@ -279,11 +277,13 @@ onMounted(async () => {
                 option-value="id"
                 hide-bottom-space
                 use-input
+                hide-selected
+                fill-input
                 emit-value
                 map-options
                 input-debounce="0"
                 @update:modelValue="updatePos"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                   doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                   )"
               />
@@ -327,16 +327,9 @@ onMounted(async () => {
                   outlined
                   debounce="300"
                   placeholder="ค้นหา"
-                  style="max-width: 200px"
                 >
                   <template v-slot:append>
-                    <q-icon v-if="filter == ''" name="search" />
-                    <q-icon
-                      v-if="filter !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="filter = ''"
-                    />
+                    <q-icon name="search" />
                   </template>
                 </q-input>
                 <!-- แสดงคอลัมน์ใน table -->
diff --git a/src/modules/18_command/components/Step/3_ReceivedCopy.vue b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
index a042ba096..789c242a0 100644
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@@ -219,17 +219,10 @@ onMounted(() => {
           outlined
           debounce="300"
           placeholder="ค้นหา"
-          style="max-width: 200px"
           class="q-ml-sm"
         >
           <template v-slot:append>
-            <q-icon v-if="filter == ''" name="search" />
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click.prevent="filter = ''"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
diff --git a/src/modules/18_command/store/ListStore.ts b/src/modules/18_command/store/ListStore.ts
index deb5a759d..3475b5681 100644
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@@ -6,17 +6,91 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
 import type {
   DataListCommand,
   DataCommandType,
 } from "@/modules/18_command/interface/response/Main";
 
 const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, date2Thai, messageError } = useCounterMixin();
 
 export const useCommandListStore = defineStore("commandListStore", () => {
   const tabsMain = ref<string>("DRAFT");
   const rows = ref<DataListCommand[]>([]);
+  const columns = ref<QTableProps["columns"]>([
+    {
+      name: "commandNo",
+      align: "left",
+      label: "เลขที่คำสั่ง",
+      sortable: false,
+      field: "commandNo",
+      format(val, row) {
+        return val ? `${val}/${row.commandYear + 543}` : "-";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "issue",
+      align: "left",
+      label: "ชื่อคำสั่ง",
+      sortable: true,
+      field: "issue",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "commandAffectDate",
+      align: "left",
+      label: "วันที่ลงนาม",
+      sortable: false,
+      field: "commandAffectDate",
+      format(val) {
+        return val ? date2Thai(val) : "-";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "commandExcecuteDate",
+      align: "left",
+      label: "วันที่คำสั่งมีผล",
+      sortable: false,
+      field: "commandExcecuteDate",
+      format(val) {
+        return val ? date2Thai(val) : "-";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "createdFullName",
+      align: "left",
+      label: "ผู้สร้าง",
+      sortable: false,
+      field: "createdFullName",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "assignFullName",
+      align: "left",
+      label: "ผู้ลงนาม",
+      sortable: false,
+      field: "assignFullName",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+  const visibleColumns = ref<string[]>([
+    "commandNo",
+    "issue",
+    "commandAffectDate",
+    "commandExcecuteDate",
+    "createdFullName",
+    "assignFullName",
+  ]);
   const total = ref<number>(0);
   const maxPage = ref<number>(0);
 
@@ -30,7 +104,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
   async function fetchCommandType() {
     //เช็คค่าของ listCommand
     if (listCommand.value.length === 0) {
-      showLoader();
+      // showLoader();
       try {
         const res = await http.get(config.API.commandType);
         const data = res.data.result;
@@ -44,7 +118,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       } catch (err) {
         messageError($q, err);
       } finally {
-        hideLoader();
+        // hideLoader();
       }
     } else {
       return listCommand.value;
@@ -54,6 +128,8 @@ export const useCommandListStore = defineStore("commandListStore", () => {
   return {
     tabsMain,
     rows,
+    columns,
+    visibleColumns,
     total,
     maxPage,
     fetchCommandType,
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index 2b99e7ac3..3d5350d02 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
@@ -13,7 +13,6 @@ import type {
   DataOption,
 } from "@/modules/18_command/interface/index/Main";
 import type { FormQuery } from "@/modules/18_command/interface/request/Main";
-import type { ResListCommand } from "@/modules/18_command/interface/response/Main";
 
 import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
 import TableList from "@/modules/18_command/components/Main/TableMain.vue";
@@ -38,7 +37,12 @@ const queryParams = reactive<FormQuery>({
   keyword: "", //คำค้นหา
   commandTypeId: "",
 });
-const commandOpMain = ref<DataOption[]>([]);
+const commandOpMain = ref<DataOption[]>([
+  {
+    id: "",
+    name: "ทั้งหมด",
+  },
+]);
 const commandOp = ref<DataOption[]>([]);
 
 const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
@@ -47,12 +51,17 @@ const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
  * ฟังก์ชันดึงข้อมูลรายการคำสั่ง
  */
 async function fetchListCommand() {
+  store.rows = [];
   showLoader();
   await http
     .get(config.API.commandList, {
-      params: { ...queryParams, status: store.tabsMain },
+      params: {
+        ...queryParams,
+        status: store.tabsMain,
+        keyword: queryParams.keyword.trim(),
+      },
     })
-    .then(async (res: ResListCommand) => {
+    .then(async (res) => {
       const data = await res.data.result;
       store.rows = data.data;
       store.total = data.total;
@@ -73,7 +82,6 @@ async function fetchListCommand() {
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    queryParams.commandTypeId = val ? "" : queryParams.commandTypeId;
     commandOp.value = commandOpMain.value.filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
@@ -82,8 +90,10 @@ function filterSelector(val: string, update: Function) {
 
 onMounted(async () => {
   const data = await store.fetchCommandType();
-  commandOpMain.value = data ? data : [];
-  commandOp.value = commandOpMain.value;
+  if (data) {
+    commandOpMain.value.push(...data);
+    commandOp.value = commandOpMain.value;
+  }
 });
 </script>
 
@@ -91,93 +101,120 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>
 
   <!-- toolbar -->
-  <q-card>
-    <q-toolbar class="q-pa-sm q-col-gutter-sm">
-      <datepicker
-        menu-class-name="modalfix"
-        v-model="queryParams.year"
-        :locale="'th'"
-        autoApply
-        year-picker
-        :enableTimePicker="false"
-        @update:model-value="(queryParams.page = 1), fetchListCommand()"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            dense
-            outlined
-            hide-bottom-space
-            :model-value="
-              queryParams.year == null ? null : queryParams.year + 543
-            "
-            :label="`${'ปีงบประมาณ'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-primary)"
-              >
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
+  <q-card class="q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12 row">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="queryParams.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="(queryParams.page = 1), fetchListCommand()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              :model-value="
+                queryParams.year == null ? null : queryParams.year + 543
+              "
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-      <q-btn
-        v-if="checkPermission($route)?.attrIsCreate"
-        flat
-        round
-        dense
-        icon="add"
-        color="primary"
-        @click.prevent="modalAdd = true"
-      />
+        <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click.prevent="modalAdd = true"
+        />
+      </div>
 
-      <q-space />
-      <q-select
-        clearable
-        @clear="queryParams.page = 1"
-        :class="queryParams.commandTypeId ? 'select_ellipsis3' : ''"
-        v-model="queryParams.commandTypeId"
-        :label="`${'ประเภทคำสั่ง'}`"
-        dense
-        emit-value
-        map-options
-        option-label="name"
-        :options="commandOp"
-        option-value="id"
-        lazy-rules
-        use-input
-        @update:model-value="(queryParams.page = 1), fetchListCommand()"
-        outlined
-        style="width: 620px"
-        @filter="(inputValue:string,
-          doneFn:Function) => filterSelector(inputValue, doneFn) "
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-      <q-input
-        dense
-        outlined
-        v-model="queryParams.keyword"
-        label="ค้นหา"
-        clearable
-        style="width: 300px"
-        @keydown.enter="(queryParams.page = 1), fetchListCommand()"
-      >
-        <template v-slot:append v-if="!queryParams.keyword">
-          <q-icon name="search" /> </template
-      ></q-input>
-    </q-toolbar>
+      <div class="col-12 row">
+        <q-card bordered class="col-12 filter-card q-pa-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-select
+              :clearable="queryParams.commandTypeId !== ''"
+              @clear="
+                (queryParams.page = 1),
+                  (queryParams.commandTypeId = ''),
+                  (commandOp = commandOpMain)
+              "
+              :class="queryParams.commandTypeId ? 'select_ellipsis3' : ''"
+              v-model="queryParams.commandTypeId"
+              :label="`${'ประเภทคำสั่ง'}`"
+              dense
+              emit-value
+              map-options
+              option-label="name"
+              :options="commandOp"
+              option-value="id"
+              lazy-rules
+              use-input
+              @update:model-value="(queryParams.page = 1), fetchListCommand()"
+              outlined
+              hide-selected
+              fill-input
+              style="width: 620px"
+              @filter="(inputValue:string,
+              doneFn:Function) => filterSelector(inputValue, doneFn) "
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <q-space />
+            <q-input
+              dense
+              outlined
+              v-model="queryParams.keyword"
+              label="ค้นหา"
+              @keydown.enter="(queryParams.page = 1), fetchListCommand()"
+            >
+              <template v-slot:append> <q-icon name="search" /> </template
+            ></q-input>
+
+            <q-select
+              dense
+              multiple
+              outlined
+              emit-value
+              map-options
+              options-dense
+              option-value="name"
+              style="min-width: 140px"
+              v-model="store.visibleColumns"
+              :options="store.columns"
+              :display-value="$q.lang.table.columns"
+            />
+          </div>
+        </q-card>
+      </div>
+    </div>
   </q-card>
 
   <!-- Tabs -->