แสดงเลขที่คำสั่งเพิ่มและคลิกดูได้

src/modules/05_placement/components/PersonalList/Table.vue

@@ -23,6 +23,7 @@ import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogF
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogOrders from "@/modules/05_placement/components/PersonalList/DialogOrders.vue"; //ส่งไปออกคำสั่งขอโอน
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const $q = useQuasar(); // show dialog
 const DataStore = usePlacementDataStore();
@@ -48,6 +49,10 @@ const props = defineProps({
   },
 });
 
+const modalCommand = ref<boolean>(false);
+const command = ref<string>("");
+const commandId = ref<string>("");
+
 let roleAdmin = ref<boolean>(false);
 const edit = ref<boolean>(true);
 const modalPersonal = ref<boolean>(false);
@@ -116,6 +121,7 @@ const visibleColumns = ref<any[]>([
   "statusName",
   "draft",
   "positionCandidate",
+  "refCommandNo",
 ]);
 
 /** แสดงข้แมูลใน ตาราง
@@ -227,6 +233,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "คำสั่งบรรจุ",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 
 /**
@@ -370,6 +387,8 @@ async function getTable() {
             citizenId: data.citizenId,
             id: data.id,
             profileId: data.profileId,
+            refCommandNo: data.refCommandNo,
+            commandId: data.commandId,
           };
           rowsAll.value.push(rowData);
         });
@@ -845,6 +864,13 @@ function onSearchAdd() {
   );
 }
 
+function onRefCommand(data: any) {
+  modalCommand.value = true;
+  command.value = data.refCommandNo;
+  commandId.value = data.commandId;
+  // commandId.value = 'bdf9da91-ba45-497a-a2b7-cc49e2446d97'; //จำลอง
+}
+
 onMounted(async () => {
   await getWorkFlow();
   await getTable();
@@ -1283,6 +1309,19 @@ onMounted(async () => {
                 {{ props.row.statusName }}
               </div>
             </template>
+            <template v-else-if="col.name === 'refCommandNo'">
+              <div
+                class="text-weight-medium"
+                :class="
+                  props.row.refCommandNo && props.row.commandId
+                    ? 'table_ellipsis text-blue cursor-pointer'
+                    : 'table_ellipsis '
+                "
+                @click="props.row.refCommandNo && props.row.commandId ? onRefCommand(props.row) : null"
+              >
+                {{ props.row.refCommandNo ? props.row.refCommandNo : "-" }}
+              </div>
+            </template>
           </q-td>
         </q-tr>
       </template>
@@ -1677,6 +1716,12 @@ onMounted(async () => {
     :id="personalId"
     @update:modal="updatemodalPersonal"
   />
+
+  <DialogPreviewCommand
+    v-model:modal="modalCommand"
+    v-model:command="command"
+    v-model:commandId="commandId"
+  />
 </template>
 
 <style lang="scss" scoped>