hrms-mgt/src/modules/15_development/components/Budget.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

/**
 * importType
 */
import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type { FormBudget } from "@/modules/15_development/interface/request/Main";

/**
 * importstor
 */
import { useCounterMixin } from "@/stores/mixin";

/**
 * use
 */
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const route = useRoute();

/**
 * props
 */
const status = defineModel<string>("status", { required: true });
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({
  prevStep: { type: Function, required: true },
  nextStep: { type: Function, required: true },
  onCheckChangeData: { type: Function, required: true },
});
const projectId = ref<string>(route.params.id.toLocaleString());

const checkRoutePermission = ref<boolean>(
  route.name == "developmentDetailPage"
);
const step = ref<string>("");

const budgetOp = ref<DataOption[]>([
  {
    id: "REGULATIONBUDGET",
    name: "งบตามข้อบัญญัติ",
  },
  {
    id: "OUTSIDEBUDGET",
    name: "เงินนอกงบประมาณ",
  },
  {
    id: "BANGKOKBUDGET",
    name: "ไม่ใช้งบประมาณ",
  },
]);
const budgetSubOp = ref<DataOption[]>([
  {
    id: "MAINTENANCE",
    name: "เงินบำรุง",
  },
  {
    id: "FUND",
    name: "เงินกองทุน",
  },
  {
    id: "SUBSIDY",
    name: "เงินอุดหนุน",
  },
]);

/** ตัวแปร */
const formData = reactive<FormBudget>({
  budget: "",
  budgetSub: "",
  accept: null,
  receive: null,
  approved: null,
  budgetPay: null,
});

/** ดึงข้อมูล */
function fetchData() {
  showLoader();
  http
    .get(config.API.developmentMainTab("tab7", projectId.value))
    .then((res) => {
      const data = res.data.result;
      formData.budget = data.budget;
      formData.budgetSub = data.budgetSub;
      formData.accept = data.accept;
      formData.receive = data.receive;
      formData.approved = data.approved;
      formData.budgetPay = data.budgetPay;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

/** บันทึกข้อมูล */
function onSubmit() {
  showLoader();
  formData.accept =
    typeof formData.accept === "string"
      ? Number(formData.accept.replace(/,/g, ""))
      : formData.accept;
  formData.receive =
    typeof formData.receive === "string"
      ? Number(formData.receive.replace(/,/g, ""))
      : formData.receive;
  formData.approved =
    typeof formData.approved === "string"
      ? Number(formData.approved.replace(/,/g, ""))
      : formData.approved;
  formData.budgetPay =
    typeof formData.budgetPay === "string"
      ? Number(formData.budgetPay.replace(/,/g, ""))
      : formData.budgetPay;
  http
    .put(config.API.developmentMainTab("tab7", projectId.value), formData)
    .then(() => {})
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

/**
 * function ไปยัง Tab ค่อไป
 */
function onNextTab() {
  step.value == "next" ? props.nextStep() : props.prevStep();
}

/**
 * ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์
 */
onMounted(() => {
  fetchData();
});

/**
 * เรียก function ไปใช่หน้าหลัก
 */
defineExpose({
  onSubmit,
});
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onNextTab">
    <div class="row q-pa-md q-col-gutter-sm">
      <div class="col-3">
        <q-select
          :readonly="checkRoutePermission"
          outlined
          dense
          v-model="formData.budget"
          label="ประเภทงบประมาณ"
          :options="budgetOp"
          option-label="name"
          option-value="id"
          emit-value
          map-options
          class="inputgreen"
          @update:model-value="
            props.onCheckChangeData(), (formData.budgetSub = '')
          "
        />
      </div>
      <div class="col-2">
        <q-select
          v-if="formData.budget === 'OUTSIDEBUDGET'"
          outlined
          dense
          :readonly="checkRoutePermission"
          v-model="formData.budgetSub"
          label="ประเภทย่อย"
          :options="budgetSubOp"
          option-label="name"
          option-value="id"
          emit-value
          map-options
          class="inputgreen"
          @update:model-value="props.onCheckChangeData()"
        />
      </div>
      <div class="col-12">
        <div class="row q-col-gutter-x-sm">
          <div class="col-3">
            <q-input
              outlined
              :readonly="checkRoutePermission"
              dense
              class="inputgreen"
              v-model="formData.accept"
              label="จํานวนงบประมาณที่ขอรับการจัดสรร ฯ"
              mask="###,###,###,###,###"
              reverse-fill-mask
              @update:model-value="props.onCheckChangeData()"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              :readonly="checkRoutePermission"
              dense
              class="inputgreen"
              v-model="formData.receive"
              mask="###,###,###,###,###"
              reverse-fill-mask
              label="จํานวนงบประมาณที่ได้รับการจัดสรร ฯ"
              @update:model-value="props.onCheckChangeData()"
            />
          </div>
          <div v-if="status == 'FINISH'" class="col-3">
            <q-input
              outlined
              :readonly="checkRoutePermission"
              dense
              class="inputgreen"
              v-model="formData.approved"
              hide-bottom-space
              mask="###,###,###,###,###"
              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
              reverse-fill-mask
              @update:model-value="props.onCheckChangeData()"
            />
          </div>
          <div v-if="status == 'FINISH'" class="col-3">
            <q-input
              outlined
              :readonly="checkRoutePermission"
              dense
              class="inputgreen"
              v-model="formData.budgetPay"
              mask="###,###,###,###,###"
              reverse-fill-mask
              label="จํานวนงบประมาณที่จ่ายจริง"
              @update:model-value="props.onCheckChangeData()"
            />
          </div>
        </div>
      </div>
    </div>
    <q-separator />
    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
      <q-btn
        rounded
        label="ก่อนหน้า"
        icon="mdi-chevron-left"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-mr-xs"
        style="width: 120px"
        @click="step = 'prev'"
      >
      </q-btn>
      <q-btn
        rounded
        label="ถัดไป"
        icon-right="mdi-chevron-right"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-ml-xs"
        style="width: 120px"
        @click="step = 'next'"
      >
      </q-btn>
    </div>
  </q-form>
</template>

<style scoped></style>