refactor: use UploadFileGroup
This commit is contained in:
Net
parent
801e3c30bb
commit
78c5eb73f8
1 changed files with 173 additions and 81 deletions
|
|
@ -7,12 +7,14 @@ import { CustomerCreate } from 'stores/customer/types';
|
|||
import EmployerFormAbout from './EmployerFormAbout.vue';
|
||||
import EmployerFormAuthorized from './EmployerFormAuthorized.vue';
|
||||
import { useCustomerForm } from 'src/pages/03_customer-management/form';
|
||||
|
||||
import { waitAll } from 'src/stores/utils';
|
||||
const customerFormStore = useCustomerForm();
|
||||
import { FormCitizen } from 'components/upload-file/';
|
||||
|
||||
import useOcrStore from 'stores/ocr';
|
||||
import useCustomerStore from 'stores/customer';
|
||||
|
||||
const customerStore = useCustomerStore();
|
||||
const ocrStore = useOcrStore();
|
||||
import {
|
||||
SaveButton,
|
||||
|
|
@ -20,8 +22,8 @@ import {
|
|||
DeleteButton,
|
||||
UndoButton,
|
||||
} from 'components/button';
|
||||
import UploadFile from 'src/components/upload-file/UploadFile.vue';
|
||||
import { uploadFileListCustomer } from '../../constant';
|
||||
import { UploadFileGroup } from 'src/components/upload-file/';
|
||||
import { uploadFileListCustomer, columnsAttachment } from '../../constant';
|
||||
|
||||
const statusOcr = ref(false);
|
||||
|
||||
|
|
@ -211,100 +213,190 @@ withDefaults(
|
|||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="attachment">
|
||||
<UploadFile
|
||||
<UploadFileGroup
|
||||
v-model:current-id="item.id"
|
||||
v-model="item.file"
|
||||
hide-action
|
||||
:readonly="readonly"
|
||||
:dropdown-list="uploadFileListCustomer"
|
||||
v-model:status-ocr="statusOcr"
|
||||
v-model:file="item.file"
|
||||
:tree-file="
|
||||
Object.values(
|
||||
item.file?.reduce<
|
||||
Record<string, { label: string; file: { label: string }[] }>
|
||||
>((a, c) => {
|
||||
const _group = c.group || 'other';
|
||||
|
||||
if (!a[_group]) {
|
||||
a[_group] = {
|
||||
label: $t(
|
||||
uploadFileListCustomer.find((v) => v.value === _group)
|
||||
?.label || _group,
|
||||
),
|
||||
file: [
|
||||
{
|
||||
label:
|
||||
c.name ||
|
||||
`${c.group}-${c.file?.name || Date.now()}`,
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
a[_group].file.push({
|
||||
label:
|
||||
c.name || `${c.group}-${c.file?.name || Date.now()}`,
|
||||
});
|
||||
}
|
||||
return a;
|
||||
}, {}) || {},
|
||||
)
|
||||
:menu="uploadFileListCustomer"
|
||||
:columns="columnsAttachment"
|
||||
:auto-save="item.id !== ''"
|
||||
:download="
|
||||
(obj) => {
|
||||
customerStore.getFile({
|
||||
parentId: item.id || '',
|
||||
group: obj.group,
|
||||
fileId: obj._meta.id,
|
||||
download: true,
|
||||
});
|
||||
}
|
||||
"
|
||||
@send-ocr="
|
||||
async (group: any, file: any) => {
|
||||
const res = await ocrStore.sendOcr({
|
||||
file: file,
|
||||
category: group,
|
||||
:delete-item="
|
||||
async (obj) => {
|
||||
const res = await customerStore.delMeta({
|
||||
parentId: item.id || '',
|
||||
group: obj.group,
|
||||
metaId: obj._meta.id,
|
||||
});
|
||||
|
||||
if (res) {
|
||||
const map = res.fields.reduce<Record<string, string>>(
|
||||
(a, c) => {
|
||||
a[c.name] = c.value;
|
||||
return a;
|
||||
},
|
||||
{},
|
||||
);
|
||||
if (!item.citizenId) item.citizenId = map['citizen_id'] || '';
|
||||
if (!item.address) item.address = map['address'] || '';
|
||||
if (!customer.firstName)
|
||||
customer.firstName = map['firstname'] || '';
|
||||
if (!customer.lastName)
|
||||
customer.lastName = map['lastname'] || '';
|
||||
if (!customer.firstNameEN)
|
||||
customer.firstNameEN = map['firstname_en'] || '';
|
||||
if (!customer.lastNameEN)
|
||||
customer.lastNameEN = map['lastname_en'] || '';
|
||||
if (!customer.birthDate)
|
||||
customer.birthDate = new Date(map['birth_date'] || '');
|
||||
return true;
|
||||
}
|
||||
|
||||
statusOcr = false;
|
||||
return false;
|
||||
}
|
||||
"
|
||||
@delete-file="
|
||||
(filename) => {
|
||||
if (!item.id) return;
|
||||
:save="
|
||||
async (
|
||||
group:
|
||||
| 'citizen'
|
||||
| 'house-registration'
|
||||
| 'commercial-registration'
|
||||
| 'vat-registration'
|
||||
| 'power-of-attorney',
|
||||
_meta: any,
|
||||
file: File | undefined,
|
||||
) => {
|
||||
if (file !== undefined && item.id) {
|
||||
const res = await customerStore.postMeta({
|
||||
parentId: item.id || '',
|
||||
group,
|
||||
meta: _meta,
|
||||
file,
|
||||
});
|
||||
|
||||
customerFormStore.deleteAttachment(
|
||||
{ branchId: item.id, customerId: item.customerId },
|
||||
filename,
|
||||
);
|
||||
if (res) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
const {
|
||||
customerBranchId,
|
||||
id,
|
||||
employeeId,
|
||||
createdAt,
|
||||
updatedAt,
|
||||
middleName,
|
||||
middleNameEN,
|
||||
|
||||
...payload
|
||||
} = _meta;
|
||||
const res = await customerStore.putMeta({
|
||||
parentId: item.id || '',
|
||||
group,
|
||||
metaId: _meta.id,
|
||||
meta: payload,
|
||||
file,
|
||||
});
|
||||
if (res) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
"
|
||||
:get-file-list="
|
||||
async (
|
||||
group:
|
||||
| 'citizen'
|
||||
| 'house-registration'
|
||||
| 'commercial-registration'
|
||||
| 'vat-registration'
|
||||
| 'power-of-attorney',
|
||||
) => {
|
||||
if (!!item.id) {
|
||||
const resMeta = await customerStore.getMetaList({
|
||||
parentId: item.id,
|
||||
group,
|
||||
});
|
||||
|
||||
const tempValue = resMeta.map(async (v: any) => {
|
||||
return {
|
||||
_meta: { ...v },
|
||||
name: v.id || '',
|
||||
group: group,
|
||||
url: await customerStore.getFile({
|
||||
parentId: item.id || '',
|
||||
group,
|
||||
fileId: v.id,
|
||||
}),
|
||||
file: undefined,
|
||||
};
|
||||
});
|
||||
|
||||
return await waitAll(tempValue);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #form="{ mode }">
|
||||
<template #form="{ mode, meta, isEdit }">
|
||||
<FormCitizen
|
||||
v-if="mode === 'citizenId'"
|
||||
v-if="mode === 'citizen' && meta"
|
||||
orc
|
||||
v-model:citizen-id="item.citizenId"
|
||||
v-model:birth-date="customer.birthDate"
|
||||
v-model:first-name="customer.firstName"
|
||||
v-model:first-name-en="customer.firstNameEN"
|
||||
v-model:last-name="customer.lastName"
|
||||
v-model:last-name-en="customer.lastNameEN"
|
||||
v-model:address="item.address"
|
||||
ra
|
||||
:readonly="!isEdit"
|
||||
v-model:name-prefix="meta.namePrefix"
|
||||
v-model:citizen-id="meta.citizenId"
|
||||
v-model:birth-date="meta.birthDate"
|
||||
v-model:first-name="meta.firstName"
|
||||
v-model:first-name-en="meta.firstNameEN"
|
||||
v-model:last-name="meta.lastName"
|
||||
v-model:last-name-en="meta.lastNameEN"
|
||||
v-model:gender="meta.gender"
|
||||
v-model:religion="meta.religion"
|
||||
v-model:nationality="meta.nationality"
|
||||
v-model:expire-date="meta.expireDate"
|
||||
v-model:issue-date="meta.issueDate"
|
||||
v-model:homeCode="meta.homeCode"
|
||||
v-model:employmentOffice="meta.employmentOffice"
|
||||
v-model:employmentOfficeEN="meta.employmentOfficeEN"
|
||||
v-model:address="meta.address"
|
||||
v-model:addressEN="meta.addressEN"
|
||||
v-model:street="meta.street"
|
||||
v-model:streetEN="meta.streetEN"
|
||||
v-model:moo="meta.moo"
|
||||
v-model:mooEN="meta.mooEN"
|
||||
v-model:soi="meta.soi"
|
||||
v-model:soiEN="meta.soiEN"
|
||||
v-model:province-id="meta.provinceId"
|
||||
v-model:district-id="meta.districtId"
|
||||
v-model:sub-district-id="meta.subDistrictId"
|
||||
v-model:middle-name="meta.middleName"
|
||||
v-model:middle-name-en="meta.middleNameEN"
|
||||
/>
|
||||
<FormEmployeePassport
|
||||
v-if="mode === 'passport' && meta"
|
||||
prefix-id="drawer-info-employee"
|
||||
id="form-passport"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
ocr
|
||||
:title="$t('customerEmployee.form.group.passport')"
|
||||
:readonly="!isEdit"
|
||||
v-model:passport-type="meta.type"
|
||||
v-model:passport-number="meta.number"
|
||||
v-model:passport-issue-date="meta.issueDate"
|
||||
v-model:passport-expiry-date="meta.expireDate"
|
||||
v-model:passport-issuing-place="meta.issuePlace"
|
||||
v-model:passport-issuing-country="meta.issueCountry"
|
||||
/>
|
||||
<FormEmployeeVisa
|
||||
v-if="mode === 'visa' && meta"
|
||||
prefix-id="drawer-info-employee"
|
||||
id="form-visa"
|
||||
ocr
|
||||
dense
|
||||
outlined
|
||||
title="customerEmployee.form.group.visa"
|
||||
:readonly="!isEdit"
|
||||
v-model:visa-type="meta.type"
|
||||
v-model:visa-number="meta.number"
|
||||
v-model:visa-issue-date="meta.issueDate"
|
||||
v-model:visa-expiry-date="meta.expireDate"
|
||||
v-model:visa-issuing-place="meta.issuePlace"
|
||||
/>
|
||||
</template>
|
||||
</UploadFile>
|
||||
</UploadFileGroup>
|
||||
|
||||
<!-- <EmployerFormAttachment
|
||||
:readonly="readonly"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue