From 0aa737bceef5b4ddbabbfe9fce3a87960f84973c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 18 Oct 2024 18:19:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B8=82=E0=B8=AD=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=97=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_registry/router.ts             |  11 +
 .../10_registry/views/requestEditDetail.vue   | 228 ++++++++++++++++++
 .../10_registry/views/requestEditMain.vue     |  11 +-
 3 files changed, 248 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/10_registry/views/requestEditDetail.vue

diff --git a/src/modules/10_registry/router.ts b/src/modules/10_registry/router.ts
index 88ed4f4..8de71c7 100644
--- a/src/modules/10_registry/router.ts
+++ b/src/modules/10_registry/router.ts
@@ -15,6 +15,8 @@ const registryOther = () => import("@/modules/10_registry/tabs/05_other.vue");
  */
 const requestEditMain = () =>
   import("@/modules/10_registry/views/requestEditMain.vue");
+const requestEditDetail = () =>
+  import("@/modules/10_registry/views/requestEditDetail.vue");
 
 export default [
   {
@@ -82,4 +84,13 @@ export default [
       Key: [10],
     },
   },
+  {
+    path: "/registry/request-edit/:id",
+    name: "request-edit-id",
+    component: requestEditDetail,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
 ];
diff --git a/src/modules/10_registry/views/requestEditDetail.vue b/src/modules/10_registry/views/requestEditDetail.vue
new file mode 100644
index 0000000..cd1a7db
--- /dev/null
+++ b/src/modules/10_registry/views/requestEditDetail.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter, useRoute } from "vue-router";
+import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+
+import Workflow from "@/components/Workflow/Main.vue";
+
+const $q = useQuasar();
+const store = useRequestEditStore();
+const router = useRouter();
+const route = useRoute();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+
+const requestId = ref<string>(route.params.id.toString());
+
+const dataRequest = ref<any>({
+  fullname: "",
+  createdAt: null,
+  topic: "",
+  detail: "",
+  status: "",
+  remark: "",
+});
+//ข้อมูลรายการสถานะ
+const statusOptionMain = ref<DataOption[]>(
+  store.optionStatus.filter((e) => e.id !== "")
+);
+const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.requestEdit + `${requestId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataRequest.value = {
+        fullname: data.fullname,
+        createdAt: data.createdAt,
+        topic: data.topic,
+        detail: data.detail,
+        status: data.status,
+        remark: data.remark,
+      };
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchData();
+});
+</script>
+
+<template>
+  <div class="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="router.go(-1)"
+        />
+        รายละเอียดคำร้องขอแก้ไขทะเบียนประวัติ
+      </div>
+      <q-card bordered class="q-pa-md">
+        <div class="row">
+          <!-- รายละเอียดคำร้องขอแก้ไข -->
+          <q-card bordered class="row col-12">
+            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+              <div class="q-pl-sm text-weight-bold text-dark">
+                รายละเอียดคำร้องขอแก้ไข
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <q-card-section class="col-12">
+              <div class="row q-col-gutter-sm">
+                <!-- วันที่ยื่นขอ -->
+                <div class="col-md-2 col-xs-12">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dataRequest.createdAt"
+                    :locale="'th'"
+                    autoApply
+                    readonly
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        readonly
+                        dense
+                        hide-bottom-space
+                        class="full-width"
+                        :model-value="
+                          dataRequest.createdAt != null
+                            ? date2Thai(dataRequest.createdAt)
+                            : null
+                        "
+                        :label="`${'วันที่ยื่นขอ'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <!-- เรื่อง -->
+                <div class="col-md-10 col-xs-12">
+                  <q-input
+                    readonly
+                    v-model="dataRequest.topic"
+                    label="เรื่อง"
+                    dense
+                    outlined
+                  />
+                </div>
+
+                <!-- รายละเอียด -->
+                <div class="col-12">
+                  <q-input
+                    readonly
+                    v-model="dataRequest.detail"
+                    label="รายละเอียด"
+                    dense
+                    outlined
+                    type="textarea"
+                  />
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+
+          <!-- สถานะคำร้อง -->
+          <q-card bordered class="row col-12 q-mt-sm">
+            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+              <div class="q-pl-sm text-weight-bold text-dark">สถานะคำร้อง</div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <q-card-section class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-xs-12 col-md-12">
+                  <q-select
+                    readonly
+                    v-model="dataRequest.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"
+                  >
+                    <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
+                    readonly
+                    v-model="dataRequest.remark"
+                    label="หมายเหตุ"
+                    dense
+                    outlined
+                    type="textarea"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+            </q-card-section>
+            <q-separator />
+          </q-card>
+
+          <div class="col-12 q-mt-sm">
+            <Workflow
+              ref="workflowRef"
+              :id="requestId"
+              sys-name="REGISTRY_PROFILE"
+            />
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index c1194b7..056650f 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -394,7 +394,14 @@ onMounted(() => {
             </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">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  @click.pervent="
+                    router.push(`/registry/request-edit/${props.row.id}`)
+                  "
+                >
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
@@ -406,7 +413,7 @@ onMounted(() => {
                       flat
                       color="primary"
                       size="12px"
-                      @click.pervent="onDownloadFile(props.row.id)"
+                      @click.stop.pervent="onDownloadFile(props.row.id)"
                     >
                       <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
                     </q-btn>