fix(04): service tree view

src/components/04_product-service/FormServiceWork.vue

@@ -5,17 +5,21 @@ import { moveItemUp, moveItemDown, deleteItem, dialog } from 'stores/utils';
 import NoData from 'components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
 import AddButton from '../button/AddButton.vue';
-import { WorkItems } from 'stores/product-service/types';
+import { ServiceCreate, WorkItems } from 'stores/product-service/types';
+import TreeView from '../shared/TreeView.vue';
+import { ref } from 'vue';
 
 const { t } = useI18n();
 
 const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
 
-defineProps<{
+const props = defineProps<{
+  service?: ServiceCreate;
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  treeView?: boolean;
 
   priceDisplay?: {
     price: boolean;
@@ -30,6 +34,22 @@ defineEmits<{
   (e: 'workProperties', index: number): void;
 }>();
 
+const nodes = ref([
+  {
+    title: props.service?.name,
+    subtitle: props.service?.code,
+    selected: false,
+    children: workItems.value.map((v) => ({
+      title: v.name,
+      subtitle: ' ',
+      children: v.product.map((x) => ({
+        title: x.name,
+        subtitle: x.code,
+      })),
+    })),
+  },
+]);
+
 function addWork() {
   workItems.value.push({
     id: '',
@@ -75,7 +95,7 @@ function confirmDelete(items: unknown[], index: number) {
       />
     </div>
 
-    <div v-if="workItems.length > 0" class="q-gutter-y-md row">
+    <div v-if="workItems.length > 0 && !treeView" class="q-gutter-y-md row">
       <WorkManagementComponent
         class="col-12"
         v-for="(work, index) in workItems"
@@ -101,6 +121,39 @@ function confirmDelete(items: unknown[], index: number) {
       <div class="col-12" style="height: 12px"></div>
     </div>
 
+    <div
+      v-else-if="workItems.length > 0 && treeView"
+      class="row rounded bordered surface-2 col q-pa-md"
+    >
+      <TreeView
+        expandable
+        hideCheckBox
+        icon-size="2.5rem"
+        class="full-width"
+        v-model:nodes="nodes"
+        :decoration="[
+          {
+            level: 0,
+            icon: 'mdi-server-outline',
+            bg: 'hsla(var(--orange-5-hsl)/0.1)',
+            fg: 'var(--orange-5)',
+          },
+          {
+            level: 1,
+            icon: 'mdi-briefcase-outline',
+            bg: 'hsla(var(--violet-11-hsl)/0.1)',
+            fg: 'var(--violet-11)',
+          },
+          {
+            level: 2,
+            icon: 'mdi-shopping-outline',
+            bg: 'hsla(var(--teal-10-hsl)/0.1)',
+            fg: 'var(--teal-10)',
+          },
+        ]"
+      />
+    </div>
+
     <div
       v-else
       class="col row rounded bordered surface-2 justify-center items-center"