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:
khj0414 2025-03-06 15:29:19 +09:00
parent 708309f6a0
commit e5f821e15a
3 changed files with 109 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,56 +1,86 @@
<template> <template>
<div> <ul class="d-flex p-0 mb-0">
<ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0"> <li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
<li v-for="char in koreanChars" :key="char" class="mt-2 me-2">
<button <button
type="button" type="button"
class="btn" class="alphabet-btn"
:class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'" :class="{ active: selectedAl === char.CHARACTER_ }"
@click="selectAlphabet(char)" @click="selectAlphabet(char.CHARACTER_)"
> >
{{ char }} {{ char.CHARACTER_ }} ({{ char.COUNT }})
</button> </button>
<span v-if="index !== koreanChars.length - 1" class="divider">|</span>
</li> </li>
</ul> </ul>
<ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0"> <ul class="d-flex p-0 mb-0">
<li v-for="char in englishChars" :key="char" class="mt-2 me-2"> <li v-for="(char, index) in englishChars" :key="char.CHARACTER_" class="d-flex">
<button <button
type="button" type="button"
class="btn" class="alphabet-btn"
:class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'" :class="{ active: selectedAl === char.CHARACTER_ }"
@click="selectAlphabet(char)" @click="selectAlphabet(char.CHARACTER_)"
> >
{{ char }} {{ char.CHARACTER_ }} ({{ char.COUNT }})
</button> </button>
<span v-if="index !== englishChars.length - 1" class="divider">|</span>
</li> </li>
</ul> </ul>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref, computed } from 'vue';
const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ']; const props = defineProps({
const englishChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; indexCategory: {
type: Array,
required: true,
},
selectedAl: {
type: String,
default : '',
required: false,
},
});
const selectedAlphabet = ref(props.selectedAl);
const koreanChars = computed(() => {
return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
});
const englishChars = computed(() => {
return props.indexCategory.filter(char => /^[a-zA-Z]$/.test(char.CHARACTER_));
});
const selectedAlphabet = ref(null);
//emit정의
const emit = defineEmits(); const emit = defineEmits();
const selectAlphabet = (alphabet) => { const selectAlphabet = (alphabet) => {
selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet; selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
emit('update:data',selectedAlphabet.value); emit('update:data', selectedAlphabet.value);
}; };
</script> </script>
<style scoped> <style scoped>
.btn { .alphabet-btn {
min-width: 56px; background: none;
border: none;
font-size: 13px;
font-weight: bold;
color: #6c757d;
cursor: pointer;
width: 70%;
height: 40px;
} }
@media (max-width: 768px) { .alphabet-btn:hover {
.alphabet-list { color: #0d6efd;
overflow-x: scroll; }
flex-wrap: nowrap !important;
} .alphabet-btn.active {
color: #0d6efd;
text-decoration: underline;
}
.divider {
color: #bbb;
font-size: 14px;
font-weight: bold;
} }
</style> </style>

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

