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

Merge branch 'dev/phatt' into develop

Browse source
This commit is contained in:
puriphatt 2024-04-05 19:07:07 +07:00
commit 09868b71a0
4 changed files with 409 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

259
src/components/FormDialog.vue Normal file
View file

@ -0,0 +1,259 @@
<script setup lang="ts">
import { ref } from 'vue';
import AppBox from 'components/app/AppBox.vue';
defineProps<{
title: string;
addressLocaleTitle: string;
addressEngTitle: string;
}>();
interface Address {
address: string;
province: string;
district: string;
subDistrict: string;
zip: string;
}
const modal = defineModel('modal', { default: false });
const addressL = defineModel<Address>('addressL');
const addressEng = defineModel<Address>('addressEng');
const addrOptions = ref({
provinceOps: [
{ label: 'เชียงใหม่', value: '1' },
{ label: 'เชียงราย', value: '2' },
],
districtOps: [
{ label: 'อำเภอ1', value: '1' },
{ label: 'อำเภอ2', value: '2' },
],
subDistrictOps: [
{ label: 'ตำบล1', value: '1' },
{ label: 'ตำบล2', value: '2' },
],
});
</script>
<template>
<q-dialog full-width v-model="modal">
<AppBox
v-if="addressL && addressEng"
style="padding: 0; border-radius: var(--radius-2)"
>
<!-- header -->
<q-card-section class="form-header">
<div class="row items-center justity-between">
<div
class="col text-subtitle1 text-weight-bold"
style="color: hsl(var(--info-bg))"
>
{{ title }}
</div>
<q-btn
round
flat
icon="mdi-close"
padding="xs"
class="close-btn"
:class="{ dark: $q.dark.isActive }"
v-close-popup
/>
</div>
</q-card-section>
<!-- form-top -->
<div class="form-body-top" :class="{ dark: $q.dark.isActive }">
<q-card-section class="column col-12">
<div class="row q-col-gutter-x-md">
<slot name="top"></slot>
</div>
</q-card-section>
</div>
<!-- form-mid -->
<div class="row" style="overflow-y: auto; max-height: 60vh">
<!-- prepend -->
<q-card-section
class="column col-4"
v-if="$slots.prepend && !$slots.append"
>
<slot name="prepend"></slot>
</q-card-section>
<!-- center -->
<q-card-section
class="column"
:class="`${$slots.prepend ? 'col-8' : 'col-6'}`"
>
<div
class="row inline col-12 q-col-gutter-x-md"
style="row-gap: 16px"
>
<slot name="midTop"></slot>
<div class="col-12">
{{ addressLocaleTitle }}
</div>
<q-input
dense
outlined
label="ที่อยู่"
class="col-12"
v-model="addressL.address"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressL.province"
option-value="value"
option-label="label"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressL.district"
option-value="value"
option-label="label"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressL.subDistrict"
option-value="value"
option-label="label"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
/>
<q-input
dense
readonly
outlined
label="รหัสไปรษณีย์"
class="col-3"
v-model="addressL.zip"
/>
<span class="col-12">
{{ addressEngTitle }}
</span>
<q-input
dense
outlined
label="ที่อยู่"
class="col-12"
v-model="addressEng.address"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressEng.province"
option-value="value"
option-label="label"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressEng.district"
option-value="value"
option-label="label"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressEng.subDistrict"
option-value="value"
option-label="label"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
/>
<q-input
dense
readonly
outlined
label="รหัสไปรษณีย์"
class="col-3"
v-model="addressEng.zip"
/>
<div class="col-12" v-if="$slots.midBottom">
<q-separator size="1px" />
</div>
<slot name="midBottom"></slot>
</div>
</q-card-section>
<!-- append -->
<q-card-section
class="column col-6"
v-if="$slots.append && !$slots.prepend"
>
<slot name="append"></slot>
</q-card-section>
</div>
<!-- footer -->
<q-card-section class="form-footer">
<div class="text-right">
<q-btn
dense
unelevated
color="primary"
class="q-px-sm"
:label="$t('save')"
/>
</div>
</q-card-section>
</AppBox>
</q-dialog>
</template>
<style scoped lang="scss">
.close-btn {
color: hsl(var(--negative));
background-color: hsla(var(--negative) / 0.1);
&.dark {
background-color: transparent;
border: 1px solid hsl(var(--negative));
}
}
.form-header {
border-bottom: 1px solid var(--border-color);
}
.form-body-top {
--_body-bg: var(--sand-0);
background-color: var(--_body-bg);
&.dark {
--_body-bg: var(--gray-10);
}
}
.form-footer {
border-top: 1px solid var(--border-color);
}
</style>

2
src/css/app.scss
View file

@ -17,7 +17,7 @@ html {
--text-mute: var(--stone-4-hsl);
--info-fg: 0 0% 100%;
--info-bg: var(--blue-6-hsl);
--negative: var(--red-9-hsl);
--gender-male: var(--blue-5-hsl);
--gender-female: var(--pink-7-hsl);

2
src/css/quasar.variables.scss
View file

@ -10,7 +10,7 @@ $dark: var(--gray-11);
$dark-page: var(--gray-10);
$positive: #00bd9d;
$negative: #cc0004;
$negative: var(--red-9-hsl);
$info: #328bf3;
$warning: #ffc224;

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

@ -9,6 +9,7 @@ import StatCardComponent from 'components/StatCardComponent.vue';
import SelectorList from 'components/SelectorList.vue';
import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import FormDialog from 'src/components/FormDialog.vue';
const userStore = useUserStore();
const { data: userData } = storeToRefs(userStore);
@ -24,12 +25,57 @@ const branchStat = ref([
]);
const selectorLabel = ref('');
const modal = ref(false);
const hqId = ref('');
const branchId = ref('');
const genderOptions = ref([
{ label: 'ชาย', value: '1' },
{ label: 'หญิง', value: '2' },
]);
const hqOptions = ref([
{ label: '0000000001', value: '1' },
{ label: '0000000002', value: '2' },
]);
const branchOptions = ref([
{ label: '0000000001-1', value: '1' },
{ label: '0000000001-2', value: '2' },
]);
const formData = ref({
hqId: '',
branchId: '',
tel: '',
gender: '',
email: '',
addressL: {
address: '',
province: '',
district: '',
subDistrict: '',
zip: '',
},
addressEng: {
address: '',
province: '',
district: '',
subDistrict: '',
zip: '',
},
});
const selectorList = [
{ label: 'personnelSelector1', count: 0 },
{ label: 'personnelSelector2', count: 0 },
{ label: 'personnelSelector3', count: 0 },
{ label: 'personnelSelector4', count: 0 },
] satisfies InstanceType<typeof SelectorList>['$props']['list'];
function openDialog() {
modal.value = true;
}
</script>
<template>
@ -48,9 +94,19 @@ const selectorList = [
<!-- stat -->
<AppBox bordered class="column full-width">
<span class="q-pb-lg text-weight-bold text-subtitle1">
{{ $t('personnelStatTitle') + $t(selectorLabel) }}
</span>
<div class="row q-pb-lg justify-between items-center">
<div class="text-weight-bold text-subtitle1">
{{ $t('personnelStatTitle') + $t(selectorLabel) }}
</div>
<q-btn
dense
unelevated
label="+ เพิ่มบุคลากร"
padding="4px 16px"
@click="openDialog"
style="background-color: var(--cyan-6); color: white"
/>
</div>
<div class="row col full-width" style="overflow-x: auto">
<StatCardComponent :branch="branchStat" class="no-wrap" />
</div>
@ -93,10 +149,98 @@ const selectorList = [
<BtnAddComponent
:label="'personnelAdd'"
:cyanOn="true"
@trigger="() => console.log('test')"
@trigger="openDialog"
/>
</div>
</div>
</AppBox>
</div>
<FormDialog
v-model:modal="modal"
v-model:addressL="formData.addressL"
v-model:addressEng="formData.addressEng"
title="เพิ่มบุคลากร"
addressLocaleTitle="ที่อยู่พนักงาน"
addressEngTitle="ที่อยู่พนักงาน ENG"
>
<template #top>
<q-select
dense
outlined
emit-value
map-options
v-model="hqId"
class="col-6"
option-value="value"
option-label="label"
label="รหัสสำนักงานใหญ่"
:options="hqOptions"
bg-color="white"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="branchId"
class="col-6"
option-value="value"
option-label="label"
label="รหัสสาขา"
:options="branchOptions"
bg-color="white"
/>
</template>
<template #prepend>
<div>asd</div>
</template>
<template #midTop>
<!-- <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
<q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
<q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
<q-input dense outlined label="รหัสไปรษณีย์" class="col-3" /> -->
</template>
<template #midBottom>
<q-input
dense
outlined
label="เบอร์โทร"
class="col-3"
v-model="formData.tel"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="formData.gender"
class="col-3"
option-value="value"
option-label="label"
label="เพศ"
:options="genderOptions"
bg-color="white"
/>
<q-input
dense
outlined
label="อีเมล"
class="col-6"
v-model="formData.email"
/>
</template>
<!-- <template #append>
<div style="background-color: blue">asd</div>
</template> -->
</FormDialog>
</template>
<style>
.bg-white {
background-color: var(--surface-1) !important;
}
</style>