ทะเบียนประวัติ => UI รายการยื่นคำร้องขอแก้ไขข้อมูล

src/modules/10_registry/components/DialogAddPetiton.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useRequestEditStore } from "@/modules/10_registry/store/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 },
+});
+
+const isReadOnly = ref<boolean>(false);
+const formData = reactive({
+  topic: "",
+  detail: "",
+  document: null,
+});
+const topicOption = ref<string[]>(store.optionTopic);
+
+function closeDialog() {
+  modal.value = false;
+  formData.topic = "";
+  formData.detail = "";
+  formData.document = null;
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      await showLoader();
+      console.log(formData);
+      props.fetchData?.();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      await closeDialog();
+      await hideLoader();
+    },
+    "ยืนยันการยื่นคำร้อง",
+    "ต้องการยืนยันการยื่นคำร้องนี้ใช่หรือไม่?"
+  );
+}
+
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function filterOption(val: string, update: Function) {
+  update(() => {
+    topicOption.value = store.optionTopic.filter(
+      (v: any) => v.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.topic"
+                label="ชื่อเรื่อง"
+                dense
+                outlined
+                emit-value
+                map-options
+                :options="topicOption"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเรื่อง'}`]"
+                lazy-rules
+                hide-bottom-space
+                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>
+
+            <div class="col-xs-12 col-md-12">
+              <q-input
+                :class="classInput(isReadOnly)"
+                v-model="formData.detail"
+                label="รายละเอียด"
+                dense
+                outlined
+                type="textarea"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-xs-12 col-md-12">
+              <q-file
+                :class="classInput(isReadOnly)"
+                v-model="formData.document"
+                label="อัปโหลดเอกสารหลักฐาน"
+                flat
+                dense
+                outlined
+                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>