localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into project-list

Browse Source
This commit is contained in:
yoon 2025-02-20 15:21:56 +09:00
commit b0239bacce
6 changed files with 128 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@
v-model="inputValue"
:maxLength="maxlength"
:placeholder="title"
:disabled="disabled"
/>
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
{{ title }}을 확인해주세요.
@ -60,6 +61,10 @@ const props = defineProps({
default: true,
required: false,
},
disabled: {
type: Boolean,
default: false,
}
});
// Emits 정의

6
src/components/input/FormSelect.vue
View File

@ -5,7 +5,7 @@
<span :class="isEssential ? 'link-danger' : 'none'">*</span>
</label>
<div :class="isRow ? 'col-md-10' : 'col-md-12'">
<select class="form-select" :id="name" v-model="selectData">
<select class="form-select" :id="name" v-model="selectData" :disabled="disabled">
<option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
{{ isCommon ? item.label : item }}
</option>
@ -63,6 +63,10 @@ const props = defineProps({
type: Boolean,
default: false,
required: false,
},
disabled: {
type: Boolean,
default: false
}
});

3
src/components/wordDict/DictAlphabetFilter.vue
View File

@ -43,6 +43,9 @@ const selectAlphabet = (alphabet) => {
</script>
<style scoped>
.btn {
min-width: 56px;
}
@media (max-width: 768px) {
.alphabet-list {

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

@ -13,7 +13,15 @@
/>
<div v-else>
<div class="d-flex align-items-center">
<input
v-if="userStore.user.role == 'ROLE_ADMIN'"
type="checkbox"
class="form-check-input admin-chk"
:name="item.WRDDICSEQ"
id=""
@change="toggleCheck($event)"
>
<div class="d-flex align-ite-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>
@ -34,7 +42,10 @@
</div>
</div>
</div>
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
<div
v-if="item.author.createdAt !== item.lastEditor.updatedAt"
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
@ -64,6 +75,11 @@ import EditBtn from '@/components/button/EditBtn.vue';
import $api from '@api';
import DictWrite from './DictWrite.vue';
import { useUserInfoStore } from '@s/useUserInfoStore';
// 유저 구분
const userStore = useUserInfoStore();
const toastStore = useToastStore();
const { appContext } = getCurrentInstance();
@ -87,7 +103,7 @@ const localCateList = ref([...props.cateList]);
const selectedCategory = ref('');
// cateList emit
const emit = defineEmits(['update:cateList','refreshWordList']);
const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
// 글 수정 상태
const isWriteVisible = ref(false);
@ -171,6 +187,12 @@ const formatDate = (dateString) => new Date(dateString).toLocaleString();
// 프로필 이미지
const getProfileImage = (imagePath) =>
imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
// 체크 상태 변경 시 부모로 전달
const toggleCheck = (event) => {
emit('updateChecked', event.target.checked, props.item.WRDDICSEQ, event.target.name);
};
</script>
<style scoped>
@ -185,4 +207,12 @@ const getProfileImage = (imagePath) =>
right: 0.7rem;
top: 1.2rem;
}
.admin-chk {
position: absolute;
left: -0.5rem;
top: -0.5rem;
--bs-form-check-bg: #fff;
}
</style>

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

@ -10,10 +10,11 @@
@update:data="selectCategory = $event"
@change="onChange"
:value="formValue"
:disabled="isDisabled"
/>
</div>
<div class="col-2 btn-margin">
<PlusBtn @click="toggleInput"/>
<PlusBtn v-if="userStore.user.role == 'ROLE_ADMIN'" @click="toggleInput"/>
</div>
</div>
@ -37,6 +38,7 @@
:is-alert="wordTitleAlert"
:modelValue="titleValue"
@update:modelValue="wordTitle = $event"
:disabled="isDisabled"
/>
</div>
<div>
@ -56,6 +58,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';
// 유저 구분
const userStore = useUserInfoStore();
// 유저 상태에 따른 disabled
const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
const emit = defineEmits(['close','addCategory','addWord']);
@ -73,6 +82,11 @@ const addCategoryAlert = ref(false);
//선택 카테고리
const selectCategory = ref('');
// 제목 상태
const computedTitle = computed(() =>
wordTitle.value === '' ? props.titleValue : wordTitle.value
);
// 카테고리 상태
const selectedCategory = computed(() =>
selectCategory.value === '' ? props.formValue : selectCategory.value
@ -104,15 +118,18 @@ const toggleInput = () => {
showInput.value = !showInput.value;
};
// 카테고리 저장
const saveInput = () => {
if(addCategory.value == ''){
addCategoryAlert.value = true;
return;
}else {
addCategoryAlert.value = false;
}
// console.log('입력값 저장됨!',addCategory.value);
emit('addCategory', addCategory.value);
showInput.value = false;
// showInput.value = false;
};
const onChange = (newValue) => {
@ -122,9 +139,9 @@ const onChange = (newValue) => {
//용어 등록
const saveWord = () => {
//validation
// 용어 체크
if(wordTitle.value == ''){
if(computedTitle.value == '' || computedTitle.length == 0){
wordTitleAlert.value = true;
return;
}
@ -137,7 +154,7 @@ const saveWord = () => {
const wordData = {
id: props.NumValue || null,
title: wordTitle.value,
title: computedTitle.value,
category: selectedCategory.value,
content: content.value,
};

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

@ -1,6 +1,6 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<!-- {{ userStore.user.role == 'ROLE_ADMIN' ? '관리자' : '일반인'}} -->
<div class="card p-5">
<!-- 타이틀, 검색 -->
<div class="row">
@ -34,32 +34,37 @@
</div>
</div>
<!-- 용어 리스트 -->
<div class="mt-10">
<!-- 로딩 중일 때 -->
<div v-if="loading">로딩 중...</div>
<!-- 용어 리스트 -->
<div class="mt-10">
<!-- 로딩 중일 때 -->
<div v-if="loading">로딩 중...</div>
<!-- 에러 메시지 -->
<div v-if="error" class="error">{{ error }}</div>
<!-- 에러 메시지 -->
<div v-if="error" class="error">{{ error }}</div>
<!-- 단어 목록 -->
<ul v-if="total > 0" class="px-0 list-unstyled">
<DictCard
v-for="item in wordList"
:key="item.WRDDICSEQ"
:item="item"
:cateList="cateList"
@refreshWordList="getwordList"
/>
</ul>
<!-- 단어 목록 -->
<ul v-if="total > 0" class="px-0 list-unstyled">
<DictCard
v-for="item in wordList"
:key="item.WRDDICSEQ"
:item="item"
:cateList="cateList"
@refreshWordList="getwordList"
@updateChecked="updateCheckedItems"
/>
</ul>
<!-- 데이터가 없을 때 -->
<div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
<!-- 데이터가 없을 때 -->
<div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
</div>
</div>
</div>
<button v-if="isAnyChecked" class="btn btn-danger admin-del-btn">
<i class="bx bx-trash"></i>
</button>
</template>
<script setup>
@ -73,6 +78,10 @@
import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
import commonApi from '@/common/commonApi';
import { useToastStore } from '@s/toastStore';
import { useUserInfoStore } from '@s/useUserInfoStore';
// 유저 구분
const userStore = useUserInfoStore();
const { appContext } = getCurrentInstance();
const $common = appContext.config.globalProperties.$common;
@ -97,6 +106,11 @@
const selectedCategory = ref('');
const selectCategory = ref('');
// 체크박스 체크된 갯수
const checkedItems = ref([]);
// 체크박스의 name
const checkedNames = ref([]);
//선택된 알파벳
const selectedAlphabet = ref('');
@ -163,7 +177,6 @@
const addCategory = (data) =>{
const lastCategory = cateList.value[cateList.value.length - 1];
const newValue = lastCategory ? lastCategory.value + 1 : 600101;
axios.post('worddict/insertCategory',{
CMNCODNAM: data
}).then(res => {
@ -172,6 +185,8 @@
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');
}
})
}
@ -190,10 +205,34 @@
})
};
// 체크 상태 업데이트
const updateCheckedItems = (checked, id, name) => {
if (checked) {
checkedItems.value.push(id);
checkedNames.value.push(name);
} else {
checkedItems.value = checkedItems.value.filter(item => item !== id);
checkedNames.value = checkedNames.value.filter(item => item !== name);
}
// 콘솔에 현재 체크된 name 값 출력
console.log("현재 체크된 name 값:", checkedNames.value);
};
const isAnyChecked = computed(() => checkedItems.value.length > 0);
</script>
<style scoped>
.admin-del-btn {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 3rem;
height: 3rem;
}
.error {
color: red;
font-weight: bold;