แก้ไขขอโอน รับโอน รายการช่วยราชการ รายการส่งตัวกลับ รายการลาออก

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

@@ -82,6 +82,7 @@
           label="แก้ไข"
           style="width: 80px"
           @click="edit = !edit"
+          v-if="!(status == 'REPORT' || status == 'DONE')"
         />
       </div>
       <div class="q-gutter-sm" v-else>
@@ -616,7 +617,7 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 
-const value = ref<number>(123554);
+const status = ref<string>("");
 
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -790,6 +791,7 @@ const getData = async () => {
       posNo.value = data.positionNumberOld ?? "";
       salary.value = data.amountOld ?? 0;
       reason.value = data.reason ?? "";
+      status.value = data.status ?? "";
 
       await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
       dateBefore.value = new Date(data.dateOfBirth);

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

@@ -2,12 +2,13 @@
 import { ref, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useRouter } from "vue-router";
-import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
+
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
 import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
 
@@ -20,6 +21,8 @@ import type {
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
 const {
   showLoader,
   hideLoader,
@@ -34,6 +37,11 @@ const selected = ref<ResponseRow[]>([]);
 
 const modal = ref<boolean>(false);
 const popup = () => {
+  const row = filters.value.filter(
+    (r: ResponseRow) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
   modal.value = true;
 };
 
@@ -46,6 +54,8 @@ const visibleColumns = ref<string[]>([
   "fullname",
   "organizationName",
   "birthday",
+  "dateText",
+  "statusText",
 ]);
 
 const visibleColumns2 = ref<string[]>([
@@ -54,6 +64,8 @@ const visibleColumns2 = ref<string[]>([
   "fullname",
   "organizationName",
   "birthday",
+  "dateText",
+  "statusText",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -96,6 +108,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "citizenId",
@@ -105,6 +119,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -114,6 +130,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "organizationName",
@@ -134,6 +152,31 @@ const columns = ref<QTableProps["columns"]>([
     field: "birthday",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const columns2 = ref<QTableProps["columns"]>([
@@ -145,6 +188,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "citizenId",
@@ -154,6 +199,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -163,6 +210,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "organizationName",
@@ -183,6 +232,31 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "birthday",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -218,8 +292,12 @@ const fecthlistRecevice = async () => {
           positionPath: e.positionPath,
           birthday: e.dateOfBirth == null ? "-" : 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;
     })
@@ -243,12 +321,6 @@ const checkSelected = computed(() => {
   }
 });
 
-const row = filters.value.filter(
-  (r: ResponseRow) =>
-    r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
-);
-rows2.value = row;
-
 const add = () => {
   router.push(`/receive/add`);
 };
@@ -465,6 +537,20 @@ const saveOrder = async () => {
                 >
                   {{ props.row.birthday }}
                 </q-td>
+                <q-td
+                  key="dateText"
+                  :props="props"
+                  @click="nextPage(props.row)"
+                >
+                  {{ props.row.dateText }}
+                </q-td>
+                <q-td
+                  key="statusText"
+                  :props="props"
+                  @click="nextPage(props.row)"
+                >
+                  {{ props.row.statusText }}
+                </q-td>
                 <q-td auto-width>
                   <q-btn
                     icon="mdi-dots-vertical"
@@ -483,6 +569,10 @@ const saveOrder = async () => {
                           clickable
                           v-close-popup
                           @click="openModalTree(props.row.personalId)"
+                          :disable="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                          "
                         >
                           <q-item-section
                             style="min-width: 0px"
@@ -490,7 +580,12 @@ const saveOrder = async () => {
                             class="q-py-sm"
                           >
                             <q-icon
-                              color="primary"
+                              :color="
+                                props.row.status == 'REPORT' ||
+                                props.row.status == 'DONE'
+                                  ? 'grey'
+                                  : 'primary'
+                              "
                               size="xs"
                               name="mdi-bookmark-outline"
                             />
@@ -503,6 +598,10 @@ const saveOrder = async () => {
                           clickable
                           v-close-popup
                           @click="openDelete(props.row.personalId)"
+                          :disable="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                          "
                         >
                           <q-item-section
                             style="min-width: 0px"
@@ -510,7 +609,16 @@ const saveOrder = async () => {
                             class="q-py-sm"
                           >
                             <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
+                            <q-icon
+                              :color="
+                                props.row.status == 'REPORT' ||
+                                props.row.status == 'DONE'
+                                  ? 'grey'
+                                  : 'red'
+                              "
+                              size="xs"
+                              name="mdi-delete"
+                            />
                           </q-item-section>
                           <q-item-section>ลบ</q-item-section>
                         </q-item>
@@ -660,6 +768,16 @@ const saveOrder = async () => {
               <q-td key="birthday" :props="props" @click="nextPage(props.row)">
                 {{ props.row.birthday }}
               </q-td>
+              <q-td key="dateText" :props="props" @click="nextPage(props.row)">
+                {{ props.row.dateText }}
+              </q-td>
+              <q-td
+                key="statusText"
+                :props="props"
+                @click="nextPage(props.row)"
+              >
+                {{ props.row.statusText }}
+              </q-td>
             </q-tr>
           </template>
         </d-table>

src/modules/05_placement/components/Repatriate/RepatriateMain.vue

@@ -39,20 +39,24 @@ const modal = ref<boolean>(false);
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
+  "posNo",
   "position",
   "positionLevel",
   "organizationPositionOld",
   // "organization",
+  "createdAt",
   "statusText",
   "btn",
 ]);
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
+  "posNo",
   "position",
   "positionLevel",
   "organizationPositionOld",
   // "organization",
+  "createdAt",
   "statusText",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
@@ -134,6 +138,15 @@ const columns = ref<QTableProps["columns"]>([
     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",
@@ -170,6 +183,18 @@ const columns = ref<QTableProps["columns"]>([
     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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
   {
     name: "statusText",
     align: "left",
@@ -208,6 +233,15 @@ const columns2 = ref<QTableProps["columns"]>([
     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",
@@ -244,6 +278,18 @@ const columns2 = ref<QTableProps["columns"]>([
     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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
   {
     name: "statusText",
     align: "left",
@@ -436,6 +482,13 @@ onMounted(async () => {
                 >
                   {{ props.row.fullname }}
                 </q-td>
+                <q-td
+                  key="posNo"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.posNo }}
+                </q-td>
                 <q-td
                   key="position"
                   :props="props"
@@ -468,6 +521,13 @@ onMounted(async () => {
                     {{ props.row.organization }}
                   </div>
                 </q-td>
+                <q-td
+                  key="createdAt"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.createdAt }}
+                </q-td>
                 <q-td
                   key="statusText"
                   :props="props"
@@ -479,11 +539,18 @@ onMounted(async () => {
                   <q-btn
                     icon="delete"
                     size="14px"
-                    color="red-7"
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey'
+                        : 'red-7'
+                    "
                     flat
                     round
                     dense
                     @click="clickDelete(props.row.fullname, props.row.id)"
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                    "
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
@@ -584,6 +651,9 @@ onMounted(async () => {
               <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>
@@ -600,6 +670,9 @@ onMounted(async () => {
                   {{ 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>

src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

@@ -1,14 +1,30 @@
 <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)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      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 outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
+      <q-btn
-        @click="router.push(`/registry/${personId}`)" />
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -60,11 +76,28 @@
           label="แก้ไข"
           style="width: 80px"
           @click="edit = !edit"
+          v-if="!(status == 'REPORT' || status == 'DONE')"
         /> -->
       </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
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancelBtn" />
+          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="cancelBtn"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -78,64 +111,140 @@
               </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+                :outlined="edit"
+                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"
+              <q-input
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'ตำแหน่งประเภท'}`" />
+                :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"
+              <q-input
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'ระดับ'}`" />
+                :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"
+              <q-input
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'เลขที่'}`" />
+                :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"
+              <q-input
-                v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'เงินเดือน'}`" type="number" />
+                :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-6 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'โอนไปสังกัด'}`" />
+                :outlined="edit"
+                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-6 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
+              <datepicker
-                :enableTimePicker="false" week-start="0">
+                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 lazy-rules :borderless="!edit"
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ตั้งแต่วัน'}`">
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" :style="edit
+                      <q-icon
-                        ? 'color: var(--q-primary)'
+                        name="event"
-                        : 'color: var(--q-grey)'
+                        class="cursor-pointer"
-                        ">
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -144,9 +253,19 @@
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+            <q-input
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
+              :class="getClass(edit)"
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+              :outlined="edit"
+              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/Transfer/transferMain.vue

@@ -38,6 +38,7 @@ const visibleColumns = ref<string[]>([
   "organizationPositionOld",
   "organization",
   "statustext",
+  "dateText",
 ]);
 const visibleColumns2 = ref<string[]>([
   "no",
@@ -47,6 +48,7 @@ const visibleColumns2 = ref<string[]>([
   "organizationPositionOld",
   "organization",
   "statustext",
+  "dateText",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -72,6 +74,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -81,6 +85,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -90,6 +96,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -99,6 +107,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "organizationPositionOld",
@@ -108,6 +118,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "organization",
@@ -117,6 +129,20 @@ const columns = ref<QTableProps["columns"]>([
     field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    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",
@@ -126,6 +152,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const columns2 = ref<QTableProps["columns"]>([
@@ -137,6 +165,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -146,6 +176,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -155,6 +187,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -164,6 +198,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "organizationPositionOld",
@@ -173,6 +209,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "organization",
@@ -182,6 +220,20 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    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",
@@ -191,6 +243,8 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -219,7 +273,9 @@ const getData = async () => {
       let list: ResponseData[] = [];
       data.map((r: ResponseData) => {
         list.push({
-          createdAt: new Date(),
+          dateText:
+            r.createdAt !== null ? date2Thai(new Date(r.createdAt)) : "-",
+          createdAt: r.createdAt !== null ? new Date(r.createdAt) : null,
           date: new Date(),
           firstName: r.firstName ?? "",
           id: r.id ?? "",
@@ -384,6 +440,9 @@ const saveOrder = async () => {
                     </q-tooltip> -->
                   </div>
                 </q-td>
+                <q-td key="dateText" :props="props">
+                  {{ props.row.dateText }}
+                </q-td>
                 <q-td key="statustext" :props="props">
                   {{ props.row.statustext }}
                 </q-td>
@@ -491,6 +550,9 @@ const saveOrder = async () => {
                   {{ props.row.organization }}
                 </div>
               </q-td>
+              <q-td key="dateText" :props="props">
+                {{ props.row.dateText }}
+              </q-td>
               <q-td key="statustext" :props="props">
                 {{ props.row.statustext }}
               </q-td>

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -164,6 +164,9 @@
           label="แก้ไข"
           style="width: 80px"
           @click="edit = !edit"
+          v-if="
+            !(responseData.status == 'REPORT' || responseData.status == 'DONE')
+          "
         />
       </div>
       <div class="q-gutter-sm" v-else>

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

@@ -1,14 +1,30 @@
 <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)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      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 outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
+      <q-btn
-        @click="router.push(`/registry/${profileId}`)" />
+        outline
+        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">
@@ -51,12 +67,37 @@
       </div>
       <q-space />
       <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="แก้ไข"
+        <q-btn
-          style="width: 80px" @click="edit = !edit" />
+          outline
+          color="primary"
+          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 outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="conditionSave" />
+        <q-btn
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancelBtn" />
+          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="cancelBtn"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -70,9 +111,19 @@
               </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ตำแหน่ง'}`" type="textarea" />
+                :outlined="edit"
+                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">
@@ -143,28 +194,60 @@
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
+                :outlined="edit"
+                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 items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateStart" :locale="'th'" autoApply
+              <datepicker
-                :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                :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 :class="getClass(edit)" :outlined="edit" dense :readonly="!edit" lazy-rules :borderless="!edit"
+                  <q-input
-                    :model-value="dateStart !== null ? date2Thai(dateStart) : null"
+                    :class="getClass(edit)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ตั้งแต่วัน'}`">
+                    :outlined="edit"
+                    dense
+                    :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 name="event" class="cursor-pointer" :style="edit
+                      <q-icon
-                        ? 'color: var(--q-primary)'
+                        name="event"
-                        : 'color: var(--q-grey)'
+                        class="cursor-pointer"
-                        ">
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -174,21 +257,42 @@
           </div>
           <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateEnd" :locale="'th'" autoApply
+              <datepicker
-                :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                :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 :readonly="!edit" :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
+                  <q-input
+                    :readonly="!edit"
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
                     :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ถึงวันที่'}`">
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ถึงวันที่'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" :style="edit
+                      <q-icon
-                        ? 'color: var(--q-primary)'
+                        name="event"
-                        : 'color: var(--q-grey)'
+                        class="cursor-pointer"
-                        ">
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -197,9 +301,19 @@
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+            <q-input
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
+              :class="getClass(edit)"
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
@@ -270,6 +384,7 @@ const getData = async () => {
     .get(config.API.officerDetail(dataId))
     .then((res: any) => {
       const data = res.data.result;
+
       (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
         (id.value = data.id);
       profileId.value = data.profileId;
@@ -316,7 +431,7 @@ const conditionSave = async () => {
     "ต้องการแก้ไขข้อมูลหรือไม่?",
     "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
   );
-}
+};
 //     });
 //   }
 // };

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

@@ -39,20 +39,28 @@ const modal = ref<boolean>(false);
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
+  "posNo",
   "position",
   "positionLevel",
   "organizationPositionOld",
-  // "organization",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
   "statusText",
   "btn",
 ]);
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
+  "posNo",
   "position",
   "positionLevel",
   "organizationPositionOld",
-  // "organization",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
   "statusText",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
@@ -134,6 +142,15 @@ const columns = ref<QTableProps["columns"]>([
     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",
@@ -170,6 +187,40 @@ const columns = ref<QTableProps["columns"]>([
     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",
@@ -208,6 +259,15 @@ const columns2 = ref<QTableProps["columns"]>([
     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",
@@ -244,6 +304,40 @@ const columns2 = ref<QTableProps["columns"]>([
     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",
@@ -278,7 +372,7 @@ const getData = async () => {
     .get(config.API.officerMain())
     .then((res: any) => {
       const data = res.data.result;
-      console.log("data==>", data);
+      //   console.log("data==>", data);
       rows.value = data.map((item: officerType) => ({
         id: item.id,
         fullname: `${item.prefix}${item.firstName} ${item.lastName}`,
@@ -297,8 +391,11 @@ const getData = async () => {
         positionNumberOld: item.positionNumberOld,
         organizationPositionOld: item.organizationPositionOld,
         isActive: item.isActive,
+        dateEnd: item.dateEnd == null ? "-" : date2Thai(new Date(item.dateEnd)),
+        dateStart:
+          item.dateStart == null ? "-" : date2Thai(new Date(item.dateStart)),
       }));
-      console.log(rows.value);
+      //   console.log(rows.value);
     })
     .catch((e) => {
       // messageError($q, e);
@@ -436,6 +533,13 @@ onMounted(async () => {
                 >
                   {{ props.row.fullname }}
                 </q-td>
+                <q-td
+                  key="posNo"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.posNo }}
+                </q-td>
                 <q-td
                   key="position"
                   :props="props"
@@ -468,6 +572,27 @@ onMounted(async () => {
                     {{ props.row.organization }}
                   </div>
                 </q-td>
+                <q-td
+                  key="dateStart"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.dateStart }}
+                </q-td>
+                <q-td
+                  key="dateEnd"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.dateEnd }}
+                </q-td>
+                <q-td
+                  key="createdAt"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.createdAt }}
+                </q-td>
                 <q-td
                   key="statusText"
                   :props="props"
@@ -479,11 +604,18 @@ onMounted(async () => {
                   <q-btn
                     icon="delete"
                     size="14px"
-                    color="red-7"
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey'
+                        : 'red-7'
+                    "
                     flat
                     round
                     dense
                     @click="clickDelete(props.row.fullname, props.row.id)"
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                    "
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
@@ -584,6 +716,9 @@ onMounted(async () => {
               <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>
@@ -600,6 +735,15 @@ onMounted(async () => {
                   {{ 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>

src/modules/05_placement/interface/response/Receive.ts

@@ -16,6 +16,9 @@ interface ResponseRow {
   positionPath: string;
   birthday: string | null;
   status: string;
+  statusText: string;
+  createdAt: Date | null;
+  dateText: string | null;
 }
 
 interface ResponseData {

src/modules/05_placement/interface/response/Transfer.ts

@@ -1,5 +1,6 @@
 interface ResponseData {
-  createdAt: Date;
+  dateText: string | null;
+  createdAt: Date | null;
   date: Date;
   firstName: string;
   id: string;

src/modules/05_placement/interface/response/officer.ts

@@ -1,23 +1,25 @@
 interface officerType {
-    no:number,
+  no: number;
-    id: string,
+  id: string;
-    prefix: string,
+  prefix: string;
-    firstName: string,
+  firstName: string;
-    lastName: string,
+  lastName: string;
-    position: string,
+  position: string;
-    posNo: string,
+  posNo: string;
-    positionLevel: string,
+  positionLevel: string;
-    createdAt: Date,
+  createdAt: Date;
-    organization: string,
+  organization: string;
-    reason: string,
+  reason: string;
-    status: string,
+  status: string;
-    date: Date,
+  date: Date;
-    salary: number,
+  salary: number;
-    positionTypeOld: string,
+  positionTypeOld: string;
-    positionLevelOld: string,
+  positionLevelOld: string;
-    positionNumberOld: string,
+  positionNumberOld: string;
-    organizationPositionOld: string,
+  organizationPositionOld: string;
-    isActive: true
+  isActive: boolean;
+  dateEnd: string;
+  dateStart: string;
 }
 
-export type { officerType};
+export type { officerType };

src/modules/06_retirement/components/resign/Resign.vue

@@ -99,6 +99,18 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "datetext",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "datetext",
+    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",
@@ -119,6 +131,7 @@ const visibleColumns = ref<string[]>([
   "positionLevelOld",
   "positionNumberOld",
   "organizationPositionOld",
+  "datetext",
   "statustext",
 ]);
 
@@ -203,6 +216,18 @@ const columns2 = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "datetext",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "datetext",
+    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",
@@ -223,6 +248,7 @@ const visibleColumns2 = ref<string[]>([
   "positionLevelOld",
   "positionNumberOld",
   "organizationPositionOld",
+  "datetext",
   "statustext",
 ]);
 
@@ -270,8 +296,10 @@ const fecthlist = async () => {
 
       data.map((r: ResponseItems) => {
         list.push({
+          datetext:
+            r.createdAt == null ? "-" : date2Thai(new Date(r.createdAt)),
           activeDate: new Date(),
-          createdAt: new Date(),
+          createdAt: new Date(r.createdAt),
           firstName: r.firstName ?? "",
           id: r.id ?? "",
           isActive: r.isActive ? r.isActive : false,
@@ -429,6 +457,9 @@ const saveOrder = async () => {
                     {{ props.row.organizationPositionOld }}
                   </div>
                 </q-td>
+                <q-td key="datetext" :props="props">
+                  {{ props.row.datetext }}
+                </q-td>
                 <q-td key="statustext" :props="props">
                   {{ props.row.statustext }}
                 </q-td>
@@ -538,6 +569,9 @@ const saveOrder = async () => {
                   {{ props.row.organizationPositionOld }}
                 </div>
               </q-td>
+              <q-td key="datetext" :props="props">
+                {{ props.row.datetext }}
+              </q-td>
               <q-td key="statustext" :props="props">
                 {{ props.row.statustext }}
               </q-td>

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -147,6 +147,7 @@
           label="แก้ไข"
           style="width: 80px"
           @click="edit = !edit"
+          v-if="!(status == 'REPORT' || status == 'DONE')"
         />
       </div>
       <div class="q-gutter-sm" v-else>
@@ -488,6 +489,7 @@ const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
 const dataDetail = ref<ResponseItems>({
+  datetext: "",
   activeDate: new Date(),
   createdAt: new Date(),
   firstName: "",
@@ -518,6 +520,7 @@ const date = ref<Date | null>(null);
 const dateLeave = ref<Date | null>(null);
 const reason = ref<string>("");
 const location = ref<string>("");
+const status = ref<string>("");
 
 // const modalPass = ref<boolean>(false);
 // const modalPassNot = ref<boolean>(false);
@@ -531,6 +534,7 @@ const fetchData = async (id: string) => {
     .get(config.API.resingByid(id))
     .then((res: any) => {
       const data = res.data.result;
+      console.log(data);
       dataDetail.value = data;
 
       organizationPositionOld.value = data.organizationPositionOld ?? "";
@@ -542,6 +546,7 @@ const fetchData = async (id: string) => {
       dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
       reason.value = data.reason ?? "";
       location.value = data.location ?? "";
+      status.value = data.status ?? "";
     })
     .catch((e) => {
       console.log(e);

src/modules/06_retirement/interface/response/Main.ts

@@ -27,6 +27,7 @@ interface ResponseItems {
   status: string;
   statustext: string;
   fullname: string;
+  datetext: string | null;
 }
 
 export type { resMain, ResponseItems };