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

refactor: add uploadfile at dialog

Browse source
This commit is contained in:
Net 2024-09-19 10:15:03 +07:00
parent 053d104090
commit 79cfdf859c
1 changed files with 231 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { getUserId, getRole } from 'src/services/keycloak'; import { getUserId, getRole } from 'src/services/keycloak';
import { baseUrl } from 'src/stores/utils'; import { baseUrl, waitAll } from 'src/stores/utils';
import useOcrStore from 'stores/ocr'; import useOcrStore from 'stores/ocr';
import useCustomerStore from 'stores/customer'; import useCustomerStore from 'stores/customer';
@ -914,16 +914,7 @@ const emptyCreateDialog = ref(false);
class="q-ml-sm col" class="q-ml-sm col"
:options=" :options="
currentTab === 'employer' currentTab === 'employer'
? gridView ? fieldDisplayCustomer
? fieldDisplayCustomer.filter((v) => {
return (
v.value !== 'orderNumber' &&
v.value !== 'titleName' &&
v.value !== 'address' &&
v.value !== 'contactName'
);
})
: fieldDisplayCustomer
: fieldDisplayEmployee : fieldDisplayEmployee
" "
:display-value="$t('general.displayField')" :display-value="$t('general.displayField')"
@ -1185,10 +1176,7 @@ const emptyCreateDialog = ref(false);
}} }}
</q-td> </q-td>
<q-td <q-td v-if="fieldSelected.includes('fullname')">
v-if="fieldSelected.includes('titleName')"
style="padding-block: 7px; padding-inline: 0px"
>
<div class="row items-center"> <div class="row items-center">
<div <div
class="q-mr-sm" class="q-mr-sm"
@ -1250,7 +1238,7 @@ const emptyCreateDialog = ref(false);
? optionStore.mapOption( ? optionStore.mapOption(
props.row.branch[0].businessType, props.row.branch[0].businessType,
) )
: '-' : ''
: '-' : '-'
}} }}
</q-td> </q-td>
@ -1262,25 +1250,19 @@ const emptyCreateDialog = ref(false);
? optionStore.mapOption( ? optionStore.mapOption(
props.row.branch[0].jobPosition, props.row.branch[0].jobPosition,
) )
: '-' : ''
: '-' : '-'
}} }}
</q-td> </q-td>
<q-td v-if="fieldSelected.includes('address')">
{{
locale === 'eng'
? `${props.row.branch[0].addressEN} ${props.row.branch[0].mooEN} ${props.row.branch[0].soiEN} ${props.row.branch[0].streetEN} ${props.row.branch[0].subDistrict.nameEN} ${props.row.branch[0].district.nameEN} ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}`
: `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} ต.${props.row.branch[0].subDistrict.name} อ.${props.row.branch[0].district.name} จ.${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}`
}}
</q-td>
<q-td v-if="fieldSelected.includes('contactName')">
{{ props.row.branch[0]?.contactName || '-' }}
</q-td>
<q-td v-if="fieldSelected.includes('officeTel')"> <q-td v-if="fieldSelected.includes('officeTel')">
{{ props.row.branch[0]?.officeTel || '-' }} {{
props.row.branch.length !== 0
? props.row.branch[0].officeTel !== null
? props.row.branch[0].officeTel
: ''
: '-'
}}
</q-td> </q-td>
<q-td> <q-td>
@ -1441,7 +1423,12 @@ const emptyCreateDialog = ref(false);
: props.row.branch[0]?.firstName + : props.row.branch[0]?.firstName +
' ' + ' ' +
props.row.branch[0]?.lastName || '-', props.row.branch[0]?.lastName || '-',
taxNo: 'asdasd',
branchLabelTel: 'asdas',
contactName: 'zxczxcz',
branchImgUrl: `/customer/${props.row.id}/image/${props.row.selectedImage}`,
}" }"
:badge-field="['branchLabelStatus']"
:inactive="props.row.status === 'INACTIVE'" :inactive="props.row.status === 'INACTIVE'"
:field-selected=" :field-selected="
fieldSelected.filter((v) => { fieldSelected.filter((v) => {
@ -1465,8 +1452,8 @@ const emptyCreateDialog = ref(false);
class="absolute-bottom-right no-padding" class="absolute-bottom-right no-padding"
style=" style="
border-radius: 50%; border-radius: 50%;
min-width: 10px; min-width: 11.31px;
min-height: 10px; min-height: 11.31px;
" "
:style="{ :style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`, background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
@ -1482,22 +1469,6 @@ const emptyCreateDialog = ref(false);
padding-block: var(--size-2); padding-block: var(--size-2);
" "
> >
<div class="col-12 q-py-sm row">
<span class="col-4 app-text-muted">
{{
props.row.customerType === 'CORP'
? $t('customer.form.legalPersonCode')
: $t('customer.form.cardNumber')
}}
</span>
<span class="col">
{{
props.row.customerType === 'CORP'
? props.row.branch[0]?.legalPersonNo
: props.row.branch[0]?.citizenId
}}
</span>
</div>
<div <div
class="col-12 q-py-sm row" class="col-12 q-py-sm row"
v-for="key in fieldSelected v-for="key in fieldSelected
@ -1508,10 +1479,7 @@ const emptyCreateDialog = ref(false);
}) })
.filter((v) => { .filter((v) => {
return ( return (
v !== 'orderNumber' && v !== 'orderNumber' && v !== 'fullname'
v !== 'titleName' &&
v !== 'address' &&
v !== 'contactName'
); );
})" })"
:key="key" :key="key"
@ -1530,7 +1498,7 @@ const emptyCreateDialog = ref(false);
props.row.branch[0].jobPosition, props.row.branch[0].jobPosition,
) )
: key === 'officeTel' : key === 'officeTel'
? props.row.branch[0].officeTel || '-' ? props.row.branch[0].officeTel
: '' : ''
}} }}
</span> </span>
@ -1959,7 +1927,6 @@ const emptyCreateDialog = ref(false);
{ {
name: $t('customer.form.group.branch'), name: $t('customer.form.group.branch'),
anchor: 'form-branch-customer-branch', anchor: 'form-branch-customer-branch',
useBtn: true,
}, },
...(customerFormData.customerBranch?.map((v, i) => ({ ...(customerFormData.customerBranch?.map((v, i) => ({
name: name:
@ -1978,21 +1945,7 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)', foreground: 'var(--blue-6)',
}" }"
scroll-element="#customer-form-content" scroll-element="#customer-form-content"
> />
<template v-slot:btn-form-branch-customer-branch>
<AddButton
iconOnly
type="button"
@click.stop="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</template>
</SideMenu>
</div> </div>
</div> </div>
<div <div
@ -2051,6 +2004,18 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)" style="background-color: var(--surface-3)"
/> />
<span>{{ $t('customer.form.group.branch') }}</span> <span>{{ $t('customer.form.group.branch') }}</span>
<AddButton
icon-only
type="button"
class="q-ml-sm"
@click="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</div> </div>
<template <template
@ -2506,6 +2471,7 @@ const emptyCreateDialog = ref(false);
v-model:provinceId="currentFromDataEmployee.provinceId" v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId" v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId" v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
employee employee
dense dense
class="q-mb-xl" class="q-mb-xl"
@ -2523,16 +2489,100 @@ const emptyCreateDialog = ref(false);
/> />
{{ $t(`general.uploadFile`) }} {{ $t(`general.uploadFile`) }}
</div> </div>
<!-- สร้างลูกจ้าง -->
<UploadFileGroup <UploadFileGroup
v-model:current-id="currentFromDataEmployee.id"
v-model="currentFromDataEmployee.file" v-model="currentFromDataEmployee.file"
hide-action hide-action
v-model:current-selected-menu="currentSelectedMenu" v-model:current-selected-menu="currentSelectedMenu"
:group-list="uploadFileListEmployee" :group-list="uploadFileListEmployee"
:menu="uploadFileListEmployee" :menu="uploadFileListEmployee"
:columns="columnsAttachment" :columns="columnsAttachment"
:auto-save="currentFromDataEmployee.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=" :get-file-list="
async (group: 'passport' | 'visa') => { async (group: 'passport' | 'visa') => {
if (!!currentFromDataEmployee.id) { if (!!currentFromDataEmployee.id) {
const res = await employeeStore.listFile({
parentId: currentFromDataEmployee.id,
group,
});
const resMeta = await employeeStore.getMetaList({
parentId: currentFromDataEmployee.id,
group,
});
if (Array.isArray(res)) {
const tempValue = res.map(async (item, index) => {
return {
_meta: { ...resMeta[index] },
name: item || '',
group: group,
url: await employeeStore.getFile({
parentId: currentFromDataEmployee.id || '',
group,
fileId: resMeta[index].id,
}),
file: undefined,
};
});
return await waitAll(tempValue);
}
return []; return [];
} }
return []; return [];
@ -2563,15 +2613,10 @@ const emptyCreateDialog = ref(false);
:readonly="!employeeFormState.isEmployeeEdit" :readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="meta.type" v-model:passport-type="meta.type"
v-model:passport-number="meta.number" v-model:passport-number="meta.number"
v-model:passport-issue-date="meta.passportIssueDate" v-model:passport-issue-date="meta.issueDate"
v-model:passport-expiry-date="meta.passportExpiryDate" v-model:passport-expiry-date="meta.expireDate"
v-model:passport-issuing-place="meta.passportIssuingPlace" v-model:passport-issuing-place="meta.issuePlace"
v-model:passport-issuing-country=" v-model:passport-issuing-country="meta.issueCountry"
meta.passportIssuingCountry
"
v-model:previous-passport-reference="
meta.previousPassportReference
"
/> />
<FormEmployeeVisa <FormEmployeeVisa
v-if="mode === 'visa' && meta" v-if="mode === 'visa' && meta"
@ -2969,13 +3014,13 @@ const emptyCreateDialog = ref(false);
() => { () => {
if (customerFormStore.isFormDataDifferent()) { if (customerFormStore.isFormDataDifferent()) {
customerConfirmUnsave(); customerConfirmUnsave();
return true; return false;
} else { } else {
fetchListCustomer(); fetchListCustomer();
customerFormState.branchIndex = -1; customerFormState.branchIndex = -1;
customerFormStore.resetForm(true); customerFormStore.resetForm(true);
} }
return true; return false;
} }
" "
> >
@ -3045,10 +3090,13 @@ const emptyCreateDialog = ref(false);
name: $t('form.field.basicInformation'), name: $t('form.field.basicInformation'),
anchor: 'form-basic-info-customer', anchor: 'form-basic-info-customer',
}, },
{
name: $t('customerBranch.tab.attachment'),
anchor: 'form-upload-file-customer',
},
{ {
name: $t('customer.form.group.branch'), name: $t('customer.form.group.branch'),
anchor: 'form-branch-customer-branch', anchor: 'form-branch-customer-branch',
useBtn: true,
}, },
...(customerFormData.customerBranch?.map((v, i) => ({ ...(customerFormData.customerBranch?.map((v, i) => ({
@ -3068,21 +3116,7 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)', foreground: 'var(--blue-6)',
}" }"
scroll-element="#customer-form-content" scroll-element="#customer-form-content"
> />
<template v-slot:btn-form-branch-customer-branch>
<AddButton
iconOnly
type="button"
@click.stop="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</template>
</SideMenu>
</div> </div>
</div> </div>
@ -3162,6 +3196,18 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)" style="background-color: var(--surface-3)"
/> />
<span>{{ $t('customer.form.group.branch') }}</span> <span>{{ $t('customer.form.group.branch') }}</span>
<AddButton
icon-only
type="button"
class="q-ml-sm"
@click="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormData.status !== 'INACTIVE'
"
:disabled="!customerFormState.readonly"
/>
</div> </div>
<template <template
@ -3611,6 +3657,7 @@ const emptyCreateDialog = ref(false);
v-model:provinceId="currentFromDataEmployee.provinceId" v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId" v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId" v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
v-model:sameWithEmployer=" v-model:sameWithEmployer="
employeeFormState.formDataEmployeeSameAddr employeeFormState.formDataEmployeeSameAddr
" "
@ -3632,16 +3679,100 @@ const emptyCreateDialog = ref(false);
/> />
{{ $t(`general.uploadFile`) }} {{ $t(`general.uploadFile`) }}
</div> </div>
<!-- แก้ไขลูกจ้าง -->
<UploadFileGroup <UploadFileGroup
v-model:current-id="currentFromDataEmployee.id"
v-model="currentFromDataEmployee.file" v-model="currentFromDataEmployee.file"
hide-action hide-action
v-model:current-selected-menu="currentSelectedMenu" v-model:current-selected-menu="currentSelectedMenu"
:group-list="uploadFileListEmployee" :group-list="uploadFileListEmployee"
:menu="uploadFileListEmployee" :menu="uploadFileListEmployee"
:columns="columnsAttachment" :columns="columnsAttachment"
auto-save
: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=" :get-file-list="
async (group: 'passport' | 'visa') => { async (group: 'passport' | 'visa') => {
if (!!currentFromDataEmployee.id) { if (!!currentFromDataEmployee.id) {
const res = await employeeStore.listFile({
parentId: currentFromDataEmployee.id,
group,
});
const resMeta = await employeeStore.getMetaList({
parentId: currentFromDataEmployee.id,
group,
});
if (Array.isArray(res)) {
const tempValue = res.map(async (item, index) => {
return {
_meta: { ...resMeta[index] },
name: item || '',
group: group,
url: await employeeStore.getFile({
parentId: currentFromDataEmployee.id || '',
group,
fileId: resMeta[index].id,
}),
file: undefined,
};
});
return await waitAll(tempValue);
}
return []; return [];
} }
return []; return [];
@ -3672,15 +3803,10 @@ const emptyCreateDialog = ref(false);
:readonly="!employeeFormState.isEmployeeEdit" :readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="meta.type" v-model:passport-type="meta.type"
v-model:passport-number="meta.number" v-model:passport-number="meta.number"
v-model:passport-issue-date="meta.passportIssueDate" v-model:passport-issue-date="meta.issueDate"
v-model:passport-expiry-date="meta.passportExpiryDate" v-model:passport-expiry-date="meta.expireDate"
v-model:passport-issuing-place="meta.passportIssuingPlace" v-model:passport-issuing-place="meta.issuePlace"
v-model:passport-issuing-country=" v-model:passport-issuing-country="meta.issueCountry"
meta.passportIssuingCountry
"
v-model:previous-passport-reference="
meta.previousPassportReference
"
/> />
<FormEmployeeVisa <FormEmployeeVisa
v-if="mode === 'visa' && meta" v-if="mode === 'visa' && meta"