ประกาศเกษียณอายุราชการ

2023-09-19 16:45:07 +07:00 · 2023-09-19 16:45:07 +07:00 · f592008bbe
commit f592008bbe
parent 1530da36cf
6 changed files with 438 additions and 580 deletions
--- a/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
+++ b/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, messageError } = mixin;
+const router = useRouter();
+
+const props = defineProps({
+  type: {
+    type: String,
+  },
+  year: {
+    type: Number,
+  },
+  rows: {
+    type: Object,
+  },
+  actionOptio: {
+    type: Object,
+  },
+  checkjson: {
+    type: Boolean,
+  },
+});
+
+const modal = ref<boolean>(false);
+const radio = ref<string>("");
+const actionOption = ref<any>([]);
+const action = ref<string>("");
+
+// เพิ่มประกาศเกษียณอายุราชการ
+const clickAdd = () => {
+  if (props.rows) {
+    // ครั้งแรกจะเพิ่มเลย
+    if (props.rows.length == 0) {
+      dialogConfirm(
+        $q,
+        async () => {
+          let data = { type: props.type, year: props.year };
+          await cerateRetirement(data);
+        },
+        "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+        "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+      );
+    } else {
+      modal.value = true;
+      action.value = "";
+      radio.value = "";
+      if (props.actionOptio) {
+        actionOption.value = props.actionOptio;
+      }
+    }
+  }
+};
+// เลือกรายการเพิ่ม
+const clickSelect = async (action: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      let data = {
+        type: props.type,
+        year: props.year,
+        retireHistoryId: action,
+        option: radio.value,
+      };
+
+      await cerateRetirement(data);
+    },
+    "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
+    "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+  );
+};
+// เพิ่มรอบประกาศเกษียณอายุราชการ API
+const cerateRetirement = async (data: object) => {
+  await http
+    .post(config.API.createProfile(), data)
+    .then((res) => {
+      let response = res.data.result;
+      let retirementId = response.id;
+      router.push(`/retirement/${retirementId}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+</script>
+<template>
+  <q-btn
+    size="12px"
+    flat
+    round
+    color="add"
+    icon="mdi-plus"
+    @click="clickAdd"
+    :disable="checkjson"
+  >
+    <q-tooltip>เพิ่ม</q-tooltip>
+  </q-btn>
+  <q-dialog v-model="modal">
+    <q-card style="width: 450px; max-width: 80vw">
+      <q-card-section>
+        <div class="text-h6">เพิ่มประกาศ</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        เลือกประกาศที่ต้องการเพิ่มข้อมูล
+      </q-card-section>
+      <q-separator />
+      <div class="q-pa-md">
+        <q-list>
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="ADD"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศเพิ่มผู้เกษียณ</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="EDIT"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศแก้ไขข้อมูลผู้เกษียณ</q-item-label>
+              <q-item-label v-if="radio === 'EDIT'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+                />
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="REMOVE"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศยกเลิกผู้เกษียณ</q-item-label>
+              <q-item-label v-if="radio === 'REMOVE'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+              /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat label="ยกเลิก" color="red" v-close-popup />
+        <q-btn
+          flat
+          label="ตกลง"
+          @click="clickSelect(action)"
+          :disable="radio === '' || (action === '' && radio !== 'ADD')"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>