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

refactor: edit layout work

Browse source
This commit is contained in:
Thanaphon Frappet 2024-11-12 10:25:17 +07:00
parent 03ba79a401
commit 8004f4fa2f
1 changed files with 99 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

185
src/components/03_customer-management/FormEmployeeWorkHistory.vue
View file

@ -50,7 +50,6 @@ function addData() {
const canAdd = true;
if (canAdd) {
employeeWork.value?.push({
workEndDate: null,
workPermitExpireDate: null,
workPermitIssueDate: null,
workPermitNo: '',
@ -115,7 +114,7 @@ const workplaceFilter = selectFilterOptionRefMod(
name="mdi-briefcase-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`customerEmployee.formWorkHistory.title`) }}
{{ $t(`customerEmployee.form.group.workHistory`) }}
<AddButton
v-if="currentIndex === -1 && !hideAction"
id="btn-add-bank"
@ -177,36 +176,18 @@ const workplaceFilter = selectFilterOptionRefMod(
/>
</div>
</span>
<q-select
<q-input
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-6"
input-debounce="0"
option-label="label"
option-value="value"
v-model="work.jobType"
:dense="dense"
:readonly="readonly || work.statusSave"
:options="jobTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-job-type`"
:label="$t('customerEmployee.formWorkHistory.jobType')"
@filter="jobTypeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
:label="$t('customerEmployee.formWorkHistory.employerName')"
v-model="work.ownerName"
/>
<q-select
outlined
clearable
@ -237,63 +218,7 @@ const workplaceFilter = selectFilterOptionRefMod(
</q-item>
</template>
</q-select>
<q-input
:for="`${prefixId}-input-work-end-date`"
:label="$t('general.remark')"
:dense="dense"
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-12"
v-model="work.remark"
type="textarea"
/>
<DatePicker
:label="$t('customerEmployee.formWorkHistory.workUntil')"
v-model="work.workEndDate"
class="col-3"
:id="`${prefixId}-input-work-until-date`"
:readonly="readonly || work.statusSave"
clearable
/>
<q-input
:for="`${prefixId}-input-work-permit-no`"
:dense="dense"
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-6"
:label="$t('customerEmployee.formWorkHistory.permitNo')"
v-model="work.workPermitNo"
/>
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
v-model="work.workPermitIssueDate"
class="col-3"
:id="`${prefixId}-date-picker-work-permit-issue-date`"
:readonly="readonly || work.statusSave"
clearable
/>
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
v-model="work.workPermitExpireDate"
class="col-3"
:id="`${prefixId}-date-picker-work-permit-expire-date`"
:readonly="readonly || work.statusSave"
clearable
/>
<q-input
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-5"
:label="$t('customerEmployee.formWorkHistory.employerName')"
v-model="work.ownerName"
/>
<q-select
outlined
clearable
@ -303,7 +228,38 @@ const workplaceFilter = selectFilterOptionRefMod(
map-options
hide-selected
hide-bottom-space
class="col-4"
class="col-6"
input-debounce="0"
option-label="label"
option-value="value"
v-model="work.jobType"
:dense="dense"
:readonly="readonly || work.statusSave"
:options="jobTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-job-type`"
:label="$t('customerEmployee.formWorkHistory.jobType')"
@filter="jobTypeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-6"
input-debounce="0"
option-value="value"
option-label="label"
@ -324,6 +280,63 @@ const workplaceFilter = selectFilterOptionRefMod(
</q-item>
</template>
</q-select>
<q-input
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
:label="$t('customerEmployee.formWorkHistory.identityNo')"
v-model="work.identityNo"
mask="#############"
:rules="[
(val) =>
!val ||
(val.length === 13 && /^[0-9]+$/.test(val)) ||
$t('form.error.invalidCustomeMessage', {
msg: $t('form.error.requireLength', { msg: 13 }),
}),
]"
/>
<q-input
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
:label="$t('customerEmployee.formWorkHistory.permitNo')"
v-model="work.workPermitNo"
/>
<q-input
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
:label="$t('customerEmployee.formWorkHistory.permitIssuedAt')"
v-model="work.workPermitIssueAt"
/>
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
v-model="work.workPermitIssueDate"
class="col-3"
:id="`${prefixId}-date-picker-work-permit-issue-date`"
:readonly="readonly || work.statusSave"
clearable
/>
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
v-model="work.workPermitExpireDate"
class="col-3"
:id="`${prefixId}-date-picker-work-permit-expire-date`"
:readonly="readonly || work.statusSave"
clearable
/>
</div>
</div>
</template>