From ea0a6bab77f9d8297df964c6e05fb3d1b93b594f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 19 Jul 2024 11:39:51 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87-=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99-=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2=20=3D>?=
 =?UTF-8?q?=20fix=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/DialogOrgSelect.vue    |   4 +-
 .../04_registryNew/components/TableView.vue   |  25 +-
 .../components/requestEdit/DialogStatus.vue   | 135 ++++++++
 src/modules/04_registryNew/router.ts          |  24 +-
 .../04_registryNew/stores/RequestEdit.ts      |  36 ++
 src/modules/04_registryNew/views/list.vue     |  25 --
 .../04_registryNew/views/requestEdit.vue      | 315 ++++++++++++++++++
 7 files changed, 513 insertions(+), 51 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/requestEdit/DialogStatus.vue
 create mode 100644 src/modules/04_registryNew/stores/RequestEdit.ts
 create mode 100644 src/modules/04_registryNew/views/requestEdit.vue

diff --git a/src/components/Dialogs/DialogOrgSelect.vue b/src/components/Dialogs/DialogOrgSelect.vue
index 3adf01616..39e88605c 100644
--- a/src/components/Dialogs/DialogOrgSelect.vue
+++ b/src/components/Dialogs/DialogOrgSelect.vue
@@ -251,9 +251,9 @@ async function getDataTable(id: string, level: number = 0) {
     node: level,
     nodeId: id,
     typeCommand: type.value,
-    position: posType.value ? posType.value : "",
+    position: position.value ? position.value : "",
     posLevel: posLevel.value ? posLevel.value : "",
-    posType: position.value ? position.value : "",
+    posType: posType.value ? posType.value : "",
     isAll: isAll.value,
     isBlank: isBlank.value,
   };
diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index db57ce664..049207ef2 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -143,8 +143,6 @@ const visibleColumns = ref<string[]>([
   "posType",
   "posLevel",
   "org",
-  // "year",
-  // "salary",
 ]);
 
 function updatePagePagination() {
@@ -180,6 +178,13 @@ function onClickViewDetail(id: string) {
   }
 }
 
