refactor: restructure
This commit is contained in:
Methapon2001
parent
7a81991c79
commit
11ff03ec50
8 changed files with 16 additions and 9 deletions
|
|
@ -1,291 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
|
||||
import FormBusiness from './FormBusiness.vue';
|
||||
import { CustomerCreate } from 'src/stores/customer/types';
|
||||
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
||||
import FormContact from './FormContact.vue';
|
||||
import { EditButton } from 'src/components/button';
|
||||
import DeleteButton from 'src/components/button/DeleteButton.vue';
|
||||
import SaveButton from 'src/components/button/SaveButton.vue';
|
||||
import CancelButton from 'src/components/button/CancelButton.vue';
|
||||
|
||||
const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
|
||||
'customerBranch',
|
||||
{
|
||||
required: true,
|
||||
default: [],
|
||||
},
|
||||
);
|
||||
const tab = ref('main');
|
||||
|
||||
defineEmits<{
|
||||
(e: 'edit'): void;
|
||||
(e: 'save'): void;
|
||||
(e: 'cancel'): void;
|
||||
(e: 'delete'): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
prefixId?: string;
|
||||
actionDisabled?: boolean;
|
||||
customerType?: 'CORP' | 'PERS';
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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}`"
|
||||
>
|
||||
{{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
|
||||
<EditButton
|
||||
v-if="readonly"
|
||||
@click="$emit('edit')"
|
||||
class="q-ml-auto"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="readonly"
|
||||
@click="$emit('delete')"
|
||||
class="q-ml-sm"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="!readonly"
|
||||
@click="$emit('save')"
|
||||
class="q-ml-auto"
|
||||
type="submit"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<CancelButton
|
||||
v-if="!readonly"
|
||||
@click="$emit('cancel')"
|
||||
class="q-ml-sm"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<div class="col-12" :style="{ opacity: actionDisabled ? '.5' : undefined }">
|
||||
<div class="rounded bordered">
|
||||
<q-tabs
|
||||
v-model="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-tab name="business" label="Business"></q-tab>
|
||||
<q-tab name="contact" label="Contact"></q-tab>
|
||||
</q-tabs>
|
||||
<q-tab-panels v-model="tab">
|
||||
<q-tab-panel name="main">
|
||||
<div class="row q-col-gutter-md">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.no')"
|
||||
v-model="item.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="item.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="item.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="item.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="item.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="item.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="item.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="item.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="
|
||||
item.registerDate
|
||||
? readonly
|
||||
? dateFormat(item.registerDate)
|
||||
: dateFormat(item.registerDate, false, false, true)
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (readonly && v && v.toString().length === 10) {
|
||||
const _date = parseAndFormatDate(v, $i18n.locale);
|
||||
if (_date) {
|
||||
item.registerDate?.setDate(_date.getDate());
|
||||
item.registerDate?.setMonth(_date.getMonth());
|
||||
item.registerDate?.setFullYear(_date.getFullYear());
|
||||
} else {
|
||||
item.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="!item.registerDate && readonly"
|
||||
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'"
|
||||
hide-title
|
||||
dense
|
||||
:readonly="readonly"
|
||||
outlined
|
||||
:title="$t('form.address')"
|
||||
v-model:address="item.address"
|
||||
v-model:addressEN="item.addressEN"
|
||||
v-model:province-id="item.provinceId"
|
||||
v-model:district-id="item.districtId"
|
||||
v-model:sub-district-id="item.subDistrictId"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="business">
|
||||
<FormBusiness
|
||||
dense
|
||||
outlined
|
||||
: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:job-position="item.jobPosition"
|
||||
v-model:job-position-en="item.jobPositionEN"
|
||||
v-model:job-description="item.jobDescription"
|
||||
v-model:sale-employee="item.saleEmployee"
|
||||
v-model:pay-date="item.payDate"
|
||||
v-model:wage-rate="item.wageRate"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="contact">
|
||||
<FormContact
|
||||
:readonly="readonly"
|
||||
v-model:email="item.email"
|
||||
v-model:telephone="item.telephoneNo"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue