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

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

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

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

const store = useDevelopmentDataStore();

const projectTypeOp = ref<DataOption[]>([
  { id: "1", name: "โครงการตามยุทธศาสตร์" },
  { id: "2", name: "โครงการตามภารกิจประจำของหน่วยงาน" },
  { id: "3", name: "โครงการใหม่" },
  { id: "4", name: "โครงการต่อเนื่อง" },
]);
const projectCharacteristicsOp = ref<DataOption[]>([
  { id: "1", name: "ไป-กลับ" },
  { id: "2", name: "พักค้าง" },
  { id: "3", name: "ไป-กลับและพักค้าง" },
]);
const projectTechniquesOp = ref<DataOption[]>([
  { id: "1", name: "การอบรม" },
  { id: "2", name: "การประชุม" },
  { id: "3", name: "การสัมมนา" },
  { id: "4", name: "การศึกษาดูงาน" },
  { id: "5", name: "การสัมมนาทางวิชาการ" },
  { id: "6", name: "การสัมมนาเชิงปฏิบัติการ" },
  { id: "7", name: "การบรรยายพิเศษ" },
  { id: "8", name: "การฝึกศึกษา" },
]);

onMounted(() => {
  console.log("ลักษณะโครงการ");
});
</script>
<template>
  <div class="row q-pa-md q-col-gutter-sm">
    <div class="col-12 col-sm-12 col-md-4">
      <q-select
        dense
        outlined
        v-model="store.formAddProject.projectType"
        :options="projectTypeOp"
        label="ประเภทโครงการ"
        option-label="name"
        option-value="id"
        emit-value
        map-options
      />
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-select
        dense
        outlined
        v-model="store.formAddProject.projectCharacteristics"
        :options="projectCharacteristicsOp"
        label="ลักษณะ"
        option-label="name"
        option-value="id"
        emit-value
        map-options
      />
    </div>
    <div class="col-12 col-sm-6 col-md-2">
      <q-input
        dense
        outlined
        v-model="store.formAddProject.projectDay"
        label="จำนวน (วัน)"
        mask="#"
        reverse-fill-mask
      />
    </div>
    <div class="col-12 col-sm-6 col-md-2">
      <q-input
        v-if="store.formAddProject.projectCharacteristics !== '1'"
        dense
        outlined
        v-model="store.formAddProject.projectNigth"
        label="จำนวน (คืน)"
        mask="#"
        reverse-fill-mask
      />
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-select
        dense
        outlined
        v-model="store.formAddProject.projectTechniques"
        :options="projectTechniquesOp"
        label="เทคนิควิธีการที่ใช้ในการพัฒนา"
        option-label="name"
        option-value="id"
        emit-value
        map-options
      />
    </div>
    <div class="col-12 col-sm-6 col-md-2">
      <q-input
        dense
        outlined
        v-model="store.formAddProject.projectModal"
        label="จำนวน (รุ่น)"
        mask="#"
        reverse-fill-mask
      />
    </div>
  </div>
</template>

<style scoped></style>