refactor: branch form
This commit is contained in:
puriphatt
Net
parent
a1f691a613
commit
fb076fc074
15 changed files with 651 additions and 274 deletions
|
|
@ -18,7 +18,7 @@ defineProps<{
|
|||
separator?: boolean;
|
||||
employee?: boolean;
|
||||
disabledRule?: boolean;
|
||||
id?: number;
|
||||
indexId?: number;
|
||||
prefixId: string;
|
||||
}>();
|
||||
|
||||
|
|
@ -147,10 +147,17 @@ watch(districtId, fetchSubDistrict);
|
|||
</script>
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<div class="col-12 app-text-muted row items-center q-mb-md">
|
||||
<span class="q-mr-lg">
|
||||
• {{ title || $t('formDialogTitlePersonnelAddress') }}
|
||||
</span>
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-map-marker-radius"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
|
||||
{{ title || $t('formDialogTitlePersonnelAddress') }}
|
||||
|
||||
<div
|
||||
v-if="employee"
|
||||
class="surface-3 q-px-sm q-py-xs row"
|
||||
|
|
@ -184,13 +191,11 @@ watch(districtId, fetchSubDistrict);
|
|||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-y-md">
|
||||
<div
|
||||
class="col-md-3 col-12 app-text-muted"
|
||||
:class="{ 'q-pl-xl': !$q.screen.xs }"
|
||||
>
|
||||
<div class="col-12 app-text-muted-2">
|
||||
<q-icon size="xs" class="q-mr-xs" name="mdi-map-marker" />
|
||||
{{ addressTitle || $t('formDialogTitleAddressPure') }}
|
||||
</div>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
|
|
@ -200,7 +205,7 @@ watch(districtId, fetchSubDistrict);
|
|||
:dense="dense"
|
||||
:label="$t('address')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
|
|
@ -231,7 +236,7 @@ watch(districtId, fetchSubDistrict);
|
|||
:options="provinceOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `select-province-${indexId}` : 'select-province'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
|
|
@ -273,7 +278,7 @@ watch(districtId, fetchSubDistrict);
|
|||
:options="districtOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `select-district-${indexId}` : 'select-district'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
|
|
@ -314,7 +319,7 @@ watch(districtId, fetchSubDistrict);
|
|||
:options="subDistrictOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `select-sub-district-${indexId}` : 'select-sub-district'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
|
|
@ -337,25 +342,25 @@ watch(districtId, fetchSubDistrict);
|
|||
</q-select>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:disable="!readonly"
|
||||
readonly
|
||||
:label="$t('zipCode')"
|
||||
class="col-md-3 col-6"
|
||||
class="col-md-2 col-6"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-3 col-12 app-text-muted"
|
||||
:class="{ 'q-pl-xl': !$q.screen.xs }"
|
||||
>
|
||||
{{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
|
||||
|
||||
<div class="col-12 app-text-muted-2">
|
||||
<q-icon size="xs" class="q-mr-xs" name="mdi-map-marker" />
|
||||
{{ addressTitle || $t('formDialogTitleAddressPureEN') }}
|
||||
</div>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-address-en-${indexId}` : 'input-address-en'}`"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
outlined
|
||||
|
|
@ -393,7 +398,7 @@ watch(districtId, fetchSubDistrict);
|
|||
:options="provinceOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `select-province-en-${indexId}` : 'select-province-en'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
|
|
@ -434,7 +439,7 @@ watch(districtId, fetchSubDistrict);
|
|||
:options="districtOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `select-district-en-${indexId}` : 'select-district-en'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
|
|
@ -475,7 +480,7 @@ watch(districtId, fetchSubDistrict);
|
|||
:options="subDistrictOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `select-sub-district-en-${indexId}` : 'select-sub-district-en'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
|
|
@ -499,23 +504,19 @@ watch(districtId, fetchSubDistrict);
|
|||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
hide-bottom-space
|
||||
:for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
:disable="!readonly"
|
||||
zip="zip-en"
|
||||
:label="$t('zipCode')"
|
||||
class="col-md-3 col-6"
|
||||
class="col-md-2 col-6"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -69,33 +69,7 @@ const employeeTab = defineModel<string>('employeeTab');
|
|||
class="row q-col-gutter-y-md surface-1 rounded bordered"
|
||||
:class="{ 'q-pa-md': !noPaddingTab }"
|
||||
>
|
||||
<slot name="information"></slot>
|
||||
<slot name="person"></slot>
|
||||
<slot name="address" v-if="!noAddress">
|
||||
<FormAddress
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:employee="employee"
|
||||
:readonly="readonly"
|
||||
:disabledRule="disabledRule"
|
||||
v-model:address="address"
|
||||
v-model:addressEN="addressEN"
|
||||
v-model:provinceId="provinceId"
|
||||
v-model:districtId="districtId"
|
||||
v-model:subDistrictId="subDistrictId"
|
||||
v-model:zipCode="zipCode"
|
||||
v-model:same-with-employer="sameWithEmployer"
|
||||
:title="titleFormAddress"
|
||||
:addressTitle="addressTitle || ''"
|
||||
:addressTitleEN="addressTitleEN || ''"
|
||||
v-if="!$slots.address"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="qr-code"></slot>
|
||||
<slot name="location"></slot>
|
||||
<slot name="by-type"></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue