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

import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type { FormData } from "@/modules/15_development/interface/request/Other";

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

const $q = useQuasar();
const {
  showLoader,
  hideLoader,
  diffDay,
  date2Thai,
  messageError,
  dialogConfirm,
  success,
} = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const status = defineModel<string>("status", { required: true });

const checkRoutePermission = ref<boolean>(
  route.name == "developmentDetailPage"
);
const props = defineProps({
  prevStep: { type: Function, required: true },
  nextStep: { type: Function, required: true },
});
const step = ref<string>("");

const provinceOp = ref<DataOption[]>([]);
const provinceOpMain = ref<DataOption[]>([]);
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 getProvince = async () => {
  showLoader();
  http
    .get(config.API.province)
    .then((res) => {
      const data = res.data.result;

      provinceOp.value = data.map((item: DataOption) => ({
        id: item.id,
        name: item.name,
      }));
      provinceOpMain.value = provinceOp.value;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/** ตัวแปร */
const formData = reactive<FormData>({
  dateStart: null, //วันที่เริ่มต้น
  dateEnd: null, //วันที่สิ้นสุด
  totalDate: null, //รวมระยะเวลา (วัน)
  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
  budgetSub: "",
  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
  issues: "", //ประเด็นความเสี่ยง
  chance: null, //โอกาสที่จะเกิด
  effects: null, //ผลกระทบจากการเกิด
  riskLevel: "", //ระดับความเสี่ยง
  riskManagement: "", //เเนวทางการบริหารความเสี่ยง
  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
});

/** ดึงข้อมูล */
function fetchData() {
  http
    .get(config.API.developmentMainTab("tab5", projectId.value))
    .then((res) => {
      const data = res.data.result;
      formData.dateStart = data.dateStart;
      formData.dateEnd = data.dateEnd;
      formData.totalDate = data.totalDate;
      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
        address: e.address,
        provinceId: e.provinceId,
      }));
      formData.budget = data.budget;
      formData.budgetSub = data.budgetSub;
      formData.accept = data.accept;
      formData.receive = data.receive;
      formData.approved = data.approved;
      formData.budgetPay = data.budgetPay;
      formData.issues = data.issues;
      formData.chance = Number(data.chance);
      formData.effects = Number(data.effects);
      formData.riskLevel = data.riskLevel;
      formData.riskManagement = data.riskManagement;
      formData.expect = data.expect;
      formData.topicAcademic = data.topicAcademic;
      formData.addressAcademic = data.addressAcademic;
      formData.provinceActualId = data.provinceActualId;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ฟังชั่นเคลียค่าวันสิ้นสุดเมื่อวันสิ้นสุดมากกว่าวันเริ่ม */
function changeDateStart() {
  if (formData.dateStart !== null && formData.dateEnd !== null) {
    const startDate = new Date(formData.dateStart);
    const endDate = new Date(formData.dateEnd);
    if (startDate > endDate) {
      formData.dateEnd = null;
      formData.totalDate = null;
    } else {
      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
    }
  }
}

/** ฟังชั่น เก็บค่า ระยะกี่วันจากวันเริ่ม */
function changeDateEnd() {
  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
}

/**
 * Fuction Filter จังหวัด
 * @param val ค่าตัวพิมพ์ค้นหา
 * @param update ทุกครั้งที่พิมพ์ค่า
 */
const filterSelector = (val: string, update: Function) => {
  update(() => {
    provinceOp.value = provinceOpMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
};

/** ระดับความเสี่ยงของโครงการ option */
async function calRiskLevel() {
  if (formData.chance && formData.effects) {
    const riskLevel =
      (await Number(formData.chance)) * Number(formData.effects);
    formData.riskLevel =
      riskLevel == 1
        ? "น้อยมาก"
        : riskLevel == 2
        ? "น้อย"
        : riskLevel == 3 || riskLevel == 4 || riskLevel == 6
        ? "ปานกลาง"
        : riskLevel == 5 || riskLevel == 8 || riskLevel == 9 || riskLevel == 10
        ? "สูง"
        : riskLevel == 12 ||
          riskLevel == 15 ||
          riskLevel == 16 ||
          riskLevel == 20 ||
          riskLevel == 25
        ? "สูงมาก"
        : "";
  }
}

/** บันทึกข้อมูล */
function onSubmit() {
  // dialogConfirm($q, async () => {
  showLoader();
  formData.totalDate = Number(formData.totalDate);
  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("tab5", projectId.value), formData)
    .then(() => {
      // fetchData();
      // success($q, "บันทึกข้อมูลสำเร็จ");
      step.value == "next" ? props.nextStep() : props.prevStep();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
  // });
}

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

<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <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"
        />
      </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"
        />
      </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
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              :readonly="checkRoutePermission"
              dense
              class="inputgreen"
              v-model="formData.receive"
              mask="###,###,###,###,###"
              reverse-fill-mask
              label="จํานวนงบประมาณที่ได้รับการจัดสรร ฯ"
            />
          </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
            />
          </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="จํานวนงบประมาณที่จ่ายจริง"
            />
          </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>