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,
    },
  ];
  nodeTree.value = data;
}

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>