hrms-mgt/src/modules/02_organizationalNew/components/listView.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";

/** importType*/
import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";

import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";

const showData = ref<boolean>(false);
const nodeTree = ref<any>();

// defineProps<{ dataActive: DataActive }>();

async function fetchDataTree() {
  const data = [
    {
      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
      organizationLevel: 0,
      lazy: true,
    },
    {
      organizationName: "สำนักปลัดกรุงเทพมหานคร",
      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
      organizationLevel: 0,
      lazy: true,
    },
  ];

  // const data = [
  //   {
  //     orgRootId: "00000000-0000-0000-0000-000000000000",
  //     orgLevel: 0,
  //     orgRootName: "ปลัดกรุงเทพ",
  //     orgRootShortName: "ก.น.",
  //     orgRootCode: "04",
  //     orgCode: "0400",
  //     orgRootOrder: 1,
  //     orgRootPhoneEx: "0849562355",
  //     orgRootPhoneIn: "0845124512",
  //     orgRootFax: "021576452",
  //     orgRevisionId: "00000000-0000-0000-0000-000000000000",
  //     orgChild1: [
  //       {
  //         orgChild1Id: "00000000-0000-0000-0000-000000000000",
  //         orgLevel: 1,
  //         orgChild1Name: "ปลัดกรุงเทพ",
  //         orgChild1ShortName: "ก.น.",
  //         orgChild1Code: "01",
  //         orgCode: "0401",
  //         orgChild1Order: 1,
  //         orgRootCode: "04",
  //         orgChild1PhoneEx: "0849562355",
  //         orgChild1PhoneIn: "0845124512",
  //         orgChild1Fax: "021576452",
  //         orgRevisionId: "00000000-0000-0000-0000-000000000000",
  //         orgChild2: [
  //           {
  //             orgChild2Id: "00000000-0000-0000-0000-000000000000",
  //             orgLevel: 2,
  //             orgChild2Name: "ปลัดกรุงเทพ",
  //             orgChild2ShortName: "ก.น.",
  //             orgChild2Code: "01",
  //             orgCode: "0401",
  //             orgChild2Order: 1,
  //             orgRootCode: "04",
  //             orgChild2PhoneEx: "0849562355",
  //             orgChild2PhoneIn: "0845124512",
  //             orgChild2Fax: "021576452",
  //             orgRevisionId: "00000000-0000-0000-0000-000000000000",
  //             orgChild3: [
  //               {
  //                 orgChild3Id: "00000000-0000-0000-0000-000000000000",
  //                 orgLevel: 3,
  //                 orgChild3Name: "ปลัดกรุงเทพ",
  //                 orgChild3ShortName: "ก.น.",
  //                 orgChild3Code: "01",
  //                 orgCode: "0401",
  //                 orgChild3Order: 1,
  //                 orgRootCode: "04",
  //                 orgChild3PhoneEx: "0849562355",
  //                 orgChild3PhoneIn: "0845124512",
  //                 orgChild3Fax: "021576452",
  //                 orgRevisionId: "00000000-0000-0000-0000-000000000000",
  //                 lazy: true,
  //                 orgChild4: [
  //                   {
  //                     orgChild4Id: "00000000-0000-0000-0000-000000000000",
  //                     orgLevel: 4,
  //                     orgChild4Name: "ปลัดกรุงเทพ",
  //                     orgChild4ShortName: "ก.น.",
  //                     orgChild4Code: "01",
  //                     orgCode: "0401",
  //                     orgChild4Order: 1,
  //                     orgChild4PhoneEx: "0849562355",
  //                     orgChild4PhoneIn: "0845124512",
  //                     orgChild4Fax: "021576452",
  //                     orgRevisionId: "00000000-0000-0000-0000-000000000000",
  //                     lazy: true,
  //                     orgRootCode: "04",
  //                   },
  //                 ],
  //               },
  //             ],
  //           },
  //         ],
  //       },
  //     ],
  //   },

  //   {
  //     orgRootId: "00000000-0000-0000-0000-000000000001",
  //     orgLevel: 0,
  //     orgRootName: "ปลัดกรุงเทพ2",
  //     orgRootShortName: "ก.น.",
  //     orgRootCode: "04",
  //     orgCode: "0400",
  //     orgRootOrder: 1,
  //     orgRootPhoneEx: "0849562355",
  //     orgRootPhoneIn: "0845124512",
  //     orgRootFax: "021576452",
  //     orgRevisionId: "00000000-0000-0000-0000-000000000000",
  //     orgChild1: [
  //       {
  //         orgChild1Id: "00000000-0000-0000-0000-000000000000",
  //         orgLevel: 1,
  //         orgChild1Name: "ปลัดกรุงเทพ2",
  //         orgChild1ShortName: "ก.น.",
  //         orgChild1Code: "01",
  //         orgCode: "0401",
  //         orgChild1Order: 1,
  //         orgRootCode: "04",
  //         orgChild1PhoneEx: "0849562355",
  //         orgChild1PhoneIn: "0845124512",
  //         orgChild1Fax: "021576452",
  //         orgRevisionId: "00000000-0000-0000-0000-000000000000",
  //         orgChild2: [],
  //       },
  //     ],
  //   },
  // ];


  
  nodeTree.value = data;
  console.log(nodeTree.value);
}



onMounted(() => {
  fetchDataTree();
});
</script>
<template>
  <div class="col-12">
    <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">
          <TreeView v-model:nodeTree="nodeTree" />

          <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">
        <div class="col-12 row items-center">
          <TableView v-model:showData="showData" />
        </div>
      </div>
    </q-card>
  </div>
</template>

<style scoped></style>