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

용어집 입력 및 입력 수정 중

Browse Source
This commit is contained in:
Dang 2025-02-04 15:59:28 +09:00
parent 6f78a1e921
commit 69b5216963
5 changed files with 86 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/category/CategoryBtn.vue
View File

@ -9,17 +9,17 @@
type="button"
class="btn"
:class="{
'btn-outline-primary': category !== selectedCategory,
'btn-primary': category === selectedCategory
}"
@click="selectCategory(category)"
'btn-outline-primary': category.CMNCODVAL !== selectedCategory,
'btn-primary': category.CMNCODVAL === selectedCategory
}"
@click="selectCategory(category.CMNCODVAL)"
>{{ category.CMNCODNAM }}</button>
</li>
</ul>
</template>
<script setup>
import { defineProps, ref } from 'vue';
import { defineProps, ref } from 'vue';
// lists prop 정의
const props = defineProps({
@ -31,9 +31,10 @@ const props = defineProps({
// 카테고리 선택
const selectedCategory = ref(null);
const selectCategory = (category) => {
selectedCategory.value = category;
const emit = defineEmits();
const selectCategory = (cate) => {
selectedCategory.value = selectedCategory.value === cate ? null : cate;
emit('update:data', selectedCategory.value);
};
</script>
@ -42,8 +43,4 @@ const selectCategory = (category) => {
.cate-list {
margin-left: -0.25rem;
}
@media screen and (max-width:450px) {
}
</style>

2
src/components/wordDict/DictAlphabetFilter.vue
View File

@ -49,7 +49,7 @@ const selectAlphabet = (alphabet) => {
@media (max-width: 768px) {
.alphabet-list {
overflow: scroll;
overflow-x: scroll;
flex-wrap: nowrap !important;
}
}

2
src/components/wordDict/DictCard.vue
View File

@ -2,7 +2,7 @@
<li class="mt-5 card p-5">
<div class="d-flex align-items-center">
<div class="w-100 d-flex align-items-center">
<span class="btn btn-primary">{{ item.category }}</span>
<span class="btn btn-primary pe-none">{{ item.category }}</span>
<strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
</div>
<EditBtn />

46
src/components/wordDict/DictWrite.vue
View File

@ -1,11 +1,14 @@
<template>
<div>
<FormSelect/>
<button>쇼핑몰</button>
<button>저장</button>
<div class="d-flex">
<FormSelect :isLabel="false" :data="formattedDataList" :isCommon="true" name="용어집 카테고리" title="용어집 카테고리"/>
<button @click="toggleInput">+</button>
<div class="d-flex" v-if="showInput">
<FormInput :isLabel="false" title="용어집 입력" name="용어집 입력"/>
<button @click="saveInput">저장</button>
</div>
</div>
<div>
<FormInput/>
<FormInput title="내용" name="용어집 내용 입력"/>
</div>
<div>
<QEditor/>
@ -15,7 +18,40 @@
</template>
<script setup>
import { defineProps, computed, ref, defineEmits } from 'vue';
import QEditor from '@/components/editor/QEditor.vue';
import FormInput from '@/components/input/FormInput.vue';
import FormSelect from '@/components/input/FormSelect.vue';
const emit = defineEmits(['close']);
const props = defineProps({
dataList: {
type: Array,
default: () => []
}
});
// 데이터 포맷 수정
const formattedDataList = computed(() =>
props.dataList.map(item => ({
label: item.CMNCODNAM,
value: item.CMNCODVAL
}))
);
// 카테고리 입력 창
const showInput = ref(false);
// 카테고리 입력 토글
const toggleInput = () => {
howInput.value = !showInput.value;
};
// 카테고리 저장
const saveInput = () => {
console.log('입력값 저장됨!');
showInput.value = false;
};
</script>

86
src/views/wordDict/wordDict.vue
View File

@ -25,12 +25,12 @@
<!-- 카테고리 -->
<div v-if="cateList.length" class="mt-5">
<CategoryBtn :lists="cateList" />
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/>
</div>
<!-- 작성 -->
<div v-if="isWriteVisible" class="mt-5">
<DictWrite @close="isWriteVisible = false" />
<DictWrite @close="isWriteVisible = false" :dataList="cateList"/>
</div>
</div>
@ -50,16 +50,9 @@
:item="item"
/>
</ul>
<!-- <ul v-if="wordList.length > 0" class="px-0 list-unstyled">
<DictCard
v-for="item in wordList"
:key="item.WRDDICSEQ"
:item="item"
/>
</ul> -->
<!-- 데이터가 없을 때 -->
<div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
<div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
</div>
@ -84,12 +77,17 @@
// 용어집
const wordList = ref([]);
//용어집 총개수
const total = ref(0);
// 카테고리
const cateList = ref([]);
const selectedCategory = ref('');
//선택된 알파벳
const selectedAlphabet = ref('');
// 검색
const searchText = ref('');
@ -98,77 +96,61 @@
// 데이터 로드
onMounted(() => {
getwordList(); //용어목록조회
getwordCategory(); //카테고리목록조회
getwordList();
getwordCategory();
});
//용어 목록
const getwordList = (searchKeyword='',indexKeyword='') => {
const getwordList = (searchKeyword='', indexKeyword='', category='') => {
axios.get('worddict/getWordList',{
//목록조회시 파라미터 전달
params: { searchKeyword: searchKeyword
,indexKeyword:indexKeyword
params: {
searchKeyword : searchKeyword,
indexKeyword :indexKeyword,
category : category
}
})
.then(res => {
wordList.value = res.data.data.data; // 용어 목록 저장
total.value = res.data.data.total; // 총 개수 저장
// 용어 목록 저장
wordList.value = res.data.data.data;
// 총 개수 저장
total.value = res.data.data.total;
loading.value = false;
})
.catch(err => {
console.error('데이터 로드 오류:', err);
error.value = '데이터를 가져오는 중 문제가 발생했습니다.';
loading.value = false; // 로딩 종료
loading.value = false;
});
};
// 카테고리 목록
const getwordCategory = () => {
axios.get('worddict/getWordCategory')
.then(res => {
cateList.value = res.data.data; // 카테고리 목록 저장
cateList.value = res.data.data;
})
.catch(err => {
console.error('카테고리 로드 오류:', err);
error.value = '카테고리 데이터를 가져오는 중 문제가 발생했습니다.';
});
};
const handleSelectedAlphabetChange = (newAlphabet) => {
selectedAlphabet.value = newAlphabet;
getwordList(searchText.value,selectedAlphabet.value);
};
// 검색
const search = (e) => {
searchText.value = e.trim();
getwordList(searchText.value,selectedAlphabet.value);
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
};
// 알파벳 선택
const handleSelectedAlphabetChange = (newAlphabet) => {
selectedAlphabet.value = newAlphabet;
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
};
// 용어집 및 카테고리 목록 통합 API 호출
// const fetchAllData = async () => {
// loading.value = true;
// error.value = '';
// try {
// // 용어집
// // const wordResponse = await axios.get('worddict/getWordList');
// //wordList.value = wordResponse.data.data.data;
// //console.log('용어집 데이터:', wordList.value);
// // 카테고리
// const categoryResponse = await axios.get('worddict/getWordCategory');
// cateList.value = categoryResponse.data.data;
// console.log('카테고리 데이터:', cateList.value);
// } catch (err) {
// error.value = '데이터를 가져오는 중 문제가 발생했습니다.';
// } finally {
// loading.value = false;
// }
// };
// 검색
// const filteredList = computed(() =>
// wordList.value.filter(item =>
// item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase())
// )
// );
// 카테고리 선택
const handleSelectedCategoryChange = (category) => {
selectedCategory.value = category;
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value)
}
// 작성 toggle
const toggleWriteForm = () => {
@ -190,4 +172,4 @@
margin-bottom: 0.5rem !important;
}
}
</style>
</style>