Refactor Code รายการช่วยราชการ

src/modules/05_placement/components/Receive/receiveMain.vue

@@ -318,14 +318,14 @@ const fecthlistRecevice = async () => {
           organizationShortName: e.organizationShortName,
           positionNumber: e.positionNumber,
           positionPath: e.positionPath,
-          birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+          birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth) && 
+                    e.dateOfBirth.toString() === "0001-01-01T00:00:00" ? "-" : date2Thai(e.dateOfBirth),
           status: e.status,
           statusText: statusText(e.status ?? ""),
           createdAt: e.createdAt !== null ? new Date(e.createdAt) : null,
           dateText: e.createdAt !== null ? date2Thai(e.createdAt) : "-",
         });
       });
-      //   console.log(list);
       rows.value = list;
       filters.value = list;
     })

src/modules/05_placement/components/helpgovernment/Dialogbody.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const selected = ref<officerType[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "statusText",
+]);
+//หัวตาราง
+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: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ให้ช่วยราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันเริ่มช่วยราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "วันสิ้นสุดการช่วยราชการ",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const props = defineProps({
+  Modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2:String,
+});
+
+
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
+}
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
+  showLoader();
+  await http
+    .post(config.API.officerMainReport(), body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
+      props.closeModal?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+        props.getData?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+    emit("update:filterKeyword2", "");
+};
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+      <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :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" options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="id" class="custom-header-table" 
+          :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="posNo" :props="props">
+                {{ props.row.posNo }}
+              </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="dateStart" :props="props">
+                {{ props.row.dateStart }}
+              </q-td>
+              <q-td key="dateEnd" :props="props">
+                {{ props.row.dateEnd }}
+              </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-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ส่งไปออกคำสั่ง" :disable="checkSelected" color="public" @click="saveOrder" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/05_placement/components/helpgovernment/governmentDetail.vue

@@ -3,16 +3,9 @@ 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 keycloak from "@/plugins/keycloak";
+import type { QForm } from "quasar";
-
-import type { QTableProps, QForm } from "quasar";
-// import type {
-//   TypeFile,
-//   ResponseDataDetail,
-// } from "@/modules/05_placement/interface/response/Transfer";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -29,11 +22,8 @@ const {
   success,
 } = mixin;
 
-const roleAdmin = ref<boolean>(false);
+
 const myForm = ref<QForm | null>(null);
-const name = ref<string>("นายสมคิด ยอดใจ");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
 const fullname = ref<string>("");
 const id = ref<string>("");
 const profileId = ref<string>("");
