48 lines
1.7 KiB
Vue
48 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { apiBase } from '~/helpers';
|
|
import type { ApiTypeExternalPartners } from '~/helpers';
|
|
|
|
const state = reactive({
|
|
organization: undefined,
|
|
password: undefined
|
|
})
|
|
async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
// Do something with event.data
|
|
console.log(event.data)
|
|
}
|
|
const externalPartners = ref<ApiTypeExternalPartners[]>([])
|
|
const searchInExternal = (q: string) => {
|
|
return externalPartners.value.filter(el => {
|
|
return el.Description.toLowerCase().indexOf(q.toLowerCase()) !== -1
|
|
}).slice(0, 10)
|
|
}
|
|
onMounted(async () => {
|
|
const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/partner/external/`)
|
|
if (data.value) {
|
|
externalPartners.value = data.value
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="grid grid-cols-10">
|
|
<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"
|
|
option-attribute="Description"
|
|
:searchable="searchInExternal"
|
|
searchable-placeholder="Выберите организацию из списка контрагентов" />
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Password" name="password">
|
|
<UInput v-model="state.password" type="password" />
|
|
</UFormGroup>
|
|
|
|
<UButton type="submit">
|
|
Сохранить
|
|
</UButton>
|
|
</UForm>
|
|
</div>
|
|
</div>
|
|
</template> |