chore: clean unused
This commit is contained in:
Methapon2001
parent
9906e612a2
commit
89c7c4a66e
5 changed files with 0 additions and 1608 deletions
|
|
@ -1,536 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, watch, reactive, ref } from 'vue';
|
|
||||||
import useAddressStore, {
|
|
||||||
District,
|
|
||||||
Province,
|
|
||||||
SubDistrict,
|
|
||||||
} from 'src/stores/address';
|
|
||||||
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
|
||||||
import { QSelect } from 'quasar';
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
title?: string;
|
|
||||||
addressTitle?: string;
|
|
||||||
addressTitleEN?: string;
|
|
||||||
dense?: boolean;
|
|
||||||
outlined?: boolean;
|
|
||||||
readonly?: boolean;
|
|
||||||
separator?: boolean;
|
|
||||||
employee?: boolean;
|
|
||||||
disabledRule?: boolean;
|
|
||||||
indexId?: number;
|
|
||||||
prefixId: string;
|
|
||||||
hideTitle?: boolean;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const adrressStore = useAddressStore();
|
|
||||||
const address = defineModel('address', { default: '' });
|
|
||||||
const addressEN = defineModel('addressEN', { default: '' });
|
|
||||||
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 | null | undefined>('zipCode');
|
|
||||||
const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
|
|
||||||
|
|
||||||
const addrOptions = reactive<{
|
|
||||||
provinceOps: Province[];
|
|
||||||
districtOps: District[];
|
|
||||||
subDistrictOps: SubDistrict[];
|
|
||||||
}>({
|
|
||||||
provinceOps: [],
|
|
||||||
districtOps: [],
|
|
||||||
subDistrictOps: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
async function fetchProvince() {
|
|
||||||
const result = await adrressStore.fetchProvince();
|
|
||||||
|
|
||||||
if (result) addrOptions.provinceOps = result;
|
|
||||||
|
|
||||||
provinceFilter = selectFilterOptionRefMod(
|
|
||||||
ref(addrOptions.provinceOps),
|
|
||||||
provinceOptions,
|
|
||||||
'name',
|
|
||||||
);
|
|
||||||
|
|
||||||
provinceEnFilter = selectFilterOptionRefMod(
|
|
||||||
ref(addrOptions.provinceOps),
|
|
||||||
provinceOptions,
|
|
||||||
'nameEN',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchDistrict() {
|
|
||||||
if (!provinceId.value) return;
|
|
||||||
|
|
||||||
const result = await adrressStore.fetchDistrictByProvinceId(provinceId.value);
|
|
||||||
if (result) addrOptions.districtOps = result;
|
|
||||||
|
|
||||||
districtFilter = selectFilterOptionRefMod(
|
|
||||||
ref(addrOptions.districtOps),
|
|
||||||
districtOptions,
|
|
||||||
'name',
|
|
||||||
);
|
|
||||||
|
|
||||||
districtEnFilter = selectFilterOptionRefMod(
|
|
||||||
ref(addrOptions.districtOps),
|
|
||||||
districtOptions,
|
|
||||||
'nameEN',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchSubDistrict() {
|
|
||||||
if (!districtId.value) return;
|
|
||||||
const result = await adrressStore.fetchSubDistrictByProvinceId(
|
|
||||||
districtId.value,
|
|
||||||
);
|
|
||||||
if (result) addrOptions.subDistrictOps = result;
|
|
||||||
|
|
||||||
subDistrictFilter = selectFilterOptionRefMod(
|
|
||||||
ref(addrOptions.subDistrictOps),
|
|
||||||
subDistrictOptions,
|
|
||||||
'name',
|
|
||||||
);
|
|
||||||
|
|
||||||
subDistrictEnFilter = selectFilterOptionRefMod(
|
|
||||||
ref(addrOptions.subDistrictOps),
|
|
||||||
subDistrictOptions,
|
|
||||||
'nameEN',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function selectSubDistrict(id: string) {
|
|
||||||
if (!id) return;
|
|
||||||
zipCode.value =
|
|
||||||
addrOptions.subDistrictOps
|
|
||||||
?.filter((x) => x.id === id)
|
|
||||||
.map((x) => x.zipCode)[0] ?? '';
|
|
||||||
}
|
|
||||||
|
|
||||||
const provinceOptions = ref<Record<string, unknown>[]>([]);
|
|
||||||
let provinceFilter: (
|
|
||||||
value: string,
|
|
||||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
||||||
) => void;
|
|
||||||
let provinceEnFilter: (
|
|
||||||
value: string,
|
|
||||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
||||||
) => void;
|
|
||||||
|
|
||||||
const districtOptions = ref<Record<string, unknown>[]>([]);
|
|
||||||
let districtFilter: (
|
|
||||||
value: string,
|
|
||||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
||||||
) => void;
|
|
||||||
let districtEnFilter: (
|
|
||||||
value: string,
|
|
||||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
||||||
) => void;
|
|
||||||
|
|
||||||
const subDistrictOptions = ref<Record<string, unknown>[]>([]);
|
|
||||||
let subDistrictFilter: (
|
|
||||||
value: string,
|
|
||||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
||||||
) => void;
|
|
||||||
let subDistrictEnFilter: (
|
|
||||||
value: string,
|
|
||||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
||||||
) => void;
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchProvince();
|
|
||||||
await fetchDistrict();
|
|
||||||
await fetchSubDistrict();
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(provinceId, fetchDistrict);
|
|
||||||
watch(districtId, fetchSubDistrict);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12">
|
|
||||||
<div
|
|
||||||
v-if="!hideTitle"
|
|
||||||
class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
size="xs"
|
|
||||||
class="q-pa-sm rounded q-mr-xs"
|
|
||||||
color="info"
|
|
||||||
name="mdi-map-marker-radius-outline"
|
|
||||||
style="background-color: var(--surface-3)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{{ title || $t('formDialogTitlePersonnelAddress') }}
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="employee"
|
|
||||||
class="surface-3 q-px-sm q-py-xs row text-caption q-ml-md app-text-muted"
|
|
||||||
style="border-radius: var(--radius-3)"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
:id="`${prefixId}-same`"
|
|
||||||
class="q-px-sm q-mr-lg rounded cursor-pointer"
|
|
||||||
:class="{
|
|
||||||
dark: $q.dark.isActive,
|
|
||||||
'active-addr': sameWithEmployer,
|
|
||||||
'cursor-not-allowed': readonly,
|
|
||||||
}"
|
|
||||||
@click="readonly ? '' : (sameWithEmployer = true)"
|
|
||||||
>
|
|
||||||
{{ $t('formDialogToggleSameAddress') }}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
:id="`${prefixId}-custom`"
|
|
||||||
class="q-px-sm rounded cursor-pointer"
|
|
||||||
:class="{
|
|
||||||
dark: $q.dark.isActive,
|
|
||||||
'active-addr': !sameWithEmployer,
|
|
||||||
'cursor-not-allowed': readonly,
|
|
||||||
}"
|
|
||||||
@click="readonly ? '' : (sameWithEmployer = false)"
|
|
||||||
>
|
|
||||||
{{ $t('formDialogToggleCustomAddress') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 row q-col-gutter-y-md">
|
|
||||||
<div class="col-12 app-text-muted-2">
|
|
||||||
<q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
|
|
||||||
{{ addressTitle || $t('formDialogTitleAddressPure') }}
|
|
||||||
</div>
|
|
||||||
<div class="col-12 row q-col-gutter-sm">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-12"
|
|
||||||
v-model="address"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:dense="dense"
|
|
||||||
:label="$t('address')"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputAddressValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
option-label="name"
|
|
||||||
v-model="provinceId"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:dense="dense"
|
|
||||||
:label="$t('province')"
|
|
||||||
:options="provinceOptions"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `select-province-${indexId}` : 'select-province'}`"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputProvinceValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
@filter="provinceFilter"
|
|
||||||
@update:model-value="districtId = subDistrictId = zipCode = null"
|
|
||||||
>
|
|
||||||
<template v-slot:no-option>
|
|
||||||
<q-item>
|
|
||||||
<q-item-section class="text-grey">
|
|
||||||
{{ $t('noResults') }}
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
option-label="name"
|
|
||||||
v-model="districtId"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:dense="dense"
|
|
||||||
:label="$t('district')"
|
|
||||||
:options="districtOptions"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `select-district-${indexId}` : 'select-district'}`"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputDistrictValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
@filter="districtFilter"
|
|
||||||
@update:model-value="subDistrictId = zipCode = null"
|
|
||||||
>
|
|
||||||
<template v-slot:no-option>
|
|
||||||
<q-item>
|
|
||||||
<q-item-section class="text-grey">
|
|
||||||
{{ $t('noResults') }}
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
option-label="name"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
v-model="subDistrictId"
|
|
||||||
:dense="dense"
|
|
||||||
:label="$t('subDistrict')"
|
|
||||||
:options="subDistrictOptions"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `select-sub-district-${indexId}` : 'select-sub-district'}`"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputSubDistrictValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
|
||||||
@filter="subDistrictFilter"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:disable="!readonly"
|
|
||||||
readonly
|
|
||||||
:label="$t('zipCode')"
|
|
||||||
class="col-md-2 col-6"
|
|
||||||
v-model="zipCode"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 app-text-muted-2">
|
|
||||||
<q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
|
|
||||||
{{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
|
|
||||||
</div>
|
|
||||||
<div class="col-12 row q-col-gutter-sm">
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `input-address-en-${indexId}` : 'input-address-en'}`"
|
|
||||||
:dense="dense"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
outlined
|
|
||||||
hide-bottom-space
|
|
||||||
:label="$t('address')"
|
|
||||||
class="col-12"
|
|
||||||
v-model="addressEN"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputAddressValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
v-model="provinceId"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
option-label="nameEN"
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:dense="dense"
|
|
||||||
:label="$t('province')"
|
|
||||||
:options="provinceOptions"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `select-province-en-${indexId}` : 'select-province-en'}`"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputProvinceValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
@update:model-value="districtId = subDistrictId = zipCode = null"
|
|
||||||
@filter="provinceEnFilter"
|
|
||||||
>
|
|
||||||
<template v-slot:no-option>
|
|
||||||
<q-item>
|
|
||||||
<q-item-section class="text-grey">
|
|
||||||
{{ $t('noResults') }}
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
v-model="districtId"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
option-label="nameEN"
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:dense="dense"
|
|
||||||
:label="$t('district')"
|
|
||||||
:options="districtOptions"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `select-district-en-${indexId}` : 'select-district-en'}`"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputDistrictValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
@update:model-value="subDistrictId = zipCode = null"
|
|
||||||
@filter="districtEnFilter"
|
|
||||||
>
|
|
||||||
<template v-slot:no-option>
|
|
||||||
<q-item>
|
|
||||||
<q-item-section class="text-grey">
|
|
||||||
{{ $t('noResults') }}
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
option-label="nameEN"
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
v-model="subDistrictId"
|
|
||||||
:dense="dense"
|
|
||||||
:label="$t('subDistrict')"
|
|
||||||
:options="subDistrictOptions"
|
|
||||||
:readonly="readonly || sameWithEmployer"
|
|
||||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
|
||||||
:for="`${prefixId}-${indexId !== undefined ? `select-sub-district-en-${indexId}` : 'select-sub-district-en'}`"
|
|
||||||
:rules="
|
|
||||||
disabledRule
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
(val) =>
|
|
||||||
(val && val.length > 0) ||
|
|
||||||
$t('formDialogInputSubDistrictValidate'),
|
|
||||||
]
|
|
||||||
"
|
|
||||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
|
||||||
@filter="subDistrictEnFilter"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
hide-bottom-space
|
|
||||||
: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-2 col-6"
|
|
||||||
v-model="zipCode"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.active-addr {
|
|
||||||
color: hsl(var(--info-bg));
|
|
||||||
background-color: hsla(var(--info-bg) / 0.1);
|
|
||||||
border-radius: var(--radius-3);
|
|
||||||
|
|
||||||
&.dark {
|
|
||||||
background-color: var(--surface-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,260 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
title?: string;
|
|
||||||
dense?: boolean;
|
|
||||||
outlined?: boolean;
|
|
||||||
readonly?: boolean;
|
|
||||||
separator?: boolean;
|
|
||||||
typeCustomer?: string;
|
|
||||||
prefixId: string;
|
|
||||||
}>();
|
|
||||||
const { locale } = useI18n();
|
|
||||||
const branchCode = defineModel<string>('branchCode');
|
|
||||||
const legalEntityCode = defineModel<string>('legalEntityCode');
|
|
||||||
const taxNo = defineModel<string | null | undefined>('taxNo');
|
|
||||||
const customerName = defineModel<string>('customerName');
|
|
||||||
const customerEnglishName = defineModel<string>('customerEnglishName');
|
|
||||||
const authorizedCapital = defineModel<string>('authorizedCapital');
|
|
||||||
const registerName = defineModel<string>('registerName');
|
|
||||||
const registerDate = defineModel<Date | null | string>('registerDate');
|
|
||||||
const branchNo = defineModel<number>('branchNo');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3 col-12 app-text-muted">• {{ $t(`about`) }}</div>
|
|
||||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-branch-code`"
|
|
||||||
:id="`${prefixId}-input-branch-code`"
|
|
||||||
v-if="typeCustomer === 'PERS'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="true"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:label="$t('branchCode')"
|
|
||||||
v-model="branchCode"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-branch-no`"
|
|
||||||
:id="`${prefixId}-input-branch-no`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="!!branchCode"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
label="ลำดับที่"
|
|
||||||
v-model="branchNo"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-customer-name`"
|
|
||||||
:id="`${prefixId}-input-customer-name`"
|
|
||||||
v-if="typeCustomer === 'PERS'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md col-12"
|
|
||||||
:label="$t('customerName')"
|
|
||||||
v-model="customerName"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-customer-english-name`"
|
|
||||||
:id="`${prefixId}-input-customer-english-name`"
|
|
||||||
v-if="typeCustomer === 'PERS'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col"
|
|
||||||
:label="$t('customerEnglishName')"
|
|
||||||
v-model="customerEnglishName"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="row q-col-gutter-md">
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-branch-code`"
|
|
||||||
:id="`${prefixId}-input-branch-code`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="true"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:label="$t('branchCode')"
|
|
||||||
v-model="branchCode"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-legal-entity-code`"
|
|
||||||
:id="`${prefixId}-input-legal-entity-code`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="true"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:label="$t('legalEntityCode')"
|
|
||||||
v-model="legalEntityCode"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-customer-english-name`"
|
|
||||||
:id="`${prefixId}-input-customer-english-name`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-12"
|
|
||||||
:label="$t('customerEnglishName')"
|
|
||||||
v-model="customerEnglishName"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-customer-name`"
|
|
||||||
:id="`${prefixId}-input-customer-name`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-12"
|
|
||||||
:label="$t('customerName')"
|
|
||||||
v-model="customerName"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-tax-no`"
|
|
||||||
:id="`${prefixId}-input-tax-no`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('taxNo')"
|
|
||||||
v-model="taxNo"
|
|
||||||
:rules="[
|
|
||||||
(val) =>
|
|
||||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
|
||||||
$t('formDialogInputTaxNoValidate'),
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-register-name`"
|
|
||||||
:id="`${prefixId}-input-register-name`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-6"
|
|
||||||
:label="$t('registerName')"
|
|
||||||
v-model="registerName"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-authorized-capital`"
|
|
||||||
:id="`${prefixId}-input-authorized-capital`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:label="$t('authorizedCapital')"
|
|
||||||
v-model="authorizedCapital"
|
|
||||||
/>
|
|
||||||
<VueDatePicker
|
|
||||||
:id="`${prefixId}-date-picker-date`"
|
|
||||||
v-if="typeCustomer === 'CORP'"
|
|
||||||
:teleport="true"
|
|
||||||
utc
|
|
||||||
autoApply
|
|
||||||
v-model="registerDate"
|
|
||||||
:dark="$q.dark.isActive"
|
|
||||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
|
||||||
:enableTimePicker="false"
|
|
||||||
:disabled="readonly"
|
|
||||||
class="col-md-3 col-12"
|
|
||||||
>
|
|
||||||
<template #year="{ value }">
|
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-start-date`"
|
|
||||||
:id="`${prefixId}-input-start-date`"
|
|
||||||
:label="$t('registerDate')"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
placeholder="DD/MM/YYYY"
|
|
||||||
:mask="readonly ? '' : '##/##/####'"
|
|
||||||
:model-value="
|
|
||||||
registerDate
|
|
||||||
? readonly
|
|
||||||
? dateFormat(registerDate)
|
|
||||||
: dateFormat(registerDate, false, false, true)
|
|
||||||
: undefined
|
|
||||||
"
|
|
||||||
@update:model-value="
|
|
||||||
(v) => {
|
|
||||||
if (v && v.toString().length === 10) {
|
|
||||||
registerDate = parseAndFormatDate(v, locale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
size="xs"
|
|
||||||
name="mdi-calendar-blank-outline"
|
|
||||||
class="cursor-pointer"
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="registerDate && !readonly"
|
|
||||||
name="mdi-close-circle"
|
|
||||||
class="cursor-pointer app-text-muted"
|
|
||||||
size="sm"
|
|
||||||
@click="registerDate = undefined"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</VueDatePicker>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-separator
|
|
||||||
v-if="separator"
|
|
||||||
class="col-12 q-mt-xl q-mb-md"
|
|
||||||
style="padding-block: 0.5px"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
|
|
@ -1,475 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { QSelect } from 'quasar';
|
|
||||||
import { getRole } from 'src/services/keycloak';
|
|
||||||
import { CustomerBranch } from 'src/stores/customer/types';
|
|
||||||
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
|
||||||
import { onMounted, ref, watch } from 'vue';
|
|
||||||
|
|
||||||
const personName = defineModel<string>('personName');
|
|
||||||
const customerName = defineModel<string>('customerName');
|
|
||||||
const customerNameEn = defineModel<string>('customerNameEn');
|
|
||||||
const registeredBranchId = defineModel<string>('registeredBranchId');
|
|
||||||
const optionsBranch = defineModel<{ id: string; name: string }[]>(
|
|
||||||
'optionsBranch',
|
|
||||||
{ default: [] },
|
|
||||||
);
|
|
||||||
const taxNo = defineModel<string | null | undefined>('taxNo');
|
|
||||||
|
|
||||||
const employerID = defineModel<string>('employerID');
|
|
||||||
const slash = ref<string>('-');
|
|
||||||
|
|
||||||
// employee
|
|
||||||
const customerBranch = defineModel<{
|
|
||||||
id: string;
|
|
||||||
address: string;
|
|
||||||
addressEN: string;
|
|
||||||
provinceId: string;
|
|
||||||
districtId: string;
|
|
||||||
subDistrictId: string;
|
|
||||||
zipCode: string;
|
|
||||||
}>('customerBranch');
|
|
||||||
const employeeId = defineModel<string>('employeeId');
|
|
||||||
const nrcNo = defineModel<string>('nrcNo');
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
dense?: boolean;
|
|
||||||
outlined?: boolean;
|
|
||||||
readonly?: boolean;
|
|
||||||
separator?: boolean;
|
|
||||||
typeCustomer?: string;
|
|
||||||
employee?: boolean;
|
|
||||||
employeeOwnerOption?: CustomerBranch[];
|
|
||||||
prefixId: string;
|
|
||||||
showBtnSave: boolean;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
showBtnSave: false,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
defineEmits<{
|
|
||||||
(e: 'filterOwnerBranch', val: string, update: void): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const branchOptions = ref<Record<string, unknown>[]>([]);
|
|
||||||
let branchFilter: (
|
|
||||||
value: string,
|
|
||||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
||||||
) => void;
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => optionsBranch.value,
|
|
||||||
() => {
|
|
||||||
branchFilter = selectFilterOptionRefMod(
|
|
||||||
optionsBranch,
|
|
||||||
branchOptions,
|
|
||||||
'name',
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
branchFilter = selectFilterOptionRefMod(optionsBranch, branchOptions, 'name');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="col-md-3 col-12 app-text-muted">
|
|
||||||
• {{ $t(`formDialogTitleInformation`) }}
|
|
||||||
</div>
|
|
||||||
<div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-12"
|
|
||||||
option-value="id"
|
|
||||||
input-debounce="0"
|
|
||||||
option-label="name"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
v-model="registeredBranchId"
|
|
||||||
:dense="dense"
|
|
||||||
:readonly="readonly"
|
|
||||||
:options="branchOptions"
|
|
||||||
:hide-dropdown-icon="readonly"
|
|
||||||
:label="$t('registeredBranch')"
|
|
||||||
:for="`${prefixId}-input-source-nationality`"
|
|
||||||
:rules="[
|
|
||||||
(val) => {
|
|
||||||
const roles = getRole() || [];
|
|
||||||
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
|
|
||||||
(role) => roles.includes(role),
|
|
||||||
);
|
|
||||||
return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
@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"
|
|
||||||
:for="`${prefixId}-input-employer-id`"
|
|
||||||
:id="`${prefixId}-input-employer-id`"
|
|
||||||
v-if="typeCustomer === 'PERS'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('formDialogCustomerName')"
|
|
||||||
v-model="personName"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-tax-no`"
|
|
||||||
:id="`${prefixId}-input-tax-no`"
|
|
||||||
v-if="typeCustomer === 'PERS'"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('taxNo')"
|
|
||||||
v-model="taxNo"
|
|
||||||
:rules="[
|
|
||||||
(val) =>
|
|
||||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
|
||||||
$t('formDialogInputTaxNoValidate'),
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-customer-name`"
|
|
||||||
:id="`${prefixId}-input-customer-name`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="
|
|
||||||
$t(typeCustomer === 'PERS' ? 'corporationThai' : 'corporationThaiName')
|
|
||||||
"
|
|
||||||
v-model="customerName"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-customer-name-en`"
|
|
||||||
:id="`${prefixId}-input-customer-name-en`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="
|
|
||||||
$t(
|
|
||||||
typeCustomer === 'PERS'
|
|
||||||
? 'corporationEnglish'
|
|
||||||
: 'corporationEnglishName',
|
|
||||||
)
|
|
||||||
"
|
|
||||||
v-model="customerNameEn"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
v-if="typeCustomer !== 'PERS'"
|
|
||||||
:for="`${prefixId}-input-owner-name`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('companyOwnerName')"
|
|
||||||
v-model="personName"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="employee" class="col-md-9 col-12 row q-col-gutter-md">
|
|
||||||
<q-select
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:id="`${prefixId}-select-employer-branch`"
|
|
||||||
:for="`${prefixId}-select-employer-branch`"
|
|
||||||
:use-input="!customerBranch"
|
|
||||||
input-debounce="0"
|
|
||||||
:hide-dropdown-icon="readonly"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly || customerBranch !== undefined"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-12"
|
|
||||||
:label="$t('formDialogEmployerBranchCode')"
|
|
||||||
v-model="customerBranch"
|
|
||||||
:option-value="
|
|
||||||
(v) => ({
|
|
||||||
id: v.id,
|
|
||||||
address: v.address,
|
|
||||||
addressEN: v.addressEN,
|
|
||||||
provinceId: v.provinceId,
|
|
||||||
districtId: v.districtId,
|
|
||||||
subDistrictId: v.subDistrictId,
|
|
||||||
zipCode: v.zipCode,
|
|
||||||
})
|
|
||||||
"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
:options="employeeOwnerOption"
|
|
||||||
@filter="(val, update) => $emit('filterOwnerBranch', val, update)"
|
|
||||||
:rules="[
|
|
||||||
(val: string) =>
|
|
||||||
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<template v-slot:option="scope">
|
|
||||||
<q-item
|
|
||||||
v-if="scope.opt"
|
|
||||||
v-bind="scope.itemProps"
|
|
||||||
class="row items-start col-12 no-padding"
|
|
||||||
>
|
|
||||||
<div class="q-ma-sm">
|
|
||||||
<i class="isax isax-frame5" style="color: var(--brand-1)" />
|
|
||||||
</div>
|
|
||||||
<div class="q-mt-sm">
|
|
||||||
<div>
|
|
||||||
{{ scope.opt.code }} {{ $t('branchName') }}:
|
|
||||||
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-caption app-text-muted-2 q-mb-xs">
|
|
||||||
<div v-if="scope.opt.customer" class="col column">
|
|
||||||
<span>
|
|
||||||
{{ $t('customerBranchName') }}:
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.customer.customerNameEN
|
|
||||||
: scope.opt.customer.customerName
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
{{
|
|
||||||
scope.opt.customer.customerType === 'PERS'
|
|
||||||
? $t('formDialogCustomerName')
|
|
||||||
: $t('companyOwnerName')
|
|
||||||
}}:
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.customer.personName
|
|
||||||
: scope.opt.customer.personName
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="scope.opt.province" class="col">
|
|
||||||
{{ $t('address') }}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.addressEN
|
|
||||||
: scope.opt.address
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.subDistrict.nameEN
|
|
||||||
: scope.opt.subDistrict.name
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.district.nameEN
|
|
||||||
: scope.opt.district.name
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.province.nameEN
|
|
||||||
: scope.opt.province.name
|
|
||||||
}}
|
|
||||||
{{ scope.opt.zipCode }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-item>
|
|
||||||
<q-separator class="q-mx-sm" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:selected-item="scope">
|
|
||||||
<div
|
|
||||||
v-if="scope.opt"
|
|
||||||
class="row items-center no-wrap"
|
|
||||||
style="width: 1px"
|
|
||||||
>
|
|
||||||
<div class="q-mr-sm">
|
|
||||||
{{ scope.opt.code }}
|
|
||||||
{{ $t('branchName') }}:
|
|
||||||
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="text-caption app-text-muted-2"
|
|
||||||
v-if="scope.opt.customer && scope.opt.province"
|
|
||||||
>
|
|
||||||
{{ $t('customerBranchName') }}:
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.customer.customerNameEN
|
|
||||||
: scope.opt.customer.customerName
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
scope.opt.customer.customerType === 'PERS'
|
|
||||||
? $t('formDialogCustomerName')
|
|
||||||
: $t('companyOwnerName')
|
|
||||||
}}:
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.customer.personName
|
|
||||||
: scope.opt.customer.personName
|
|
||||||
}}
|
|
||||||
{{ $t('address') }}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.subDistrict.nameEN
|
|
||||||
: scope.opt.subDistrict.name
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.district.nameEN
|
|
||||||
: scope.opt.district.name
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.province.nameEN
|
|
||||||
: scope.opt.province.name
|
|
||||||
}}
|
|
||||||
{{ scope.opt.zipCode }}
|
|
||||||
<q-tooltip v-if="scope.opt.customer && scope.opt.province">
|
|
||||||
{{ $t('customerBranchName') }}:
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.customer.customerNameEN
|
|
||||||
: scope.opt.customer.customerName
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
scope.opt.customer.customerType === 'PERS'
|
|
||||||
? $t('formDialogCustomerName')
|
|
||||||
: $t('companyOwnerName')
|
|
||||||
}}:
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.customer.personName
|
|
||||||
: scope.opt.customer.personName
|
|
||||||
}}
|
|
||||||
{{ $t('address') }}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.addressEN
|
|
||||||
: scope.opt.address
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.subDistrict.nameEN
|
|
||||||
: scope.opt.subDistrict.name
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.district.nameEN
|
|
||||||
: scope.opt.district.name
|
|
||||||
}}
|
|
||||||
{{
|
|
||||||
$i18n.locale === 'en-US'
|
|
||||||
? scope.opt.province.nameEN
|
|
||||||
: scope.opt.province.name
|
|
||||||
}}
|
|
||||||
{{ scope.opt.zipCode }}
|
|
||||||
</q-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="!readonly && customerBranch"
|
|
||||||
name="mdi-close-circle"
|
|
||||||
@click.stop="customerBranch = undefined"
|
|
||||||
class="cursor-pointer clear-btn"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-employee-id`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="true"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-6"
|
|
||||||
:label="$t('formDialogEmployeeID')"
|
|
||||||
v-model="employeeId"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
v-if="readonly && !nrcNo"
|
|
||||||
:for="`${prefixId}-input-nrc-no`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-6"
|
|
||||||
:label="$t('formDialogEmployeeNRCNo')"
|
|
||||||
v-model="slash"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
v-else
|
|
||||||
mask="## #### ###### #"
|
|
||||||
:for="`${prefixId}-input-nrc-no`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
hide-bottom-space
|
|
||||||
:readonly="readonly"
|
|
||||||
class="col-6"
|
|
||||||
:label="$t('formDialogEmployeeNRCNo')"
|
|
||||||
v-model="nrcNo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 row justify-end" style="min-height: 50px">
|
|
||||||
<q-btn
|
|
||||||
v-if="!readonly && showBtnSave"
|
|
||||||
dense
|
|
||||||
unelevated
|
|
||||||
id="save-basic-info"
|
|
||||||
color="primary"
|
|
||||||
class="q-px-md"
|
|
||||||
:label="$t('save')"
|
|
||||||
@click="$emit('save')"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-separator
|
|
||||||
v-if="separator"
|
|
||||||
class="col-12 q-mt-md q-mb-md"
|
|
||||||
style="padding-block: 0.5px"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.clear-btn {
|
|
||||||
opacity: 50%;
|
|
||||||
transition: opacity 0.2s ease-in-out;
|
|
||||||
&:hover {
|
|
||||||
opacity: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps<{
|
|
||||||
title?: string;
|
|
||||||
dense?: boolean;
|
|
||||||
outlined?: boolean;
|
|
||||||
readonly?: boolean;
|
|
||||||
separator?: boolean;
|
|
||||||
prefixId: string;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const mail = defineModel<string>('mail');
|
|
||||||
const telephone = defineModel<string>('telephone');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3 col-12 app-text-muted">
|
|
||||||
• {{ $t(`formDialogTitleContact`) }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-mail`"
|
|
||||||
:id="`${prefixId}-input-mail`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('customerBranch.form.mail')"
|
|
||||||
v-model="mail"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-telephone`"
|
|
||||||
:id="`${prefixId}-input-telephone`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('customerBranch.form.telephone')"
|
|
||||||
v-model="telephone"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-separator
|
|
||||||
v-if="separator"
|
|
||||||
class="col-12 q-mt-xl q-mb-md"
|
|
||||||
style="padding-block: 0.5px"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
|
|
@ -1,282 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
|
||||||
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
|
||||||
import { onMounted } from 'vue';
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
const { locale } = useI18n({ useScope: 'global' });
|
|
||||||
|
|
||||||
const employmentOffice = defineModel<string>('employmentOffice');
|
|
||||||
const bussinessType = defineModel<string>('bussinessType');
|
|
||||||
const jobPosition = defineModel<string>('jobPosition');
|
|
||||||
|
|
||||||
const bussinessTypeEN = defineModel<string>('bussinessTypeEn');
|
|
||||||
const jobPositionEN = defineModel<string>('jobPositionEn');
|
|
||||||
|
|
||||||
const jobDescription = defineModel<string>('jobDescription');
|
|
||||||
|
|
||||||
const payDate = defineModel<Date | null | string>('payDate');
|
|
||||||
const wageRate = defineModel<number>('wageRate');
|
|
||||||
|
|
||||||
const saleEmployee = defineModel<string>('saleEmployee');
|
|
||||||
|
|
||||||
const rawOption = ref();
|
|
||||||
|
|
||||||
const typeBusinessOption = ref([]);
|
|
||||||
const jobPositionOption = ref([]);
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
title?: string;
|
|
||||||
dense?: boolean;
|
|
||||||
outlined?: boolean;
|
|
||||||
readonly?: boolean;
|
|
||||||
separator?: boolean;
|
|
||||||
prefixId: string;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const resultOption = await fetch('/option/option.json');
|
|
||||||
rawOption.value = await resultOption.json();
|
|
||||||
|
|
||||||
if (locale.value === 'en-US') {
|
|
||||||
typeBusinessOption.value = rawOption.value.eng.businessType;
|
|
||||||
jobPositionOption.value = rawOption.value.eng.position;
|
|
||||||
}
|
|
||||||
if (locale.value === 'th-th') {
|
|
||||||
typeBusinessOption.value = rawOption.value.tha.businessType;
|
|
||||||
jobPositionOption.value = rawOption.value.tha.position;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const typeBusinessOptions = ref<Record<string, unknown>[]>([]);
|
|
||||||
const typeBusinessFilter = selectFilterOptionRefMod(
|
|
||||||
typeBusinessOption,
|
|
||||||
typeBusinessOptions,
|
|
||||||
'label',
|
|
||||||
);
|
|
||||||
|
|
||||||
const jobPositionOptions = ref<Record<string, unknown>[]>([]);
|
|
||||||
const jobPositionFilter = selectFilterOptionRefMod(
|
|
||||||
jobPositionOption,
|
|
||||||
jobPositionOptions,
|
|
||||||
'label',
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row q-col-gutter-y-md">
|
|
||||||
<div class="col-md-3 col-12 app-text-muted">
|
|
||||||
• {{ $t('businessInformation') }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-employment-office`"
|
|
||||||
:id="`${prefixId}-input-employment-office`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-12"
|
|
||||||
:label="$t('inputCustomerAddress')"
|
|
||||||
v-model="employmentOffice"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
input-debounce="0"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
v-model="bussinessType"
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:dense="dense"
|
|
||||||
:readonly="readonly"
|
|
||||||
:label="$t('businessType')"
|
|
||||||
:options="typeBusinessOptions"
|
|
||||||
:for="`${prefixId}-select-business-type`"
|
|
||||||
@filter="typeBusinessFilter"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
:for="`${prefixId}-input-bussiness-type-en`"
|
|
||||||
:id="`${prefixId}-input-bussiness-type-en`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('businessTypeEN')"
|
|
||||||
v-model="bussinessTypeEN"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-select
|
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
fill-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-selected
|
|
||||||
hide-bottom-space
|
|
||||||
input-debounce="0"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
v-model="jobPosition"
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:dense="dense"
|
|
||||||
:readonly="readonly"
|
|
||||||
:label="$t('jobPosition')"
|
|
||||||
:options="jobPositionOptions"
|
|
||||||
:for="`${prefixId}-select-job-position`"
|
|
||||||
@filter="jobPositionFilter"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
:for="`${prefixId}-input-job-position-en`"
|
|
||||||
:id="`${prefixId}-input-job-position-en`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('jobPositionEN')"
|
|
||||||
v-model="jobPositionEN"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-job-description`"
|
|
||||||
:id="`${prefixId}-input-job-description`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-6 col-12"
|
|
||||||
:label="$t('jobDescription')"
|
|
||||||
v-model="jobDescription"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<VueDatePicker
|
|
||||||
:id="`${prefixId}-date-picker-start-date`"
|
|
||||||
:teleport="true"
|
|
||||||
utc
|
|
||||||
autoApply
|
|
||||||
v-model="payDate"
|
|
||||||
:dark="$q.dark.isActive"
|
|
||||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
|
||||||
:enableTimePicker="false"
|
|
||||||
:disabled="readonly"
|
|
||||||
class="col-md-3 col-12"
|
|
||||||
>
|
|
||||||
<template #year="{ value }">
|
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-start-date`"
|
|
||||||
:id="`${prefixId}-input-start-date`"
|
|
||||||
:label="$t('payDay')"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
placeholder="DD/MM/YYYY"
|
|
||||||
:mask="readonly ? '' : '##/##/####'"
|
|
||||||
:model-value="
|
|
||||||
payDate
|
|
||||||
? readonly
|
|
||||||
? dateFormat(payDate)
|
|
||||||
: dateFormat(payDate, false, false, true)
|
|
||||||
: undefined
|
|
||||||
"
|
|
||||||
@update:model-value="
|
|
||||||
(v) => {
|
|
||||||
if (v && v.toString().length === 10) {
|
|
||||||
payDate = parseAndFormatDate(v, locale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
size="xs"
|
|
||||||
name="mdi-calendar-blank-outline"
|
|
||||||
class="cursor-pointer"
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="payDate && !readonly"
|
|
||||||
name="mdi-close-circle"
|
|
||||||
class="cursor-pointer app-text-muted"
|
|
||||||
size="sm"
|
|
||||||
@click="payDate = undefined"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</VueDatePicker>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-pay-rate`"
|
|
||||||
:id="`${prefixId}-input-pay-rate`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-md-3 col-6"
|
|
||||||
:label="$t('payRate')"
|
|
||||||
v-model="wageRate"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
lazy-rules="ondemand"
|
|
||||||
:for="`${prefixId}-input-sales-person`"
|
|
||||||
:id="`${prefixId}-input-sales-person`"
|
|
||||||
:dense="dense"
|
|
||||||
outlined
|
|
||||||
:readonly="readonly"
|
|
||||||
hide-bottom-space
|
|
||||||
class="col-6"
|
|
||||||
:label="$t('salesPerson')"
|
|
||||||
v-model="saleEmployee"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-separator
|
|
||||||
v-if="separator"
|
|
||||||
class="col-12 q-mb-md"
|
|
||||||
style="padding-block: 0.5px; margin-top: 32px"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue