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

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

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

import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import http from "@/plugins/http";
import config from "@/app.config";

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

const projectTypeOp = ref<String[]>([
  "โครงการตามยุทธศาสตร์",
  "โครงการตามภารกิจประจำของหน่วยงาน",
  "โครงการใหม่",
  "โครงการต่อเนื่อง",
]);
// 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: "การอบรม", label: "การอบรม" },
  { value: "การประชุม", label: "การประชุม" },
  { value: "การสัมมนา", label: "การสัมมนา" },
  { value: "การศึกษาดูงาน", label: "การศึกษาดูงาน" },
  { value: "การสัมมนาทางวิชาการ", label: "การสัมมนาทางวิชาการ" },
  { value: "การสัมมนาเชิงปฏิบัติการ", label: "การสัมมนาเชิงปฏิบัติการ" },
  { value: "การบรรยายพิเศษ", label: "การบรรยายพิเศษ" },
  { value: "การฝึกศึกษา", 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: [],
});

const nodes = ref<any>([
  {
    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
    level: "0",
    children: [
      {
        orgTreeName: "ยุทธศาสตร์ที่ 1",
        level: "1",
        children: [
          {
            orgTreeName: "ยุทธศาสตร์ที่ 2",
            level: "2",
            children: [
              {
                orgTreeName: "ยุทธศาสตร์ที่ 3",
                level: "3",
              },
            ],
          },
        ],
      },
    ],
  },
]);
const filter = ref<string>("");
const filter2 = ref<string>("");
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
const expanded = ref<Array<any>>([]);
const expanded2 = ref<Array<any>>([]);
const nodeId = ref<string>("");
const nodeId2 = ref<string>("");
async function fetchData() {
  showLoader();
  await 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;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

async function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();

    await http
      .put(config.API.developmentMainTab("tab3", projectId.value), formData)
      .then((res) => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        fetchData();
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      });
  });
}

function updateSelected(data: any, type: string) {
  if (type === "1") {
    nodeId.value = data.orgTreeName;
  } else if (type === "2") {
    nodeId2.value = data.orgTreeName;
  }
}

onMounted(() => {
  fetchData();
});
</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="formData.developmentProjectTypes"
          :options="projectTypeOp"
          label="ประเภทโครงการ"
          option-label="name"
          option-value="id"
          emit-value
          map-options
          multiple
        />
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <q-input
          dense
          outlined
          v-model="formData.projectModal"
          label="จำนวน (รุ่น)"
          mask="#"
          reverse-fill-mask
        />
      </div>

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

      <div class="row">
        <div
          :class="
            store.projectStatus === 'FINISH'
              ? 'col-6 q-col-gutter-sm'
              : 'col-12 q-col-gutter-sm'
          "
        >
          <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>

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

          <div class="row col-12 q-col-gutter-sm">
            <div class="col-12 col-md-3">
              <q-checkbox
                :disable="store.projectStatus === 'FINISH'"
                keep-color
                color="primary"
                dense
                value="GO_BLACK"
                label="ไป-กลับ"
                v-model="formData.isBackPlanned"
              ></q-checkbox>
            </div>
            <div class="col-12 col-md-4">
              <q-input
                :readonly="store.projectStatus === 'FINISH'"
                dense
                outlined
                v-model="formData.projectDayBackPlanned"
                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="store.projectStatus === 'FINISH'"
                keep-color
                color="primary"
                dense
                value="HOLD"
                label="พักค้าง"
                v-model="formData.isHoldPlanned"
              ></q-checkbox>
            </div>
            <div class="col-12 col-md-4">
              <q-input
                :readonly="store.projectStatus === 'FINISH'"
                dense
                outlined
                v-model="formData.projectDayHoldPlanned"
                label="จำนวน (วัน)"
                mask="#"
                reverse-fill-mask
              />
            </div>
            <div class="col-12 col-md-4">
              <q-input
                :readonly="store.projectStatus === 'FINISH'"
                dense
                outlined
                v-model="formData.projectNigthHoldPlanned"
                label="จำนวน (คืน)"
                mask="#"
                reverse-fill-mask
              />
            </div>
          </div>
        </div>

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

          <div class="row col-12 q-col-gutter-sm">
            <div class="col-md-3">
              <q-checkbox
                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
                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
                keep-color
                color="primary"
                dense
                value="HOLD"
                label="พักค้าง"
                v-model="formData.isHoldActual"
              ></q-checkbox>
            </div>
            <div class="col-12 col-md-4">
              <q-input
                dense
                outlined
                v-model="formData.projectDayHoldActual"
                label="จำนวน (วัน)"
                mask="#"
                reverse-fill-mask
              />
            </div>
            <div class="col-12 col-md-4">
              <q-input
                dense
                outlined
                v-model="formData.projectNigthHoldActual"
                label="จำนวน (คืน)"
                mask="#"
                reverse-fill-mask
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <q-separator />
    <div class="row">
      <div class="col-6 q-pa-md">
        <q-input dense outlined v-model="filter" label="ค้นหา">
          <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="orgTreeName"
          label-key="orgTreeName"
          :filter="filter"
          :no-results-label="notFound"
          :no-nodes-label="noData"
          v-model:expanded="expanded"
        >
          <template v-slot:default-header="prop">
            <q-item
              clickable
              @click.stop="updateSelected(prop.node, '1')"
              :active="nodeId == prop.node.orgTreeName"
              active-class="my-list-link text-white text-weight-medium bg-primary"
              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.orgTreeName }}
                </div>
              </div>
            </q-item>
          </template>
        </q-tree>
      </div>
      <div class="col-6 q-pa-md">
        <q-input dense outlined v-model="filter2" label="ค้นหา">
          <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="orgTreeName"
          label-key="orgTreeName"
          :filter="filter2"
          :no-results-label="notFound"
          :no-nodes-label="noData"
          v-model:expanded="expanded2"
        >
          <template v-slot:default-header="prop">
            <q-item
              clickable
              @click.stop="updateSelected(prop.node, '2')"
              :active="nodeId2 == prop.node.orgTreeName"
              active-class="my-list-link text-white text-weight-medium bg-primary"
              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.orgTreeName }}
                </div>
              </div>
            </q-item>
          </template>
        </q-tree>
      </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>