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

Merge branch 'khj'

Browse Source
This commit is contained in:
khj0414 2025-02-18 11:12:53 +09:00
commit 46db001c56
15 changed files with 669 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/pagination/Pagination.vue
View File

@ -66,51 +66,55 @@
const props = defineProps({
currentPage: {
type: Number,
required: true
required: false
},
pages: {
type: Number,
required: true
required: false
},
prePage: {
type: Number,
required: true
required: false
},
nextPage: {
type: Number,
required: true
required: false
},
isFirstPage: {
type: Boolean,
required: true
required: false
},
isLastPage: {
type: Boolean,
required: true
required: false
},
hasPreviousPage: {
type: Boolean,
required: true
required: false
},
hasNextPage: {
type: Boolean,
required: true
required: false
},
navigatePages: {
type: Number,
required: true
required: false
},
navigatepageNums: {
type: Array,
required: true
required: false
},
navigateFirstPage: {
type: Number,
required: true
required: false
},
navigateLastPage: {
type: Number,
required: true
required: false
},
PageData:{
type:Array,
required:false,
}
});

51
src/components/voteboard/voteCard.vue
View File

@ -2,32 +2,46 @@
<div class="card mb-6">
<div class="card-body">
<h5 class="card-title mb-1"><div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="/img/avatars/1.png" class="rounded-circle me-3 w-px-40" >
<img
class="rounded-circle user-avatar border border-3 w-px-40"
:src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
:style="`border-color: ${data.localVote.usercolor} !important;`"
alt="user"
/>
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1">공공이</h6>
<h6 class="mb-1">{{ data.localVote.MEMBERNAM }}</h6>
</div>
<div class="add-btn">
<!-- 투표완료시 -->
<i class="bx bxs-check-circle link-success"></i>
<!-- 투표작성자만 수정/삭제/종료 가능 -->
<button type="button" class="bx btn btn-danger">종료</button>
<button
v-if="userStore.user.id === data.localVote.LOCVOTREG"
type="button" class="bx btn btn-danger">종료</button>
<EditBtn />
<DeleteBtn />
</div>
</div>
</div>
</div>
</div>
</h5>
<div class="mb-1">회식장소 고릅시다.</div>
<div class="mb-1">24.12.12 11:02 ~ 24.12.12 16:02</div>
<h5>{{ data.localVote.LOCVOTTTL }}</h5>
<div class="mb-1">{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</div>
<!-- 투표완료시-->
<vote-revote-end />
<button v-if="data.yesVotetotal > 0" class="btn btn-primary btn-sm" >재투표</button>
<!-- 투표안했을시-->
<vote-card-check />
<vote-card-check
v-if="data.yesVotetotal == 0"
@addContents="addContents"
@checkedNames="checkedNames"
:data="data.voteDetails"
:voteInfo="data.localVote"
:total="data.voteDetails.length "/>
<!-- 투표완/미완 인원 -->
<vote-user-list />
<vote-user-list
:data="data.voteMembers"/>
<!-- 투표 결과 -->
<vote-result-list />
</div>
@ -41,8 +55,25 @@ import DeleteBtn from '@c/button/DeleteBtn.vue';
import voteUserList from '@c/voteboard/voteUserList.vue';
import voteResultList from '@c/voteboard/voteResultList.vue';
import voteCardCheck from '@c/voteboard/voteCardCheck.vue';
import voteRevoteEnd from '@c/voteboard/voteRevoteEnd.vue';
import { useUserInfoStore } from '@s/useUserInfoStore';
import $api from '@api';
const props = defineProps({
data: {
type: Object,
required: true,
},
});
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const userStore = useUserInfoStore();
const emit = defineEmits(['addContents','checkedNames']);
const addContents = (itemList, voteId) =>{
emit('addContents',itemList,voteId)
}
const checkedNames = (numList) =>{
emit('checkedNames',numList);
}
</script>
<style scoped>

88
src/components/voteboard/voteCardCheck.vue
View File

@ -2,24 +2,96 @@
<div class="card-text">
<div class="demo-inline-spacing mt-4">
<!-- 투표리스트 -->
<vote-card-check-list />
<div class="d-flex align-items-center">
<PlusBtn/>
<FormInput title="추가항목" name="addContent" :isLabel="false" :is-essential="true" :is-alert="titleAlert" @update:data="title = $event" />
<button class="btn btn-primary ms-1">저장</button>
<div v-for="(item, index) in data"
:key="index">
<vote-card-check-list
:data="item"
:multiIs = voteInfo.LOCVOTMUL
:selectedValues="checkedNames"
@update:selectedValues="updateCheckedNames"
/>
<div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1" class="d-flex align-items-center">
<div class="d-flex flex-column gap-2">
<div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-center">
<form-input
class="flex-grow-1 me-2"
:title="'항목 ' + (index + data.length + 1)"
:name="'content' + index"
:is-essential="false"
:is-alert="contentAlerts[index]"
v-model="item.content"
/>
<link-input v-model="item.url" />
<delete-btn @click="removeItem(index)" class="ms-2" />
</div>
<div class="mb-4 d-flex justify-content">
<plus-btn @click="addItem" :disabled="total >= 10" class="mb-3" />
<button class="btn btn-primary btn-icon mb-3" @click="addContentSave(item.LOCVOTSEQ)" :disabled="isSaveDisabled">
<i class="bx bx-check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary btn-sm">투표하기</button>
<button class="btn btn-primary btn-sm" @click="selectVote">투표하기</button>
</template>
<script setup>
import $api from '@api';
import PlusBtn from '@c/button/PlusBtn.vue';
import FormInput from '@c/input/FormInput.vue';
import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
import { ref } from 'vue';
import { computed, ref } from 'vue';
import LinkInput from "@/components/voteboard/voteLinkInput.vue";
import { voteCommon } from '@s/voteCommon';
import DeleteBtn from "@c/button/DeleteBtn.vue";
import { useToastStore } from '@s/toastStore';
import router from '@/router';
const toastStore = useToastStore();
const contentAlerts = ref(false);
const titleAlert = ref(false);
const title = ref('');
const rink = ref('');
const { itemList, addItem, removeItem } = voteCommon(true);
const total = computed(() => props.total + itemList.value.length);
const isSaveDisabled = computed(() => {
return itemList.value.length === 0 || itemList.value.every(item => !item.content.trim());
});
const props = defineProps({
data: {
type: Array,
required: true,
},
voteInfo: {
type: Object,
required: true,
},
total: {
type: Number,
required: true,
},
});
const emit = defineEmits(['addContents','checkedNames']);
//항목추가
const addContentSave = (voteId) =>{
emit('addContents',itemList.value,voteId);
itemList.value = [{ content: "", url: "" }];
}
const checkedNames = ref([]); // 선택된 값 저장
const updateCheckedNames = (newValues) => {
checkedNames.value = newValues;
};
const selectVote = () =>{
emit('checkedNames',checkedNames.value);
}
</script>
<style >

47
src/components/voteboard/voteCardCheckList.vue
View File

@ -1,14 +1,57 @@
<template>
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
case1
<input
class="form-check-input me-1"
:name="data.LOCVOTSEQ"
:type="multiIs === '1' ? 'checkbox' : 'radio'"
:value="data.VOTDETSEQ"
:checked="selectedValues.includes(data.VOTDETSEQ)"
@change="handleChange"
>
{{ data.LOCVOTCON }}
<a v-if="data.LOCVOTLIK" :href="data.LOCVOTLIK.startsWith('http') ? data.LOCVOTLIK : 'http://' + data.LOCVOTLIK" target="_blank">
{{ data.LOCVOTLIK }}
</a>
</label>
</div>
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
data: {
type: Object,
required: true,
},
multiIs: {
type: String,
required: true,
},
selectedValues: {
type: Array,
required: true,
},
})
const emit = defineEmits(["update:selectedValues"]);
const handleChange = (event) => {
const value = event.target.value;
let updatedValues = [];
// 체크박스일 때 여러 개 선택 가능
if (props.multiIs === "1") {
updatedValues = event.target.checked
? [...props.selectedValues, { VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }]
: props.selectedValues.filter(v => v.VOTDETSEQ !== value);
} else {
// 라디오 버튼일 때 하나만 선택 가능
updatedValues = [{ VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }];
}
emit("update:selectedValues", updatedValues);
};
</script>
<style>

22
src/components/voteboard/voteCardList.vue
View File

@ -1,13 +1,33 @@
<template>
<div>
<card />
<card
@addContents="addContents"
@checkedNames="checkedNames"
v-for="(item, index) in data"
:key="index"
:data="item" />
</div>
</template>
<script setup>
import card from '@c/voteboard/voteCard.vue'
const props = defineProps({
data: {
type: Array,
required: true,
},
});
const emit = defineEmits(['addContents','checkedNames']);
const addContents = (itemList ,voteId) =>{
emit('addContents',itemList ,voteId);
}
const checkedNames = (numList) =>{
emit('checkedNames',numList);
}
</script>
<style scoped>
</style>

12
src/components/voteboard/voteCompleteUserList.vue
View File

@ -1,11 +1,10 @@
<template>
<div class="d-flex align-items-center">
<i class='bx bxs-user-check link-info'></i>
<div class="d-flex align-items-center ">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<vote-complete-user-list-card />
<vote-complete-user-list-card :data="data"/>
</ul>
</div>
</li>
@ -15,7 +14,12 @@
<script setup>
import voteCompleteUserListCard from '@c/voteboard/voteCompleteUserListCard.vue';
const props = defineProps({
data: {
type: Object,
required: true,
},
});
</script>
<style lang="scss" scoped>

