process จัดการคำขอเครื่องราช

src/components/Dialogs/Information.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  desc: {
+    type: String,
+    default: "",
+  },
+  clickClose: {
+    type: Function
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 500px; max-width: 500px">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
+        <q-btn icon="close" unelevated round dense @click="clickClose" style="color: #ff8080; background-color: #ffdede" />
+      </q-toolbar>
+
+      <q-separator />
+      <q-card-section class="q-p-sm">
+        <div class="row col-12">
+          {{ props.desc }}
+        </div>
+      </q-card-section>
+      <q-separator />
+    </q-card>
+  </q-dialog>
+</template>

src/components/Dialogs/PopupReason.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const reason = ref<string>("");
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  clickClose: {
+    type: Function,
+    default: () => { }
+  },
+  savaForm: {
+    type: Function,
+    default: () => { }
+  }
+});
+
+const myForm = ref<any>();
+const submit = () => {
+  myForm.value.validate().then((result: boolean) => {
+    if (result) {
+      props.savaForm(reason.value)
+    }
+  });
+};
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 500px; max-width: 500px">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
+        <q-btn icon="close" unelevated round dense @click="clickClose"
+          style="color: #ff8080; background-color: #ffdede" />
+      </q-toolbar>
+
+      <q-separator />
+      <q-form ref="myForm">
+        <q-card-section class="q-p-sm">
+          <div class="row col-12">
+            <q-input type="textarea" class="full-width inputgreen cursor-pointer" hide-bottom-space outlined dense
+              lazy-rules :rules="[(val) => !!val || `กรุณากรอก${label}`]" v-model="reason" :label="`${label}`" />
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-toolbar class="text-primary">
+          <q-space />
+          <q-btn label="บันทึก" color="secondary" @click="submit" />
+        </q-toolbar>
+      </q-form>
+
+    </q-card>
+  </q-dialog>
+</template>