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

<script setup lang="ts">
import { reactive, ref } 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 projectOp = ref<DataOption[]>([
  {
    id: "OFFER",
    name: "โครงการที่เสนอขอ TN",
  },
  {
    id: "NOOFFER",
    name: "โครงการที่ไม่เสนอขอ TN",
  },
]);
</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
        class="inputgreen"
        label="ประเภทตัวชี้วัด"
        v-model="store.formAddProject.metricType"
        hide-bottom-space
      />
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-input
        dense
        outlined
        class="inputgreen"
        label="ตัวชี้วัด"
        v-model="store.formAddProject.indicators"
        hide-bottom-space
      />
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-input
        dense
        outlined
        class="inputgreen"
        label="เป้าหมาย"
        v-model="store.formAddProject.target"
        hide-bottom-space
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.calculation"
        hide-bottom-space
        label="วิธีการคำนวณ/เครื่องมือ"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.measuRement"
        hide-bottom-space
        label="ระยะเวลาวัดผล"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.results"
        hide-bottom-space
        label="ผลการดำเนินการ"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.obstacles"
        hide-bottom-space
        label="ปัญหาอุปสรรค"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        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
        class="inputgreen"
      />
    </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>