refactor: drawer employee

This commit is contained in:
puriphatt 2025-09-15 14:53:40 +07:00 committed by Methapon2001
parent 763ac07be7
commit e6f8870cdf
4 changed files with 1702 additions and 2025 deletions

File diff suppressed because it is too large Load diff

View file

@ -3,21 +3,11 @@ import { ref, watch, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute, useRouter } from 'vue-router';
import { getUserId, getRole } from 'src/services/keycloak';
import { baseUrl, setPrefixName, waitAll } from 'src/stores/utils';
import { dateFormat } from 'src/utils/datetime';
import { dialogCheckData, canAccess } from 'stores/utils';
import { canAccess } from 'stores/utils';
import useOcrStore from 'stores/ocr';
import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import useMyBranchStore from 'stores/my-branch';
import {
dialog,
notify,
resetScrollBar,
capitalizeFirstLetter,
} from 'stores/utils';
import { dialog } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import useFlowStore from 'stores/flow';
import { Status } from 'stores/types';
@ -25,68 +15,21 @@ import {
CustomerStats,
Customer,
CustomerBranch,
CustomerBranchCreate,
CustomerType,
} from 'stores/customer/types';
import { Employee, EmployeeHistory } from 'stores/employee/types';
import {
EditButton,
DeleteButton,
SaveButton,
UndoButton,
} from 'components/button';
import { SaveButton } from 'components/button';
import TabCustomer from './TabCustomer.vue';
import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
import { AddressForm } from 'components/form';
import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
import ItemCard from 'src/components/ItemCard.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import FloatingActionButton from 'components/FloatingActionButton.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import EmptyAddButton from 'components/AddButton.vue';
import NoData from 'components/NoData.vue';
import PaginationComponent from 'components/PaginationComponent.vue';
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
import BranchPage from './BranchPage.vue';
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
import DialogForm from 'components/DialogForm.vue';
import SideMenu from 'components/SideMenu.vue';
import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
import { runOcr, parseResultMRZ } from 'src/utils/ocr';
import { formatAddress } from 'src/utils/address';
import {
UploadFileGroup,
FormTm6,
NoticeJobEmployment,
} from 'components/upload-file';
import {
columnsCustomer,
columnsEmployee,
uploadFileListEmployee,
columnsAttachment,
dialogCreateCustomerItem,
} from './constant';
import { columnsCustomer, columnsEmployee } from './constant';
import { useCustomerForm, useEmployeeForm } from './form';
import { storeToRefs } from 'pinia';
import ProfileBanner from 'components/ProfileBanner.vue';
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
import FormEmployeeHealthCheck from 'components/03_customer-management/FormEmployeeHealthCheck.vue';
import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmployeeWorkHistory.vue';
import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
import useOptionStore from 'stores/options';
import { DialogContainer, DialogHeader } from 'components/dialog';
import KebabAction from 'src/components/shared/KebabAction.vue';
import { nextTick } from 'vue';
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
import { AddButton } from 'components/button';
import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
import TabEmployee from './TabEmployee.vue';
@ -97,48 +40,20 @@ const router = useRouter();
const flowStore = useFlowStore();
const navigatorStore = useNavigator();
const customerStore = useCustomerStore();
const userBranchStore = useMyBranchStore();
const employeeStore = useEmployeeStore();
const customerFormStore = useCustomerForm();
const employeeFormStore = useEmployeeForm();
const optionStore = useOptionStore();
const ocrStore = useOcrStore();
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
const {
fetchListOfOptionBranch,
customerFormUndo,
customerConfirmUnsave,
deleteCustomerById,
validateTabField,
deleteCustomerBranchById,
} = customerFormStore;
const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
employeeFormStore;
const {
state: customerFormState,
currentFormData: customerFormData,
registerAbleBranchOption,
tabFieldRequired,
} = storeToRefs(customerFormStore);
const {
state: employeeFormState,
currentFromDataEmployee,
onCreateImageList,
statusEmployeeCreate,
refreshImageState,
} = storeToRefs(employeeFormStore);
const { state: customerFormState, currentFormData: customerFormData } =
storeToRefs(customerFormStore);
const { state: employeeFormState, statusEmployeeCreate } =
storeToRefs(employeeFormStore);
const refTabCustomer = ref<InstanceType<typeof TabCustomer>>();
const refTabEmployee = ref<InstanceType<typeof TabEmployee>>();
// NOTE: Page Data
const currentCustomer = ref<Customer>();
// const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
// const listEmployee = ref<Employee[]>([]);
const hideStats = ref(false);
const statsCustomerType = ref<CustomerStats>({
CORP: 0,
@ -158,27 +73,8 @@ const customerTypeSelected = ref<{
value: 'all',
});
// const customerNameInfo = computed(() => {
// if (customerFormData.value.customerBranch === undefined) return;
// const name =
// locale.value === 'eng'
// ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
// : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
// return name || '-';
// });
// const currentBtnOpen = ref<boolean[]>([]);
const employeeStats = ref(0);
const gridView = ref(false);
// const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
// const currentPageCustomer = ref<number>(1);
// const maxPageCustomer = ref<number>(1);
// const currentPageEmployee = ref<number>(1);
// const maxPageEmployee = ref<number>(1);
// const pageSize = ref<number>(30);
// const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
// const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
// image
const imageList = ref<{ selectedImage: string; list: string[] }>();
@ -354,27 +250,6 @@ async function init() {
watch(() => route.name, init);
// watch(
// [currentTab, currentStatus, inputSearch, searchDate],
// async ([tabName], [oldTabName]) => {
// if (tabName !== oldTabName) searchDate.value = [];
// if (tabName === 'employer') {
// currentPageCustomer.value = 1;
// currentBtnOpen.value = [];
// listCustomer.value = [];
// await fetchListCustomer(true);
// }
// if (tabName === 'employee') {
// currentPageEmployee.value = 1;
// listEmployee.value = [];
// await fetchListEmployee({ fetchStats: true });
// }
// customerFormState.value.currentCustomerId = undefined;
// flowStore.rotate();
// },
// );
watch(locale, () => {
customerTypeSelected.value = {
label: `${customerTypeSelected.value.label}`,
@ -388,304 +263,6 @@ watch(
);
onMounted(async () => await init());
// const employeeHistoryDialog = ref(false);
// const employeeHistory = ref<EmployeeHistory[]>();
// async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
// const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
// const resultList = await customerStore.fetchList({
// includeBranch: true,
// page: mobileFetch ? 1 : currentPageCustomer.value,
// pageSize: mobileFetch
// ? listCustomer.value.length +
// (total === listCustomer.value.length ? 1 : 0)
// : pageSize.value,
// status:
// currentStatus.value === 'All'
// ? undefined
// : currentStatus.value === 'ACTIVE'
// ? 'ACTIVE'
// : 'INACTIVE',
// query: inputSearch.value,
// startDate: searchDate.value[0],
// endDate: searchDate.value[1],
// customerType: (
// {
// all: undefined,
// customerLegalEntity: CustomerType.Corporate,
// customerNaturalPerson: CustomerType.Person,
// } as const
// )[customerTypeSelected.value.value],
// });
// if (resultList) {
// maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
// $q.screen.xs && !mobileFetch
// ? listCustomer.value.push(...resultList.result)
// : (listCustomer.value = resultList.result);
// }
// if (fetchStats) {
// statsCustomerType.value = await customerStore
// .getStatsCustomer()
// .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
// }
// }
// async function fetchListEmployee(opt?: {
// fetchStats?: boolean;
// page?: number;
// pageSize?: number;
// customerId?: string;
// mobileFetch?: boolean;
// }) {
// const resultListEmployee = await employeeStore.fetchList({
// customerId: opt?.customerId,
// page: opt
// ? opt.mobileFetch
// ? 1
// : opt.page || currentPageEmployee.value
// : currentPageEmployee.value,
// pageSize: opt
// ? opt.mobileFetch
// ? listEmployee.value.length +
// (employeeStats.value === listEmployee.value.length ? 1 : 0)
// : opt.pageSize || pageSize.value
// : pageSize.value,
// status:
// currentStatus.value === 'All'
// ? undefined
// : currentStatus.value === 'ACTIVE'
// ? 'ACTIVE'
// : 'INACTIVE',
// query: inputSearch.value,
// passport: true,
// visa: true,
// startDate: searchDate.value[0],
// endDate: searchDate.value[1],
// });
// if (resultListEmployee) {
// maxPageEmployee.value = Math.ceil(
// resultListEmployee.total / pageSize.value,
// );
// $q.screen.xs && !(opt && opt.mobileFetch)
// ? listEmployee.value.push(...resultListEmployee.result)
// : (listEmployee.value = resultListEmployee.result);
// }
// if (opt && opt.fetchStats)
// employeeStats.value = await employeeStore.getStatsEmployee();
// }
// async function toggleStatusEmployee(
// id: string,
// status: boolean,
// employeeName: string,
// ) {
// const res = await employeeStore.editById(id, {
// status: !status ? 'ACTIVE' : 'INACTIVE',
// firstNameEN: employeeName,
// });
// if (res && employeeFormState.value.drawerModal)
// currentFromDataEmployee.value.status = res.status;
// await fetchListEmployee({ mobileFetch: $q.screen.xs });
// flowStore.rotate();
// }
// async function toggleStatusCustomer(id: string, status: boolean) {
// const res = await customerStore.editById(id, {
// status: !status ? 'ACTIVE' : 'INACTIVE',
// });
// if (res && customerFormState.value.drawerModal)
// customerFormData.value.status = res.status;
// await fetchListCustomer(false, $q.screen.xs);
// flowStore.rotate();
// }
// async function openHistory(id: string) {
// const res = await employeeStore.getEditHistory(id);
// employeeHistory.value = res.reverse();
// employeeHistoryDialog.value = true;
// }
// async function editCustomerForm(id: string) {
// await customerFormStore.assignFormData(id);
// await fetchListOfOptionBranch();
// await fetchImageList(
// id,
// customerFormData.value.selectedImage || '',
// 'customer',
// );
// customerFormState.value.branchIndex = -1;
// customerFormState.value.dialogType = 'edit';
// customerFormState.value.drawerModal = true;
// customerFormState.value.editCustomerId = id;
// }
// async function editEmployeeFormPersonal(id: string) {
// await employeeFormStore.assignFormDataEmployee(id);
// await fetchImageList(
// id,
// currentFromDataEmployee.value.selectedImage || '',
// 'employee',
// );
// employeeFormState.value.isEmployeeEdit = true;
// employeeFormState.value.dialogType = 'edit';
// employeeFormState.value.drawerModal = true;
// }
// async function openSpecificCustomer(id: string) {
// await customerFormStore.assignFormData(id);
// await fetchImageList(
// id,
// customerFormData.value.selectedImage || '',
// 'customer',
// );
// customerFormState.value.branchIndex = -1;
// customerFormState.value.drawerModal = true;
// customerFormState.value.editCustomerId = id;
// customerFormState.value.dialogType = 'info';
// }
// async function openSpecificEmployee(id: string) {
// await employeeFormStore.assignFormDataEmployee(id);
// await fetchImageList(
// id,
// currentFromDataEmployee.value.selectedImage || '',
// 'employee',
// );
// employeeFormState.value.dialogType = 'info';
// employeeFormState.value.drawerModal = true;
// }
// TODO: When in employee form, if select address same as customer then auto fill
// watch(
// () => employeeFormState.value.currentCustomerBranch,
// (e) => {
// if (!e) return;
// if (employeeFormState.value.formDataEmployeeSameAddr) {
// currentFromDataEmployee.value.address = e.address;
// currentFromDataEmployee.value.addressEN = e.addressEN;
// currentFromDataEmployee.value.provinceId = e.provinceId;
// currentFromDataEmployee.value.districtId = e.districtId;
// currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
// }
// currentFromDataEmployee.value.customerBranchId = e.id;
// },
// );
// watch(
// () => employeeFormState.value.formDataEmployeeSameAddr,
// (isSame) => {
// if (!employeeFormState.value.currentCustomerBranch) return;
// if (isSame) {
// currentFromDataEmployee.value.address =
// employeeFormState.value.currentCustomerBranch.address;
// currentFromDataEmployee.value.addressEN =
// employeeFormState.value.currentCustomerBranch.addressEN;
// currentFromDataEmployee.value.provinceId =
// employeeFormState.value.currentCustomerBranch.provinceId;
// currentFromDataEmployee.value.districtId =
// employeeFormState.value.currentCustomerBranch.districtId;
// currentFromDataEmployee.value.subDistrictId =
// employeeFormState.value.currentCustomerBranch.subDistrictId;
// }
// currentFromDataEmployee.value.customerBranchId =
// employeeFormState.value.currentCustomerBranch.id;
// },
// );
// watch(
// () => employeeFormState.value.currentTab,
// () => {
// employeeFormState.value.isEmployeeEdit = false;
// },
// );
// watch(
// () => currentFromDataEmployee.value.dateOfBirth,
// (v) => {
// const isEdit =
// employeeFormState.value.drawerModal &&
// employeeFormState.value.isEmployeeEdit;
// let currentFormDate = v && toISOStringWithTimezone(new Date(v));
// let currentDate: string = '';
// if (isEdit && employeeFormState.value.currentEmployee) {
// currentDate = toISOStringWithTimezone(
// new Date(employeeFormState.value.currentEmployee.dateOfBirth),
// );
// }
// if (
// employeeFormState.value.dialogModal ||
// (isEdit && currentFormDate !== currentDate)
// ) {
// const age = calculateAge(
// currentFromDataEmployee.value.dateOfBirth,
// 'year',
// );
// if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
// dialog({
// color: 'warning',
// icon: 'mdi-alert',
// title: t('dialog.title.youngWorker15'),
// cancelText: t('general.edit'),
// persistent: true,
// message: t('dialog.message.youngWorker15'),
// cancel: async () => {
// currentFromDataEmployee.value.dateOfBirth = null;
// return;
// },
// });
// }
// if (
// currentFromDataEmployee.value.dateOfBirth &&
// Number(age) > 15 &&
// Number(age) <= 18
// ) {
// dialog({
// color: 'warning',
// icon: 'mdi-alert',
// title: t('dialog.title.youngWorker18'),
// cancelText: t('general.cancel'),
// actionText: t('general.confirm'),
// persistent: true,
// message: t('dialog.message.youngWorker18'),
// action: () => {},
// cancel: async () => {
// currentFromDataEmployee.value.dateOfBirth = null;
// return;
// },
// });
// }
// }
// },
// );
// watch(
// () => customerFormData.value.image,
// () => {
// if (customerFormData.value.image !== null)
// customerFormState.value.isImageEdit = true;
// },
// );
// watch(
// () => currentFromDataEmployee.value.image,
// () => {
// if (currentFromDataEmployee.value.image !== null)
// employeeFormState.value.isImageEdit = true;
// },
// );
// const emptyCreateDialog = ref(false);
</script>
<template>

View file

@ -8,6 +8,7 @@ import { useRoute, useRouter } from 'vue-router';
import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
import KebabAction from 'src/components/shared/KebabAction.vue';
import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
import { DialogContainer, DialogHeader } from 'components/dialog';
import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
import EmptyAddButton from 'components/AddButton.vue';
@ -262,9 +263,16 @@ async function toggleStatusCustomer(id: string, status: boolean) {
flowStore.rotate();
}
async function fetchListEmployee(customerId: string) {
async function fetchListEmployee(opt?: {
fetchStats?: boolean;
page?: number;
pageSize?: number;
customerId?: string;
mobileFetch?: boolean;
}) {
//
const resultListEmployee = await employeeStore.fetchList({
customerId: customerId,
customerId: opt.customerId,
page: 1,
pageSize: 9999,
passport: true,
@ -662,7 +670,9 @@ onMounted(async () => {
props.row.id;
// TODO:
await fetchListEmployee(props.row.id);
await fetchListEmployee({
customerId: props.row.id,
});
currentBtnOpen.map((v, i) => {
if (i !== props.rowIndex) {
@ -1940,6 +1950,11 @@ onMounted(async () => {
</div>
</template>
</ImageUploadDialog>
<DrawerEmployee
:fetch-list-employee="fetchListEmployee"
:current-tab="currentTab"
/>
</template>
<style scoped>

File diff suppressed because it is too large Load diff