fix: form component
This commit is contained in:
puriphatt
parent
2d0102eefb
commit
e1462b2b88
11 changed files with 909 additions and 767 deletions
|
|
@ -1,24 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
|
||||
import { Province, District, SubDistrict } from 'stores/address';
|
||||
import useAddressStore from 'stores/address';
|
||||
import FormAddress from './02_personnel-management/FormAddress.vue';
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
addressTitle?: string;
|
||||
addressENTitle?: string;
|
||||
addressTitleEN?: string;
|
||||
addressSeparator?: boolean;
|
||||
submit?: (...args: unknown[]) => void;
|
||||
close?: (...args: unknown[]) => void;
|
||||
}>();
|
||||
|
||||
defineExpose({
|
||||
fetchDistrict,
|
||||
fetchSubDistrict,
|
||||
});
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
const modal = defineModel('modal', { default: false });
|
||||
const address = defineModel('address', { default: '' });
|
||||
const addressEN = defineModel('addressEN', { default: '' });
|
||||
|
|
@ -26,78 +18,22 @@ const provinceId = defineModel<string | null | undefined>('provinceId');
|
|||
const districtId = defineModel<string | null | undefined>('districtId');
|
||||
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
||||
const zipCode = defineModel<string>('zipCode', { default: '' });
|
||||
|
||||
const addrOptions = ref<{
|
||||
provinceOps?: Province[];
|
||||
districtOps?: District[];
|
||||
subDistrictOps?: SubDistrict[];
|
||||
}>({});
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
if (result) {
|
||||
addrOptions.value.provinceOps = result;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDistrict(id: string | undefined) {
|
||||
if (id) {
|
||||
const result = await adrressStore.fetchDistrictByProvinceId(id);
|
||||
if (result) {
|
||||
addrOptions.value.districtOps = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSubDistrict(id: string | undefined) {
|
||||
if (id) {
|
||||
const result = await adrressStore.fetchSubDistrictByProvinceId(id);
|
||||
if (result) {
|
||||
addrOptions.value.subDistrictOps = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function selectProvince(id: string) {
|
||||
if (!id) return;
|
||||
districtId.value = undefined;
|
||||
subDistrictId.value = undefined;
|
||||
addrOptions.value.districtOps = [];
|
||||
addrOptions.value.subDistrictOps = [];
|
||||
zipCode.value = '';
|
||||
await fetchDistrict(id);
|
||||
}
|
||||
|
||||
async function selectDistrict(id: string) {
|
||||
if (!id) return;
|
||||
subDistrictId.value = undefined;
|
||||
zipCode.value = '';
|
||||
await fetchSubDistrict(id);
|
||||
}
|
||||
|
||||
async function selectSubDistrict(id: string) {
|
||||
if (!id) return;
|
||||
zipCode.value =
|
||||
addrOptions.value.subDistrictOps
|
||||
?.filter((x) => x.id === id)
|
||||
.map((x) => x.zipCode)[0] ?? '';
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog full-width v-model="modal" @hide="close">
|
||||
<AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
|
||||
<AppBox
|
||||
style="
|
||||
padding: 0;
|
||||
border-radius: var(--radius-2);
|
||||
max-width: 80%;
|
||||
max-height: 100%;
|
||||
"
|
||||
>
|
||||
<q-form greedy @submit.prevent @validation-success="submit">
|
||||
<!-- header -->
|
||||
<q-card-section class="form-header">
|
||||
<div class="row items-center justity-between">
|
||||
<div
|
||||
class="col text-subtitle1 text-weight-bold"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
>
|
||||
<div class="form-header q-py-sm q-pr-lg">
|
||||
<div class="row items-center">
|
||||
<div class="col text-subtitle1 text-weight-bold text-center">
|
||||
{{ title }}
|
||||
</div>
|
||||
<q-btn
|
||||
|
|
@ -112,222 +48,89 @@ onMounted(async () => {
|
|||
@click="close"
|
||||
/>
|
||||
</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">
|
||||
<!-- body -->
|
||||
<div
|
||||
class="row form-body q-pa-lg"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
:style="$q.screen.gt.sm ? '' : 'overflow-y: auto; max-height: 75vh'"
|
||||
>
|
||||
<!-- prepend -->
|
||||
<q-card-section
|
||||
class="column col-2"
|
||||
<div
|
||||
class="column"
|
||||
:class="$q.screen.gt.sm ? 'col-2 q-pr-lg' : 'col-12'"
|
||||
v-if="$slots.prepend && !$slots.append"
|
||||
>
|
||||
<slot name="prepend"></slot>
|
||||
</q-card-section>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<q-card-section
|
||||
class="column"
|
||||
:class="`${$slots.prepend ? 'col-10' : $slots.append ? 'col-6' : 'col-12'}`"
|
||||
<AppBox
|
||||
bordered
|
||||
class="column full-height"
|
||||
:class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
|
||||
style="padding-right: 0"
|
||||
>
|
||||
<div
|
||||
class="row inline col-12 q-col-gutter-x-md"
|
||||
style="row-gap: 16px"
|
||||
class="row col-12 q-col-gutter-y-md q-pr-md"
|
||||
:style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
|
||||
>
|
||||
<slot name="midTop"></slot>
|
||||
<div class="col-12">
|
||||
{{ $t(addressTitle || 'address') }}
|
||||
</div>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
id="Addr"
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="address"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
id="selectProvince"
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
@update:model-value="(v: string) => selectProvince(v)"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('formDialogInputProvinceValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
id="selectDistrict"
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
@update:model-value="(v: string) => selectDistrict(v)"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('formDialogInputDistrictValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
id="SelectSubDistrict"
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('formDialogInputSubDistrictValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
id="zip"
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
<span class="col-12">{{ $t(addressTitle || 'address') }} EN</span>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
id="addressEN"
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="addressEN"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
id="selectProvinceEN"
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
@update:model-value="(v: string) => selectProvince(v)"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
id="selectDistrictEN"
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
@update:model-value="(v: string) => selectDistrict(v)"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
id="SelectSubDistrictEN"
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
zip="zipEN"
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
<div class="col-12" v-if="$slots.midBottom">
|
||||
<q-separator size="1px" />
|
||||
</div>
|
||||
<slot name="midBottom"></slot>
|
||||
<slot name="information"></slot>
|
||||
<slot name="person"></slot>
|
||||
<slot name="address">
|
||||
<FormAddress
|
||||
dense
|
||||
outlined
|
||||
:separator="addressSeparator"
|
||||
v-model:address="address"
|
||||
v-model:addressEN="addressEN"
|
||||
v-model:provinceId="provinceId"
|
||||
v-model:districtId="districtId"
|
||||
v-model:subDistrictId="subDistrictId"
|
||||
v-model:zipCode="zipCode"
|
||||
:addressTitle="addressTitle || ''"
|
||||
:addressTitleEN="addressTitleEN || ''"
|
||||
v-if="!$slots.address"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="qr-code"></slot>
|
||||
<slot name="location"></slot>
|
||||
<slot name="by-type"></slot>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</AppBox>
|
||||
|
||||
<!-- append -->
|
||||
<q-card-section
|
||||
<q-item-section
|
||||
class="column col-6"
|
||||
v-if="$slots.append && !$slots.prepend"
|
||||
>
|
||||
<slot name="append"></slot>
|
||||
</q-card-section>
|
||||
</q-item-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>
|
||||
<div class="form-footer q-py-sm q-pr-lg text-right q-gutter-x-lg">
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
unelevated
|
||||
id="cancelBtn"
|
||||
class="q-px-md app-text-negative"
|
||||
:label="$t('cancel')"
|
||||
@click="close"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
id="submitBtn"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="q-px-md"
|
||||
:label="$t('save')"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</AppBox>
|
||||
</q-dialog>
|
||||
|
|
@ -348,7 +151,7 @@ onMounted(async () => {
|
|||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.form-body-top {
|
||||
.form-body {
|
||||
--_body-bg: var(--sand-0);
|
||||
background-color: var(--_body-bg);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue