localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

1303

Browse Source
This commit is contained in:
nevermoregb 2025-03-31 13:03:45 +09:00
parent c1274cf9a0
commit 972fd6ae96
4 changed files with 131 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/common/common.js
View File

@ -188,6 +188,17 @@ const common = {
showImage(event) {
return (event.target.style.visibility = 'visible');
},
addHyphenToPhoneNumber(phoneNum) {
const phoneNumber = phoneNum;
const length = phoneNumber.length;
if (length >= 9) {
return phoneNumber.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
} else {
return phoneNum;
}
},
};
export default {

78
src/components/main/MainEventCalendar.vue
View File

@ -1,47 +1,45 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y pb-0">
<div class="card app-calendar-wrapper">
<div class="row g-0">
<div class="col-3 border-end text-center" id="app-calendar-sidebar">
<div class="card-body">
<img
v-if="user"
:src="`${baseUrl}upload/img/profile/${user.profile}`"
alt="Profile Image"
class="w-px-50 h-px-50 rounded-circle"
@error="$event.target.src = '/img/icons/icon.png'"
/>
<p class="mt-2 fw-bold">
{{ user.name }}
</p>
<div class="card app-calendar-wrapper">
<div class="row g-0">
<div class="col-3 border-end text-center" id="app-calendar-sidebar">
<div class="card-body">
<img
v-if="user"
:src="`${baseUrl}upload/img/profile/${user.profile}`"
alt="Profile Image"
class="w-px-50 h-px-50 rounded-circle"
@error="$event.target.src = '/img/icons/icon.png'"
/>
<p class="mt-2 fw-bold">
{{ user.name }}
</p>
<CommuterBtn :userId="user.id" :checkedInProject="checkedInProject || {}" ref="workTimeComponentRef" />
<CommuterBtn :userId="user.id" :checkedInProject="checkedInProject || {}" ref="workTimeComponentRef" />
<MainEventList
:categoryList="categoryList"
:baseUrl="baseUrl"
:birthdayList="birthdayList"
:vacationList="vacationList"
:birthdayPartyList="birthdayPartyList"
:dinnerList="dinnerList"
:teaTimeList="teaTimeList"
:workShopList="workShopList"
/>
</div>
<MainEventList
:categoryList="categoryList"
:baseUrl="baseUrl"
:birthdayList="birthdayList"
:vacationList="vacationList"
:birthdayPartyList="birthdayPartyList"
:dinnerList="dinnerList"
:teaTimeList="teaTimeList"
:workShopList="workShopList"
/>
</div>
</div>
<div class="col app-calendar-content">
<div class="card shadow-none border-0">
<div class="card-body">
<full-calendar
ref="fullCalendarRef"
:events="calendarEvents"
:options="calendarOptions"
defaultView="dayGridMonth"
class="flatpickr-calendar-only"
>
</full-calendar>
</div>
<div class="col app-calendar-content">
<div class="card shadow-none border-0">
<div class="card-body">
<full-calendar
ref="fullCalendarRef"
:events="calendarEvents"
:options="calendarOptions"
defaultView="dayGridMonth"
class="flatpickr-calendar-only"
>
</full-calendar>
</div>
</div>
</div>
@ -90,8 +88,6 @@
const selectedProject = ref(null);
const checkedInProject = ref(null);
const commuters = ref([]);
// 이벤트 모달 관련
const showModal = ref(false);
const modalPosition = ref({ x: 0, y: 0 });

63
src/components/main/MemberManagement.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div v-if="memberList" class="card mt-2 mb-3 shadow-sm border">
<div class="row g-0">
<div class="card-body">
<div class="d-flex justify-content-between">
<h5 class="card-title fw-bold">사원 등록 관리</h5>
</div>
<div class="g-2 card">
<div v-for="member in memberList" :key="member.MEMBERSEQ" class="row card-body">
<div class="col-2">
<img
:src="`upload/img/profile/`"
alt="Profile Image"
class="img-fluid"
@error="$event.target.src = '/img/icons/icon.png'"
/>
</div>
<div class="col-7">
<!-- 날짜 -->
<div class="d-flex flex-sm-row align-items-center pb-2">
<div class="">{{ member.MEMBERNAM }}</div>
</div>
<!-- 참여자 -->
<div class="d-flex flex-sm-row align-items-center pb-2">
<i class="bx bxs-envelope"></i>
<div class="ms-2">{{ member.MEMBERIDS }}@local-host.co.kr</div>
</div>
<div class="d-flex flex-sm-row align-items-center pb-2">
<i class="bx bxs-phone"></i>
<div class="ms-2">{{ $common.addHyphenToPhoneNumber(member.MEMBERTEL) }}</div>
</div>
<div class="d-flex flex-sm-row align-items-center pb-2">
<i class="bx bx-calendar"></i>
<div class="ms-2">{{ $common.dateFormatter(member.MEMBERRDT) }}</div>
</div>
</div>
<div class="col-3">
<div class="align-items-center">
<label class="switch"><input type="checkbox" checked="" /><span class="slider round"></span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { inject, onMounted, ref } from 'vue';
import $api from '@api';
const memberList = ref([]);
const fetchRegisterMemberList = async () => {
const { data } = await $api.get('main/registerMemberList');
if (data?.data) memberList.value = data.data;
};
onMounted(async () => {
await fetchRegisterMemberList();
});
</script>

21
src/views/MainView.vue
View File

@ -1,7 +1,26 @@
<template>
<MainEventCalendar />
<div class="container-xxl flex-grow-1 container-p-y pb-0">
<MainEventCalendar />
<MemberManagement />
</div>
</template>
<script setup>
import MainEventCalendar from '@/components/main/MainEventCalendar.vue';
import MemberManagement from '@/components/main/MemberManagement.vue';
import { useUserInfoStore } from '@/stores/useUserInfoStore';
import { inject, onMounted, ref } from 'vue';
import $api from '@api';
const userStore = useUserInfoStore();
const user = ref();
const isAdmin = user => {
return user.value.role === 'ROLE_ADMIN' ? true : false;
};
onMounted(async () => {
await userStore.userInfo();
user.value = userStore.user;
});
</script>