178 lines
5 KiB
Vue
178 lines
5 KiB
Vue
<script setup lang="ts">
|
|
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
|
|
|
const id = defineModel<string>('id');
|
|
const branchNo = defineModel<number>('branchNo');
|
|
const code = defineModel<string>('code');
|
|
const taxNo = defineModel<string | null>('taxNo');
|
|
const name = defineModel<string>('name');
|
|
const nameEN = defineModel<string>('nameEn');
|
|
const registerName = defineModel<string>('registerName');
|
|
const registerDate = defineModel<Date | null>('registerDate');
|
|
const authorizedCapital = defineModel<string>('authorizedCapital');
|
|
|
|
defineProps<{
|
|
code?: string;
|
|
readonly?: boolean;
|
|
prefixId?: string;
|
|
customerType?: 'PERS' | 'CORP';
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row q-col-gutter-md">
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
:readonly="!!id || readonly"
|
|
hide-bottom-space
|
|
:label="$t('customerBranch.form.no')"
|
|
v-model="branchNo"
|
|
:for="`${prefixId}-input-branch-branch-no`"
|
|
type="number"
|
|
class="col-12 col-md-2"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
readonly
|
|
hide-bottom-space
|
|
:label="$t('customerBranch.form.code')"
|
|
:model-value="code || '-'"
|
|
:for="`${prefixId}-input-branch-branch-code`"
|
|
class="col-12 col-md-4"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
:label="$t('customerBranch.form.taxNo')"
|
|
v-model="taxNo"
|
|
:for="`${prefixId}-input-branch-tax-no`"
|
|
type="number"
|
|
class="col-12 col-md-4"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
:label="$t('customerBranch.form.name')"
|
|
v-model="name"
|
|
:for="`${prefixId}-input-branch-tax-no`"
|
|
class="col-12 col-md-6"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
:label="$t('customerBranch.form.nameEN')"
|
|
v-model="nameEN"
|
|
:for="`${prefixId}-input-branch-tax-no`"
|
|
class="col-12 col-md-6"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
v-if="customerType === 'CORP'"
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
:label="$t('customerBranch.form.registerName')"
|
|
v-model="registerName"
|
|
:for="`${prefixId}-input-branch-register-name`"
|
|
class="col-12 col-md-4"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
dense
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
v-if="customerType === 'CORP'"
|
|
:label="$t('customerBranch.form.authorizedCapital')"
|
|
v-model="authorizedCapital"
|
|
:for="`${prefixId}-input-branch-authorized-capital`"
|
|
class="col-12 col-md-4"
|
|
/>
|
|
<VueDatePicker
|
|
:id="`${prefixId}-picker-date-register-date`"
|
|
:teleport="true"
|
|
utc
|
|
v-if="customerType === 'CORP'"
|
|
auto-apply
|
|
v-model="registerDate"
|
|
:dark="$q.dark.isActive"
|
|
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
|
:enableTimePicker="false"
|
|
:disabled="readonly"
|
|
class="col-md-4 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('customerBranch.form.registerDate')"
|
|
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 (readonly && v && v.toString().length === 10) {
|
|
const _date = parseAndFormatDate(v, $i18n.locale);
|
|
if (_date) {
|
|
registerDate?.setDate(_date.getDate());
|
|
registerDate?.setMonth(_date.getMonth());
|
|
registerDate?.setFullYear(_date.getFullYear());
|
|
} else {
|
|
registerDate = null;
|
|
}
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<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 = null"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</VueDatePicker>
|
|
</div>
|
|
</template>
|