หน้า ui รายการส่งตัวกลับ

src/api/05_placement/api.placement.ts

@@ -103,19 +103,24 @@ export default {
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
-  officerMain: () => `${placement}/officer`,
+
-  officerDetail: (id:string) => `${placement}/officer/${id}`,
-  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
 
   // แต่งตั้ง-เลื่อน
   placemenAppointment,
 
   // ช่วยราชการ
   placemenHelpGov,
+  officerMain: () => `${placement}/officer`,
+  officerDetail: (id:string) => `${placement}/officer/${id}`,
+  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
+  officerMainReport: () => `${placement}/officer/report`,
 
   // ส่งตัวกลับ
   placemenRepatriation,
-
+  repatriationMain: () => `${placement}/repatriation`,
+  repatriationDetail: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationMainDelete: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationMainReport: () => `${placement}/repatriation/report`,
   // ขอย้าย
   placemenRelocation,
 

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

@@ -0,0 +1,610 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+const selected = ref<officerType[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+
+  
+} = mixin;
+
+const modal = ref<boolean>(false);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
+  "btn",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<officerType[]>([]);
+const rows2 = ref<any>([
+  {
+    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
+    fullname: "นางสาวอย พชช",
+    position: "นักบริหาร",
+    positionLevel: "ต้น",
+    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+    agency: "กลุ่มงานกุมารเวชกรรม",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btn",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "btn",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+//--------------(ปุ่มลบ)----------------//
+
+const openDetail = (id:string) => {
+  router.push(`/repatriate/detail/${id}`)
+}
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+const openModalOrder = () => {
+  openModal();
+  const row = rows.value.filter(
+    (item: officerType) =>
+      item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.repatriationMain())
+    .then((res: any) => {
+      const data = res.data.result;
+      console.log("data==>", data);
+      rows.value = data.map((item: officerType) => ({
+        id: item.id,
+        fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
+        position: item.position,
+        posNo: item.posNo,
+        positionLevel: item.positionLevel,
+        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,
+      })
+      );
+      console.log(rows.value )
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const saveOrder = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.repatriationMainReport(), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งส่งตัวกลับสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+const deleteData = async (id:string) => {
+  await http
+  .delete(config.API.repatriationMainDelete(id))
+  .then((res)=>{
+    success($q, "ลบข้อมูลสำเร็จ");
+    console.log(res)
+  })
+  .catch((e) => {
+          messageError($q, e);
+        })
+  .finally(async () => {
+          await getData();
+        });
+}
+
+
+const clickDelete = async (name:string,id:string) => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูลของ ${name}`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await deleteData(id)
+    ,
+    async () => await getData()
+    
+  );
+};
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการส่งตัวกลับ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งส่งตัวกลับ</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </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" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.fullname }}
+                </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 key="organization" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+                </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"
+                    size="14px"
+                    color="red-7"
+                    flat
+                    round
+                    dense
+                    @click="clickDelete(props.row.fullname,props.row.id)"
+                  >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="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"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="personalId"
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <!-- <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template> -->
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organizationPositionOld }}
+              </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organization }}
+              </div>
+              </q-td>
+              <q-td key="statusText" :props="props">
+                {{ props.row.statusText }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,508 @@
+<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)"
+      />
+      รายละเอียดการส่งตัวกลับ {{ 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="ดูข้อมูลทะเบียนประวัติ"
+          @click="router.push(`/registry/${personId}`)"
+        />
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-3 col-sm-2 col-md-1 row">
+            <q-img src="@/assets/avatar_user.jpg" />
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12 q-pl-md">
+              <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+              <div class="col-12 text-detail">
+                {{ positionTypeOld }}
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <div class="col-12 text-top">ระดับ</div>
+              <div class="col-12 text-detail">
+                {{ positionLevelOld }}
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <div class="col-12 text-top">สังกัด</div>
+              <div class="col-12 text-detail">
+                {{ organizationPositionOld }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  
+    <q-card bordered class="row col-12 text-dark q-mt-sm">
+      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="q-pl-sm text-weight-bold text-dark">
+          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+        </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="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
+        </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
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
+        </div>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <q-form ref="myForm">
+        <div class="row col-12 q-pa-md">
+          <div class="col-12 row bg-white q-col-gutter-md">
+            <div class="col-xs-12 row items-center">
+              <div class="col-12">
+                <div class="text-weight-bold text-grey">
+                  ตำแหน่งและหน่วยงานเดิม
+                </div>
+              </div>
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :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"
+                  v-model="positionTypeOld"
+                  :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่งประเภท'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionLevelOld"
+                  :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                  hide-bottom-space
+                  :label="`${'ระดับ'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="posNo"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="salary"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  hide-bottom-space
+                  :label="`${'เงินเดือน'}`"
+                  type="number"
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-6 col-sm-6 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :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
+                  :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"
+                      :model-value="date !== null ? date2Thai(date) : null"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      hide-bottom-space
+                      :label="`${'ตั้งแต่วัน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          :style="
+                            edit
+                              ? 'color: var(--q-primary)'
+                              : 'color: var(--q-grey)'
+                          "
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+                hide-bottom-space
+                :label="`${'หมายเหตุ '}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </div>
+      </q-form>
+    </q-card>
+  </template>
+  <script setup lang="ts">
+  import { onMounted, ref } from "vue";
+  import { useQuasar } from "quasar";
+  import { useRoute, useRouter } from "vue-router";
+  import { useCounterMixin } from "@/stores/mixin";
+  
+  import http from "@/plugins/http";
+  import config from "@/app.config";
+  import keycloak from "@/plugins/keycloak";
+  
+  import type { QTableProps, QForm } from "quasar";
+  // import type {
+  //   TypeFile,
+  //   ResponseDataDetail,
+  // } from "@/modules/05_placement/interface/response/Transfer";
+  
+  const $q = useQuasar();
+  const route = useRoute();
+  const router = useRouter();
+  const mixin = useCounterMixin();
+  const edit = ref<boolean>(false);
+  const personId = route.params.id as string;
+  const {
+    date2Thai,
+    dialogMessage,
+    messageError,
+    showLoader,
+    hideLoader,
+    success,
+  } = mixin;
+  
+  const roleAdmin = ref<boolean>(false);
+  const myForm = ref<QForm | null>(null);
+  const name = ref<string>("นายสมคิด ยอดใจ");
+  const level = ref<string>("ชำนาญการพิเศษ");
+  const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+  const fullname = ref<string>("");
+  const id = ref<string>("");
+  const prefix = ref<string>("");
+  const firstName = ref<string>("");
+  const lastName = ref<string>("");
+  const position = ref<string>("");
+  const posNo = ref<string>("");
+  const positionLevel = ref<string>("");
+  const createdAt = ref<string>("");
+  const organization = ref<string>("");
+  const reason = ref<string>("");
+  const status = ref<string>("");
+  const date = ref<Date | null>(null);
+  const salary = ref<string>("");
+  const positionTypeOld = ref<string>("");
+  const positionLevelOld = ref<string>("");
+  const positionNumberOld = ref<string>("");
+  const organizationPositionOld = ref<string>("");
+  const isActive = ref<string>("");
+  // const responseData = ref<ResponseDataDetail>({
+  //   createdAt: new Date(),
+  //   date: new Date(),
+  //   id: "",
+  //   organization: "",
+  //   organizationPositionOld: "",
+  //   positionLevelOld: "",
+  //   positionNumberOld: "",
+  //   positionTypeOld: "",
+  //   reason: "",
+  //   salary: 0,
+  //   status: "",
+  // });
+  
+  // const rows = ref<TypeFile[]>([]);
+  // const columns = ref<QTableProps["columns"]>([
+  //   {
+  //     name: "no",
+  //     align: "left",
+  //     label: "ลำดับ",
+  //     sortable: true,
+  //     field: "no",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //   },
+  //   {
+  //     name: "fileName",
+  //     align: "left",
+  //     label: "ชื่อไฟล์",
+  //     sortable: true,
+  //     field: "fileName",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //   },
+  //   {
+  //     name: "btnMicrosoft",
+  //     align: "right",
+  //     label: "ปุ่ม",
+  //     sortable: true,
+  //     field: "btnMicrosoft",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //   },
+  // ]);
+  
+  const getData = async () => {
+    showLoader();
+    await http
+      .get(config.API.repatriationDetail(personId))
+      .then((res: any) => {
+        const data = res.data.result;
+        (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
+          (id.value = data.id);
+        prefix.value = data.prefix;
+        firstName.value = data.firstName;
+        lastName.value = data.lastName;
+        position.value = data.position;
+        posNo.value = data.posNo;
+        positionLevel.value = data.positionLevel;
+        createdAt.value = data.createdAt;
+        organization.value = data.organization;
+        reason.value = data.reason;
+        status.value = data.status;
+        date.value = data.date;
+        salary.value = data.salary;
+        positionTypeOld.value = data.positionTypeOld;
+        positionLevelOld.value = data.positionLevelOld;
+        positionNumberOld.value = data.positionNumberOld;
+        organizationPositionOld.value = data.organizationPositionOld;
+        isActive.value = data.isActive;
+      })
+      .catch((e) => {
+        //   messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  };
+  const getClass = (val: boolean) => {
+    return {
+      "full-width inputgreen cursor-pointer": val,
+      "full-width cursor-pointer": !val,
+    };
+  };
+  //
+  const conditionSave = async () => {
+    if (myForm.value !== null) {
+      myForm.value.validate().then((success: any) => {
+        if (success) {
+          dialogMessage(
+            $q,
+            "ต้องการแก้ไขข้อมูลหรือไม่?",
+            "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+            "mdi-help-circle-outline",
+            "ตกลง",
+            "public",
+            async () => await saveData(),
+            undefined
+          );
+        }
+      });
+    }
+  };
+  const saveData = async () => {
+    const body = {
+      organization: organization.value,
+      reason: reason.value,
+      organizationPositionOld: organizationPositionOld.value,
+      date: date.value,
+      positionTypeOld: positionTypeOld.value,
+      positionLevelOld: positionLevelOld.value,
+      positionNumberOld: posNo.value,
+      amountOld: salary.value,
+    };
+    showLoader();
+    await http
+      .put(config.API.transferId(personId.toString()), body)
+      .then((res: any) => {
+        //   const data = res.data.result;
+        //   console.log(data);
+        success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+        edit.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await getData();
+        hideLoader();
+      });
+  };
+  
+  // const confirmMessage = async () => {
+  //     dialogMessage(
+  //       $q,
+  //       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+  //       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+  //       "mdi-help-circle-outline",
+  //       "ยืนยัน",
+  //       "primary",
+  //       () => sendConfirm(),
+  //       undefined
+  //     );
+  //   };
+  // const sendConfirm = async () => {
+  //     showLoader();
+  //     await http
+  //       .get(config.API.transferConfirmId(personId.toString()))
+  //       .then((res: any) => {
+  //         //   const data = res.data.result;
+  //         //   console.log(data);
+  //         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+  //       })
+  //       .catch((e) => {
+  //         messageError($q, e);
+  //       })
+  //       .finally(async () => {
+  //         await getData();
+  //         hideLoader();
+  //       });
+  //   };
+  onMounted(async () => {
+    await getData();
+  });
+  </script>
+  <style lang="scss" scope>
+  .q-img {
+    border-radius: 5px;
+    height: 70px;
+  }
+  .text-top {
+    color: gray;
+    font-weight: 400;
+    padding-bottom: 3px;
+  }
+  .text-detail {
+    font-weight: 500;
+  }
+  </style>
+  

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

@@ -10,7 +10,7 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการขอโอนช่วยราชการ {{ fullname }}
+    รายละเอียดการช่วยราชการ {{ 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">
@@ -48,7 +48,7 @@
             </div>
           </div>
         </div>
-        <div class="col-xs-6 col-sm-5 row items-center">
+        <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
             <div class="col-12 text-detail">
@@ -63,50 +63,212 @@
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
-        เเก้ไขข้อมูลเพื่อลงบัญชีเเนบท้าย
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
       </div>
       <q-space />
-      <q-btn
+      <div class="q-gutter-sm" v-if="!edit">
-        v-if="!roleAdmin"
+        <q-btn
-        outline
+          outline
-        color="primary"
+          color="primary"
-        dense
+          dense
-        icon-right="arrow_forward"
+          icon-right="mdi-file-edit-outline"
-        class="q-px-sm"
+          class="q-px-sm"
-        label="ส่งคำร้องไปยัง สกจ."
+          label="แก้ไข"
-        @click=""
+          style="width: 80px"
-      />
+          @click="edit = !edit"
-      <q-btn
+        />
-        v-else
+      </div>
-        outline
+      <div class="q-gutter-sm" v-else>
-        color="primary"
+        <q-btn
-        dense
+          outline
-        icon-right="download"
+          color="public"
-        class="q-px-sm"
+          dense
-        label="ดาวน์โหลด"
+          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="edit = !edit"
+        />
+      </div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
+    <q-form ref="myForm">
-      <div class="col-12 row bg-white q-col-gutter-md">
+      <div class="row col-12 q-pa-md">
-        <div class="col-xs-6 col-sm-3 row items-center">
+        <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="col-12">
+          <div class="col-xs-12 row items-center">
-            <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
+            <div class="col-12">
-            <div class="col-12 text-detail">
+              <div class="text-weight-bold text-grey">
-              {{ responseData.organization }}
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
-        </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
-        <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
-          <div class="col-12">
+              <q-input
-            <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
+                :class="getClass(edit)"
-            <div class="col-12 text-detail">
+                :outlined="edit"
-              {{ responseData.reason }}
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salary"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+                :label="`${'เงินเดือน'}`"
+                type="number"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :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
+                :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"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </q-form>
   </q-card>
 </template>
 <script setup lang="ts">
@@ -119,17 +281,17 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
-import type { QTableProps } from "quasar";
+import type { QTableProps, QForm } from "quasar";
-import type {
+// import type {
-  TypeFile,
+//   TypeFile,
-  ResponseDataDetail,
+//   ResponseDataDetail,
-} from "@/modules/05_placement/interface/response/Transfer";
+// } from "@/modules/05_placement/interface/response/Transfer";
 
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-
+const edit = ref<boolean>(false);
 const personId = route.params.id as string;
 const {
   date2Thai,
@@ -141,11 +303,11 @@ const {
 } = mixin;
 
 const roleAdmin = ref<boolean>(false);
-
+const myForm = ref<QForm | null>(null);
 const name = ref<string>("นายสมคิด ยอดใจ");
 const level = ref<string>("ชำนาญการพิเศษ");
 const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const fullname = ref<string>("")
+const fullname = ref<string>("");
 const id = ref<string>("");
 const prefix = ref<string>("");
 const firstName = ref<string>("");
@@ -157,57 +319,57 @@ const createdAt = ref<string>("");
 const organization = ref<string>("");
 const reason = ref<string>("");
 const status = ref<string>("");
-const date = ref<string>("");
+const date = ref<Date | null>(null);
 const salary = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const isActive = ref<string>("");
-const responseData = ref<ResponseDataDetail>({
+// const responseData = ref<ResponseDataDetail>({
-  createdAt: new Date(),
+//   createdAt: new Date(),
-  date: new Date(),
+//   date: new Date(),
-  id: "",
+//   id: "",
-  organization: "",
+//   organization: "",
-  organizationPositionOld: "",
+//   organizationPositionOld: "",
-  positionLevelOld: "",
+//   positionLevelOld: "",
-  positionNumberOld: "",
+//   positionNumberOld: "",
-  positionTypeOld: "",
+//   positionTypeOld: "",
-  reason: "",
+//   reason: "",
-  salary: 0,
+//   salary: 0,
-  status: "",
+//   status: "",
-});
+// });
 
-const rows = ref<TypeFile[]>([]);
+// const rows = ref<TypeFile[]>([]);
-const columns = ref<QTableProps["columns"]>([
+// const columns = ref<QTableProps["columns"]>([
-  {
+//   {
-    name: "no",
+//     name: "no",
-    align: "left",
+//     align: "left",
-    label: "ลำดับ",
+//     label: "ลำดับ",
-    sortable: true,
+//     sortable: true,
-    field: "no",
+//     field: "no",
-    headerStyle: "font-size: 14px",
+//     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+//     style: "font-size: 14px",
-  },
+//   },
-  {
+//   {
-    name: "fileName",
+//     name: "fileName",
-    align: "left",
+//     align: "left",
-    label: "ชื่อไฟล์",
+//     label: "ชื่อไฟล์",
-    sortable: true,
+//     sortable: true,
-    field: "fileName",
+//     field: "fileName",
-    headerStyle: "font-size: 14px",
+//     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+//     style: "font-size: 14px",
-  },
+//   },
-  {
+//   {
-    name: "btnMicrosoft",
+//     name: "btnMicrosoft",
-    align: "right",
+//     align: "right",
-    label: "ปุ่ม",
+//     label: "ปุ่ม",
-    sortable: true,
+//     sortable: true,
-    field: "btnMicrosoft",
+//     field: "btnMicrosoft",
-    headerStyle: "font-size: 14px",
+//     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+//     style: "font-size: 14px",
-  },
+//   },
-]);
+// ]);
 
 const getData = async () => {
   showLoader();
@@ -215,8 +377,8 @@ const getData = async () => {
     .get(config.API.officerDetail(personId))
     .then((res: any) => {
       const data = res.data.result;
-      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`,
+      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-      id.value = data.id;
+        (id.value = data.id);
       prefix.value = data.prefix;
       firstName.value = data.firstName;
       lastName.value = data.lastName;
@@ -236,14 +398,67 @@ const getData = async () => {
       isActive.value = data.isActive;
     })
     .catch((e) => {
-    //   messageError($q, e);
+      //   messageError($q, e);
     })
     .finally(() => {
       hideLoader();
     });
 };
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+//
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success: any) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.transferId(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
 
-//   const confirmMessage = async () => {
+// const confirmMessage = async () => {
 //     dialogMessage(
 //       $q,
 //       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
@@ -255,8 +470,7 @@ const getData = async () => {
 //       undefined
 //     );
 //   };
-
+// const sendConfirm = async () => {
-//   const sendConfirm = async () => {
 //     showLoader();
 //     await http
 //       .get(config.API.transferConfirmId(personId.toString()))

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

@@ -4,16 +4,17 @@ import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
-const selected = ref([]);
+const selected = ref<officerType[]>([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -32,6 +33,7 @@ const {
   success,
   dialogMessage,
 
+  
 } = mixin;
 
 const modal = ref<boolean>(false);
@@ -39,18 +41,10 @@ const visibleColumns = ref<string[]>([
   "no",
   "fullname",
   "position",
-  "posNo",
   "positionLevel",
-  "organization",
-  "reason",
-  "status",
-  "date",
-  "salary",
-  "positionTypeOld",
-  "positionLevelOld",
-  "positionNumberOld",
   "organizationPositionOld",
-  "createdAt",
+  "organization",
+  "statusText",
   "btn",
 ]);
 const visibleColumns2 = ref<string[]>([
@@ -58,9 +52,9 @@ const visibleColumns2 = ref<string[]>([
   "fullname",
   "position",
   "positionLevel",
-  "oc",
+  "organizationPositionOld",
-  "agency",
+  "organization",
-  "status",
+  "statusText",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -141,70 +135,6 @@ 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",
-  },
-  {
-    name: "positionTypeOld",
-    align: "left",
-    label: "ตำแหน่งในสายงานก่อนหน้า",
-    sortable: true,
-    field: "positionTypeOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionNumberOld",
-    align: "left",
-    label: "เลขที่ตำเเหน่งก่อนหน้า",
-    sortable: true,
-    field: "positionNumberOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevelOld",
-    align: "left",
-    label: "ระดับก่อนหน้า",
-    sortable: true,
-    field: "positionLevelOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "หน่วยงานก่อนหน้า",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือนก่อนหน้า",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "reason",
-    align: "left",
-    label: "เหตุผลที่ย้ายหน่วยงาน",
-    sortable: true,
-    field: "reason",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
   {
     name: "position",
     align: "left",
@@ -214,18 +144,6 @@ 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: "positionLevel",
     align: "left",
@@ -235,7 +153,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "organization",
     align: "left",
@@ -246,11 +172,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statusText",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statusText",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -302,29 +228,29 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "agency",
+    name: "organization",
     align: "left",
     label: "หน่วยงานที่ขอโอนไป",
     sortable: true,
-    field: "agency",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statusText",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statusText",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -337,7 +263,14 @@ const openDetail = (id:string) => {
 }
 const openModal = () => (modal.value = true);
 const closeModal = () => (modal.value = false);
-
+const openModalOrder = () => {
+  openModal();
+  const row = rows.value.filter(
+    (item: officerType) =>
+      item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
+  );
+  rows2.value = row;
+};
 const getData = async () => {
   showLoader();
   await http
@@ -355,6 +288,7 @@ const getData = async () => {
         organization: item.organization,
         reason: item.reason,
         status: item.status,
+        statusText:statusText(item.status),
         date: item.date,
         salary: item.salary,
         positionTypeOld: item.positionTypeOld,
@@ -364,6 +298,7 @@ const getData = async () => {
         isActive: item.isActive,
       })
       );
+      console.log(rows.value )
     })
     .catch((e) => {
       // messageError($q, e);
@@ -372,7 +307,29 @@ const getData = async () => {
       hideLoader();
     });
 };
+const saveOrder = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
 
+  showLoader();
+  await http
+    .post(config.API.officerMainReport(), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
 const deleteData = async (id:string) => {
   await http
   .delete(config.API.officerMainDelete(id))
@@ -387,6 +344,8 @@ const deleteData = async (id:string) => {
           await getData();
         });
 }
+
+
 const clickDelete = async (name:string,id:string) => {
   dialogMessage(
     $q,
@@ -413,14 +372,14 @@ onMounted(async () => {
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="openModal"
+            @click="openModalOrder"
             size="14px"
             flat
             round
             color="add"
             icon="mdi-account-arrow-right"
           >
-            <q-tooltip>ส่งไปออกคำสั่งโอนออก</q-tooltip>
+            <q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
           </q-btn>
 
           <q-space />
@@ -485,77 +444,36 @@ onMounted(async () => {
                 <q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td key="positionTypeOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionTypeOld }}
-                </q-td>
-                <q-td key="positionNumberOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionNumberOld }}
-                </q-td>
-                <q-td key="positionLevelOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionLevelOld }}
-                </q-td>
-                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.organizationPositionOld }}
-                </q-td>
-                <q-td key="salary" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.salary }}
-                </q-td>
-                <q-td key="reason" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.reason }}
-                </q-td>
                 <q-td key="position" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.position }}
                 </q-td>
-                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.posNo }}
-                </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 key="organization" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
                   {{ props.row.organization }}
+                </div>
                 </q-td>
-                <q-td key="agency" :props="props" @click="openDetail(props.row.id)">
+                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.agency }}
+                  {{ props.row.statusText }}
-                </q-td>
-                <q-td key="status" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>
                   <q-btn
-                    icon="mdi-dots-vertical"
+                    icon="delete"
-                    size="12px"
+                    size="14px"
-                    color="grey-7"
+                    color="red-7"
                     flat
                     round
                     dense
+                    @click="clickDelete(props.row.fullname,props.row.id)"
                   >
-                    <q-menu
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 100px">
-
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="clickDelete(props.row.fullname,props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
                   </q-btn>
                 </q-td>
               </q-tr>
@@ -568,7 +486,7 @@ onMounted(async () => {
 
   <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
+      <DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
@@ -660,14 +578,18 @@ onMounted(async () => {
               <q-td key="positionLevel" :props="props">
                 {{ props.row.positionLevel }}
               </q-td>
-              <q-td key="oc" :props="props">
+              <q-td key="organizationPositionOld" :props="props">
-                {{ props.row.oc }}
+                <div class="table_ellipsis">
+                {{ props.row.organizationPositionOld }}
+              </div>
               </q-td>
-              <q-td key="agency" :props="props">
+              <q-td key="organization" :props="props">
-                {{ props.row.agency }}
+                <div class="table_ellipsis">
+                {{ props.row.organization }}
+              </div>
               </q-td>
-              <q-td key="status" :props="props">
+              <q-td key="statusText" :props="props">
-                {{ props.row.status }}
+                {{ props.row.statusText }}
               </q-td>
             </q-tr>
           </template>
@@ -677,7 +599,7 @@ onMounted(async () => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="ส่งไปออกคำสั่ง"
-          @click=""
+          @click="saveOrder"
           :disable="checkSelected"
           color="public"
         />

src/modules/05_placement/router.ts

@@ -33,7 +33,10 @@ const RepatriationOrder = () =>
   import("@/modules/05_placement/components/RepatriationOrder/List.vue");
 const RepatriationOrderAdd = () =>
   import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
-
+  const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
+  const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
+  const repatriate = () => import("@/modules/05_placement/components/Repatriate/RepatriateMain.vue")
+  const repatriatebyId = () => import("@/modules/05_placement/components/Repatriate/RepatriatebyId.vue")
 //รับโอน
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
@@ -42,8 +45,7 @@ const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
   const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
-const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
+
-const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
 export default [
   {
     path: "/placement",
@@ -225,4 +227,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/repatriate",
+    name: "repatriate",
+    component: repatriate,
+    meta: {
+      Auth: true,
+      Key: [6.7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/repatriate/detail/:id",
+    name: "repatriatebyId",
+    component: repatriatebyId,
+    meta: {
+      Auth: true,
+      Key: [6.7],
+      Role: "placement",
+    },
+  },
 ];