+/**
+ * function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
+ */
+function redirectToPagePetition() {
+  router.push(`/registry-new/request-edit`);
+}
+
 watch(
   () => formFilter.value.pageSize,
   () => {
@@ -190,27 +195,21 @@ watch(
 
 <template>
   <div class="col-12 row q-pb-sm q-col-gutter-sm items-center">
-    <!-- <div v-if="empType === 'officer'">
+    <div class="row q-gutter-sm">
       <q-btn
-        round
-        flat
-        dense
+        v-if="empType === 'officer'"
         color="primary"
-        icon="add"
-        size="15px"
-        @click="onClickAddData"
+        label="รายการคำร้องขอแก้ไข"
+        @click="redirectToPagePetition()"
       >
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+        <q-tooltip>รายการคำร้องขอแก้ไข</q-tooltip></q-btn
       >
-    </div> -->
-    <div>
       <q-btn
         round
         flat
         dense
         color="blue"
         icon="mdi-history"
-        size="15px"
         @click="onClickHistory"
       >
         <q-tooltip>ประวัติถือครองตำแหน่ง</q-tooltip></q-btn
diff --git a/src/modules/04_registryNew/components/requestEdit/DialogStatus.vue b/src/modules/04_registryNew/components/requestEdit/DialogStatus.vue
new file mode 100644
index 000000000..d5af53c26
--- /dev/null
+++ b/src/modules/04_registryNew/components/requestEdit/DialogStatus.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useRequestEditStore } from "@/modules/04_registryNew/stores/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = useRequestEditStore();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+/**
+ *  props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: { type: Function, requied: true },
+  data: { type: Object, requied: true },
+});
+
+const isReadOnly = ref<boolean>(false);
+const formData = reactive({
+  status: "",
+  remark: "",
+});
+const statusOptionMain = ref<DataOption[]>(
+  store.optionStatus.filter((e) => e.id !== "")
+);
+const statusOption = ref<DataOption[]>(statusOptionMain.value);
+
+function onSubmit() {
+  dialogConfirm($q, async () => {});
+}
+
+function closeDialog() {
+  modal.value = false;
+  formData.status = "";
+  formData.remark = "";
+}
+
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function filterOption(val: string, update: Function) {
+  update(() => {
+    statusOption.value = statusOptionMain.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="แก้ไขสถานะคำร้อง" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-md-12">
+              <q-select
+                :class="classInput(isReadOnly)"
+                v-model="formData.status"
+                label="สถานะ"
+                dense
+                outlined
+                emit-value
+                map-options
+                :options="statusOption"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                lazy-rules
+                hide-bottom-space
+                use-input
+                option-label="name"
+                option-value="id"
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterOption(inputValue, doneFn
+                    ) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-md-12">
+              <q-input
+                :class="classInput(isReadOnly)"
+                v-model="formData.remark"
+                label="รายละเอียด"
+                dense
+                outlined
+                type="textarea"
+                hide-bottom-space
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="ยื่นคำร้อง" color="secondary" type="submit"
+            ><q-tooltip>ยื่นคำร้อง</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/router.ts b/src/modules/04_registryNew/router.ts
index 2453cbf08..c2d58c115 100644
--- a/src/modules/04_registryNew/router.ts
+++ b/src/modules/04_registryNew/router.ts
@@ -2,6 +2,9 @@ const listPage = () => import("@/modules/04_registryNew/views/list.vue");
 const detailPage = () =>
   import("@/modules/04_registryNew/views/detailView.vue");
 
+const requestEdit = () =>
+  import("@/modules/04_registryNew/views/requestEdit.vue");
+
 export default [
   {
     path: "/registry-new",
@@ -33,15 +36,14 @@ export default [
       Role: "registry",
     },
   },
-
-  // {
-  //   path: "/registry-new/list",
-  //   name: "registryNewList",
-  //   component: listPage,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [7],
-  //     Role: "registry",
-  //   },
-  // },
+  {
+    path: "/registry-new/request-edit",
+    name: "registryNewRequestEdit",
+    component: requestEdit,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "registry",
+    },
+  },
 ];
diff --git a/src/modules/04_registryNew/stores/RequestEdit.ts b/src/modules/04_registryNew/stores/RequestEdit.ts
new file mode 100644
index 000000000..be6996118
--- /dev/null
+++ b/src/modules/04_registryNew/stores/RequestEdit.ts
@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+
+export const useRequestEditStore = defineStore("requestEditStore", () => {
+  const optionTopic = ref<string[]>([
+    "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+    "ขอแก้ไขรูปภาพประจำตัว",
+    "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
+    "ขอแก้ไขชื่อ - นามสกุล บิดา",
+    "ขอแก้ไขชื่อ - นามสกุล มารดา",
+    "ขอแก้ไขข้อมูลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/เหรียญจักรพรรดิมาลา",
+    "ขอแก้ไขประกาศเกียรติคุณ",
+    "ขอแก้ไขข้อมูลประวัติการศึกษา",
+  ]);
+  const optionStatus = ref<DataOption[]>([
+    { id: "", name: "ทั้งหมด" },
+    { id: "PENDING", name: "รอดำเนินการ" },
+    { id: "COMPLETE", name: "ดำเนินการแก้ไขแล้ว" },
+    { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
+  ]);
+
+  function convertStatus(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "COMPLETE":
+        return "ดำเนินการแก้ไขแล้ว";
+      case "REJECT":
+        return "ไม่อนุมัตการแก้ไข";
+      default:
+        return "-";
+    }
+  }
+  return { convertStatus, optionTopic, optionStatus };
+});
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index ffe34aa99..8c307c663 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -79,18 +79,6 @@ function fetchType() {
     });
 }
 
-/** function เรียกข้อมูลระดับ*/
-// function fetchLevel() {
-//   http
-//     .get(config.API.orgPosLevel)
-//     .then((res) => {
-//       store.fetchLevel(res.data.result);
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     });
-// }
-
 /**
  * function เรียกข้อมูลกลุ่มงาน
  */
@@ -105,17 +93,6 @@ function fetchOptionGroup() {
     });
 }
 
