chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: by value

Browse source
This commit is contained in:
Net 2024-08-21 14:46:50 +07:00
parent bbe7604ab2
commit f334364e8e
2 changed files with 100 additions and 253 deletions
Download patch file Download diff file Expand all files Collapse all files

319
src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
View file

@ -1,20 +1,30 @@
<script setup lang="ts">
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { ref } from 'vue';
import DatePicker from 'src/components/shared/DatePicker.vue';
const citizenId = defineModel<string | undefined>('citizenId', {
required: true,
});
const legalPersonNo = defineModel<string | undefined>('legalPersonNo', {
required: true,
});
const branchCode = defineModel<string | undefined>('branchCode', {
required: true,
});
// const customerCode = defineModel<string | undefined>('customerCode', {
// required: true,
// });
const registerName = defineModel<string | undefined>('registerName', {
required: true,
});
const registerNameEN = defineModel<string>('registerNameEN');
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');
const test = ref<string>('-');
defineProps<{
index: string;
customerName?: string;
code?: string;
readonly?: boolean;
prefixId?: string;
@ -34,46 +44,33 @@ defineProps<{
class="col-12 col-md-3"
:label="$t('customer.form.legalPersonNo')"
for="input-legal-person-no"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
v-model="legalPersonNo"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:readonly="readonly"
disable
hide-bottom-space
class="col-12 col-md-3"
:label="$t('customer.form.branchCode')"
for="input-branch-code"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
:label="$t('customer.form.branchCode')"
:readonly="readonly"
:model-value="`${branchCode}${index}`"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:readonly="readonly"
hide-bottom-space
disable
class="col-12 col-md-3"
:label="$t('customer.form.customerCode')"
for="input-customer-code"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
:readonly="readonly"
:label="$t('customer.form.customerCode')"
:model-value="customerName"
/>
<q-input
@ -85,12 +82,7 @@ defineProps<{
class="col-12 col-md-3"
:label="$t('customer.form.legalPersonCode')"
for="input-legal-person-code"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
:model-value="legalPersonNo"
/>
<q-input
@ -102,12 +94,7 @@ defineProps<{
class="col-12 col-md-6"
:label="$t('customer.form.registerName')"
for="input-register-name"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
v-model="registerName"
/>
<q-input
@ -119,12 +106,7 @@ defineProps<{
class="col-12 col-md-6"
:label="$t('customer.form.registerNameEN')"
for="input-register-name-en"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
v-model="registerNameEN"
/>
<q-input
@ -136,202 +118,57 @@ defineProps<{
class="col-12 col-md-2"
:label="$t('customer.form.authorizedCapital')"
for="input-authorized-capital"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
v-model="authorizedCapital"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-2"
<DatePicker
v-model="registerDate"
:id="`${prefixId}-input-register-date`"
:label="$t('customer.form.registerDate')"
for="input-register-date"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-2"
:label="$t('customer.form.registerCompanyName')"
for="input-register-company-name"
:model-value="test"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
clearable
/>
</template>
<template v-if="customerType === 'PERS'"></template>
<!-- <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> -->
<template v-if="customerType === 'PERS'">
<q-input
lazy-rules="ondemand"
dense
outlined
:disable="index !== '0'"
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-3"
:label="$t('customer.form.cardNumber')"
for="input-legal-person-no"
v-model="citizenId"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:disable="!readonly"
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-3"
:label="$t('customer.form.branchCode')"
for="input-branch-code"
:model-value="`${branchCode}${index}`"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:disable="!readonly"
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-3"
:label="$t('customer.form.customerCode')"
for="input-customer-code"
:model-value="customerName"
/>
</template>
</div>
</template>

34
src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
View file

@ -9,7 +9,6 @@ import EmployerFormAttachment from './EmployerFormAttachment.vue';
import {
SaveButton,
EditButton,
CancelButton,
DeleteButton,
UndoButton,
} from 'components/button';
@ -28,6 +27,8 @@ defineEmits<{
}>();
defineProps<{
index: number;
customerName: string;
readonly?: boolean;
prefixId?: string;
actionDisabled?: boolean;
@ -39,9 +40,13 @@ defineProps<{
<span
class="col-12 text-weight-bold row items-center q-mb-sm"
:style="{ opacity: actionDisabled ? '.5' : undefined }"
:id="`form-branch-customer-no-${item.branchNo}`"
:id="`form-branch-customer-no-${index}`"
>
{{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
{{
index === 0
? $t('customer.form.headQuarters.title')
: $t('customer.form.branch.title', { name: index || 0 })
}}
<EditButton
icon-only
v-if="readonly"
@ -93,16 +98,19 @@ defineProps<{
<q-tab-panels v-model="tab">
<q-tab-panel name="main">
<EmployerFormAbout
:index="index.toString()"
:readonly="readonly"
:customer-type="customerType"
:customer-name="customerName"
v-model:citizen-id="item.citizenId"
v-model:id="item.id"
v-model:branch-no="item.branchNo"
v-model:tax-no="item.taxNo"
v-model:code="item.code"
v-model:name="item.name"
v-model:name-en="item.nameEN"
v-model:registered-name="item.registerName"
v-model:registered-date="item.registerDate"
v-model:legal-person-no="item.legalPersonNo"
v-model:branch-code="item.code"
v-model:customer-code="item.customerCode"
v-model:register-company-name="item.registerCompanyName"
v-model:register-name="item.registerName"
v-model:register-name-en="item.registerNameEN"
v-model:register-date="item.registerDate"
v-model:authorized-capital="item.authorizedCapital"
/>
</q-tab-panel>
@ -114,6 +122,8 @@ defineProps<{
:readonly="readonly"
outlined
:title="$t('form.address')"
v-model:workplace="item.workplace"
v-model:workplace-en="item.workplaceEN"
v-model:address="item.address"
v-model:addressEN="item.addressEN"
v-model:province-id="item.provinceId"
@ -130,8 +140,8 @@ defineProps<{
:prefix-id="prefixId || 'employer'"
:readonly="readonly"
v-model:employment-office="item.employmentOffice"
v-model:bussiness-type="item.bussinessType"
v-model:bussiness-type-en="item.bussinessTypeEN"
v-model:bussiness-type="item.businessType"
v-model:bussiness-type-en="item.businessTypeEN"
v-model:job-position="item.jobPosition"
v-model:job-position-en="item.jobPositionEN"
v-model:job-description="item.jobDescription"