โมดูลการอุทธรณ์ร้องทุกข์

src/modules/06_appealComplain/views/Main.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/02_transfer/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import Table from "@/components/Table.vue";
+
+const transferData = useTransferDataStore();
+const { statusText } = transferData;
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+
+/**
+ * ตั้งค่า pagination
+ */
+const initialPagination = ref({
+  rowsPerPage: 0,
+});
+
+/**
+ * เพิ่มหัวข้อตาราง
+ */
+const filter = ref<string>("");
+const rows = ref<any>([]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "date",
+  "position",
+  "noPos",
+  "level",
+  "salary",
+  "transfer",
+  "statustext",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "noPos",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "noPos",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "อันดับ/ระดับ",
+    sortable: true,
+    field: "level",
+    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: "transfer",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "transfer",
+    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; width:10%;",
+  },
+]);
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fecthListTransfer();
+});
+
+//นำข้อมูลมาแสดง
+const fecthListTransfer = async () => {
+//   showLoader();
+//   await http
+//     .get(config.API.listUserTransfer())
+//     .then((res: any) => {
+//       let data = res.data.result;
+//       rows.value = data.map((e: any) => ({
+//         id: e.id,
+//         date: date2Thai(e.createdAt),
+//         status: e.status,
+//         statustext: statusText(e.status),
+//         position: e.organizationPositionOld,
+//         noPos: e.posNo,
+//         level: e.positionLevel,
+//         salary: e.salary,
+//         transfer: e.organization,
+//       }));
+//     })
+//     .catch((e: any) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+};
+
+/**
+ * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่ม
+ */
+const clickAdd = async () => {
+  router.push(`/appeal-complain/add`);
+};
+
+/**
+ * กดเพื่อย้อนกลับ
+ */
+const clickBack = () => {
+  router.push(`/`);
+};
+</script>
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="clickBack"
+        />
+        อุทธรณ์ร้องทุกข์
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <Table
+            style="max-height: 80vh"
+            :rows="rows"
+            :columns="columns"
+            :filter="filter"
+            :visible-columns="visibleColumns"
+            v-model:inputfilter="filter"
+            v-model:inputvisible="visibleColumns"
+            :pagination="initialPagination"
+            :inputShow="false"
+            :add="clickAdd"
+            :titleText="''"
+          >
+            <template #columns="props">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="router.push(`/transfer/` + props.row.id)"
+              >
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="date" :props="props">
+                  {{ props.row.date }}
+                </q-td>
+                <q-td key="position" :props="props">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="noPos" :props="props">
+                  {{ props.row.noPos }}
+                </q-td>
+                <q-td key="level" :props="props">
+                  {{ props.row.level }}
+                </q-td>
+                <q-td key="salary" :props="props">
+                  {{ props.row.salary }}
+                </q-td>
+                <q-td key="transfer" :props="props">
+                  {{ props.row.transfer }}
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
+                </q-td>
+              </q-tr>
+            </template>
+          </Table>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style></style>