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

<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

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

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

const $q = useQuasar();
const store = useDevelopmentDataStore();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();

const projectTypeOp = ref<DataOption[]>([
  { id: "STRATEGIC_PROJECT", name: "โครงการตามยุทธศาสตร์" },
  { id: "MISSION_PROJECT", name: "โครงการตามภารกิจประจำของหน่วยงาน" },
  { id: "NEW_PROJECT", name: "โครงการใหม่" },
  { id: "ONGOING_PROJEC", name: "โครงการต่อเนื่อง" },
]);
const projectCharacteristicsOp = ref<DataOption[]>([
  { id: "GO_BACK", name: "ไป-กลับ" },
  { id: "HOLD", name: "พักค้าง" },
  { id: "GO_BACK_HOLD", name: "ไป-กลับและพักค้าง" },
]);
const projectTechniquesOp = ref<DataOption[]>([
  { id: "TRAINING", name: "การอบรม" },
  { id: "MEETING", name: "การประชุม" },
  { id: "SEMINAR", name: "การสัมมนา" },
  { id: "STUDY_TOUR", name: "การศึกษาดูงาน" },
  { id: "ACADEMIC_SEMINAR", name: "การสัมมนาทางวิชาการ" },
  { id: "WORKSHOP", name: "การสัมมนาเชิงปฏิบัติการ" },
  { id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" },
  { id: "STUDY_TRAINING", name: "การฝึกศึกษา" },
]);

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    // post
    console.log("projectId===>", projectId.value);
    hideLoader();
  });
}
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <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 !== 'GO_BACK'"
          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>
    <q-separator />
    <div class="text-right q-pa-sm">
      <q-btn
        dense
        unelevated
        label="บันทึก"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-px-md"
      >
        <q-tooltip>บันทึกข้อมูล</q-tooltip>
      </q-btn>
    </div>
  </q-form>
</template>

<style scoped></style>