용어집수정정
This commit is contained in:
parent
c51da7f56d
commit
4258881d4b
@ -19,9 +19,6 @@
|
||||
@focusout="$emit('focusout', modelValue)"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<div v-if="isBtn" class="ms-2">
|
||||
<slot name="append"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}을 확인해주세요.</div>
|
||||
<div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">카테고리 중복입니다.</div>
|
||||
|
||||
@ -10,6 +10,9 @@
|
||||
{{ isCommon ? item.label : item }}
|
||||
</option>
|
||||
</select>
|
||||
<div v-if="isBtn" class="ms-2">
|
||||
<slot name="append"></slot>
|
||||
</div>
|
||||
|
||||
<div v-if="isColor && selected"
|
||||
class="w-px-40 h-px-30"
|
||||
@ -70,6 +73,11 @@ const props = defineProps({
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
isBtn: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
},
|
||||
isCommon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
||||
@ -1,38 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<FormSelect
|
||||
name="cate"
|
||||
title="카테고리"
|
||||
:data="dataList"
|
||||
:is-common="true"
|
||||
@update:data="selectCategory = $event"
|
||||
@change="onChange"
|
||||
:value="formValue"
|
||||
:is-essential="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2" v-if="!isDisabled">
|
||||
<PlusBtn @click="toggleInput"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="showInput">
|
||||
<div class="col-10">
|
||||
<FormInput
|
||||
ref="categoryInputRef"
|
||||
title="새 카테고리"
|
||||
name="카테고리"
|
||||
@update:modelValue="addCategory = $event"
|
||||
:is-cate-alert="addCategoryAlert"
|
||||
@focusout="handleCategoryFocusout(addCategory)"
|
||||
/>
|
||||
</div>
|
||||
<FormSelect class="me-5"
|
||||
name="cate"
|
||||
title="카테고리"
|
||||
:data="dataList"
|
||||
:is-common="true"
|
||||
@update:data="selectCategory = $event"
|
||||
@change="onChange"
|
||||
:value="formValue"
|
||||
:is-essential="false"
|
||||
/>
|
||||
<div v-if="!isDisabled" class="add-btn">
|
||||
<PlusBtn @click="toggleInput"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dict-w">
|
||||
<FormInput
|
||||
|
||||
<div v-if="showInput">
|
||||
<FormInput class="me-5"
|
||||
ref="categoryInputRef"
|
||||
title="새 카테고리"
|
||||
name="새 카테고리"
|
||||
@update:modelValue="addCategory = $event"
|
||||
:is-cate-alert="addCategoryAlert"
|
||||
@focusout="handleCategoryFocusout(addCategory)"
|
||||
/>
|
||||
</div>
|
||||
<FormInput class="me-5"
|
||||
title="용어"
|
||||
type="text"
|
||||
name="word"
|
||||
@ -43,15 +36,14 @@
|
||||
:disabled="isDisabled"
|
||||
@keyup="ValidHandler('title')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<QEditor @keyup="ValidHandler('content')" @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" :initialData="contentValue"/>
|
||||
<div class="text-end mt-5">
|
||||
<button class="btn btn-primary" @click="saveWord">
|
||||
<i class="bx bx-check"></i>
|
||||
</button>
|
||||
<div>
|
||||
<QEditor class="" @keyup="ValidHandler('content')" @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" :initialData="contentValue"/>
|
||||
<div class="text-end mt-5">
|
||||
<button class="btn btn-primary" @click="saveWord">
|
||||
<i class="bx bx-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -188,36 +180,38 @@ const saveWord = () => {
|
||||
|
||||
// 카테고리 focusout 이벤트 핸들러 추가
|
||||
const handleCategoryFocusout = (value) => {
|
||||
|
||||
const valueTrim = value.trim();
|
||||
if(value){
|
||||
const existingCategory = props.dataList.find(item => item.label === valueTrim);
|
||||
|
||||
const existingCategory = props.dataList.find(item => item.label === valueTrim);
|
||||
// 카테고리 입력시 공백
|
||||
if(valueTrim == ''){
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
// 카테고리 입력시 공백
|
||||
if(valueTrim == ''){
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
// 공백시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
if (inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
// 공백시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
if (inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
|
||||
}else if (existingCategory) {
|
||||
addCategoryAlert.value = true;
|
||||
}else if (existingCategory) {
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
// 중복시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
if (inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
// 중복시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
if (inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
} else {
|
||||
addCategoryAlert.value = false;
|
||||
} else {
|
||||
addCategoryAlert.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -234,4 +228,9 @@ const handleCategoryFocusout = (value) => {
|
||||
margin-top: 2.5rem
|
||||
}
|
||||
}
|
||||
.add-btn {
|
||||
position: absolute;
|
||||
right: 0.7rem;
|
||||
top: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,12 +19,10 @@
|
||||
|
||||
<!-- 용어 리스트 컨텐츠 -->
|
||||
<div class="flex-grow-1">
|
||||
|
||||
<!-- 작성 -->
|
||||
<div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5">
|
||||
<div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5 mb-2">
|
||||
<DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 -->
|
||||
<div>
|
||||
<!-- 로딩 중일 때 -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user