fix: clean for remove warning console
This commit is contained in:
puriphatt
parent
d1e6239a1f
commit
20e12b407a
6 changed files with 346 additions and 347 deletions
|
|
@ -16,74 +16,76 @@ defineProps<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputEmailHq')
|
||||
: $t('formDialogInputEmailSubBranch')
|
||||
"
|
||||
v-model="email"
|
||||
for="input-email"
|
||||
/>
|
||||
<div class="row col-12">
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputEmailHq')
|
||||
: $t('formDialogInputEmailSubBranch')
|
||||
"
|
||||
v-model="email"
|
||||
for="input-email"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputTelephoneHq')
|
||||
: $t('formDialogInputTelephoneSubBranch')
|
||||
"
|
||||
v-model="telephoneNo"
|
||||
for="input-telephone-no"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputTelephoneHq')
|
||||
: $t('formDialogInputTelephoneSubBranch')
|
||||
"
|
||||
v-model="telephoneNo"
|
||||
for="input-telephone-no"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="$t('formDialogInputContactName')"
|
||||
v-model="contactName"
|
||||
for="input-contact-name"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="$t('formDialogInputContactName')"
|
||||
v-model="contactName"
|
||||
for="input-contact-name"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
:label="$t('formDialogInputTelephoneContact')"
|
||||
v-model="contact"
|
||||
for="input-contact"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
:label="$t('formDialogInputTelephoneContact')"
|
||||
v-model="contact"
|
||||
for="input-contact"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
label="Line ID"
|
||||
v-model="lineId"
|
||||
for="input-line-id"
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
label="Line ID"
|
||||
v-model="lineId"
|
||||
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>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -63,265 +63,267 @@ function deleteFile(name: string) {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<div v-if="userType" class="col-3 app-text-muted">
|
||||
• {{ $t('formDialogTitleByType') }}
|
||||
</div>
|
||||
<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 class="row col-12">
|
||||
<div v-if="userType" class="col-3 app-text-muted">
|
||||
• {{ $t('formDialogTitleByType') }}
|
||||
</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 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"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ function reset() {
|
|||
@submit.prevent
|
||||
@validation-success="submit"
|
||||
>
|
||||
<AppBox
|
||||
<div
|
||||
class="column justify-between full-height"
|
||||
style="padding: 0; border-radius: var(--radius-2)"
|
||||
>
|
||||
|
|
@ -194,7 +194,7 @@ function reset() {
|
|||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-drawer>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue