.
This commit is contained in:
parent
5be05bbab6
commit
e75ca56f7d
@ -1,150 +1,112 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="row g-4 mt-2" v-if="memberList?.length">
|
<div class="row g-4 mt-2" v-if="memberList?.length">
|
||||||
<div>
|
<div>
|
||||||
<div class="card">
|
|
||||||
<div class="card-body p-3 row">
|
|
||||||
<div class="d-flex justify-content-between mb-2">
|
|
||||||
<h5 class="card-title fw-bold">사원 등록 관리</h5>
|
|
||||||
</div>
|
|
||||||
<div class="g-4 col-12 col-lg-6" v-for="member in memberList" :key="member.MEMBERSEQ">
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="row card-body">
|
<div class="card-body p-3 row">
|
||||||
<div class="col-3 d-flex align-items-center">
|
<div class="d-flex justify-content-between mb-2">
|
||||||
<img
|
<h5 class="card-title fw-bold">사원 등록 관리</h5>
|
||||||
:src="`${imgURL}profile/${member.MEMBERPRF}`"
|
</div>
|
||||||
alt="Profile Image"
|
<div class="g-4 col-12 col-lg-6" v-for="member in memberList" :key="member.MEMBERSEQ">
|
||||||
class="img-thumbnail mx-auto d-block"
|
<div class="card">
|
||||||
style="max-height: 140px"
|
<div class="row card-body">
|
||||||
@error="$event.target.src = '/img/icons/icon.png'"
|
<div class="col-3 d-flex align-items-center">
|
||||||
/>
|
<img
|
||||||
</div>
|
:src="`${imgURL}profile/${member.MEMBERPRF}`"
|
||||||
<div class="col-7">
|
alt="Profile Image"
|
||||||
<div class="d-flex flex-sm-row align-items-center pb-2">
|
class="img-thumbnail mx-auto d-block"
|
||||||
<div class="font-bold">{{ member.MEMBERNAM }}</div>
|
style="max-height: 140px"
|
||||||
<div class="ms-2">
|
@error="$event.target.src = '/img/icons/icon.png'"
|
||||||
({{ member.MBTI }})
|
/>
|
||||||
<img
|
</div>
|
||||||
role="img"
|
<div class="col-7">
|
||||||
class="w-px-30 h-px-40"
|
<div class="d-flex flex-sm-row align-items-center pb-2">
|
||||||
:src="`/img/mbti/${member.MBTI.toLowerCase()}.png`"
|
<div class="font-bold">{{ member.MEMBERNAM }}</div>
|
||||||
alt="MBTI image"
|
<div class="ms-2">
|
||||||
/>
|
({{ member.MBTI }})
|
||||||
|
<img
|
||||||
|
role="img"
|
||||||
|
class="w-px-30 h-px-40"
|
||||||
|
:src="`/img/mbti/${member.MBTI.toLowerCase()}.png`"
|
||||||
|
alt="MBTI image"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-sm-row align-items-center pb-2">
|
||||||
|
<i class="bx bx-id-card"></i>
|
||||||
|
<div class="ms-2">{{ member.MEMBERIDS }}</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.MEMBERCDT) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 d-flex align-items-center">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<label class="switch"
|
||||||
|
><input
|
||||||
|
type="checkbox"
|
||||||
|
:checked="checked"
|
||||||
|
@change="handleRegisterMember(member.MEMBERSEQ)" /><span class="slider round"></span
|
||||||
|
></label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="btn-close btn-close-sm"
|
||||||
|
style="position: absolute; top: 10px; right: 10px"
|
||||||
|
@click="handleRejectMember(member.MEMBERSEQ)"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex flex-sm-row align-items-center pb-2">
|
|
||||||
<i class="bx bx-id-card"></i>
|
|
||||||
<div class="ms-2">{{ member.MEMBERIDS }}</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.MEMBERCDT) }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-2 d-flex align-items-center">
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<label class="switch">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="member.isAccepted"
|
|
||||||
@click="handleToggle($event, member)"
|
|
||||||
/>
|
|
||||||
<span class="slider round"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="btn-close btn-close-sm"
|
|
||||||
style="position: absolute; top: 10px; right: 10px"
|
|
||||||
@click="handleRejectMember(member.MEMBERSEQ)"
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useToastStore } from '@s/toastStore';
|
import { useToastStore } from '@s/toastStore';
|
||||||
import $api from '@api';
|
import $api from '@api';
|
||||||
|
|
||||||
const memberList = ref([]);
|
const memberList = ref([]);
|
||||||
const imgURL = import.meta.env.VITE_SERVER_IMG_URL;
|
const checked = ref(false);
|
||||||
const toast = useToastStore();
|
const toast = useToastStore();
|
||||||
|
const imgURL = import.meta.env.VITE_SERVER_IMG_URL;
|
||||||
|
|
||||||
// 회원 목록 조회 API
|
// 조회 api
|
||||||
const fetchRegisterMemberList = async () => {
|
const fetchRegisterMemberList = async () => {
|
||||||
try {
|
const { data } = await $api.get('main/registerMemberList');
|
||||||
const { data } = await $api.get('main/registerMemberList');
|
if (data?.data) memberList.value = data.data;
|
||||||
if (data?.data) {
|
};
|
||||||
// 예시: MEMBERROL이 'ROLE_REGISTERED'이면 등록(수락)된 것으로 가정
|
|
||||||
memberList.value = data.data
|
|
||||||
.filter(member => member.MEMBERSEQ !== 1)
|
|
||||||
.map(member => ({
|
|
||||||
...member,
|
|
||||||
isAccepted: member.MEMBERROL === 'ROLE_REGISTERED'
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
toast.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 사원 등록 API (수락)
|
// 사원 등록 api
|
||||||
// 수정: 이벤트 객체를 받아 기본 동작을 막음으로써 체크박스 상태 변화 자체를 방지함
|
const handleRegisterMember = async memberSeq => {
|
||||||
const handleRegisterMember = async (memberSeq, event) => {
|
const { data } = await $api.post('main/registerMember', { memberSeq: memberSeq });
|
||||||
event.preventDefault(); // 체크박스의 기본 동작을 막음
|
if (data?.data) {
|
||||||
try {
|
toast.onToast(data.data, 's');
|
||||||
const { data } = await $api.post('main/registerMember', { memberSeq });
|
fetchRegisterMemberList();
|
||||||
if (data?.data) {
|
}
|
||||||
toast.onToast(data.data, 's');
|
};
|
||||||
await fetchRegisterMemberList();
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
if (data?.message) toast.onToast(data.message, 'e');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
toast.onToast('사원 등록에 실패했습니다.', 'e');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 사원 등록 거절 API
|
// 사원 등록 미승인 api
|
||||||
const handleRejectMember = async memberSeq => {
|
const handleRejectMember = async memberSeq => {
|
||||||
if (!confirm('해당 사원 등록을 거절하시겠습니까?')) return;
|
if (!confirm('해당 사원 등록을 거절하시겠습니까?')) return;
|
||||||
try {
|
|
||||||
const { data } = await $api.post('main/rejectMember', { memberSeq });
|
|
||||||
if (data?.data) {
|
|
||||||
toast.onToast(data.data, 's');
|
|
||||||
await fetchRegisterMemberList();
|
|
||||||
} else {
|
|
||||||
if (data?.message) toast.onToast(data.message, 'e');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
toast.onToast('사원 등록 거절에 실패했습니다.', 'e');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 토글 이벤트 핸들러: API 호출 실패 시 체크박스 상태 변화 자체를 막음
|
const { data } = await $api.post('main/rejectMember', { memberSeq: memberSeq });
|
||||||
async function handleToggle(event, member) {
|
if (data?.data) {
|
||||||
event.preventDefault(); // 기본 동작을 막아서 체크박스 UI가 바뀌지 않음
|
toast.onToast(data.data, 's');
|
||||||
await handleRegisterMember(member.MEMBERSEQ, event);
|
fetchRegisterMemberList();
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchRegisterMemberList();
|
await fetchRegisterMemberList();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user