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

feat: Personnel drawer info edit, delete, undo

Browse source
This commit is contained in:
puriphatt 2024-04-19 09:06:38 +07:00
parent d1d58d55c1
commit b6e8078c3c
8 changed files with 220 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/02_personnel-management/FormAddress.vue
View file

@ -83,8 +83,9 @@ watch(districtId, fetchSubDistrict);
<div class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
id="addr-input"
:label="$t('address')"
@ -99,8 +100,9 @@ watch(districtId, fetchSubDistrict);
<q-select
:dense="dense"
:readonly="readonly"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -121,8 +123,9 @@ watch(districtId, fetchSubDistrict);
<q-select
:dense="dense"
:readonly="readonly"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -143,8 +146,9 @@ watch(districtId, fetchSubDistrict);
<q-select
:dense="dense"
:readonly="readonly"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -164,7 +168,8 @@ watch(districtId, fetchSubDistrict);
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
readonly
id="zip"
:label="$t('zipCode')"
@ -179,7 +184,8 @@ watch(districtId, fetchSubDistrict);
<q-input
:dense="dense"
:readonly="readonly"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
hide-bottom-space
id="addr-en-input"
:label="$t('address')"
@ -194,7 +200,8 @@ watch(districtId, fetchSubDistrict);
<q-select
:dense="dense"
:readonly="readonly"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -209,7 +216,8 @@ watch(districtId, fetchSubDistrict);
<q-select
:dense="dense"
:readonly="readonly"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -224,7 +232,8 @@ watch(districtId, fetchSubDistrict);
<q-select
:dense="dense"
:readonly="readonly"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -239,7 +248,8 @@ watch(districtId, fetchSubDistrict);
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
readonly
zip="zip-en"
:label="$t('zipCode')"

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

