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

feat: ทำแบ่งของนายจ้าง / แก้ค่าของ type

Browse source
This commit is contained in:
Net 2024-06-11 11:24:37 +07:00
parent d8425183f9
commit 17ca97165b
1 changed files with 107 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,6 +33,7 @@ import {
CustomerUpdate,
CustomerBranch,
CustomerBranchCreate,
CustomerType,
} from 'stores/customer/types';
import { EmployeeCreate, Employee } from 'stores/employee/types';
import { onMounted } from 'vue';
@ -200,9 +201,13 @@ const dialogInputCustomerBranchForm = ref<boolean>(false);
const currentCustomer = ref<Customer>();
const branch = ref<CustomerBranch[]>();
const currentPageCustomer = ref<number>(1);
const maxPageCustomer = ref<number>(1);
const pageSizeCustomer = ref<number>(30);
const currentBranchId = ref<string>('');
const currentCustomerName = ref<string>('');
const currentCustomerUrlImage = ref<string>('');
const currentCustomerUrlImage = ref<string | null>(null);
const inputFile = (() => {
const element = document.createElement('input');
@ -230,12 +235,12 @@ const listEmployee = ref();
const itemCard = [
{
icon: 'mdi:office-building',
text: 'customerLegalEntity',
text: 'CORP',
color: 'var(--purple-8)',
},
{
icon: 'heroicons:user-solid',
text: 'customerNaturalPerson',
text: 'PERS',
color: 'var(--green-9)',
},
];
@ -244,13 +249,13 @@ const customerStats = [
{
id: 1,
count: 2,
name: 'customerLegalEntity',
name: 'CORP',
},
{
id: 2,
count: 3,
name: 'customerNaturalPerson',
name: 'PERS',
},
];
@ -273,11 +278,7 @@ const employeeTab = [
},
];
const fieldCustomer = ref([
'all',
'customerLegalEntity',
'customerNaturalPerson',
]);
const fieldCustomer = ref(['all', 'CORP', 'PERS']);
const dialogCustomerType = ref<boolean>(false);
const dialogInputForm = ref<boolean>(false);
@ -299,11 +300,9 @@ const selectorList = computed(() => [
},
]);
const customerType = ref<
'customerLegalEntity' | 'customerNaturalPerson' | undefined
>('customerLegalEntity');
const customerType = ref<CustomerType>('CORP');
function triggerCreate(type: 'customerLegalEntity' | 'customerNaturalPerson') {
function triggerCreate(type: CustomerType) {
customerType.value = type;
openDialogInputForm();
dialogCustomerType.value = false;
@ -343,7 +342,7 @@ function onCloseBranch() {
}
function clearForm() {
customerType.value = undefined;
customerType.value = 'CORP';
dialogInputForm.value = false;
formData.value = {
status: 'CREATED',
@ -427,8 +426,7 @@ function deleteBranchId(id: string) {
async function onSubmit() {
await create({
...formData.value,
customerType:
customerType.value === 'customerLegalEntity' ? 'CORP' : 'PERS',
customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
image: profileSubmit.value ? profileFile.value ?? null : null,
});
clearForm();
@ -475,6 +473,23 @@ async function searchCustomer() {
}
}
async function fetchListCustomer() {
const resultList = await fetchList({
includeBranch: true,
page: currentPageCustomer.value,
pageSize: pageSizeCustomer.value,
});
if (resultList) {
currentPageCustomer.value = resultList.page;
maxPageCustomer.value = Math.ceil(
resultList.total / pageSizeCustomer.value,
);
listCustomer.value = resultList.result;
}
}
async function onSubmitEdit(id: string) {
if (!formData.value) return;
@ -488,6 +503,8 @@ async function onSubmitEdit(id: string) {
};
await editById(id, tempValue);
infoDrawer.value = false;
fetchListCustomer();
clearForm();
}
@ -523,6 +540,7 @@ async function submitBranch() {
}
}
infoDrawerBranch.value = false;
clearForm();
}
@ -575,7 +593,11 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
onMounted(async () => {
const resultStats = await getStatsCustomer();
const resultList = await fetchList({ includeBranch: true });
const resultList = await fetchList({
includeBranch: true,
page: 1,
pageSize: pageSizeCustomer.value,
});
const resultListEmployee = await employeeStore.fetchList();
if (resultStats) statsCustomerType.value = resultStats;
@ -590,7 +612,14 @@ onMounted(async () => {
selectorLabel.value = 'EMPLOYER';
}
if (resultList) listCustomer.value = resultList.result;
if (resultList) {
currentPageCustomer.value = resultList.page;
maxPageCustomer.value = Math.ceil(
resultList.total / pageSizeCustomer.value,
);
listCustomer.value = resultList.result;
}
if (resultListEmployee) listEmployee.value = resultListEmployee.result;
});
@ -607,6 +636,30 @@ watch(locale, () => {
value: fieldSelectedCustomer.value?.value,
};
});
watch(currentPageCustomer, async () => {
fetchListCustomer();
});
watch(fieldSelectedCustomer, async () => {
let resultList;
if (fieldSelectedCustomer.value.value === 'all') {
resultList = await fetchList({ includeBranch: true });
}
if (fieldSelectedCustomer.value.value === 'CORP') {
resultList = await fetchList({ includeBranch: true, customerType: 'CORP' });
}
if (fieldSelectedCustomer.value.value === 'PERS') {
resultList = await fetchList({ includeBranch: true, customerType: 'PERS' });
}
if (resultList) {
listCustomer.value = resultList.result;
}
});
</script>
<template>
@ -656,11 +709,11 @@ watch(locale, () => {
:branch="
customerStats.map((v) => ({
count:
v.name === 'customerLegalEntity'
v.name === 'CORP'
? statsCustomerType?.CORP ?? 0
: statsCustomerType?.PERS ?? 0,
label: v.name,
color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
color: v.name === 'CORP' ? 'purple' : 'green',
}))
"
:dark="$q.dark.isActive"
@ -742,6 +795,7 @@ watch(locale, () => {
<div
class="row full-width customer-row"
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : $q.screen.lt.md ? '2 ' : '4'}, 1fr)`"
style="min-height: 250px"
>
<UsersDetailCardComponent
v-for="i in inputSearch
@ -750,12 +804,12 @@ watch(locale, () => {
if (fieldSelectedCustomer.value === 'all') return true;
if (
fieldSelectedCustomer.value === 'customerLegalEntity' &&
fieldSelectedCustomer.value === 'CORP' &&
v.customerType === 'CORP'
)
return true;
if (
fieldSelectedCustomer.value === 'customerNaturalPerson' &&
fieldSelectedCustomer.value === 'PERS' &&
v.customerType === 'PERS'
)
return true;
@ -768,10 +822,7 @@ watch(locale, () => {
:list="{
id: i.id,
imageUrl: i.imageUrl,
type:
i.customerType === 'CORP'
? 'customerLegalEntity'
: 'customerNaturalPerson',
type: i.customerType,
name: i.customerName === '' ? '-' : i.customerName,
code: i.code,
@ -788,8 +839,12 @@ watch(locale, () => {
}"
@enter-card="
() => {
customerType = i.customerType;
currentCustomerUrlImage = i.imageUrl;
currentCustomerId = i.id;
const { branch, ...payload } = i;
currentCustomer = payload;
isMainPage = false;
}
"
@ -807,10 +862,7 @@ watch(locale, () => {
@view-card="
() => {
currentCustomerId = i.id;
customerType =
i.customerType === 'CORP'
? 'customerLegalEntity'
: 'customerNaturalPerson';
customerType = i.customerType;
assignFormData(i);
openDialogInputForm('INFO', i.id);
}
@ -818,6 +870,14 @@ watch(locale, () => {
@delete-card="deleteCustomerById(i.id)"
/>
</div>
<div class="row flex-center q-pt-md">
<q-pagination
v-model="currentPageCustomer"
:max="maxPageCustomer"
direction-links
gutter="sm"
/>
</div>
</template>
<template
@ -892,20 +952,24 @@ watch(locale, () => {
</div>
<div v-else>
<CustomerInfoComponent
:customer-type="customerType"
:customer-id="currentCustomerId"
@back="isMainPage = true"
@back="
() => {
isMainPage = true;
currentCustomerUrlImage = null;
clearForm();
}
"
@dialog="dialogInputCustomerBranchForm = true"
@viewDetail="
(v) => {
infoDrawerBranch = true;
currentCustomerId = v.id;
currentBranchId = v.branch[0].id;
currentBranchId = v[0].id;
customerType =
v.customerType === 'CORP'
? 'customerLegalEntity'
: 'customerNaturalPerson';
assignFormData(v);
if (!!currentCustomer && !!v) {
assignFormData({ ...currentCustomer, branch: v });
}
}
"
v-model:branch="branch"
@ -925,6 +989,7 @@ watch(locale, () => {
<template #body>
<div class="row q-gutter-xl q-pa-sm">
<ItemCard
class="col"
v-for="i in itemCard"
:key="i.text"
:icon="i.icon"
@ -932,9 +997,7 @@ watch(locale, () => {
:color="i.color"
@trigger="
() => {
triggerCreate(
i.text as 'customerLegalEntity' | 'customerNaturalPerson',
);
triggerCreate(i.text as 'CORP' | 'PERS');
}
"
/>
@ -1466,7 +1529,6 @@ watch(locale, () => {
:isEdit="infoDrawerEdit"
:close="() => onClose()"
:editData="() => (infoDrawerEdit = true)"
:data="currentCustomer"
:submit="() => onSubmitEdit(currentCustomerId)"
:deleteData="
() => {
@ -1487,7 +1549,7 @@ watch(locale, () => {
:metadata="{ id: '1', disabled: false }"
:list="{
id: '2',
type: 'customerNaturalPerson',
type: 'PERS',
name: 'เจมส์ บอน',
code: 'HQ006',
detail: [
@ -1664,7 +1726,6 @@ watch(locale, () => {
:close="() => onCloseBranch()"
:editData="() => (infoDrawerEdit = true)"
:deleteData="() => deleteBranchId(currentBranchId)"
:data="currentCustomer"
:submit="
() => {
submitBranch();
@ -1684,7 +1745,7 @@ watch(locale, () => {
:metadata="{ id: '1', disabled: false }"
:list="{
id: '2',
type: 'customerNaturalPerson',
type: 'PERS',
name: 'เจมส์ บอน',
code: 'HQ006',
detail: [