용어집 수정정
This commit is contained in:
parent
708309f6a0
commit
e5f821e15a
@ -1,56 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
|
||||
<li v-for="char in koreanChars" :key="char" class="mt-2 me-2">
|
||||
<ul class="d-flex p-0 mb-0">
|
||||
<li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
:class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="selectAlphabet(char)"
|
||||
class="alphabet-btn"
|
||||
:class="{ active: selectedAl === char.CHARACTER_ }"
|
||||
@click="selectAlphabet(char.CHARACTER_)"
|
||||
>
|
||||
{{ char }}
|
||||
{{ char.CHARACTER_ }} ({{ char.COUNT }})
|
||||
</button>
|
||||
<span v-if="index !== koreanChars.length - 1" class="divider">|</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
|
||||
<li v-for="char in englishChars" :key="char" class="mt-2 me-2">
|
||||
<ul class="d-flex p-0 mb-0">
|
||||
<li v-for="(char, index) in englishChars" :key="char.CHARACTER_" class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
:class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="selectAlphabet(char)"
|
||||
class="alphabet-btn"
|
||||
:class="{ active: selectedAl === char.CHARACTER_ }"
|
||||
@click="selectAlphabet(char.CHARACTER_)"
|
||||
>
|
||||
{{ char }}
|
||||
{{ char.CHARACTER_ }} ({{ char.COUNT }})
|
||||
</button>
|
||||
<span v-if="index !== englishChars.length - 1" class="divider">|</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
|
||||
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'];
|
||||
const props = defineProps({
|
||||
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 selectAlphabet = (alphabet) => {
|
||||
selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
|
||||
emit('update:data',selectedAlphabet.value);
|
||||
emit('update:data', selectedAlphabet.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
min-width: 56px;
|
||||
.alphabet-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
width: 70%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.alphabet-list {
|
||||
overflow-x: scroll;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
.alphabet-btn:hover {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.alphabet-btn.active {
|
||||
color: #0d6efd;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.divider {
|
||||
color: #bbb;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,16 +11,17 @@
|
||||
@change="onChange"
|
||||
:value="formValue"
|
||||
:disabled="isDisabled"
|
||||
:isEssential="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2 btn-margin" v-if="!isDisabled">
|
||||
<PlusBtn @click="toggleInput"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row" v-if="showInput">
|
||||
<div class="col-10">
|
||||
<FormInput
|
||||
<FormInput
|
||||
ref="categoryInputRef"
|
||||
title="카테고리 입력"
|
||||
name="카테고리"
|
||||
@ -78,13 +79,14 @@ const addCategoryAlert = ref(false);
|
||||
const selectCategory = ref('');
|
||||
|
||||
// 제목 상태
|
||||
const computedTitle = computed(() =>
|
||||
const computedTitle = computed(() =>
|
||||
wordTitle.value === '' ? props.titleValue : wordTitle.value
|
||||
);
|
||||
|
||||
// 카테고리 상태
|
||||
const selectedCategory = computed(() =>
|
||||
const selectedCategory = computed(() =>
|
||||
selectCategory.value === '' ? props.formValue : selectCategory.value
|
||||
|
||||
);
|
||||
|
||||
// 카테고리 입력 중복 ref
|
||||
@ -106,7 +108,7 @@ const props = defineProps({
|
||||
},contentValue : {
|
||||
type:String,
|
||||
},
|
||||
isDisabled: {
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
@ -132,7 +134,7 @@ const saveWord = () => {
|
||||
if(computedTitle.value != undefined){
|
||||
computedTitleTrim = computedTitle.value.trim()
|
||||
}
|
||||
|
||||
|
||||
// 용어 체크
|
||||
if(computedTitleTrim == undefined || computedTitleTrim == ''){
|
||||
wordTitleAlert.value = true;
|
||||
@ -144,7 +146,7 @@ const saveWord = () => {
|
||||
// 내용 확인
|
||||
let inserts = [];
|
||||
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
|
||||
);
|
||||
}
|
||||
@ -154,16 +156,15 @@ const saveWord = () => {
|
||||
wordContentAlert.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const wordData = {
|
||||
id: props.NumValue || null,
|
||||
title: computedTitle.value,
|
||||
category: selectedCategory.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 existingCategory = props.dataList.find(item => item.label === valueTrim);
|
||||
|
||||
|
||||
// 카테고리 입력시 공백
|
||||
if(valueTrim == ''){
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
|
||||
// 공백시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
@ -185,10 +186,10 @@ const handleCategoryFocusout = (value) => {
|
||||
}
|
||||
}, 0);
|
||||
|
||||
|
||||
|
||||
}else if (existingCategory) {
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
|
||||
// 중복시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
@ -215,4 +216,4 @@ const handleCategoryFocusout = (value) => {
|
||||
margin-top: 2.5rem
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,42 +1,31 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="card p-5">
|
||||
<div >
|
||||
<!-- 타이틀, 검색 -->
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="mb-0 title">용어집</h5>
|
||||
<h5 class="mb-0 title"></h5>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<SearchBar @update:data="search"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 단어 갯수, 작성하기 -->
|
||||
<div class="mt-4">
|
||||
<WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
|
||||
</div>
|
||||
|
||||
<!-- ㄱ ㄴ ㄷ ㄹ -->
|
||||
<div>
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" />
|
||||
</div>
|
||||
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet"/>
|
||||
<!-- 카테고리 -->
|
||||
<div v-if="cateList.length" class="mt-5">
|
||||
<div v-if="cateList.length">
|
||||
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/>
|
||||
</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"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 -->
|
||||
<div class="mt-10">
|
||||
<div >
|
||||
<!-- 로딩 중일 때 -->
|
||||
<div v-if="loading">로딩 중...</div>
|
||||
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
@ -51,10 +40,8 @@
|
||||
@updateChecked="updateCheckedItems"
|
||||
/>
|
||||
</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>
|
||||
@ -116,9 +103,13 @@
|
||||
// 검색
|
||||
const searchText = ref('');
|
||||
|
||||
//검색 정렬
|
||||
const indexCategory = ref([]);
|
||||
|
||||
// 데이터 로드
|
||||
onMounted(() => {
|
||||
getwordList();
|
||||
//getwordList();
|
||||
getIndex();
|
||||
});
|
||||
|
||||
//용어 목록
|
||||
@ -144,6 +135,14 @@
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//정렬 목록
|
||||
const getIndex = () => {
|
||||
axios.get('worddict/getIndexCategory').then(res=>{
|
||||
if(res.data.status ="OK"){
|
||||
indexCategory.value = res.data.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 검색
|
||||
const search = (e) => {
|
||||
@ -162,33 +161,29 @@
|
||||
selectedCategory.value = category;
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
}
|
||||
|
||||
|
||||
// 용어집 등록
|
||||
const addWord = (wordData, data) => {
|
||||
let category = null;
|
||||
let newCodName = '';
|
||||
// 카테고리 체크
|
||||
const existingCategory = cateList.value.find(item => item.label === data.trim());
|
||||
|
||||
if (existingCategory) {
|
||||
//카테고리 있을시 그냥 저장
|
||||
category = existingCategory.label == '' ? wordData.category : existingCategory.value;
|
||||
} else {
|
||||
//카테고리 없을시 카테고리 와 용어 둘다 저장
|
||||
console.log('data',data)
|
||||
if(typeof(data) == 'number'){
|
||||
category = data;
|
||||
newCodName = '';
|
||||
}else{
|
||||
const lastCategory = cateList.value[cateList.value.length - 1];
|
||||
category = lastCategory ? lastCategory.value + 1 : 600101;
|
||||
|
||||
newCodName = data;
|
||||
}
|
||||
sendWordRequest(category, wordData, data, !existingCategory);
|
||||
sendWordRequest(category, wordData, newCodName);
|
||||
};
|
||||
|
||||
const sendWordRequest = (category, wordData, data, isNewCategory) => {
|
||||
const sendWordRequest = (category, wordData, data) => {
|
||||
const payload = {
|
||||
WRDDICCAT: category,
|
||||
WRDDICTTL: wordData.title,
|
||||
WRDDICCON: $common.deltaAsJson(wordData.content),
|
||||
};
|
||||
|
||||
if (isNewCategory) {
|
||||
payload.CMNCODNAM = data;
|
||||
axios.post('worddict/insertWord', payload).then(res => {
|
||||
if (res.data.status === 'OK') {
|
||||
@ -198,22 +193,14 @@
|
||||
writeButton.value.resetButton();
|
||||
}
|
||||
getwordList();
|
||||
const newCategory = { label: data, value: category };
|
||||
cateList.value = [newCategory, ...cateList.value];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
axios.post('worddict/insertWord', payload).then(res => {
|
||||
if (res.data.status === 'OK') {
|
||||
toastStore.onToast('용어가 등록 되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
if (writeButton.value) {
|
||||
writeButton.value.resetButton();
|
||||
getIndex();
|
||||
if(res.data.data == '2'){
|
||||
const newCategory = { label: data, value: category };
|
||||
cateList.value = [...cateList.value,newCategory];
|
||||
}
|
||||
getwordList();
|
||||
selectedAlphabet.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user