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

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

import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";

import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";

import { useCounterMixin } from "@/stores/mixin";
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 mixin = useCounterMixin();

const {
  dialogRemove,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
} = mixin;
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());

const formData = reactive<FormBasicinfo>({
  year: new Date().getFullYear(),
  projectName: "",
  reason: "",
  objective: "",
  node: null,
  nodeId: null,
  orgRevisionId: null,
});

const orgName = ref<string>("");
const node = ref<any>([]);
const nodeId = ref<string>("");
const filter = ref<string>("");
const expanded = ref<any>([]);

async function fetchData(id: string) {
  showLoader();
  await http
    .get(config.API.developmentMainTab("tab1", id))
    .then(async (res) => {
      const data = res.data.result;
      formData.year = data.year;
      formData.reason = data.reason;
      formData.projectName = data.projectName;
      formData.objective = data.objective;
      formData.nodeId = data.nodeId;

      const test = await searchAndReplace(node.value, formData?.nodeId);
      console.log(test);

      const parts = test.orgName.split("/");
      for (let i = 0; i < parts.length; i++) {
        const arrangedParts = parts[i];
        expanded.value.push(arrangedParts);
      }
      updateSelected(test);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

async function editData(id: string) {
  await http
    .put(config.API.developmentMainTab("tab1", id), formData)
    .then(() => {
      fetchData(id);
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    editData(projectId.value);
    hideLoader();
  });
}

function fetchActive() {
  showLoader();
  http
    .get(config.API.activeOrganization)
    .then((res) => {
      const data = res.data.result;
      fetchTree(data.activeId);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

async function fetchTree(id: string) {
  showLoader();
  http
    .get(config.API.orgByid(id.toString()))
    .then(async (res) => {
      const data = res.data.result;
      node.value = data;
      fetchData(projectId.value);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function updateSelected(data: any) {
  console.log(expanded.value);

  nodeId.value = data.orgTreeId;
  orgName.value = data.orgTreeName;
  formData.node = data.orgLevel;
  formData.nodeId = data.orgTreeId;
  formData.orgRevisionId = data.orgRevisionId;
}

function searchAndReplace(orgTreeData: any, treeId: string | null) {
  for (let orgTree of orgTreeData) {
    if (orgTree.orgTreeId === treeId) {
      return orgTree;
    }
    let foundOrg: any = searchAndReplace(orgTree.children, treeId);
    if (foundOrg) {
      return foundOrg;
    }
  }
  return null;
}

onMounted(async () => {
  fetchActive();
  // setTimeout(() => {
  //   fetchData(projectId.value);
  // }, 500);
});
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <q-card bordered class="col-12 row caedNone">
      <div class="col-xs-12 col-sm-3 row">
        <div class="col-12 row no-wrap bg-grey-1">
          <div class="col-12 q-py-sm q-px-sm">
            <q-card-section
              class="q-pt-none q-pa-sm scroll"
              style="max-height: 65vh"
            >
              <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="node"
                node-key="orgTreeName"
                label-key="orgTreeName"
                v-model:expanded="expanded"
                :filter="filter"
                no-results-label="ไม่พบข้อมูลที่ค้นหา"
                no-nodes-label="ไม่มีข้อมูล"
              >
                <template v-slot:default-header="prop">
                  <q-item
                    clickable
                    @click.stop="updateSelected(prop.node)"
                    :active="formData.nodeId === prop.node.orgTreeId"
                    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.orgTreeName }}
                      </div>
                      <div class="text-weight-light text-grey-8">
                        {{
                          prop.node.orgCode == null ? null : prop.node.orgCode
                        }}
                        {{
                          prop.node.orgTreeShortName == null
                            ? null
                            : prop.node.orgTreeShortName
                        }}
                      </div>
                    </div>
                  </q-item>
                </template>
              </q-tree>
            </q-card-section>
          </div>

          <div class="col-12 row">
            <q-separator :vertical="!$q.screen.lt.md" />
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-9 q-pa-md row">
        <div class="col-12 row">
          <div class="col-12">
            <div class="row col-12 q-col-gutter-md q-pa-md">
              <div class="col-xs-6 col-sm-2 col-md-2">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="formData.year"
                  :locale="'th'"
                  autoApply
                  year-picker
                  :enableTimePicker="false"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      lazy-rules
                      outlined
                      class="inputgreen"
                      :model-value="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-xs-10 col-sm-10 col-md-10">
                <q-input
                  dense
                  outlined
                  class="inputgreen"
                  v-model="orgName"
                  inputgreen
                  label="ชื่อหน่วยงานที่รับผิดชอบ"
                  hide-bottom-space
                  lazy-rules
                  readonly
                />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  outlined
                  class="inputgreen"
                  dense
                  v-model="formData.projectName"
                  label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
                  rows="6"
                  type="textarea"
                  hide-bottom-space
                  :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
          ]"
                />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  outlined
                  class="inputgreen"
                  dense
                  v-model="formData.reason"
                  label="หลักการและเหตุผล"
                  rows="6"
                  hide-bottom-space
                  type="textarea"
                />
              </div>
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  outlined
                  class="inputgreen"
                  dense
                  v-model="formData.objective"
                  label="วัตถุประสงค์"
                  rows="6"
                  hide-bottom-space
                  type="textarea"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-card>

    <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>

  <!-- <DialogSelectAgency
    v-model:modal="modalDialogSelect"
    @update:updateAgency="updateAgency"
  /> -->
</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);
}
</style>