jws-frontend/src/pages/05_quotation/MainPage.vue

<script lang="ts" setup>
import { ref } from 'vue';
import QuatationForm from './QuatationForm.vue';
import SideMenu from 'components/SideMenu.vue';
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
import { watch } from 'vue';
import TreeView from 'src/components/shared/TreeView.vue';

const isOpen = ref(true);
const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();
const file = ref<File | null>(null);

const nodes = ref([
  {
    title: 'กลุ่มสินค้าและบริการที่ 1',
    subtitle: 'TG01000000001',
    selected: false,
    children: [
      {
        title: 'งานที่ 1',
        subtitle: 'TG01000000001',
        selected: false,
        children: [
          {
            title: 'สินค้า 1',
            subtitle: 'TG01000000001',
            selected: false,
          },
          {
            title: 'สินค้า 2',
            subtitle: 'TG01000000001',
            selected: false,
          },
          {
            title: 'สินค้า 3',
            subtitle: 'TG01000000001',
            selected: false,
          },
          {
            title: 'สินค้า 4',
            subtitle: 'TG01000000001',
            selected: false,
          },
          {
            title: 'สินค้า 5',
            subtitle: 'TG01000000001',
            selected: false,
          },
          {
            title: 'สินค้า 6',
            subtitle: 'TG01000000001',
            selected: false,
          },
        ],
      },
    ],
  },
]);
</script>

<template>
  <div class="surface-1 rounded full-height q-pa-md">
    <TreeView
      v-model:nodes="nodes"
      expandable
      :decoration="[
        {
          level: 0,
          icon: 'mdi-folder-outline',
          bg: 'hsla(var(--pink-6-hsl)/0.1)',
          fg: 'var(--pink-6)',
        },
        {
          level: 1,
          icon: 'mdi-server-outline',
          bg: 'hsla(var(--orange-5-hsl)/0.1)',
          fg: 'var(--orange-5)',
        },
        {
          level: 2,
          icon: 'mdi-shopping-outline',
          bg: 'hsla(var(--teal-10-hsl)/0.1)',
          fg: 'var(--teal-10)',
        },
      ]"
    />
  </div>
  <!-- <ImageUploadDialog
    v-model:dialog-state="isOpen"
    v-model:file="file"
    ref="imageUploadDialog"
    clear-button
  >
    <template #error>
      <div style="display: flex; align-items: center; justify-content: center">
        <h1>Fallback</h1>
      </div>
    </template>
  </ImageUploadDialog>

  <button @click="isOpen = !isOpen">Open</button>
  <button @click="imageUploadDialog?.browse()">Click Me</button>
  <div
    style="
      height: 100vh;
      background: green;
      width: 100%;
      color: white;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    "
    id="aaa"
  >
    My AAA
  </div>
  <div
    style="
      height: 100vh;
      background: red;
      width: 100%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    "
    id="my-anchor"
  >
    My Menu
  </div>
  <QuatationForm v-model:dialog-state="isOpen" /> -->
</template>

<style scoped></style>