hrms-mgt/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue

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

import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";

import type {
  DataOptionTechnique,
  ProjectYearOp,
} from "@/modules/14_KPI/interface/index/Main";
import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const itemsDevelopment = uselistDevelopmentDataStore();
const { showLoader, hideLoader, messageError } = mixin;

/**
 * props
 */
const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true });
const props = defineProps({
  getAll: Function,
});

const development = ref<any[]>([]);
const reasonDevelopment70 = ref<string>("");
const reasonDevelopment20 = ref<string>("");
const reasonDevelopment10 = ref<string>("");
const checkOtherBox11 = computed<boolean>(() => {
  return development.value.includes("other1");
});
const checkOtherBox12 = computed<boolean>(() => {
  return development.value.includes("other2");
});
const checkOtherBox13 = computed<boolean>(() => {
  return development.value.includes("other3");
});

//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const projectTechniquesOp1 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment70
);
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const projectTechniquesOp2 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment20
);
//10 การฝึกอบรมอื่นๆ
const projectTechniquesOp3 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment10
);

const choice = ref<string>("MANUAL");
const projectName = ref<any>("");
const projectOp = ref<ProjectYearOp[]>([]);
const projectOpMain = ref<ProjectYearOp[]>([]);
const choiceOp = ref<DataOptionTechnique[]>([
  { value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
  { value: "MANUAL", label: "กรอกเอง" },
]);

const emType = computed(() => {
  return route.name
    ? route.name === "registryNewByid"
      ? "officer"
      : route.name === "registry-employeeId"
      ? "temp"
      : "employee"
    : "";
});

const formData = reactive<{
  year: number | null;
  point: number | null;
  name: string;
  group: any[];
  target: string;
  isDevelopment70: boolean;
  isDevelopment20: boolean;
  isDevelopment10: boolean;
  achievement10: string;
  achievement5: string;
  achievement0: string;
}>({
  year: null,
  name: "",
  group: [],
  point: 0,
  target: "",
  isDevelopment70: false,
  isDevelopment20: false,
  isDevelopment10: false,
  achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
  achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
  achievement0: "ไม่ได้ดำเนินการพัฒนา",
});
function close() {
  modal.value = false;
  id.value = "";

  formData.name = "";
  formData.point = 0;
  formData.group = [];
  formData.target = "";
  formData.isDevelopment70 = false;
  formData.isDevelopment20 = false;
  formData.isDevelopment10 = false;
  formData.achievement10 =
    "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
  formData.achievement5 =
    "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
  formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
  choice.value = "MANUAL";
  formData.year = null;
  projectName.value = "";
  reasonDevelopment70.value = "";
  reasonDevelopment20.value = "";
  reasonDevelopment10.value = "";
  development.value = [];

  props.getAll?.();

  id.value = "";
}

const customPosition = () => ({ top: "385px", left: "410px" });
async function getDataByYear() {
  if (formData.year) {
    showLoader();
    http
      .get(config.API.developmentMain + `/done?year=${formData.year}`)
      .then(async (res) => {
        const data = await res.data.result.data;
        projectOpMain.value = data;
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

function getProjectDetail(val: any) {
  showLoader();
  http
    .get(config.API.developmentMain + `/tab3_1/${val.id}`)
    .then((res) => {
      const data = res.data.result;
      formData.name = val.projectName;
      formData.group = data.group;
      formData.isDevelopment70 = data.isDevelopment70;
      formData.isDevelopment20 = data.isDevelopment20;
      formData.isDevelopment10 = data.isDevelopment10;

      development.value = data.developmentProjectTechniqueActuals;
      reasonDevelopment70.value =
        data.developmentProjectTechniqueActuals.includes("other1")
          ? data.reasonDevelopment70
          : "";
      reasonDevelopment20.value =
        data.developmentProjectTechniqueActuals.includes("other2")
          ? data.reasonDevelopment20
          : "";
      reasonDevelopment10.value =
        data.developmentProjectTechniqueActuals.includes("other3")
          ? data.reasonDevelopment10
          : "";
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
 * @param update function
 */
function filterOptionFn(val: string, update: Function) {
  projectName.value = "";
  update(() => {
    projectOp.value = projectOpMain.value.filter(
      (e: any) => e.projectName.search(val) !== -1
    );
  });
}

watch(
  () => id.value,
  (i) => {
    if (i) {
      showLoader();
      http
        .get(
          config.API.kpiAchievementDevelop +
            `/registry/${emType.value}/${id.value}`
        )
        .then(async (res) => {
          const data = res.data.result;
          formData.year = data.selectTypeYear;
          await getDataByYear();
          setTimeout(() => {
            choice.value = data.selectType;
            projectName.value = projectOpMain.value.find(
              (i: any) => i.id == data.selectTypeId
            );
            formData.name = data.name;
            formData.group = data.group;
            formData.target = data.target;
            formData.isDevelopment70 = data.isDevelopment70;
            formData.isDevelopment20 = data.isDevelopment20;
            formData.isDevelopment10 = data.isDevelopment10;
            formData.achievement10 = data.achievement10;
            formData.achievement5 = data.achievement5;
            formData.achievement0 = data.achievement0;
            development.value = data.developmentProjects;
            reasonDevelopment70.value = data.developmentProjects.includes(
              "other1"
            )
              ? data.reasonDevelopment70
              : "";
            reasonDevelopment20.value = data.developmentProjects.includes(
              "other2"
            )
              ? data.reasonDevelopment20
              : "";
            reasonDevelopment10.value = data.developmentProjects.includes(
              "other3"
            )
              ? data.reasonDevelopment10
              : "";
          }, 500);
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    }
  }
);
</script>

<template>
  <q-dialog persistent v-model="modal">
    <q-card style="min-width: 90vw">
      <DialogHeader
        tittle="การพัฒนารายบุคคล (Individual Development Plan)"
        :close="close"
      />
      <q-separator />
      <q-card-section>
        <div class="row q-col-gutter-sm">
          <div class="col-3">
            <q-select
              outlined
              dense
              label="ตัวเลือก"
              :options="choiceOp"
              emit-value
              readonly
              map-options
              option-label="label"
              option-value="value"
              v-model="choice"
            >
            </q-select>
          </div>
          <div class="col-3" v-if="choice == 'PROJECT'">
            <datepicker
              menu-class-name="modalfix"
              v-model="formData.year"
              readonly
              :locale="'th'"
              autoApply
              position="center"
              year-picker
              :alt-position="customPosition"
              :enableTimePicker="false"
              @update:model-value="getDataByYear(), (projectName = '')"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  dense
                  readonly
                  outlined
                  hide-bottom-space
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
                  :model-value="
                    formData.year === null ? null : Number(formData.year) + 543
                  "
                  :label="`${'ปีงบประมาณ'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-3" v-if="choice == 'PROJECT'">
            <q-select
              outlined
              dense
              :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
              label="โครงการ/หลักสูตรการฝึกอบรม"
              :options="projectOp"
              option-label="projectName"
              option-value="id"
              map-options
              hide-bottom-space
              use-input
              :readonly="!formData.year"
              v-model="projectName"
              @update:model-value="getProjectDetail(projectName)"
              @filter="filterOptionFn"
            >
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="col-12">
            <q-input
              v-model="formData.name"
              readonly
              outlined
              dense
              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`,]"
              lazy-rules
              hide-bottom-space
              class="inputgreen"
              label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
            >
            </q-input>
          </div>
          <div class="col-12">
            <span class="text-weight-medium">วิธีการพัฒนา</span>
          </div>
          <div class="row q-col-gutter-md full-width">
            <div class="col-12 col-sm-6 col-md-6 col-lg-4">
              <span class="text-weight-medium"
                >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
              >
              <q-option-group
                class="check_box q-mt-sm"
                keep-color
                color="primary"
                dense
                disable
                v-model="development"
                :options="projectTechniquesOp1"
                type="checkbox"
              />
              <div class="row q-pb-md" v-if="checkOtherBox11">
                <div class="offset-4 col-8 q-mt-sm relative-position">
                  <div class="other_custom_input">
                    <q-input
                      v-model="reasonDevelopment70"
                      dense
                      readonly
                      outlined
                      class="inputgreen"
                      label="กรุณาระบุ"
                    ></q-input>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-4">
              <span class="text-weight-medium"
                >20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
              >
              <q-option-group
                class="check_box q-mt-sm"
                keep-color
                color="primary"
                dense
                v-model="development"
                disable
                :options="projectTechniquesOp2"
                type="checkbox"
              />
              <div class="row q-pb-md" v-if="checkOtherBox12">
                <div class="offset-4 col-8 q-mt-sm relative-position">
                  <div class="other_custom_input">
                    <q-input
                      v-model="reasonDevelopment20"
                      dense
                      readonly
                      outlined
                      class="inputgreen"
                      label="กรุณาระบุ"
                    ></q-input>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-4">
              <span class="text-weight-medium">10 การฝึกอบรมอื่นๆ</span>
              <q-option-group
                class="check_box q-mt-sm"
                keep-color
                color="primary"
                disable
                dense
                v-model="development"
                :options="projectTechniquesOp3"
                type="checkbox"
              />
              <div class="row q-pb-md" v-if="checkOtherBox13">
                <div class="offset-4 col-8 q-mt-sm relative-position">
                  <div class="other_custom_input">
                    <q-input
                      v-model="reasonDevelopment10"
                      dense
                      outlined
                      readonly
                      class="inputgreen"
                      label="กรุณาระบุ"
                    ></q-input>
                  </div>
                </div>
              </div>
            </div>

            <!-- <q-checkbox
                v-model="formData.isDevelopment70"
                label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
              />
              <q-checkbox
                v-model="formData.isDevelopment20"
                label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
              />
              <q-checkbox
                v-model="formData.isDevelopment10"
                label="10 การฝึกอบรมอื่นๆ"
              /> -->
          </div>
          <div class="col-12">
            <q-input
              label="เป้าหมายการนำไปพัฒนางาน"
              v-model="formData.target"
              outlined
              readonly
              type="textarea"
              dense
              :rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
              lazy-rules
              hide-bottom-space
            ></q-input>
          </div>
          <div class="col-12">
            <q-card bordered>
              <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
                <div class="col-4 text-center">
                  <span>ระดับคะแนน</span>
                </div>
                <div class="col-8 text-start">
                  <span>เกณฑ์การประเมิน</span>
                </div>
              </div>
              <div class="row q-pa-sm">
                <div class="col-4 text-center self-start text-body1">
                  <span>10</span>
                </div>
                <div class="col-8">
                  <q-input
                    
                    v-model="formData.achievement10"
                    outlined
                    readonly
                    dense
                    label="เกณฑ์การประเมิน"
                    :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
                    lazy-rules
                    hide-bottom-space
                  ></q-input>
                </div>
              </div>
              <q-separator />
              <div class="row q-pa-sm bg-grey-2">
                <div class="col-4 text-center self-start text-body1">
                  <span>5</span>
                </div>
                <div class="col-8">
                  <q-input
               
                    v-model="formData.achievement5"
                    outlined
                    readonly
                    dense
                    label="เกณฑ์การประเมิน"
                    :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
                    lazy-rules
                    hide-bottom-space
                  ></q-input>
                </div>
              </div>
              <q-separator />
              <div class="row q-pa-sm">
                <div class="col-4 text-center self-start text-body1">
                  <span>0</span>
                </div>
                <div class="col-8">
                  <q-input
                    v-model="formData.achievement0"
                    outlined
                    readonly
                    dense
                    label="เกณฑ์การประเมิน"
                    :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
                    lazy-rules
                    hide-bottom-space
                  ></q-input>
                </div>
              </div>
            </q-card>
          </div>
        </div>
        <div class="row q-pa-sm justify-center">
          <span class="text-body2 text-weight-bold">ผลการพัฒนา </span>
          <div class="text-primary q-pl-md">
            {{ formData.point }}
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
<style scoped>
:deep(.check_box .q-checkbox) {
  align-items: start;
}

.other_custom_input {
  position: absolute;
  top: -25px;
  width: 100%;
}
</style>