39
src/components/voteboard/voteCompleteUserListCard.vue
View File

@ -1,10 +1,45 @@
<template>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
<img class="rounded-circle" src="/img/avatars/1.png" alt="Avatar">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar pull-up"
:aria-label="data.MEMBERSEQ"
:data-bs-original-title="getTooltipTitle(data)">
<img
class="rounded-circle user-avatar border border-3"
:src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
:style="`border-color: ${data.usercolor} !important;`"
alt="user"
/>
</li>
</template>
<script setup>
import { useUserInfoStore } from '@s/useUserInfoStore';
import $api from '@api';
import { nextTick, onMounted } from 'vue';
const props = defineProps({
data: {
type: Object,
required: true,
},
});
const userStore = useUserInfoStore();
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
onMounted(async () => {
nextTick(() => {
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach((tooltip) => {
new bootstrap.Tooltip(tooltip);
});
});
});
const getTooltipTitle = (user) => {
return user.MEMBERSEQ === userStore.user.id ? '나' : user.MEMBERNAM;
};
</script>

12
src/components/voteboard/voteInCompleteUserList.vue
View File

@ -1,11 +1,10 @@
<template>
<div class="d-flex align-items-center">
<i class='bx bxs-user-x link-danger'></i>
<div class="d-flex align-items-center ">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<vote-in-complete-user-list-card />
<vote-in-complete-user-list-card :data="data" />
</ul>
</div>
</li>
@ -15,7 +14,12 @@
<script setup>
import voteInCompleteUserListCard from '@c/voteboard/voteInCompleteUserListCard.vue';
const props = defineProps({
data: {
type: Object,
required: true,
},
});
</script>
<style lang="scss" scoped>

39
src/components/voteboard/voteInCompleteUserListCard.vue
View File

@ -1,10 +1,45 @@
<template>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
<img class="rounded-circle" src="/img/avatars/3.png" alt="Avatar">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
class="avatar pull-up"
:aria-label="data.MEMBERSEQ"
:data-bs-original-title="getTooltipTitle(data)">
<img
class="rounded-circle user-avatar border border-3"
:src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
:style="`border-color: ${data.usercolor} !important;`"
alt="user"
/>
</li>
</template>
<script setup>
import { useUserInfoStore } from '@s/useUserInfoStore';
import $api from '@api';
import { nextTick, onMounted } from 'vue';
const props = defineProps({
data: {
type: Object,
required: true,
},
});
const userStore = useUserInfoStore();
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
onMounted(async () => {
nextTick(() => {
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach((tooltip) => {
new bootstrap.Tooltip(tooltip);
});
});
});
const getTooltipTitle = (user) => {
return user.MEMBERSEQ === userStore.user.id ? '나' : user.MEMBERNAM;
};
</script>

