134 lines
4.5 KiB
Vue
134 lines
4.5 KiB
Vue
<template>
|
|
<div class="card-text">
|
|
<!-- 투표리스트 -->
|
|
<div v-for="(item, index) in data" :key="index" class="mt-3">
|
|
<vote-card-check-list
|
|
:data="item"
|
|
:multiIs = voteInfo.LOCVOTMUL
|
|
:selectedValues="checkedNames"
|
|
@update:selectedValues="updateCheckedNames"
|
|
/>
|
|
<div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1">
|
|
<div v-for="(item, index) in itemList" :key="index" class=" mt-2">
|
|
<form-input
|
|
:title="'항목 ' + (index + data.length + 1)"
|
|
:name="'content' + index"
|
|
:is-essential="false"
|
|
:is-alert="contentAlerts[index]"
|
|
v-model="item.content"
|
|
:is-btn="true"
|
|
@keyup="ValidHandler('content' + (index + 1))"
|
|
>
|
|
<template v-slot:append>
|
|
<delete-btn @click="removeItem(index)" />
|
|
</template>
|
|
</form-input>
|
|
<form-input
|
|
:title="'URL ' + (index + data.length + 1)"
|
|
:name="'url' + index"
|
|
v-model="item.url"
|
|
:is-essential="false"
|
|
class="mb-1"
|
|
:maxlength="maxLength"
|
|
/>
|
|
</div>
|
|
<div class="d-flex justify-content align-items-center mt-3">
|
|
<plus-btn @click="addItem" :disabled=" total >= 10" />
|
|
<button class="btn btn-primary btn-icon m-1" @click="addContentSave(item.LOCVOTSEQ ,index)" :disabled="isSaveDisabled">
|
|
<i class="bx bx-check"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<save-btn class="mt-2 ms-auto" @click="selectVote"/>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import $api from '@api';
|
|
import PlusBtn from '@c/button/PlusBtn.vue';
|
|
import SaveBtn from '@c/button/SaveBtn.vue'
|
|
import FormInput from '@c/input/FormInput.vue';
|
|
import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
|
|
import { computed, ref } from '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, false]);
|
|
const titleAlert = ref(false);
|
|
const title = ref('');
|
|
const rink = ref('');
|
|
const maxLength = ref(2000);
|
|
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() && !item.url.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,index) =>{
|
|
let valid = true;
|
|
const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');
|
|
|
|
itemList.value.forEach((item, index) => {
|
|
if (!item.content.trim() && item.url.trim()) {
|
|
contentAlerts.value[index] = true;
|
|
valid = false;
|
|
} else {
|
|
contentAlerts.value[index] = false;
|
|
}
|
|
});
|
|
|
|
if(valid){
|
|
emit('addContents',filteredItemList,voteId);
|
|
itemList.value = [{ content: "", url: "" }];
|
|
removeItem();
|
|
}
|
|
}
|
|
|
|
const ValidHandler = (field) => {
|
|
if (field.startsWith('content')) {
|
|
const index = parseInt(field.replace('content', '')) - 1;
|
|
if (!isNaN(index)) {
|
|
contentAlerts.value[index] = false;
|
|
}
|
|
}
|
|
};
|
|
|
|
const checkedNames = ref([]); // 선택된 값 저장
|
|
const updateCheckedNames = (newValues) => {
|
|
checkedNames.value = newValues;
|
|
};
|
|
const selectVote = () =>{
|
|
if(checkedNames.value != ''){
|
|
emit('checkedNames',checkedNames.value);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style >
|
|
|
|
</style>
|