ui หน้าที่กรรมการ

src/modules/11_discipline/components/DialogDuty.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+const props = defineProps({
+  modal: Boolean,
+  closePopup: Function,
+  save: {
+    type: Function,
+    default: ""
+  },
+});
+
+const duty = ref<string>("");
+const myForm = ref<QForm | null>(null);
+
+/**
+ * ฟังก์ชั่น Save
+ */
+ const submit = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => {
+            await props.save();
+          },
+          "ยืนยันการแก้ไขข้อมูล",
+          "ต้องการยืนยันการแก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายหรือไม่?"
+        );
+      }
+    });
+  }
+};
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 30vw">
+      <q-form ref="myForm">
+        <DialogHeader title="แก้ไขหน้าที่กรรมการ" :close="props.closePopup" />
+        <q-separator />
+        <q-card-section>
+          <q-input
+            v-model="duty"
+            outlined
+            dense
+            class="col-12 q-mb-sm"
+            debounce="300"
+            placeholder="หน้าที่"
+            :rules="[(val) => !!val || `กรุณากรอกหน้าที่`]"
+          />
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" @click="submit()" color="public" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>