@ -11,16 +11,17 @@
@change="onChange" @change="onChange"
:value="formValue" :value="formValue"
:disabled="isDisabled" :disabled="isDisabled"
:isEssential="true"
/> />
</div> </div>
<div class="col-2 btn-margin" v-if="!isDisabled"> <div class="col-2 btn-margin" v-if="!isDisabled">
<PlusBtn @click="toggleInput"/> <PlusBtn @click="toggleInput"/>
</div> </div>
</div> </div>
<div class="row" v-if="showInput"> <div class="row" v-if="showInput">
<div class="col-10"> <div class="col-10">
<FormInput <FormInput
ref="categoryInputRef" ref="categoryInputRef"
title="카테고리 입력" title="카테고리 입력"
name="카테고리" name="카테고리"
@ -78,13 +79,14 @@ const addCategoryAlert = ref(false);
const selectCategory = ref(''); const selectCategory = ref('');
// 제목 상태 // 제목 상태
const computedTitle = computed(() => const computedTitle = computed(() =>
wordTitle.value === '' ? props.titleValue : wordTitle.value wordTitle.value === '' ? props.titleValue : wordTitle.value
); );
// 카테고리 상태 // 카테고리 상태
const selectedCategory = computed(() => const selectedCategory = computed(() =>
selectCategory.value === '' ? props.formValue : selectCategory.value selectCategory.value === '' ? props.formValue : selectCategory.value
); );
// 카테고리 입력 중복 ref // 카테고리 입력 중복 ref
@ -106,7 +108,7 @@ const props = defineProps({
},contentValue : { },contentValue : {
type:String, type:String,
}, },
isDisabled: { isDisabled: {
type: Boolean, type: Boolean,
default: false default: false
} }
@ -132,7 +134,7 @@ const saveWord = () => {
if(computedTitle.value != undefined){ if(computedTitle.value != undefined){
computedTitleTrim = computedTitle.value.trim() computedTitleTrim = computedTitle.value.trim()
} }
// 용어 체크 // 용어 체크
if(computedTitleTrim == undefined || computedTitleTrim == ''){ if(computedTitleTrim == undefined || computedTitleTrim == ''){
wordTitleAlert.value = true; wordTitleAlert.value = true;
@ -144,7 +146,7 @@ const saveWord = () => {
// 내용 확인 // 내용 확인
let inserts = []; let inserts = [];
if (inserts.length === 0 && content.value?.ops?.length > 0) { if (inserts.length === 0 && content.value?.ops?.length > 0) {
inserts = content.value.ops.map(op => inserts = content.value.ops.map(op =>
typeof op.insert === 'string' ? op.insert.trim() : op.insert typeof op.insert === 'string' ? op.insert.trim() : op.insert
); );
} }
@ -154,16 +156,15 @@ const saveWord = () => {
wordContentAlert.value = true; wordContentAlert.value = true;
return; return;
} }
const wordData = { const wordData = {
id: props.NumValue || null, id: props.NumValue || null,
title: computedTitle.value, title: computedTitle.value,
category: selectedCategory.value, category: selectedCategory.value,
content: content.value, content: content.value,
}; };
emit('addWord', wordData, addCategory.value === ''
emit('addWord', wordData, addCategory.value); ? (isNaN(selectedCategory.value) ? selectedCategory.value : Number(selectedCategory.value))
: addCategory.value);
} }
@ -172,11 +173,11 @@ const handleCategoryFocusout = (value) => {
const valueTrim = value.trim(); const valueTrim = value.trim();
const existingCategory = props.dataList.find(item => item.label === valueTrim); const existingCategory = props.dataList.find(item => item.label === valueTrim);
// 카테고리 입력시 공백 // 카테고리 입력시 공백
if(valueTrim == ''){ if(valueTrim == ''){
addCategoryAlert.value = true; addCategoryAlert.value = true;
// 공백시 강제 focus // 공백시 강제 focus
setTimeout(() => { setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input'); const inputElement = categoryInputRef.value?.$el?.querySelector('input');
@ -185,10 +186,10 @@ const handleCategoryFocusout = (value) => {
} }
}, 0); }, 0);
}else if (existingCategory) { }else if (existingCategory) {
addCategoryAlert.value = true; addCategoryAlert.value = true;
// 중복시 강제 focus // 중복시 강제 focus
setTimeout(() => { setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input'); const inputElement = categoryInputRef.value?.$el?.querySelector('input');
@ -215,4 +216,4 @@ const handleCategoryFocusout = (value) => {
margin-top: 2.5rem margin-top: 2.5rem
} }
} }
</style> </style>

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

