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

refactor: change form employee
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Details

Browse source
This commit is contained in:
Thanaphon Frappet 2025-04-08 15:04:03 +07:00
parent 7fcb4d7744
commit bd38c008a6
9 changed files with 1686 additions and 703 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -102,7 +102,6 @@ const optionStore = useOptionStore();
const ocrStore = useOcrStore();
const refFilter = ref<InstanceType<typeof QSelect>>();
const statusEmployeeCreate = ref<boolean>(false);
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
const {
@ -114,14 +113,22 @@ const {
deleteCustomerBranchById,
} = customerFormStore;
const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
employeeFormStore;
const {
state: customerFormState,
currentFormData: customerFormData,
registerAbleBranchOption,
tabFieldRequired,
} = storeToRefs(customerFormStore);
const { state: employeeFormState, currentFromDataEmployee } =
storeToRefs(employeeFormStore);
const {
state: employeeFormState,
currentFromDataEmployee,
onCreateImageList,
statusEmployeeCreate,
refreshImageState,
} = storeToRefs(employeeFormStore);
async function init() {
navigatorStore.current.title = 'menu.customer';
@ -208,13 +215,7 @@ const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
// image
const refreshImageState = ref(false);
const imageList = ref<{ selectedImage: string; list: string[] }>();
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
watch(() => route.name, init);
watch(
[currentTab, currentStatus, inputSearch, customerTypeSelected, pageSize],
@ -425,64 +426,6 @@ async function toggleStatusCustomer(id: string, status: boolean) {
await fetchListCustomer(false, $q.screen.xs);
flowStore.rotate();
}
async function deleteEmployeeById(opts: {
id?: string;
type?: 'passport' | 'visa' | 'healthCheck' | 'work';
index?: number;
}) {
dialog({
color: 'negative',
icon: 'mdi-alert',
title: t('dialog.title.confirmDelete'),
actionText: t('general.delete'),
persistent: true,
message: t('dialog.message.confirmDelete'),
action: async () => {
if (opts.type === 'passport' && opts.index !== undefined) {
await employeeFormStore.deletePassport(opts.index);
}
if (opts.type === 'visa' && opts.index !== undefined) {
await employeeFormStore.deleteVisa(opts.index);
}
if (opts.type === 'healthCheck' && opts.index !== undefined) {
await employeeFormStore.deleteHealthCheck(opts.index);
}
if (opts.type === 'work' && opts.index !== undefined) {
await employeeFormStore.deleteWorkHistory(opts.index);
} else {
if (!!opts.id) {
const result = await employeeStore.deleteById(opts.id);
if (result) {
employeeFormState.value.drawerModal = false;
employeeFormState.value.dialogModal = false;
}
}
}
if (route.name !== 'CustomerBranchManagement') {
await fetchListEmployee(
currentTab.value === 'employer'
? {
page: 1,
pageSize: 999,
customerId: customerFormState.value.currentCustomerId,
}
: { fetchStats: true, mobileFetch: $q.screen.xs },
);
flowStore.rotate();
}
},
cancel: () => {},
});
}
async function openHistory(id: string) {
const res = await employeeStore.getEditHistory(id);
employeeHistory.value = res.reverse();
@ -516,33 +459,6 @@ async function editEmployeeFormPersonal(id: string) {
employeeFormState.value.drawerModal = true;
}
function employeeConfirmUnsave(close = true) {
dialog({
color: 'warning',
icon: 'mdi-alert',
title: t('form.warning.title'),
actionText: t('general.ok'),
persistent: true,
message: t('form.warning.unsave'),
action: () => {
employeeFormStore.resetFormDataEmployee();
onCreateImageList.value = { selectedImage: '', list: [] };
employeeFormState.value.editReadonly = true;
employeeFormState.value.dialogModal = !close;
employeeFormState.value.drawerModal = !close;
},
cancel: () => {},
});
}
function employeeFormUndo(close = true) {
if (employeeFormStore.isFormDataDifferent()) {
return employeeConfirmUnsave(close);
}
employeeFormStore.resetFormDataEmployee();
employeeFormState.value.editReadonly = true;
}
async function createCustomerForm(customerType: 'CORP' | 'PERS') {
customerFormState.value.dialogModal = true;
customerFormState.value.dialogType = 'create';
@ -577,7 +493,7 @@ async function fetchImageList(
// TODO: When in employee form, if select address same as customer then auto fill
watch(
() => employeeFormState.value.formDataEmployeeOwner,
() => employeeFormState.value.currentCustomerBranch,
(e) => {
if (!e) return;
if (employeeFormState.value.formDataEmployeeSameAddr) {
@ -594,21 +510,21 @@ watch(
watch(
() => employeeFormState.value.formDataEmployeeSameAddr,
(isSame) => {
if (!employeeFormState.value.formDataEmployeeOwner) return;
if (!employeeFormState.value.currentCustomerBranch) return;
if (isSame) {
currentFromDataEmployee.value.address =
employeeFormState.value.formDataEmployeeOwner.address;
employeeFormState.value.currentCustomerBranch.address;
currentFromDataEmployee.value.addressEN =
employeeFormState.value.formDataEmployeeOwner.addressEN;
employeeFormState.value.currentCustomerBranch.addressEN;
currentFromDataEmployee.value.provinceId =
employeeFormState.value.formDataEmployeeOwner.provinceId;
employeeFormState.value.currentCustomerBranch.provinceId;
currentFromDataEmployee.value.districtId =
employeeFormState.value.formDataEmployeeOwner.districtId;
employeeFormState.value.currentCustomerBranch.districtId;
currentFromDataEmployee.value.subDistrictId =
employeeFormState.value.formDataEmployeeOwner.subDistrictId;
employeeFormState.value.currentCustomerBranch.subDistrictId;
}
currentFromDataEmployee.value.customerBranchId =
employeeFormState.value.formDataEmployeeOwner.id;
employeeFormState.value.currentCustomerBranch.id;
},
);
@ -1485,7 +1401,23 @@ const emptyCreateDialog = ref(false);
"
@delete="
(item: any) => {
deleteEmployeeById({ id: item.id });
deleteEmployeeById({
id: item.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@toggle-status="
@ -1804,7 +1736,23 @@ const emptyCreateDialog = ref(false);
@edit="(item: any) => editEmployeeFormPersonal(item.id)"
@delete="
(item: any) => {
deleteEmployeeById({ id: item.id });
deleteEmployeeById({
id: item.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@toggle-status="
@ -1942,7 +1890,7 @@ const emptyCreateDialog = ref(false);
async (currentBranch) => {
createEmployeeForm();
await nextTick();
employeeFormState.formDataEmployeeOwner = { ...currentBranch };
employeeFormState.currentBranchId = currentBranch.id;
}
"
v-model:branch="branch"
@ -2783,12 +2731,30 @@ const emptyCreateDialog = ref(false);
id="btn-info-basic-delete"
icon-only
@click="
() => deleteEmployeeById({ id: currentFromDataEmployee.id })
() =>
deleteEmployeeById({
id: currentFromDataEmployee.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
})
"
type="button"
/>
</div>
</div>
<BasicInformation
no-action
id="form-information"
@ -2801,11 +2767,13 @@ const emptyCreateDialog = ref(false);
title="form.field.basicInformation"
:readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption || []"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
v-model:customer-branch-id="employeeFormState.currentBranchId"
v-model:current-customer-branch="
employeeFormState.currentCustomerBranch
"
v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
class="q-mb-xl"
/>
<FormPerson
@ -3362,7 +3330,24 @@ const emptyCreateDialog = ref(false);
@click.stop="
() => {
employeeFormState.currentIndexPassport = index;
deleteEmployeeById({ type: 'passport', index });
deleteEmployeeById({
type: 'passport',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
type="button"
@ -3513,7 +3498,24 @@ const emptyCreateDialog = ref(false);
@click.stop="
() => {
employeeFormState.currentIndexVisa = index;
deleteEmployeeById({ type: 'visa', index });
deleteEmployeeById({
type: 'visa',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
type="button"
@ -3585,7 +3587,23 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexCheckup = index;
deleteEmployeeById({ type: 'healthCheck', index });
deleteEmployeeById({
type: 'healthCheck',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId: customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@save="
@ -3671,7 +3689,23 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexWorkHistory = index;
deleteEmployeeById({ type: 'work', index });
deleteEmployeeById({
type: 'work',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId: customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@save="
@ -4738,7 +4772,23 @@ const emptyCreateDialog = ref(false);
icon-only
@click="
() =>
deleteEmployeeById({ id: currentFromDataEmployee.id })
deleteEmployeeById({
id: currentFromDataEmployee.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
})
"
type="button"
/>
@ -4752,16 +4802,13 @@ const emptyCreateDialog = ref(false);
outlined
title="form.field.basicInformation"
:readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch="
employeeFormState.formDataEmployeeOwner
v-model:customer-branch-id="employeeFormState.currentBranchId"
v-model:current-customer-branch="
employeeFormState.currentCustomerBranch
"
v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="
employeeFormStore.employeeFilterOwnerBranch
"
class="q-mb-xl"
/>
<FormPerson
@ -5368,6 +5415,20 @@ const emptyCreateDialog = ref(false);
deleteEmployeeById({
type: 'passport',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@ -5539,7 +5600,24 @@ const emptyCreateDialog = ref(false);
icon-only
@click.stop="
() => {
deleteEmployeeById({ type: 'visa', index });
deleteEmployeeById({
type: 'visa',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
type="button"
@ -5660,7 +5738,24 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexCheckup = index;
deleteEmployeeById({ type: 'healthCheck', index });
deleteEmployeeById({
type: 'healthCheck',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
/>
@ -5730,7 +5825,24 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexWorkHistory = index;
deleteEmployeeById({ type: 'work', index });
deleteEmployeeById({
type: 'work',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@save="

111
src/pages/03_customer-management/form.ts
View file

@ -2,6 +2,7 @@ import { ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { useI18n } from 'vue-i18n';
import {
CustomerBranch,
CustomerBranchCreate,
CustomerCreate,
CustomerType,
@ -17,6 +18,7 @@ import useMyBranchStore from 'stores/my-branch';
import { baseUrl } from 'src/stores/utils';
import { getRole, getUserId } from 'src/services/keycloak';
import { useRoute } from 'vue-router';
export const useCustomerForm = defineStore('form-customer', () => {
const customerStore = useCustomerStore();
@ -723,11 +725,23 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
});
export const useEmployeeForm = defineStore('form-employee', () => {
const { t } = useI18n();
const customerStore = useCustomerStore();
const employeeStore = useEmployeeStore();
const flowStore = useFlowStore();
const branchStore = useMyBranch();
const route = useRoute();
const refreshImageState = ref(false);
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
const statusEmployeeCreate = ref<boolean>(false);
const state = ref<{
dialogType: 'info' | 'create' | 'edit';
imageDialog: boolean;
@ -736,6 +750,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
drawerModal: boolean;
isImageEdit: boolean;
currentBranchId: string;
currentCustomerBranch?: CustomerBranch;
currentEmployeeCode: string;
currentEmployee: Employee | null;
currentIndexPassport: number;
@ -769,6 +785,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
| undefined;
ocr: boolean;
}>({
currentBranchId: '',
isImageEdit: false,
currentIndexPassport: -1,
currentIndexVisa: -1,
@ -1231,6 +1248,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}) {
let employeeId: string | undefined = undefined;
currentFromDataEmployee.value.firstName =
currentFromDataEmployee.value.firstName.trim();
currentFromDataEmployee.value.middleName =
@ -1249,7 +1268,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
const res = await employeeStore.create(
{
...currentFromDataEmployee.value,
customerBranchId: state.value.formDataEmployeeOwner?.id || '',
customerBranchId: state.value.currentBranchId || '',
employeeWork: [],
employeeCheckup: [],
@ -1259,6 +1278,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
);
if (res) {
employeeId = res.id;
await assignFormDataEmployee(res.id);
currentFromDataEmployee.value.id = res.id;
state.value.statusSavePersonal = true;
@ -1280,10 +1300,12 @@ export const useEmployeeForm = defineStore('form-employee', () => {
},
);
if (res) {
employeeId = res.id;
await assignFormDataEmployee(res.id);
state.value.statusSavePersonal = true;
}
}
return employeeId;
}
async function assignFormDataEmployee(id?: string) {
@ -1424,6 +1446,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
state.value.currentIndexVisa = -1;
}
state.value.currentBranchId = payload.customerBranchId;
const foundBranch = await customerStore.fetchListCustomerBranchById(
payload.customerBranchId,
);
@ -1550,7 +1574,88 @@ export const useEmployeeForm = defineStore('form-employee', () => {
(currentFromDataEmployee.value.employeeWork?.length || 0) - 1;
}
function employeeFormUndo(close = true) {
if (isFormDataDifferent()) {
return employeeConfirmUnsave(close);
}
resetFormDataEmployee();
state.value.editReadonly = true;
}
function employeeConfirmUnsave(close = true) {
dialog({
color: 'warning',
icon: 'mdi-alert',
title: t('form.warning.title'),
actionText: t('general.ok'),
persistent: true,
message: t('form.warning.unsave'),
action: () => {
resetFormDataEmployee();
onCreateImageList.value = { selectedImage: '', list: [] };
state.value.editReadonly = true;
state.value.dialogModal = !close;
state.value.drawerModal = !close;
},
cancel: () => {},
});
}
async function deleteEmployeeById(opts: {
id?: string;
type?: 'passport' | 'visa' | 'healthCheck' | 'work';
index?: number;
fetch?: (...args: unknown[]) => unknown;
removeArray?: (...args: unknown[]) => unknown;
}) {
dialog({
color: 'negative',
icon: 'mdi-alert',
title: t('dialog.title.confirmDelete'),
actionText: t('general.delete'),
persistent: true,
message: t('dialog.message.confirmDelete'),
action: async () => {
if (opts.type === 'passport' && opts.index !== undefined) {
await deletePassport(opts.index);
}
if (opts.type === 'visa' && opts.index !== undefined) {
await deleteVisa(opts.index);
}
if (opts.type === 'healthCheck' && opts.index !== undefined) {
await deleteHealthCheck(opts.index);
}
if (opts.type === 'work' && opts.index !== undefined) {
await deleteWorkHistory(opts.index);
} else {
if (!!opts.id) {
const result = await employeeStore.deleteById(opts.id);
if (result) {
state.value.drawerModal = false;
state.value.dialogModal = false;
}
}
}
if (route.name !== 'CustomerBranchManagement') {
await opts.fetch?.();
flowStore.rotate();
}
opts.removeArray?.();
},
cancel: () => {},
});
}
return {
refreshImageState,
statusEmployeeCreate,
onCreateImageList,
state,
currentFromDataEmployee,
resetEmployeeData,
@ -1577,5 +1682,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
employeeFilterOwnerBranch,
isFormDataDifferent,
employeeFormUndo,
employeeConfirmUnsave,
deleteEmployeeById,
};
});

5
src/pages/05_quotation/QuotationForm.vue
View file

@ -590,8 +590,9 @@ async function convertDataToFormSubmit() {
}
}),
...newWorkerList.value.map((v) => {
const { attachment, ...payload } = v;
return payload;
{
return v.id;
}
}),
]),
);

1629
src/pages/05_quotation/QuotationFormWorkerSelect.vue
View file

File diff suppressed because it is too large Load diff

1
src/pages/05_quotation/form.ts
View file

@ -221,6 +221,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
newWorkerList.value.push({
//passportNo: obj.data.passportNo,
//documentExpireDate: obj.data.documentExpireDate,
id: obj.data.id,
lastNameEN: obj.data.lastNameEN,
lastName: obj.data.lastName,
middleNameEN: obj.data.middleNameEN,