จัดการตำแหน่งติดเงื่อนไข

src/modules/19_condition/components/DialogCondition.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, success, dialogConfirm } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+  dataCondition: { type: Object, required: true },
+});
+
+const formData = reactive({
+  isCondition: false,
+  conditionReason: "",
+});
+
+function onCloseDialog() {
+  modal.value = false;
+  formData.isCondition = false;
+  formData.conditionReason = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    // showLoader();
+    // await http
+    //   .put(config.API.รอAPI, formData)
+    //   .then(async () => {
+    //     await props.fetchData?.();
+    //     onCloseDialog();
+    //     success($q, "บันทึกข้อมูลสำเร็จ");
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   })
+    //   .finally(() => {
+    //     hideLoader();
+    //   });
+  });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 30vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`จัดการตำแหน่งติดเงื่อนไข`"
+          :close="onCloseDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q--col-gutter-sm">
+            <div class="col-12">
+              <q-checkbox
+                color="primary"
+                keep-color
+                v-model="formData.isCondition"
+                label="ตำแหน่งติดเงื่อนไข
+"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                v-model="formData.conditionReason"
+                label="หมายเหตุ"
+                type="textarea"
+              />
+            </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>