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

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

/** importComponents*/
import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น
import Target from "@/modules/15_development/components/Target.vue"; // เป้าหมาย
import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue"; // ลักษณะโครงการ
import Budget from "@/modules/15_development/components/Budget.vue"; // งบประมาณ
import Risk from "@/modules/15_development/components/Risk.vue"; //ความเสี่ยง
import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล
import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ
// import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล

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

/** use*/
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const store = useDevelopmentDataStore();
const { success, showLoader, hideLoader, messageError, dialogConfirm } =
  useCounterMixin();

const checkRoutePermission = ref<boolean>(
  route.name == "developmentDetailPage"
);
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const projectId = ref<string>(route.params.id.toLocaleString());
const tab = ref<string>("BasicInfo");
const status = ref<string>("ONGOING");
const step = ref<string[]>([
  "BasicInfo",
  "Target",
  "ProjectDetail",
  "Budget",
  "Risk",
  "FollowResult",
  "Other",
  "Result",
]);

function prevStep() {
  const index = step.value.indexOf(tab.value);
  if (index > 0) {
    tab.value = step.value[index - 1];
  }
}
function nextStep() {
  const index = step.value.indexOf(tab.value);
  if (index < step.value.length - 1) {
    tab.value = step.value[index + 1];
  }
}
/**
 * function fetch สถานะ Project
 * @param id projectId
 */
function getStatus(id: string) {
  showLoader();
  http
    .get(config.API.developmentMainStatus(id))
    .then((res) => {
      status.value = res.data.result.status;
      store.projectStatus = res.data.result.status;
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
  // .finally(() => {});
}

/** function ยืนยันการเสร็จสิ้นโครงการ*/
function onFinish(id: string) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .get(config.API.developmentMainFinish(id))
        .then(() => {
          getStatus(id);
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการเสร็จสิ้นโครงการ",
    "ต้องการยืนยันการเสร็จสิ้นโครงการนี้ใช่หรือไม่?"
  );
}

/** hooklifecycle*/
onMounted(() => {
  projectId.value && getStatus(projectId.value);
});

const isChangeData = ref<boolean>(false);
/**
 * function เช็คการแกไข้ข้อมูล
 */
function onCheckChangeData() {
  isChangeData.value = true;
}

const childBasicInfoRef = ref<InstanceType<typeof BasicInfo> | null>(null);
const childProjectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(
  null
);
const childBudgetRef = ref<InstanceType<typeof Budget> | null>(null);
const childRiskRef = ref<InstanceType<typeof Risk> | null>(null);
const childFollowResultRef = ref<InstanceType<typeof FollowResult> | null>(
  null
);
const childOtherRef = ref<InstanceType<typeof Other> | null>(null);

watch(tab, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
  if (isChangeData.value) {
    // เรียกใช้ฟังก์ชันของ component ลูก
    if (oldValue === "BasicInfo") {
      childBasicInfoRef.value?.onSubmit();
    } else if (oldValue === "ProjectDetail") {
      childProjectDetailRef.value?.onSubmit();
    } else if (oldValue === "Budget") {
      childBudgetRef.value?.onSubmit();
    } else if (oldValue === "Risk") {
      childRiskRef.value?.onSubmit();
    } else if (oldValue === "FollowResult") {
      childFollowResultRef.value?.onSubmit();
    } else if (oldValue === "Other") {
      childOtherRef.value?.onSubmit();
    }
  }
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      flat
      round
      dense
      class="q-mr-sm"
      icon="mdi-arrow-left"
      color="primary"
      @click="router.push('/development')"
    />
    {{
      checkRoutePermission
        ? "รายละเอียดโครงการ/หลักสูตรการฝึกอบรม"
        : `${title}โครงการ/หลักสูตรการฝึกอบรม`
    }}
    <q-space />
    <div v-if="!checkRoutePermission"></div>
    <q-btn
      v-if="status === 'ONGOING' && !checkRoutePermission"
      unelevated
      label="เสร็จสิ้นโครงการ"
      color="green"
      @click="onFinish(projectId)"
    >
      <q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
    </q-btn>
    <q-badge
      v-else-if="status !== 'ONGOING' || !checkRoutePermission"
      outline
      color="primary"
      class="q-px-sm q-py-xs"
      >เสร็จสิ้นโครงการ</q-badge
    >
  </div>

  <q-card flat bordered class="col-12">
    <q-tabs
      v-model="tab"
      dense
      align="left"
      inline-label
      class="rounded-borders"
      indicator-color="primary"
      active-bg-color="teal-1"
      active-class="text-primary"
    >
      <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
      <q-tab name="Target" label="เป้าหมาย" />
      <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
      <q-tab name="Budget" label="งบประมาณ" />
      <q-tab name="Risk" label="ความเสี่ยงและประโยชน์ที่จะได้รับ" />
      <q-tab name="FollowResult" label="การติดตามประเมินผล" />
      <q-tab name="Other" label="อื่นๆ" />
      <!-- v-if="status !== 'ONGOING'" -->
      <!-- <q-tab name="Record" label="บันทึกผล" /> -->
    </q-tabs>
    <q-separator />
    <div class="q-pa-sm" style="padding: 0px">
      <q-tab-panels v-model="tab" animated>
        <!-- ข้อมูลเบื้องต้น -->
        <q-tab-panel style="padding: 0px" name="BasicInfo">
          <BasicInfo
            ref="childBasicInfoRef"
            :next-step="nextStep"
            :onCheckChangeData="onCheckChangeData"
            v-model:isChangeData.value="isChangeData"
          />
        </q-tab-panel>

        <!-- เป้าหมาย -->
        <q-tab-panel name="Target">
          <Target :prev-step="prevStep" :next-step="nextStep" />
        </q-tab-panel>

        <!-- ลักษณะโครงการ -->
        <q-tab-panel name="ProjectDetail" style="padding: 0px">
          <ProjectDetail
            ref="childProjectDetailRef"
            :prev-step="prevStep"
            :next-step="nextStep"
            :onCheckChangeData="onCheckChangeData"
            v-model:isChangeData.value="isChangeData"
          />
        </q-tab-panel>

        <!-- งบประมาณ -->
        <q-tab-panel name="Budget" style="padding: 0px">
          <Budget
            ref="childBudgetRef"
            :status="status"
            :prev-step="prevStep"
            :next-step="nextStep"
            :onCheckChangeData="onCheckChangeData"
            v-model:isChangeData.value="isChangeData"
          />
        </q-tab-panel>

        <!-- ความเสี่ยงและประโยชน์ที่จะได้รับ -->
        <q-tab-panel name="Risk" style="padding: 0px">
          <Risk
            ref="childRiskRef"
            :prev-step="prevStep"
            :next-step="nextStep"
            :onCheckChangeData="onCheckChangeData"
            v-model:isChangeData.value="isChangeData"
          />
        </q-tab-panel>
        <q-tab-panel name="FollowResult" style="padding: 0px">
          <FollowResult
            ref="childFollowResultRef"
            :status="status"
            :prev-step="prevStep"
            :next-step="nextStep"
            :onCheckChangeData="onCheckChangeData"
            v-model:isChangeData.value="isChangeData"
          />
        </q-tab-panel>
        <q-tab-panel name="Other" style="padding: 0px">
          <Other
            ref="childOtherRef"
            :status="status"
            :prev-step="prevStep"
            :onCheckChangeData="onCheckChangeData"
            v-model:isChangeData.value="isChangeData"
          />
        </q-tab-panel>
        <!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
      </q-tab-panels>
    </div>
  </q-card>
</template>

<style scoped></style>