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

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

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 http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar();
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: "id1",
    name: "งบ1",
  },
  {
    id: "id2",
    name: "งบ2",
  },
  {
    id: "id3",
    name: "งบ3",
  },
]);

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="formData.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="
                formData.dateStart ? date2Thai(formData.dateStart) : null
              "
              :label="`${'วันที่เริ่มต้น'}`"
              hide-bottom-space
              :rules="[
            (val:string) =>
              !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`,
          ]"
            >
              <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="formData.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="
                formData.dateEnd ? date2Thai(formData.dateEnd) : null
              "
              :label="`${'วันที่สิ้นสุด'}`"
              hide-bottom-space
              :rules="[
            (val:string) =>
              !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
          ]"
            >
              <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="formData.totalDate"
        />
      </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="formData.address"
          hide-bottom-space
          label="ที่อยู่"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกที่อยู่'}`,
          ]"
        />
      </div>
      <div class="col-4">
        <q-select
          outlined
          dense
          v-model="formData.province"
          hide-bottom-space
          label="จังหวัด"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณาเลือกจังหวัด'}`,
          ]"
          :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="formData.budget"
          hide-bottom-space
          label="ประเภทงบประมาณ"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณาเลือกประเภทงบประมาณ'}`,
          ]"
          :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="formData.accept"
              hide-bottom-space
              label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
              mask="###,###,###,###"
                reverse-fill-mask
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ขอรับการจัดสรรฯ'}`,
          ]"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              v-model="formData.receive"
              hide-bottom-space
              mask="###,###,###,###"
                reverse-fill-mask
              label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับการจัดสรรฯ'}`,
          ]"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              v-model="formData.approved"
              hide-bottom-space
              mask="###,###,###,###"
                reverse-fill-mask
              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับอนุมัติ'}`,
          ]"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              v-model="formData.budgetPay"
              hide-bottom-space
              mask="###,###,###,###"
                reverse-fill-mask
              label="จํานวนงบประมาณที่จ่ายจริง"
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่จ่ายจริง'}`,
          ]"
            />
          </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="formData.issues"
          hide-bottom-space
          label="ประเด็นความเสี่ยง"
          type="textarea"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกประเด็นความเสี่ยง'}`,
          ]"
        />
      </div>
      <div class="col-12">
        <q-input
          outlined
          dense
          v-model="formData.chance"
          hide-bottom-space
          label="โอกาศที่จะเกิด"
          type="textarea"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกโอกาศที่จะเกิด'}`,
          ]"
        />
      </div>
      <div class="col-12">
        <q-input
          outlined
          dense
          v-model="formData.effects"
          hide-bottom-space
          label="ผลกระทบจากการเกิด"
          type="textarea"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกผลกระทบจากการเกิด'}`,
          ]"
        />
      </div>
      <div class="col-12">
        <q-input
          outlined
          dense
          v-model="formData.riskLevel"
          hide-bottom-space
          label="ระดับความเสี่ยง"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกระดับความเสี่ยง'}`,
          ]"
        />
      </div>
      <div class="col-12">
        <q-input
          outlined
          dense
          v-model="formData.riskManagement"
          hide-bottom-space
          label="เเนวทางการบริหารความเสี่ยง"
          type="textarea"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกเเนวทางการบริหารความเสี่ยง'}`,
          ]"
        />
      </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="formData.riskManagement"
          hide-bottom-space
          label="ประโยชน์ที่คาดว่าจะได้รับ"
          type="textarea"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกประโยชน์ที่คาดว่าจะได้รับ'}`,
          ]"
        />
      </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="formData.riskManagement"
          hide-bottom-space
          label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกหัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน'}`,
          ]"
        />
      </div>
      <div class="col-12">
        <q-input
          outlined
          dense
          v-model="formData.riskManagement"
          hide-bottom-space
          label="สถานที่ฝึกอบรม ศึกษาดูงาน"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกสถานที่ฝึกอบรม ศึกษาดูงาน'}`,
          ]"
        />
      </div>
    </div>

</template>

<style scoped></style>