typescript fix

back/inventory/views.py

@@ -100,7 +100,7 @@ class ElementViewSet(viewsets.ModelViewSet):
             params = {
                 "$format": "json",
                 "$select": ",".join(["Description", "Ref_Key", "Parent_Key"]),
-                "$filter": f"Parent_Key eq guid'{cat_id}'",
+                "$filter": f"КатегорияНоменклатуры_Key eq guid'{cat_id}'",
             }
             remote_url = (
                 "https://1c.svs-tech.pro/UNF/odata/standard.odata/Catalog_Номенклатура?"

front/assets/main.scss

@@ -2,18 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
-.container {
+@layer base {
-    @apply grid grid-cols-12 mx-auto gap-4
+    h1 {
-}
+        @apply text-2xl;
+    }
 
-.header {
+    h2 {
-    @apply col-span-12
+        @apply text-xl;
-}
+    }
 
-.sidebar {
+    h3 {
-    @apply col-span-2
+        @apply text-lg;
-}
+    }
 
-.content {
+    .container {
-    @apply col-span-10
+        @apply grid grid-cols-12 mx-auto gap-4
+    }
+
+    .header {
+        @apply col-span-12
+    }
+
+    .sidebar {
+        @apply col-span-2
+    }
+
+    .content {
+        @apply col-span-10
+    }
 }

front/helpers.ts

@@ -8,7 +8,7 @@ export type ApiTypeBase = {
     results: any[];
 }
 
-export type ApiTypeExternalPartners = {
+export type ApiTypeExternal = {
     'НаименованиеПолное': string;
     Description: string;
     Ref_Key: string;

front/pages/organization/new.vue

@@ -1,59 +1,83 @@
 <script setup lang="ts">
 import { apiBase } from '~/helpers';
-import type { ApiTypeExternalPartners } from '~/helpers';
+import type { ApiTypeExternal } from '~/helpers';
 
+type ExternalDataType = {
+    partner?: ApiTypeExternal[],
+    categories?: ApiTypeExternal[][],
+    element?: ApiTypeExternal[],
+}
+type StateDataType = {
+    partner?: string
+    categories?: string[]
+    element?: string
+    element_id?: string
+}
 const loading = ref(false)
-const state = reactive({
+const state = reactive<StateDataType>({
-    organization: undefined,
+    partner: undefined,
+    categories: [],
+    element: undefined,
+    element_id: undefined
+})
+const external_data = reactive<ExternalDataType>({
+    partner: [],
+    categories: [],
+    element: [],
 })
 async function onSubmit(event: FormSubmitEvent<Schema>) {
     // Do something with event.data
     console.log(event.data)
 }
-const externalPartners = ref<ApiTypeExternalPartners[]>([])
+
 const searchInExternal = (q: string) => {
     if (!q.length) {
-        return externalPartners.value.splice(0, 10)
+        return external_data.partner?.splice(0, 10)
     }
-    return externalPartners.value.filter(el => {
+    return external_data.partner?.filter(el => {
         return el.Description.toLowerCase().indexOf(q.toLowerCase()) !== -1
     }).slice(0, 10)
 }
-const externalCategoryValue = ref([])
-const externalCategories = ref<ApiTypeExternalPartners[][]>([])
-
-const externalElementValue = ref()
-const externalElements = ref<ApiTypeExternalPartners[]>([])
 
 const loadPartners = async () => {
     loading.value = true
-    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/partner/external/`)
+    const data = await $fetch<ApiTypeExternal[]>(`${apiBase}/partner/external/`)
-    if (data.value) {
+    if (data) {
-        externalPartners.value = data.value
+        external_data.partner = data
     }
     loading.value = false
 }
 const loadCategories = async () => {
-    const lastCat = externalCategoryValue.value.at(-1) || ''
+    loading.value = true
-    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/element/external_categories/${lastCat}`)
+
-    if (data.value?.length) {
+    const lastCat = state.categories?.at(-1) || ''
-        externalCategories.value.push(data.value)
+    const data = await $fetch<ApiTypeExternal[]>(`${apiBase}/element/external_categories/${lastCat}`)
+    if (data.length) {
+        external_data.categories?.push(data)
     } else {
         await loadElements()
     }
+    loading.value = false
 }
 const loadElements = async () => {
-    const lastCat = externalCategoryValue.value.at(-1) || ''
+    loading.value = true
-    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/element/external/${lastCat}`)
+
-    if (data.value) {
+    const lastCat = state.categories?.at(-1) || ''
-        externalElements.value = data.value
+    const data = await $fetch<ApiTypeExternal[]>(`${apiBase}/element/external/${lastCat}`)
+    if (data) {
+        external_data.element = data
     }
+    loading.value = false
 }
 const loadDeepCategories = async (i: number) => {
-    if ((i + 1) < externalCategoryValue.value.length) {
+    if ((i + 1) <= (state.categories as string[]).length) {
-        externalCategoryValue.value = externalCategoryValue.value.slice(0, i + 1)
+        state.categories = state.categories?.slice(0, i + 1)
-        externalCategories.value = externalCategories.value.slice(0, i + 1)
+        external_data.categories = external_data.categories?.slice(0, i + 1)
+
+        state.element = undefined
+        external_data.element = []
     }
+
     loadCategories()
 }
 onMounted(async () => {
@@ -62,23 +86,29 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div class="grid grid-cols-10">
+    <div class="grid grid-cols-10 gap-4">
         <div class="col-span-3">
             <UForm :state="state" class="flex flex-col gap-4" @submit="onSubmit">
                 <UFormGroup label="Выбрать организацию" name="organization">
-                    <USelectMenu v-model="state.organization" :options="externalPartners" value-attribute="Ref_Key"
+                    <USelectMenu v-model="state.partner" :options="external_data.partner" value-attribute="Ref_Key"
                         option-attribute="Description" :searchable="searchInExternal"
                         searchable-placeholder="Выберите организацию из списка контрагентов" :loading="loading" />
                 </UFormGroup>
-                <UFormGroup label="Добавить элемент инвентаризации" v-if="state.organization">
+                <UFormGroup label="Добавить элемент инвентаризации" v-if="state.partner">
-                    <template v-for="(item, i) in externalCategories">
+                    <template v-for="(item, i) in external_data.categories">
-                        <USelectMenu v-model="externalCategoryValue[i]" :options="item" value-attribute="Ref_Key"
+                        <USelectMenu v-model="(state.categories as string[])[i]" :options="item"
-                            option-attribute="Description" :searchable="true" :loading="loading"
+                            value-attribute="Ref_Key" option-attribute="Description" :searchable="true"
-                            :placeholder="`Категории (${item.length})`" @change="loadDeepCategories(i)" />
+                            :loading="loading" :placeholder="`Категории (${item.length})`"
+                            @change="loadDeepCategories(i)" />
                     </template>
-                    <USelectMenu v-if="externalElements.length" v-model="externalElementValue"
+                    <USelectMenu v-if="external_data.element?.length" v-model="state.element"
-                        :options="externalElements" value-attribute="Ref_Key" option-attribute="Description"
+                        :options="external_data.element" value-attribute="Ref_Key" option-attribute="Description"
-                        :searchable="true" :loading="loading" :placeholder="`Элементы (${externalElements.length})`" />
+                        :searchable="true" :loading="loading"
+                        :placeholder="`Элементы (${external_data.element.length})`" />
+                </UFormGroup>
+                <UFormGroup v-if="state.element"
+                    :label="`Данные об элементе «${external_data.element?.find(el => el['Ref_Key'] === state.element)?.Description}»`">
+                    <UInput placeholder="ID" v-model="state.element_id" />
                 </UFormGroup>
 
                 <UButton type="submit">
@@ -86,5 +116,8 @@ onMounted(async () => {
                 </UButton>
             </UForm>
         </div>
+        <div class="col-span-7">
+            <h2>{{ external_data.partner?.find(el => el["Ref_Key"] == state.partner)?.Description }}</h2>
+        </div>
     </div>
 </template>