feat: quatation tree

src/pages/05_quotation/MainPage.vue

@@ -4,14 +4,88 @@ 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>
-  <ImageUploadDialog
+  <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"
@@ -56,7 +130,7 @@ const file = ref<File | null>(null);
   >
     My Menu
   </div>
-  <QuatationForm v-model:dialog-state="isOpen" />
+  <QuatationForm v-model:dialog-state="isOpen" /> -->
 </template>
 
 <style scoped></style>