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

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

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

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

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

const formData = reactive<FormFollowResult>({
  metricType: "",
  indicators: "",
  target: "",
  calculation: "",
  measuRement: "",
  results: "",
  obstacles: "",
  suggestions: "",
  project: "",
});

const group = ref<any[]>([]);
const metricTypeOp = ref<DataOption[]>([
  {
    id: "id1",
    name: "name1",
  },
  {
    id: "id2",
    name: "name2",
  },
  {
    id: "id3",
    name: "name3",
  },
]);
const projectOp = ref<DataOption[]>([
  {
    id: "OFFER",
    name: "โครงการที่ เสนอขอ TN",
  },
  {
    id: "NOOFFER",
    name: "โครงการที่ ไม่ เสนอขอ TN",
  },
]);

const optionsTNFirst = ref<DataOptionCheckBox[]>([
  {
    label: "ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ",
    value: store.formAddProject.isPassAllocate,
  },
  {
    label:
      "ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
    value: store.formAddProject.isPassNoAllocate,
  },
  {
    label: "ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
    value: store.formAddProject.isNoPass,
  },
]);
const optionsTNSecon = ref<DataOptionCheckBox[]>([
  {
    label: "แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ",
    value: store.formAddProject.isBudget,
  },
  {
    label: "แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
    value: store.formAddProject.isOutBudget,
  },
]);

watchEffect(() => {});

onMounted(() => {
  optionsTNFirst.value.forEach((checkbox, index) => {
    if (index === 0) checkbox.value = store.formAddProject.isPassAllocate;
    else if (index === 1)
      checkbox.value = store.formAddProject.isPassNoAllocate;
    else if (index === 2) checkbox.value = store.formAddProject.isNoPass;
  });
});
</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-4">
      <!-- <q-select
        dense
        outlined
        label="ประเภทตัวชี้วัด"
        v-model="store.formAddProject.metricType"
        :options="metricTypeOp"
        option-label="name"
        option-value="id"
        hide-bottom-space
      /> -->
      <q-input
        dense
        outlined
        label="ประเภทตัวชี้วัด"
        v-model="store.formAddProject.metricType"
        hide-bottom-space
      />
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-input
        dense
        outlined
        label="ตัวชี้วัด"
        v-model="store.formAddProject.indicators"
        hide-bottom-space
      />
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-input
        dense
        outlined
        label="เป้าหมาย"
        v-model="store.formAddProject.target"
        hide-bottom-space
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.calculation"
        hide-bottom-space
        label="วิธีการคำนวณ/เครื่องมือ"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.measuRement"
        hide-bottom-space
        label="ระยะเวลาวัดผล"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.results"
        hide-bottom-space
        label="ผลการดำเนิน"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.obstacles"
        hide-bottom-space
        label="ปัญหาอุปสรรค"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        v-model="store.formAddProject.suggestions"
        hide-bottom-space
        label="ข้อเสนอเเนะ"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <span class="text-weight-medium text-body1"
        >ประเภทของผลการพิจารณาความเหมาะสมโครงการ</span
      >
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-select
        dense
        outlined
        label="ประเภทโครงการ"
        v-model="store.formAddProject.project"
        :options="projectOp"
        option-label="name"
        option-value="id"
        hide-bottom-space
        map-options
        emit-value
      />
    </div>
    <div v-if="store.formAddProject.project !== ''" class="col-12">
      <div class="row" v-if="store.formAddProject.project == 'OFFER'">
        <div class="col-12">
          <q-checkbox
            v-model="store.formAddProject.isPassAllocate"
            label="ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ"
          />
        </div>
        <div class="col-12">
          <q-checkbox
            v-model="store.formAddProject.isPassNoAllocate"
            label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
          />
        </div>

        <div class="col-12">
          <q-checkbox
            v-model="store.formAddProject.isNoPass"
            label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
          />
        </div>
      </div>
      <div class="row" v-else>
        <div class="col-12">
          <q-checkbox
            v-model="store.formAddProject.isBudget"
            label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
          />
        </div>
        <div class="col-12">
          <q-checkbox
            v-model="store.formAddProject.isOutBudget"
            label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>