refactor: add form customer
This commit is contained in:
Net
parent
311ce3e0fa
commit
91ad01da83
2 changed files with 309 additions and 0 deletions
76
src/components/upload-file/CorpFormBusinessRegistration.vue
Normal file
76
src/components/upload-file/CorpFormBusinessRegistration.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<script setup lang="ts">
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
|
||||
const registrationNumber = defineModel<string>('registrationNumber', {
|
||||
default: '',
|
||||
});
|
||||
const name = defineModel<string>('name', {
|
||||
default: '',
|
||||
});
|
||||
|
||||
const businessRegistrationDate = defineModel<string>(
|
||||
'businessRegistrationDate',
|
||||
{ default: '' },
|
||||
);
|
||||
const visaPlace = defineModel<string>('visaPlace', { default: '' });
|
||||
defineProps<{
|
||||
prefixId?: string;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
customerType?: 'CORP' | 'PERS';
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row q-mb-sm" style="gap: 10px">
|
||||
<div class="col-12 text-subtitle1 text-weight-bold">
|
||||
<p>Document Properties</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('form.businessRegistration.registrationNumber')"
|
||||
for="input-citizen-id"
|
||||
v-model="registrationNumber"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('form.businessRegistration.registrationNumber')"
|
||||
for="input-citizen-id"
|
||||
v-model="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<DatePicker
|
||||
:label="$t('form.businessRegistration.businessRegistration')"
|
||||
v-model="businessRegistrationDate"
|
||||
class="col-4"
|
||||
:id="`${prefixId}-input-birth-date`"
|
||||
:readonly="readonly"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
:label="$t('customerEmployee.form.visaPlace')"
|
||||
v-model="visaPlace"
|
||||
class="col-4"
|
||||
:id="`${prefixId}-input-birth-date`"
|
||||
:readonly="readonly"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
233
src/components/upload-file/PersFormBusinessRegistration.vue
Normal file
233
src/components/upload-file/PersFormBusinessRegistration.vue
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import useOptionStore from 'stores/options';
|
||||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
import { QSelect } from 'quasar';
|
||||
import { AddressForm } from 'components/form';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
const registrationNumber = defineModel<string>('registrationNumber', {
|
||||
default: '',
|
||||
});
|
||||
|
||||
const requestAt = defineModel<string>('requestAt', { default: '' });
|
||||
const namePrefix = defineModel<string | null>('namePrefix');
|
||||
const firstName = defineModel<string>('firstName', { default: '' });
|
||||
const lastName = defineModel<string>('lastName', { default: '' });
|
||||
|
||||
const businessRegistrationDate = defineModel<string>(
|
||||
'businessRegistrationDate',
|
||||
{ default: '' },
|
||||
);
|
||||
const visaPlace = defineModel<string>('visaPlace', { default: '' });
|
||||
const businessType = defineModel<string>('businessType', { default: '' });
|
||||
const businessName = defineModel<string>('businessName', { default: '' });
|
||||
const romanCharacters = defineModel<string>('romanCharacters', { default: '' });
|
||||
|
||||
const address = defineModel<string>('address');
|
||||
const street = defineModel('street', { default: '' });
|
||||
const moo = defineModel('moo', { default: '' });
|
||||
const soi = defineModel('soi', { default: '' });
|
||||
const provinceId = defineModel<string | null | undefined>('provinceId');
|
||||
const districtId = defineModel<string | null | undefined>('districtId');
|
||||
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
||||
const homeCode = defineModel<string | null | undefined>('homeCode');
|
||||
const employmentOffice = defineModel<string | null | undefined>(
|
||||
'employmentOffice',
|
||||
);
|
||||
|
||||
const prefixNameOptions = ref<Record<string, unknown>[]>([]);
|
||||
let prefixNameFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
defineProps<{
|
||||
prefixId?: string;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
customerType?: 'CORP' | 'PERS';
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
prefixNameFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.prefix),
|
||||
prefixNameOptions,
|
||||
'label',
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => optionStore.globalOption,
|
||||
() => {
|
||||
prefixNameFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.prefix),
|
||||
prefixNameOptions,
|
||||
'label',
|
||||
);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row q-mb-sm" style="gap: 10px">
|
||||
<div class="col-12 text-subtitle1 text-weight-bold">
|
||||
<p>Document Properties</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('form.businessRegistration.registrationNumber')"
|
||||
for="input-citizen-id"
|
||||
v-model="registrationNumber"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('form.businessRegistration.requestAt')"
|
||||
for="input-citizen-id"
|
||||
v-model="requestAt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
hide-dropdown-icon
|
||||
class="col-2"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('form.prefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? namePrefix || '-' : namePrefix"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
typeof v === 'string' ? (namePrefix = v) : '';
|
||||
}
|
||||
"
|
||||
@clear="namePrefix = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="$t('customer.form.firstName')"
|
||||
for="input-first-name"
|
||||
v-model="firstName"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="$t('customer.form.lastName')"
|
||||
for="input-last-name"
|
||||
v-model="lastName"
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
:label="$t('form.businessRegistration.businessRegistration')"
|
||||
v-model="businessRegistrationDate"
|
||||
class="col-3"
|
||||
:id="`${prefixId}-input-birth-date`"
|
||||
:readonly="readonly"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
:label="$t('customerEmployee.form.visaPlace')"
|
||||
v-model="visaPlace"
|
||||
class="col-3"
|
||||
:id="`${prefixId}-input-birth-date`"
|
||||
:readonly="readonly"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('form.businessRegistration.businessType')"
|
||||
for="input-last-name"
|
||||
v-model="businessType"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('form.businessRegistration.businessName')"
|
||||
for="input-last-name"
|
||||
v-model="businessName"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('form.businessRegistration.romanCharacters')"
|
||||
for="input-last-name"
|
||||
v-model="romanCharacters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AddressForm
|
||||
prefixId="form-tm6"
|
||||
hide-icon
|
||||
hide-title
|
||||
hide-input-en
|
||||
dense
|
||||
v-model:homeCode="homeCode"
|
||||
v-model:employmentOffice="employmentOffice"
|
||||
v-model:address="address"
|
||||
v-model:street="street"
|
||||
v-model:moo="moo"
|
||||
v-model:soi="soi"
|
||||
v-model:province-id="provinceId"
|
||||
v-model:district-id="districtId"
|
||||
v-model:sub-district-id="subDistrictId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue