hrms-mgt/src/modules/06_retirement/components/ListRetirement/popupAdd.vue

<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";

/** Use */
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, messageError } = mixin;
const router = useRouter();

/** Prop */
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) {
        props.actionOptio;
        let list = props.actionOptio.map((e: any) => ({
          id: e.id,
          round: `รอบ ${e.round}  (ประกาศ ณ วันที่ ${e.signDate})`,
        }));
        actionOption.value = list;
      }
    }
  }
};

// เลือกรายการเพิ่ม
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" persistent>
    <q-card style="width: 450px; max-width: 80vw">
      <q-card-section>
        <h6 class="q-ma-none">เพิ่มประกาศ</h6>
        <p class="q-mb-none">เลือกประกาศที่ต้องการเพิ่มข้อมูล</p>
      </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
          unelevated
          color="teal"
          label="ตกลง"
          @click="clickSelect(action)"
          :disable="radio === '' || (action === '' && radio !== 'ADD')"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>