용어집 수정
This commit is contained in:
Dang
parent
28cfb7fcc5
commit
62c97e0a18
@ -40,26 +40,26 @@ const props = defineProps({
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
type: [String, Number],
|
||||
default: '0',
|
||||
require: false,
|
||||
},
|
||||
isAlert : {
|
||||
isAlert: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
},
|
||||
isLabel : {
|
||||
isLabel: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
isRow : {
|
||||
isRow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
isCommon : {
|
||||
isCommon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
@ -69,11 +69,19 @@ const props = defineProps({
|
||||
const emit = defineEmits(['update:data']);
|
||||
const selectData = ref(props.value);
|
||||
|
||||
// data 변경 감지
|
||||
// props.value의 변경을 감지하는 watch 추가
|
||||
watch(() => props.value, (newValue) => {
|
||||
selectData.value = newValue;
|
||||
}, { immediate: true });
|
||||
|
||||
// data 변경 감지 수정
|
||||
watch(() => props.data, (newData) => {
|
||||
if (props.isCommon && newData.length > 0) {
|
||||
selectData.value = newData[0].value;
|
||||
emit('update:data', selectData.value);
|
||||
// value prop이 '0'(기본값)일 때만 첫번째 아이템 선택
|
||||
if (props.value === '0') {
|
||||
selectData.value = newData[0].value;
|
||||
emit('update:data', selectData.value);
|
||||
}
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
@ -81,4 +89,4 @@ watch(() => props.data, (newData) => {
|
||||
watch(selectData, (newValue) => {
|
||||
emit('update:data', newValue);
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
@ -1,69 +1,146 @@
|
||||
<template>
|
||||
<li class="mt-5 card p-5">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="w-100 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 />
|
||||
</div>
|
||||
<p class="mt-5" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
|
||||
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
||||
<div class="d-flex flex-wrap align-items-center mb-50">
|
||||
<div class="avatar avatar-sm me-2">
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.author.profileImage)"
|
||||
alt="최초 작성자"
|
||||
:style="{ borderColor: item.author.color}"
|
||||
/>
|
||||
<DictWrite
|
||||
v-if="isWriteVisible"
|
||||
@close="isWriteVisible = false"
|
||||
:dataList="cateList"
|
||||
@addCategory="addCategory"
|
||||
:formValue="item.WRDDICCAT"
|
||||
:titleValue="item.WRDDICTTL"
|
||||
:contentValue="$common.contentToHtml(item.WRDDICCON)"
|
||||
/>
|
||||
|
||||
<div v-else>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="w-100 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>
|
||||
<div>
|
||||
<p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
|
||||
</div>
|
||||
<p class="mt-5" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
|
||||
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
||||
<div class="d-flex flex-wrap align-items-center mb-50">
|
||||
<div class="avatar avatar-sm me-2">
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.author.profileImage)"
|
||||
alt="최초 작성자"
|
||||
:style="{ borderColor: item.author.color}"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
||||
<div class="d-flex flex-wrap align-items-center mb-50">
|
||||
<div class="avatar avatar-sm me-2">
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.lastEditor.profileImage)"
|
||||
alt="최근 작성자"
|
||||
:style="{ borderColor: item.lastEditor.color}"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
||||
<div class="d-flex flex-wrap align-items-center mb-50">
|
||||
<div class="avatar avatar-sm me-2">
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getProfileImage(item.lastEditor.profileImage)"
|
||||
alt="최근 작성자"
|
||||
:style="{ borderColor: item.lastEditor.color}"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-btn">
|
||||
<EditBtn @click="toggleWriteVisible" />
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from "@api";
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
import { ref, toRefs } from 'vue';
|
||||
import EditBtn from '@/components/button/EditBtn.vue';
|
||||
import $api from '@api';
|
||||
import DictWrite from './DictWrite.vue';
|
||||
|
||||
const toastStore = useToastStore();
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
cateList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
}
|
||||
});
|
||||
|
||||
// 카테고리
|
||||
const localCateList = ref([...props.cateList]);
|
||||
// 선택 카테고리
|
||||
const selectedCategory = ref('');
|
||||
|
||||
// cateList emit
|
||||
const emit = defineEmits(['update:cateList']);
|
||||
|
||||
// 글 수정 상태
|
||||
const isWriteVisible = ref(false);
|
||||
|
||||
|
||||
// 글 수정 toggle
|
||||
const toggleWriteVisible = () => {
|
||||
isWriteVisible.value = !isWriteVisible.value;
|
||||
};
|
||||
|
||||
//카테고리 등록 수정
|
||||
const addCategory = (data) => {
|
||||
try {
|
||||
const lastCategory = localCateList.value.length > 0
|
||||
? localCateList.value[localCateList.value.length - 1]
|
||||
: null;
|
||||
const newValue = lastCategory ? lastCategory.value + 1 : 600101;
|
||||
|
||||
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;
|
||||
|
||||
// 부모에게 전달
|
||||
emit('update:cateList', localCateList.value);
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('카테고리 추가 중 오류:', err);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('카테고리 추가 함수 오류:', err);
|
||||
}
|
||||
}
|
||||
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
||||
// 날짜
|
||||
|
||||
// 날짜 포맷
|
||||
const formatDate = (dateString) => new Date(dateString).toLocaleString();
|
||||
// 이미지
|
||||
|
||||
// 프로필 이미지
|
||||
const getProfileImage = (imagePath) =>
|
||||
imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
|
||||
imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 동그란 테두리 설정 */
|
||||
.user-avatar {
|
||||
border: 3px solid; /* 테두리 */
|
||||
padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
|
||||
border: 3px solid; /* 테두리 */
|
||||
padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
|
||||
}
|
||||
</style>
|
||||
|
||||
.edit-btn {
|
||||
position: absolute;
|
||||
right: 0.7rem;
|
||||
top: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
@ -9,6 +9,7 @@
|
||||
:is-common="true"
|
||||
@update:data="selectCategory = $event"
|
||||
@change="onChange"
|
||||
:value="formValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2 btn-margin">
|
||||
@ -34,11 +35,13 @@
|
||||
name="word"
|
||||
:is-essential="true"
|
||||
:is-alert="wordTitleAlert"
|
||||
:modelValue="titleValue"
|
||||
@update:modelValue="wordTitle = $event"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" />
|
||||
{{ contentValue }}
|
||||
<div class="text-end mt-5">
|
||||
<button class="btn btn-primary" @click="saveWord">
|
||||
<i class="bx bx-check"></i>
|
||||
@ -75,17 +78,17 @@ const props = defineProps({
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
formValue : {
|
||||
type:[String, Number]
|
||||
},
|
||||
titleValue : {
|
||||
type:String,
|
||||
},contentValue : {
|
||||
type:String
|
||||
}
|
||||
});
|
||||
|
||||
// 데이터 포맷 수정
|
||||
// const formattedDataList = computed(() =>
|
||||
// props.dataList.map(item => ({
|
||||
// label: item.CMNCODNAM,
|
||||
// value: item.CMNCODVAL
|
||||
// }))
|
||||
// );
|
||||
|
||||
// 카테고리 입력 창
|
||||
const showInput = ref(false);
|
||||
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
v-for="item in wordList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
:cateList="cateList"
|
||||
/>
|
||||
</ul>
|
||||
|
||||
@ -91,6 +92,7 @@
|
||||
const { cateList } = commonApi({
|
||||
loadCateList: true
|
||||
});
|
||||
|
||||
const selectedCategory = ref('');
|
||||
const selectCategory = ref('');
|
||||
|
||||
@ -167,8 +169,8 @@
|
||||
if(res.data.data == '1'){
|
||||
toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
|
||||
const newCategory = { label: data, value: newValue };
|
||||
cateList.value.unshift(newCategory);
|
||||
selectCategory.value = newCategory.CMNCODVAL;
|
||||
cateList.value = [newCategory, ...cateList.value];
|
||||
selectedCategory.value = newCategory.value;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user