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-25 14:08:33 +09:00
parent fc59cc4e5a
commit 72c2865b0b
4 changed files with 161 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/input/FormInput.vue
View File

@ -14,10 +14,15 @@
:placeholder="title"
:disabled="disabled"
:min="min"
@focusout="$emit('focusout', modelValue)"
/>
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
{{ title }}을 확인해주세요.
</div>
<!-- 카테고리 중복 -->
<div class="invalid-feedback" :class="isCateAlert ? 'display-block' : ''">
카테고리 중복입니다.
</div>
</div>
</div>
</template>
@ -57,6 +62,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
isCateAlert : {
type :Boolean,
default: false,
},
isLabel : {
type: Boolean,
default: true,
@ -73,7 +82,7 @@ const props = defineProps({
});
// Emits 정의
const emits = defineEmits(['update:modelValue']);
const emits = defineEmits(['update:modelValue', 'focusout']);
// 로컬 상태로 사용하기 위한 `inputValue`
const inputValue = ref(props.modelValue);

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

@ -4,12 +4,12 @@
v-if="isWriteVisible"
@close="isWriteVisible = false"
:dataList="cateList"
@addCategory="addCategory"
@addWord="editWord"
:NumValue="item.WRDDICSEQ"
:formValue="item.WRDDICCAT"
:titleValue="item.WRDDICTTL"
:contentValue="item.WRDDICCON"
:isDisabled="userStore.user.role !== 'ROLE_ADMIN'"
/>
<div v-else>
@ -38,7 +38,7 @@
:style="{ borderColor: item.author.color}"/>
</div>
<div>
<p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
<p class="mb-0 small fw-medium">{{ formattedDate(item.author.createdAt) }}</p>
</div>
</div>
</div>
@ -55,13 +55,13 @@
:style="{ borderColor: item.lastEditor.color}"/>
</div>
<div>
<p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
<p class="mb-0 small fw-medium">{{ formattedDate(item.lastEditor.updatedAt) }}</p>
</div>
</div>
</div>
</div>
<div class="edit-btn">
<div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
<EditBtn @click="toggleWriteVisible" />
</div>
</li>
@ -74,6 +74,7 @@ import { ref, toRefs, getCurrentInstance, } from 'vue';
import EditBtn from '@/components/button/EditBtn.vue';
import $api from '@api';
import DictWrite from './DictWrite.vue';
import { formattedDate } from "@/common/formattedDate";
import { useUserInfoStore } from '@s/useUserInfoStore';
@ -98,9 +99,9 @@ const props = defineProps({
});
// 카테고리
const localCateList = ref([...props.cateList]);
// const localCateList = ref([...props.cateList]);
// 선택 카테고리
const selectedCategory = ref('');
// const selectedCategory = ref('');
// cateList emit
const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
@ -115,41 +116,41 @@ const toggleWriteVisible = () => {
};
//카테고리 등록 수정
const addCategory = (data) => {
try {
const lastCategory = localCateList.value.length > 0
? localCateList.value[localCateList.value.length - 1]
: null;
const newValue = lastCategory ? lastCategory.value + 1 : 600101;
// const addCategory = (data) => {
// try {
// const lastCategory = localCateList.value.length > 0
// ? localCateList.value[localCateList.value.length - 1]
// : null;
// const newValue = lastCategory ? lastCategory.value + 1 : 600101;
// console.log('lastCategory', lastCategory);
// console.log('newValue', newValue);
// // // console.log('lastCategory', lastCategory);
// // // console.log('newValue', newValue);
axios.post('worddict/insertCategory', {
CMNCODNAM: data
}).then(res => {
if(res.data.data === 1){
toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
const newCategory = { label: data, value: newValue };
localCateList.value = [newCategory, ...localCateList.value];
selectedCategory.value = newCategory.value;
// axios.post('worddict/insertCategory', {
// CMNCODNAM: data
// }).then(res => {
// if(res.data.data === 1){
// toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
// const newCategory = { label: data, value: newValue };
// localCateList.value = [newCategory, ...localCateList.value];
// selectedCategory.value = newCategory.value;
// console.log('newCategory', newCategory);
// console.log('localCateList.value', localCateList.value);
// console.log('selectedCategory.value', selectedCategory.value);
// // // console.log('newCategory', newCategory);
// // // console.log('localCateList.value', localCateList.value);
// // // console.log('selectedCategory.value', selectedCategory.value);
// 부모에게 전달
emit('update:cateList', localCateList.value);
} else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
toastStore.onToast(res.data.message, 'e');
}
}).catch(err => {
console.error('카테고리 추가 중 오류:', err);
});
} catch (err) {
console.error('카테고리 추가 함수 오류:', err);
}
}
// // // 부모에게 전달
// emit('update:cateList', localCateList.value);
// } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
// toastStore.onToast(res.data.message, 'e');
// }
// }).catch(err => {
// console.error('카테고리 추가 중 오류:', err);
// });
// } catch (err) {
// console.error('카테고리 추가 함수 오류:', err);
// }
// }
// 용어집 수정
@ -191,7 +192,7 @@ const editWord = (data) => {
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
// 날짜 포맷
const formatDate = (dateString) => new Date(dateString).toLocaleString();
// const formatDate = (dateString) => new Date(dateString).toLocaleString();
// 프로필 이미지
const defaultProfile = "/img/icons/icon.png";

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

@ -13,20 +13,27 @@
:disabled="isDisabled"
/>
</div>
<div class="col-2 btn-margin">
<PlusBtn v-if="userStore.user.role == 'ROLE_ADMIN'" @click="toggleInput"/>
<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 title="카테고리 입력" name="카테고리" @update:modelValue="addCategory = $event" :is-alert="addCategoryAlert"/>
<FormInput
ref="categoryInputRef"
title="카테고리 입력"
name="카테고리"
@update:modelValue="addCategory = $event"
:is-cate-alert="addCategoryAlert"
@focusout="handleCategoryFocusout(addCategory)"
/>
</div>
<div class="col-2 btn-margin">
<!-- <div class="col-2 btn-margin">
<button class="btn btn-primary btn-icon" @click="saveInput">
<i class="bx bx-check"></i>
</button>
</div>
</div> -->
</div>
</div>
<div class="dict-w">
@ -58,13 +65,13 @@ import QEditor from '@/components/editor/QEditor.vue';
import FormInput from '@/components/input/FormInput.vue';
import FormSelect from '@/components/input/FormSelect.vue';
import PlusBtn from '../button/PlusBtn.vue';
import { useUserInfoStore } from '@s/useUserInfoStore';
// import { useUserInfoStore } from '@s/useUserInfoStore';
// 유저 구분
const userStore = useUserInfoStore();
// const userStore = useUserInfoStore();
// 유저 상태에 따른 disabled
const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
// const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
const emit = defineEmits(['close','addCategory','addWord']);
@ -83,15 +90,18 @@ 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
const categoryInputRef = ref(null);
const props = defineProps({
dataList: {
type: Array,
@ -106,7 +116,11 @@ const props = defineProps({
titleValue : {
type:String,
},contentValue : {
type:String
type:String,
},
isDisabled: {
type: Boolean,
default: false
}
});
@ -120,17 +134,17 @@ const toggleInput = () => {
// 카테고리 저장
const saveInput = () => {
if(addCategory.value == ''){
addCategoryAlert.value = true;
return;
}else {
addCategoryAlert.value = false;
}
// console.log('입력값 저장됨!',addCategory.value);
emit('addCategory', addCategory.value);
// showInput.value = false;
};
// const saveInput = () => {
// if(addCategory.value == ''){
// addCategoryAlert.value = true;
// return;
// }else {
// addCategoryAlert.value = false;
// }
// console.log('입력값 저장됨!',addCategory.value);
// emit('addCategory', addCategory.value);
// showInput.value = false;
// };
const onChange = (newValue) => {
selectCategory.value = newValue.target.value;
@ -138,18 +152,12 @@ const onChange = (newValue) => {
//용어 등록
const saveWord = () => {
// if(addCategory.value == ''){
// addCategoryAlert.value = true;
// return;
// }else {
// addCategoryAlert.value = false;
// }
//validation
console.log('computedTitle.value', computedTitle.value);
// 용어 체크
if(computedTitle.value == '' || computedTitle.length == 0){
if(computedTitle.value == undefined){
wordTitleAlert.value = true;
return;
}
@ -166,8 +174,35 @@ const saveWord = () => {
category: selectedCategory.value,
content: content.value,
};
emit('addWord', wordData ,addCategory.value );
emit('addWord', wordData, addCategory.value);
}
// 카테고리 focusout 이벤트 핸들러 추가
const handleCategoryFocusout = (value) => {
const existingCategory = props.dataList.find(item => item.label === value);
// console.log('existingCategory', existingCategory);
if (existingCategory) {
// console.log('이미 존재하는 카테고리입니다:', value);
addCategoryAlert.value = true;
// 중복시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else {
addCategoryAlert.value = false;
}
};
</script>
<style scoped>
@ -180,4 +215,4 @@ const saveWord = () => {
margin-top: 2.5rem
}
}
</style>
</style>

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

@ -1,6 +1,5 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<!-- {{ userStore.user.role == 'ROLE_ADMIN' ? '관리자' : '일반인'}} -->
<div class="card p-5">
<!-- 타이틀, 검색 -->
<div class="row">
@ -30,7 +29,7 @@
<!-- 작성 -->
<div v-if="isWriteVisible" class="mt-5">
<DictWrite @close="isWriteVisible = false" :dataList="cateList" @addCategory="addCategory" @addWord="addWord"/>
<DictWrite @close="isWriteVisible = false" :dataList="cateList" @addWord="addWord"/>
</div>
</div>
@ -174,30 +173,34 @@
};
//카테고리 등록
const addCategory = (data) =>{
const lastCategory = cateList.value[cateList.value.length - 1];
const newValue = lastCategory ? lastCategory.value + 1 : 600101;
const newCategory = { label: data, value: newValue };
cateList.value = [newCategory, ...cateList.value];
selectedCategory.value = newCategory.value;
// axios.post('worddict/insertCategory',{
// CMNCODNAM: data
// }).then(res => {
// if(res.data.data == '1'){
// toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
// const newCategory = { label: data, value: newValue };
// const addCategory = (data) =>{
// const lastCategory = cateList.value[cateList.value.length - 1];
// const newValue = lastCategory ? lastCategory.value + 1 : 600101;
// const newCategory = { label: data, value: newValue };
// cateList.value = [newCategory, ...cateList.value];
// selectedCategory.value = newCategory.value;
// } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
// toastStore.onToast(res.data.message, 'e');
// }
// })
}
//// axios.post('worddict/insertCategory',{
//// CMNCODNAM: data
//// }).then(res => {
//// if(res.data.data == '1'){
//// toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
//// const newCategory = { label: data, value: newValue };
//// cateList.value = [newCategory, ...cateList.value];
//// selectedCategory.value = newCategory.value;
//// } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
//// toastStore.onToast(res.data.message, 'e');
//// }
//// })
// }
// 용어집 등록
const addWord = (wordData, data) => {
let category = null;
// 카테고리 체크
const existingCategory = cateList.value.find(item => item.label === data);
if (existingCategory) {
console.log('카테고리 중복');
//카테고리 있을시 그냥 저장
category = existingCategory.label == '' ? wordData.category : existingCategory.value;
} else {
@ -208,6 +211,7 @@
}
sendWordRequest(category, wordData, data, !existingCategory);
};
const sendWordRequest = (category, wordData, data, isNewCategory) => {
const payload = {
WRDDICCAT: category,
@ -216,17 +220,26 @@
};
if (isNewCategory) {
payload.CMNCODNAM = data; // 새로운 카테고리 추가 시 포함
payload.CMNCODNAM = data;
axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') {
toastStore.onToast('용어가 등록 되었습니다.', 's');
isWriteVisible.value = false;
getwordList();
const newCategory = { label: data, value: category }; // 여기서 data 사용
cateList.value = [newCategory, ...cateList.value];
}
});
} else {
axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') {
toastStore.onToast('용어가 등록 되었습니다.', 's');
isWriteVisible.value = false;
getwordList();
}
});
}
axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') {
toastStore.onToast('용어가 등록 되었습니다.', 's');
isWriteVisible.value = false;
getwordList();
//카테고리 리스트 다시 조회 해야야함
}
});
};
};
// 체크 상태 업데이트