169 lines
4.2 KiB
Vue
169 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import { QSelect } from 'quasar';
|
|
import { selectFilterOptionRefMod } from 'stores/utils';
|
|
import { getRole } from 'src/services/keycloak';
|
|
import { onMounted } from 'vue';
|
|
|
|
defineProps<{
|
|
prefixId?: string;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
customerType?: 'CORP' | 'PERS';
|
|
}>();
|
|
|
|
const personName = defineModel<string>('personName', { required: true });
|
|
const customerName = defineModel<string>('customerName', { required: true });
|
|
const customerNameEN = defineModel<string>('customerNameEn', {
|
|
required: true,
|
|
});
|
|
const taxNo = defineModel<string | null>('taxNo');
|
|
const registeredBranchId = defineModel<string>('registeredBranchId', {
|
|
required: true,
|
|
});
|
|
|
|
const branchOptions = defineModel<{ id: string; name: string }[]>(
|
|
'branchOptions',
|
|
{ default: [] },
|
|
);
|
|
const filteredBranchOptions = ref<Record<string, unknown>[]>([]);
|
|
|
|
let branchFilter: (
|
|
value: string,
|
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
) => void;
|
|
|
|
onMounted(() => {
|
|
branchFilter = selectFilterOptionRefMod(
|
|
branchOptions,
|
|
filteredBranchOptions,
|
|
'name',
|
|
);
|
|
});
|
|
|
|
watch(
|
|
() => branchOptions.value,
|
|
() => {
|
|
branchFilter = selectFilterOptionRefMod(
|
|
branchOptions,
|
|
filteredBranchOptions,
|
|
'name',
|
|
);
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-12 text-weight-bold text-body1 row items-center">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-xs"
|
|
color="info"
|
|
name="mdi-office-building-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
<span>{{ $t('customer.form.group.basicInfo') }}</span>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
type="submit"
|
|
dense
|
|
unelevated
|
|
color="primary"
|
|
:label="$t('save')"
|
|
@click="$emit('save')"
|
|
class="q-px-md q-ml-auto rounded"
|
|
/>
|
|
</div>
|
|
<q-select
|
|
outlined
|
|
clearable
|
|
use-input
|
|
fill-input
|
|
emit-value
|
|
map-options
|
|
hide-selected
|
|
hide-bottom-space
|
|
dense
|
|
class="col-12 col-md-4"
|
|
option-value="id"
|
|
input-debounce="0"
|
|
option-label="name"
|
|
lazy-rules="ondemand"
|
|
v-model="registeredBranchId"
|
|
:readonly="readonly"
|
|
:options="filteredBranchOptions"
|
|
:hide-dropdown-icon="readonly"
|
|
:label="$t('registeredBranch')"
|
|
:for="`${prefixId}-input-source-nationality`"
|
|
:rules="[
|
|
(val) => {
|
|
const roles = getRole() || [];
|
|
return (
|
|
['admin', 'system', 'head_of_admin'].some((v) =>
|
|
roles.includes(v),
|
|
) ||
|
|
!!val ||
|
|
$t('form.error.required')
|
|
);
|
|
},
|
|
]"
|
|
@filter="branchFilter"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
{{ $t('noResults') }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
:label="$t('customer.form.customerName')"
|
|
v-model="customerName"
|
|
class="col-12 col-md-4"
|
|
:readonly="readonly"
|
|
:for="`${prefixId}-input-company-name`"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
:label="$t('customer.form.customerNameEN')"
|
|
v-model="customerNameEN"
|
|
:for="`${prefixId}-input-company-name-en`"
|
|
class="col-12 col-md-4"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
v-model="personName"
|
|
:label="$t('customer.form.personName')"
|
|
:for="`${prefixId}-input-person-name`"
|
|
:rules="[(v: string) => !!v || $t('form.error.required')]"
|
|
class="col-12 col-md-4"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
v-if="customerType === 'PERS'"
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
:label="$t('customer.form.taxIdentificationNumber')"
|
|
v-model="taxNo"
|
|
:for="`${prefixId}-input-tax-no`"
|
|
class="col-12 col-md-4"
|
|
/>
|
|
</div>
|
|
</template>
|