Refactoring code module 01_metadata => 03_positionEmployee

src/modules/01_metadata/components/position/03_Executive.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { RowListForm } from "@/modules/01_metadata/interface/request/position";
+
+import DialogAdd from "@/modules/01_metadata/components/position/DialogFormExecutive.vue";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+// Table
+const rows = ref<RowListForm[]>([]); // รายากรข้อมูลตำแหน่งทางการบริหาร
+const filterKeyword = ref<string>(""); // คำค้นหา
+const visibleColumns = ref<string[]>([
+  "no",
+  "posExecutiveName",
+  "posExecutivePriority",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ชื่อตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutivePriority",
+    align: "left",
+    label: "ลำดับความสำคัญ",
+    sortable: true,
+    field: "posExecutivePriority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const dataEdit = ref<RowListForm>(); // ข้อมูลตำแหน่งทางการบริหารที่แก้ไข
+const isEdit = ref<boolean>(false); // สถานการแก้ไข
+const modalPosExecutive = ref<boolean>(false); // popup ตำแหน่งทางการบริหาร
+
+/**
+ * ดึงรายการข้อมูลตำแหน่งทางการบริหาร
+ *
+ * เก็บข้อมูลรายการตำแหน่งทางการบริหารใน rows.value
+ */
+async function getData() {
+  showLoader();
+  http
+    .get(config.API.orgPosExecutive)
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * เปิด popup เพื่อเพิ่มข้อมูลรายากรตำแหน่งทางการบริหาร
+ */
+function popUpAdd() {
+  modalPosExecutive.value = true;
+}
+
+/**
+ * เปิด popup เพื่อแก่ไขข้อมูลรายากรตำแหน่งทางการบริหาร
+ * @param data ข้อมูลรายการตำแหน่งทางการบริหารที่ต้องการแก้ไข
+ */
+function editPopUp(data: RowListForm) {
+  modalPosExecutive.value = true;
+  dataEdit.value = data;
+  isEdit.value = true;
+}
+
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await getData();
+});
+</script>
+
+<template>
+  <div class="row col-12 q-col-gutter-x-sm">
+    <div class="col-2">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="popUpAdd()"
+      >
+        <q-tooltip>เพิ่มตำแหน่งทางการบริหาร</q-tooltip>
+      </q-btn>
+    </div>
+
+    <q-space />
+    <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+    />
+  </div>
+  <div class="col-12 q-mt-sm">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width></q-th>
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            style="color: #000000; font-weight: 500"
+          >
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td auto-width>
+            <q-btn
+              color="edit"
+              flat
+              dense
+              round
+              class="q-mr-xs"
+              icon="edit"
+              clickable
+              @click.stop="
+                () => {
+                  editPopUp(props.row);
+                }
+              "
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <!-- <q-btn
+              color="red"
+              flat
+              dense
+              round
+              icon="mdi-delete"
+              clickable
+              @click.stop="deletePos(props.row.id)"
+              v-close-popup
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn> -->
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+
+  <DialogAdd
+    v-model:executive="modalPosExecutive"
+    v-model:form-data="dataEdit"
+    v-model:edit="isEdit"
+    :get-data="getData"
+  />
+</template>