80
src/components/voteboard/voteLinkInput.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<div class="position-relative me-2">
<i class="bx bx-link-alt" @click="togglePopover"></i>
<!-- 링크 팝업 -->
<div
v-if="isPopoverVisible"
class="popover bs-popover-auto fade show d-flex align-items-center"
role="tooltip"
:style="popoverStyle"
>
<div class="popover-arrow"></div>
<input
v-model="link"
placeholder="URL을 입력해주세요"
class="form-control me-2 flex-grow-1"
style="min-width: 200px;"
/>
<button type="button" class="btn btn-sm btn-primary ms-2" @click="saveLink">
등록
</button>
</div>
<!-- 등록된 링크 표시 -->
<div v-if="link" class="mt-1">
<a :href="formattedLink" target="_blank" rel="noopener noreferrer">{{ link }}</a>
</div>
</div>
</template>
<script setup>
import { ref, computed } from "vue";
const props = defineProps({
modelValue: String,
});
const emit = defineEmits(["update:modelValue"]);
const isPopoverVisible = ref(false);
const link = ref(props.modelValue || "");
const popoverStyle = ref({});
const formattedLink = computed(() => {
return link.value.startsWith("http") ? link.value : "http://" + link.value;
});
const togglePopover = (event) => {
const buttonRect = event.target.getBoundingClientRect();
const parentRect = event.target.parentElement.getBoundingClientRect();
popoverStyle.value = {
position: "absolute",
top: `${buttonRect.bottom - parentRect.top + 5}px`,
left: `${buttonRect.left - parentRect.left}px`,
zIndex: "1050",
display: "flex",
alignItems: "center",
};
isPopoverVisible.value = !isPopoverVisible.value;
};
const saveLink = () => {
emit("update:modelValue", link.value);
isPopoverVisible.value = false;
};
</script>
<style scoped>
.popover {
max-width: 300px;
border-radius: 6px;
padding: 5px;
}
.popover-arrow {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
}
</style>

16
src/components/voteboard/voteRevoteEnd.vue
View File

@ -1,16 +0,0 @@
<template>
<div class="user-status">
<span class="badge badge-dot bg-warning"></span>
<small>소고기 </small>
<button class="btn btn-primary btn-sm">재투표</button>
</div>
</template>
<script setup>
</script>
<style>
</style>

33
src/components/voteboard/voteUserList.vue
View File

@ -1,17 +1,42 @@
<template>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<!--투표한 사람 목록 -->
<vote-complete-user-list />
<div class="d-flex align-items-center gap-2">
<i class='bx bxs-user-check link-info'></i>
<vote-complete-user-list
v-for="(item, index) in voetedUsers"
:key="index"
:data="item"
/>
</div>
<!-- 투표안한 사람 목록 -->
<vote-in-complete-user-list />
<div class="d-flex align-items-center gap-2 ms-auto">
<i class='bx bxs-user-x link-danger'></i>
<vote-in-complete-user-list
v-for="(item, index) in noVoetedUsers"
:key="index"
:data="item"/>
</div>
</div>
</template>
<script setup>
import voteCompleteUserList from '@c/voteboard/voteCompleteUserList.vue';
import voteInCompleteUserList from '@c/voteboard/voteInCompleteUserList.vue';
import { computed } from 'vue';
const props = defineProps({
data: {
type: Array,
required: true,
},
});
const voetedUsers = computed(()=>{
return props.data.filter(user => user.voted === 1);
})
const noVoetedUsers = computed(()=>{
return props.data.filter(user => user.voted === 0);
})
</script>
<style scoped>

26
src/stores/voteCommon.js Normal file
View File

@ -0,0 +1,26 @@
// voteCommon.js
import { ref } from "vue";
export function voteCommon(isVOte= false) {
const itemList = ref(isVOte ? [] : [{ content: "", url: "" }, { content: "", url: "" }]);
const addItem = () => {
if (itemList.value.length < 10) {
itemList.value.push({ content: "", url: "" });
}
};
const removeItem = (index) => {
if (!isVOte && index >= 2) {
itemList.value.splice(index, 1);
} else if (isVOte && itemList.value.length > 0) {
itemList.value.splice(index, 1);
}
};
return {
itemList,
addItem,
removeItem,
};
}

84
src/views/voteboard/voteBoardList.vue
View File

