последовательный выбор категории

back/inventory/views.py

@@ -67,24 +67,28 @@ class ElementViewSet(viewsets.ModelViewSet):
     queryset = Element.objects.all()
     serializer_class = ElementSerializer
 
-    @action(detail=False, methods=["get"], url_path=r"external_categories")
+    @action(
-    def get_remote_categories(self, request):
+        detail=False,
+        methods=["get"],
+        url_path=r"external_categories",
+    )
+    def get_remote_categories(self, request, cat_id=None):
         try:
-            all_categories = []
+            categories = get_depth_cat("87e91e07-7e10-11ee-ab5a-a47a2bd811cb")
-            categories = get_depth_cat("a6aadfe8-7e0f-11ee-ab5a-a47a2bd811cb")
+            categories.extend(get_depth_cat("20e1e6f6-a575-11ee-ab60-ec3c37e2e642"))
-            for category in categories:
+            return Response(categories)
-                depth = get_depth_cat(category["Ref_Key"])
+        except Exception as e:
-                if len(depth):
+            logger.error(e)
-                    for cat2 in depth:
+            return Response(status=status.HTTP_500_INTERNAL_SERVER_ERROR)
-                        depth2 = get_depth_cat(cat2["Ref_Key"])
+
-                        if len(depth2):
+    @action(
-                            for cat3 in depth2:
+        detail=False,
-                                depth3 = get_depth_cat(cat3["Ref_Key"])
+        methods=["get"],
-                                all_categories.append(depth3)
+        url_path=r"external_categories/(?P<cat_id>[^/.]+)",
-                        else:
+    )
-                            all_categories.append(depth2)
+    def get_remote_categories_child(self, request, cat_id=None):
-                else:
+        try:
-                    all_categories.append(depth)
+            categories = get_depth_cat(cat_id)
             return Response(categories)
         except Exception as e:
             logger.error(e)

front/pages/organization/new.vue

@@ -19,10 +19,10 @@ const searchInExternal = (q: string) => {
         return el.Description.toLowerCase().indexOf(q.toLowerCase()) !== -1
     }).slice(0, 10)
 }
-const externalCategory = ref()
+const externalCategoryValue = ref([])
-const externalCategories = ref<ApiTypeExternalPartners[]>([])
+const externalCategories = ref<ApiTypeExternalPartners[][]>([])
 
-const externalElement = ref()
+const externalElementValue = ref()
 const externalElements = ref<ApiTypeExternalPartners[]>([])
 
 const loadPartners = async () => {
@@ -33,21 +33,33 @@ const loadPartners = async () => {
     }
     loading.value = false
 }
+const loadCategories = async () => {
+    const lastCat = externalCategoryValue.value.at(-1) || ''
+    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/element/external_categories/${lastCat}`)
+    if (data.value?.length) {
+        externalCategories.value.push(data.value)
+    } else {
+        await loadElements()
+    }
+}
 const loadElements = async () => {
-    loading.value = true
+    const lastCat = externalCategoryValue.value.at(-1) || ''
-    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/element/external/${externalCategory.value}`)
+    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/element/external/${lastCat}`)
     if (data.value) {
         externalElements.value = data.value
     }
-    loading.value = false
+}
+const loadDeepCategories = async (i: number) => {
+    if ((i + 1) < externalCategoryValue.value.length) {
+        externalCategoryValue.value = externalCategoryValue.value.slice(0, i + 1)
+        externalCategories.value = externalCategories.value.slice(0, i + 1)
+    }
+    loadCategories()
 }
 onMounted(async () => {
     await loadPartners()
-
+    await loadCategories()
-    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/element/external_categories/`)
-    externalCategories.value = data.value
 })
-watch(externalCategory, loadElements)
 </script>
 <template>
     <div class="grid grid-cols-10">
@@ -59,11 +71,14 @@ watch(externalCategory, loadElements)
                         searchable-placeholder="Выберите организацию из списка контрагентов" :loading="loading" />
                 </UFormGroup>
                 <UFormGroup label="Добавить элемент инвентаризации" v-if="state.organization">
-                    <USelectMenu v-model="externalCategory" :options="externalCategories" value-attribute="Ref_Key"
+                    <template v-for="(item, i) in externalCategories">
-                        option-attribute="Description" :searchable="true" :loading="loading" />
+                        <USelectMenu v-model="externalCategoryValue[i]" :options="item" value-attribute="Ref_Key"
-                    <USelectMenu v-model="externalElement" :options="externalElements" value-attribute="Ref_Key"
                             option-attribute="Description" :searchable="true" :loading="loading"
-                        :placeholder="`Элементы (${externalElements.length})`" />
+                            :placeholder="`Категории (${item.length})`" @change="loadDeepCategories(i)" />
+                    </template>
+                    <USelectMenu v-if="externalElements.length" v-model="externalElementValue"
+                        :options="externalElements" value-attribute="Ref_Key" option-attribute="Description"
+                        :searchable="true" :loading="loading" :placeholder="`Элементы (${externalElements.length})`" />
                 </UFormGroup>
 
                 <UButton type="submit">