ทดลองงาน => ช่วยราชการ,ส่งตัวกลับ ปรับ table

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

@@ -2,6 +2,8 @@
 import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+
 import type { QTableProps } from "quasar";
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
@@ -11,20 +13,21 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const selected = ref<officerType[]>([]);
-const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
-const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+
+const { statusText } = transferStore;
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  findOrgName,
+  findPosMasterNo,
+  date2Thai,
+} = mixin;
 
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "createdAt",
-  "statusText",
-]);
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -36,22 +39,28 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "naem",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: "เลขที่ตำแหน่ง",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -65,11 +74,14 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับ",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -79,6 +91,9 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -97,30 +112,39 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "createdAt",
+  "status",
+]);
 
 const props = defineProps({
   Modal: Boolean,
   closeModal: Function,
   getData: Function,
   rows2: Array,
-  filterKeyword2:String,
+  filterKeyword2: String,
 });
 
-
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -129,8 +153,13 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 const saveOrder = () => {
-    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
+  dialogConfirm(
-}
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((item) => item.id);
@@ -149,22 +178,18 @@ const Ordersave = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-        props.getData?.();
+      props.getData?.();
       hideLoader();
     });
 };
 
-const emit = defineEmits([
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-  "update:filterKeyword2",
-  "update:selected",
-
-]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
 watchEffect(() => {
   if (props.Modal === true) {
@@ -173,78 +198,110 @@ watchEffect(() => {
 });
 </script>
 <template>
-<q-dialog v-model="props.Modal">
+  <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" 
+              <q-input
-                @update:model-value="updateInput" placeholder="ค้นหา" style="width: 850px; max-width: auto">
+                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" />
+                  <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 
+              <q-select
-                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2" 
+                v-model="visibleColumns2"
-                option-value="name" options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+                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" 
+        <d-table
-            class="custom-header-table" :visible-columns="visibleColumns2" selection="multiple" 
+          :columns="columns2"
-            v-model:selected="selected">
+          :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" />
+            <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-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
               </q-td>
-              <q-td key="no" :props="props">
+              <q-td v-for="col in props.cols" :key="col.id">
-                {{ props.rowIndex + 1 }}
+                <div v-if="col.name === 'no'">
-              </q-td>
+                  {{ props.rowIndex + 1 }}
-              <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
-                <div class="table_ellipsis">
+                  v-else
-                  {{ props.row.organization }}
+                  :class="
+                    col.name === 'organizationPositionOld' ||
+                    col.name === 'organization'
+                      ? 'table_ellipsis'
+                      : ''
+                  "
+                >
+                  {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
-              <q-td key="createdAt" :props="props">
-                {{ props.row.createdAt }}
-              </q-td>
-              <q-td key="statusText" :props="props">
-                {{ props.row.statusText }}
-              </q-td>
             </q-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-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>

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

@@ -34,24 +34,6 @@ const {
   findPosMasterNo,
 } = mixin;
 
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "createdAt",
-  "statusText",
-]);
-// รีเซ้ตค่าในช่อง ฟิลเตอร์
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -64,13 +46,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "naem",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
@@ -80,6 +65,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -98,6 +86,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -107,6 +98,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -125,20 +119,37 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "createdAt",
+  "status",
+]);
+
+// รีเซ้ตค่าในช่อง ฟิลเตอร์
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
 
 //เปิดรายละเอียด
 const openDetail = (id: string) => {
@@ -169,6 +180,7 @@ const openModalOrder = () => {
       item.date &&
       item.dateRepatriation
   );
+
   rows2.value = row;
 };
 
@@ -179,33 +191,11 @@ const getData = async () => {
     .get(config.API.repatriationMain())
     .then((res: any) => {
       const data = res.data.result;
-      rows.value = data.map((item: officerType) => ({
+      rows.value = data;
-        id: item.id,
+    })
-        fullname: `${item.prefix}${item.firstName} ${item.lastName}`,
+    .catch((e) => {
-        position: item.position,
+      messageError($q, e);
-        posNo: findPosMasterNo(item),
-        positionLevel:
-          item.posTypeName == null && item.posLevelName == null
-            ? "-"
-            : (item.posTypeName != null ? item.posTypeName : "") +
-              " " +
-              (item.posLevelName != null ? ` (${item.posLevelName})` : ""),
-        createdAt: date2Thai(item.createdAt),
-        organization: item.organization,
-        reason: item.reason,
-        status: item.status,
-        statusText: statusText(item.status),
-        date: item.date,
-        salary: item.salary,
-        positionTypeOld: item.positionTypeOld,
-        positionLevelOld: item.positionLevelOld,
-        positionNumberOld: item.positionNumberOld,
-        organizationPositionOld: item.organizationPositionOld,
-        isActive: item.isActive,
-        dateRepatriation: item.dateRepatriation,
-      }));
     })
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -308,69 +298,27 @@ onMounted(async () => {
 
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
                 <q-td
-                  key="fullname"
+                  v-for="col in props.cols"
-                  :props="props"
+                  :key="col.id"
-                  @click="openDetail(props.row.id)"
+                  @click.stop.prevent="openDetail(props.row.id)"
                 >
-                  {{ props.row.fullname }}
+                  <div v-if="col.name === 'no'">
-                </q-td>
+                    {{ props.rowIndex + 1 }}
-                <q-td
-                  key="posNo"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.posNo }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.position ?? "-" }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
                   </div>
-                </q-td>
+
-                <q-td
+                  <div
-                  key="organization"
+                    v-else
-                  :props="props"
+                    :class="
-                  @click="openDetail(props.row.id)"
+                      col.name === 'organizationPositionOld' ||
-                >
+                      col.name === 'organization'
-                  <div class="table_ellipsis">
+                        ? 'table_ellipsis'
-                    {{ props.row.organization }}
+                        : ''
+                    "
+                  >
+                    {{ col.value ? col.value : "-" }}
                   </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"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.statusText }}
-                </q-td>
                 <q-td auto-width>
                   <q-btn
                     icon="delete"

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

@@ -366,6 +366,7 @@ onMounted(async () => {
                 :options="{ currency: 'THB' }"
                 :label="`${'เงินเดือน'}`"
                 :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
               />
             </div>
           </div>

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

@@ -2,32 +2,31 @@
 import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 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";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 
 const $q = useQuasar();
+const { statusText } = useTransferDataStore();
 const selected = ref<officerType[]>([]);
 const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  findOrgName,
+  findPosMasterNo,
+  date2Thai,
+} = mixin;
 
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "dateStart",
-  "dateEnd",
-  "createdAt",
-  "statusText",
-]);
 //หัวตาราง
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -40,22 +39,28 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: "เลขที่ตำแหน่ง",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -69,11 +74,14 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับ",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -83,6 +91,10 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    classes: "table_ellipsis",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -92,6 +104,7 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    classes: "table_ellipsis",
   },
   {
     name: "dateStart",
@@ -101,8 +114,7 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "dateStart",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -112,8 +124,7 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "dateEnd",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "createdAt",
@@ -123,31 +134,41 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+]);
 
 const props = defineProps({
   Modal: Boolean,
   closeModal: Function,
   getData: Function,
   rows2: Array,
-  filterKeyword2:String,
+  filterKeyword2: String,
 });
 
