fixing column บรรจุ แต่งตั้ง ย้าย

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

@@ -2,6 +2,7 @@
 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 { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
 
@@ -9,21 +10,30 @@ import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogH
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
+
 const $q = useQuasar();
 const selected = ref<ResponseData[]>([]);
 const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  date2Thai,
+} = mixin;
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
-  "position",
-  "positionLevel",
+  "posType",
   "organizationPositionOld",
   "organization",
-  "statustext",
-  "dateText",
+  "status",
+  "createdAt",
 ]);
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -34,8 +44,6 @@ 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",
@@ -47,33 +55,26 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
-    name: "position",
+    name: "posType",
     align: "left",
-    label: "ตำแหน่งในสายงาน",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
-    field: "position",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format(val, row) {
+      return row.positionTypeOld + " (" + row.positionLevelOld + ")";
+    },
   },
   {
     name: "organizationPositionOld",
     align: "left",
-    label: "สังกัด",
+    label: "ตำแหน่งและหน่วยงานเดิม",
     sortable: true,
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
@@ -93,27 +94,28 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "dateText",
+    name: "createdAt",
     align: "left",
     label: "วันที่ดำเนินการ",
     sortable: true,
-    field: "dateText",
+    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",
+    format(val) {
+      return date2Thai(val);
+    },
   },
   {
-    name: "statustext",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format: (val) => statusText(val),
   },
 ]);
 
@@ -122,11 +124,9 @@ const props = defineProps({
   closeModal: Function,
   getData: Function,
   rows2: Array,
-  filterKeyword2:String,
+  filterKeyword2: String,
 });
 
-
-
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -135,8 +135,13 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 const saveOrder = () => {
-    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
-}
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((r) => r.id);
@@ -160,17 +165,13 @@ const Ordersave = async () => {
     });
 };
 
-const emit = defineEmits([
-  "update:filterKeyword2",
-  "update:selected",
-
-]);
+const emit = defineEmits(["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) {
@@ -192,7 +193,7 @@ watchEffect(() => {
                 outlined
                 dense
                 debounce="300"
-                :model-value="filterKeyword2" 
+                :model-value="filterKeyword2"
                 @update:model-value="updateInput"
                 placeholder="ค้นหา"
                 style="width: 850px; max-width: auto"
@@ -254,34 +255,23 @@ watchEffect(() => {
                   v-model="props.selected"
                 />
               </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="organizationPositionOld" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
                 </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
+
+                <div
+                  v-else
+                  :class="
+                    col.name === 'organizationPositionOld' ||
+                    col.name === 'organization'
+                      ? 'table_ellipsis'
+                      : ''
+                  "
+                >
+                  {{ col.value ? col.value : "-" }}
                 </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>
             </q-tr>
           </template>
         </d-table>
@@ -297,4 +287,4 @@ watchEffect(() => {
       </q-card-actions>
     </q-card>
   </q-dialog>
-</template>
+</template>