1303
This commit is contained in:
parent
c1274cf9a0
commit
972fd6ae96
@ -188,6 +188,17 @@ const common = {
|
|||||||
showImage(event) {
|
showImage(event) {
|
||||||
return (event.target.style.visibility = 'visible');
|
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 {
|
export default {
|
||||||
|
|||||||
@ -1,47 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container-xxl flex-grow-1 container-p-y pb-0">
|
<div class="card app-calendar-wrapper">
|
||||||
<div class="card app-calendar-wrapper">
|
<div class="row g-0">
|
||||||
<div class="row g-0">
|
<div class="col-3 border-end text-center" id="app-calendar-sidebar">
|
||||||
<div class="col-3 border-end text-center" id="app-calendar-sidebar">
|
<div class="card-body">
|
||||||
<div class="card-body">
|
<img
|
||||||
<img
|
v-if="user"
|
||||||
v-if="user"
|
:src="`${baseUrl}upload/img/profile/${user.profile}`"
|
||||||
:src="`${baseUrl}upload/img/profile/${user.profile}`"
|
alt="Profile Image"
|
||||||
alt="Profile Image"
|
class="w-px-50 h-px-50 rounded-circle"
|
||||||
class="w-px-50 h-px-50 rounded-circle"
|
@error="$event.target.src = '/img/icons/icon.png'"
|
||||||
@error="$event.target.src = '/img/icons/icon.png'"
|
/>
|
||||||
/>
|
<p class="mt-2 fw-bold">
|
||||||
<p class="mt-2 fw-bold">
|
{{ user.name }}
|
||||||
{{ user.name }}
|
</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<CommuterBtn :userId="user.id" :checkedInProject="checkedInProject || {}" ref="workTimeComponentRef" />
|
<CommuterBtn :userId="user.id" :checkedInProject="checkedInProject || {}" ref="workTimeComponentRef" />
|
||||||
|
|
||||||
<MainEventList
|
<MainEventList
|
||||||
:categoryList="categoryList"
|
:categoryList="categoryList"
|
||||||
:baseUrl="baseUrl"
|
:baseUrl="baseUrl"
|
||||||
:birthdayList="birthdayList"
|
:birthdayList="birthdayList"
|
||||||
:vacationList="vacationList"
|
:vacationList="vacationList"
|
||||||
:birthdayPartyList="birthdayPartyList"
|
:birthdayPartyList="birthdayPartyList"
|
||||||
:dinnerList="dinnerList"
|
:dinnerList="dinnerList"
|
||||||
:teaTimeList="teaTimeList"
|
:teaTimeList="teaTimeList"
|
||||||
:workShopList="workShopList"
|
:workShopList="workShopList"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col app-calendar-content">
|
<div class="col app-calendar-content">
|
||||||
<div class="card shadow-none border-0">
|
<div class="card shadow-none border-0">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<full-calendar
|
<full-calendar
|
||||||
ref="fullCalendarRef"
|
ref="fullCalendarRef"
|
||||||
:events="calendarEvents"
|
:events="calendarEvents"
|
||||||
:options="calendarOptions"
|
:options="calendarOptions"
|
||||||
defaultView="dayGridMonth"
|
defaultView="dayGridMonth"
|
||||||
class="flatpickr-calendar-only"
|
class="flatpickr-calendar-only"
|
||||||
>
|
>
|
||||||
</full-calendar>
|
</full-calendar>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -90,8 +88,6 @@
|
|||||||
const selectedProject = ref(null);
|
const selectedProject = ref(null);
|
||||||
const checkedInProject = ref(null);
|
const checkedInProject = ref(null);
|
||||||
|
|
||||||
const commuters = ref([]);
|
|
||||||
|
|
||||||
// 이벤트 모달 관련
|
// 이벤트 모달 관련
|
||||||
const showModal = ref(false);
|
const showModal = ref(false);
|
||||||
const modalPosition = ref({ x: 0, y: 0 });
|
const modalPosition = ref({ x: 0, y: 0 });
|
||||||
|
|||||||
63
src/components/main/MemberManagement.vue
Normal file
63
src/components/main/MemberManagement.vue
Normal 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>
|
||||||
@ -1,7 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<MainEventCalendar />
|
<div class="container-xxl flex-grow-1 container-p-y pb-0">
|
||||||
|
<MainEventCalendar />
|
||||||
|
<MemberManagement />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import MainEventCalendar from '@/components/main/MainEventCalendar.vue';
|
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>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user