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: "การฝึกศึกษา" },
// ]);

const projectTechniquesOp = ref<any[]>([
  { value: "TRAINING", label: "การอบรม" },
  { value: "MEETING", label: "การประชุม" },
  { value: "SEMINAR", label: "การสัมมนา" },
  { value: "STUDY_TOUR", label: "การศึกษาดูงาน" },
  { value: "ACADEMIC_SEMINAR", label: "การสัมมนาทางวิชาการ" },
  { value: "WORKSHOP", label: "การสัมมนาเชิงปฏิบัติการ" },
  { value: "SPECIAL_LECTURE", label: "การบรรยายพิเศษ" },
  { value: "STUDY_TRAINING", label: "การฝึกศึกษา" },
]);

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">
        <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-input
          dense
          outlined
          v-model="store.formAddProject.projectModal"
          label="จำนวน (รุ่น)"
          mask="#"
          reverse-fill-mask
        />
      </div>

      <div class="col-12"><q-separator class="q-my-md" /></div>

      <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>

      <div class="col-12 q-py-md">
        <q-label>เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
        <q-option-group
          keep-color
          color="primary"
          dense
          v-model="store.formAddProject.projectTechniques"
          :options="projectTechniquesOp"
          type="checkbox"
          inline
        />
      </div>

      <div class="row col-12 q-col-gutter-sm">
        <div class="col-12 col-sm-2">
          <q-checkbox
            keep-color
            color="primary"
            dense
            value="GO_BLACK"
            label="ไป-กลับ"
            v-model="store.formAddProject.projectCharacteristics"
          ></q-checkbox>
        </div>
        <div class="col-12 col-sm-3">
          <q-input
            dense
            outlined
            v-model="store.formAddProject.projectDay"
            label="จำนวน (วัน)"
            mask="#"
            reverse-fill-mask
          />
        </div>
      </div>
      <div class="row col-12 q-col-gutter-sm">
        <div class="col-12 col-sm-2">
          <q-checkbox
            keep-color
            color="primary"
            dense
            value="HOLD"
            label="พักค้าง"
            v-model="store.formAddProject.projectCharacteristics"
          ></q-checkbox>
        </div>
        <div class="col-12 col-sm-3">
          <q-input
            dense
            outlined
            v-model="store.formAddProject.projectDay"
            label="จำนวน (วัน)"
            mask="#"
            reverse-fill-mask
          />
        </div>
        <div class="col-12 col-sm-3">
          <q-input
            dense
            outlined
            v-model="store.formAddProject.projectNigth"
            label="จำนวน (คืน)"
            mask="#"
            reverse-fill-mask
          />
        </div>
      </div>

      <div class="col-12"><q-separator class="q-my-md" /></div>

      <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
      <div class="col-12 q-py-md">
        <q-label>เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
        <q-option-group
          keep-color
          color="primary"
          dense
          v-model="store.formAddProject.projectTechniques"
          :options="projectTechniquesOp"
          type="checkbox"
          inline
        />
      </div>

      <div class="row col-12 q-col-gutter-sm">
        <div class="col-12 col-sm-2">
          <q-checkbox
            keep-color
            color="primary"
            dense
            value="GO_BLACK"
            label="ไป-กลับ"
            v-model="store.formAddProject.projectCharacteristics"
          ></q-checkbox>
        </div>
        <div class="col-12 col-sm-3">
          <q-input
            dense
            outlined
            v-model="store.formAddProject.projectDay"
            label="จำนวน (วัน)"
            mask="#"
            reverse-fill-mask
          />
        </div>
      </div>
      <div class="row col-12 q-col-gutter-sm">
        <div class="col-12 col-sm-2">
          <q-checkbox
            keep-color
            color="primary"
            dense
            value="HOLD"
            label="พักค้าง"
            v-model="store.formAddProject.projectCharacteristics"
          ></q-checkbox>
        </div>
        <div class="col-12 col-sm-3">
          <q-input
            dense
            outlined
            v-model="store.formAddProject.projectDay"
            label="จำนวน (วัน)"
            mask="#"
            reverse-fill-mask
          />
        </div>
        <div class="col-12 col-sm-3">
          <q-input
            dense
            outlined
            v-model="store.formAddProject.projectNigth"
            label="จำนวน (คืน)"
            mask="#"
            reverse-fill-mask
          />
        </div>
      </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>