From 47399c449690600bb07f23a357115a414686d0f1 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 25 Jul 2023 15:42:30 +0700
Subject: [PATCH] no message

---
 src/interface/request/main/main.ts            |   2 +-
 .../components/Transfer/transferMain.vue      | 591 ++++++++++++++++++
 src/modules/05_placement/router.ts            |  12 +
 3 files changed, 604 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/05_placement/components/Transfer/transferMain.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index af5588930..45e14fa33 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -207,7 +207,7 @@ const menuList = readonly<any[]>([
       {
         key: 6.4,
         label: "รายการคำขอโอน" /* */,
-        path: "tranfer",
+        path: "transfer",
         role: "placement",
       },
       {
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
new file mode 100644
index 000000000..66b45018c
--- /dev/null
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -0,0 +1,591 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+const clickClose = () => {
+  modal.value = false;
+};
+
+const $q = useQuasar();
+const modal = ref<boolean>(false);
+const popup = () => {
+  modal.value = true;
+};
+const router = useRouter();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+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<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 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: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "agency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    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: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "agency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+</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="popup()"
+            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">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="fullname"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <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"
+                @click="router.push(`/retirement/resign/${props.rowIndex + 1}`)"
+              >
+                <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="oc" :props="props">
+                  {{ props.row.oc }}
+                </q-td>
+                <q-td key="agency" :props="props">
+                  {{ props.row.agency }}
+                </q-td>
+                <q-td key="status" :props="props">
+                  {{ props.row.status }}
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="primary"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="clickClose" />
+      <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>
+
+        <q-table
+          ref="tableRef"
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="personalId"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          :pagination-label="paginationLabel"
+          selection="multiple"
+          v-model:pagination="pagination"
+          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="oc" :props="props">
+                {{ props.row.oc }}
+              </q-td>
+              <q-td key="agency" :props="props">
+                {{ props.row.agency }}
+              </q-td>
+              <q-td key="status" :props="props">
+                {{ props.row.status }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          @click=""
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss">
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 7ea16af98..b4b8b93eb 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -35,6 +35,8 @@ const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
   const probationFormAssign = () =>
     import("@/modules/05_placement/components/probation/FormAssign.vue");
+  const transfer = () =>
+    import("@/modules/05_placement/components/Transfer/transferMain.vue");
   export default [
     {
       path: "/placement",
@@ -156,4 +158,14 @@ const probationWorkAdd = () =>
         Role: "placement",
       },
     },
+    {
+      path: "/transfer",
+      name: "transfer",
+      component: transfer,
+      meta: {
+        Auth: true,
+        Key: [6.4],
+        Role: "placement",
+      },
+    },
   ];