feat: customer branch
This commit is contained in:
Methapon2001
parent
74a26a0586
commit
e6e12ccea5
1 changed files with 252 additions and 2 deletions
|
|
@ -1,12 +1,41 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
|
||||||
import { CustomerCreate } from 'src/stores/customer/types';
|
import { CustomerCreate } from 'src/stores/customer/types';
|
||||||
|
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
|
const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
|
||||||
default: [],
|
default: [],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const tab = ref<
|
||||||
|
{
|
||||||
|
branch: NonNullable<CustomerCreate['customerBranch']>[number];
|
||||||
|
tab: string;
|
||||||
|
}[]
|
||||||
|
>([]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
branch,
|
||||||
|
() => {
|
||||||
|
tab.value =
|
||||||
|
branch.value?.map((a) => ({
|
||||||
|
branch: a,
|
||||||
|
tab: tab.value.find((b) => b.branch === a)?.tab || 'main',
|
||||||
|
})) || [];
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
(e: 'addBranch'): void;
|
||||||
|
(e: 'saveBranch', v: (typeof tab.value)[number]['branch']): void;
|
||||||
|
(e: 'deleteBranch', v: (typeof tab.value)[number]['branch']): void;
|
||||||
|
}>();
|
||||||
defineProps<{
|
defineProps<{
|
||||||
editable?: boolean;
|
editable?: boolean;
|
||||||
|
prefixId?: string;
|
||||||
|
customerType?: 'CORP' | 'PERS';
|
||||||
}>();
|
}>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -36,13 +65,234 @@ defineProps<{
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-for="item in branch">
|
<template v-for="(item, idx) in branch">
|
||||||
<span
|
<span
|
||||||
class="col-12 text-weight-bold"
|
class="col-12 text-weight-bold row items-center"
|
||||||
:id="`form-branch-customer-no-${item.branchNo}`"
|
:id="`form-branch-customer-no-${item.branchNo}`"
|
||||||
>
|
>
|
||||||
{{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
|
{{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
|
||||||
|
<q-btn
|
||||||
|
v-if="editable"
|
||||||
|
type="button"
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
text-color="red-9"
|
||||||
|
color="red-2"
|
||||||
|
:label="$t('delete')"
|
||||||
|
@click="$emit('deleteBranch', item)"
|
||||||
|
class="q-px-md q-ml-auto rounded"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-if="editable"
|
||||||
|
type="submit"
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
color="primary"
|
||||||
|
:label="$t('save')"
|
||||||
|
@click="$emit('saveBranch', item)"
|
||||||
|
class="q-px-md q-ml-sm rounded"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<div class="col-12" v-if="tab[idx]">
|
||||||
|
<div class="rounded bordered">
|
||||||
|
<q-tabs
|
||||||
|
v-model="tab[idx].tab"
|
||||||
|
dense
|
||||||
|
align="left"
|
||||||
|
class="bordered-b"
|
||||||
|
active-color="primary"
|
||||||
|
no-caps
|
||||||
|
>
|
||||||
|
<q-tab name="main" label="Main"></q-tab>
|
||||||
|
<q-tab name="address" label="Address"></q-tab>
|
||||||
|
</q-tabs>
|
||||||
|
<q-tab-panels v-model="tab[idx].tab">
|
||||||
|
<q-tab-panel name="main">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<q-input
|
||||||
|
lazy-rules="ondemand"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!editable"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="$t('customerBranch.form.no')"
|
||||||
|
v-model="item.branchNo"
|
||||||
|
:for="`${prefixId}-input-branch-${idx}-branch-no`"
|
||||||
|
type="number"
|
||||||
|
class="col-12 col-md-2"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
lazy-rules="ondemand"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
readonly
|
||||||
|
:disable="editable"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="$t('customerBranch.form.code')"
|
||||||
|
:model-value="item.code || '-'"
|
||||||
|
:for="`${prefixId}-input-branch-${idx}-branch-code`"
|
||||||
|
class="col-12 col-md-4"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
lazy-rules="ondemand"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!editable"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="$t('customerBranch.form.taxNo')"
|
||||||
|
v-model="item.taxNo"
|
||||||
|
:for="`${prefixId}-input-branch-${idx}-tax-no`"
|
||||||
|
type="number"
|
||||||
|
class="col-12 col-md-4"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
lazy-rules="ondemand"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!editable"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="$t('customerBranch.form.name')"
|
||||||
|
v-model="item.name"
|
||||||
|
:for="`${prefixId}-input-branch-${idx}-tax-no`"
|
||||||
|
class="col-12 col-md-6"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
lazy-rules="ondemand"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!editable"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="$t('customerBranch.form.nameEN')"
|
||||||
|
v-model="item.nameEN"
|
||||||
|
:for="`${prefixId}-input-branch-${idx}-tax-no`"
|
||||||
|
class="col-12 col-md-6"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
lazy-rules="ondemand"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-if="customerType === 'CORP'"
|
||||||
|
:readonly="!editable"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="$t('customerBranch.form.registerName')"
|
||||||
|
v-model="item.registerName"
|
||||||
|
:for="`${prefixId}-input-branch-${idx}-register-name`"
|
||||||
|
class="col-12 col-md-4"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
lazy-rules="ondemand"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!editable"
|
||||||
|
hide-bottom-space
|
||||||
|
v-if="customerType === 'CORP'"
|
||||||
|
:label="$t('customerBranch.form.authorizedCapital')"
|
||||||
|
v-model="item.authorizedCapital"
|
||||||
|
:for="`${prefixId}-input-branch-${idx}-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="item.registerDate"
|
||||||
|
:dark="$q.dark.isActive"
|
||||||
|
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:disabled="!editable"
|
||||||
|
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="!editable"
|
||||||
|
placeholder="DD/MM/YYYY"
|
||||||
|
:mask="!editable ? '' : '##/##/####'"
|
||||||
|
:model-value="
|
||||||
|
item.registerDate
|
||||||
|
? !editable
|
||||||
|
? dateFormat(item.registerDate)
|
||||||
|
: dateFormat(item.registerDate, false, false, true)
|
||||||
|
: undefined
|
||||||
|
"
|
||||||
|
@update:model-value="
|
||||||
|
(v) => {
|
||||||
|
if (v && v.toString().length === 10) {
|
||||||
|
const _date = parseAndFormatDate(v, $i18n.locale);
|
||||||
|
if (_date !== undefined) {
|
||||||
|
if (_date === null)
|
||||||
|
return (item.registerDate = null);
|
||||||
|
const isoDateOld =
|
||||||
|
item.registerDate?.toISOString() ||
|
||||||
|
new Date().toISOString();
|
||||||
|
const isoDateNew = _date?.toISOString();
|
||||||
|
console.log(isoDateOld, isoDateNew);
|
||||||
|
|
||||||
|
item.registerDate = new Date(
|
||||||
|
isoDateNew.split('T')[0] +
|
||||||
|
'T' +
|
||||||
|
isoDateOld.split('T')[1],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<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="!item.registerDate && editable"
|
||||||
|
name="mdi-close-circle"
|
||||||
|
class="cursor-pointer app-text-muted"
|
||||||
|
size="sm"
|
||||||
|
@click="item.registerDate = null"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</VueDatePicker>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="address">
|
||||||
|
<FormAddress
|
||||||
|
:prefix-id="prefixId || 'employer'"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:title="$t('form.address')"
|
||||||
|
v-model:address="item.address"
|
||||||
|
v-model:addressEN="item.addressEN"
|
||||||
|
v-model:provinceId="item.provinceId"
|
||||||
|
v-model:districtId="item.districtId"
|
||||||
|
v-model:subDistrictId="item.subDistrictId"
|
||||||
|
:addressTitle="$t('form.address')"
|
||||||
|
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||||
|
/>
|
||||||
|
{{ $t('form.address', { suffix: '(EN)' }) }}
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue