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

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";

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

import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";

const $q = useQuasar();
const store = useDevelopmentDataStore();
const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
  useCounterMixin();

const formData = reactive<FormFollowOther>({
  dateStart: null,
  dateEnd: null,
  totalDate: 0,
  address: "",
  province: "",
  budget: "",
  accept: null,
  receive: null,
  approved: null,
  budgetPay: null,
  issues: "",
  chance: "",
  effects: "",
  riskLevel: "",
  riskManagement: "",
  benefits: "",
  topicsIssues: "",
  trainingStudy: "",
});

const provinceOp = ref<DataOption[]>([]);
const budgetOp = ref<DataOption[]>([
  {
    id: "REGULATIONBUDGET",
    name: "งบตามข้อบัญญัติ",
  },
  {
    id: "BANGKOKBUDGET",
    name: "งบประมาณกรุงเทพมหานคร",
  },
  {
    id: "OUTSIDEBUDGET",
    name: "เงินนอกงบประมาณ",
  },
]);

const options = ref<any>([
  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
]);
function onSubmit() {
  dialogConfirm($q, () => {});
}

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,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

onMounted(() => {
  getProvince();
});
</script>
<template>
  <div class="row q-pa-md q-col-gutter-sm">
    <div class="col-12">
      <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <datepicker
        menu-class-name="modalfix"
        v-model="store.formAddProject.dateStart"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            dense
            outlined
            :model-value="
              store.formAddProject.dateStart
                ? date2Thai(store.formAddProject.dateStart)
                : null
            "
            :label="`${'วันที่เริ่มต้น'}`"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <datepicker
        menu-class-name="modalfix"
        v-model="store.formAddProject.dateEnd"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            dense
            outlined
            :model-value="
              store.formAddProject.dateEnd
                ? date2Thai(store.formAddProject.dateEnd)
                : null
            "
            :label="`${'วันที่สิ้นสุด'}`"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        label="รวมระยะเวลา (วัน)"
        v-model="store.formAddProject.totalDate"
        mask="#"
        reverse-fill-mask
      />
    </div>

    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
    </div>
    <div class="col-8">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.address"
        label="ที่อยู่"
      />
    </div>
    <div class="col-4">
      <q-select
        outlined
        dense
        v-model="store.formAddProject.provinceId"
        label="จังหวัด"
        :options="provinceOp"
        option-label="name"
        option-value="id"
        emit-value
        map-options
      />
    </div>
    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">งบประมาณ</span>
    </div>
    <div class="col-4">
      <q-select
        outlined
        dense
        v-model="store.formAddProject.budget"
        label="ประเภทงบประมาณ"
        :options="budgetOp"
        option-label="name"
        option-value="id"
        emit-value
        map-options
      />
    </div>
    <div class="col-12">
      <div class="row q-col-gutter-x-sm">
        <div class="col-3">
          <q-input
            outlined
            dense
            v-model="store.formAddProject.accept"
            label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
            mask="###,###,###,###,###"
            reverse-fill-mask
          />
        </div>
        <div class="col-3">
          <q-input
            outlined
            dense
            v-model="store.formAddProject.receive"
            mask="###,###,###,###,###"
            reverse-fill-mask
            label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
          />
        </div>
        <div class="col-3">
          <q-input
            outlined
            dense
            v-model="store.formAddProject.approved"
            hide-bottom-space
            mask="###,###,###,###,###"
            label="จํานวนงบประมาณที่ได้รับอนุมัติ"
            reverse-fill-mask
          />
        </div>
        <div class="col-3">
          <q-input
            outlined
            dense
            v-model="store.formAddProject.budgetPay"
            mask="###,###,###,###,###"
            reverse-fill-mask
            label="จํานวนงบประมาณที่จ่ายจริง"
          />
        </div>
      </div>
    </div>

    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
    </div>

    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.issues"
        label="ประเด็นความเสี่ยง"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.chance"
        label="โอกาสที่จะเกิด"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.effects"
        label="ผลกระทบจากการเกิด"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.riskLevel"
        label="ระดับความเสี่ยง"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.riskManagement"
        label="เเนวทางการบริหารความเสี่ยง"
        type="textarea"
      />
    </div>
    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1"
        >ประโยชน์ที่คาดว่าจะได้รับ</span
      >
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.expect"
        label="ประโยชน์ที่คาดว่าจะได้รับ"
        type="textarea"
      />
    </div>
    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span>
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.topicAcademic"
        label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
      />
    </div>
    <div class="col-9">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.addressAcademic"
        label="สถานที่ฝึกอบรม ศึกษาดูงาน"
      />
    </div>
    <div class="col-3">
      <q-select
        outlined
        dense
        v-model="store.formAddProject.provinceActualId"
        label="จังหวัด(ข้อมูลวิชาการ)"
        :options="provinceOp"
        option-label="name"
        option-value="id"
        emit-value
        map-options
      />
    </div>
  </div>
</template>

<style scoped></style>