log, 프로젝트 수정
This commit is contained in:
yoon
parent
26041d4b90
commit
e81127ee8a
@ -29,44 +29,98 @@
|
||||
<i class="bx bxs-map"></i>
|
||||
<div class="ms-2">주소</div>
|
||||
<div class="ms-12">{{ address }}</div>
|
||||
<button type="button" class="btn btn-info ms-auto">log</button>
|
||||
<button type="button" class="btn ms-auto text-white zindex-5" :style="`background-color: ${projctCol} !important;`" @click="openModal">log</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CenterModal :display="isModalOpen" @close="closeModal">
|
||||
<template #title> Log </template>
|
||||
<template #body>
|
||||
<div class="ms-4 mt-2" v-if="logData">
|
||||
<p class="mb-1">{{ logData.createDate }}</p>
|
||||
<strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
|
||||
</div>
|
||||
|
||||
<div class="log-item" v-if="logData?.updateDate">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bx bx-edit me-2"></i>
|
||||
<strong>수정 정보</strong>
|
||||
</div>
|
||||
<div class="ms-4 mt-2">
|
||||
<p class="mb-1">{{ logData.updateDate }}</p>
|
||||
<p class="mb-0 text-muted">[{{ logData.updater }}] 프로젝트 수정</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<template #footer>
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">닫기</button>
|
||||
</template>
|
||||
</CenterModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineProps } from 'vue';
|
||||
import UserList from '../user/UserList.vue';
|
||||
import { defineProps, ref } from 'vue';
|
||||
import UserList from '@c/user/UserList.vue';
|
||||
import CenterModal from '../modal/CenterModal.vue';
|
||||
import $api from '@api';
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
strdate: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
enddate: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
address: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
projctSeq: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
});
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
strdate: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
enddate: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
address: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
projctSeq: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
projctCol: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(['click']);
|
||||
|
||||
const isModalOpen = ref(false);
|
||||
const logData = ref(null);
|
||||
|
||||
const fetchLogData = async () => {
|
||||
try {
|
||||
const response = await $api.get(`project/log/${props.projctSeq}`);
|
||||
logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
|
||||
} catch (error) {
|
||||
console.error('로그 정보 조회 실패:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const openModal = async () => {
|
||||
await fetchLogData();
|
||||
isModalOpen.value = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
isModalOpen.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<p class="text-muted mt-4">게시물이 없습니다.</p>
|
||||
</div>
|
||||
|
||||
<div v-for="post in projectList" :key="post.PROJCTSEQ">
|
||||
<div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
|
||||
<ProjectCard
|
||||
:title="post.PROJCTNAM"
|
||||
:description="post.PROJCTDES"
|
||||
@ -12,27 +12,144 @@
|
||||
:enddate="post.PROJCTEND"
|
||||
:address="post.PROJCTARR + ' ' + post.PROJCTDTL"
|
||||
:projctSeq="post.PROJCTSEQ"
|
||||
:projctCol="post.projctcolor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CenterModal :display="isModalOpen" @close="closeModal">
|
||||
<template #title> 프로젝트 수정 </template>
|
||||
<template #body>
|
||||
<FormInput
|
||||
title="이름"
|
||||
name="name"
|
||||
:is-essential="true"
|
||||
:is-alert="nameAlert"
|
||||
v-model="selectedProject.PROJCTNAM"
|
||||
/>
|
||||
|
||||
<FormSelect
|
||||
title="컬러"
|
||||
name="color"
|
||||
:is-essential="true"
|
||||
:is-label="true"
|
||||
:is-common="true"
|
||||
:data="allColors"
|
||||
v-model="selectedProject.projctcolor"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
title="시작일"
|
||||
type="date"
|
||||
name="startDay"
|
||||
v-model="selectedProject.PROJCTSTR"
|
||||
:is-essential="true"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
title="종료일"
|
||||
type="date"
|
||||
name="endDay"
|
||||
v-model="selectedProject.PROJCTEND"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
title="설명"
|
||||
name="description"
|
||||
v-model="selectedProject.PROJCTDES"
|
||||
/>
|
||||
|
||||
<ArrInput
|
||||
title="주소"
|
||||
name="address"
|
||||
:is-essential="true"
|
||||
:is-row="true"
|
||||
v-model="selectedProject"
|
||||
@update:data="updateAddress"
|
||||
/>
|
||||
|
||||
</template>
|
||||
<template #footer>
|
||||
<button class="btn btn-secondary" @click="closeModal">Close</button>
|
||||
<button class="btn btn-primary" @click="handleSubmit">Save</button>
|
||||
</template>
|
||||
</CenterModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import ProjectCard from './ProjectCard.vue';
|
||||
import { onMounted } from 'vue';
|
||||
import $api from '@api';
|
||||
import { computed, ref } from 'vue';
|
||||
import ProjectCard from './ProjectCard.vue';
|
||||
import { onMounted } from 'vue';
|
||||
import $api from '@api';
|
||||
import CenterModal from '@c/modal/CenterModal.vue';
|
||||
import FormInput from '@c/input/FormInput.vue';
|
||||
import FormSelect from '@c/input/FormSelect.vue';
|
||||
import commonApi from '@/common/commonApi';
|
||||
import ArrInput from '../input/ArrInput.vue';
|
||||
|
||||
const projectList = ref([]);
|
||||
const projectList = ref([]);
|
||||
const isModalOpen = ref(false);
|
||||
|
||||
onMounted(()=>{
|
||||
getProjectList();
|
||||
})
|
||||
const getProjectList = () => {
|
||||
$api.get('project/select').then((res) => {
|
||||
projectList.value = res.data.data.projectList;
|
||||
})
|
||||
}
|
||||
const nameAlert = ref(false);
|
||||
const selectedProject = ref({
|
||||
PROJCTNAM: '',
|
||||
projctcolor: '',
|
||||
PROJCTSTR: '',
|
||||
PROJCTEND: '',
|
||||
PROJCTZIP: '',
|
||||
PROJCTARR: '',
|
||||
PROJCTDTL: '',
|
||||
PROJCTDES: '',
|
||||
PROJCTCOL: '',
|
||||
});
|
||||
|
||||
const { colorList } = commonApi({
|
||||
loadColor: true,
|
||||
colorType: 'YNP',
|
||||
});
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getProjectList();
|
||||
});
|
||||
|
||||
// 프로젝트 목록 불러오기
|
||||
const getProjectList = () => {
|
||||
$api.get('project/select').then(res => {
|
||||
projectList.value = res.data.data.projectList;
|
||||
});
|
||||
};
|
||||
|
||||
const openModal = (post) => {
|
||||
isModalOpen.value = true;
|
||||
selectedProject.value = { ...post };
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
isModalOpen.value = false;
|
||||
};
|
||||
|
||||
// 현재 프로젝트 색상 + 사용하지 않은 색상
|
||||
const allColors = computed(() => {
|
||||
// 기존 색상 추가
|
||||
const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
|
||||
|
||||
// colorList에 기존 색상을 추가
|
||||
return [existingColor, ...colorList.value];
|
||||
});
|
||||
|
||||
const updateAddress = (addressData) => {
|
||||
selectedProject.value = {
|
||||
...selectedProject.value,
|
||||
PROJCTZIP: addressData.postcode,
|
||||
PROJCTARR: addressData.address,
|
||||
PROJCTDTL: addressData.detailAddress
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const handleSubmit = () => {
|
||||
|
||||
console.log(selectedProject.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user