ขอโอน api ต่อแล้ว,ดาต้ายังไม่ครบ

2023-08-10 17:02:08 +07:00 · 2023-08-10 17:02:08 +07:00 · 6fbc73300c
commit 6fbc73300c
parent 1cbf5e3f06
5 changed files with 307 additions and 277 deletions
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@ -1,38 +1,32 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+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 http from "@/plugins/http";
+import config from "@/app.config";
+
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";

+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
 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 mixin = useCounterMixin();
+
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+
+const modal = ref<boolean>(false);
 const visibleColumns = ref<string[]>([
  "no",
  "fullname",
@ -63,53 +57,7 @@ const resetFilter = () => {
 // const nextPage = (id:string) => {
 //   router.push("/retirement/resign/"+id);
 // };
-const rows = ref<any>([
-  {
-    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-ae3d-4b8c-8cf0-b86b5a2ed8bb",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-]);
+const rows = ref<ResponseData[]>([]);
 const rows2 = ref<any>([
  {
    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
@ -287,6 +235,49 @@ const columns2 = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
 ]);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transfer)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: new Date(),
+          date: new Date(),
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          organization: r.organization ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          posNo: r.posNo ?? "",
+          position: r.position ?? "",
+          positionLevel: r.positionLevel ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          reason: r.id ?? "",
+          salary: r.salary !== null ? r.salary : 0,
+          status: r.status ?? "",
+        });
+      });
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </script>
 <template>
  <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
@ -296,7 +287,7 @@ const columns2 = ref<QTableProps["columns"]>([
      <div class="col-12">
        <div class="row col-12">
          <q-btn
-            @click="popup()"
+            @click="openModal"
            size="14px"
            flat
            round
@ -346,20 +337,12 @@ const columns2 = ref<QTableProps["columns"]>([
        </div>

        <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
+          <d-table
            :columns="columns"
            :rows="rows"
            :filter="filterKeyword"
-            row-key="fullname"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
+            row-key="id"
            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
@ -372,7 +355,7 @@ const columns2 = ref<QTableProps["columns"]>([
              <q-tr
                :props="props"
                class="cursor-pointer"
-                @click="router.push(`/transfer/${props.row.personalId}`)"
+                @click="router.push(`/transfer/${props.row.id}`)"
              >
                <q-td key="no" :props="props">
                  {{ props.rowIndex + 1 }}
@ -397,19 +380,7 @@ const columns2 = ref<QTableProps["columns"]>([
                </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>
+          </d-table>
        </div>
      </div>
    </div>
@ -417,7 +388,7 @@ const columns2 = ref<QTableProps["columns"]>([

  <q-dialog v-model="modal">
    <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="clickClose" />
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
      <q-separator />
      <q-card-section class="q-pt-none">
        <div class="row justify-end">
@ -432,15 +403,15 @@ const columns2 = ref<QTableProps["columns"]>([
                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>
+                <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"
@ -461,26 +432,17 @@ const columns2 = ref<QTableProps["columns"]>([
          </div>
        </div>

-        <q-table
-          ref="tableRef"
+        <d-table
          :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">
+          <template v-slot:header-selection="scope">
            <q-checkbox
              keep-color
              color="primary"
@ -497,10 +459,7 @@ const columns2 = ref<QTableProps["columns"]>([
            />
          </template> -->
          <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-            >
+            <q-tr :props="props" class="cursor-pointer">
              <q-td>
                <q-checkbox
                  keep-color
@ -532,18 +491,7 @@ const columns2 = ref<QTableProps["columns"]>([
              </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>
+        </d-table>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-teal">
@ -557,35 +505,4 @@ const columns2 = ref<QTableProps["columns"]>([
    </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>
+<style scoped lang="scss"></style>