@@ -88,7 +78,6 @@ const getData = async () => {
       isActive.value = data.isActive;
     })
     .catch((e) => {
-      //   messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -102,9 +91,6 @@ const getClass = (val: boolean) => {
 };
 //
 const conditionSave = async () => {
-  // if (myForm.value !== null) {
-  //   myForm.value.validate().then((success: any) => {
-  //     if (success) {
   dialogConfirm(
     $q,
     async () => await saveData(),
@@ -112,9 +98,7 @@ const conditionSave = async () => {
     "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
   );
 };
-//     });
+
-//   }
-// };
 const cancelBtn = () => {
   edit.value = !edit;
   getData();
@@ -135,8 +119,6 @@ const saveData = async () => {
   await http
     .put(config.API.officerMainEdit(dataId), body)
     .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -156,31 +138,16 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary"
-      icon="mdi-arrow-left"
+      class="q-mr-sm" @click="router.push(`/help-government`)" />
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
     รายละเอียดการช่วยราชการ {{ 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">{{ fullname }}</div>
       <q-space />
-      <q-btn
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
-        outline
+      label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${profileId}`)"
-      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -224,37 +191,15 @@ onMounted(async () => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn
+        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
-          outline
+          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit"
-          color="primary"
+          v-if="!(status == 'REPORT' || status == 'DONE')" />
-          dense
-          icon-right="mdi-file-edit-outline"
-          class="q-px-sm"
-          label="แก้ไข"
-          style="width: 80px"
-          @click="edit = !edit"
-          v-if="!(status == 'REPORT' || status == 'DONE')"
-        />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn
+        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px"
-          outline
+          @click="conditionSave" />
-          color="public"
+        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
-          dense
+          style="width: 80px" @click="cancelBtn" />
-          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="cancelBtn"
-        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -268,143 +213,35 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12">
-              <q-input
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
-                :class="getClass(edit)"
+              :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                :outlined="edit"
+              hide-bottom-space :label="`${'ตำแหน่ง'}`" type="textarea" />
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง'}`"
-                type="textarea"
-              />
             </div>
           </div>
-          <!-- <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space
-                :label="`${'ระดับ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              />
-            </div>
-          </div> -->
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-4 row ">
             <div class="col-12">
-              <q-input
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
-                :outlined="edit"
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
-              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-4 row ">
             <div class="col-12">
-              <datepicker
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateStart" :locale="'th'"
-                menu-class-name="modalfix"
+                autoApply :enableTimePicker="false" week-start="0" >
-                :readonly="!edit"
-                v-model="dateStart"
-                :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
+                  <q-input :class="getClass(edit)" :outlined="edit" dense :readonly="!edit"
-                    :class="getClass(edit)"
+                    lazy-rules :borderless="!edit" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    :outlined="edit"
+                    :model-value=" dateStart !== null ? date2Thai(dateStart) : null "
-                    dense
+                    hide-bottom-space :label="`${'ตั้งแต่วัน'}`" >
-                    :readonly="!edit"
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
-                      dateStart !== null ? date2Thai(dateStart) : null
-                    "
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ตั้งแต่วัน'}`"
-                  >
                     <template v-slot:prepend>
-                      <q-icon
+                      <q-icon name="event" class="cursor-pointer"
-                        name="event"
+                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -414,41 +251,19 @@ onMounted(async () => {
           </div>
           <div class="col-xs-6 col-sm-4 row ">
             <div class="col-12">
-              <datepicker
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateEnd" :locale="'th'"
-                menu-class-name="modalfix"
+                autoApply :enableTimePicker="false" week-start="0" >
-                :readonly="!edit"
-                v-model="dateEnd"
-                :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
+                  <q-input :readonly="!edit" :class="getClass(edit)" :outlined="edit" dense
-                    :readonly="!edit"
+                    lazy-rules :borderless="!edit" :model-value="dateEnd !== null ? date2Thai(dateEnd) : null" 
-                    :class="getClass(edit)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ถึงวันที่'}`" >
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ถึงวันที่'}`"
-                  >
                     <template v-slot:prepend>
-                      <q-icon
+                      <q-icon name="event" class="cursor-pointer"
-                        name="event"
+                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' "
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
                       >
                       </q-icon>
                     </template>
@@ -458,19 +273,9 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
-              :class="getClass(edit)"
+              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              :outlined="edit"
+              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
           </div>
         </div>
       </div>

src/modules/05_placement/components/helpgovernment/mainHelp.vue

@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
-import http from "@/plugins/http";
+import type { QTableProps } from "quasar";
-import config from "@/app.config";
-const transferStore = useTransferDataStore();
-const { statusText } = transferStore;
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
-
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
-const selected = ref<officerType[]>([]);
+import Dialogbody from "@/modules/05_placement/components/helpgovernment/Dialogbody.vue";
-const checkSelected = computed(() => {
+import http from "@/plugins/http";
-  if (selected.value.length === 0) {
+import config from "@/app.config";
-    return true;
+
-  }
+const transferStore = useTransferDataStore();
-});
+const { statusText } = transferStore;
-const firstName = ref<string>("");
 
 const $q = useQuasar();
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
 const router = useRouter();
-const mixin = useCounterMixin();
 
+const rows = ref<officerType[]>([]);
+const rows2 = ref<any>([]);
+const modal = ref<boolean>(false);
+const mixin = useCounterMixin();
 const {
   date2Thai,
   messageError,
@@ -35,7 +33,7 @@ const {
   dialogRemove,
 } = mixin;
 
-const modal = ref<boolean>(false);
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -49,79 +47,8 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "statusText",
 ]);
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "dateStart",
-  "dateEnd",
-  "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 nextPage = (id:string) => {
+//หัวตาราง
-//   router.push("/retirement/resign/"+id);
-// };
-const rows = ref<officerType[]>([]);
-const rows2 = ref<any>([
-  {
-    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
-    fullname: "นางสาวอย พชช",
-    position: "นักบริหาร",
-    positionLevel: "ต้น",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -220,114 +147,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     sortOrder: "da",
   },
-  {
-    name: "statusText",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statusText",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }
-]);
-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: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    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: "organization",
-    align: "left",
-    label: "หน่วยงานที่ให้ช่วยราชการ",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "dateStart",
-    align: "left",
-    label: "วันเริ่มช่วยราชการ",
-    sortable: true,
-    field: "dateStart",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateEnd",
-    align: "left",
-    label: "วันสิ้นสุดการช่วยราชการ",
-    sortable: true,
-    field: "dateEnd",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
-  },
   {
     name: "statusText",
     align: "left",
@@ -339,13 +158,21 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
-//--------------(ปุ่มลบ)----------------//
+//รีเซ็ตข้อมูลในช่องฟิลเตอร์
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
 
 const openDetail = (id: string) => {
   router.push(`/help-government/detail/${id}`);
 };
 const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
+const closeModal = () => {
+  modal.value = false
+  filterKeyword2.value = "";
+};
 const openModalOrder = () => {
   openModal();
   const row = rows.value.filter(
@@ -362,7 +189,6 @@ const getData = async () => {
     .get(config.API.officerMain())
     .then((res: any) => {
       const data = res.data.result;
-      //   console.log("data==>", data);
       rows.value = data.map((item: officerType) => ({
         id: item.id,
         fullname: `${item.prefix}${item.firstName} ${item.lastName}`,
@@ -385,38 +211,13 @@ const getData = async () => {
         dateStart:
           item.dateStart == null ? "-" : date2Thai(new Date(item.dateStart)),
       }));
-      //   console.log(rows.value);
     })
-    .catch((e) => {
+    .catch((e) => {})
-      // messageError($q, e);
+    .finally(() => { 
-    })
-    .finally(() => {
       hideLoader();
     });
 };
-const saveOrder = async () => {
-  const id = selected.value.map((item) => item.id);
-  const body = {
-    id,
-  };
 
-  showLoader();
-  await http
-    .post(config.API.officerMainReport(), body)
-    .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
-      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
-      closeModal();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
 const deleteData = async (id: string) => {
   await http
     .delete(config.API.officerMainDelete(id))
@@ -446,54 +247,21 @@ onMounted(async () => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <q-btn
+          <q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right" >
-            @click="openModalOrder"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
             <q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
           </q-btn>
-
           <q-space />
-          <q-input
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" 
-            class="col-xs-12 col-sm-3 col-md-2"
+          outlined debounce="300" placeholder="ค้นหา" >
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
 
-          <q-select
+          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            v-model="visibleColumns"
+            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            multiple
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
         </div>
 
         <div class="col-12 q-pt-sm">
@@ -524,90 +292,42 @@ onMounted(async () => {
                 >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td
+                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)" >
-                  key="posNo"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   {{ props.row.posNo }}
                 </q-td>
-                <q-td
+                <q-td key="position" :props="props" @click="openDetail(props.row.id)" >
-                  key="position"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   {{ props.row.position }}
                 </q-td>
-                <q-td
+                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)" >
-                  key="positionLevel"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)" >
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   <div class="table_ellipsis">
                     {{ props.row.organizationPositionOld }}
                   </div>
                 </q-td>
-                <q-td
+                <q-td key="organization" :props="props" @click="openDetail(props.row.id)" >
-                  key="organization"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   <div class="table_ellipsis">
                     {{ props.row.organization }}
                   </div>
                 </q-td>
-                <q-td
+                <q-td key="dateStart" :props="props" @click="openDetail(props.row.id)" >
-                  key="dateStart"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   {{ props.row.dateStart }}
                 </q-td>
-                <q-td
+                <q-td key="dateEnd" :props="props" @click="openDetail(props.row.id)" >
-                  key="dateEnd"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   {{ props.row.dateEnd }}
                 </q-td>
-                <q-td
+                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)" >
-                  key="createdAt"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   {{ props.row.createdAt }}
                 </q-td>
-                <q-td
+                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)" >
-                  key="statusText"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
                   {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
+                  <q-btn icon="delete" size="14px" flat round dense
-                    icon="delete"
+                    :color=" props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'red-7' "
-                    size="14px"
-                    :color="
-                      props.row.status == 'REPORT' || props.row.status == 'DONE'
-                        ? 'grey'
-                        : 'red-7'
-                    "
-                    flat
-                    round
-                    dense
                     @click="clickDelete(props.row.fullname, props.row.id)"
-                    :disable="
+                    :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' " >
-                      props.row.status == 'REPORT' || props.row.status == 'DONE'
-                    "
-                  >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
@@ -619,139 +339,12 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <q-dialog v-model="modal">
+  <Dialogbody
-    <q-card style="width: 1200px; max-width: 80vw">
+    v-model:Modal="modal"
-      <DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
+    :closeModal="closeModal"
-      <q-separator />
+    :rows2="rows2"
-      <q-card-section class="q-pt-none">
+    v-model:filterKeyword2="filterKeyword2"
-        <div class="row justify-end">
+    :getData="getData"
-          <div class="col-5">
+  />
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filterKeyword2"
-                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="resetFilter"
-                  />
-                </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"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="id"
-          class="custom-header-table"
-          :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-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="posNo" :props="props">
-                {{ props.row.posNo }}
-              </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="dateStart" :props="props">
-                {{ props.row.dateStart }}
-              </q-td>
-              <q-td key="dateEnd" :props="props">
-                {{ props.row.dateEnd }}
-              </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-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>
 <style scoped lang="scss"></style>

src/stores/mixin.ts

@@ -76,12 +76,13 @@ export const useCounterMixin = defineStore("mixin", () => {
   ) {
     if (srcDate == null) {
       return null;
+      `
+    `;
     }
-  
     const date = new Date(srcDate);
     const isValidDate = Boolean(+date);
     if (!isValidDate) return srcDate.toString();
-  
+    if (isValidDate && date.getFullYear() < 1000) return srcDate.toString();
     const fullMonthThai = [
       "มกราคม",
       "กุมภาพันธ์",
@@ -110,17 +111,26 @@ export const useCounterMixin = defineStore("mixin", () => {
       "พ.ย.",
       "ธ.ค.",
     ];
-  
+    let dstYear = 0;
-    let dstYear = date.getFullYear() < 1 ? "0001" : (date.getFullYear() + 543).toString();
+    if (date.getFullYear() > 2500) {
-    let dstMonth = isFullMonth ? fullMonthThai[date.getMonth()] : abbrMonthThai[date.getMonth()];
+      dstYear = date.getFullYear();
+    } else {
+      dstYear = date.getFullYear() + 543;
+    }
+    let dstMonth = "";
+    if (isFullMonth) {
+      dstMonth = fullMonthThai[date.getMonth()];
+    } else {
+      dstMonth = abbrMonthThai[date.getMonth()];
+    }
     let dstTime = "";
-  
     if (isTime) {
       const H = date.getHours().toString().padStart(2, "0");
       const M = date.getMinutes().toString().padStart(2, "0");
+      // const S = date.getSeconds().toString().padStart(2, "0")
+      // dstTime = " " + H + ":" + M + ":" + S + " น."
       dstTime = " " + H + ":" + M + " น.";
     }
-  
     return (
       date.getDate().toString().padStart(2, "0") +
       " " +