-
-
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -156,8 +177,13 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 const saveOrder = () => {
-    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
+  dialogConfirm(
-}
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((item) => item.id);
@@ -167,30 +193,26 @@ const Ordersave = async () => {
   showLoader();
   await http
     .post(config.API.officerMainReport(), body)
-    .then((res: any) => {
+    .then(() => {
-      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
       props.closeModal?.();
+      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
-        props.getData?.();
+      props.getData?.();
       hideLoader();
     });
 };
 
-const emit = defineEmits([
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-  "update:filterKeyword2",
-  "update:selected",
-
-]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
 watchEffect(() => {
   if (props.Modal === true) {
@@ -199,7 +221,7 @@ watchEffect(() => {
 });
 </script>
 <template>
-      <q-dialog v-model="props.Modal">
+  <q-dialog v-model="props.Modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
       <q-separator />
@@ -207,74 +229,99 @@ watchEffect(() => {
         <div class="row justify-end">
           <div class="col-5">
             <q-toolbar style="padding: 0">
-              <q-input borderless outlined dense debounce="300" :model-value="filterKeyword2" 
+              <q-input
-                @update:model-value="updateInput" placeholder="ค้นหา" style="width: 850px; max-width: auto" >
+                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" />
+                  <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
+              <q-select
-                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2"
+                v-model="visibleColumns2"
-                option-value="name" options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+                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" 
+        <d-table
-          :visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected"  >
+          :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" />
+            <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-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
               </q-td>
-              <q-td key="no" :props="props">
+              <q-td v-for="col in props.cols" :key="col.id">
-                {{ props.rowIndex + 1 }}
+                <div v-if="col.name === 'no'">
-              </q-td>
+                  {{ props.rowIndex + 1 }}
-              <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 v-else  :class="
-                <div class="table_ellipsis">
+                col.name === 'organizationPositionOld' ||
-                  {{ props.row.organization }}
+                col.name === 'organization'
+                  ? 'table_ellipsis'
+                  : ''
+              ">
+                  {{ col.value ? col.value : "-" }}
                 </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-btn
+          label="ส่งไปออกคำสั่ง"
+          :disable="checkSelected"
+          color="public"
+          @click="saveOrder"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>

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

@@ -35,21 +35,6 @@ const {
   findPosMasterNo,
 } = mixin;
 
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "dateStart",
-  "dateEnd",
-  "createdAt",
-  "statusText",
-]);
-
 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -62,13 +47,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
@@ -78,6 +66,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -96,6 +87,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -105,6 +99,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -123,8 +120,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateStart",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -134,8 +130,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateEnd",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "createdAt",
@@ -145,20 +140,32 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (val) => date2Thai(val),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+]);
 
 //รีเซ็ตข้อมูลในช่องฟิลเตอร์
 const resetFilter = () => {
@@ -195,57 +202,32 @@ const getData = async () => {
     .get(config.API.officerMain())
     .then((res: any) => {
       const data = res.data.result;
-      rows.value = data.map((item: officerType) => ({
+      rows.value = data;
-        id: item.id,
+    })
-        fullname: `${item.prefix}${item.firstName} ${item.lastName}`,
+    .catch((e) => {
-        position: item.position != null ? item.position : "-",
+      messageError($q, e);
-        posNo: findPosMasterNo(item),
-        positionLevel:
-          item.posTypeName == null && item.posLevelName == null
-            ? "-"
-            : (item.posTypeName != null ? item.posTypeName : "") +
-              " " +
-              (item.posLevelName != null ? ` (${item.posLevelName})` : ""),
-        createdAt: date2Thai(item.createdAt),
-        organization: item.organization,
-        reason: item.reason,
-        status: item.status,
-        statusText: statusText(item.status),
-        date: item.date,
-        salary: item.salary,
-        positionTypeOld: item.positionTypeOld,
-        positionLevelOld: item.positionLevelOld,
-        positionNumberOld: item.positionNumberOld,
-        organizationPositionOld: findOrgName(item),
-        isActive: item.isActive,
-        dateEnd: item.dateEnd == null ? "" : date2Thai(new Date(item.dateEnd)),
-        dateStart:
-          item.dateStart == null ? "" : date2Thai(new Date(item.dateStart)),
-      }));
     })
-
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
 };
 
-const deleteData = async (id: string) => {
+const clickDelete = async (id: string) => {
-  await http
+  dialogRemove($q, () => {
-    .delete(config.API.officerMainDelete(id))
+    showLoader();
-    .then((res) => {
+    http
-      success($q, "ลบข้อมูลสำเร็จ");
+      .delete(config.API.officerMainDelete(id))
-    })
+      .then(() => {
-    .catch((e) => {
+        getData();
-      messageError($q, e);
+        success($q, "ลบข้อมูลสำเร็จ");
-    })
+      })
-    .finally(async () => {
+      .catch((e) => {
-      await getData();
+        messageError($q, e);
-    });
+      })
-};
+      .finally(() => {
-
+        hideLoader();
-const clickDelete = async (name: string, id: string) => {
+      });
-  dialogRemove($q, async () => await deleteData(id));
+  });
 };
 onMounted(async () => {
   await getData();
@@ -326,83 +308,27 @@ onMounted(async () => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
                 <q-td
-                  key="fullname"
+                  v-for="col in props.cols"
-                  :props="props"
+                  :key="col.id"
-                  @click="openDetail(props.row.id)"
+                  @click.stop.prevent="openDetail(props.row.id)"
                 >
-                  {{ props.row.fullname }}
+                  <div v-if="col.name === 'no'">
-                </q-td>
+                    {{ props.rowIndex + 1 }}
-                <q-td
-                  key="posNo"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.posNo }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.position }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
                   </div>
-                </q-td>
+
-                <q-td
+                  <div
-                  key="organization"
+                    v-else
-                  :props="props"
+                    :class="
-                  @click="openDetail(props.row.id)"
+                      col.name === 'organizationPositionOld' ||
-                >
+                      col.name === 'organization'
-                  <div class="table_ellipsis">
+                        ? 'table_ellipsis'
-                    {{ props.row.organization }}
+                        : ''
+                    "
+                  >
+                    {{ col.value ? col.value : "-" }}
                   </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"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.statusText }}
-                </q-td>
                 <q-td auto-width>
                   <q-btn
                     icon="delete"
@@ -415,7 +341,7 @@ onMounted(async () => {
                         ? 'grey'
                         : 'red-7'
                     "
-                    @click="clickDelete(props.row.fullname, props.row.id)"
+                    @click="clickDelete(props.row.id)"
                     :disable="
                       props.row.status == 'REPORT' || props.row.status == 'DONE'
                     "