refactor: add upload file of employee
This commit is contained in:
Thanaphon Frappet
parent
13b8b480c6
commit
30c78ef269
2 changed files with 162 additions and 112 deletions
|
|
@ -15,6 +15,7 @@ import useOptionStore from 'stores/options';
|
|||
import { useQuotationForm } from './form';
|
||||
import useOcrStore from 'stores/ocr';
|
||||
import { deleteItem } from 'stores/utils';
|
||||
import { runOcr, parseResultMRZ } from 'src/utils/ocr';
|
||||
|
||||
// NOTE Import Types
|
||||
import { QuotationPayload } from 'src/stores/quotations/types';
|
||||
|
|
@ -49,6 +50,7 @@ import {
|
|||
uploadFileListEmployee,
|
||||
columnsAttachment,
|
||||
} from 'src/pages/03_customer-management/constant';
|
||||
import { group } from 'node:console';
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
|
|
@ -80,9 +82,12 @@ const $q = useQuasar();
|
|||
const {
|
||||
currentFormData: quotationFormData,
|
||||
currentFormState: quotationFormState,
|
||||
newWorkerList,
|
||||
fileItemNewWorker,
|
||||
} = storeToRefs(quotationForm);
|
||||
|
||||
const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
|
||||
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
|
||||
const selectedBranchIssuer = ref('');
|
||||
const selectedCustomer = ref('');
|
||||
const toggleWorker = ref(true);
|
||||
|
|
@ -91,9 +96,18 @@ const branchId = ref('');
|
|||
const date = ref();
|
||||
|
||||
const preSelectedWorker = ref<Employee[]>([]);
|
||||
const selectedWorker = ref<Employee[]>([]);
|
||||
const selectedWorker = ref<
|
||||
(Employee & {
|
||||
attachment?: {
|
||||
name?: string;
|
||||
group?: string;
|
||||
url?: string;
|
||||
file?: File;
|
||||
_meta?: Record<string, any>;
|
||||
}[];
|
||||
})[]
|
||||
>([]);
|
||||
const workerList = ref<Employee[]>([]);
|
||||
const newWorkerList = ref<EmployeeWorker[]>([]);
|
||||
|
||||
const agentPrice = ref(false);
|
||||
const summaryPrice = ref<{
|
||||
|
|
@ -141,8 +155,18 @@ const selectedGroup = ref<ProductGroup | null>(null);
|
|||
|
||||
const selectedProductServiceId = ref('');
|
||||
|
||||
const formDataEmployee = ref<EmployeeWorker>({
|
||||
alienReferencNumber: '',
|
||||
const formDataEmployee = ref<
|
||||
EmployeeWorker & {
|
||||
attachment?: {
|
||||
name?: string;
|
||||
group?: string;
|
||||
url?: string;
|
||||
file?: File;
|
||||
_meta?: Record<string, any>;
|
||||
}[];
|
||||
}
|
||||
>({
|
||||
passportNo: '',
|
||||
documentExpireDate: new Date(),
|
||||
lastNameEN: '',
|
||||
lastName: '',
|
||||
|
|
@ -154,6 +178,7 @@ const formDataEmployee = ref<EmployeeWorker>({
|
|||
nationality: '',
|
||||
gender: '',
|
||||
dateOfBirth: new Date(),
|
||||
attachment: [],
|
||||
});
|
||||
|
||||
const productServiceList = ref<
|
||||
|
|
@ -163,7 +188,7 @@ const productServiceList = ref<
|
|||
function convertDataToFormSubmit() {
|
||||
quotationFormData.value.productServiceList = JSON.parse(
|
||||
JSON.stringify(
|
||||
productServiceList.value.map((v, i) => ({
|
||||
productServiceList.value.map((v) => ({
|
||||
workerIndex: [0, 1],
|
||||
discount: 1,
|
||||
amount: 1,
|
||||
|
|
@ -174,11 +199,27 @@ function convertDataToFormSubmit() {
|
|||
),
|
||||
);
|
||||
|
||||
selectedWorker.value.forEach((v, i) => {
|
||||
if (v.attachment !== undefined) {
|
||||
v.attachment.forEach((value) => {
|
||||
fileItemNewWorker.value.push({
|
||||
employeeIndex: i,
|
||||
name: value.name,
|
||||
group: value.group as 'passport' | 'visa' | 'in-country-notice',
|
||||
url: value.url,
|
||||
file: value.file,
|
||||
_meta: value._meta,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
quotationFormData.value.worker = JSON.parse(
|
||||
JSON.stringify(
|
||||
selectedWorker.value.map((v, i) => {
|
||||
selectedWorker.value.map((v) => {
|
||||
if (v.id === undefined) {
|
||||
return v;
|
||||
const { attachment, ...payload } = v;
|
||||
return payload;
|
||||
} else {
|
||||
return v.id;
|
||||
}
|
||||
|
|
@ -205,7 +246,7 @@ async function getAllProduct(
|
|||
|
||||
function setDefaultFormEmployee() {
|
||||
formDataEmployee.value = {
|
||||
alienReferencNumber: '',
|
||||
passportNo: '',
|
||||
documentExpireDate: new Date(),
|
||||
lastNameEN: '',
|
||||
lastName: '',
|
||||
|
|
@ -217,6 +258,7 @@ function setDefaultFormEmployee() {
|
|||
nationality: '',
|
||||
gender: '',
|
||||
dateOfBirth: new Date(),
|
||||
attachment: [],
|
||||
};
|
||||
|
||||
employeeFormState.value.dialogModal = false;
|
||||
|
|
@ -769,8 +811,7 @@ watch(
|
|||
:title="$t('form.title.create', { name: $t('customer.employee') })"
|
||||
:submit="
|
||||
() => {
|
||||
newWorkerList.push(formDataEmployee);
|
||||
quotationForm.injectNewEmployee(formDataEmployee, () =>
|
||||
quotationForm.injectNewEmployee({ data: formDataEmployee }, () =>
|
||||
setDefaultFormEmployee(),
|
||||
);
|
||||
}
|
||||
|
|
@ -899,9 +940,7 @@ watch(
|
|||
title="form.field.basicInformation"
|
||||
prefixId="dialog"
|
||||
dense
|
||||
v-model:alien-reference-number="
|
||||
formDataEmployee.alienReferencNumber
|
||||
"
|
||||
v-model:passport-no="formDataEmployee.passportNo"
|
||||
v-model:document-expire-date="formDataEmployee.documentExpireDate"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
|
|
@ -927,108 +966,68 @@ watch(
|
|||
|
||||
<UploadFileGroup
|
||||
show-title
|
||||
v-model:current-id="currentFromDataEmployee.id"
|
||||
v-model="currentFromDataEmployee.file"
|
||||
v-model="formDataEmployee.attachment"
|
||||
hide-action
|
||||
:group-list="uploadFileListEmployee"
|
||||
:menu="uploadFileListEmployee"
|
||||
:columns="columnsAttachment"
|
||||
:ocr="
|
||||
async (group, file) => {
|
||||
const res = await ocrStore.sendOcr({
|
||||
file: file,
|
||||
category: group,
|
||||
});
|
||||
if (group === 'passport') {
|
||||
mrz = await runOcr(file, parseResultMRZ);
|
||||
|
||||
if (res) {
|
||||
const tempValue = {
|
||||
status: true,
|
||||
group,
|
||||
meta: res.fields,
|
||||
};
|
||||
if (mrz !== null) {
|
||||
const mapMrz = Object.entries(mrz.result).map(
|
||||
([key, value]) => ({
|
||||
name: key,
|
||||
value: value,
|
||||
}),
|
||||
);
|
||||
const tempValue = {
|
||||
status: true,
|
||||
group,
|
||||
meta: mapMrz,
|
||||
};
|
||||
|
||||
return tempValue;
|
||||
return tempValue;
|
||||
}
|
||||
} else {
|
||||
const res = await ocrStore.sendOcr({
|
||||
file: file,
|
||||
category: group,
|
||||
});
|
||||
|
||||
if (res) {
|
||||
const tempValue = {
|
||||
status: true,
|
||||
group,
|
||||
meta: res.fields,
|
||||
};
|
||||
|
||||
return tempValue;
|
||||
}
|
||||
}
|
||||
return { status: false, group, meta: [] };
|
||||
}
|
||||
"
|
||||
:auto-save="currentFromDataEmployee.id !== ''"
|
||||
:download="
|
||||
(obj) => {
|
||||
employeeStore.getFile({
|
||||
parentId: currentFromDataEmployee.id || '',
|
||||
group: obj.group,
|
||||
fileId: obj._meta.id,
|
||||
});
|
||||
|
||||
return { status: true, group, meta: [] };
|
||||
}
|
||||
"
|
||||
:delete-item="
|
||||
async (obj) => {
|
||||
const res = await employeeStore.delMeta({
|
||||
parentId: currentFromDataEmployee.id || '',
|
||||
group: obj.group,
|
||||
metaId: obj._meta.id,
|
||||
});
|
||||
|
||||
if (res) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
"
|
||||
:save="
|
||||
async (
|
||||
group: 'passport' | 'visa',
|
||||
_meta: any,
|
||||
file: File | undefined,
|
||||
) => {
|
||||
if (file !== undefined && currentFromDataEmployee.id) {
|
||||
const res = await employeeStore.postMeta({
|
||||
parentId: currentFromDataEmployee.id || '',
|
||||
group,
|
||||
meta: _meta,
|
||||
file,
|
||||
});
|
||||
|
||||
if (res) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
const { id, employeeId, createdAt, updatedAt, ...payload } =
|
||||
_meta;
|
||||
const res = await employeeStore.putMeta({
|
||||
parentId: currentFromDataEmployee.id || '',
|
||||
group,
|
||||
metaId: _meta.id,
|
||||
meta: payload,
|
||||
file,
|
||||
});
|
||||
if (res) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
async () => {
|
||||
return true;
|
||||
}
|
||||
"
|
||||
:get-file-list="
|
||||
async (group: 'passport' | 'visa') => {
|
||||
if (!!currentFromDataEmployee.id) {
|
||||
const resMeta = await employeeStore.getMetaList({
|
||||
parentId: currentFromDataEmployee.id,
|
||||
group,
|
||||
});
|
||||
if (formDataEmployee.attachment !== undefined) {
|
||||
const resMeta = formDataEmployee.attachment.filter(
|
||||
(v) => v.group === group,
|
||||
);
|
||||
|
||||
const tempValue = resMeta.map(async (i: any) => {
|
||||
return {
|
||||
_meta: { ...i },
|
||||
_meta: { ...i._meta },
|
||||
name: i.id || '',
|
||||
group: group,
|
||||
url: await employeeStore.getFile({
|
||||
parentId: currentFromDataEmployee.id || '',
|
||||
group,
|
||||
fileId: i.id,
|
||||
}),
|
||||
url: i.url,
|
||||
file: undefined,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { QuotationPayload, EmployeeWorker } from 'src/stores/quotations/types';
|
|||
|
||||
// NOTE: Import stores
|
||||
import { useQuotationStore } from 'stores/quotations';
|
||||
import useEmployeeStore from 'stores/employee';
|
||||
|
||||
const DEFAULT_DATA: QuotationPayload = {
|
||||
productServiceList: [],
|
||||
|
|
@ -32,9 +33,30 @@ export const useQuotationForm = defineStore('form-quotation', () => {
|
|||
const { t } = useI18n();
|
||||
|
||||
const quotationStore = useQuotationStore();
|
||||
const employeeStore = useEmployeeStore();
|
||||
const newWorkerList = ref<
|
||||
(EmployeeWorker & {
|
||||
attachment?: {
|
||||
name?: string;
|
||||
group?: string;
|
||||
url?: string;
|
||||
file?: File;
|
||||
_meta?: Record<string, any>;
|
||||
}[];
|
||||
})[]
|
||||
>([]);
|
||||
|
||||
let resetFormData = structuredClone(DEFAULT_DATA);
|
||||
|
||||
const fileItemNewWorker = ref<
|
||||
{
|
||||
employeeIndex: number;
|
||||
name?: string;
|
||||
group: 'passport' | 'visa' | 'in-country-notice';
|
||||
url?: string;
|
||||
file?: File;
|
||||
_meta?: Record<string, any>;
|
||||
}[]
|
||||
>([]);
|
||||
const currentTreeData = ref();
|
||||
const currentFormData = ref<QuotationPayload & { id?: string }>(
|
||||
structuredClone(resetFormData),
|
||||
|
|
@ -56,7 +78,8 @@ export const useQuotationForm = defineStore('form-quotation', () => {
|
|||
if (clean) {
|
||||
currentFormData.value = structuredClone(DEFAULT_DATA);
|
||||
resetFormData = structuredClone(DEFAULT_DATA);
|
||||
|
||||
fileItemNewWorker.value = [];
|
||||
newWorkerList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +115,19 @@ export const useQuotationForm = defineStore('form-quotation', () => {
|
|||
|
||||
async function submitQuotation() {
|
||||
if (currentFormState.value.mode === 'create') {
|
||||
await quotationStore.createQuotation(currentFormData.value);
|
||||
const res = await quotationStore.createQuotation(currentFormData.value);
|
||||
|
||||
if (res !== null) {
|
||||
fileItemNewWorker.value.forEach(async (v) => {
|
||||
if (v.group === undefined) return;
|
||||
await employeeStore.postMeta({
|
||||
group: v.group,
|
||||
parentId: res.worker[v.employeeIndex].employeeId,
|
||||
meta: v._meta,
|
||||
file: v.file,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
if (currentFormState.value.mode === 'edit' && currentFormData.value.id) {
|
||||
await quotationStore.editQuotation({
|
||||
|
|
@ -104,20 +139,34 @@ export const useQuotationForm = defineStore('form-quotation', () => {
|
|||
currentFormState.value.mode = 'info';
|
||||
}
|
||||
|
||||
function injectNewEmployee(data: EmployeeWorker, callback?: () => void) {
|
||||
currentFormData.value.worker.push({
|
||||
alienReferencNumber: data.alienReferencNumber,
|
||||
documentExpireDate: data.documentExpireDate,
|
||||
lastNameEN: data.lastNameEN,
|
||||
lastName: data.lastName,
|
||||
middleNameEN: data.middleNameEN,
|
||||
middleName: data.middleName,
|
||||
firstNameEN: data.firstNameEN,
|
||||
firstName: data.firstName,
|
||||
namePrefix: data.namePrefix,
|
||||
nationality: data.nationality,
|
||||
gender: data.gender,
|
||||
dateOfBirth: data.dateOfBirth,
|
||||
function injectNewEmployee(
|
||||
obj: {
|
||||
data: EmployeeWorker & {
|
||||
attachment?: {
|
||||
name?: string;
|
||||
group?: string;
|
||||
url?: string;
|
||||
file?: File;
|
||||
_meta?: Record<string, any>;
|
||||
}[];
|
||||
};
|
||||
},
|
||||
callback?: () => void,
|
||||
) {
|
||||
newWorkerList.value.push({
|
||||
// passportNo: obj.data.passportNo, wait api add
|
||||
//documentExpireDate: obj.data.documentExpireDate,
|
||||
lastNameEN: obj.data.lastNameEN,
|
||||
lastName: obj.data.lastName,
|
||||
middleNameEN: obj.data.middleNameEN,
|
||||
middleName: obj.data.middleName,
|
||||
firstNameEN: obj.data.firstNameEN,
|
||||
firstName: obj.data.firstName,
|
||||
namePrefix: obj.data.namePrefix,
|
||||
nationality: obj.data.nationality,
|
||||
gender: obj.data.gender,
|
||||
dateOfBirth: obj.data.dateOfBirth,
|
||||
attachment: obj.data.attachment,
|
||||
});
|
||||
|
||||
callback?.();
|
||||
|
|
@ -141,6 +190,8 @@ export const useQuotationForm = defineStore('form-quotation', () => {
|
|||
return {
|
||||
currentFormState,
|
||||
currentFormData,
|
||||
newWorkerList,
|
||||
fileItemNewWorker,
|
||||
|
||||
isFormDataDifferent,
|
||||
injectNewEmployee,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue