Dialog **(ไม่สมบูรณ์)

src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue

@@ -1 +1,98 @@
+<script setup lang="ts">
+import { ref, defineModel } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
 
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+
+import config from "@/app.config";
+
+const $q = useQuasar();
+const modal = defineModel<boolean>("modal", { required: true });
+const amount = ref<number | null>(null);
+
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai, messageError } = mixin;
+
+
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  onSubmit();
+}
+
+function close() {
+  modal.value = false;
+  amount.value = null
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      profileId: '????????????????????????????????????????????',
+      amount: amount.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/amount`, body)
+      .then((res) => {
+        modal.value = false;
+        amount.value = null
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-input
+            ref="salaryRef"
+            dense
+            outlined
+            v-model="amount"
+            label="เงินเดือนฐาน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue

@@ -1 +1,104 @@
+<script setup lang="ts">
+import { ref, defineModel } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { DataOption } from "@/modules/13_salary/interface/response/Main";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
 
+import config from "@/app.config";
+
+const $q = useQuasar();
+const modal = defineModel<boolean>("modal", { required: true });
+const group = ref<string>("");
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai, messageError } = mixin;
+const groupOp = ref<DataOption[]>([
+  { id: "g1", name: "กลุ่ม1" },
+  { id: "g2", name: "กลุ่ม2" },
+]);
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  onSubmit();
+}
+
+function close() {
+  modal.value = false;
+  group.value = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      profileId: "????????????????????????????????????????????",
+      groupId: group.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/group`, body)
+      .then((res) => {
+        modal.value = false;
+        group.value = "";
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="periodRef"
+            :class="inputEdit(isReadonly)"
+            v-model="group"
+            label="กลุ่ม"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="groupOp"
+            :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, defineModel } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { DataOption } from "@/modules/13_salary/interface/response/Main";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+
+import config from "@/app.config";
+
+const $q = useQuasar();
+const modal = defineModel<boolean>("modal", { required: true });
+const type = ref<string>("");
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai, messageError } = mixin;
+const typeOp = ref<DataOption[]>([
+  { id: "NONE", name: "ไม่ได้เลื่อน" },
+  { id: "HAFT", name: "ครึ่งขั้น" },
+  { id: "FULL", name: "1ขั้น" },
+  { id: "FULLHAFT", name: "1.5ขั้น" },
+]);
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  onSubmit();
+}
+
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      profileId: "????????????????????????????????????????????",
+      type: type.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/type`, body)
+      .then((res) => {
+        modal.value = false;
+        type.value = "";
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายขั้น`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="periodRef"
+            :class="inputEdit(isReadonly)"
+            v-model="type"
+            label="เลื่อนขั้น"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="typeOp"
+            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>