@ -41,8 +41,9 @@ defineProps<{
>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
class="col-12"
v-model="registrationNo"
@ -63,8 +64,9 @@ defineProps<{
<q-input
label="วันที่เริ่มงาน"
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="startDate ? dateFormat(startDate) : ''"
>
<template v-slot:prepend>
@ -104,8 +106,9 @@ defineProps<{
<q-input
label="วันที่พ้นสภาพพนักงาน"
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="retireDate ? dateFormat(retireDate) : ''"
>
<template v-slot:prepend>
@ -131,9 +134,10 @@ defineProps<{
<q-select
v-if="userType === 'MESSENGER'"
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:borderless="readonly"
emit-value
map-options
options-dense
@ -152,8 +156,9 @@ defineProps<{
>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
class="col-12"
v-model="discountCondition"
@ -167,9 +172,10 @@ defineProps<{
>
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:borderless="readonly"
emit-value
map-options
options-dense
@ -182,8 +188,9 @@ defineProps<{
/>
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -197,8 +204,9 @@ defineProps<{
/>
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -212,24 +220,27 @@ defineProps<{
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
label="ด่าน"
class="col-6"
v-model="checkPoint"
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
label="ด่าน ENG"
class="col-6"
v-model="checkPointEN"
/>
<q-file
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
label="แบบเอกสารประจำตัว"
class="col-12"
v-model="idenDoc"

20
src/components/02_personnel-management/FormInformation.vue
View file

@ -1,10 +1,8 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import useUserStore from 'src/stores/user';
import { watch } from 'vue';
const userStore = useUserStore();
const { userOption } = storeToRefs(userStore);
const hqId = defineModel<string | null | undefined>('hqId');
const brId = defineModel<string | null | undefined>('brId');
@ -36,8 +34,9 @@ async function selectHq(id: string) {
<div class="col-9 row q-col-gutter-md">
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -54,8 +53,9 @@ async function selectHq(id: string) {
/>
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -71,8 +71,9 @@ async function selectHq(id: string) {
/>
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -88,8 +89,9 @@ async function selectHq(id: string) {
/>
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
@ -105,7 +107,8 @@ async function selectHq(id: string) {
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
:readonly="usernameReadonly"
emit-value
map-options
@ -118,7 +121,8 @@ async function selectHq(id: string) {
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
readonly
hide-bottom-space
class="col-3"

27
src/components/02_personnel-management/FormPerson.vue
View file

@ -25,8 +25,9 @@ defineProps<{
<div class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
label="ชื่อ ภาษาไทย"
@ -35,8 +36,9 @@ defineProps<{
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
label="นามสกุล ภาษาไทย"
@ -45,8 +47,9 @@ defineProps<{
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
label="ชื่อ ภาษาอังกฤษ"
@ -55,8 +58,9 @@ defineProps<{
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
label="นามสกุล ภาษาอังกฤษ"
@ -65,8 +69,9 @@ defineProps<{
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
class="col-6"
label="เบอร์โทร"
v-model="telephoneNo"
@ -74,17 +79,19 @@ defineProps<{
/>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
label="อีเมล"
class="col-6"
v-model="email"
/>
<q-select
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:borderless="readonly"
emit-value
map-options
label="เพศ"
@ -110,8 +117,9 @@ defineProps<{
<q-input
label="วันเดือนปีเกิด"
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="birthDate ? dateFormat(birthDate) : ''"
>
<template v-slot:prepend>
@ -136,7 +144,8 @@ defineProps<{
</VueDatePicker>
<q-input
:dense="dense"
:outlined="outlined"
:outlined="readonly ? false : outlined"
:borderless="readonly"
readonly
label="อายุ"
class="col-3"

2
src/components/02_personnel-management/infoForm.vue
View file

@ -3,6 +3,7 @@ import AppBox from '../app/AppBox.vue';
import FormAddress from './FormAddress.vue';
defineProps<{
readonly?: boolean;
addressTitle?: string;
addressTitleEN?: string;
}>();
@ -33,6 +34,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
dense
outlined
separator
:readonly="readonly"
v-model:address="address"
v-model:addressEN="addressEN"
v-model:provinceId="provinceId"

193
src/components/DrawerInfo.vue
View file

@ -1,102 +1,153 @@
<script setup lang="ts">
import { ref } from 'vue';
defineProps<{
title: string;
isEdit?: boolean;
editData?: (...args: unknown[]) => void;
deleteData?: (...args: unknown[]) => void;
submit?: (...args: unknown[]) => void;
close?: (...args: unknown[]) => void;
undo?: (...args: unknown[]) => void;
}>();
const drawerOpen = defineModel<boolean>('drawerOpen', {
default: false,
});
const myForm = ref();
function reset() {
if (myForm.value) {
myForm.value.resetValidation();
}
}
</script>
<template>
<q-drawer
@before-hide="reset"
@hide="close"
:width="1100"
:width="1300"
:breakpoint="500"
v-model="drawerOpen"
behavior="mobile"
side="right"
show-if-above
>
<AppBox
class="column justify-between full-height"
style="padding: 0; border-radius: var(--radius-2)"
<q-form
ref="myForm"
class="full-height"
greedy
@submit.prevent
@validation-success="submit"
>
<div class="form-header col q-px-lg row items-center">
<q-btn
round
flat
id="closeDialog"
icon="mdi-pencil-outline"
padding="xs"
class="q-mr-md"
:class="{ dark: $q.dark.isActive }"
style="color: var(--brand-1)"
@click="editData"
/>
<q-btn
round
flat
id="closeDialog"
icon="mdi-trash-can-outline"
padding="xs"
:class="{ dark: $q.dark.isActive }"
style="color: hsl(var(--negative-bg))"
@click="deleteData"
/>
<AppBox
class="column justify-between full-height"
style="padding: 0; border-radius: var(--radius-2)"
>
<div class="form-header col q-px-lg row items-center">
<div v-if="isEdit" class="row">
<q-btn
round
flat
id="closeDialog"
icon="mdi-undo"
padding="xs"
class="q-mr-md"
:class="{ dark: $q.dark.isActive }"
style="color: var(--brand-1)"
@click="undo"
/>
<div style="width: 31.98px"></div>
</div>
<div v-else>
<q-btn
round
flat
id="editDialog"
icon="mdi-pencil-outline"
padding="xs"
class="q-mr-md"
:class="{ dark: $q.dark.isActive }"
style="color: var(--brand-1)"
@click="editData"
/>
<q-btn
round
flat
id="deleteDialog"
icon="mdi-trash-can-outline"
padding="xs"
:class="{ dark: $q.dark.isActive }"
style="color: hsl(var(--negative-bg))"
@click="deleteData"
/>
</div>
<div class="col text-subtitle1 text-weight-bold text-center">
{{ title }}
<div class="col text-subtitle1 text-weight-bold text-center">
{{ title }}
</div>
<div style="width: 31.98px"></div>
<q-btn
round
flat
id="closeDialog"
icon="mdi-close"
padding="xs"
class="close-btn"
:class="{ dark: $q.dark.isActive }"
type="reset"
@click="close"
resetValidation
/>
</div>
<div style="width: 31.98px"></div>
<q-btn
round
flat
id="closeDialog"
icon="mdi-close"
padding="xs"
class="close-btn"
<div
class="col-10 form-body"
style="position: relative"
:class="{ dark: $q.dark.isActive }"
@click="close"
/>
</div>
:style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
>
<slot name="info"></slot>
</div>
<div
class="col-10 form-body"
style="position: relative"
:class="{ dark: $q.dark.isActive }"
:style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
>
<slot name="info"></slot>
</div>
<div
class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
>
<q-btn
dense
outline
unelevated
id="cancelBtn"
class="q-px-md app-text-negative"
:label="$t('cancel')"
@click="close"
/>
<q-btn
dense
unelevated
id="submitBtn"
type="submit"
color="primary"
class="q-px-md"
:label="$t('save')"
/>
</div>
</AppBox>
<div
class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
>
<q-btn
dense
outline
unelevated
id="cancelBtn"
class="q-px-md app-text-negative"
:label="$t('cancel')"
type="reset"
@click="close"
/>
<q-btn
v-if="isEdit"
dense
unelevated
id="submitBtn"
type="submit"
color="primary"
class="q-px-md"
:label="$t('save')"
/>
<q-btn
v-else
dense
unelevated
id="okBtn"
color="primary"
class="q-px-md"
label="ตกลง"
@click="close"
/>
</div>
</AppBox>
</q-form>
</q-drawer>
</template>