feat: select result service product list quotation

src/pages/05_quotation/MainPage.vue

@@ -73,6 +73,7 @@ import {
 } from 'src/pages/03_customer-management/form';
 import QuotationView from './QuotationView.vue';
 import { watch } from 'vue';
+import { toRaw } from 'vue';
 
 const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
@@ -1586,6 +1587,20 @@ watch(() => pageState.currentTab, fetchQuotationList);
         await getAllProduct(id);
       }
     "
+    @submit="
+      (node) => {
+        const nodeRecursive = (
+          v: (typeof node)[number],
+        ): typeof node | (typeof node)[number] => {
+          if (v.checked && v.children) return v.children.flatMap(nodeRecursive);
+          if (v.checked) return v;
+          return [];
+        };
+
+        const filtered = node.flatMap(nodeRecursive);
+        console.log(JSON.parse(JSON.stringify(filtered.map((v) => v.value))));
+      }
+    "
   ></ProductServiceForm>
 </template>
 

src/pages/05_quotation/ProductServiceForm.vue

@@ -70,13 +70,16 @@ const priceDisplay = computed(() => ({
 }));
 
 const nodes = ref<Node[]>([]);
-const productServiceCard = ref();
+const productServiceCard = ref<{
+  service: Record<string, any>[];
+  product: Record<string, any>[];
+}>();
 const splitterModel = ref(0);
 const selectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
 const selectedNode = ref<Node[]>([]);
 const selectedProductGroup = ref('');
-const selectedItems = ref<[]>([]);
-const preSelectedItems = ref<[]>([]);
+const selectedItems = ref<Record<string, any>[]>([]);
+const preSelectedItems = ref<Record<string, any>[]>([]);
 const refSelectZone = ref<InstanceType<typeof SelectZone>>();
 
 const pageState = reactive({
@@ -104,8 +107,8 @@ function toggleSelected(node: Node) {
   }
 }
 
-function toggleDelete(node?: Node, all?: boolean) {
-  if (all) {
+function toggleDelete(node?: Node) {
+  if (!node) {
     selectedProductGroup.value = '';
     nodes.value = [];
     selectedItems.value = [];
@@ -117,7 +120,7 @@ function toggleDelete(node?: Node, all?: boolean) {
   }
 }
 
-function toggleMove(node?: Node, to?: 'up' | 'down') {
+function toggleMove(node: Node, to?: 'up' | 'down') {
   const targetItem = selectedItems.value.find((i) => i.id === node?.id);
   if (to === 'up' && targetItem) {
     moveItemUp(nodes.value, nodes.value.indexOf(node));
@@ -164,14 +167,14 @@ function mapCard() {
 
 function mapNode() {
   assignSelect(selectedItems.value, preSelectedItems.value);
-  const node = selectedItems.value.map((v: Node) => {
+
+  const node = selectedItems.value.map((v) => {
     if (v.type === 'service') {
       return {
         type: 'type',
         id: v.id,
         title: v.name,
         subtitle: v.code,
-        raw: v.raw,
         opened: v.work.length > 0,
         icon: 'mdi-server-outline',
         bg: 'hsla(var(--orange-5-hsl)/0.1)',
@@ -185,7 +188,15 @@ function mapNode() {
                 id: p.product.id,
                 title: p.product.name,
                 subtitle: p.product.code || ' ',
-                raw: p.product,
+                value: {
+                  vat: 0,
+                  pricePerUnit: 0,
+                  discount: 0,
+                  amount: 0,
+                  service: v.raw,
+                  work: w,
+                  product: p.product,
+                },
                 icon: 'mdi-shopping-outline',
                 bg: 'hsla(var(--teal-10-hsl)/0.1)',
                 fg: 'var(--teal-10)',
@@ -198,13 +209,20 @@ function mapNode() {
               id: w.id,
               title: w.name,
               subtitle: ' ',
-              raw: w,
               opened: w.productOnWork.length > 0,
               children: w.productOnWork.map((p) => ({
                 id: p.product.id,
                 title: p.product.name,
                 subtitle: p.product.code || ' ',
-                raw: p.product,
+                value: {
+                  vat: 0,
+                  pricePerUnit: 0,
+                  discount: 0,
+                  amount: 0,
+                  service: v.raw,
+                  work: w,
+                  product: p.product,
+                },
                 type: 'product',
               })),
             }));
@@ -216,7 +234,13 @@ function mapNode() {
         id: v.id,
         title: v.name,
         subtitle: v.code,
-        raw: v.raw,
+        value: {
+          vat: 0,
+          pricePerUnit: 0,
+          discount: 0,
+          amount: 0,
+          product: v.raw,
+        },
         type: 'product',
         icon: 'mdi-shopping-outline',
         bg: 'hsla(var(--teal-10-hsl)/0.1)',
@@ -229,7 +253,7 @@ function mapNode() {
   pageState.addModal = false;
 }
 
-function assignSelect(to: [], from: []) {
+function assignSelect(to: Record<string, any>[], from: Record<string, any>[]) {
   const existingItems = new Set(to);
 
   for (let i = to.length - 1; i >= 0; i--) {
@@ -424,7 +448,7 @@ watch(
                         <DeleteButton
                           icon-only
                           class="q-ml-auto"
-                          @click.stop="toggleDelete(undefined, true)"
+                          @click.stop="toggleDelete()"
                         />
                       </section>
                       <span