104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
import { createSelect, SelectProps } from './select-multiple';
|
|
import SelectInput from '../SelectInput.vue';
|
|
|
|
import useAddressStore, { Office } from 'stores/address';
|
|
|
|
type SelectOption = Office;
|
|
|
|
const value = defineModel<string[] | null | undefined>('value', {
|
|
required: true,
|
|
});
|
|
const valueOption = defineModel<SelectOption[]>('valueOption', {
|
|
required: false,
|
|
});
|
|
|
|
const selectOptions = ref<SelectOption[]>([]);
|
|
|
|
const { fetchOffice: getList, fetchOfficeById: getById } = useAddressStore();
|
|
|
|
defineEmits<{
|
|
(e: 'create'): void;
|
|
}>();
|
|
|
|
type ExclusiveProps = {};
|
|
|
|
const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
|
|
|
|
const { getOptions, setFirstValue, getSelectedOption, filter } =
|
|
createSelect<SelectOption>(
|
|
{
|
|
value,
|
|
valueOption,
|
|
selectOptions,
|
|
getList: async (query) => {
|
|
const ret = await getList({
|
|
query,
|
|
...props.params,
|
|
});
|
|
if (ret) return ret;
|
|
},
|
|
getByValue: async (id) => {
|
|
const ret = await getById(id);
|
|
if (ret) return ret;
|
|
},
|
|
},
|
|
{ valueField: 'id' },
|
|
);
|
|
|
|
onMounted(async () => {
|
|
await getOptions();
|
|
|
|
if (props.autoSelectOnSingle && selectOptions.value.length === 1) {
|
|
setFirstValue();
|
|
}
|
|
|
|
await getSelectedOption();
|
|
});
|
|
</script>
|
|
<template>
|
|
<SelectInput
|
|
v-model="value"
|
|
option-value="id"
|
|
option-label="name"
|
|
incremental
|
|
multiple
|
|
:label
|
|
:placeholder
|
|
:readonly
|
|
:disable="disabled"
|
|
:option="selectOptions"
|
|
:hide-selected="false"
|
|
:fill-input="false"
|
|
:rules="[(v: string) => !!v || $t('form.error.required')]"
|
|
@filter="filter"
|
|
>
|
|
<template #before-options v-if="creatable">
|
|
<q-item clickable v-close-popup @click.stop="$emit('create')">
|
|
<q-item-section>
|
|
<b class="row items-center">
|
|
<q-icon
|
|
name="mdi-plus-circle-outline"
|
|
class="q-mr-sm"
|
|
style="color: hsl(var(--positive-bg))"
|
|
/>
|
|
{{ $t('general.add', { text: $t('quotation.newCustomer') }) }}
|
|
</b>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator class="q-mx-sm" />
|
|
</template>
|
|
|
|
<template #append v-if="clearable">
|
|
<q-icon
|
|
v-if="!readonly && value"
|
|
name="mdi-close-circle"
|
|
@click.stop="value = []"
|
|
class="cursor-pointer clear-btn"
|
|
/>
|
|
</template>
|
|
</SelectInput>
|
|
</template>
|