148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<FormSelect
|
|
name="cate"
|
|
title="카테고리 선택"
|
|
:data="dataList"
|
|
:is-common="true"
|
|
@update:data="selectCategory = $event"
|
|
@change="onChange"
|
|
/>
|
|
</div>
|
|
<div class="col-2 btn-margin">
|
|
<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"/>
|
|
</div>
|
|
<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 class="dict-w">
|
|
<FormInput
|
|
title="용어"
|
|
type="text"
|
|
name="word"
|
|
:is-essential="true"
|
|
:is-alert="wordTitleAlert"
|
|
@update:modelValue="wordTitle = $event"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" />
|
|
<div class="text-end mt-5">
|
|
<button class="btn btn-primary" @click="saveWord">
|
|
<i class="bx bx-check"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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';
|
|
import PlusBtn from '../button/PlusBtn.vue';
|
|
|
|
const emit = defineEmits(['close','addCategory','addWord']);
|
|
|
|
//용어제목
|
|
const wordTitle = ref('');
|
|
const addCategory = ref('');
|
|
const content = ref('');
|
|
const imageUrls = ref([]);
|
|
|
|
//용어 Vaildation용
|
|
const wordTitleAlert = ref(false);
|
|
const wordContentAlert = ref(false);
|
|
const addCategoryAlert = ref(false);
|
|
|
|
//선택 카테고리
|
|
const selectCategory = ref('');
|
|
|
|
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 = () => {
|
|
showInput.value = !showInput.value;
|
|
};
|
|
|
|
// 카테고리 저장
|
|
const saveInput = () => {
|
|
if(addCategory.value == ''){
|
|
addCategoryAlert.value = true;
|
|
return;
|
|
}
|
|
// console.log('입력값 저장됨!',addCategory.value);
|
|
emit('addCategory', addCategory.value);
|
|
showInput.value = false;
|
|
};
|
|
|
|
const onChange = (newValue) => {
|
|
selectCategory.value = newValue.target.value;
|
|
};
|
|
|
|
//용어 등록
|
|
const saveWord = () => {
|
|
//validation
|
|
|
|
// 용어 체크
|
|
if(wordTitle.value == ''){
|
|
wordTitleAlert.value = true;
|
|
return;
|
|
}
|
|
|
|
// 내용 체크
|
|
if(content.value == ''){
|
|
wordContentAlert.value = true;
|
|
return;
|
|
}
|
|
|
|
const wordData = {
|
|
title: wordTitle.value,
|
|
category: selectCategory.value,
|
|
content: content.value,
|
|
};
|
|
|
|
emit('addWord', wordData);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dict-w {
|
|
width: 83%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.btn-margin {
|
|
margin-top: 2.5rem
|
|
}
|
|
}
|
|
</style> |