ปรับหน้ารายการเลื่อนเงินเดือนข้าราชการ

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

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("id", { required: true });
+const props = defineProps({
+  isPunish: { type: Boolean, required: true },
+  isSuspension: { type: Boolean, required: true },
+  isAbsent: { type: Boolean, required: true },
+  isLeave: { type: Boolean, required: true },
+  fetchData: {
+    type: Function,
+  },
+});
+
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isSuspension = ref<boolean>(false); // สำรองหรือไม่
+const isAbsent = ref<boolean>(false); // สำรองหรือไม่
+const isLeave = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+    onSubmit();
+  }
+
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+        isPunish: isPunish.value,
+        isSuspension: isSuspension.value,
+        isAbsent: isAbsent.value,
+        isLeave: isLeave.value,
+    };
+    http
+      .put(config.API.salaryProperty(profileId.value), body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        close();
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    isPunish.value = props.isPunish;
+    isSuspension.value = props.isSuspension;
+    isAbsent.value = props.isAbsent;
+    isLeave.value = props.isLeave;
+  }
+);
+
+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: 20%">
+      <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm column">
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกลงโทษทางวินัย"
+            dense
+            v-model="isPunish"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกพักราชการ"
+            dense
+            v-model="isSuspension"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ขาดราชการ"
+            dense
+            v-model="isAbsent"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="วันลาไม่เกิน"
+            dense
+            v-model="isLeave"
+          />
+        </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>