feat: save branch

This commit is contained in:
Methapon2001 2024-08-06 16:34:12 +07:00
parent 2993cf0f02
commit 80ac35dce0
3 changed files with 322 additions and 9 deletions

View file

@ -1,5 +1,6 @@
<script setup lang="ts">
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 { ref, watch } from 'vue';
@ -21,7 +22,9 @@ watch(
tab.value =
branch.value?.map((a) => ({
branch: a,
tab: tab.value.find((b) => b.branch === a)?.tab || 'main',
tab:
tab.value.find((b) => (b.branch === a ? true : b.branch.id === a.id))
?.tab || 'main',
})) || [];
},
{ deep: true },
@ -29,8 +32,8 @@ watch(
defineEmits<{
(e: 'addBranch'): void;
(e: 'saveBranch', v: (typeof tab.value)[number]['branch']): void;
(e: 'deleteBranch', v: (typeof tab.value)[number]['branch']): void;
(e: 'saveBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
(e: 'deleteBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
}>();
defineProps<{
editable?: boolean;
@ -79,7 +82,7 @@ defineProps<{
text-color="red-9"
color="red-2"
:label="$t('delete')"
@click="$emit('deleteBranch', item)"
@click="$emit('deleteBranch', idx, item)"
class="q-px-md q-ml-auto rounded"
/>
<q-btn
@ -89,7 +92,7 @@ defineProps<{
unelevated
color="primary"
:label="$t('save')"
@click="$emit('saveBranch', item)"
@click="$emit('saveBranch', idx, item)"
class="q-px-md q-ml-sm rounded"
/>
</span>
@ -106,6 +109,7 @@ defineProps<{
>
<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-tabs>
<q-tab-panels v-model="tab[idx].tab">
<q-tab-panel name="main">
@ -273,17 +277,34 @@ defineProps<{
:prefix-id="prefixId || 'employer'"
hide-title
dense
:readonly="!editable"
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"
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)' })"
/>
{{ $t('form.address', { suffix: '(EN)' }) }}
</q-tab-panel>
<q-tab-panel name="business">
<FormBusiness
dense
outlined
:prefix-id="prefixId || 'employer'"
:readonly="!editable"
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-panels>
</div>