171 lines
5.3 KiB
Vue
171 lines
5.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { AddressForm } from 'components/form';
|
|
import EmployerFormBusiness from './EmployerFormBusiness.vue';
|
|
import EmployerFormContact from './EmployerFormContact.vue';
|
|
import { CustomerCreate } from 'stores/customer/types';
|
|
import EmployerFormAbout from './EmployerFormAbout.vue';
|
|
import EmployerFormAttachment from './EmployerFormAttachment.vue';
|
|
import {
|
|
SaveButton,
|
|
EditButton,
|
|
DeleteButton,
|
|
UndoButton,
|
|
} from 'components/button';
|
|
|
|
const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
|
|
'customerBranch',
|
|
{ required: true },
|
|
);
|
|
const tab = ref('main');
|
|
|
|
defineEmits<{
|
|
(e: 'edit'): void;
|
|
(e: 'save'): void;
|
|
(e: 'cancel'): void;
|
|
(e: 'delete'): void;
|
|
}>();
|
|
|
|
defineProps<{
|
|
index: number;
|
|
customerName: string;
|
|
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-${index}`"
|
|
>
|
|
{{
|
|
index === 0
|
|
? $t('customer.form.headQuarters.title')
|
|
: $t('customer.form.branch.title', { name: index || 0 })
|
|
}}
|
|
<EditButton
|
|
icon-only
|
|
v-if="readonly"
|
|
@click="$emit('edit')"
|
|
class="q-ml-auto"
|
|
type="button"
|
|
:disabled="actionDisabled"
|
|
/>
|
|
<DeleteButton
|
|
icon-only
|
|
v-if="readonly"
|
|
@click="$emit('delete')"
|
|
type="button"
|
|
:disabled="actionDisabled"
|
|
/>
|
|
<UndoButton
|
|
icon-only
|
|
v-if="!readonly"
|
|
@click="$emit('cancel')"
|
|
type="button"
|
|
class="q-ml-auto"
|
|
:disabled="actionDisabled"
|
|
/>
|
|
<SaveButton
|
|
icon-only
|
|
v-if="!readonly"
|
|
@click="$emit('save')"
|
|
type="submit"
|
|
: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="$t('customerBranch.tab.main')" />
|
|
<q-tab name="address" :label="$t('customerBranch.tab.address')" />
|
|
<q-tab name="business" :label="$t('customerBranch.tab.business')" />
|
|
<q-tab name="contact" :label="$t('customerBranch.tab.contact')" />
|
|
<q-tab name="attachment" :label="$t('customerBranch.tab.attachment')" />
|
|
</q-tabs>
|
|
<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: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>
|
|
<q-tab-panel name="address">
|
|
<AddressForm
|
|
use-work-place
|
|
:prefix-id="prefixId || 'employer'"
|
|
hide-title
|
|
dense
|
|
: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"
|
|
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">
|
|
<EmployerFormBusiness
|
|
dense
|
|
outlined
|
|
:prefix-id="prefixId || 'employer'"
|
|
:readonly="readonly"
|
|
v-model:employment-office="item.employmentOffice"
|
|
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"
|
|
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">
|
|
<EmployerFormContact
|
|
:readonly="readonly"
|
|
v-model:contactName="item.contactName"
|
|
v-model:email="item.email"
|
|
v-model:telephone="item.telephoneNo"
|
|
/>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="attachment">
|
|
<EmployerFormAttachment
|
|
:readonly="readonly"
|
|
v-model:attachment="item.file"
|
|
/>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
</div>
|
|
</template>
|