fix: form variable name
This commit is contained in:
puriphatt
parent
e6c0378762
commit
20307f0ddd
1 changed files with 205 additions and 194 deletions
|
|
@ -4,21 +4,19 @@ import AppBox from 'components/app/AppBox.vue';
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
title: string;
|
title: string;
|
||||||
addressLocaleTitle: string;
|
addressTitle: string;
|
||||||
addressEngTitle: string;
|
addressENTitle: string;
|
||||||
|
submit?: (...args: unknown[]) => void;
|
||||||
|
close?: (...args: unknown[]) => void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
interface Address {
|
|
||||||
address: string;
|
|
||||||
province: string;
|
|
||||||
district: string;
|
|
||||||
subDistrict: string;
|
|
||||||
zip: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const modal = defineModel('modal', { default: false });
|
const modal = defineModel('modal', { default: false });
|
||||||
const addressL = defineModel<Address>('addressL');
|
const address = defineModel('address', { default: '' });
|
||||||
const addressEng = defineModel<Address>('addressEng');
|
const addressEN = defineModel('addressEN', { default: '' });
|
||||||
|
const provinceId = defineModel('provinceId');
|
||||||
|
const districtId = defineModel('districtId');
|
||||||
|
const subDistrictId = defineModel('subDistrictId');
|
||||||
|
const zipCode = defineModel('zipCode', { default: '' });
|
||||||
|
|
||||||
const addrOptions = ref({
|
const addrOptions = ref({
|
||||||
provinceOps: [
|
provinceOps: [
|
||||||
|
|
@ -37,194 +35,207 @@ const addrOptions = ref({
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-dialog full-width v-model="modal">
|
<q-dialog full-width v-model="modal">
|
||||||
<AppBox
|
<AppBox style="padding: 0; border-radius: var(--radius-2)">
|
||||||
v-if="addressL && addressEng"
|
<q-form greedy @submit.prevent @validation-success="submit">
|
||||||
style="padding: 0; border-radius: var(--radius-2)"
|
<!-- header -->
|
||||||
>
|
<q-card-section class="form-header">
|
||||||
<!-- header -->
|
<div class="row items-center justity-between">
|
||||||
<q-card-section class="form-header">
|
<div
|
||||||
<div class="row items-center justity-between">
|
class="col text-subtitle1 text-weight-bold"
|
||||||
<div
|
style="color: hsl(var(--info-bg))"
|
||||||
class="col text-subtitle1 text-weight-bold"
|
>
|
||||||
style="color: hsl(var(--info-bg))"
|
{{ title }}
|
||||||
>
|
|
||||||
{{ title }}
|
|
||||||
</div>
|
|
||||||
<q-btn
|
|
||||||
round
|
|
||||||
flat
|
|
||||||
icon="mdi-close"
|
|
||||||
padding="xs"
|
|
||||||
class="close-btn"
|
|
||||||
:class="{ dark: $q.dark.isActive }"
|
|
||||||
v-close-popup
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<!-- form-top -->
|
|
||||||
<div class="form-body-top" :class="{ dark: $q.dark.isActive }">
|
|
||||||
<q-card-section class="column col-12">
|
|
||||||
<div class="row q-col-gutter-x-md" style="row-gap: 16px">
|
|
||||||
<slot name="top"></slot>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- form-mid -->
|
|
||||||
<div class="row" style="overflow-y: auto; max-height: 50vh">
|
|
||||||
<!-- prepend -->
|
|
||||||
<q-card-section
|
|
||||||
class="column col-4"
|
|
||||||
v-if="$slots.prepend && !$slots.append"
|
|
||||||
>
|
|
||||||
<slot name="prepend"></slot>
|
|
||||||
</q-card-section>
|
|
||||||
<!-- center -->
|
|
||||||
<q-card-section
|
|
||||||
class="column"
|
|
||||||
:class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="row inline col-12 q-col-gutter-x-md"
|
|
||||||
style="row-gap: 16px"
|
|
||||||
>
|
|
||||||
<slot name="midTop"></slot>
|
|
||||||
<div class="col-12">
|
|
||||||
{{ addressLocaleTitle }}
|
|
||||||
</div>
|
</div>
|
||||||
<q-input
|
<q-btn
|
||||||
dense
|
round
|
||||||
outlined
|
flat
|
||||||
label="ที่อยู่"
|
id="closeDialog"
|
||||||
class="col-12"
|
icon="mdi-close"
|
||||||
v-model="addressL.address"
|
padding="xs"
|
||||||
|
class="close-btn"
|
||||||
|
:class="{ dark: $q.dark.isActive }"
|
||||||
|
v-close-popup
|
||||||
|
@click="close"
|
||||||
/>
|
/>
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
v-model="addressL.province"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
label="จังหวัด"
|
|
||||||
class="col-3"
|
|
||||||
:options="addrOptions.provinceOps"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
v-model="addressL.district"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
label="อำเภอ"
|
|
||||||
class="col-3"
|
|
||||||
:options="addrOptions.districtOps"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
v-model="addressL.subDistrict"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
label="ตำบล"
|
|
||||||
class="col-3"
|
|
||||||
:options="addrOptions.subDistrictOps"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
dense
|
|
||||||
readonly
|
|
||||||
outlined
|
|
||||||
label="รหัสไปรษณีย์"
|
|
||||||
class="col-3"
|
|
||||||
v-model="addressL.zip"
|
|
||||||
/>
|
|
||||||
<span class="col-12">
|
|
||||||
{{ addressEngTitle }}
|
|
||||||
</span>
|
|
||||||
<q-input
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
label="ที่อยู่"
|
|
||||||
class="col-12"
|
|
||||||
v-model="addressEng.address"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
v-model="addressEng.province"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
label="จังหวัด"
|
|
||||||
class="col-3"
|
|
||||||
:options="addrOptions.provinceOps"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
v-model="addressEng.district"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
label="อำเภอ"
|
|
||||||
class="col-3"
|
|
||||||
:options="addrOptions.districtOps"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
v-model="addressEng.subDistrict"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
label="ตำบล"
|
|
||||||
class="col-3"
|
|
||||||
:options="addrOptions.subDistrictOps"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
dense
|
|
||||||
readonly
|
|
||||||
outlined
|
|
||||||
label="รหัสไปรษณีย์"
|
|
||||||
class="col-3"
|
|
||||||
v-model="addressEng.zip"
|
|
||||||
/>
|
|
||||||
<div class="col-12" v-if="$slots.midBottom">
|
|
||||||
<q-separator size="1px" />
|
|
||||||
</div>
|
|
||||||
<slot name="midBottom"></slot>
|
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<!-- append -->
|
|
||||||
<q-card-section
|
|
||||||
class="column col-6"
|
|
||||||
v-if="$slots.append && !$slots.prepend"
|
|
||||||
>
|
|
||||||
<slot name="append"></slot>
|
|
||||||
</q-card-section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- footer -->
|
<!-- form-top -->
|
||||||
<q-card-section class="form-footer">
|
<div class="form-body-top" :class="{ dark: $q.dark.isActive }">
|
||||||
<div class="text-right">
|
<q-card-section class="column col-12">
|
||||||
<q-btn
|
<div class="row q-col-gutter-x-md" style="row-gap: 16px">
|
||||||
dense
|
<slot name="top"></slot>
|
||||||
unelevated
|
</div>
|
||||||
color="primary"
|
</q-card-section>
|
||||||
class="q-px-sm"
|
|
||||||
:label="$t('save')"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
|
||||||
|
<!-- form-mid -->
|
||||||
|
<div class="row" style="overflow-y: auto; max-height: 50vh">
|
||||||
|
<!-- prepend -->
|
||||||
|
<q-card-section
|
||||||
|
class="column col-4"
|
||||||
|
v-if="$slots.prepend && !$slots.append"
|
||||||
|
>
|
||||||
|
<slot name="prepend"></slot>
|
||||||
|
</q-card-section>
|
||||||
|
<!-- center -->
|
||||||
|
<q-card-section
|
||||||
|
class="column"
|
||||||
|
:class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="row inline col-12 q-col-gutter-x-md"
|
||||||
|
style="row-gap: 16px"
|
||||||
|
>
|
||||||
|
<slot name="midTop"></slot>
|
||||||
|
<div class="col-12">
|
||||||
|
{{ addressTitle }}
|
||||||
|
</div>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
id="AddrL"
|
||||||
|
label="ที่อยู่"
|
||||||
|
class="col-12"
|
||||||
|
v-model="address"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
id="selectProvinceL"
|
||||||
|
v-model="provinceId"
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
label="จังหวัด"
|
||||||
|
class="col-3"
|
||||||
|
:options="addrOptions.provinceOps"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
id="selectDistrictL"
|
||||||
|
v-model="districtId"
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
label="อำเภอ"
|
||||||
|
class="col-3"
|
||||||
|
:options="addrOptions.districtOps"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-
|
||||||
|
id="selectSubDistrictL"
|
||||||
|
v-model="subDistrictId"
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
label="ตำบล"
|
||||||
|
class="col-3"
|
||||||
|
:options="addrOptions.subDistrictOps"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
id="zipL"
|
||||||
|
label="รหัสไปรษณีย์"
|
||||||
|
class="col-3"
|
||||||
|
v-model="zipCode"
|
||||||
|
/>
|
||||||
|
<span class="col-12">
|
||||||
|
{{ addressENTitle }}
|
||||||
|
</span>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
id="addressEN"
|
||||||
|
label="ที่อยู่"
|
||||||
|
class="col-12"
|
||||||
|
v-model="addressEN"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
id="selectProvinceEN"
|
||||||
|
v-model="provinceId"
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
label="จังหวัด"
|
||||||
|
class="col-3"
|
||||||
|
:options="addrOptions.provinceOps"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
id="selectDistrictEN"
|
||||||
|
v-model="districtId"
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
label="อำเภอ"
|
||||||
|
class="col-3"
|
||||||
|
:options="addrOptions.districtOps"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
id="SelectSubDistrictEN"
|
||||||
|
v-model="subDistrictId"
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
label="ตำบล"
|
||||||
|
class="col-3"
|
||||||
|
:options="addrOptions.subDistrictOps"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
zip="zipEN"
|
||||||
|
label="รหัสไปรษณีย์"
|
||||||
|
class="col-3"
|
||||||
|
v-model="zipCode"
|
||||||
|
/>
|
||||||
|
<div class="col-12" v-if="$slots.midBottom">
|
||||||
|
<q-separator size="1px" />
|
||||||
|
</div>
|
||||||
|
<slot name="midBottom"></slot>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<!-- append -->
|
||||||
|
<q-card-section
|
||||||
|
class="column col-6"
|
||||||
|
v-if="$slots.append && !$slots.prepend"
|
||||||
|
>
|
||||||
|
<slot name="append"></slot>
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- footer -->
|
||||||
|
<q-card-section class="form-footer">
|
||||||
|
<div class="text-right">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
id="submitBtn"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
class="q-px-sm"
|
||||||
|
:label="$t('save')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-form>
|
||||||
</AppBox>
|
</AppBox>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue