UI รายการออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง

src/modules/05_placement/components/ChangePosition/DialogRound.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success, showLoader, hideLoader } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const editCheck = defineModel<boolean>("edit");
+const round = defineModel<string>("round", { required: true });
+const idRound = defineModel<string>("id", { required: true });
+
+const props = defineProps({
+  getData: Function,
+});
+/** ปิด dialog */
+function close() {
+  modal.value = false;
+  editCheck.value = false;
+  round.value = "";
+  idRound.value = "";
+}
+
+function onSubmit() {
+//   dialogConfirm($q, () => {
+//     const url = editCheck.value
+//       ? config.API.
+//       : config.API.;
+
+//     http[editCheck.value ? "put" : "post"](url, {
+//       id: editCheck.value ? idRound : undefined,
+//       round: round.value,
+//     }).then((res) => {
+//       close();
+//       success($q, "บันทึกข้อมูลสำเร็จ");
+//       props.getData?.();
+//     });
+//   });
+}
+</script>
+
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card bordered style="min-width: 40vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            editCheck ? 'แก้ไข' : 'เพิ่ม'
+          }รอบการออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง`"
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row">
+            <div class="col-12">
+              <q-input
+                :model-value="round"
+                outlined
+                dense
+                class="inputgreen"
+                label="ชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง'}`,]"
+              ></q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>