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

feat: เพิ่มแก้ไข ของBranch

Browse source
This commit is contained in:
Net 2024-06-10 16:02:14 +07:00
parent bb5f19fab0
commit 8e248152c8
1 changed files with 259 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

264
src/pages/03_customer-management/MainPage.vue
View file

@ -49,6 +49,7 @@ const {
fetchListById,
createBranch,
deleteBranchById,
editBranchById,
} = userCustomer;
const formData = ref<CustomerCreate>({
status: 'CREATED',
@ -85,6 +86,8 @@ const formData = ref<CustomerCreate>({
wageRate: 0,
},
],
image: null,
});
const inputSearch = ref<string>('');
const fieldSelectedCustomer = ref<{ label: string; value: string }>({
@ -136,6 +139,7 @@ const dialogInputCustomerBranchForm = ref<boolean>(false);
const currentCustomer = ref<Customer>();
const branch = ref<CustomerBranch[]>();
const currentBranchId = ref<string>('');
const currentCustomerName = ref<string>('');
const currentCustomerUrlImage = ref<string>('');
@ -217,6 +221,8 @@ const dialogCustomerType = ref<boolean>(false);
const dialogInputForm = ref<boolean>(false);
const dialogEmployee = ref<boolean>(false);
const infoDrawerBranch = ref<boolean>(false);
const selectorLabel = ref<string>('');
const selectorList = computed(() => [
{
@ -259,6 +265,14 @@ function openDialogInputForm(action: 'FORM' | 'INFO' = 'FORM', id?: string) {
function onClose() {
infoDrawer.value = false;
infoDrawerEdit.value = false;
dialogInputForm.value = false;
clearForm();
}
function onCloseBranch() {
infoDrawerBranch.value = false;
infoDrawerEdit.value = false;
dialogInputForm.value = false;
clearForm();
}
@ -301,7 +315,7 @@ function clearForm() {
wageRate: 0,
},
],
image: new File([''], 'dummy.jpg'),
image: null,
};
}
@ -310,9 +324,7 @@ async function onSubmit() {
...formData.value,
customerType:
customerType.value === 'customerLegalEntity' ? 'CORP' : 'PERS',
image: (profileSubmit.value
? profileFile.value ?? new File([''], 'dummy.jpg')
: new File([''], 'dummy.jpg')) as File,
image: profileSubmit.value ? profileFile.value ?? null : null,
});
clearForm();
const resultList = await fetchList({ includeBranch: true });
@ -339,6 +351,19 @@ async function onSubmitCustomerBranch() {
}
}
const resultSearch = ref<(Customer & { branch: CustomerBranch[] })[]>();
async function searchCustomer() {
const resultList = await fetchList({
query: inputSearch.value,
includeBranch: true,
});
if (resultList) {
resultSearch.value = resultList.result;
}
}
async function onSubmitEdit(id: string) {
if (!formData.value) return;
@ -355,6 +380,23 @@ async function onSubmitEdit(id: string) {
clearForm();
}
async function submitBranch() {
if (formData.value.customerBranch?.[0]) {
await editBranchById(currentBranchId.value, {
...formData.value.customerBranch[0],
customerId: currentCustomerId.value,
});
const result = await fetchListById(currentCustomerId.value);
if (result) {
branch.value = result.branch;
}
}
infoDrawerBranch.value = false;
clearForm();
}
function undo() {
infoDrawerEdit.value = false;
}
@ -367,7 +409,7 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
customerNameEN: data.customerNameEN,
taxNo: data.taxNo,
customerBranch: [],
image: new File([''], 'dummy.jpg'),
image: null,
};
data.branch.forEach((v) => {
@ -679,6 +721,22 @@ watch(locale, () => {
:customer-id="currentCustomerId"
@back="isMainPage = true"
@dialog="dialogInputCustomerBranchForm = true"
@viewDetail="
(v) => {
infoDrawerBranch = true;
console.log(v);
currentCustomerId = v.id;
currentBranchId = v.branch[0].id;
customerType =
v.customerType === 'CORP'
? 'customerLegalEntity'
: 'customerNaturalPerson';
assignFormData(v);
}
"
v-model:branch="branch"
v-model:currentCustomerName="currentCustomerName"
v-model:currentCustomerUrlImage="currentCustomerUrlImage"
@ -1063,6 +1121,8 @@ watch(locale, () => {
</template>
</FormDialog>
<!-- DRAWER INFO ของ นายจ้าง -->
<DrawerInfo
title="บริษัททดสอบ"
v-model:drawer-open="infoDrawer"
@ -1199,6 +1259,200 @@ watch(locale, () => {
indexTab !== undefined &&
formData.customerBranch?.[indexTab]
"
:type-customer="customerType"
v-model:customer-name="formData.customerBranch[indexTab].name"
v-model:customer-english-name="
formData.customerBranch[indexTab].nameEN
"
v-model:authorized-capital="
formData.customerBranch[indexTab].authorizedCapital
"
v-model:register-name="
formData.customerBranch[indexTab].registerName
"
v-model:register-date="
formData.customerBranch[indexTab].registerDate
"
dense
outlined
bordered
separator
:readonly="!infoDrawerEdit"
/>
</template>
<template #contactInformation>
<ContactComponent
v-if="
indexTab !== undefined &&
formData.customerBranch?.[indexTab]
"
v-model:mail="formData.customerBranch[indexTab].email"
v-model:telephone="
formData.customerBranch[indexTab].telephoneNo
"
dense
outlined
separator
:readonly="!infoDrawerEdit"
/>
</template>
<template #otherDocuments>
<OtherInformation
v-if="
indexTab !== undefined &&
formData.customerBranch?.[indexTab]
"
dense
outlined
:readonly="!infoDrawerEdit"
/>
</template>
</TabComponent>
</div>
</template>
</InfoForm>
</template>
</DrawerInfo>
<!-- DRAWER INFO ของ สาขา -->
<DrawerInfo
title="สาขา"
v-model:drawer-open="infoDrawerBranch"
badgeLabel="HQ006"
badgeClass="app-bg-pers"
:undo="() => undo()"
:isEdit="infoDrawerEdit"
:close="() => onCloseBranch()"
:editData="() => (infoDrawerEdit = true)"
:data="currentCustomer"
:submit="
() => {
submitBranch();
}
"
>
<template #info>
<InfoForm>
<template #person-card>
<div class="q-ma-md">
<AppBox class="surface-1" style="padding: 0">
<UsersDetailCardComponent
no-bg
no-detail
no-hover
color="purple"
:metadata="{ id: '1', disabled: false }"
:list="{
id: '2',
type: 'customerNaturalPerson',
name: 'เจมส์ บอน',
code: 'HQ006',
detail: [
{
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
value: 'บริษัทเฟรบเป้',
},
{
label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
value: 'บริษัทเฟรบเป้',
},
],
}"
@enter-card="openDialogInputForm"
/>
</AppBox>
</div>
</template>
<template #information>
<BasicInformation
dense
outlined
separator
:readonly="true"
:type-customer="customerType"
v-model:customer-name="formData.customerName"
v-model:customer-name-en="formData.customerNameEN"
v-model:tax-no="formData.taxNo"
/>
</template>
<template #address>
<div class="col-3 app-text-muted">
• {{ $t('formDialogCustomerBranch') }}
</div>
<div class="col-12 row bordered q-pt-none rounded">
<TabComponent
:readonly="true"
v-model:customer-branch="formData.customerBranch"
v-model:tab-index="indexTab"
>
<template #address>
<FormAddress
v-if="
indexTab !== undefined &&
formData.customerBranch?.[indexTab]
"
v-model:address="formData.customerBranch[indexTab].address"
v-model:address-e-n="
formData.customerBranch[indexTab].addressEN
"
v-model:province-id="
formData.customerBranch[indexTab].provinceId
"
v-model:district-id="
formData.customerBranch[indexTab].districtId
"
v-model:sub-district-id="
formData.customerBranch[indexTab].subDistrictId
"
v-model:zip-code="formData.customerBranch[indexTab].zipCode"
separator
dense
outlined
:readonly="!infoDrawerEdit"
/>
</template>
<template #businessInformation>
<FormBusiness
v-if="
indexTab !== undefined &&
formData.customerBranch?.[indexTab]
"
v-model:employment-office="
formData.customerBranch[indexTab].employmentOffice
"
v-model:bussiness-type="
formData.customerBranch[indexTab].bussinessType
"
v-model:bussiness-type-en="
formData.customerBranch[indexTab].bussinessTypeEN
"
v-model:job-position="
formData.customerBranch[indexTab].jobPosition
"
v-model:job-position-en="
formData.customerBranch[indexTab].jobPositionEN
"
v-model:job-description="
formData.customerBranch[indexTab].jobDescription
"
v-model:sale-employee="
formData.customerBranch[indexTab].saleEmployee
"
v-model:pay-date="formData.customerBranch[indexTab].payDate"
v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
separator
dense
outlined
:readonly="!infoDrawerEdit"
/>
</template>
<template #about>
<AboutComponent
v-if="formData.customerBranch?.[0]"
:type-customer="customerType"
v-model:customer-name="formData.customerBranch[indexTab].name"
v-model:customer-english-name="
formData.customerBranch[indexTab].nameEN