refactor edit layout form
This commit is contained in:
Net
parent
31e7c84296
commit
1a14a44f6c
1 changed files with 276 additions and 61 deletions
|
|
@ -18,8 +18,14 @@ import {
|
|||
SaveButton,
|
||||
UndoButton,
|
||||
} from 'components/button';
|
||||
import {
|
||||
UploadFileGroup,
|
||||
FormTm6,
|
||||
noticeJobEmployment,
|
||||
} from 'components/upload-file';
|
||||
|
||||
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
|
||||
import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
|
||||
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
|
||||
import { DialogContainer, DialogHeader } from 'components/dialog';
|
||||
import ProfileBanner from 'components/ProfileBanner.vue';
|
||||
|
|
@ -83,7 +89,8 @@ const { state: customerFormState, currentFormData: customerFormData } =
|
|||
const { state: employeeFormState, currentFromDataEmployee } =
|
||||
storeToRefs(employeeFormStore);
|
||||
|
||||
const test = ref(true);
|
||||
const test1 = ref(true);
|
||||
const test2 = ref(true);
|
||||
const dialog = ref(true);
|
||||
const nodes = ref([
|
||||
{
|
||||
|
|
@ -728,7 +735,7 @@ onMounted(async () => {
|
|||
</DialogForm>
|
||||
|
||||
<DialogContainer
|
||||
:model-value="test"
|
||||
:model-value="test1"
|
||||
:on-open="async () => {}"
|
||||
:on-close="() => {}"
|
||||
>
|
||||
|
|
@ -796,10 +803,16 @@ onMounted(async () => {
|
|||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
<q-form
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg"
|
||||
id="customer-form"
|
||||
greedy
|
||||
@submit.prevent="
|
||||
async () => {
|
||||
console.log('test');
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="col surface-1 full-height rounded bordered scroll row">
|
||||
<div
|
||||
|
|
@ -807,63 +820,106 @@ onMounted(async () => {
|
|||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<div class="row" id="form-branch-customer-branch">
|
||||
<div
|
||||
class="surface-1 rounded q-pt-sm row"
|
||||
style="position: absolute; z-index: 999; right: 4%"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="
|
||||
employeeFormState.isEmployeeEdit &&
|
||||
employeeFormState.dialogType !== 'create'
|
||||
"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!employeeFormState.isEmployeeEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row full-width q-col-gutter-sm"
|
||||
id="form-branch-customer-branch"
|
||||
>
|
||||
<!-- v-if="customerFormData.customerBranch" -->
|
||||
<q-form
|
||||
class="full-width q-col-gutter-sm"
|
||||
greedy
|
||||
@submit.prevent="async () => {}"
|
||||
>
|
||||
<!-- v-if="!!customerFormState.editCustomerId" -->
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customer.form.group.branch') }}</span>
|
||||
</div>
|
||||
<!-- v-if="!!customerFormState.editCustomerId" -->
|
||||
|
||||
<EmployerFormAbout :index="(0).toString()" customerType="CORP" />
|
||||
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customerBranch.tab.business') }}</span>
|
||||
</div>
|
||||
|
||||
<EmployerFormBusiness prefixId="dialog" dense outlined />
|
||||
|
||||
<AddressForm
|
||||
prefix-id="employer"
|
||||
hide-title
|
||||
dense
|
||||
outlined
|
||||
use-employment
|
||||
:title="$t('form.address')"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
</q-form>
|
||||
<span>{{ $t('customer.form.group.branch') }}</span>
|
||||
</div>
|
||||
|
||||
<EmployerFormAbout :index="(0).toString()" customerType="CORP" />
|
||||
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customerBranch.tab.business') }}</span>
|
||||
</div>
|
||||
|
||||
<EmployerFormBusiness prefixId="dialog" dense outlined />
|
||||
|
||||
<AddressForm
|
||||
prefix-id="employer"
|
||||
hide-title
|
||||
dense
|
||||
outlined
|
||||
use-employment
|
||||
:title="$t('form.address')"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</DialogContainer>
|
||||
|
||||
<DialogForm
|
||||
hideFooter
|
||||
:title="$t('form.title.create', { name: $t('customer.employee') })"
|
||||
v-model:modal="test"
|
||||
v-model:modal="test2"
|
||||
:undo="() => {}"
|
||||
:submit="async () => {}"
|
||||
:show="() => {}"
|
||||
|
|
@ -912,7 +968,7 @@ onMounted(async () => {
|
|||
>
|
||||
<div class="col surface-1 full-height rounded bordered scroll row">
|
||||
<div
|
||||
class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm"
|
||||
class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm q-col-gutter-sm"
|
||||
id="employee-form-content"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
>
|
||||
|
|
@ -962,18 +1018,12 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<BasicInformation
|
||||
no-action
|
||||
id="form-information"
|
||||
prefix-id="form-employee"
|
||||
:show-btn-save="employeeFormState.dialogType === 'create'"
|
||||
employee
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
<FormReferDocument
|
||||
title="form.field.basicInformation"
|
||||
class="q-mb-xl"
|
||||
prefixId="dialog"
|
||||
dense
|
||||
/>
|
||||
|
||||
<FormPerson
|
||||
id="form-personal"
|
||||
prefix-id="form-employee"
|
||||
|
|
@ -981,9 +1031,174 @@ onMounted(async () => {
|
|||
outlined
|
||||
employee
|
||||
separator
|
||||
title="customerEmployee.form.group.personalInfo"
|
||||
hideNameEn
|
||||
title="personnel.form.personalInformation"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
|
||||
<UploadFileGroup
|
||||
v-model:current-id="currentFromDataEmployee.id"
|
||||
v-model="currentFromDataEmployee.file"
|
||||
hide-action
|
||||
:group-list="uploadFileListEmployee"
|
||||
:menu="uploadFileListEmployee"
|
||||
:columns="columnsAttachment"
|
||||
:ocr="
|
||||
async (group, file) => {
|
||||
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,
|
||||
});
|
||||
}
|
||||
"
|
||||
: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;
|
||||
}
|
||||
"
|
||||
:get-file-list="
|
||||
async (group: 'passport' | 'visa') => {
|
||||
if (!!currentFromDataEmployee.id) {
|
||||
const resMeta = await employeeStore.getMetaList({
|
||||
parentId: currentFromDataEmployee.id,
|
||||
group,
|
||||
});
|
||||
|
||||
const tempValue = resMeta.map(async (i: any) => {
|
||||
return {
|
||||
_meta: { ...i },
|
||||
name: i.id || '',
|
||||
group: group,
|
||||
url: await employeeStore.getFile({
|
||||
parentId: currentFromDataEmployee.id || '',
|
||||
group,
|
||||
fileId: i.id,
|
||||
}),
|
||||
file: undefined,
|
||||
};
|
||||
});
|
||||
|
||||
return await waitAll(tempValue);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #form="{ mode, meta, isEdit }">
|
||||
<FormCitizen
|
||||
v-if="mode === 'citizen' && meta"
|
||||
orc
|
||||
ra
|
||||
:readonly="!isEdit"
|
||||
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:address="meta.address"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
|
||||
<noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
|
||||
</template>
|
||||
</UploadFileGroup>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue