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

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

/**importType*/
import type {
  DataOptionTechnique,
  FormProjectDetail,
  DataOption,
} from "@/modules/15_development/interface/index/Main";
import type { DataStrategic } from "@/modules/15_development/interface/response/Main";

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

import http from "@/plugins/http";
import config from "@/app.config";

const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({
  prevStep: { type: Function, required: true },
  nextStep: { type: Function, required: true },
  onCheckChangeData: { type: Function, required: true },
});

const step = ref<string>("");
const reasonPlanned70 = ref<string>("");
const reasonPlanned20 = ref<string>("");
const reasonPlanned10 = ref<string>("");
const reasonActual70 = ref<string>("");
const reasonActual20 = ref<string>("");
const reasonActual10 = ref<string>("");

const checkOtherBox11 = computed<boolean>(() => {
  return formData.developmentProjectTechniquePlanneds.includes("other1");
});
const checkOtherBox12 = computed<boolean>(() => {
  return formData.developmentProjectTechniquePlanneds.includes("other2");
});
const checkOtherBox13 = computed<boolean>(() => {
  return formData.developmentProjectTechniquePlanneds.includes("other3");
});

const checkOtherBox21 = computed<boolean>(() => {
  return formData.developmentProjectTechniqueActuals.includes("other1");
});
const checkOtherBox22 = computed<boolean>(() => {
  return formData.developmentProjectTechniqueActuals.includes("other2");
});
const checkOtherBox23 = computed<boolean>(() => {
  return formData.developmentProjectTechniqueActuals.includes("other3");
});

const $q = useQuasar();
const store = useDevelopmentDataStore();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const { showLoader, hideLoader, messageError, date2Thai, diffDay } =
  useCounterMixin();
const checkRoutePermission = ref<boolean>(
  route.name == "developmentDetailPage"
);
const projectTypeOp = ref<any[]>([
  { label: "โครงการตามยุทธศาสตร์", value: "โครงการตามยุทธศาสตร์" },
  {
    label: "โครงการตามภารกิจประจำของหน่วยงาน",
    value: "โครงการตามภารกิจประจำของหน่วยงาน",
  },
  { label: "โครงการใหม่", value: "โครงการใหม่" },
  { label: "โครงการต่อเนื่อง", value: "โครงการต่อเนื่อง" },
]);

/** option */
const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
  {
    value: "on_the_job_training",
    label: "การฝึกปฏิบัติในงาน (On the job training)",
  },
  {
    value: "job_project_assignment",
    label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
  },
  {
    value: "job_shadowing",
    label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
  },
  {
    value: "job_enlargement",
    label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
  },
  {
    value: "internal_trainer",
    label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
  },
  {
    value: "rotation",
    label: "การหมุนเวียนงาน (Rotation)",
  },
  {
    value: "activity",
    label: "การทำกิจกรรม (Activity)",
  },
  {
    value: "site_visit",
    label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
  },
  {
    value: "benchmarking",
    label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
  },
  {
    value: "problem_solving",
    label: "การแก้ปัญหา (Problem-solving)",
  },
  {
    value: "team_working",
    label: "การทำงานเป็นทีม (Team working)",
  },
  {
    value: "other1",
    label: "อื่น ๆ (ระบุ)",
  },
]);

const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
  { value: "coaching", label: "การสอนงาน (Coaching)" },
  { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
  { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
  { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
  { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
  { value: "other2", label: "อื่น ๆ (ระบุ)" },
]);

const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
  {
    value: "self_learning",
    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
  },
  { value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
  {
    value: "in_house_training",
    label: "การฝึกอบรมภายในองค์กร (In – house training)",
  },
  {
    value: "public_training",
    label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
  },
  {
    value: "e_training",
    label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
  },
  { value: "meeting", label: "การประชุม (Meeting)" },
  { value: "seminar", label: "การสัมมนา (Seminar)" },
  { value: "other3", label: "อื่น ๆ (ระบุ)" },
]);

const formData = reactive<FormProjectDetail>({
  developmentProjectTypes: [],
  projectModal: null,
  isBackPlanned: false,
  isHoldPlanned: false,
  projectDayBackPlanned: null,
  projectDayHoldPlanned: null,
  projectNigthHoldPlanned: null,
  developmentProjectTechniquePlanneds: [],
  isBackActual: false,
  isHoldActual: false,
  projectDayBackActual: null,
  projectDayHoldActual: null,
  projectNigthHoldActual: null,
  developmentProjectTechniqueActuals: [],
  projectModalActual: null,
  projectModalPlanned: null,
  strategyChildPlannedId: null, //id ยุทธศาสตร์เป้าหมายตามแผน
  strategyChildPlannedNode: 0, //node ยุทธศาสตร์เป้าหมายตามแผน
  strategyChildActualId: null, //id ยุทธศาสตร์เป้าหมายตามจริง
  strategyChildActualNode: 0, //node ยุทธศาสตร์เป้าหมายตามจริง
  dateStart: null, //วันที่เริ่มต้น
  dateEnd: null, //วันที่สิ้นสุด
  totalDate: null, //รวมระยะเวลา (วัน)
  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
});

const nodes = ref<any>([]);
const filter = ref<string>("");
const filter2 = ref<string>("");
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
const expanded = ref<Array<string | null>>([]);
const expanded2 = ref<Array<string | null>>([]);

/**
 * ดึงข้อมูล จังหวัด
 */
function fetchProvince() {
  http
    .get(config.API.province)
    .then((res) => {
      const data = res.data.result;
      provinceOp.value = data.map((item: DataOption) => ({
        id: item.id,
        name: item.name,
      }));
      provinceOpMain.value = provinceOp.value;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/** ดึงข้อมูลทั้งหมด */
function fetchData() {
  showLoader();
  http
    .get(config.API.developmentMainTab("tab3", projectId.value))
    .then((res) => {
      const data = res.data.result;
      formData.developmentProjectTypes = data.developmentProjectTypes;
      formData.projectModal = data.projectModal;
      formData.isBackPlanned = data.isBackPlanned;
      formData.isHoldPlanned = data.isHoldPlanned;
      formData.projectDayBackPlanned = data.projectDayBackPlanned;
      formData.projectDayHoldPlanned = data.projectDayHoldPlanned;
      formData.projectNigthHoldPlanned = data.projectNigthHoldPlanned;
      formData.developmentProjectTechniquePlanneds =
        data.developmentProjectTechniquePlanneds;
      formData.isBackActual = data.isBackActual;
      formData.isHoldActual = data.isHoldActual;
      formData.projectDayBackActual = data.projectDayBackActual;
      formData.projectDayHoldActual = data.projectDayHoldActual;
      formData.projectNigthHoldActual = data.projectNigthHoldActual;
      formData.developmentProjectTechniqueActuals =
        data.developmentProjectTechniqueActuals;
      formData.projectModalPlanned = data.projectModalPlanned;
      formData.projectModalActual = data.projectModalActual;
      formData.dateStart = data.dateStart;
      formData.dateEnd = data.dateEnd;
      formData.totalDate = data.totalDate;
      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
        address: e.address,
        provinceId: e.provinceId,
      }));

      const arrayExpanded = [
        data.strategyChild1Planned,
        data.strategyChild2Planned,
        data.strategyChild3Planned,
        data.strategyChild4Planned,
        data.strategyChild5Planned,
      ];

      const arrayExpanded2 = [
        data.strategyChild1Actual,
        data.strategyChild2Actual,
        data.strategyChild3Actual,
        data.strategyChild4Actual,
        data.strategyChild5Actual,
      ];

      const filteredArray = arrayExpanded.filter((item) => item !== null);
      const filteredArray2 = arrayExpanded2.filter((item) => item !== null);
      const lastItem = filteredArray[filteredArray.length - 1];
      const lastItem2 = filteredArray2[filteredArray2.length - 1];

      formData.strategyChildPlannedId =
        lastItem !== undefined ? lastItem : null;
      formData.strategyChildPlannedNode =
        lastItem !== undefined ? filteredArray.length : null;
      formData.strategyChildActualId =
        lastItem2 !== undefined ? lastItem2 : null;
      formData.strategyChildActualNode =
        lastItem2 !== undefined ? filteredArray2.length : null;

      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
      expanded2.value = arrayExpanded2.filter((e) => e !== null).slice(0, -1);
      reasonPlanned70.value = data.reasonPlanned70 ? data.reasonPlanned70 : "";
      reasonPlanned20.value = data.reasonPlanned20 ? data.reasonPlanned20 : "";
      reasonPlanned10.value = data.reasonPlanned10 ? data.reasonPlanned10 : "";
      reasonActual70.value = data.reasonActual70 ? data.reasonActual70 : "";
      reasonActual20.value = data.reasonActual20 ? data.reasonActual20 : "";
      reasonActual10.value = data.reasonActual10 ? data.reasonActual10 : "";
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

/** ดึงข้อมูล ยุทธศาสตร์/แผน */
function fetchTree() {
  showLoader();
  http
    .get(config.API.devStrategy)
    .then((res) => {
      const data = res.data.result;
      nodes.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

/** Main save */
function onSubmit() {
  showLoader();
  http
    .put(config.API.developmentMainTab("tab3", projectId.value), {
      ...formData,
      reasonPlanned70: reasonPlanned70.value,
      reasonPlanned20: reasonPlanned20.value,
      reasonPlanned10: reasonPlanned10.value,
      reasonActual70: reasonActual70.value,
      reasonActual20: reasonActual20.value,
      reasonActual10: reasonActual10.value,
    })
    .then(() => {})
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    })
    .finally(() => {
      isChangeData.value = false;
    });
}

/**
 * update data
 * @param data ข้อมูลยุทธศาสตร์/แผน
 * @param type 1/2 เพื่อเเยก ยุทธศาสตร์1 ยุทธศาสตร์2
 */
function updateSelected(data: DataStrategic, type: string) {
  if (type === "1") {
    formData.strategyChildPlannedId = data.id;
    formData.strategyChildPlannedNode = data.level;
  } else if (type === "2") {
    formData.strategyChildActualId = data.id;
    formData.strategyChildActualNode = data.level;
  }
}

const provinceOp = ref<DataOption[]>([]);
const provinceOpMain = ref<DataOption[]>([]);

/** เพิ่มข้อมูลสถานที่ดำเนินการ */
function onClickAddLocation() {
  const data = {
    address: "",
    provinceId: "",
  };
  formData.developmentAddresss.push(data);
}

/** ลบข้อมูล */
function onClickDeleteLocation(index: number) {
  formData.developmentAddresss.splice(index, 1);
}

/**
 * Fuction Filter จังหวัด
 * @param val ค่าตัวพิมพ์ค้นหา
 * @param update ทุกครั้งที่พิมพ์ค่า
 */
const filterSelector = (val: string, update: Function) => {
  update(() => {
    provinceOp.value = provinceOpMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
};

watch(
  () => [formData.dateStart, formData.dateEnd],
  () => {
    if (formData.dateStart && formData.dateEnd) {
      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
    }
  }
);

/**
 * function ไปยัง Tab ค่อไป
 */
function onNextTab() {
  step.value == "next" ? props.nextStep() : props.prevStep();
}
/**
 * ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์
 */
onMounted(async () => {
  fetchProvince();
  fetchData();
  fetchTree();
});

/**
 * เรียก function ไปใช่หน้าหลัก
 */
defineExpose({
  onSubmit,
});
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onNextTab">
    <div class="row q-pa-sm">
      <div class="col-12">
        <div class="col-12 text-bold">ประเภทโครงการ</div>
        <q-option-group
          :disable="checkRoutePermission"
          :options="projectTypeOp"
          type="checkbox"
          v-model="formData.developmentProjectTypes"
          color="primary"
          keep-color
          @update:model-value="props.onCheckChangeData()"
        />
      </div>

      <!-- ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน -->
      <q-card bordered class="col-12 q-my-sm">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
        >
          ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน
        </div>
        <q-separator />

        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-6">
              <q-card bordered class="col-12">
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
                >
                  ยุทธศาสตร์/แผน
                </div>
                <q-separator />

                <q-card-section class="q-pa-sm">
                  <q-input
                    :readonly="checkRoutePermission"
                    dense
                    outlined
                    v-model="filter"
                    label="ค้นหา"
                    class="inputgreen"
                  >
                    <template v-slot:append>
                      <q-icon
                        v-if="filter !== ''"
                        name="clear"
                        class="cursor-pointer"
                        @click="filter = ''"
                      />
                      <q-icon v-else name="search" color="grey-5" />
                    </template>
                  </q-input>
                  <q-tree
                    dense
                    :nodes="nodes"
                    selected-color="primary"
                    node-key="id"
                    label-key="name"
                    :filter="filter"
                    :no-results-label="notFound"
                    :no-nodes-label="noData"
                    v-model:expanded="expanded"
                    :style="checkRoutePermission ? 'pointer-events: none;' : ''"
                  >
                    <template v-slot:default-header="prop">
                      <q-item
                        clickable
                        @click.stop="
                          updateSelected(prop.node, '1'),
                            props.onCheckChangeData()
                        "
                        :active="
                          formData.strategyChildPlannedId == prop.node.id
                        "
                        active-class="my-list-link text-primary text-weight-medium"
                        class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                      >
                        <div>
                          <div class="text-weight-medium">
                            {{ prop.node.name }}
                          </div>
                        </div>
                      </q-item>
                    </template>
                  </q-tree>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-6">
              <q-card bordered class="col-12">
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
                >
                  ยุทธศาสตร์/แผน
                </div>
                <q-separator />

                <q-card-section class="q-pa-sm">
                  <q-input
                    :readonly="checkRoutePermission"
                    dense
                    outlined
                    v-model="filter2"
                    label="ค้นหา"
                    class="inputgreen"
                  >
                    <template v-slot:append>
                      <q-icon
                        v-if="filter2 !== ''"
                        name="clear"
                        class="cursor-pointer"
                        @click="filter2 = ''"
                      />
                      <q-icon v-else name="search" color="grey-5" />
                    </template>
                  </q-input>
                  <q-tree
                    dense
                    :nodes="nodes"
                    node-key="id"
                    label-key="name"
                    :filter="filter2"
                    :no-results-label="notFound"
                    :no-nodes-label="noData"
                    v-model:expanded="expanded2"
                    :style="checkRoutePermission ? 'pointer-events: none;' : ''"
                  >
                    <template v-slot:default-header="prop">
                      <q-item
                        clickable
                        @click.stop="
                          updateSelected(prop.node, '2'),
                            props.onCheckChangeData()
                        "
                        :active="formData.strategyChildActualId == prop.node.id"
                        active-class="my-list-link text-primary text-weight-medium"
                        class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                      >
                        <div>
                          <div class="text-weight-medium">
                            {{ prop.node.name }}
                          </div>
                        </div>
                      </q-item>
                    </template>
                  </q-tree>
                </q-card-section>
              </q-card>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- เวลาและสถานที่ดำเนินการ -->
      <q-card bordered class="col-12 q-my-sm">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
        >
          เวลาและสถานที่ดำเนินการ
        </div>
        <q-separator />
        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-12 text-bold">ระยะเวลาดำเนินการ</div>
            <div class="row col-12 q-col-gutter-sm">
              <div class="col-12 col-sm-6 col-md-3">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="formData.dateStart"
                  :locale="'th'"
                  autoApply
                  :readonly="checkRoutePermission"
                  :enableTimePicker="false"
                  week-start="0"
                  :max-date="formData.dateEnd"
                  @update:model-value="props.onCheckChangeData()"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      class="inputgreen"
                      dense
                      :readonly="checkRoutePermission"
                      outlined
                      :model-value="
                        formData.dateStart
                          ? date2Thai(formData.dateStart)
                          : null
                      "
                      :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-12 col-sm-6 col-md-3">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="formData.dateEnd"
                  :locale="'th'"
                  :readonly="checkRoutePermission"
                  autoApply
                  :enableTimePicker="false"
                  week-start="0"
                  :min-date="formData.dateStart"
                  @update:model-value="props.onCheckChangeData()"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      :readonly="checkRoutePermission"
                      outlined
                      class="inputgreen"
                      :model-value="
                        formData.dateEnd ? date2Thai(formData.dateEnd) : null
                      "
                      :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-12 col-sm-6 col-md-3">
                <q-input
                  dense
                  :readonly="checkRoutePermission"
                  outlined
                  class="inputgreen"
                  label="รวมระยะเวลา (วัน)"
                  v-model="formData.totalDate"
                  mask="#"
                  reverse-fill-mask
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
            </div>

            <div class="col-12 q-mt-md">
              <span class="text-bold">สถานที่ดำเนินการ</span>
              <q-btn
                v-if="!checkRoutePermission"
                dense
                flat
                round
                color="primary"
                icon="add"
                @click="onClickAddLocation"
              >
                <q-tooltip>เพิ่มสถานที่ดำเนินการ</q-tooltip>
              </q-btn>
            </div>

            <div
              class="col-12"
              v-for="(item, index) in formData.developmentAddresss"
            >
              <div class="row q-col-gutter-sm">
                <div class="col-8">
                  <q-input
                    :readonly="checkRoutePermission"
                    outlined
                    dense
                    class="inputgreen"
                    v-model="formData.developmentAddresss[index].address"
                    label="ชื่อสถานที่"
                    @update:model-value="props.onCheckChangeData()"
                  />
                </div>
                <div class="col-3">
                  <q-select
                    :readonly="checkRoutePermission"
                    outlined
                    dense
                    v-model="formData.developmentAddresss[index].provinceId"
                    label="จังหวัด"
                    :options="provinceOp"
                    option-label="name"
                    option-value="id"
                    emit-value
                    map-options
                    class="inputgreen"
                    use-input
                    @update:model-value="props.onCheckChangeData()"
                    @filter="
                  (inputValue:string, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, )
                    
                "
                  >
                    <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-1 text-center">
                  <q-btn
                    v-if="index !== 0 && !checkRoutePermission"
                    dense
                    flat
                    round
                    color="red"
                    icon="delete"
                    @click="
                      onClickDeleteLocation(index), props.onCheckChangeData()
                    "
                  >
                    <q-tooltip>ลบ</q-tooltip></q-btn
                  >
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- รูปแบบโครงการ -->
      <q-card bordered class="col-12 q-my-sm">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
        >
          รูปแบบโครงการ
        </div>
        <q-separator />

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

            <div class="row col-12 q-col-gutter-sm">
              <div class="col-12 col-md-3">
                <q-checkbox
                  :disable="
                    store.projectStatus === 'FINISH' || checkRoutePermission
                  "
                  keep-color
                  color="primary"
                  dense
                  value="GO_BLACK"
                  label="ไป-กลับ"
                  v-model="formData.isBackPlanned"
                  @update:model-value="props.onCheckChangeData()"
                ></q-checkbox>
              </div>
              <div class="col-12 col-md-4">
                <q-input
                  :readonly="
                    store.projectStatus === 'FINISH' || checkRoutePermission
                  "
                  dense
                  outlined
                  v-model="formData.projectDayBackPlanned"
                  label="จำนวน (วัน)"
                  mask="#"
                  reverse-fill-mask
                  class="inputgreen"
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
            </div>
            <div class="row col-12 q-col-gutter-sm">
              <div class="col-12 col-md-3">
                <q-checkbox
                  :disable="
                    store.projectStatus === 'FINISH' || checkRoutePermission
                  "
                  keep-color
                  color="primary"
                  dense
                  value="HOLD"
                  label="พักค้าง"
                  v-model="formData.isHoldPlanned"
                  @update:model-value="props.onCheckChangeData()"
                ></q-checkbox>
              </div>
              <div class="col-12 col-md-4">
                <q-input
                  :readonly="
                    store.projectStatus === 'FINISH' || checkRoutePermission
                  "
                  dense
                  outlined
                  v-model="formData.projectDayHoldPlanned"
                  label="จำนวน (วัน)"
                  mask="#"
                  reverse-fill-mask
                  class="inputgreen"
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
              <div class="col-12 col-md-4">
                <q-input
                  :readonly="
                    store.projectStatus === 'FINISH' || checkRoutePermission
                  "
                  dense
                  outlined
                  v-model="formData.projectNigthHoldPlanned"
                  label="จำนวน (คืน)"
                  mask="#"
                  class="inputgreen"
                  reverse-fill-mask
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
            </div>
            <div class="col-12 q-py-md">
              <div class="row q-col-gutter-md">
                <div class="col-12">
                  <q-label class="text-bold"
                    >เทคนิควิธีการที่ใช้ในการพัฒนา</q-label
                  >
                </div>
                <div class="col-12 col-sm-6 col-md-4 align-top">
                  <q-label class="q-mb-sm text-weight-medium text-body2"
                    >การเรียนรู้และการพัฒนาจากการลงมือทำ (70)</q-label
                  >
                  <q-option-group
                    class="check_box q-mt-sm"
                    :disable="
                      store.projectStatus === 'FINISH' || checkRoutePermission
                    "
                    keep-color
                    color="primary"
                    dense
                    v-model="formData.developmentProjectTechniquePlanneds"
                    :options="projectTechniquesOp1"
                    type="checkbox"
                    @update:model-value="props.onCheckChangeData()"
                  />
                  <div class="row" v-if="checkOtherBox11">
                    <div class="offset-4 col-8 q-mt-sm relative-position">
                      <div class="other_custom_input">
                        <q-input
                          @update:model-value="props.onCheckChangeData()"
                          v-model="reasonPlanned70"
                          dense
                          :readonly="
                            store.projectStatus === 'FINISH' ||
                            checkRoutePermission
                          "
                          outlined
                          class="inputgreen"
                          label="กรุณาระบุ"
                        ></q-input>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                  <q-label class="q-mb-sm text-weight-medium text-body2"
                    >การเรียนรู้และการพัฒนาจากบุคคลอื่น (20)</q-label
                  >
                  <q-option-group
                    class="check_box q-mt-sm"
                    :disable="
                      store.projectStatus === 'FINISH' || checkRoutePermission
                    "
                    keep-color
                    color="primary"
                    dense
                    v-model="formData.developmentProjectTechniquePlanneds"
                    :options="projectTechniquesOp2"
                    type="checkbox"
                    @update:model-value="props.onCheckChangeData()"
                  />
                  <div class="row" v-if="checkOtherBox12">
                    <div class="offset-4 col-8 q-mt-sm relative-position">
                      <div class="other_custom_input">
                        <q-input
                          v-model="reasonPlanned20"
                          dense
                          :readonly="
                            store.projectStatus === 'FINISH' ||
                            checkRoutePermission
                          "
                          outlined
                          class="inputgreen"
                          label="กรุณาระบุ"
                          @update:model-value="props.onCheckChangeData()"
                        ></q-input>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                  <q-label class="q-mb-sm text-weight-medium text-body2"
                    >การเรียนรู้และการพัฒนาจากการฝึกอบรม (10)</q-label
                  >
                  <q-option-group
                    class="check_box q-mt-sm"
                    :disable="
                      store.projectStatus === 'FINISH' || checkRoutePermission
                    "
                    keep-color
                    color="primary"
                    dense
                    v-model="formData.developmentProjectTechniquePlanneds"
                    :options="projectTechniquesOp3"
                    type="checkbox"
                    @update:model-value="props.onCheckChangeData()"
                  />
                  <div class="row" v-if="checkOtherBox13">
                    <div class="offset-4 col-8 q-mt-sm relative-position">
                      <div class="other_custom_input">
                        <q-input
                          v-model="reasonPlanned10"
                          dense
                          :readonly="
                            store.projectStatus === 'FINISH' ||
                            checkRoutePermission
                          "
                          outlined
                          class="inputgreen"
                          label="กรุณาระบุ"
                          @update:model-value="props.onCheckChangeData()"
                        ></q-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
              <q-input
                :readonly="
                  store.projectStatus === 'FINISH' || checkRoutePermission
                "
                dense
                outlined
                v-model="formData.projectModalPlanned"
                label="จำนวน (รุ่น)"
                mask="#"
                reverse-fill-mask
                class="inputgreen"
                @update:model-value="props.onCheckChangeData()"
              />
            </div>

            <div class="col-12" v-if="store.projectStatus === 'FINISH'">
              <div class="row col-12 q-col-gutter-sm">
                <div class="col-12 q-my-sm">
                  <q-separator />
                </div>
                <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
                <div class="row col-12 q-col-gutter-sm">
                  <div class="col-md-3">
                    <q-checkbox
                      :disable="checkRoutePermission"
                      keep-color
                      color="primary"
                      dense
                      value="GO_BLACK"
                      label="ไป-กลับ"
                      v-model="formData.isBackActual"
                    ></q-checkbox>
                  </div>
                  <div class="col-12 col-md-4">
                    <q-input
                      :readonly="checkRoutePermission"
                      class="inputgreen"
                      dense
                      outlined
                      v-model="formData.projectDayBackActual"
                      label="จำนวน (วัน)"
                      mask="#"
                      reverse-fill-mask
                    />
                  </div>
                </div>
                <div class="row col-12 q-col-gutter-sm">
                  <div class="col-12 col-md-3">
                    <q-checkbox
                      :disable="checkRoutePermission"
                      keep-color
                      color="primary"
                      dense
                      value="HOLD"
                      label="พักค้าง"
                      v-model="formData.isHoldActual"
                    ></q-checkbox>
                  </div>
                  <div class="col-12 col-md-4">
                    <q-input
                      :readonly="checkRoutePermission"
                      class="inputgreen"
                      dense
                      outlined
                      v-model="formData.projectDayHoldActual"
                      label="จำนวน (วัน)"
                      mask="#"
                      reverse-fill-mask
                    />
                  </div>
                  <div class="col-12 col-md-4">
                    <q-input
                      :readonly="checkRoutePermission"
                      class="inputgreen"
                      dense
                      outlined
                      v-model="formData.projectNigthHoldActual"
                      label="จำนวน (คืน)"
                      mask="#"
                      reverse-fill-mask
                    />
                  </div>
                </div>
                <div class="col-12 q-py-md">
                  <div class="row q-col-gutter-md">
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                      <q-label class="q-mb-sm text-weight-medium text-body2"
                        >การเรียนรู้และการพัฒนาจากการลงมือทำ (70)</q-label
                      >
                      <q-option-group
                        class="check_box q-mt-sm"
                        keep-color
                        :disable="checkRoutePermission"
                        color="primary"
                        dense
                        v-model="formData.developmentProjectTechniqueActuals"
                        :options="projectTechniquesOp1"
                        type="checkbox"
                      />
                      <div class="row" v-if="checkOtherBox21">
                        <div class="offset-4 col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              :readonly="checkRoutePermission"
                              v-model="reasonActual70"
                              dense
                              outlined
                              class="inputgreen"
                              label="กรุณาระบุ"
                            ></q-input>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                      <q-label class="q-mb-sm text-weight-medium text-body2"
                        >การเรียนรู้และการพัฒนาจากบุคคลอื่น (20)</q-label
                      >
                      <q-option-group
                        class="check_box q-mt-sm"
                        keep-color
                        color="primary"
                        :disable="checkRoutePermission"
                        dense
                        v-model="formData.developmentProjectTechniqueActuals"
                        :options="projectTechniquesOp2"
                        type="checkbox"
                      />
                      <div class="row" v-if="checkOtherBox22">
                        <div class="offset-4 col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              :readonly="checkRoutePermission"
                              v-model="reasonActual20"
                              dense
                              outlined
                              class="inputgreen"
                              label="กรุณาระบุ"
                            ></q-input>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                      <q-label class="q-mb-sm text-weight-medium text-body2"
                        >การเรียนรู้และการพัฒนาจากการฝึกอบรม (10)</q-label
                      >
                      <q-option-group
                        class="check_box q-mt-sm"
                        keep-color
                        :disable="checkRoutePermission"
                        color="primary"
                        dense
                        v-model="formData.developmentProjectTechniqueActuals"
                        :options="projectTechniquesOp3"
                        type="checkbox"
                      />
                      <div class="row" v-if="checkOtherBox23">
                        <div class="offset-4 col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              v-model="reasonActual10"
                              dense
                              :readonly="checkRoutePermission"
                              outlined
                              class="inputgreen"
                              label="กรุณาระบุ"
                              @update:model-value="props.onCheckChangeData()"
                            ></q-input>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                  <q-input
                    dense
                    class="inputgreen"
                    :readonly="checkRoutePermission"
                    outlined
                    v-model="formData.projectModalActual"
                    label="จำนวน (รุ่น)"
                    mask="#"
                    reverse-fill-mask
                    @update:model-value="props.onCheckChangeData()"
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>

    <q-separator />
    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
      <q-btn
        rounded
        label="ก่อนหน้า"
        icon="mdi-chevron-left"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-mr-xs"
        style="width: 120px"
        @click="step = 'prev'"
      >
      </q-btn>
      <q-btn
        rounded
        label="ถัดไป"
        icon-right="mdi-chevron-right"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-ml-xs"
        style="width: 120px"
        @click="step = 'next'"
      >
      </q-btn>
    </div>
  </q-form>
</template>

<style scoped>
.my-list-link {
  color: rgb(118, 168, 222);
  border-radius: 5px;
  background: #a3d3fb48 !important;
  font-weight: 600;
  border: 1px solid rgba(175, 185, 196, 0.217);
}
.other_custom {
  position: absolute;
  left: -7px;
  top: -29px;
}
.other_custom_input {
  position: absolute;
  top: -25px;
  width: 100%;
}

:deep(.check_box .q-checkbox) {
  align-items: start;
}
</style>