-// function fetchLevelGroup() {
-//   http
-//     .get(config.API.orgEmployeelevel)
-//     .then((res) => {
-//       store.fetchLevel(res.data.result);
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     });
-// }
-
 function fetchYearOption() {
   if (store.yearOps.length === 0) {
     const options = [];
@@ -266,10 +243,8 @@ function selectType(item: DataOption) {
     formFilter.isShowRetire = null;
     formFilter.isProbation = null;
     fetchOptionGroup();
-    // fetchLevelGroup();
   } else {
     fetchType();
-    // fetchLevel();
   }
 
   fetchDataPerson();
diff --git a/src/modules/04_registryNew/views/requestEdit.vue b/src/modules/04_registryNew/views/requestEdit.vue
new file mode 100644
index 000000000..21f656128
--- /dev/null
+++ b/src/modules/04_registryNew/views/requestEdit.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/**
+ * importComponents
+ */
+import DialogStatus from "@/modules/04_registryNew/components/requestEdit/DialogStatus.vue";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+
+/**
+ * importStore
+ */
+import { useRequestEditStore } from "@/modules/04_registryNew/stores/RequestEdit";
+
+/**
+ * use
+ */
+const router = useRouter();
+const store = useRequestEditStore();
+
+/**
+ * Table
+ */
+const rows = ref<any[]>([]);
+const dataList = ref<any[]>([]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: false,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "ชื่อเรื่อง",
+    sortable: true,
+    field: "topic",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "document",
+    align: "left",
+    label: "หลักฐานอ้างอิง",
+    sortable: true,
+    field: "document",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะคำร้อง",
+    sortable: true,
+    field: "status",
+    format: (v) => store.convertStatus(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ ",
+    sortable: true,
+    field: "remark",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "topic",
+  "detail",
+  "document",
+  "status",
+  "remark",
+]);
+
+/**
+ * ตัวแปร
+ */
+const status = ref<string>("");
+const keyword = ref<string>("");
+const statusOption = ref<DataOption[]>(store.optionStatus);
+const modalStatus = ref<boolean>(false);
+const dataRequest = ref<any>();
+
+function fetchListRequest() {
+  const data = [
+    {
+      id: "1",
+      fullname: "นายเกียรติศักดิ์ บัณฑิต",
+      topic: "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+      detail: "ขอแก้ไขคำนำหน้านาม",
+      document: null,
+      status: "PENDING",
+      remark: "",
+    },
+    {
+      id: "2",
+      fullname: "นายนิมมาน วงศ์วโรทัย",
+      topic: "ขอแก้ไขข้อมูลประวัติการศึกษา",
+      detail: "ขอแก้ไขคำนำหน้านาม",
+      document: null,
+      status: "COMPLETE",
+      remark: "",
+    },
+    {
+      id: "3",
+      fullname: "นายพัฒนกิจ จันทร์สว่างวงศ์",
+      topic: "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
+      detail: "ขอแก้ไขคำนำหน้านาม",
+      document: null,
+      status: "REJECT",
+      remark: "",
+    },
+  ];
+  dataList.value = data;
+  rows.value = dataList.value;
+}
+
+function updateStatusValue(val: string) {
+  if (val) {
+    rows.value = dataList.value.filter((e) => e.status === val);
+  } else {
+    rows.value = dataList.value;
+  }
+}
+
+function clearStatus() {
+  status.value = "";
+  statusOption.value = store.optionStatus;
+}
+
+function filterOption(val: string, update: Function) {
+  update(() => {
+    status.value = val ? "" : status.value;
+    statusOption.value = store.optionStatus.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+function onclickEdit(data: any) {
+  modalStatus.value = true;
+  dataRequest.value = data;
+}
+
+onMounted(() => {
+  fetchListRequest();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      รายการคำร้องขอแก้ไขทะเบียนประวัติ
+    </div>
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <div class="row q-mb-sm q-col-gutter-sm">
+      <div class="col-xs-10 col-md-3">
+        <q-select
+          style="max-width: 250px"
+          v-model="status"
+          label="สถานะคำร้อง"
+          dense
+          outlined
+          emit-value
+          map-options
+          option-label="name"
+          option-value="id"
+          :options="statusOption"
+          @update:model-value="updateStatusValue"
+          :clearable="status !== ''"
+          @clear="clearStatus"
+          use-input
+          @filter="(inputValue:string,
+          doneFn:Function) => filterOption(inputValue, doneFn
+          ) "
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+      <q-space />
+      <q-input
+        v-model="keyword"
+        outlined
+        clearable
+        dense
+        label="ค้นหา"
+        style="width: 250px"
+      >
+      </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
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
+    </div>
+    <div class="col-12">
+      <d-table
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :paging="true"
+        :visible-columns="visibleColumns"
+        :filter="keyword"
+      >
+        <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-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <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 class="table_ellipsis2">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                icon="edit"
+                round
+                dense
+                flat
+                color="edit"
+                size="12px"
+                @click.pervent="onclickEdit(props.row)"
+              >
+                <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogStatus
+    v-model:modal="modalStatus"
+    :fetchData="fetchListRequest"
+    :data="dataRequest"
+  />
+</template>
+
+<style scoped></style>