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