fix: clean for remove warning console

This commit is contained in:
puriphatt 2024-07-01 08:40:37 +00:00
parent d1e6239a1f
commit 20e12b407a
6 changed files with 346 additions and 347 deletions

View file

@ -16,74 +16,76 @@ defineProps<{
}>(); }>();
</script> </script>
<template> <template>
<div class="col-3 app-text-muted"> {{ $t(`${title}`) }}</div> <div class="row col-12">
<div class="col-9 row q-col-gutter-md"> <div class="col-3 app-text-muted"> {{ $t(`${title}`) }}</div>
<q-input <div class="col-9 row q-col-gutter-md">
:dense="dense" <q-input
outlined :dense="dense"
:readonly="readonly" outlined
hide-bottom-space :readonly="readonly"
class="col-5" hide-bottom-space
:label=" class="col-5"
typeBranch === 'headOffice' :label="
? $t('formDialogInputEmailHq') typeBranch === 'headOffice'
: $t('formDialogInputEmailSubBranch') ? $t('formDialogInputEmailHq')
" : $t('formDialogInputEmailSubBranch')
v-model="email" "
for="input-email" v-model="email"
/> for="input-email"
/>
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-7" class="col-7"
:label=" :label="
typeBranch === 'headOffice' typeBranch === 'headOffice'
? $t('formDialogInputTelephoneHq') ? $t('formDialogInputTelephoneHq')
: $t('formDialogInputTelephoneSubBranch') : $t('formDialogInputTelephoneSubBranch')
" "
v-model="telephoneNo" v-model="telephoneNo"
for="input-telephone-no" for="input-telephone-no"
/> />
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-5" class="col-5"
:label="$t('formDialogInputContactName')" :label="$t('formDialogInputContactName')"
v-model="contactName" v-model="contactName"
for="input-contact-name" for="input-contact-name"
/> />
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-7" class="col-7"
:label="$t('formDialogInputTelephoneContact')" :label="$t('formDialogInputTelephoneContact')"
v-model="contact" v-model="contact"
for="input-contact" for="input-contact"
/> />
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-5" class="col-5"
label="Line ID" label="Line ID"
v-model="lineId" v-model="lineId"
for="input-line-id" for="input-line-id"
/>
</div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/> />
</div> </div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</template> </template>

View file