@ -1,42 +1,31 @@
<template> <template>
<div class="container-xxl flex-grow-1 container-p-y"> <div class="container-xxl flex-grow-1 container-p-y">
<div class="card p-5"> <div >
<!-- 타이틀, 검색 --> <!-- 타이틀, 검색 -->
<div class="row"> <div class="row">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<h5 class="mb-0 title">용어집</h5> <h5 class="mb-0 title"></h5>
</div> </div>
<div class="col-12 col-md-6">
<SearchBar @update:data="search"/> <SearchBar @update:data="search"/>
</div>
</div> </div>
<!-- 단어 갯수, 작성하기 --> <!-- 단어 갯수, 작성하기 -->
<div class="mt-4">
<WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/> <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
</div>
<!-- ㄱ ㄴ ㄷ ㄹ --> <!-- ㄱ ㄴ ㄷ ㄹ -->
<div> <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet"/>
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" />
</div>
<!-- 카테고리 --> <!-- 카테고리 -->
<div v-if="cateList.length" class="mt-5"> <div v-if="cateList.length">
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/> <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/>
</div> </div>
<!-- 작성 --> <!-- 작성 -->
<div v-if="writeStore.isItemActive(999999)" class="mt-5"> <div v-if="writeStore.isItemActive(999999)" class="mt-5 card p-5">
<DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/> <DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
</div> </div>
</div> </div>
<!-- 용어 리스트 --> <!-- 용어 리스트 -->
<div class="mt-10"> <div >
<!-- 로딩 중일 때 --> <!-- 로딩 중일 때 -->
<div v-if="loading">로딩 중...</div> <div v-if="loading">로딩 중...</div>
<!-- 에러 메시지 --> <!-- 에러 메시지 -->
<div v-if="error" class="error">{{ error }}</div> <div v-if="error" class="error">{{ error }}</div>
@ -51,10 +40,8 @@
@updateChecked="updateCheckedItems" @updateChecked="updateCheckedItems"
/> />
</ul> </ul>
<!-- 데이터가 없을 때 --> <!-- 데이터가 없을 때 -->
<div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div> <div v-else-if="!loading && !error" class="card p-5 text-center mt-5">✏️ 용어를 선택/작성해 주세요 ✏️ </div>
</div> </div>
</div> </div>
@ -116,9 +103,13 @@
// 검색 // 검색
const searchText = ref(''); const searchText = ref('');
//검색 정렬
const indexCategory = ref([]);
// 데이터 로드 // 데이터 로드
onMounted(() => { onMounted(() => {
getwordList(); //getwordList();
getIndex();
}); });
//용어 목록 //용어 목록
@ -144,6 +135,14 @@
loading.value = false; loading.value = false;
}); });
}; };
//정렬 목록
const getIndex = () => {
axios.get('worddict/getIndexCategory').then(res=>{
if(res.data.status ="OK"){
indexCategory.value = res.data.data;
}
})
}
// 검색 // 검색
const search = (e) => { const search = (e) => {
@ -162,33 +161,29 @@
selectedCategory.value = category; selectedCategory.value = category;
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value); getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
} }
// 용어집 등록 // 용어집 등록
const addWord = (wordData, data) => { const addWord = (wordData, data) => {
let category = null; let category = null;
let newCodName = '';
// 카테고리 체크 // 카테고리 체크
const existingCategory = cateList.value.find(item => item.label === data.trim()); console.log('data',data)
if(typeof(data) == 'number'){
if (existingCategory) { category = data;
//카테고리 있을시 그냥 저장 newCodName = '';
category = existingCategory.label == '' ? wordData.category : existingCategory.value; }else{
} else {
//카테고리 없을시 카테고리 와 용어 둘다 저장
const lastCategory = cateList.value[cateList.value.length - 1]; const lastCategory = cateList.value[cateList.value.length - 1];
category = lastCategory ? lastCategory.value + 1 : 600101; category = lastCategory ? lastCategory.value + 1 : 600101;
newCodName = data;
} }
sendWordRequest(category, wordData, data, !existingCategory); sendWordRequest(category, wordData, newCodName);
}; };
const sendWordRequest = (category, wordData, data) => {
const sendWordRequest = (category, wordData, data, isNewCategory) => {
const payload = { const payload = {
WRDDICCAT: category, WRDDICCAT: category,
WRDDICTTL: wordData.title, WRDDICTTL: wordData.title,
WRDDICCON: $common.deltaAsJson(wordData.content), WRDDICCON: $common.deltaAsJson(wordData.content),
}; };
if (isNewCategory) {
payload.CMNCODNAM = data; payload.CMNCODNAM = data;
axios.post('worddict/insertWord', payload).then(res => { axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') { if (res.data.status === 'OK') {
@ -198,22 +193,14 @@
writeButton.value.resetButton(); writeButton.value.resetButton();
} }
getwordList(); getwordList();
const newCategory = { label: data, value: category }; getIndex();
cateList.value = [newCategory, ...cateList.value]; if(res.data.data == '2'){
} const newCategory = { label: data, value: category };
}); cateList.value = [...cateList.value,newCategory];
} else {
axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') {
toastStore.onToast('용어가 등록 되었습니다.', 's');
writeStore.closeAll();
if (writeButton.value) {
writeButton.value.resetButton();
} }
getwordList(); selectedAlphabet.value = '';
} }
}); });
}
}; };