@ -4,7 +4,6 @@
<div class="mt-8">
<!-- 투표 작성 -->
<router-link to="/voteboard/write"><WriteBtn /></router-link>
<!-- 내가한 투표 보기 -->
<div class="d-flex align-items-center">
<div class="form-check me-3">
@ -14,50 +13,87 @@
<!-- 투표마감/투표중 셀렉트 -->
<FormSelect class="col-3" name="cate" :isLabel="false" title="투표상태" :data="categoryList" @update:data="category = $event" />
</div>
<!-- <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event" :is-alert="true" />
<button type="button" class="btn btn-primary ms-1" @click="registerContent"><i class="bx bx-check"></i></button> -->
<!-- 투표리스트 -->
<vote-list />
<vote-list
:data="voteListCardData"
@addContents="addContents"
@checkedNames="checkedNames"/>
</div>
</div>
<!-- <div class="mt-8">
<pagination />
</div> -->
<!-- 페이지네이션 -->
<div class="row g-3">
<div class="mt-8">
<Pagination
v-if="PageData.pages"
v-bind="PageData"
@update:currentPage="handlePageChange"
/>
</div>
</div>
</div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
// import Pagination from '@/components/pagination/Pagination.vue';
import Pagination from '@c/pagination/Pagination.vue';
import router from '@/router';
import FormSelect from '@c/input/FormSelect.vue';
import { useToastStore } from '@s/toastStore';
import QEditor from '@c/editor/QEditor.vue';
import $api from '@api';
import BoardCard from '@c/list/BoardCard.vue';
import Quill from 'quill';
import WriteBtn from '@c/button/WriteBtn.vue';
import voteList from '@c/voteboard/voteCardList.vue';
const toastStore = useToastStore();
const category = ref('0');
const categoryList = ['전체','투표마감', '투표중'];
const boardList = ref([]);
const PageData = ref([]);
const voteListCardData = ref([]);
const titleAlert = ref(false);
const addContent = ref('');
onMounted(()=>{
getBoardList();
})
const getBoardList = () =>{
$api.get('worddict/getWordList').then((res)=>{
boardList.value = res.data.data.data;
})
const currentPage = ref(1);
onMounted(async () => {
getvoteList();
});
//투표목록
const getvoteList = async () => {
console.log('pagee',currentPage.value)
const response = await $api.get('vote/getVoteList',{
params: { page: currentPage.value }
});
if (response.data.status === "OK") {
PageData.value = response.data.data;
voteListCardData.value = response.data.data.list;
}
};
//투표항목추가
const addContents = (itemList, voteId) =>{
$api.post('vote/insertWord',{
itemList :itemList
,voteId :voteId
}).then((res)=>{
if(res.data.status === 'OK'){
toastStore.onToast('항목이 등록되었습니다.', 's');
getvoteList();
}
})
}
//투표하기
const checkedNames = (numList) =>{
$api.post('vote/insertCheckedNums',{
checkedList :numList
,votenum : numList[0].LOCVOTSEQ
}).then((res)=>{
if(res.data.status === 'OK'){
toastStore.onToast('투표가 완료되었습니다.', 's');
getvoteList();
}
})
}
// 페이지 변경
const handlePageChange = async (page) => {
currentPage.value=page;
await getvoteList();
};
</script>
<style></style>

207
src/views/voteboard/voteboardWrite.vue
View File

@ -1,39 +1,194 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<div class="card mb-6">
<div class="card-body">
<div class="user-list-container">
<ul class="timeline mb-1">
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-2">
<h6 class="mb-0">투표 인원</h6>
</div>
<UserList @user-list-update="handleUserListUpdate" />
<div class="container-xxl flex-grow-1 container-p-y">
<div class="card mb-6">
<div class="card-body">
<div class="user-list-container">
<ul class="timeline mb-1">
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-2">
<h6 class="mb-0">투표 인원</h6>
</div>
<UserList @userListInfo="userSet" @user-list-update="handleUserListUpdate" class="mb-3" />
<div v-if="UserListAlert" class="red">2명이상 선택해주세요 </div>
<form-input
title="제목"
name="title"
:is-essential="true"
:is-alert="titleAlert"
v-model="title"
/>
<form-input
title="종료날짜"
name="endDate"
type="date"
:is-essential="true"
:is-alert="endDateAlert"
v-model="endDate"
/>
<!-- 항목 입력 반복 -->
<div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-center mb-2 position-relative">
<form-input
class="flex-grow-1 me-2"
:title="'항목 ' + (index + 1)"
:name="'content' + index"
:is-essential="index < 2"
:is-alert="contentAlerts[index]"
v-model="item.content"
/>
<link-input v-model="item.url" />
<delete-btn @click="removeItem(index)" :disabled="index < 2" class="ms-2" />
</div>
<plus-btn @click="addItem" :disabled="itemList.length >= 10" class="mb-3" />
<div>
<label class="list-group-item">
<input
class="form-check-input me-1"
type="checkbox"
id="addvoteitem"
v-model="addvoteitem"
/>
항목 추가여부
</label>
<label class="list-group-item">
<input
class="form-check-input me-1"
type="checkbox"
id="addvotemulti"
v-model="addvotemulti"
/>
다중투표 허용여부
</label>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="mb-4 d-flex justify-content-end">
<button type="button" class="btn btn-info" @click="goList">
<i class="bx bx-left-arrow-alt"></i>
</button>
<button type="button" class="btn btn-primary ms-1" @click="saveValid">
<i class="bx bx-check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { ref, toRaw } from "vue";
import UserList from "@c/user/UserList.vue";
import formInput from "@c/input/FormInput.vue";
import { useToastStore } from "@s/toastStore";
import PlusBtn from "@c/button/PlusBtn.vue";
import DeleteBtn from "@c/button/DeleteBtn.vue";
import $api from "@api";
import router from "@/router";
import LinkInput from "@/components/voteboard/voteLinkInput.vue";
import { voteCommon } from '@s/voteCommon';
const activeUsers = ref([]); // 활성화된 사용자 목록
const disabledUsers = ref([]); // 비활성화된 사용자 목록
const toastStore = useToastStore();
const activeUserList = ref([]);
const disabledUsers = ref([]);
const titleAlert = ref(false);
const endDateAlert = ref(false);
const contentAlerts = ref([false, false]);
const UserListAlert = ref(false);
const title = ref("");
const endDate = ref("");
const { itemList, addItem, removeItem } = voteCommon();
// UserList에서 받은 데이터를 처리
const handleUserListUpdate = ({ activeUsers, disabledUsers }) => {
activeUsers.value = activeUsers;
disabledUsers.value = disabledUsers;
console.log('활성화목록>>',activeUsers)
console.log('비활성목록>>',disabledUsers)
const userListTotal = ref(0);
const addvoteitem = ref(false);
const addvotemulti= ref(false);
const userSet = ({ userList, userTotal }) => {
activeUserList.value = userList;
userListTotal.value = userTotal;
};
const handleUserListUpdate = ({ activeUsers, disabledUsers: updatedDisabledUsers }) => {
activeUserList.value = activeUsers;
disabledUsers.value = updatedDisabledUsers;
userListTotal.value = activeUsers.length;
};
const saveValid = () => {
let valid = true;
if (title.value === '') {
titleAlert.value = true;
valid = false;
} else {
titleAlert.value = false;
}
if (endDate.value === '') {
endDateAlert.value = true;
valid = false;
} else {
endDateAlert.value = false;
}
if (itemList.value[0].content === '') {
contentAlerts.value[0] = true;
valid = false;
} else {
contentAlerts.value[0] = false;
}
if (itemList.value[1].content === '') {
contentAlerts.value[1] = true;
valid = false;
} else {
contentAlerts.value[1] = false;
}
if (activeUserList.value.length < 2) {
UserListAlert.value = true;
valid = false;
} else {
UserListAlert.value = false;
}
if (valid) {
saveVote();
}
};
const saveVote = () => {
console.log('activeUserList',activeUserList.value)
const unwrappedUserList = toRaw(activeUserList.value);
const listId = unwrappedUserList.map(item => ({
id: item.MEMBERSEQ,
}));
$api.post('vote/insertWord',{
addvoteIs :addvoteitem ? '1' :'0'
,votemMltiIs :addvotemulti ? '1' :'0'
,title :title.value
,endDate :endDate.value
,itemList :itemList.value
,activeUserList :listId
}).then((res)=>{
if(res.data.status == 'OK'){
toastStore.onToast('투표가 등록되었습니다.', 's');
goList();
}
})
};
const goList = () => {
router.push('/voteboard');
};
</script>
<style scoped>
.item-input {
max-width: 200px;
}
</style>