용어집 에디터 이미지 매핑 및 삭제 로직 추가
This commit is contained in:
parent
52d520f5e4
commit
51793fcde3
@ -2,7 +2,7 @@
|
||||
<li class="card p-5 mb-2">
|
||||
<DictWrite
|
||||
v-if="writeStore.isItemActive(item.WRDDICSEQ)"
|
||||
@close="writeStore.closeAll();"
|
||||
@close="writeStore.closeAll()"
|
||||
:dataList="cateList"
|
||||
@addWord="editWord"
|
||||
:NumValue="item.WRDDICSEQ"
|
||||
@ -12,53 +12,48 @@
|
||||
:isDisabled="true"
|
||||
:showEditBtn="true"
|
||||
@toggleEdit="toggleEdit"
|
||||
/>
|
||||
@update:deleteImgIndexList="handleDeleteEditorImg"
|
||||
@update:uploadedImgList="handleUpdateEditorImg"
|
||||
/>
|
||||
<div v-else>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="btn btn-primary pe-none">{{ item.category }}</span>
|
||||
<strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
|
||||
</div>
|
||||
<EditBtn
|
||||
@click="toggleEdit"
|
||||
:isToggleEnabled="true"
|
||||
:isActive="writeStore.isItemActive(item.WRDDICSEQ)"
|
||||
/>
|
||||
<EditBtn @click="toggleEdit" :isToggleEnabled="true" :isActive="writeStore.isItemActive(item.WRDDICSEQ)" />
|
||||
</div>
|
||||
<p class="mt-5 dict-content-wrap" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
|
||||
<div class="d-flex align-items-start">
|
||||
<!-- 최초 작성자 -->
|
||||
<!-- 최초 작성자 -->
|
||||
<div class="d-flex flex-wrap align-items-center me-4">
|
||||
<div class="avatar avatar-sm me-2">
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.author.profileImage)"
|
||||
alt="최초 작성자"
|
||||
:style="{ borderColor: item.author.color }"
|
||||
@error="setDefaultImage"
|
||||
/>
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.author.profileImage)"
|
||||
alt="최초 작성자"
|
||||
:style="{ borderColor: item.author.color }"
|
||||
@error="setDefaultImage"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.author.createdAt) }}</p>
|
||||
<p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.author.createdAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 최근 작성자 (조건부) -->
|
||||
<div
|
||||
v-if="item.author.createdAt !== item.lastEditor.updatedAt"
|
||||
class="d-flex flex-wrap align-items-center"
|
||||
>
|
||||
<div v-if="item.author.createdAt !== item.lastEditor.updatedAt" class="d-flex flex-wrap align-items-center">
|
||||
<div class="avatar avatar-sm me-2">
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.lastEditor.profileImage)"
|
||||
alt="최근 작성자"
|
||||
:style="{ borderColor: item.lastEditor.color }"
|
||||
@error="setDefaultImage"
|
||||
/>
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.lastEditor.profileImage)"
|
||||
alt="최근 작성자"
|
||||
:style="{ borderColor: item.lastEditor.color }"
|
||||
@error="setDefaultImage"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.lastEditor.updatedAt) }}</p>
|
||||
<p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.lastEditor.updatedAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,115 +62,137 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from "@api";
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
import { getCurrentInstance, nextTick, ref } from 'vue';
|
||||
import EditBtn from '@/components/button/EditBtn.vue';
|
||||
import $api from '@api';
|
||||
import DictWrite from './DictWrite.vue';
|
||||
import { useUserInfoStore } from '@s/useUserInfoStore';
|
||||
import { useWriteVisibleStore } from '@s/writeVisible';
|
||||
import axios from '@api';
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
import { getCurrentInstance, nextTick, ref } from 'vue';
|
||||
import EditBtn from '@/components/button/EditBtn.vue';
|
||||
import $api from '@api';
|
||||
import DictWrite from './DictWrite.vue';
|
||||
import { useUserInfoStore } from '@s/useUserInfoStore';
|
||||
import { useWriteVisibleStore } from '@s/writeVisible';
|
||||
|
||||
const writeStore = useWriteVisibleStore();
|
||||
const writeButton = ref(null);
|
||||
const writeStore = useWriteVisibleStore();
|
||||
const writeButton = ref(null);
|
||||
const editorDeleteImgList = ref([]);
|
||||
const editorUploadedImgList = ref([]);
|
||||
|
||||
// 유저 구분
|
||||
const userStore = useUserInfoStore();
|
||||
// 유저 구분
|
||||
const userStore = useUserInfoStore();
|
||||
|
||||
const toastStore = useToastStore();
|
||||
const toastStore = useToastStore();
|
||||
|
||||
const { appContext } = getCurrentInstance();
|
||||
const $common = appContext.config.globalProperties.$common;
|
||||
const { appContext } = getCurrentInstance();
|
||||
const $common = appContext.config.globalProperties.$common;
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
cateList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
}
|
||||
});
|
||||
|
||||
// cateList emit
|
||||
const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
|
||||
|
||||
|
||||
// 용어집 수정
|
||||
const editWord = (data) => {
|
||||
|
||||
if (!data.id) {
|
||||
console.error('❌ 수정할 데이터의 ID가 없습니다.');
|
||||
toastStore.onToast('수정할 용어의 ID가 필요합니다.', 'e');
|
||||
return;
|
||||
}
|
||||
|
||||
axios.patch('worddict/updateWord', {
|
||||
WRDDICSEQ: data.id,
|
||||
WRDDICCAT: data.category,
|
||||
WRDDICTTL: data.title,
|
||||
WRDDICCON: $common.deltaAsJson(data.content),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.data === 1) {
|
||||
toastStore.onToast('용어가 수정되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
if (writeButton.value) {
|
||||
writeButton.value.resetButton();
|
||||
}
|
||||
emit('refreshWordList',data.category);
|
||||
} else {
|
||||
console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
|
||||
toastStore.onToast('용어 수정이 정상적으로 처리되지 않았습니다.', 'e');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('❌ 용어 수정 중 오류 발생:', err.response?.data || err.message);
|
||||
toastStore.onToast(`용어 수정 실패: ${err.response?.data?.message || '알 수 없는 오류'}`, 'e');
|
||||
// Props
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
cateList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
||||
// cateList emit
|
||||
const emit = defineEmits(['update:cateList', 'refreshWordList', 'updateChecked', 'update:deleteImgIndexList']);
|
||||
|
||||
// 프로필 이미지
|
||||
const defaultProfile = "/img/icons/icon.png";
|
||||
// 용어집 수정
|
||||
const editWord = data => {
|
||||
if (!data.id) {
|
||||
console.error('❌ 수정할 데이터의 ID가 없습니다.');
|
||||
toastStore.onToast('수정할 용어의 ID가 필요합니다.', 'e');
|
||||
return;
|
||||
}
|
||||
|
||||
const getProfileImage = (profilePath) => {
|
||||
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
|
||||
};
|
||||
const param = {
|
||||
WRDDICSEQ: data.id,
|
||||
WRDDICCAT: data.category,
|
||||
WRDDICTTL: data.title,
|
||||
WRDDICCON: $common.deltaAsJson(data.content),
|
||||
};
|
||||
|
||||
const setDefaultImage = (event) => {
|
||||
event.target.src = defaultProfile;
|
||||
};
|
||||
// 에디터에 업로드 된 이미지 인덱스 목록
|
||||
if (editorUploadedImgList.value && editorUploadedImgList.value.length > 0) {
|
||||
param.editorUploadedImgList = [...editorUploadedImgList.value];
|
||||
}
|
||||
|
||||
const toggleEdit = async () => {
|
||||
writeStore.toggleItem(props.item.WRDDICSEQ);
|
||||
};
|
||||
// 삭제할 에디터 이미지 인덱스
|
||||
if (editorDeleteImgList.value && editorDeleteImgList.value.length > 0) {
|
||||
param.editorDeleteImgList = [...editorDeleteImgList.value];
|
||||
}
|
||||
|
||||
axios
|
||||
.patch('worddict/updateWord', param)
|
||||
.then(res => {
|
||||
if (res.data.data === 1) {
|
||||
toastStore.onToast('용어가 수정되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
if (writeButton.value) {
|
||||
writeButton.value.resetButton();
|
||||
}
|
||||
emit('refreshWordList', data.category);
|
||||
} else {
|
||||
console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
|
||||
toastStore.onToast('용어 수정이 정상적으로 처리되지 않았습니다.', 'e');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('❌ 용어 수정 중 오류 발생:', err.response?.data || err.message);
|
||||
toastStore.onToast(`용어 수정 실패: ${err.response?.data?.message || '알 수 없는 오류'}`, 'e');
|
||||
});
|
||||
};
|
||||
|
||||
// 에디터 이미지 수정, 삭제시 반영
|
||||
const handleDeleteEditorImg = item => {
|
||||
editorDeleteImgList.value = item;
|
||||
};
|
||||
|
||||
// 에디터 이미지 추가 시 반영
|
||||
const handleUpdateEditorImg = item => {
|
||||
editorUploadedImgList.value = item;
|
||||
};
|
||||
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
||||
|
||||
// 프로필 이미지
|
||||
const defaultProfile = '/img/icons/icon.png';
|
||||
|
||||
const getProfileImage = profilePath => {
|
||||
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
|
||||
};
|
||||
|
||||
const setDefaultImage = event => {
|
||||
event.target.src = defaultProfile;
|
||||
};
|
||||
|
||||
const toggleEdit = async () => {
|
||||
writeStore.toggleItem(props.item.WRDDICSEQ);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar {
|
||||
cursor: default;
|
||||
}
|
||||
.avatar {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
border: 3px solid;
|
||||
padding: 0.1px;
|
||||
}
|
||||
.user-avatar {
|
||||
border: 3px solid;
|
||||
padding: 0.1px;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
position: absolute;
|
||||
right: 0.7rem;
|
||||
top: 1.2rem;
|
||||
}
|
||||
.edit-btn {
|
||||
position: absolute;
|
||||
right: 0.7rem;
|
||||
top: 1.2rem;
|
||||
}
|
||||
|
||||
.admin-chk {
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: -0.5rem;
|
||||
--bs-form-check-bg: #fff;
|
||||
}
|
||||
.admin-chk {
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: -0.5rem;
|
||||
--bs-form-check-bg: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-if="dataList.length > 0" >
|
||||
<div v-if="dataList.length > 0">
|
||||
<FormSelect
|
||||
name="cate"
|
||||
title="카테고리"
|
||||
@ -11,17 +11,17 @@
|
||||
:is-essential="false"
|
||||
:is-btn="true"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<div>
|
||||
<PlusBtn v-if="!showInput && !isDisabled" @click="toggleInput"/>
|
||||
<EditBtn
|
||||
<template v-slot:append>
|
||||
<div>
|
||||
<PlusBtn v-if="!showInput && !isDisabled" @click="toggleInput" />
|
||||
<EditBtn
|
||||
v-if="showEditBtn"
|
||||
@click="$emit('toggleEdit')"
|
||||
:isToggleEnabled="true"
|
||||
:isActive="writeStore.isItemActive(NumValue)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</FormSelect>
|
||||
</div>
|
||||
<div v-if="dataList.length === 0 || showInput">
|
||||
@ -29,195 +29,201 @@
|
||||
class="justify-content-end"
|
||||
ref="categoryInputRef"
|
||||
title="새 카테고리"
|
||||
:isLabel="dataList.length === 0 ?true : false"
|
||||
:isLabel="dataList.length === 0 ? true : false"
|
||||
name="새 카테고리"
|
||||
@update:modelValue="addCategory = $event"
|
||||
:is-cate-alert="addCategoryAlert"
|
||||
@focusout="handleCategoryFocusout(addCategory)"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<FormInput
|
||||
title="용어"
|
||||
type="text"
|
||||
name="word"
|
||||
:is-essential="true"
|
||||
:is-alert="wordTitleAlert"
|
||||
:modelValue="titleValue"
|
||||
@update:modelValue="wordTitle = $event"
|
||||
:disabled="isDisabled"
|
||||
@keyup="ValidHandler('title')"
|
||||
<FormInput
|
||||
title="용어"
|
||||
type="text"
|
||||
name="word"
|
||||
:is-essential="true"
|
||||
:is-alert="wordTitleAlert"
|
||||
:modelValue="titleValue"
|
||||
@update:modelValue="wordTitle = $event"
|
||||
:disabled="isDisabled"
|
||||
@keyup="ValidHandler('title')"
|
||||
/>
|
||||
<div>
|
||||
<QEditor
|
||||
class=""
|
||||
@keyup="ValidHandler('content')"
|
||||
@update:data="handleContentUpdate"
|
||||
@update:deleteImgIndexList="$emit('update:deleteImgIndexList', $event)"
|
||||
@update:uploadedImgList="$emit('update:uploadedImgList', $event)"
|
||||
@update:imageUrls="imageUrls = $event"
|
||||
:is-alert="wordContentAlert"
|
||||
:initialData="contentValue"
|
||||
/>
|
||||
<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 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 { 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';
|
||||
import EditBtn from '../button/EditBtn.vue';
|
||||
import { useWriteVisibleStore } from '@s/writeVisible';
|
||||
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 EditBtn from '../button/EditBtn.vue';
|
||||
import { useWriteVisibleStore } from '@s/writeVisible';
|
||||
|
||||
const writeStore = useWriteVisibleStore();
|
||||
const writeStore = useWriteVisibleStore();
|
||||
|
||||
const emit = defineEmits(['close','addCategory','addWord', 'toggleEdit']);
|
||||
const emit = defineEmits(['close', 'addCategory', 'addWord', 'toggleEdit', 'update:deleteImgIndexList', 'update:uploadedImgList']);
|
||||
|
||||
//용어제목
|
||||
const wordTitle = ref('');
|
||||
const addCategory = ref('');
|
||||
const content = ref('');
|
||||
const imageUrls = ref([]);
|
||||
//용어제목
|
||||
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);
|
||||
//용어 Vaildation용
|
||||
const wordTitleAlert = ref(false);
|
||||
const wordContentAlert = ref(false);
|
||||
const addCategoryAlert = ref(false);
|
||||
|
||||
//선택 카테고리
|
||||
const selectCategory = ref('');
|
||||
//선택 카테고리
|
||||
const selectCategory = ref('');
|
||||
|
||||
// 제목 상태
|
||||
const computedTitle = computed(() =>
|
||||
wordTitle.value === '' ? props.titleValue : wordTitle.value
|
||||
);
|
||||
// 제목 상태
|
||||
const computedTitle = computed(() => (wordTitle.value === '' ? props.titleValue : wordTitle.value));
|
||||
|
||||
// 카테고리 상태
|
||||
const selectedCategory = computed(() =>
|
||||
selectCategory.value === '' ? props.formValue : selectCategory.value
|
||||
// 카테고리 상태
|
||||
const selectedCategory = computed(() => (selectCategory.value === '' ? props.formValue : selectCategory.value));
|
||||
|
||||
);
|
||||
// 카테고리 입력 중복 ref
|
||||
const categoryInputRef = ref(null);
|
||||
|
||||
// 카테고리 입력 중복 ref
|
||||
const categoryInputRef = ref(null);
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
NumValue: {
|
||||
type: Number,
|
||||
},
|
||||
formValue: {
|
||||
type: [String, Number],
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
},
|
||||
contentValue: {
|
||||
type: String,
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showEditBtn: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
NumValue : {
|
||||
type: Number
|
||||
},
|
||||
formValue : {
|
||||
type:[String, Number]
|
||||
},
|
||||
titleValue : {
|
||||
type:String,
|
||||
},contentValue : {
|
||||
type:String,
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showEditBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
// 카테고리 입력 창
|
||||
const showInput = ref(false);
|
||||
|
||||
// 카테고리 입력 창
|
||||
const showInput = ref(false);
|
||||
|
||||
// 카테고리 입력 토글
|
||||
const toggleInput = () => {
|
||||
showInput.value = !showInput.value;
|
||||
};
|
||||
|
||||
const onChange = (newValue) => {
|
||||
selectCategory.value = newValue.target.value;
|
||||
};
|
||||
|
||||
const ValidHandler = (field) => {
|
||||
if(field == 'title'){
|
||||
wordTitleAlert.value = false;
|
||||
}
|
||||
if(field == 'content'){
|
||||
wordContentAlert.value = false;
|
||||
}
|
||||
|
||||
}
|
||||
const handleContentUpdate = (newContent) => {
|
||||
content.value = newContent;
|
||||
ValidHandler("content"); // 유효성 검사 실행
|
||||
};
|
||||
|
||||
//용어 등록
|
||||
const saveWord = () => {
|
||||
let valid = true;
|
||||
//validation
|
||||
let computedTitleTrim;
|
||||
|
||||
if(computedTitle.value != undefined){
|
||||
computedTitleTrim = computedTitle.value.trim()
|
||||
}
|
||||
|
||||
// 용어 체크
|
||||
if(computedTitleTrim == undefined || computedTitleTrim == ''){
|
||||
wordTitleAlert.value = true;
|
||||
valid = false;
|
||||
} else {
|
||||
wordTitleAlert.value = false;
|
||||
}
|
||||
|
||||
// 내용 확인
|
||||
let inserts = [];
|
||||
if (inserts.length === 0 && content.value?.ops?.length > 0) {
|
||||
inserts = content.value.ops.map(op =>
|
||||
typeof op.insert === 'string' ? op.insert.trim() : op.insert
|
||||
);
|
||||
}
|
||||
// 내용 체크
|
||||
if(content.value == '' || inserts.join('') === ''){
|
||||
wordContentAlert.value = true;
|
||||
valid = false;
|
||||
}else{
|
||||
wordContentAlert.value = false;
|
||||
}
|
||||
const wordData = {
|
||||
id: props.NumValue || null,
|
||||
title: computedTitle.value.trim(),
|
||||
category: selectedCategory.value,
|
||||
content: content.value,
|
||||
// 카테고리 입력 토글
|
||||
const toggleInput = () => {
|
||||
showInput.value = !showInput.value;
|
||||
};
|
||||
if(valid){
|
||||
emit('addWord', wordData, addCategory.value.trim() === ''
|
||||
? (isNaN(selectedCategory.value) ? selectedCategory.value : Number(selectedCategory.value))
|
||||
: addCategory.value);
|
||||
}
|
||||
}
|
||||
|
||||
// 카테고리 focusout 이벤트 핸들러 추가
|
||||
const handleCategoryFocusout = (value) => {
|
||||
if (!value || value.trim() === '') {
|
||||
return;
|
||||
}
|
||||
const valueTrim = value.trim();
|
||||
const existingCategory = props.dataList.find(item => item.label === valueTrim);
|
||||
const onChange = newValue => {
|
||||
selectCategory.value = newValue.target.value;
|
||||
};
|
||||
|
||||
if (existingCategory) {
|
||||
addCategoryAlert.value = true;
|
||||
const ValidHandler = field => {
|
||||
if (field == 'title') {
|
||||
wordTitleAlert.value = false;
|
||||
}
|
||||
if (field == 'content') {
|
||||
wordContentAlert.value = false;
|
||||
}
|
||||
};
|
||||
const handleContentUpdate = newContent => {
|
||||
content.value = newContent;
|
||||
ValidHandler('content'); // 유효성 검사 실행
|
||||
};
|
||||
|
||||
// 중복 시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
if (inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
} else {
|
||||
addCategoryAlert.value = false;
|
||||
}
|
||||
};
|
||||
//용어 등록
|
||||
const saveWord = () => {
|
||||
let valid = true;
|
||||
//validation
|
||||
let computedTitleTrim;
|
||||
|
||||
if (computedTitle.value != undefined) {
|
||||
computedTitleTrim = computedTitle.value.trim();
|
||||
}
|
||||
|
||||
// 용어 체크
|
||||
if (computedTitleTrim == undefined || computedTitleTrim == '') {
|
||||
wordTitleAlert.value = true;
|
||||
valid = false;
|
||||
} else {
|
||||
wordTitleAlert.value = false;
|
||||
}
|
||||
|
||||
// 내용 확인
|
||||
let inserts = [];
|
||||
if (inserts.length === 0 && content.value?.ops?.length > 0) {
|
||||
inserts = content.value.ops.map(op => (typeof op.insert === 'string' ? op.insert.trim() : op.insert));
|
||||
}
|
||||
// 내용 체크
|
||||
if (content.value == '' || inserts.join('') === '') {
|
||||
wordContentAlert.value = true;
|
||||
valid = false;
|
||||
} else {
|
||||
wordContentAlert.value = false;
|
||||
}
|
||||
const wordData = {
|
||||
id: props.NumValue || null,
|
||||
title: computedTitle.value.trim(),
|
||||
category: selectedCategory.value,
|
||||
content: content.value,
|
||||
};
|
||||
if (valid) {
|
||||
emit(
|
||||
'addWord',
|
||||
wordData,
|
||||
addCategory.value.trim() === ''
|
||||
? isNaN(selectedCategory.value)
|
||||
? selectedCategory.value
|
||||
: Number(selectedCategory.value)
|
||||
: addCategory.value,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 카테고리 focusout 이벤트 핸들러 추가
|
||||
const handleCategoryFocusout = value => {
|
||||
if (!value || value.trim() === '') {
|
||||
return;
|
||||
}
|
||||
const valueTrim = value.trim();
|
||||
const existingCategory = props.dataList.find(item => item.label === valueTrim);
|
||||
|
||||
if (existingCategory) {
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
// 중복 시 강제 focus
|
||||
setTimeout(() => {
|
||||
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
|
||||
if (inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
} else {
|
||||
addCategoryAlert.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,55 +1,73 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y d-flex">
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<div class="flex-grow-1">
|
||||
<!-- 타이틀, 검색 -->
|
||||
<SearchBar @update:data="search"/>
|
||||
<div class="d-flex">
|
||||
<!-- 단어 갯수, 작성하기 -->
|
||||
<!-- 왼쪽 사이드바 -->
|
||||
<div class="sidebar position-sticky" style="top: 100px; max-width: 250px; min-width: 250px;">
|
||||
<WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"
|
||||
:isActive="writeStore.activeItemId === 999999"/>
|
||||
<!-- ㄱ ㄴ ㄷ ㄹ -->
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
|
||||
<!-- 카테고리 -->
|
||||
<div v-if="cateList.length" class="mt-3">
|
||||
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true" :selectedCategory="selectedCategory" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 컨텐츠 -->
|
||||
<div class="flex-grow-1">
|
||||
<!-- 작성 -->
|
||||
<div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5 mb-2">
|
||||
<DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
|
||||
</div>
|
||||
<!-- 용어 리스트 -->
|
||||
<div>
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="fw-bold text-danger">{{ error }}</div>
|
||||
<!-- 단어 목록 -->
|
||||
<ul v-if="total > 0" class="ms-3 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in wordList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
v-model:cateList="cateList"
|
||||
@refreshWordList="refreshWordList"
|
||||
@updateChecked="updateCheckedItems"
|
||||
<div class="container-xxl flex-grow-1 container-p-y d-flex">
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<div class="flex-grow-1">
|
||||
<!-- 타이틀, 검색 -->
|
||||
<SearchBar @update:data="search" />
|
||||
<div class="d-flex">
|
||||
<!-- 단어 갯수, 작성하기 -->
|
||||
<!-- 왼쪽 사이드바 -->
|
||||
<div class="sidebar position-sticky" style="top: 100px; max-width: 250px; min-width: 250px">
|
||||
<WriteButton
|
||||
ref="writeButton"
|
||||
@click="writeStore.toggleItem(999999)"
|
||||
:isToggleEnabled="true"
|
||||
:isActive="writeStore.activeItemId === 999999"
|
||||
/>
|
||||
<!-- ㄱ ㄴ ㄷ ㄹ -->
|
||||
<DictAlphabetFilter
|
||||
@update:data="handleSelectedAlphabetChange"
|
||||
:indexCategory="indexCategory"
|
||||
:selectedAl="selectedAlphabet"
|
||||
/>
|
||||
<!-- 카테고리 -->
|
||||
<div v-if="cateList.length" class="mt-3">
|
||||
<CategoryBtn
|
||||
:lists="cateList"
|
||||
@update:data="handleSelectedCategoryChange"
|
||||
:showAll="true"
|
||||
:selectedCategory="selectedCategory"
|
||||
/>
|
||||
</ul>
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 컨텐츠 -->
|
||||
<div class="flex-grow-1">
|
||||
<!-- 작성 -->
|
||||
<div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5 mb-2">
|
||||
<DictWrite
|
||||
@close="writeStore.closeAll()"
|
||||
:dataList="cateList"
|
||||
@addWord="addWord"
|
||||
@update:deleteImgIndexList="handleDeleteEditorImg"
|
||||
@update:uploadedImgList="handleUpdateEditorImg"
|
||||
/>
|
||||
</div>
|
||||
<!-- 용어 리스트 -->
|
||||
<div>
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="fw-bold text-danger">{{ error }}</div>
|
||||
<!-- 단어 목록 -->
|
||||
<ul v-if="total > 0" class="ms-3 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in wordList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
v-model:cateList="cateList"
|
||||
@refreshWordList="refreshWordList"
|
||||
@updateChecked="updateCheckedItems"
|
||||
/>
|
||||
</ul>
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
|
||||
<i class="bx bx-trash"></i>
|
||||
</button>
|
||||
|
||||
<button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
|
||||
<i class="bx bx-trash"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -64,7 +82,7 @@
|
||||
import commonApi from '@/common/commonApi';
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
import { useWriteVisibleStore } from '@s/writeVisible';
|
||||
import LoadingSpinner from "@v/LoadingPage.vue";
|
||||
import LoadingSpinner from '@v/LoadingPage.vue';
|
||||
|
||||
// 작성창 구분
|
||||
const writeStore = useWriteVisibleStore();
|
||||
@ -86,7 +104,7 @@
|
||||
|
||||
// 카테고리
|
||||
const { cateList } = commonApi({
|
||||
loadCateList: true
|
||||
loadCateList: true,
|
||||
});
|
||||
|
||||
const selectedCategory = ref('');
|
||||
@ -96,7 +114,6 @@
|
||||
// 체크박스의 name
|
||||
const checkedNames = ref([]);
|
||||
|
||||
|
||||
//선택된 알파벳
|
||||
const selectedAlphabet = ref('');
|
||||
|
||||
@ -106,31 +123,45 @@
|
||||
//검색 정렬
|
||||
const indexCategory = ref([]);
|
||||
|
||||
const editorDeleteImgList = ref([]);
|
||||
const editorUploadedImgList = ref([]);
|
||||
|
||||
// 데이터 로드
|
||||
onMounted(() => {
|
||||
getIndex();
|
||||
writeStore.closeAll();
|
||||
});
|
||||
|
||||
const refreshWordList = (category) => {
|
||||
// 에디터 이미지 수정, 삭제시 반영
|
||||
const handleDeleteEditorImg = item => {
|
||||
editorDeleteImgList.value = item;
|
||||
};
|
||||
|
||||
// 에디터 이미지 추가 시 반영
|
||||
const handleUpdateEditorImg = item => {
|
||||
editorUploadedImgList.value = item;
|
||||
};
|
||||
|
||||
const refreshWordList = category => {
|
||||
selectedCategory.value = category;
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
};
|
||||
|
||||
//용어 목록
|
||||
const getwordList = (searchKeyword='', indexKeyword='', category='') => {
|
||||
axios.get('worddict/getWordList',{
|
||||
//목록조회시 파라미터 전달
|
||||
params: {
|
||||
searchKeyword : searchKeyword,
|
||||
indexKeyword :indexKeyword,
|
||||
category : category
|
||||
}
|
||||
const getwordList = (searchKeyword = '', indexKeyword = '', category = '') => {
|
||||
axios
|
||||
.get('worddict/getWordList', {
|
||||
//목록조회시 파라미터 전달
|
||||
params: {
|
||||
searchKeyword: searchKeyword,
|
||||
indexKeyword: indexKeyword,
|
||||
category: category,
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
// 용어 목록 저장
|
||||
// 용어 목록 저장
|
||||
wordList.value = res.data.data.data;
|
||||
// 총 개수 저장
|
||||
// 총 개수 저장
|
||||
total.value = res.data.data.total;
|
||||
})
|
||||
.catch(err => {
|
||||
@ -140,21 +171,21 @@
|
||||
};
|
||||
//정렬 목록
|
||||
const getIndex = () => {
|
||||
axios.get('worddict/getIndexCategory').then(res=>{
|
||||
if(res.data.status ="OK"){
|
||||
axios.get('worddict/getIndexCategory').then(res => {
|
||||
if ((res.data.status = 'OK')) {
|
||||
indexCategory.value = res.data.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 검색
|
||||
const search = (e) => {
|
||||
const search = e => {
|
||||
searchText.value = e.trim();
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
};
|
||||
|
||||
// 알파벳 선택
|
||||
const handleSelectedAlphabetChange = (newAlphabet) => {
|
||||
const handleSelectedAlphabetChange = newAlphabet => {
|
||||
selectedAlphabet.value = newAlphabet;
|
||||
if (newAlphabet !== null) {
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
@ -165,28 +196,28 @@
|
||||
};
|
||||
|
||||
// 카테고리 선택
|
||||
const handleSelectedCategoryChange = (category) => {
|
||||
const handleSelectedCategoryChange = category => {
|
||||
selectedCategory.value = category;
|
||||
if (category !== null ) {
|
||||
if (category !== null) {
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
if(category == 'all'){
|
||||
if (category == 'all') {
|
||||
getwordList(searchText.value, selectedAlphabet.value, '');
|
||||
}
|
||||
} else {
|
||||
wordList.value = [];
|
||||
total.value = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 용어집 등록
|
||||
const addWord = (wordData, data) => {
|
||||
let category = null;
|
||||
let newCodName = '';
|
||||
let newCodName = '';
|
||||
// 카테고리 체크
|
||||
if(typeof(data) == 'number'){
|
||||
if (typeof data == 'number') {
|
||||
category = data;
|
||||
newCodName = '';
|
||||
}else{
|
||||
} else {
|
||||
const lastCategory = cateList.value[cateList.value.length - 1];
|
||||
category = lastCategory ? lastCategory.value + 1 : 600101;
|
||||
newCodName = data.trim();
|
||||
@ -194,32 +225,42 @@
|
||||
sendWordRequest(category, wordData, newCodName);
|
||||
};
|
||||
const sendWordRequest = (category, wordData, data) => {
|
||||
console.log(category,'category')
|
||||
console.log(category, 'category');
|
||||
const payload = {
|
||||
WRDDICCAT: category,
|
||||
WRDDICTTL: wordData.title,
|
||||
WRDDICCON: $common.deltaAsJson(wordData.content),
|
||||
};
|
||||
payload.CMNCODNAM = data;
|
||||
axios.post('worddict/insertWord', payload).then(res => {
|
||||
if (res.data.status === 'OK') {
|
||||
toastStore.onToast('용어가 등록 되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
if (writeButton.value) {
|
||||
writeButton.value.resetButton();
|
||||
}
|
||||
selectedCategory.value = category;
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
getIndex();
|
||||
if(res.data.data == '2'){
|
||||
const newCategory = { label: data, value: category };
|
||||
cateList.value = [...cateList.value,newCategory];
|
||||
}
|
||||
selectedAlphabet.value = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
payload.CMNCODNAM = data;
|
||||
|
||||
// 에디터에 업로드 된 이미지 인덱스 목록
|
||||
if (editorUploadedImgList.value && editorUploadedImgList.value.length > 0) {
|
||||
payload.editorUploadedImgList = [...editorUploadedImgList.value];
|
||||
}
|
||||
|
||||
// 삭제할 에디터 이미지 인덱스
|
||||
if (editorDeleteImgList.value && editorDeleteImgList.value.length > 0) {
|
||||
payload.editorDeleteImgList = [...editorDeleteImgList.value];
|
||||
}
|
||||
|
||||
axios.post('worddict/insertWord', payload).then(res => {
|
||||
if (res.data.status === 'OK') {
|
||||
toastStore.onToast('용어가 등록 되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
if (writeButton.value) {
|
||||
writeButton.value.resetButton();
|
||||
}
|
||||
selectedCategory.value = category;
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
getIndex();
|
||||
if (res.data.data == '2') {
|
||||
const newCategory = { label: data, value: category };
|
||||
cateList.value = [...cateList.value, newCategory];
|
||||
}
|
||||
selectedAlphabet.value = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 체크 상태 업데이트
|
||||
const updateCheckedItems = (checked, id, name) => {
|
||||
@ -236,47 +277,45 @@
|
||||
|
||||
// 용어집 삭제
|
||||
const deleteCheckedItems = () => {
|
||||
axios
|
||||
.patch('worddict/deleteword', {
|
||||
idList: Object.values(checkedNames.value),
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data.status == 'OK') {
|
||||
toastStore.onToast('용어 삭제가 완료되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
getwordList();
|
||||
|
||||
axios.patch('worddict/deleteword', {
|
||||
idList: Object.values(checkedNames.value)
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data.status == 'OK') {
|
||||
toastStore.onToast('용어 삭제가 완료되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
getwordList();
|
||||
|
||||
// 삭제 후 초기화
|
||||
checkedItems.value = [];
|
||||
checkedNames.value = [];
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
toastStore.onToast('오류가 발생했습니다. 다시 시도해주세요.', 'e');
|
||||
});
|
||||
|
||||
// 삭제 후 초기화
|
||||
checkedItems.value = [];
|
||||
checkedNames.value = [];
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
toastStore.onToast('오류가 발생했습니다. 다시 시도해주세요.', 'e');
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-del-btn {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.admin-del-btn {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 5px;
|
||||
height: fit-content;
|
||||
}
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 5px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.DictCard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.DictCard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user