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

refactor: add remark and agency status fields to form data
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 7s
Details

Browse source
This commit is contained in:
puriphatt 2025-04-08 11:20:27 +07:00
parent 0de6921636
commit f22a7e09b3
2 changed files with 101 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

248
src/components/02_personnel-management/FormByType.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts">
import useUserStore from 'stores/user';
import useOptionStore from 'stores/options';
import { UserAttachmentDelete } from 'stores/user/types';
import { dialog, selectFilterOptionRefMod } from 'stores/utils';
import { onMounted, ref, watch } from 'vue';
import { UserAttachmentDelete, AgencyStatus } from 'stores/user/types';
import { dialog } from 'stores/utils';
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Icon } from '@iconify/vue';
import { QSelect } from 'quasar';
import DatePicker from '../shared/DatePicker.vue';
import SelectInput from 'src/components/shared/SelectInput.vue';
import SelectOffice from 'components/shared/select-muliple/SelectOffice.vue';
@ -33,13 +33,15 @@ const importNationality = defineModel<string | null | undefined>(
'importNationality',
);
const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
const checkpoint = defineModel<string | null | undefined>('checkPoint');
const checkpointEN = defineModel<string | null | undefined>('checkPointEn');
const checkpoint = defineModel<string | null | undefined>('checkpoint');
const agencyFile = defineModel<File[]>('agencyFile');
const agencyFileList =
defineModel<{ name: string; url: string }[]>('agencyFileList');
const remark = defineModel<string | null | undefined>('remark');
const agencyStatus = defineModel<string | null | undefined>('agencyStatus');
const attachmentRef = ref();
const checkpointENOption = ref([]);
defineProps<{
dense?: boolean;
@ -76,59 +78,11 @@ function deleteFile(name: string) {
});
}
const nationalityOptions = ref<Record<string, unknown>[]>([]);
let nationalityFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const trainingPlaceOptions = ref<Record<string, unknown>[]>([]);
let trainingPlaceFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const responsibleAreaOptions = ref<Record<string, unknown>[]>([]);
let responsibleAreaFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
onMounted(() => {
if (optionStore.globalOption?.nationality) {
nationalityFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
nationalityOptions,
'label',
);
trainingPlaceFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.training),
trainingPlaceOptions,
'label',
);
responsibleAreaFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.area),
responsibleAreaOptions,
'label',
);
}
onMounted(async () => {
const resultOption = await fetch('/option/option.json');
const rawOption = await resultOption.json();
checkpointENOption.value = rawOption.eng.border;
});
watch(
() => optionStore.globalOption,
() => {
nationalityFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
nationalityOptions,
'label',
);
trainingPlaceFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.training),
trainingPlaceOptions,
'label',
);
},
);
</script>
<template>
<div class="row col-12">
@ -218,136 +172,108 @@ watch(
class="row col-12 q-col-gutter-sm"
style="margin-left: 0px; padding-left: 0px"
>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
class="col-md-3 col-6"
<SelectInput
:model-value="readonly ? sourceNationality || '-' : sourceNationality"
id="input-source-nationality"
for="input-source-nationality"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:option="optionStore.globalOption.nationality"
class="col-md-3 col-6"
:readonly
clearable
:label="$t('personnel.form.sourceNationality')"
:options="nationalityOptions"
@filter="nationalityFilter"
:model-value="readonly ? sourceNationality || '-' : sourceNationality"
@update:model-value="
(v) => (typeof v === 'string' ? (sourceNationality = v) : '')
"
@clear="sourceNationality = ''"
>
<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
input-debounce="0"
option-value="value"
option-label="label"
class="col-md-3 col-6"
/>
<SelectInput
:model-value="readonly ? importNationality || '-' : importNationality"
id="input-import-nationality"
for="input-import-nationality"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:option="optionStore.globalOption.nationality"
class="col-md-3 col-6"
:readonly
clearable
:label="$t('personnel.form.importNationality')"
:options="nationalityOptions"
@filter="nationalityFilter"
:model-value="readonly ? importNationality || '-' : importNationality"
@update:model-value="
(v) => (typeof v === 'string' ? (importNationality = v) : '')
"
@clear="importNationality = ''"
>
<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
input-debounce="0"
option-label="label"
option-value="label"
class="col-md-6 col-12"
/>
<SelectInput
:model-value="readonly ? trainingPlace || '-' : trainingPlace"
id="select-trainig-place"
for="select-trainig-place"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:option="optionStore.globalOption.training"
class="col-md-6 col-12"
:readonly
:label="$t('personnel.form.trainingPlace')"
:options="trainingPlaceOptions"
@filter="trainingPlaceFilter"
:model-value="readonly ? trainingPlace || '-' : trainingPlace"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (trainingPlace = v) : '')
"
@clear="trainingPlace = ''"
>
<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-input
for="input-checkpoint"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('personnel.form.checkpoint')"
class="col-6"
/>
<SelectInput
:model-value="readonly ? checkpoint || '-' : checkpoint"
id="select-checkpoint"
for="select-checkpoint"
:option="optionStore.globalOption.border"
class="col-6"
:readonly
:label="$t('personnel.form.checkpoint')"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (checkpoint = v) : '')
"
@clear="checkpoint = ''"
/>
<SelectInput
:model-value="readonly ? checkpoint || '-' : checkpoint"
id="select-checkpoint-en"
for="select-checkpoint-en"
:option="checkpointENOption"
class="col-6"
:readonly
:label="$t('personnel.form.checkpointEN')"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (checkpoint = v) : '')
"
/>
<SelectInput
:model-value="readonly ? agencyStatus || '-' : agencyStatus"
id="select-checkpoint-en"
for="select-checkpoint-en"
:option="[
{ label: $t('personnel.form.normal'), value: AgencyStatus.Normal },
{
label: $t('personnel.form.canceled'),
value: AgencyStatus.Canceled,
},
{
label: $t('personnel.form.blacklist'),
value: AgencyStatus.Blacklist,
},
]"
class="col-md-6 col-12"
:readonly
:label="$t('personnel.form.agencyStatus')"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (agencyStatus = v) : '')
"
/>
<q-input
for="input-checkpoint-en"
for="input-discount-condition"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('personnel.form.checkpointEN')"
class="col-6"
:model-value="readonly ? checkpointEN || '-' : checkpointEN"
:readonly
:label="$t('general.remark')"
class="col-12"
type="textarea"
:model-value="readonly ? remark || '-' : remark"
@update:model-value="
(v) => (typeof v === 'string' ? (checkpointEN = v) : '')
(v) => (typeof v === 'string' ? (remark = v) : '')
"
@clear="checkpointEN = ''"
@clear="remark = ''"
/>
<q-file
ref="attachmentRef"
@ -358,7 +284,7 @@ watch(
multiple
append
:label="$t('personnel.form.attachment')"
class="col-12"
class="col"
v-model="agencyFile"
>
<template v-slot:prepend>

18
src/pages/02_personnel-management/MainPage.vue
View file

@ -151,6 +151,8 @@ const defaultFormData = {
citizenExpire: null,
citizenIssue: null,
citizenId: '',
remark: '',
agencyStatus: null,
};
const formData = ref<UserCreate>({
@ -199,6 +201,8 @@ const formData = ref<UserCreate>({
citizenExpire: null,
citizenIssue: null,
citizenId: '',
remark: '',
agencyStatus: null,
});
const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@ -419,6 +423,7 @@ async function onSubmit(excludeDialog?: boolean) {
: '';
const formDataEdit = {
...formData.value,
checkpointEN: formData.value.checkpoint,
status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
} as const;
@ -450,6 +455,7 @@ async function onSubmit(excludeDialog?: boolean) {
: hqId.value
? hqId.value
: '';
formData.value.checkpointEN = formData.value.checkpoint;
const result = await userStore.create(
formData.value,
onCreateImageList.value,
@ -603,6 +609,8 @@ async function assignFormData(idEdit: string) {
(foundUser.citizenIssue && new Date(foundUser.citizenIssue)) || null,
citizenExpire:
(foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null,
remark: foundUser.remark,
agencyStatus: foundUser.agencyStatus,
};
formData.value.status === 'ACTIVE' || 'CREATED'
@ -1781,10 +1789,11 @@ watch(
v-model:import-nationality="formData.importNationality"
v-model:training-place="formData.trainingPlace"
v-model:checkpoint="formData.checkpoint"
v-model:checkpoint-en="formData.checkpointEN"
v-model:agency-file="agencyFile"
v-model:agency-file-list="agencyFileList"
v-model:user-id="currentUser.id"
v-model:remark="formData.remark"
v-model:agency-status="formData.agencyStatus"
/>
</div>
</div>
@ -1854,7 +1863,6 @@ watch(
<div
class="col"
id="personnel-form"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
@ -1898,7 +1906,7 @@ watch(
? [
{
name: $t('personnel.form.workInformation'),
anchor: 'dialog-info-work',
anchor: 'dialog-form-work',
},
]
: [],
@ -1914,6 +1922,7 @@ watch(
</div>
</div>
<div
id="personnel-form"
class="col-md-10 col-12 full-height scroll"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
@ -1992,7 +2001,8 @@ watch(
v-model:import-nationality="formData.importNationality"
v-model:training-place="formData.trainingPlace"
v-model:checkpoint="formData.checkpoint"
v-model:checkpoint-en="formData.checkpointEN"
v-model:agency-status="formData.agencyStatus"
v-model:remark="formData.remark"
v-model:agency-file="agencyFile"
/>
</div>