@ -63,265 +63,267 @@ function deleteFile(name: string) {
} }
</script> </script>
<template> <template>
<div v-if="userType" class="col-3 app-text-muted"> <div class="row col-12">
{{ $t('formDialogTitleByType') }} <div v-if="userType" class="col-3 app-text-muted">
</div> {{ $t('formDialogTitleByType') }}
<div class="col-9 row q-col-gutter-md">
<div
v-if="userType === 'USER' || userType === 'MESSENGER'"
class="row col-12 q-col-gutter-md"
style="margin-left: 0px; padding-left: 0px"
>
<q-input
for="input-regis-no"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputRegisNo')"
class="col-12"
v-model="registrationNo"
/>
<VueDatePicker
utc
autoApply
:dark="$q.dark.isActive"
v-model="startDate"
:teleport="true"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #trigger>
<q-input
for="input-start-date"
:label="$t('formDialogInputStartDate')"
:dense="dense"
outlined
:readonly="readonly"
:model-value="startDate ? dateFormat(startDate) : ''"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="startDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="startDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
v-model="retireDate"
:dark="$q.dark.isActive"
:teleport="true"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #trigger>
<q-input
for="input-retire-date"
:label="$t('formDialogInputRetireDate')"
:dense="dense"
outlined
:readonly="readonly"
:model-value="retireDate ? dateFormat(retireDate) : ''"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="retireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="retireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<q-select
id="input-responsible-area"
v-if="userType === 'MESSENGER'"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
:label="$t('formDialogInputResponsibleArea')"
class="col-12"
option-label="label"
option-value="label"
v-model="responsibleArea"
:options="userStore.userOption.responsibleAreaOpts"
/>
</div> </div>
<div <div class="col-9 row q-col-gutter-md">
v-if="userType === 'DELEGATE'" <div
class="row col-12" v-if="userType === 'USER' || userType === 'MESSENGER'"
style="row-gap: 16px" class="row col-12 q-col-gutter-md"
> style="margin-left: 0px; padding-left: 0px"
<q-input >
for="input-discount-condition" <q-input
:dense="dense" for="input-regis-no"
outlined :dense="dense"
:readonly="readonly" outlined
:label="$t('formDialogInputDiscount')" :readonly="readonly"
class="col-12" :label="$t('formDialogInputRegisNo')"
v-model="discountCondition" class="col-12"
type="textarea" v-model="registrationNo"
/> />
</div> <VueDatePicker
<div utc
v-if="userType === 'AGENCY'" autoApply
class="row col-12 q-col-gutter-md" :dark="$q.dark.isActive"
style="margin-left: 0px; padding-left: 0px" v-model="startDate"
> :teleport="true"
<q-select :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
id="input-source-nationality" :enableTimePicker="false"
:dense="dense" :disabled="readonly"
outlined class="col-6"
:readonly="readonly" >
:hide-dropdown-icon="readonly" <template #year="{ value }">
emit-value {{ $i18n.locale === 'th-th' ? value + 543 : value }}
map-options </template>
options-dense <template #year-overlay-value="{ value }">
:label="$t('formDialogInputSourceNationality')" {{ $i18n.locale === 'th-th' ? value + 543 : value }}
class="col-3" </template>
option-label="label" <template #trigger>
option-value="label" <q-input
v-model="sourceNationality" for="input-start-date"
:options="userStore.userOption.nationalityOpts" :label="$t('formDialogInputStartDate')"
/> :dense="dense"
<q-select outlined
id="input-import-nationality" :readonly="readonly"
:dense="dense" :model-value="startDate ? dateFormat(startDate) : ''"
outlined >
:readonly="readonly" <template v-slot:prepend>
:hide-dropdown-icon="readonly" <q-icon
emit-value size="xs"
map-options name="mdi-calendar-blank-outline"
options-dense class="cursor-pointer"
:label="$t('formDialogInputImportNationality')" color="primary"
class="col-3"
option-label="label"
option-value="label"
v-model="importNationality"
:options="userStore.userOption.nationalityOpts"
/>
<q-select
id="select-trainig-place"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
:label="$t('formDialogInputTrainingPlace')"
class="col-6"
option-label="label"
option-value="label"
v-model="trainingPlace"
:options="userStore.userOption.trainingPlaceOpts"
/>
<q-input
for="input-checkpoint"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputCheckpoint')"
class="col-6"
v-model="checkpoint"
/>
<q-input
for="input-checkpoint-en"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputCheckpoint') + ' ENG'"
class="col-6"
v-model="checkpointEN"
/>
<q-file
for="input-attchment"
:dense="dense"
outlined
:readonly="readonly"
multiple
append
:label="$t('formDialogAttachment')"
class="col-12"
v-model="agencyFile"
/>
<div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
<q-list bordered separator class="rounded" style="padding: 0">
<q-item
id="attachment-file"
v-for="item in agencyFileList"
clickable
:key="item.url"
class="items-center row"
@click="() => openNewTab(item.url)"
>
<q-item-section>
<div class="row items-center justify-between">
<div class="col">
{{ item.name }}
</div>
<q-btn
id="delete-file"
v-if="!readonly && userId"
rounded
flat
dense
unelevated
size="md"
icon="mdi-trash-can-outline"
class="app-text-negative"
@click.stop="deleteFile(item.name)"
/> />
</div> </template>
</q-item-section> <template v-slot:append>
</q-item> <q-icon
</q-list> v-if="startDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="startDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
v-model="retireDate"
:dark="$q.dark.isActive"
:teleport="true"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #trigger>
<q-input
for="input-retire-date"
:label="$t('formDialogInputRetireDate')"
:dense="dense"
outlined
:readonly="readonly"
:model-value="retireDate ? dateFormat(retireDate) : ''"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="retireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="retireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<q-select
id="input-responsible-area"
v-if="userType === 'MESSENGER'"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
:label="$t('formDialogInputResponsibleArea')"
class="col-12"
option-label="label"
option-value="label"
v-model="responsibleArea"
:options="userStore.userOption.responsibleAreaOpts"
/>
</div>
<div
v-if="userType === 'DELEGATE'"
class="row col-12"
style="row-gap: 16px"
>
<q-input
for="input-discount-condition"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputDiscount')"
class="col-12"
v-model="discountCondition"
type="textarea"
/>
</div>
<div
v-if="userType === 'AGENCY'"
class="row col-12 q-col-gutter-md"
style="margin-left: 0px; padding-left: 0px"
>
<q-select
id="input-source-nationality"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
:label="$t('formDialogInputSourceNationality')"
class="col-3"
option-label="label"
option-value="label"
v-model="sourceNationality"
:options="userStore.userOption.nationalityOpts"
/>
<q-select
id="input-import-nationality"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
:label="$t('formDialogInputImportNationality')"
class="col-3"
option-label="label"
option-value="label"
v-model="importNationality"
:options="userStore.userOption.nationalityOpts"
/>
<q-select
id="select-trainig-place"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
:label="$t('formDialogInputTrainingPlace')"
class="col-6"
option-label="label"
option-value="label"
v-model="trainingPlace"
:options="userStore.userOption.trainingPlaceOpts"
/>
<q-input
for="input-checkpoint"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputCheckpoint')"
class="col-6"
v-model="checkpoint"
/>
<q-input
for="input-checkpoint-en"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputCheckpoint') + ' ENG'"
class="col-6"
v-model="checkpointEN"
/>
<q-file
for="input-attchment"
:dense="dense"
outlined
:readonly="readonly"
multiple
append
:label="$t('formDialogAttachment')"
class="col-12"
v-model="agencyFile"
/>
<div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
<q-list bordered separator class="rounded" style="padding: 0">
<q-item
id="attachment-file"
v-for="item in agencyFileList"
clickable
:key="item.url"
class="items-center row"
@click="() => openNewTab(item.url)"
>
<q-item-section>
<div class="row items-center justify-between">
<div class="col">
{{ item.name }}
</div>
<q-btn
id="delete-file"
v-if="!readonly && userId"
rounded
flat
dense
unelevated
size="md"
icon="mdi-trash-can-outline"
class="app-text-negative"
@click.stop="deleteFile(item.name)"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -63,7 +63,7 @@ function reset() {
@submit.prevent @submit.prevent
@validation-success="submit" @validation-success="submit"
> >
<AppBox <div
class="column justify-between full-height" class="column justify-between full-height"
style="padding: 0; border-radius: var(--radius-2)" style="padding: 0; border-radius: var(--radius-2)"
> >
@ -194,7 +194,7 @@ function reset() {
@click="close" @click="close"
/> />
</div> </div>
</AppBox> </div>
</q-form> </q-form>
</q-drawer> </q-drawer>
</template> </template>

View file

@ -274,8 +274,6 @@ async function triggerEdit(
openDialog(); openDialog();
} }
if (openFormType === 'drawer') { if (openFormType === 'drawer') {
console.log(code);
formType.value = 'view'; formType.value = 'view';
openDrawer(); openDrawer();
} }

View file

@ -128,7 +128,17 @@ const formDataEmployeeSameAddr = ref(true);
const formDataEmployeeTab = ref('personalInfo'); const formDataEmployeeTab = ref('personalInfo');
const infoDrawerEmployee = ref(false); const infoDrawerEmployee = ref(false);
const infoDrawerEmployeeEdit = ref(false); const infoDrawerEmployeeEdit = ref(false);
const infoEmployeePersonCard = ref(); const infoEmployeePersonCard = ref<
{
id: string;
img: string;
name: string;
male: boolean;
female: boolean;
badge: string;
disabled: boolean;
}[]
>();
const statsEmployee = ref(0); const statsEmployee = ref(0);
const statsEmployeeGender = ref<{ male: number; female: number }>(); const statsEmployeeGender = ref<{ male: number; female: number }>();
const formDataEmployeeOwner = ref<{ const formDataEmployeeOwner = ref<{
@ -272,8 +282,8 @@ const inputFile = (() => {
if (infoDrawerEdit.value && currentCustomer.value) if (infoDrawerEdit.value && currentCustomer.value)
currentCustomer.value.imageUrl = profileUrl.value as string; currentCustomer.value.imageUrl = profileUrl.value as string;
if (infoDrawerEmployeeEdit.value) if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
infoEmployeePersonCard.value[0].img = profileUrl.value; infoEmployeePersonCard.value[0].img = profileUrl.value as string;
}); });
element.addEventListener('change', () => { element.addEventListener('change', () => {
@ -1855,7 +1865,6 @@ watch([inputSearch, currentStatus], async () => {
" "
dense dense
outlined outlined
bordered
separator separator
/> />
</template> </template>
@ -1998,7 +2007,6 @@ watch([inputSearch, currentStatus], async () => {
v-if="formDataEmployeeTab === 'personalInfo'" v-if="formDataEmployeeTab === 'personalInfo'"
dense dense
outlined outlined
employee
separator separator
v-model:passport-type="formDataEmployee.passportType" v-model:passport-type="formDataEmployee.passportType"
v-model:passport-number="formDataEmployee.passportNumber" v-model:passport-number="formDataEmployee.passportNumber"
@ -2020,7 +2028,6 @@ watch([inputSearch, currentStatus], async () => {
v-if="formDataEmployeeTab === 'personalInfo'" v-if="formDataEmployeeTab === 'personalInfo'"
dense dense
outlined outlined
employee
v-model:visa-type="formDataEmployee.visaType" v-model:visa-type="formDataEmployee.visaType"
v-model:visa-number="formDataEmployee.visaNumber" v-model:visa-number="formDataEmployee.visaNumber"
v-model:visa-issue-date="formDataEmployee.visaIssueDate" v-model:visa-issue-date="formDataEmployee.visaIssueDate"
@ -2131,7 +2138,6 @@ watch([inputSearch, currentStatus], async () => {
" "
dense dense
outlined outlined
bordered
separator separator
/> />
</template> </template>
@ -2263,7 +2269,6 @@ watch([inputSearch, currentStatus], async () => {
" "
dense dense
outlined outlined
bordered
separator separator
/> />
</template> </template>
@ -2465,7 +2470,6 @@ watch([inputSearch, currentStatus], async () => {
" "
dense dense
outlined outlined
bordered
separator separator
:readonly="!infoDrawerEdit" :readonly="!infoDrawerEdit"
/> />
@ -2677,7 +2681,6 @@ watch([inputSearch, currentStatus], async () => {
" "
dense dense
outlined outlined
bordered
separator separator
:readonly="!infoDrawerEdit" :readonly="!infoDrawerEdit"
/> />
@ -2771,7 +2774,7 @@ watch([inputSearch, currentStatus], async () => {
no-action no-action
no-detail no-detail
no-bg no-bg
:list="infoEmployeePersonCard" :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
:gridColumns="1" :gridColumns="1"
@edit-profile=" @edit-profile="
() => { () => {
@ -2860,7 +2863,6 @@ watch([inputSearch, currentStatus], async () => {
v-if="formDataEmployeeTab === 'personalInfo'" v-if="formDataEmployeeTab === 'personalInfo'"
dense dense
outlined outlined
employee
separator separator
:readonly="!infoDrawerEmployeeEdit" :readonly="!infoDrawerEmployeeEdit"
v-model:passport-type="formDataEmployee.passportType" v-model:passport-type="formDataEmployee.passportType"
@ -2883,7 +2885,6 @@ watch([inputSearch, currentStatus], async () => {
v-if="formDataEmployeeTab === 'personalInfo'" v-if="formDataEmployeeTab === 'personalInfo'"
dense dense
outlined outlined
employee
:readonly="!infoDrawerEmployeeEdit" :readonly="!infoDrawerEmployeeEdit"
v-model:visa-type="formDataEmployee.visaType" v-model:visa-type="formDataEmployee.visaType"
v-model:visa-number="formDataEmployee.visaNumber" v-model:visa-number="formDataEmployee.visaNumber"

View file

@ -2018,21 +2018,17 @@ watch(inputSearchProductAndService, async () => {
/> />
</template> </template>
<div v-if="currentServiceTab === 'serviceInformation'" class="col-10"> <div
v-if="currentServiceTab === 'serviceInformation'"
class="col-md-10 col-sm-12"
>
<div class="surface-1 rounded bordered q-pa-lg full-width row"> <div class="surface-1 rounded bordered q-pa-lg full-width row">
<BasicInformation <BasicInformation
dense dense
service service
@service-properties="
() => {
tempValueProperties = formDataProductService.attributes;
openPropertiesDialog('service');
}
"
v-model:service-code="formDataProductService.code" v-model:service-code="formDataProductService.code"
v-model:service-description="formDataProductService.detail" v-model:service-description="formDataProductService.detail"
v-model:service-name-th="formDataProductService.name" v-model:service-name-th="formDataProductService.name"
@input-file="inputFile.click()"
/> />
</div> </div>
<div class="surface-1 rounded bordered q-mt-md q-pa-lg row"> <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
@ -2050,7 +2046,7 @@ watch(inputSearchProductAndService, async () => {
<div <div
v-if="currentServiceTab === 'workInformation'" v-if="currentServiceTab === 'workInformation'"
class="surface-1 rounded bordered col-10 q-pa-lg" class="surface-1 rounded bordered col-md-10 col-sm-12 q-pa-lg"
> >
<FormServiceWork <FormServiceWork
v-model:work-items="workItems" v-model:work-items="workItems"